// Request-a-quote form — sits near the bottom of the homepage.
// No backend. On submit, builds a formatted WhatsApp message from the
// fields and opens wa.me with it prefilled. Matches the existing pattern
// of every other WhatsApp affordance on the site.

(function () {
  function buildMessage({ name, phone, email, details }) {
    const lines = ['New quote request from the website:', ''];
    if (name)    lines.push(`Name: ${name}`);
    if (phone)   lines.push(`Phone: ${phone}`);
    if (email)   lines.push(`Email: ${email}`);
    if (details) lines.push('', 'Project details:', details);
    return lines.join('\n');
  }

  window.QuoteForm = function QuoteForm() {
    const [name, setName] = React.useState('');
    const [phone, setPhone] = React.useState('');
    const [email, setEmail] = React.useState('');
    const [details, setDetails] = React.useState('');
    const [touched, setTouched] = React.useState(false);

    const nameValid = name.trim().length >= 2;
    const phoneValid = phone.trim().length >= 7;
    const formValid = nameValid && phoneValid;

    function onSubmit(e) {
      e.preventDefault();
      setTouched(true);
      if (!formValid) return;
      const text = buildMessage({ name, phone, email, details });
      window.open(window.waUrl(text), '_blank', 'noopener');
    }

    return (
      <section id="quote" className="quote-section" aria-labelledby="quote-h">
        <div className="rail quote-inner">
          <div className="quote-head">
            <div className="label-mono">Get a quote</div>
            <h2 id="quote-h" className="quote-h">
              Tell us what you need.{' '}
              <span className="quote-h-accent">We'll reply within a few hours.</span>
            </h2>
            <p className="quote-sub">
              Drop your details below — we'll come back via WhatsApp with stock, pricing, and lead time. No account or backend; the form opens WhatsApp with your message prefilled.
            </p>
          </div>

          <form className="quote-form" onSubmit={onSubmit} noValidate>
            <div className="quote-field">
              <label htmlFor="quote-name">
                Name <span className="quote-req" aria-hidden="true">*</span>
              </label>
              <input
                id="quote-name"
                type="text"
                value={name}
                onChange={e => setName(e.target.value)}
                autoComplete="name"
                required
                aria-invalid={touched && !nameValid}
              />
            </div>

            <div className="quote-field">
              <label htmlFor="quote-phone">
                Phone <span className="quote-req" aria-hidden="true">*</span>
              </label>
              <input
                id="quote-phone"
                type="tel"
                value={phone}
                onChange={e => setPhone(e.target.value)}
                autoComplete="tel"
                inputMode="tel"
                placeholder="+971 ..."
                required
                aria-invalid={touched && !phoneValid}
              />
            </div>

            <div className="quote-field">
              <label htmlFor="quote-email">Email <span className="quote-opt">(optional)</span></label>
              <input
                id="quote-email"
                type="email"
                value={email}
                onChange={e => setEmail(e.target.value)}
                autoComplete="email"
                inputMode="email"
              />
            </div>

            <div className="quote-field quote-field-wide">
              <label htmlFor="quote-details">
                Project details <span className="quote-opt">(optional)</span>
              </label>
              <textarea
                id="quote-details"
                rows="4"
                value={details}
                onChange={e => setDetails(e.target.value)}
                placeholder="Materials, quantities, delivery site, deadline — whatever helps us scope it."
              />
            </div>

            <div className="quote-submit-row">
              <button type="submit" className="quote-submit" disabled={touched && !formValid}>
                {window.Icon.whatsapp({ size: 16 })}
                <span>Send via WhatsApp</span>
                <span aria-hidden="true">→</span>
              </button>
              {touched && !formValid && (
                <span className="quote-error" role="status">
                  Name and phone are required.
                </span>
              )}
            </div>
          </form>
        </div>
      </section>
    );
  };
})();