// contact.jsx — Qualified enquiry form + WhatsApp deep-link.

function Contact({ lang, onNav }) {
  const ar = lang === 'ar';

  const [data, setData] = useState({
    firstName: '', lastName: '', email: '', phone: '',
    weddingDate: '', venue: '', guests: '', services: [],
    budget: '', message: '', heardFrom: '',
  });
  const [touched, setTouched] = useState(false);
  const [sent, setSent] = useState(false);

  const update = (k, v) => setData(d => ({ ...d, [k]: v }));
  const toggleService = (s) => setData(d => ({
    ...d, services: d.services.includes(s) ? d.services.filter(x => x !== s) : [...d.services, s]
  }));

  const required = ['firstName', 'email', 'weddingDate', 'services'];
  const isValid = required.every(k => k === 'services' ? data.services.length > 0 : data[k]?.trim?.());

  const handleSubmit = (e) => {
    e.preventDefault();
    setTouched(true);
    if (!isValid) return;
    // Pre-fill WhatsApp deep link and open it
    const msg = `Hi Joelle, I'd love to enquire about our wedding.%0A%0A` +
      `Name: ${data.firstName} ${data.lastName}%0A` +
      `Email: ${data.email}%0A` +
      `Wedding date: ${data.weddingDate}%0A` +
      `Venue / area: ${data.venue || 'TBC'}%0A` +
      `Guest count: ${data.guests || 'TBC'}%0A` +
      `Services: ${data.services.join(', ')}%0A` +
      `Budget band: ${data.budget || 'TBC'}%0A%0A` +
      `${data.message}`;
    window.open(`https://wa.me/971551304916?text=${msg}`, '_blank');
    setSent(true);
  };

  return (
    <main className="page-enter">
      <section style={{ paddingTop: 100, paddingBottom: 0 }}>
        <div className="wrap">
          <div style={{ display:'grid', gridTemplateColumns:'1fr 1.4fr', gap: 80, alignItems:'start' }}>

            {/* Left: pitch + contact details */}
            <aside style={{ position:'sticky', top: 100 }}>
              <div className="eyebrow"><span className="dot"></span>{ar?'استفسري':'Enquire'}</div>
              <h1 className="h-display" style={{ fontSize:'clamp(48px, 5.6vw, 88px)', margin:'24px 0 0' }}>
                <em>Let's have a</em><br/>
                good wedding <S>chat.</S>
              </h1>
              <p style={{ marginTop: 28, fontSize: 16, lineHeight: 1.75, color:'var(--ink-soft)', maxWidth: 440 }}>
                {ar
                  ? 'املئي ما تستطيعين — لا توجد إجابة خاطئة. سأرد عليكِ مباشرة، عادةً خلال يوم عمل.'
                  : 'Fill in what you can — there\'s no wrong answer. I reply personally, usually within one working day.'}
              </p>

              <ul style={{ listStyle:'none', padding:0, marginTop: 40, display:'flex', flexDirection:'column', gap: 18, borderTop:'1px solid var(--line)', paddingTop: 24 }}>
                <li style={{ display:'flex', alignItems:'flex-start', gap: 16 }}>
                  <Icon.Whatsapp/>
                  <div>
                    <div className="eyebrow" style={{ fontSize: 10 }}>WhatsApp</div>
                    <a href="https://wa.me/971551304916" target="_blank" rel="noopener" className="link-accent" style={{ fontFamily:'var(--font-display)', fontStyle:'italic', fontSize: 22, fontWeight: 300, marginTop: 6, display:'inline-block' }}>
                      +971 55 130 4916
                    </a>
                  </div>
                </li>
                <li style={{ display:'flex', alignItems:'flex-start', gap: 16 }}>
                  <Icon.Mail/>
                  <div>
                    <div className="eyebrow" style={{ fontSize: 10 }}>Email</div>
                    <a href="mailto:joelle@mylovelywedding.com" className="link-accent" style={{ fontFamily:'var(--font-display)', fontStyle:'italic', fontSize: 22, fontWeight: 300, marginTop: 6, display:'inline-block' }}>
                      joelle@mylovelywedding.com
                    </a>
                  </div>
                </li>
                <li style={{ display:'flex', alignItems:'flex-start', gap: 16 }}>
                  <Icon.Phone/>
                  <div>
                    <div className="eyebrow" style={{ fontSize: 10 }}>Based in</div>
                    <div style={{ fontFamily:'var(--font-display)', fontStyle:'italic', fontSize: 22, fontWeight: 300, marginTop: 6 }}>
                      Dubai, UAE
                    </div>
                    <div style={{ fontSize: 12, color:'var(--ink-muted)', marginTop: 2 }}>Serving Dubai · RAK · UAE-wide</div>
                  </div>
                </li>
              </ul>

              <div style={{ marginTop: 36, padding: 20, background:'var(--cream)', borderRadius: 4, fontSize: 13, color:'var(--ink-soft)', lineHeight: 1.65 }}>
                <strong style={{ fontFamily:'var(--font-display)', fontStyle:'italic', fontWeight: 400, color:'var(--ink)' }}>By appointment.</strong> No walk-in studio. Most first chats happen over a phone call or a coffee.
              </div>
            </aside>

            {/* Right: form */}
            <div>
              {sent ? <ThankYou data={data} onAnother={()=>{setSent(false); setData({ firstName:'', lastName:'', email:'', phone:'', weddingDate:'', venue:'', guests:'', services:[], budget:'', message:'', heardFrom:'' }); setTouched(false);}}/> : (

              <form onSubmit={handleSubmit} style={{ background:'var(--cream)', padding:'48px 56px', borderRadius: 6 }}>
                <div className="eyebrow" style={{ marginBottom: 28 }}>The qualified enquiry form</div>

                {/* Name */}
                <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap: 28 }}>
                  <FormField label="First name *" error={touched && !data.firstName.trim()}>
                    <input value={data.firstName} onChange={e=>update('firstName', e.target.value)} placeholder="Joelle"/>
                  </FormField>
                  <FormField label="Last name">
                    <input value={data.lastName} onChange={e=>update('lastName', e.target.value)}/>
                  </FormField>
                </div>

                {/* Email + phone */}
                <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap: 28, marginTop: 24 }}>
                  <FormField label="Email *" error={touched && !data.email.trim()}>
                    <input type="email" value={data.email} onChange={e=>update('email', e.target.value)} placeholder="you@email.com"/>
                  </FormField>
                  <FormField label="WhatsApp / phone">
                    <input value={data.phone} onChange={e=>update('phone', e.target.value)} placeholder="+971 ..."/>
                  </FormField>
                </div>

                <hr className="hairline" style={{ margin:'40px 0 32px' }}/>

                {/* Wedding details */}
                <div className="eyebrow" style={{ marginBottom: 24, color:'var(--accent-deep)' }}>The wedding</div>
                <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap: 28 }}>
                  <FormField label="Wedding date (or month) *" error={touched && !data.weddingDate.trim()}>
                    <input value={data.weddingDate} onChange={e=>update('weddingDate', e.target.value)} placeholder="e.g. March 2027 or 14 / 03 / 2027"/>
                  </FormField>
                  <FormField label="Venue or area">
                    <input value={data.venue} onChange={e=>update('venue', e.target.value)} placeholder="e.g. Waldorf RAK, or undecided"/>
                  </FormField>
                </div>

                <div style={{ marginTop: 28 }}>
                  <label style={{ fontSize: 10.5, fontWeight: 600, letterSpacing:'0.22em', textTransform:'uppercase', color:'var(--ink-soft)', display:'block', marginBottom: 14 }}>Guest count</label>
                  <div className="field--inline-radio">
                    {['Up to 40','40–80','80–120','120–180','180+','Not sure yet'].map(g => (
                      <button type="button" key={g} className={"chip-radio " + (data.guests === g ? 'is-on' : '')} onClick={()=>update('guests', g)}>{g}</button>
                    ))}
                  </div>
                </div>

                <hr className="hairline" style={{ margin:'40px 0 32px' }}/>

                {/* Services (multi) */}
                <div className="eyebrow" style={{ marginBottom: 14, color:'var(--accent-deep)' }}>What can we help with? *</div>
                <p style={{ fontSize: 13, color:'var(--ink-soft)', marginTop: 0, marginBottom: 18 }}>Tick all that apply — we'll figure out the right scope on the call.</p>
                <div className="field--inline-radio">
                  {[
                    'Wedding Styling',
                    'Full Planning',
                    'Coordination only',
                    'Florals',
                    'Stationery',
                    'Just exploring',
                  ].map(s => (
                    <button type="button" key={s}
                      className={"chip-radio " + (data.services.includes(s) ? 'is-on' : '')}
                      onClick={()=>toggleService(s)}>
                      {data.services.includes(s) && <Icon.Check style={{ width: 11, height: 11, marginRight: 6, verticalAlign:'middle' }}/>}
                      {s}
                    </button>
                  ))}
                </div>
                {touched && data.services.length === 0 && (
                  <div style={{ marginTop: 12, fontSize: 12, color:'var(--blush)' }}>Pick at least one — even "Just exploring" is a great start.</div>
                )}

                <div style={{ marginTop: 32 }}>
                  <label style={{ fontSize: 10.5, fontWeight: 600, letterSpacing:'0.22em', textTransform:'uppercase', color:'var(--ink-soft)', display:'block', marginBottom: 14 }}>Budget band (optional · we don't publish prices)</label>
                  <div className="field--inline-radio">
                    {['Under 50k AED','50–100k','100–200k','200–400k','400k+','Rather chat first'].map(b => (
                      <button type="button" key={b} className={"chip-radio " + (data.budget === b ? 'is-on' : '')} onClick={()=>update('budget', b)}>{b}</button>
                    ))}
                  </div>
                </div>

                <hr className="hairline" style={{ margin:'40px 0 32px' }}/>

                {/* Message + heard from */}
                <FormField label="Tell us about your wedding (vibe, must-haves, weird ideas — all welcome)">
                  <textarea value={data.message} onChange={e=>update('message', e.target.value)} placeholder="A garden ceremony, dinner under fairy lights, my grandmother's recipe for the welcome drink..." rows={5}/>
                </FormField>

                <div style={{ marginTop: 28 }}>
                  <label style={{ fontSize: 10.5, fontWeight: 600, letterSpacing:'0.22em', textTransform:'uppercase', color:'var(--ink-soft)', display:'block', marginBottom: 14 }}>How did you find us?</label>
                  <div className="field--inline-radio">
                    {['Instagram','Google','A friend','The blog','Press feature','Other'].map(h => (
                      <button type="button" key={h} className={"chip-radio " + (data.heardFrom === h ? 'is-on' : '')} onClick={()=>update('heardFrom', h)}>{h}</button>
                    ))}
                  </div>
                </div>

                <div style={{ marginTop: 48, paddingTop: 28, borderTop:'1px solid var(--line)', display:'flex', alignItems:'center', justifyContent:'space-between', gap: 18, flexWrap:'wrap' }}>
                  <span style={{ fontSize: 12, color:'var(--ink-muted)', maxWidth: 320 }}>
                    Submitting also opens WhatsApp with your details pre-filled — so we can pick up the conversation there.
                  </span>
                  <button type="submit" className="btn btn--gold" style={{ padding:'16px 28px' }}>
                    Send enquiry <Icon.Arrow/>
                  </button>
                </div>
              </form>
              )}
            </div>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="wrap">
          <div style={{ textAlign:'center' }}>
            <div className="eyebrow"><span className="dot"></span>Or, more directly</div>
            <h2 className="h-display" style={{ fontSize:'clamp(32px, 4vw, 56px)', fontWeight: 300, margin:'18px 0 24px' }}>
              Three faster <em>ways</em> in.
            </h2>
          </div>
          <div style={{ marginTop: 36, display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap: 22 }}>
            {[
              { i: Icon.Whatsapp, l: 'WhatsApp', d: '+971 55 130 4916', sub: 'Fastest. We love a quick chat.', href:'https://wa.me/971551304916' },
              { i: Icon.Mail,     l: 'Email',    d: 'joelle@mylovelywedding.com', sub: 'For longer notes and PDFs.', href:'mailto:joelle@mylovelywedding.com' },
              { i: Icon.Phone,    l: 'Book a chat', d: '30-min discovery call', sub: 'Pick a time on the calendar.', href:'#' },
            ].map((c, i) => (
              <a key={i} href={c.href} target={c.href.startsWith('http') ? '_blank' : undefined} rel="noopener"
                style={{ display:'block', padding:'40px 32px', background:'var(--paper-deep)', border:'1px solid var(--line)', borderRadius: 6, transition:'all .25s ease', color:'inherit' }}
                onMouseEnter={(e)=>{e.currentTarget.style.background='var(--ink)'; e.currentTarget.style.color='var(--paper)';}}
                onMouseLeave={(e)=>{e.currentTarget.style.background='var(--paper-deep)'; e.currentTarget.style.color='var(--ink)';}}>
                <c.i/>
                <div className="eyebrow" style={{ color:'inherit', opacity:.7, marginTop: 18 }}>{c.l}</div>
                <h3 className="h-display" style={{ fontStyle:'italic', fontWeight: 300, fontSize: 26, margin:'10px 0 8px' }}>{c.d}</h3>
                <div style={{ fontSize: 14, opacity: .7 }}>{c.sub}</div>
              </a>
            ))}
          </div>
        </div>
      </section>
    </main>
  );
}

