const Contact = () => {
  const [sent, setSent] = React.useState(false);
  const [submitting, setSubmitting] = React.useState(false);
  const [error, setError] = React.useState(null);
  const [form, setForm] = React.useState({ name: '', email: '', phone: '', timeframe: '', message: '', heard: '', types: [], consent: false });

  const toggleType = (t) => {
    setForm(f => ({ ...f, types: f.types.includes(t) ? f.types.filter(x => x !== t) : [...f.types, t] }));
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (submitting) return;
    setSubmitting(true);
    setError(null);
    try {
      const res = await fetch('https://formsubmit.co/ajax/motherhoodlensco@gmail.com', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
        body: JSON.stringify({
          _subject: `New inquiry from ${form.name} — Motherhood Lens Co.`,
          _template: 'table',
          _replyto: form.email,
          Name: form.name,
          Email: form.email,
          Phone: form.phone || '(not provided)',
          'Session Type': form.types.length ? form.types.join(', ') : '(none selected)',
          Timeframe: form.timeframe,
          Message: form.message,
          'Heard About Us': form.heard || '(not provided)',
          'Consent to Privacy & Terms': form.consent ? 'Yes' : 'No',
        }),
      });
      if (!res.ok) throw new Error('submission failed');
      setSent(true);
      window.scrollTo({ top: 0, behavior: 'smooth' });
    } catch {
      setError("Something went wrong sending your inquiry. Please try again, or email motherhoodlensco@gmail.com directly.");
      setSubmitting(false);
    }
  };

  if (sent) {
    return (
      <section className="page-hero container reveal" style={{paddingBottom: 140, minHeight: '80vh'}}>
        <div className="eyebrow" style={{marginBottom: 24}}>Thank you</div>
        <h1>Your inquiry <span className="script" style={{color: 'var(--rose-deep)'}}>landed safely</span><br/>in my inbox.</h1>
        <p className="sub" style={{marginTop: 30}}>
          I'll be in touch within 24 hours with next steps.
        </p>
        <div style={{marginTop: 50}}>
          <a href="#/" className="btn btn-secondary">Back to Home</a>
        </div>
      </section>
    );
  }

  return (
    <>
      <section className="page-hero container reveal">
        <div className="eyebrow" style={{marginBottom: 16}}>Contact</div>
        <h1>Let's create something<br/><span className="script" style={{color: 'var(--rose-deep)', fontSize: '1.05em'}}>beautiful</span> together</h1>
        <p className="sub">I'd love to hear about your family, your season of motherhood, and the photos you're dreaming of.</p>
      </section>

      <section className="container" style={{paddingBottom: 120}}>
        <div className="grid-2 reveal" style={{gap: 80, alignItems: 'start'}}>
          <div style={{position: 'sticky', top: 120}}>
            <div style={{aspectRatio: '4/5', borderRadius: 16, overflow: 'hidden', marginBottom: 30}}>
              <img src="assets/contact-hero.jpg" alt="Family of three smiling outdoors under a wooden pergola" style={{width: '100%', height: '100%', objectFit: 'cover', display: 'block'}}/>
            </div>
            <div className="eyebrow" style={{marginBottom: 20}}>Say Hello</div>
            <div style={{display: 'flex', flexDirection: 'column', gap: 14, fontSize: 16}}>
              {[
                // Phone hidden pre-launch — restore when number is finalized.
                // ['Call or Text', '(803) 555-0127', 'tel:8035550127'],
                ['Email', 'motherhoodlensco@gmail.com', 'mailto:motherhoodlensco@gmail.com'],
                ['Based in', 'Fort Mill, SC', null],
                ['Serving', 'Fort Mill · Indian Land · Rock Hill', null],
              ].map(([k, v, href], i) => (
                <div key={i} className="contact-row">
                  <div className="mono" style={{color: 'var(--charcoal-mute)'}}>{k}</div>
                  {href ? <a href={href} style={{color: 'var(--charcoal)', textDecoration: 'none', borderBottom: '1px solid var(--gold)', justifySelf: 'start'}}>{v}</a> : <span>{v}</span>}
                </div>
              ))}
            </div>
            <p style={{fontSize: 14, color: 'var(--charcoal-soft)', fontStyle: 'italic', marginTop: 30}}>
              I personally read and respond to every inquiry within 24 hours.
            </p>
          </div>

          <form onSubmit={handleSubmit}>
            <div className="field">
              <label>Your Name *</label>
              <input required value={form.name} onChange={e => setForm({...form, name: e.target.value})} />
            </div>
            <div className="form-row">
              <div className="field">
                <label>Email *</label>
                <input required type="email" value={form.email} onChange={e => setForm({...form, email: e.target.value})} />
              </div>
              <div className="field">
                <label>Phone (optional)</label>
                <input type="tel" value={form.phone} onChange={e => setForm({...form, phone: e.target.value})} />
              </div>
            </div>
            <div className="field">
              <label>Session Type *</label>
              <div className="checks">
                {['Newborn', 'Motherhood / Mommy + Me', 'Family Session', 'Mini Session', 'Not sure yet'].map(t => (
                  <label key={t} className="check">
                    <input type="checkbox" checked={form.types.includes(t)} onChange={() => toggleType(t)} />
                    <span>{t}</span>
                  </label>
                ))}
              </div>
            </div>
            <div className="field">
              <label>Ideal Session Timeframe *</label>
              <input required placeholder="e.g. Late May, before baby arrives" value={form.timeframe} onChange={e => setForm({...form, timeframe: e.target.value})} />
            </div>
            <div className="field">
              <label>Tell me about your family *</label>
              <textarea required placeholder="The more you share, the better!" value={form.message} onChange={e => setForm({...form, message: e.target.value})}></textarea>
            </div>
            <div className="field">
              <label>How did you hear about Motherhood Lens Co.?</label>
              <input value={form.heard} onChange={e => setForm({...form, heard: e.target.value})} />
            </div>
            <div className="field" style={{marginTop: 8}}>
              <label className="check" style={{alignItems: 'flex-start', padding: '4px 0', fontSize: 14, color: 'var(--charcoal-soft)', lineHeight: 1.55}}>
                <input
                  type="checkbox"
                  required
                  checked={form.consent}
                  onChange={e => setForm({...form, consent: e.target.checked})}
                  style={{marginTop: 3}}
                />
                <span>
                  I have read and agree to the{' '}
                  <a href="#/privacy" style={{color: 'var(--rose-deep)', borderBottom: '1px solid var(--gold)', textDecoration: 'none'}}>Privacy Policy</a>
                  {' '}and{' '}
                  <a href="#/terms" style={{color: 'var(--rose-deep)', borderBottom: '1px solid var(--gold)', textDecoration: 'none'}}>Terms of Service</a>. *
                </span>
              </label>
            </div>
            {error && (
              <div role="alert" style={{marginTop: 18, padding: '14px 18px', background: 'rgba(201,155,138,.12)', border: '1px solid var(--rose)', borderRadius: 12, color: 'var(--rose-deep)', fontSize: 14}}>
                {error}
              </div>
            )}
            <button type="submit" className="btn btn-primary" disabled={submitting} style={{marginTop: 16, width: '100%', justifyContent: 'center', opacity: submitting ? 0.6 : 1, cursor: submitting ? 'wait' : 'pointer'}}>
              {submitting ? 'Sending…' : 'Send My Inquiry →'}
            </button>
          </form>
        </div>
      </section>
    </>
  );
};

Object.assign(window, { Contact });