// contact.jsx — routing-first contact page
const { useState: useCState } = React;

const CONTACT_EMAILS = [
  {label:'General', address:'hello@synced.health', icon:'alternate_email'},
  {label:'Sales', address:'sales@synced.health', icon:'medical_services'},
];

const CField = ({label, type='text', placeholder, value, onChange, required, options, autoComplete, rows=5}) => {
  const base = {
    padding: '14px 16px',
    borderRadius: 12,
    border: '1px solid var(--grey-10)',
    fontSize: 16,
    fontFamily: 'var(--font-sans)',
    color: 'var(--ink)',
    width: '100%',
  };
  return (
    <label className="col" style={{gap:8, minWidth:0}}>
      <span style={{fontSize:12, fontWeight:600, letterSpacing:'0.04em', textTransform:'uppercase', color:'var(--grey-70)'}}>{label}{required && ' *'}</span>
      {options ? (
        <select value={value} onChange={e=>onChange(e.target.value)} required={required} style={{...base, background:'white'}}>
          <option value="">Select...</option>
          {options.map(o => <option key={o} value={o}>{o}</option>)}
        </select>
      ) : type === 'textarea' ? (
        <textarea value={value} onChange={e=>onChange(e.target.value)} placeholder={placeholder} required={required} rows={rows} style={{...base, resize:'vertical'}}/>
      ) : (
        <input type={type} value={value} onChange={e=>onChange(e.target.value)} placeholder={placeholder} required={required} autoComplete={autoComplete} style={base}/>
      )}
    </label>
  );
};

const CHero = () => (
  <section style={{paddingTop:140, paddingBottom:80, paddingLeft:'var(--site-pad)', paddingRight:'var(--site-pad)', background:'linear-gradient(180deg, var(--paper) 0%, var(--soft-lavender) 100%)'}}>
    <div className="reveal" style={{maxWidth:'var(--max-w)', margin:'0 auto'}}>
      <div className="tag-pill" style={{marginBottom:24}}><span className="dot"></span>Contact</div>
      <h1 className="display" style={{maxWidth:'11ch'}}>Talk to a <em>human.</em></h1>
      <p className="lead mt-24" style={{maxWidth:'46ch'}}>No ticket queues. No bot pretending to be a person. Tell us what you need and the right one of us answers.</p>
      <div className="row gap-8 mt-32" style={{flexWrap:'wrap'}}>
        <span className="tag-pill"><span className="mi" style={{fontSize:15, color:'var(--brand-primary)'}}>schedule</span>Replies within 1 business day</span>
        <span className="tag-pill"><span className="mi" style={{fontSize:15, color:'var(--brand-primary)'}}>location_on</span>32 Wellington St E., Toronto, ON</span>
      </div>
    </div>
  </section>
);

const CRoutes = () => (
  <section style={{padding:'clamp(64px, 10vh, 120px) var(--site-pad)', background:'var(--paper)'}}>
    <div style={{maxWidth:'var(--max-w)', margin:'0 auto'}}>
      <div className="reveal eyebrow mb-24">Fastest route</div>
      <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:24}}>
        {[
          {icon:'calendar_month', tone:'var(--soft-sky)', tag:'Clinics', title:'Book a demo', body:'Thirty minutes on your workflow, your PMS, your questions.', cta:'Pick a time', href:'/demo'},
          {icon:'rocket_launch', tone:'var(--brand-tertiary)', tag:'Founding cohort', title:'Apply for early access', body:'Founding rate kept for life and a direct line to the team.', cta:'Apply now', href:'/founding'},
          {icon:'health_and_safety', tone:'var(--soft-mint)', tag:'Patients', title:'Get help with the app', body:'Bookings, coverage, receipts. Free for patients, always.', cta:'Send a message', href:'#message'},
        ].map((r, i) => (
          <a key={i} href={r.href} className={`reveal delay-${i+1} surface`} style={{padding:32, display:'flex', flexDirection:'column', alignItems:'flex-start', transition:'transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s'}}>
            <div className="center" style={{width:56, height:56, borderRadius:16, background:r.tone, color:'var(--brand-primary)', marginBottom:20}}>
              <span className="mi mi-fill" style={{fontSize:28}}>{r.icon}</span>
            </div>
            <div className="eyebrow mb-8">{r.tag}</div>
            <h3 className="h3" style={{marginBottom:12}}>{r.title}</h3>
            <p style={{color:'var(--grey-70)', lineHeight:1.5, margin:'0 0 20px'}}>{r.body}</p>
            <span className="btn btn-ghost" style={{marginTop:'auto', padding:0, fontSize:14, color:'var(--brand-primary)'}}>{r.cta} <span className="arrow">→</span></span>
          </a>
        ))}
      </div>
    </div>
  </section>
);

