// EstimateForm.jsx — two-column minimal form + contact info (Web3Forms, text-only)
// NOTE: Web3Forms free plan does NOT support file uploads (Pro only), so photos are
// routed to text/email. To enable in-form photo upload later, upgrade Web3Forms to Pro
// (or switch backend) and re-add an <input type="file" name="attachment" />.
const { useState: useStateForm } = React;

const WEB3FORMS_KEY = "d1b1278e-bca4-4946-b1ec-32087638b5ae";

function Field({ label, children }) {
  return (
    <label className="field">
      <span className="field-label">{label}</span>
      {children}
    </label>
  );
}

function Radios({ name, options }) {
  const [val, setVal] = useStateForm('');
  return (
    <div className="radios">
      {options.map(o => (
        <button type="button" key={o} onClick={() => setVal(o)} className={`radio-pill ${val === o ? 'is-selected' : ''}`}>
          {o}
        </button>
      ))}
      <input type="hidden" name={name} value={val} />
    </div>
  );
}

function EstimateForm() {
  const [status, setStatus] = useStateForm('idle'); // idle | sending | success | error

  async function handleSubmit(e) {
    e.preventDefault();
    const form = e.target;
    const formData = new FormData(form);
    formData.append('access_key', WEB3FORMS_KEY);

    setStatus('sending');
    try {
      const res = await fetch('https://api.web3forms.com/submit', { method: 'POST', body: formData });
      const data = await res.json();
      if (data.success) {
        setStatus('success');
        form.reset();
      } else {
        setStatus('error');
      }
    } catch (err) {
      setStatus('error');
    }
  }

  const btnLabel = status === 'sending'
    ? 'Sending…'
    : status === 'success'
      ? 'Sent — we’ll be in touch'
      : 'Send Request';

  return (
    <section className="section section-dark reveal" id="contact">
      <div className="section-inner">
        <div className="services-head">
          <span className="eyebrow section-eyebrow on-dark">— Request an Estimate</span>
          <h2 className="section-h2 on-dark">Tell us about<br/>your wall.</h2>
          <p className="lead on-dark contact-sub">Tell us about your wall below — and text a photo to (747) 243-8969. We'll review the project and suggest the best layout, materials, and a clear estimate.</p>
        </div>

        <div className="contact-grid">
          <form className="estimate-form" onSubmit={handleSubmit}>
            {/* Web3Forms meta + spam honeypot */}
            <input type="hidden" name="subject" value="New estimate request — LA Media Wall" />
            <input type="hidden" name="from_name" value="LA Media Wall Website" />
            <input type="checkbox" name="botcheck" tabIndex="-1" autoComplete="off" style={{display:'none'}} />

            <div className="form-row">
              <Field label="Name"><input type="text" name="Name" placeholder="Full name" required /></Field>
              <Field label="Phone"><input type="tel" name="Phone" placeholder="(747) 243-8969" required /></Field>
            </div>
            <div className="form-row">
              <Field label="Email"><input type="email" name="Email" placeholder="hello@example.com" /></Field>
              <Field label="City / ZIP"><input type="text" name="City / ZIP" placeholder="Newport Beach, 92660" /></Field>
            </div>
            <div className="form-row">
              <Field label="Project Type">
                <div className="select-wrap">
                  <select name="Project Type">
                    <option>TV media wall</option>
                    <option>Fireplace wall</option>
                    <option>Shelves & built-ins</option>
                    <option>Full custom wall</option>
                    <option>Not sure yet</option>
                  </select>
                </div>
              </Field>
              <Field label="TV Size"><input name="TV Size" placeholder='75"' /></Field>
            </div>
            <div className="form-row">
              <Field label="Wall Width"><input name="Wall Width" placeholder='180"' /></Field>
              <Field label="Wall Height"><input name="Wall Height" placeholder='108"' /></Field>
            </div>

            <div className="form-row">
              <Field label="Fireplace?"><Radios name="Fireplace" options={['Yes','No','Not sure']} /></Field>
              <Field label="Shelves?"><Radios name="Shelves" options={['Yes','No','Not sure']} /></Field>
            </div>
            <div className="form-row">
              <Field label="LED Lighting?"><Radios name="LED Lighting" options={['Yes','No','Not sure']} /></Field>
              <Field label="Photos">
                <div className="upload">
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
                  <span>Text photos to (747) 243-8969</span>
                </div>
              </Field>
            </div>

            <Field label="Message / Notes">
              <textarea name="Message" rows="4" placeholder="Tell us about the project, your inspiration, and timeline." />
            </Field>

            <div className="form-actions">
              <button type="submit" className="btn btn-primary-light" disabled={status === 'sending'}>{btnLabel}</button>
              {status === 'success' && (
                <p className="contact-sub on-dark" style={{marginTop:12}}>
                  Got it — we’ll be in touch. To speed up your quote, text photos of your wall to (747) 243-8969.
                </p>
              )}
              {status === 'error' && (
                <p className="contact-sub on-dark" style={{marginTop:12}}>
                  Couldn’t send — please text us at (747) 243-8969 or email lamediawall@gmail.com.
                </p>
              )}
            </div>
          </form>

          <aside className="contact-aside">
            <div className="contact-card">
              <span className="eyebrow on-dark">— LA Media Wall</span>
              <p className="contact-line">Custom media walls<br/>Southern California</p>
              <ul className="contact-meta">
                <li><span>Phone</span><a href="tel:17472438969">(747) 243-8969</a></li>
                <li><span>Email</span><a href="mailto:lamediawall@gmail.com">lamediawall@gmail.com</a></li>
                <li><span>Instagram</span><a href="https://www.instagram.com/lamediawall/" target="_blank" rel="noopener">@lamediawall</a></li>
              </ul>
            </div>
            <div className="contact-card">
              <span className="eyebrow on-dark">— Service Area</span>
              <p className="contact-line">Orange County · Irvine · Newport Beach · Costa Mesa · Woodland Hills · San Diego — and everywhere in between.</p>
            </div>
          </aside>
        </div>
      </div>
    </section>
  );
}

window.EstimateForm = EstimateForm;