function ContactPage() {
  const [sent, setSent] = React.useState(false);
  const [form, setForm] = React.useState({ name: '', email: '', company: '', role: 'GC', team: '1-10', project: '' });
  const fields = [
    ['name','Full name','text'],
    ['email','Work email','email'],
    ['company','Company','text'],
  ];
  const roles = ['GC', 'Subcontractor', 'PM / Super', 'Owner / Developer', 'Architect', 'Other'];
  const teams = ['1-10','11-50','51-200','201+'];
  return (
    <>
      <section className="section-tight pt-16">
        <Container>
          <Eyebrow>Early access</Eyebrow>
          <h1 className="m-display mt-3 max-w-3xl">Tell us about your project.</h1>
          <p className="m-lede mt-5 max-w-2xl">We onboard one crew at a time. A real person reads every request — not a form router.</p>
        </Container>
      </section>

      <section className="pb-20">
        <Container>
          <div className="grid lg:grid-cols-12 gap-10 items-start">
            <div className="lg:col-span-7">
              {sent ? (
                <div className="card p-10">
                  <div className="w-12 h-12 rounded-full grid place-items-center" style={{ background: 'var(--brand-tint)', color: 'var(--brand)' }}>
                    <Icon name="Check" size={22} strokeWidth={2.5} />
                  </div>
                  <h3 className="m-title mt-4">We got it, {form.name.split(' ')[0] || 'friend'}.</h3>
                  <p className="m-lede mt-2">We'll reply within one business day. If you need us faster, reply to the confirmation and tag it "urgent" — a real person will answer.</p>
                </div>
              ) : (
                <form className="card p-8 space-y-5" onSubmit={(e) => { e.preventDefault(); setSent(true); }}>
                  {fields.map(([k, l, t]) => (
                    <div key={k} className="space-y-2">
                      <label className="text-[13px] font-medium">{l}</label>
                      <input required type={t} value={form[k]} onChange={(e) => setForm(f => ({ ...f, [k]: e.target.value }))}
                        className="h-10 w-full rounded-md border px-3 text-[14px] bg-transparent"
                        style={{ borderColor: 'var(--border)' }} />
                    </div>
                  ))}
                  <div className="grid md:grid-cols-2 gap-5">
                    <div className="space-y-2">
                      <label className="text-[13px] font-medium">Role</label>
                      <select value={form.role} onChange={(e) => setForm(f => ({ ...f, role: e.target.value }))}
                        className="h-10 w-full rounded-md border px-3 text-[14px] bg-transparent" style={{ borderColor: 'var(--border)' }}>
                        {roles.map(r => <option key={r}>{r}</option>)}
                      </select>
                    </div>
                    <div className="space-y-2">
                      <label className="text-[13px] font-medium">Team size</label>
                      <select value={form.team} onChange={(e) => setForm(f => ({ ...f, team: e.target.value }))}
                        className="h-10 w-full rounded-md border px-3 text-[14px] bg-transparent" style={{ borderColor: 'var(--border)' }}>
                        {teams.map(t => <option key={t}>{t}</option>)}
                      </select>
                    </div>
                  </div>
                  <div className="space-y-2">
                    <label className="text-[13px] font-medium">Tell us about a current project</label>
                    <textarea rows="4" value={form.project} onChange={(e) => setForm(f => ({ ...f, project: e.target.value }))}
                      placeholder="What's on site next week? What's killing you Friday at 5pm?"
                      className="w-full rounded-md border px-3 py-2 text-[14px] bg-transparent" style={{ borderColor: 'var(--border)' }} />
                  </div>
                  <div className="flex items-center justify-between pt-2">
                    <div className="text-[12px]" style={{ color: 'var(--fg2)' }}>We reply within 1 business day. No sales bots.</div>
                    <button type="submit" className="btn btn-primary btn-lg"><Icon name="Send" size={16} /> Send request</button>
                  </div>
                </form>
              )}
            </div>
            <div className="lg:col-span-5 space-y-4">
              <div className="card p-6">
                <div className="sb-eyebrow">What happens next</div>
                <ol className="mt-4 space-y-3 text-[13.5px]">
                  {['You send the form. We read it — within one business day.','30-minute call about your current job. No deck.','We spin up a tenant, pre-seed a project, turn on the modules that fit.','Your crew uses it for two weeks. We ship the fixes they ask for.'].map((s, i) => (
                    <li key={i} className="flex gap-3">
                      <span className="w-5 h-5 rounded-full grid place-items-center shrink-0 text-[11px] font-mono" style={{ background: 'var(--brand-tint)', color: 'var(--brand)' }}>{i+1}</span>
                      <span>{s}</span>
                    </li>
                  ))}
                </ol>
              </div>
              <div className="card p-6">
                <div className="sb-eyebrow">Other ways in</div>
                <div className="mt-3 space-y-2.5 text-[13.5px]">
                  <a className="flex items-center gap-2 m-link" href="mailto:hello@syncbuild.co"><Icon name="Mail" size={14}/> hello@syncbuild.co</a>
                  <a className="flex items-center gap-2 m-link" href="#"><Icon name="Calendar" size={14}/> Book a 30-min slot</a>
                  <a className="flex items-center gap-2 m-link" href="#"><Icon name="MessageSquare" size={14}/> Investor enquiries</a>
                </div>
              </div>
            </div>
          </div>
        </Container>
      </section>
    </>
  );
}
Object.assign(window, { ContactPage });