// Contact + Partner page (reuse with `mode`)

const { useState: useStateC } = React;

function ContactPage({ t, go, mode = 'contact' }) {
  const [form, setForm] = useStateC({
    name:'', company:'', email:'', phone:'',
    type: mode === 'partner' ? 'Sponsorship' : 'Corporate',
    date:'', message:'',
  });
  const [sent, setSent] = useStateC(false);

  const update = (k,v) => setForm(f => ({...f, [k]: v}));

  const enquiryTypes = ['Corporate', 'Government', 'Talent booking', 'Sponsorship', 'Press'];

  return (
    <div className="page-enter">
      <section className="section" style={{background:'var(--noir)', paddingTop:'clamp(96px, 10vw, 140px)', paddingBottom:'clamp(40px, 5vw, 64px)'}}>
        <div className="container">
          <div className="eyebrow mono muted" style={{marginBottom:14}}><span className="bar" /> {mode === 'partner' ? t.nav.partner : t.sections.contact}</div>
          <h1 className="display" style={{fontSize:'clamp(56px, 9vw, 140px)', color:'#fff', margin:0, maxWidth:'14ch'}}>
            {mode === 'partner' ? <>Partner <span style={{color:'var(--brand)'}}>with us.</span></> : <>Plan your <span style={{color:'var(--brand)'}}>next event.</span></>}
          </h1>
        </div>
      </section>

      <section className="section section-light" style={{paddingTop:'clamp(48px, 6vw, 80px)', paddingBottom:'clamp(48px, 6vw, 80px)'}}>
        <div className="container" style={{display:'grid', gridTemplateColumns:'1.4fr 1fr', gap:64, alignItems:'flex-start'}}>
          {/* Form */}
          <div>
            {sent ? (
              <div style={{padding:'48px 36px', border:'1px solid var(--line)', background:'var(--paper)', textAlign:'center'}}>
                <div className="display" style={{fontSize:64, color:'var(--brand)', margin:0}}>✓</div>
                <div className="display" style={{fontSize:36, color:'var(--ink)', margin:'16px 0 12px'}}>Brief received.</div>
                <p style={{color:'var(--muted)', maxWidth:480, margin:'0 auto', lineHeight:1.6}}>
                  Thanks {form.name.split(' ')[0] || 'there'} — a producer from the {form.type.toLowerCase()} team will reach out within one business day.
                </p>
                <button onClick={()=>{ setSent(false); setForm({name:'', company:'', email:'', phone:'', type:'Corporate', date:'', message:''}); }} className="btn btn-dark" style={{marginTop: 28}}>Send another</button>
              </div>
            ) : (
              <form onSubmit={(e)=>{e.preventDefault(); setSent(true);}} style={{display:'flex', flexDirection:'column', gap:28}}>
                <div className="mono" style={{color:'var(--brand)'}}>Step 01 · Tell us about you</div>
                <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:24}}>
                  <div className="field"><label>Full name *</label><input required value={form.name} onChange={e=>update('name', e.target.value)} placeholder="Sara Al Khoury" /></div>
                  <div className="field"><label>Company / department *</label><input required value={form.company} onChange={e=>update('company', e.target.value)} placeholder="Acme Holdings" /></div>
                  <div className="field"><label>Email *</label><input required type="email" value={form.email} onChange={e=>update('email', e.target.value)} placeholder="sara@acme.com" /></div>
                  <div className="field"><label>Phone</label><input value={form.phone} onChange={e=>update('phone', e.target.value)} placeholder="+971 …" /></div>
                </div>

                <div className="mono" style={{color:'var(--brand)', marginTop: 12}}>Step 02 · What are you planning?</div>
                <div className="field">
                  <label>Enquiry type *</label>
                  <div style={{display:'flex', flexWrap:'wrap', gap:8, marginTop:6}}>
                    {enquiryTypes.map(et => (
                      <button type="button" key={et} onClick={()=>update('type', et)}
                        style={{
                          padding:'10px 14px', fontFamily:'var(--mono)', fontSize:11, letterSpacing:'0.14em', textTransform:'uppercase',
                          background: form.type===et ? 'var(--ink)' : 'transparent',
                          color: form.type===et ? '#fff' : 'var(--ink)',
                          border: '1px solid ' + (form.type===et ? 'var(--ink)' : 'var(--line)'),
                          cursor:'default',
                        }}>{et}</button>
                    ))}
                  </div>
                </div>
                <div style={{display:'grid', gridTemplateColumns:'1fr 2fr', gap:24}}>
                  <div className="field"><label>Target date / season</label><input value={form.date} onChange={e=>update('date', e.target.value)} placeholder="Q4 2026" /></div>
                  <div className="field"><label>Project brief *</label><textarea required value={form.message} onChange={e=>update('message', e.target.value)} placeholder="Audience, scale, venue thoughts, any constraints…" /></div>
                </div>

                <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', gap:16, flexWrap:'wrap', marginTop:12}}>
                  <p style={{fontSize:12, color:'var(--muted)', maxWidth:400, lineHeight:1.5, margin:0}}>
                    We typically respond within one business day. By submitting you agree to our privacy notice.
                  </p>
                  <button type="submit" className="btn btn-primary btn-arrow">
                    Send brief <span className="arr">→</span>
                  </button>
                </div>
              </form>
            )}
          </div>

          {/* Contact details */}
          <div style={{display:'flex', flexDirection:'column', gap:32}}>
            <div>
              <div className="mono" style={{color:'var(--muted)', marginBottom:14}}>Direct lines</div>
              <div style={{display:'flex', flexDirection:'column', gap:18}}>
                <div>
                  <div style={{fontFamily:'var(--display)', fontSize:24, color:'var(--ink)', letterSpacing:'0.02em'}}>+971 4 439 0900</div>
                  <div style={{fontSize:13, color:'var(--muted)'}}>Verified main line</div>
                </div>
                <div>
                  <div style={{fontFamily:'var(--display)', fontSize:24, color:'var(--ink)', letterSpacing:'0.02em'}}>info@doneevents.com</div>
                  <div style={{fontSize:13, color:'var(--muted)'}}>General enquiries</div>
                </div>
                <div>
                  <div style={{fontFamily:'var(--display)', fontSize:24, color:'var(--ink)', letterSpacing:'0.02em'}}>Dubai Media City</div>
                  <div style={{fontSize:13, color:'var(--muted)'}}>Suite TBC — pending client confirmation</div>
                </div>
              </div>
            </div>

            <div style={{borderTop:'1px solid var(--line)', paddingTop:24}}>
              <div className="mono" style={{color:'var(--muted)', marginBottom:14}}>Routing</div>
              <div style={{display:'flex', flexDirection:'column', gap:10, fontSize:14, color:'var(--ink)'}}>
                <div>Corporate · <span style={{color:'var(--muted)'}}>info@doneevents.com</span></div>
                <div>Government · <span style={{color:'var(--muted)'}}>info@doneevents.com</span></div>
                <div>Talent booking · <span style={{color:'var(--muted)'}}>info@doneevents.com</span></div>
                <div>Sponsorship · <span style={{color:'var(--muted)'}}>partnerships@ · recommended</span></div>
                <div>Press · <span style={{color:'var(--muted)'}}>press@ · recommended</span></div>
              </div>
            </div>

            <div style={{borderTop:'1px solid var(--line)', paddingTop:24}}>
              <div className="mono" style={{color:'var(--muted)', marginBottom:14}}>Map</div>
              <div style={{aspectRatio:'4/3', background:'var(--smoke-2)', position:'relative', overflow:'hidden'}}>
                <div style={{position:'absolute', inset:0, background:`
                  radial-gradient(circle at 60% 40%, var(--brand) 0 4px, transparent 5px),
                  repeating-linear-gradient(0deg, rgba(0,0,0,0.04) 0 1px, transparent 1px 48px),
                  repeating-linear-gradient(90deg, rgba(0,0,0,0.04) 0 1px, transparent 1px 48px)
                `}} />
                <div style={{position:'absolute', bottom:14, left:14, fontFamily:'var(--mono)', fontSize:10, letterSpacing:'0.14em', textTransform:'uppercase', color:'var(--ink)', background:'var(--paper)', padding:'6px 10px'}}>
                  Dubai Media City · coords TBC
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

function PartnerPage(props){ return <ContactPage {...props} mode="partner" />; }

Object.assign(window, { ContactPage, PartnerPage });