// Signal — About + Contact pages

function PageAbout({ t, navigate }) {
  return (
    <>
      <section style={{ padding: '80px 48px 40px', maxWidth: 1320, margin: '0 auto' }}>
        <Reveal>
          <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, color: t.sub, marginBottom: 16 }}>
            <span style={{ color: t.accent }}>▸</span> /about
          </div>
        </Reveal>
        <Reveal delay={60}>
          <h1 style={{ fontSize: 'clamp(56px, 8vw, 96px)', lineHeight: 0.96, letterSpacing: -3, fontWeight: 500, margin: 0, maxWidth: 1100 }}>
            One operator. <span style={{ color: t.accent }}>Thirty years</span> at the sharp end.
          </h1>
        </Reveal>
      </section>

      <section style={{ padding: '40px 48px 80px', maxWidth: 1320, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 72, alignItems: 'start' }}>
          <div style={{ position: 'sticky', top: 100 }}>
            <div style={{ aspectRatio: '4/5', background: t.card, border: `1px solid ${t.rule}`, borderRadius: 12, position: 'relative', overflow: 'hidden' }}>
              <svg width="100%" height="100%" style={{ position: 'absolute', inset: 0 }}>
                <defs>
                  <pattern id="ab-grid" width="24" height="24" patternUnits="userSpaceOnUse">
                    <path d="M24 0H0V24" fill="none" stroke={t.accent} strokeWidth="0.4" opacity="0.18" />
                  </pattern>
                </defs>
                <rect width="100%" height="100%" fill="url(#ab-grid)" />
              </svg>
              <div style={{ position: 'absolute', top: 20, left: 20, right: 20, display: 'flex', justifyContent: 'space-between', fontFamily: 'JetBrains Mono, monospace', fontSize: 10, color: t.sub }}>
                <span>FOUNDER.JPG</span><span>2026</span>
              </div>
              <div style={{ position: 'absolute', top: '38%', left: '50%', transform: 'translate(-50%, -50%)', fontSize: 120, fontWeight: 700, letterSpacing: -6, color: t.ink, opacity: 0.08, fontFamily: 'Geist, sans-serif' }}>GB</div>
              <div style={{ position: 'absolute', bottom: 20, left: 20, fontFamily: 'JetBrains Mono, monospace', fontSize: 11, color: t.sub }}>
                <span style={{ color: t.accent }}>●</span> [placeholder — founder portrait]
              </div>
            </div>
            <div style={{ marginTop: 20, fontFamily: 'JetBrains Mono, monospace', fontSize: 12, color: t.sub, lineHeight: 1.8 }}>
              <div><span style={{ color: t.subDim }}>BASED</span> &nbsp; London / remote</div>
              <div><span style={{ color: t.subDim }}>WRITES</span> &nbsp; Signal newsletter</div>
              <div><span style={{ color: t.subDim }}>SPEAKS</span> &nbsp; By invitation</div>
            </div>
          </div>

          <div>
            <Reveal>
              <h2 style={{ fontSize: 32, fontWeight: 500, letterSpacing: -0.8, margin: 0, lineHeight: 1.2 }}>Burson Consulting</h2>
              <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 13, color: t.accent, marginTop: 6 }}>Technology & AI Advisory</div>
            </Reveal>

            <Reveal delay={80}>
              <div style={{ marginTop: 32, fontSize: 17, lineHeight: 1.65, color: t.ink }}>
                <p style={{ margin: '0 0 20px' }}>
                  Three decades at the sharp end of enterprise technology —
                  most recently as CTO of WPP Open, the group's AI marketing platform, and
                  before that as CTO of a 10,000-engineer enterprise technology consultancy.
                </p>
                <p style={{ margin: '0 0 20px', color: t.sub }}>
                  He founded Burson Consulting to bring the operator's lens to a smaller
                  number of executive teams, without the layers of an MBB, and with a bias
                  toward shipped outcomes over decks.
                </p>
                <p style={{ margin: 0, color: t.sub }}>
                  Work has spanned retail, FMCG, travel and media — including engagements
                  with Ford, Sainsbury's, Nestlé, Unilever, YOOX Net-a-Porter, Emirates,
                  Boots and Argos.
                </p>
              </div>
            </Reveal>

            <Reveal delay={160}>
              <div style={{ marginTop: 48 }}>
                <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, color: t.sub, letterSpacing: 1, marginBottom: 20 }}>TRACK RECORD</div>
                <TrackRow t={t} k="CTO" v="WPP Open" sub="Group AI marketing platform · 2023–2025" />
                <TrackRow t={t} k="CTO" v="10,000-engineer agency" sub="Enterprise tech consultancy · 2018–2023" />
                <TrackRow t={t} k="Director" v="Enterprise transformation" sub="Retail &amp; FMCG programmes · 2011–2018" />
                <TrackRow t={t} k="Engineer" v="Hands-on builder" sub="Platforms, data, early cloud · 1995–2011" last />
              </div>
            </Reveal>

            <Reveal delay={220}>
              <div style={{ marginTop: 48 }}>
                <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, color: t.sub, letterSpacing: 1, marginBottom: 20 }}>WHAT I BELIEVE</div>
                <BeliefRow t={t} n="01" title="The org chart is the model." body="Most AI programmes fail at the reporting line, not the compute bill." />
                <BeliefRow t={t} n="02" title="Ship operable outputs, not decks." body="Every engagement ends with something you can actually run." />
                <BeliefRow t={t} n="03" title="Engineering is a commercial function." body="The unit economics of software are the quiet lever nobody talks about." />
                <BeliefRow t={t} n="04" title="Say no often." body="Most advisory work is the wrong advisory work for this client, right now." last />
              </div>
            </Reveal>

            <Reveal delay={280}>
              <div style={{ marginTop: 48, display: 'flex', gap: 12 }}>
                <SgButton t={t} onClick={() => navigate('/contact')}>Start a conversation →</SgButton>
                <SgButton t={t} variant="secondary" onClick={() => navigate('/insights')}>Read the writing</SgButton>
              </div>
            </Reveal>
          </div>
        </div>
      </section>
    </>
  );
}