function FormField({ label, children, error }) {
  return (
    <div className="field">
      <label style={{ color: error ? 'var(--blush)' : 'var(--ink-soft)' }}>{label}</label>
      {children}
    </div>
  );
}

function ThankYou({ data, onAnother }) {
  return (
    <div style={{ background:'var(--cream)', padding:'72px 56px', borderRadius: 6, textAlign:'center' }}>
      <span className="script" style={{ fontSize: 92, color:'var(--accent)', lineHeight: 1 }}>thank you</span>
      <h2 className="h-display" style={{ fontSize:'clamp(36px, 4vw, 56px)', fontWeight: 300, margin:'12px 0 24px' }}>
        That made my <em>day,</em> {data.firstName}.
      </h2>
      <p style={{ fontFamily:'var(--font-display)', fontStyle:'italic', fontWeight: 300, fontSize: 20, lineHeight: 1.5, color:'var(--ink-soft)', maxWidth: 540, margin:'0 auto 32px' }}>
        WhatsApp should have opened with your details pre-filled — and I'll have an email in my inbox within the minute. I reply personally, usually within one working day.
      </p>
      <div style={{ display:'inline-flex', gap: 12, flexWrap:'wrap', justifyContent:'center' }}>
        <button className="btn btn--ghost" onClick={onAnother}>Send another <Icon.Arrow/></button>
        <a className="btn" href="https://wa.me/971551304916" target="_blank" rel="noopener"><Icon.Whatsapp/> Open WhatsApp again</a>
      </div>
    </div>
  );
}

Object.assign(window, { Contact });