const CDirect = () => (
  <div className="reveal">
    <div className="eyebrow">Direct lines</div>
    <h2 className="h2 mt-16" style={{maxWidth:'12ch'}}>Or skip the <em>form.</em></h2>
    <div className="col mt-32" style={{gap:4}}>
      {CONTACT_EMAILS.map((e, i) => (
        <a key={e.address} href={`mailto:${e.address}`} className="row gap-16" style={{alignItems:'center', padding:'14px 0', borderTop: i ? '1px solid var(--grey-10)' : 'none'}}>
          <div className="center" style={{width:40, height:40, borderRadius:12, background:'white', border:'1px solid var(--grey-10)', color:'var(--brand-primary)', flexShrink:0}}>
            <span className="mi" style={{fontSize:20}}>{e.icon}</span>
          </div>
          <div className="col" style={{gap:2, minWidth:0}}>
            <div style={{fontSize:12, fontWeight:600, letterSpacing:'0.04em', textTransform:'uppercase', color:'var(--grey-60)'}}>{e.label}</div>
            <div style={{fontSize:15, fontWeight:600, color:'var(--brand-primary)', wordBreak:'break-word'}}>{e.address}</div>
          </div>
        </a>
      ))}
    </div>
    <div className="col gap-12" style={{marginTop:32, paddingTop:24, borderTop:'1px solid var(--grey-10)'}}>
      {[
        {i:'schedule', t:'Monday to Friday, 9am–6pm ET'},
        {i:'apartment', t:'32 Wellington St E., Toronto, ON M5E 1C6'},
        {i:'shield_lock', t:'Never share health details over email.'},
      ].map(d => (
        <div key={d.i} className="row gap-12" style={{alignItems:'center'}}>
          <span className="mi" style={{fontSize:18, color:'var(--grey-60)', flexShrink:0}}>{d.i}</span>
          <div style={{fontSize:14, color:'var(--grey-70)'}}>{d.t}</div>
        </div>
      ))}
    </div>
  </div>
);

const CForm = () => {
  const [form, setForm] = useCState({who:'', name:'', email:'', org:'', message:''});
  const [submitted, setSubmitted] = useCState(false);
  const update = k => v => setForm(f => ({...f, [k]: v}));

  const card = {padding:'clamp(24px, 4vw, 40px)'};

  if (submitted) {
    return (
      <div className="surface center" style={{...card, flexDirection:'column', textAlign:'center', minHeight:420}}>
        <div className="center" style={{width:72, height:72, borderRadius:'50%', background:'var(--soft-mint)', marginBottom:28}}>
          <span className="mi mi-fill" style={{fontSize:36, color:'#1a7a3d'}}>check_circle</span>
        </div>
        <h3 className="h3" style={{marginBottom:12}}>Message sent.</h3>
        <p style={{color:'var(--grey-70)', lineHeight:1.5, margin:0, maxWidth:'34ch'}}>A real person reads every message. Expect a reply at <strong style={{color:'var(--ink)'}}>{form.email}</strong> within one business day.</p>
        <button className="btn btn-secondary mt-32" onClick={() => { setForm({who:'', name:'', email:'', org:'', message:''}); setSubmitted(false); }}>Send another</button>
      </div>
    );
  }

  return (
    <form className="surface" style={{...card, display:'flex', flexDirection:'column', gap:20}} onSubmit={e=>{e.preventDefault(); setSubmitted(true);}}>
      <div style={{fontFamily:'var(--serif)', fontSize:24, fontWeight:500, marginBottom:4}}>Send us a message</div>
      <CField label="I'm a" value={form.who} onChange={update('who')} options={['Patient','Clinic owner or manager','Practitioner','Press','Potential partner','Something else']} required/>
      <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:16}}>
        <CField label="Your name" value={form.name} onChange={update('name')} autoComplete="name" required/>
        <CField label="Email" type="email" value={form.email} onChange={update('email')} autoComplete="email" required/>
      </div>
      <CField label="Clinic or company" placeholder="Optional" value={form.org} onChange={update('org')} autoComplete="organization"/>
      <CField label="How can we help?" type="textarea" placeholder="The more specific, the faster we can actually help." value={form.message} onChange={update('message')} required/>
      <button type="submit" className="btn btn-primary mt-8" style={{padding:'16px 24px', fontSize:15, justifyContent:'center'}}>Send message <span className="arrow">→</span></button>
      <div style={{fontSize:12, color:'var(--grey-60)', textAlign:'center'}}>Read by a person, not a queue. No marketing lists.</div>
    </form>
  );
};

const CContact = () => (
  <section id="message" style={{padding:'clamp(64px, 10vh, 120px) var(--site-pad) clamp(80px, 14vh, 160px)', background:'var(--paper-2)', scrollMarginTop:80}}>
    <div style={{maxWidth:1100, margin:'0 auto', display:'grid', gridTemplateColumns:'1fr 1.2fr', gap:64, alignItems:'start'}}>
      <CDirect/>
      <div className="reveal delay-1"><CForm/></div>
    </div>
  </section>
);

const CPage = () => { useReveal(); return (<div><Nav active="contact"/><CHero/><CRoutes/><CContact/><Footer/></div>); };
ReactDOM.createRoot(document.getElementById('root')).render(<CPage/>);