function TrackRow({ t, k, v, sub, last }) {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '100px 1fr', gap: 24, padding: '16px 0', borderBottom: last ? 'none' : `1px solid ${t.rule}`, alignItems: 'baseline' }}>
      <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, color: t.accent, letterSpacing: 1 }}>{k.toUpperCase()}</div>
      <div>
        <div style={{ fontSize: 18, fontWeight: 500, letterSpacing: -0.3 }} dangerouslySetInnerHTML={{ __html: v }} />
        <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, color: t.sub, marginTop: 4 }} dangerouslySetInnerHTML={{ __html: sub }} />
      </div>
    </div>
  );
}

function BeliefRow({ t, n, title, body, last }) {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '60px 1fr', gap: 20, padding: '20px 0', borderBottom: last ? 'none' : `1px solid ${t.rule}`, alignItems: 'baseline' }}>
      <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, color: t.sub }}>/{n}</div>
      <div>
        <div style={{ fontSize: 20, fontWeight: 500, letterSpacing: -0.4, color: t.ink }}>{title}</div>
        <p style={{ fontSize: 14, lineHeight: 1.55, color: t.sub, margin: '6px 0 0' }}>{body}</p>
      </div>
    </div>
  );
}

// ── Contact page ─────────────────────────────────────────────
function PageContact({ t, navigate, route }) {
  const presel = route.params.svc;
  const [step, setStep] = React.useState(0);
  const [data, setData] = React.useState({
    name: '', org: '', role: '', topic: presel || '', budget: '', message: '',
  });
  const [done, setDone] = React.useState(false);
  const [submitting, setSubmitting] = React.useState(false);

  const update = (k, v) => setData((d) => ({ ...d, [k]: v }));
  const canNext = () => {
    if (step === 0) return data.name.trim() && data.org.trim();
    if (step === 1) return data.topic;
    if (step === 2) return data.message.trim().length > 8;
    return true;
  };
  const submit = async () => {
    setSubmitting(true);
    try {
      const response = await fetch('/api/contact', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(data),
      });
      if (response.ok) {
        setDone(true);
      } else {
        alert('Failed to send message. Please try again or email directly at contact@bursonconsulting.co.uk');
      }
    } catch (error) {
      alert('Failed to send message. Please try again or email directly at contact@bursonconsulting.co.uk');
    } finally {
      setSubmitting(false);
    }
  };

  if (done) return <ContactSuccess t={t} navigate={navigate} data={data} />;

  return (
    <>
      <section style={{ padding: '80px 48px 40px', maxWidth: 1320, margin: '0 auto' }}>
        <Reveal>
          <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, color: t.sub, marginBottom: 16 }}>
            <span style={{ color: t.accent }}>▸</span> /contact
          </div>
        </Reveal>
        <Reveal delay={60}>
          <h1 style={{ fontSize: 'clamp(56px, 8vw, 96px)', lineHeight: 0.96, letterSpacing: -3, fontWeight: 500, margin: 0, maxWidth: 1100 }}>
            Send a brief. <span style={{ color: t.sub }}>Get an honest answer.</span>
          </h1>
        </Reveal>
        <Reveal delay={140}>
          <p style={{ fontSize: 18, lineHeight: 1.55, color: t.sub, maxWidth: 720, marginTop: 24 }}>
            If we're the right call we'll say so within 48 hours. If someone else is a
            better fit, we'll tell you who.
          </p>
        </Reveal>
      </section>

      <section style={{ padding: '20px 48px 100px', maxWidth: 1320, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.6fr', gap: 56, alignItems: 'start' }}>
          <ContactMeta t={t} />

          <div style={{ background: t.card, border: `1px solid ${t.rule}`, borderRadius: 16, padding: 40 }}>
            <StepIndicator t={t} step={step} total={3} />
            <div style={{ marginTop: 32 }}>
              {step === 0 && <FormStep1 t={t} data={data} update={update} />}
              {step === 1 && <FormStep2 t={t} data={data} update={update} />}
              {step === 2 && <FormStep3 t={t} data={data} update={update} />}
            </div>
            <div style={{ marginTop: 32, display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 12 }}>
              {step > 0 ? (
                <SgButton t={t} variant="secondary" onClick={() => setStep(step - 1)}>← back</SgButton>
              ) : <div />}
              {step < 2 ? (
                <SgButton t={t} onClick={() => canNext() && setStep(step + 1)}>
                  <span style={{ opacity: canNext() ? 1 : 0.5 }}>continue →</span>
                </SgButton>
              ) : (
                <SgButton t={t} onClick={() => canNext() && !submitting && submit()}>
                  <span style={{ opacity: canNext() && !submitting ? 1 : 0.5 }}>
                    {submitting ? 'sending...' : 'send brief →'}
                  </span>
                </SgButton>
              )}
            </div>
          </div>
        </div>
      </section>
    </>
  );
}

