// Signal — Services page with interactive detail drawer

function PageServices({ t, navigate, route }) {
  const selectedId = route.params.svc;
  const selected = SERVICES.find((s) => s.id === selectedId);

  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> /services
          </div>
        </Reveal>
        <Reveal delay={60}>
          <h1 style={{ fontSize: 'clamp(56px, 8vw, 96px)', lineHeight: 0.96, letterSpacing: -3, fontWeight: 500, margin: 0, maxWidth: 1100 }}>
            Five practices built around the <span style={{ color: t.accent }}>decisions</span> that actually move the P&amp;L.
          </h1>
        </Reveal>
        <Reveal delay={140}>
          <p style={{ fontSize: 18, lineHeight: 1.55, color: t.sub, maxWidth: 720, marginTop: 28 }}>
            Every engagement starts with a question: <em>what outcome are we chasing?</em>
            Select any practice below to see the engagement shape, deliverables and typical duration.
          </p>
        </Reveal>
      </section>

      <section style={{ padding: '40px 48px 100px', maxWidth: 1320, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 32, alignItems: 'start' }}>
          {/* List */}
          <div style={{ position: 'sticky', top: 100 }}>
            {SERVICES.map((s) => {
              const active = selectedId === s.id;
              return (
                <button key={s.id} onClick={() => navigate('/services', { svc: s.id })}
                  style={{
                    width: '100%', textAlign: 'left', cursor: 'pointer',
                    background: active ? t.card : 'transparent',
                    border: `1px solid ${active ? t.accent : t.rule}`,
                    borderRadius: 10, padding: '20px 22px', marginBottom: 8,
                    color: t.ink, fontFamily: 'inherit',
                    transition: 'border-color .2s, background .2s',
                    display: 'flex', alignItems: 'center', gap: 16,
                  }}
                  onMouseEnter={(e) => { if (!active) e.currentTarget.style.background = t.bgAlt; }}
                  onMouseLeave={(e) => { if (!active) e.currentTarget.style.background = 'transparent'; }}>
                  <span style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, color: active ? t.accent : t.sub }}>{s.n}</span>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 18, fontWeight: 600, letterSpacing: -0.3 }}>{s.title}</div>
                    <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, color: t.sub, marginTop: 3 }}>{s.sub}</div>
                  </div>
                  <span style={{ color: active ? t.accent : t.subDim, fontSize: 18 }}>{active ? '●' : '○'}</span>
                </button>
              );
            })}
          </div>

          {/* Detail */}
          <div>
            {selected ? <ServiceDetail key={selected.id} t={t} s={selected} navigate={navigate} />
              : <ServicePrompt t={t} />}
          </div>
        </div>
      </section>

      <ProcessTimeline t={t} />
      <HomeCTA t={t} navigate={navigate} />
    </>
  );
}

function ServicePrompt({ t }) {
  return (
    <div style={{
      background: t.card, border: `1px dashed ${t.rule}`, borderRadius: 16,
      padding: 56, textAlign: 'center', minHeight: 400,
      display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
    }}>
      <div style={{ fontSize: 40, color: t.subDim, marginBottom: 16 }}>←</div>
      <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 13, color: t.sub }}>Select a practice to see the engagement detail</div>
    </div>
  );
}