function StepIndicator({ t, step, total }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontFamily: 'JetBrains Mono, monospace', fontSize: 11, color: t.sub }}>
      {[...Array(total)].map((_, i) => (
        <React.Fragment key={i}>
          <div style={{
            width: 28, height: 28, borderRadius: 14, display: 'flex', alignItems: 'center', justifyContent: 'center',
            background: i <= step ? t.accent : 'transparent',
            color: i <= step ? t.bg : t.sub,
            border: i > step ? `1px solid ${t.rule}` : 'none',
            fontWeight: 600, transition: 'all .2s',
          }}>{i < step ? '✓' : i + 1}</div>
          {i < total - 1 && <div style={{ flex: 1, height: 1, background: i < step ? t.accent : t.rule, transition: 'background .3s' }} />}
        </React.Fragment>
      ))}
      <span style={{ marginLeft: 12, whiteSpace: 'nowrap' }}>step {step + 1} / {total}</span>
    </div>
  );
}

function Field({ t, label, value, onChange, placeholder, type = 'text', rows }) {
  const [focus, setFocus] = React.useState(false);
  const props = {
    value, onChange: (e) => onChange(e.target.value),
    onFocus: () => setFocus(true), onBlur: () => setFocus(false),
    placeholder,
    style: {
      width: '100%', padding: rows ? '14px 16px' : '14px 16px',
      background: t.bgAlt, color: t.ink,
      border: `1px solid ${focus ? t.accent : t.rule}`, borderRadius: 8,
      fontSize: 15, fontFamily: 'inherit', outline: 'none', transition: 'border-color .15s',
      resize: 'vertical',
    },
  };
  return (
    <label style={{ display: 'block', marginBottom: 18 }}>
      <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, color: t.sub, marginBottom: 8, letterSpacing: 0.5 }}>{label}</div>
      {rows ? <textarea rows={rows} {...props} /> : <input type={type} {...props} />}
    </label>
  );
}

function FormStep1({ t, data, update }) {
  return (
    <div>
      <h2 style={{ fontSize: 24, fontWeight: 600, letterSpacing: -0.5, margin: '0 0 20px' }}>Who are we talking to?</h2>
      <Field t={t} label="Your name" value={data.name} onChange={(v) => update('name', v)} placeholder="Jane Doe" />
      <Field t={t} label="Organisation" value={data.org} onChange={(v) => update('org', v)} placeholder="Company name" />
      <Field t={t} label="Role (optional)" value={data.role} onChange={(v) => update('role', v)} placeholder="CTO, CIO, Partner…" />
    </div>
  );
}

function FormStep2({ t, data, update }) {
  const options = SERVICES.map((s) => ({ id: s.id, title: s.title, sub: s.sub }));
  options.push({ id: 'other', title: 'Something else', sub: 'hybrid · advisory · not sure yet' });
  return (
    <div>
      <h2 style={{ fontSize: 24, fontWeight: 600, letterSpacing: -0.5, margin: '0 0 20px' }}>What's the shape?</h2>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
        {options.map((o) => {
          const selected = data.topic === o.id;
          return (
            <button key={o.id} onClick={() => update('topic', o.id)}
              style={{
                textAlign: 'left', cursor: 'pointer', padding: 16,
                background: selected ? t.chip : t.bgAlt,
                border: `1px solid ${selected ? t.accent : t.rule}`, borderRadius: 10,
                color: t.ink, fontFamily: 'inherit', transition: 'all .15s',
              }}>
              <div style={{ fontSize: 15, fontWeight: 600, letterSpacing: -0.2 }}>{o.title}</div>
              <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 10, color: t.sub, marginTop: 4 }}>{o.sub}</div>
            </button>
          );
        })}
      </div>
      <div style={{ marginTop: 24 }}>
        <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, color: t.sub, marginBottom: 10, letterSpacing: 0.5 }}>BUDGET BAND (optional)</div>
        <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
          {['< £50k', '£50–150k', '£150–400k', '£400k+', 'retained'].map((b) => {
            const sel = data.budget === b;
            return (
              <button key={b} onClick={() => update('budget', sel ? '' : b)}
                style={{
                  padding: '8px 14px', fontFamily: 'JetBrains Mono, monospace', fontSize: 12,
                  background: sel ? t.accent : 'transparent', color: sel ? t.bg : t.sub,
                  border: `1px solid ${sel ? t.accent : t.rule}`, borderRadius: 6, cursor: 'pointer',
                }}>{b}</button>
            );
          })}
        </div>
      </div>
    </div>
  );
}

function FormStep3({ t, data, update }) {
  return (
    <div>
      <h2 style={{ fontSize: 24, fontWeight: 600, letterSpacing: -0.5, margin: '0 0 20px' }}>What outcome are you chasing?</h2>
      <Field t={t} label="A sentence or two" value={data.message} onChange={(v) => update('message', v)}
        placeholder="We need to ship our AI operating model before the next board…" rows={6} />
      <div style={{ padding: '14px 16px', background: t.bgAlt, border: `1px solid ${t.rule}`, borderRadius: 8, fontFamily: 'JetBrains Mono, monospace', fontSize: 12, color: t.sub, lineHeight: 1.55 }}>
        <span style={{ color: t.accent }}>// reply within</span> &nbsp; 48h · yes, no, or a referral
      </div>
    </div>
  );
}