function ServiceDetail({ t, s, navigate }) {
  return (
    <div style={{
      background: t.card, border: `1px solid ${t.rule}`, borderRadius: 16, padding: 40,
      animation: 'sgSlideIn .35s cubic-bezier(.2,.7,.3,1)',
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 12 }}>
        <span style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, color: t.accent, padding: '6px 10px', background: t.chip, borderRadius: 5 }}>{s.n}</span>
        <span style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, color: t.sub }}>{s.duration} · {s.shape}</span>
      </div>
      <h2 style={{ fontSize: 40, fontWeight: 600, letterSpacing: -1.2, margin: '8px 0 4px', lineHeight: 1.05 }}>{s.title}</h2>
      <div style={{ fontSize: 20, color: t.accent, fontFamily: 'Newsreader, serif', fontStyle: 'italic', marginBottom: 24 }}>
        {s.tagline}
      </div>
      <p style={{ fontSize: 16, lineHeight: 1.6, color: t.sub, margin: 0 }}>{s.body}</p>

      <div style={{ marginTop: 32, padding: '20px 22px', border: `1px solid ${t.rule}`, borderRadius: 10, background: t.bgAlt, fontFamily: 'JetBrains Mono, monospace', fontSize: 13, lineHeight: 1.55, color: t.sub }}>
        <span style={{ color: t.accent }}>// signal &nbsp;</span>
        {s.signal}
      </div>

      <div style={{ marginTop: 32 }}>
        <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, color: t.sub, letterSpacing: 1, marginBottom: 14 }}>DELIVERABLES</div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
          {s.deliverables.map((d, i) => (
            <div key={i} style={{
              display: 'flex', alignItems: 'flex-start', gap: 10, padding: '12px 14px',
              background: t.bgAlt, border: `1px solid ${t.rule}`, borderRadius: 8, fontSize: 14,
            }}>
              <span style={{ color: t.accent, fontFamily: 'JetBrains Mono, monospace', fontSize: 10, marginTop: 4 }}>0{i + 1}</span>
              <span>{d}</span>
            </div>
          ))}
        </div>
      </div>

      <div style={{ marginTop: 32, display: 'flex', gap: 12 }}>
        <SgButton t={t} onClick={() => navigate('/contact', { svc: s.id })}>
          Scope {s.title} <span style={{ fontFamily: 'JetBrains Mono, monospace' }}>→</span>
        </SgButton>
        <SgButton t={t} variant="secondary" onClick={() => navigate('/services')}>
          All practices
        </SgButton>
      </div>
      <style>{`@keyframes sgSlideIn { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }`}</style>
    </div>
  );
}

function ProcessTimeline({ t }) {
  const steps = [
    { n: '01', title: 'Brief', body: 'A short written brief or 30-min call. No deck. We say yes or no within 48 hours.', tag: 'day 0' },
    { n: '02', title: 'Scoping', body: 'One-page engagement shape: outcome, duration, artefacts, cadence, price.', tag: 'week 1' },
    { n: '03', title: 'Work', body: 'Short, intense engagements. Weekly exec check-ins. Artefacts shipped as we go.', tag: 'weeks 2–12' },
    { n: '04', title: 'Handover', body: 'Operable outputs, not a deck. Retained advisory if useful. Referral if not.', tag: 'close' },
  ];
  return (
    <section style={{ padding: '100px 48px', borderTop: `1px solid ${t.rule}`, background: t.bgAlt }}>
      <div style={{ maxWidth: 1320, margin: '0 auto' }}>
        <Reveal>
          <SectionHeader
            t={t}
            kicker="how we work"
            title="Short engagements. Operator tempo."
          />
        </Reveal>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16, position: 'relative' }}>
          <div style={{ position: 'absolute', top: 28, left: 40, right: 40, height: 1, background: t.rule }} />
          {steps.map((s, i) => (
            <Reveal key={s.n} delay={i * 100}>
              <div style={{ padding: 20, background: t.card, border: `1px solid ${t.rule}`, borderRadius: 12, position: 'relative' }}>
                <div style={{
                  width: 30, height: 30, borderRadius: 15, background: t.accent, color: t.bg,
                  fontFamily: 'JetBrains Mono, monospace', fontWeight: 700, fontSize: 12,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  marginLeft: -6, marginTop: -6, marginBottom: 16,
                  boxShadow: `0 0 0 4px ${t.bgAlt}`,
                }}>{s.n}</div>
                <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 10, color: t.sub, marginBottom: 4 }}>{s.tag}</div>
                <h3 style={{ fontSize: 20, fontWeight: 600, margin: '0 0 8px', letterSpacing: -0.4 }}>{s.title}</h3>
                <p style={{ fontSize: 13, lineHeight: 1.55, color: t.sub, margin: 0 }}>{s.body}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { PageServices });