function ContactSuccess({ t, navigate, data }) {
  return (
    <section style={{ padding: '120px 48px', maxWidth: 720, margin: '0 auto', textAlign: 'center' }}>
      <div style={{
        width: 72, height: 72, borderRadius: 36, background: t.chip, border: `1px solid ${t.accent}`,
        color: t.accent, fontSize: 32, display: 'flex', alignItems: 'center', justifyContent: 'center',
        margin: '0 auto 32px', animation: 'sgPop .5s cubic-bezier(.2,.9,.3,1.4)',
      }}>✓</div>
      <h1 style={{ fontSize: 48, fontWeight: 500, letterSpacing: -1.4, margin: 0, lineHeight: 1.05 }}>
        Brief received, {data.name.split(' ')[0] || 'friend'}.
      </h1>
      <p style={{ fontSize: 18, lineHeight: 1.6, color: t.sub, marginTop: 20 }}>
        You'll get an honest answer within 48 hours: yes, no, or an introduction to someone better.
      </p>
      <div style={{ marginTop: 40, padding: 24, background: t.card, border: `1px solid ${t.rule}`, borderRadius: 12, textAlign: 'left', fontFamily: 'JetBrains Mono, monospace', fontSize: 12, color: t.sub, lineHeight: 1.7 }}>
        <div><span style={{ color: t.subDim }}>NAME</span> &nbsp;&nbsp; <span style={{ color: t.ink }}>{data.name}</span></div>
        <div><span style={{ color: t.subDim }}>ORG</span> &nbsp;&nbsp;&nbsp; <span style={{ color: t.ink }}>{data.org}</span></div>
        <div><span style={{ color: t.subDim }}>TOPIC</span> &nbsp; <span style={{ color: t.ink }}>{SERVICES.find((s) => s.id === data.topic)?.title || data.topic}</span></div>
        {data.budget && <div><span style={{ color: t.subDim }}>BUDGET</span> &nbsp;<span style={{ color: t.ink }}>{data.budget}</span></div>}
      </div>
      <div style={{ marginTop: 40, display: 'flex', gap: 12, justifyContent: 'center' }}>
        <SgButton t={t} onClick={() => navigate('/')}>Back to home</SgButton>
        <SgButton t={t} variant="secondary" onClick={() => navigate('/insights')}>Read some Signal</SgButton>
      </div>
      <style>{`@keyframes sgPop { from { transform: scale(.6); opacity: 0 } to { transform: none; opacity: 1 } }`}</style>
    </section>
  );
}

function ContactMeta({ t }) {
  return (
    <div>
      <div style={{ padding: 24, background: t.card, border: `1px solid ${t.rule}`, borderRadius: 12 }}>
        <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, color: t.accent, marginBottom: 12 }}>▸ direct</div>
        <a href="mailto:contact@bursonconsulting.co.uk" style={{ color: t.ink, textDecoration: 'none', fontSize: 15, fontWeight: 500 }}>
          contact@bursonconsulting.co.uk
        </a>
        <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, color: t.sub, marginTop: 10, lineHeight: 1.6 }}>
          reply within 48h<br />no automated triage
        </div>
      </div>
      <div style={{ marginTop: 16, padding: 24, background: t.card, border: `1px solid ${t.rule}`, borderRadius: 12 }}>
        <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, color: t.accent, marginBottom: 12 }}>▸ capacity</div>
        <div style={{ fontSize: 15, fontWeight: 500 }}>Q3 2026 · 2 slots</div>
        <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, color: t.sub, marginTop: 10, lineHeight: 1.6 }}>
          6–16 week engagements<br />London &amp; remote
        </div>
      </div>
      <div style={{ marginTop: 16, padding: 24, background: t.card, border: `1px solid ${t.rule}`, borderRadius: 12 }}>
        <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, color: t.sub, marginBottom: 12, letterSpacing: 1 }}>WHAT TO EXPECT</div>
        <ol style={{ margin: 0, padding: 0, listStyle: 'none', fontSize: 13, color: t.sub, lineHeight: 1.7 }}>
          <li><span style={{ color: t.accent, fontFamily: 'JetBrains Mono, monospace', fontSize: 10, marginRight: 8 }}>01</span> 48h reply</li>
          <li><span style={{ color: t.accent, fontFamily: 'JetBrains Mono, monospace', fontSize: 10, marginRight: 8 }}>02</span> 30-min intro call</li>
          <li><span style={{ color: t.accent, fontFamily: 'JetBrains Mono, monospace', fontSize: 10, marginRight: 8 }}>03</span> One-page engagement shape</li>
          <li><span style={{ color: t.accent, fontFamily: 'JetBrains Mono, monospace', fontSize: 10, marginRight: 8 }}>04</span> Start within 2 weeks</li>
        </ol>
      </div>
    </div>
  );
}

Object.assign(window, { PageAbout, PageContact });