// Signal — Home page

function PageHome({ t, navigate }) {
  return (
    <>
      <HomeHero t={t} navigate={navigate} />
      <Ticker t={t} />
      <HomePractices t={t} navigate={navigate} />
      <HomePhilosophy t={t} />
      <HomeTestimonials t={t} />
      <HomeLatestSignal t={t} navigate={navigate} />
      <HomeCTA t={t} navigate={navigate} />
    </>
  );
}

function HomeHero({ t, navigate }) {
  return (
    <section style={{ padding: '100px 48px 80px', maxWidth: 1320, margin: '0 auto', position: 'relative' }}>
      <div style={{ position: 'absolute', top: 60, left: 32, width: 14, height: 14, borderColor: t.accent, borderStyle: 'solid', borderWidth: '1px 0 0 1px' }} />
      <div style={{ position: 'absolute', top: 60, right: 32, width: 14, height: 14, borderColor: t.accent, borderStyle: 'solid', borderWidth: '1px 1px 0 0' }} />
      <div style={{ display: 'grid', gridTemplateColumns: '1.25fr 1fr', gap: 72, alignItems: 'center' }}>
        <div>
          <Reveal>
            <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 12, color: t.sub, marginBottom: 28 }}>
              <span style={{ color: t.accent }}>▸</span> technology &amp; AI advisory <span style={{ color: t.sub }}>·</span> enterprise
            </div>
          </Reveal>
          <Reveal delay={80}>
            <h1 style={{ fontSize: 'clamp(56px, 8vw, 104px)', lineHeight: 0.92, letterSpacing: -3.2, fontWeight: 500, margin: 0, textWrap: 'balance' }}>
              Ship the AI <span style={{ color: t.accent }}>operating model</span> your board thinks you already have.
            </h1>
          </Reveal>
          <Reveal delay={160}>
            <p style={{ fontSize: 19, lineHeight: 1.5, color: t.sub, maxWidth: 560, marginTop: 32 }}>
              Burson Consulting advises CTOs and CIOs on the strategy, engineering and
              commercial decisions that turn AI spend into measurable outcomes.
            </p>
          </Reveal>
          <Reveal delay={240}>
            <div style={{ display: 'flex', gap: 12, marginTop: 40 }}>
              <SgButton t={t} onClick={() => navigate('/contact')}>Book an intro <span style={{ fontFamily: 'JetBrains Mono, monospace' }}>→</span></SgButton>
              <SgButton t={t} variant="secondary" onClick={() => navigate('/services')}>See services</SgButton>
            </div>
          </Reveal>
          <Reveal delay={320}>
            <div style={{ marginTop: 44, display: 'flex', gap: 32, fontFamily: 'JetBrains Mono, monospace', fontSize: 11, color: t.sub, flexWrap: 'wrap' }}>
              <span><span style={{ color: t.ink }}>30y</span> operator</span>
              <span><span style={{ color: t.ink }}>2×</span> enterprise CTO</span>
              <span><span style={{ color: t.ink }}>10k+</span> engineers led</span>
              <span><span style={{ color: t.ink }}>05</span> disciplines</span>
            </div>
          </Reveal>
        </div>
        <Reveal delay={300} y={24}>
          <TelemetryPanel t={t} />
        </Reveal>
      </div>
    </section>
  );
}

function HomePractices({ t, navigate }) {
  const [hover, setHover] = React.useState(null);
  return (
    <section style={{ padding: '100px 48px', maxWidth: 1320, margin: '0 auto' }}>
      <Reveal>
        <SectionHeader
          t={t}
          kicker="section / practice"
          title={<>Five practices. <span style={{ color: t.sub }}>One operator.</span></>}
          note={<>Engagements run 2–16 weeks.<br />Retained advisory monthly.<br />Board sparring by the session.</>}
        />
      </Reveal>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, border: `1px solid ${t.rule}`, borderRadius: 12, overflow: 'hidden' }}>
        {SERVICES.map((s, i) => {
          const col = i % 3; const row = Math.floor(i / 3);
          const isHover = hover === s.id;
          return (
            <a key={s.id} href={'#/services?svc=' + s.id}
              onClick={(e) => { e.preventDefault(); navigate('/services', { svc: s.id }); }}
              onMouseEnter={() => setHover(s.id)} onMouseLeave={() => setHover(null)}
              style={{
                padding: 32, textDecoration: 'none', color: 'inherit',
                borderRight: col < 2 ? `1px solid ${t.rule}` : 'none',
                borderBottom: row < 1 ? `1px solid ${t.rule}` : 'none',
                background: isHover ? t.card : 'transparent', transition: 'background .2s',
                position: 'relative', minHeight: 260, display: 'flex', flexDirection: 'column',
              }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 16 }}>
                <span style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, color: t.accent, padding: '4px 8px', background: t.chip, borderRadius: 4 }}>{s.n}</span>
                <span style={{ fontSize: 18, color: isHover ? t.accent : t.sub, transition: 'color .2s, transform .2s', transform: isHover ? 'translate(4px, -4px)' : 'none' }}>↗</span>
              </div>
              <h3 style={{ fontSize: 22, fontWeight: 600, letterSpacing: -0.5, margin: '0 0 6px' }}>{s.title}</h3>
              <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, color: t.sub, marginBottom: 16 }}>{s.sub}</div>
              <p style={{ fontSize: 14, lineHeight: 1.55, color: t.sub, margin: 0 }}>{s.body}</p>
            </a>
          );
        })}
        <div style={{ padding: 32, minHeight: 260, display: 'flex', flexDirection: 'column', justifyContent: 'space-between', background: t.bgAlt }}>
          <div>
            <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, color: t.sub, marginBottom: 12 }}>/06 · custom</div>
            <h3 style={{ fontSize: 22, fontWeight: 600, letterSpacing: -0.5, margin: '0 0 12px' }}>Something else?</h3>
            <p style={{ fontSize: 14, lineHeight: 1.55, color: t.sub, margin: 0 }}>
              Most engagements are hybrids. Describe the outcome you're chasing — we'll
              say yes, no, or introduce you to someone better.
            </p>
          </div>
          <a href="#/contact" onClick={(e) => { e.preventDefault(); navigate('/contact'); }}
            style={{ fontSize: 13, fontWeight: 500, color: t.accent, textDecoration: 'none' }}>
            Start a conversation →
          </a>
        </div>
      </div>
    </section>
  );
}

function HomePhilosophy({ t }) {
  return (
    <section style={{ padding: '100px 48px', borderTop: `1px solid ${t.rule}`, borderBottom: `1px solid ${t.rule}`, background: t.bgAlt }}>
      <div style={{ maxWidth: 1100, margin: '0 auto' }}>
        <Reveal>
          <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, color: t.sub, marginBottom: 20 }}>
            <span style={{ color: t.accent }}>▸</span> philosophy
          </div>
        </Reveal>
        <Reveal delay={80}>
          <h2 style={{ fontSize: 'clamp(36px, 4.5vw, 56px)', fontWeight: 400, lineHeight: 1.12, letterSpacing: -1.4, margin: 0, textWrap: 'balance' }}>
            Enterprise technology has become a <span style={{ color: t.accent, fontStyle: 'italic', fontFamily: 'Newsreader, serif' }}>leverage problem</span>, not an implementation problem. The firms pulling ahead aren't the ones buying the most AI — they're the ones whose operating model metabolises it.
          </h2>
        </Reveal>
      </div>
    </section>
  );
}

function HomeTestimonials({ t }) {
  const [idx, setIdx] = React.useState(0);
  React.useEffect(() => {
    const id = setInterval(() => setIdx((i) => (i + 1) % TESTIMONIALS.length), 5200);
    return () => clearInterval(id);
  }, []);
  const cur = TESTIMONIALS[idx];
  return (
    <section style={{ padding: '100px 48px', maxWidth: 1320, margin: '0 auto' }}>
      <Reveal>
        <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, color: t.sub, marginBottom: 32 }}>
          <span style={{ color: t.accent }}>▸</span> what clients say
        </div>
      </Reveal>
      <Reveal delay={80}>
        <div style={{ minHeight: 220 }}>
          <blockquote key={idx} style={{
            fontSize: 'clamp(28px, 3.2vw, 40px)', lineHeight: 1.24, fontWeight: 400, letterSpacing: -0.8, margin: 0,
            maxWidth: 1000, animation: 'sgQuoteIn .5s ease-out',
          }}>
            <span style={{ color: t.accent, fontFamily: 'Newsreader, serif', fontSize: '1.3em', lineHeight: 0 }}>“</span>
            {cur.quote}
          </blockquote>
          <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 12, color: t.sub, marginTop: 24 }}>
            — {cur.who}
          </div>
        </div>
      </Reveal>
      <div style={{ display: 'flex', gap: 8, marginTop: 32 }}>
        {TESTIMONIALS.map((_, i) => (
          <button key={i} onClick={() => setIdx(i)} aria-label={`Testimonial ${i+1}`} style={{
            width: i === idx ? 28 : 10, height: 4, padding: 0, border: 'none', borderRadius: 2,
            background: i === idx ? t.accent : t.rule, cursor: 'pointer', transition: 'width .3s, background .3s',
          }} />
        ))}
      </div>
      <style>{`@keyframes sgQuoteIn { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }`}</style>
    </section>
  );
}

function HomeLatestSignal({ t, navigate }) {
  const posts = INSIGHTS.slice(0, 3);
  return (
    <section style={{ padding: '100px 48px', maxWidth: 1320, margin: '0 auto', borderTop: `1px solid ${t.rule}` }}>
      <Reveal>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 48 }}>
          <div>
            <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, color: t.sub, marginBottom: 12 }}>
              <span style={{ color: t.accent }}>▸</span> latest signal
            </div>
            <h2 style={{ fontSize: 48, fontWeight: 500, letterSpacing: -1.4, margin: 0 }}>Writing, field notes, talks.</h2>
          </div>
          <a href="#/insights" onClick={(e) => { e.preventDefault(); navigate('/insights'); }}
            style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 12, color: t.accent, textDecoration: 'none' }}>view all →</a>
        </div>
      </Reveal>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
        {posts.map((p, i) => (
          <Reveal key={p.id} delay={i * 80}>
            <InsightCard t={t} p={p} onClick={() => navigate('/insights', { id: p.id })} />
          </Reveal>
        ))}
      </div>
    </section>
  );
}

function InsightCard({ t, p, onClick }) {
  const [hover, setHover] = React.useState(false);
  return (
    <a href="#" onClick={(e) => { e.preventDefault(); onClick(); }}
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        background: t.card, border: `1px solid ${hover ? t.accent : t.rule}`, borderRadius: 12, padding: 24,
        textDecoration: 'none', color: 'inherit', display: 'flex', flexDirection: 'column',
        minHeight: 260, transition: 'border-color .2s, transform .2s',
        transform: hover ? 'translateY(-2px)' : 'none',
      }}>
      <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, color: t.sub, display: 'flex', gap: 8, marginBottom: 20 }}>
        <span style={{ color: t.accent }}>{p.tag}</span>
        <span>·</span><span>{p.date}</span>
        <span style={{ marginLeft: 'auto' }}>{p.time}</span>
      </div>
      <h3 style={{ fontSize: 22, fontWeight: 600, letterSpacing: -0.4, margin: '0 0 12px', lineHeight: 1.2 }}>{p.title}</h3>
      <p style={{ fontSize: 14, lineHeight: 1.55, color: t.sub, margin: 0, flex: 1 }}>{p.dek}</p>
      <div style={{ marginTop: 20, fontFamily: 'JetBrains Mono, monospace', fontSize: 12, color: hover ? t.accent : t.sub, transition: 'color .2s' }}>
        read → {hover && <span style={{ animation: 'sgBlink 1s step-end infinite' }}>_</span>}
      </div>
    </a>
  );
}

function HomeCTA({ t, navigate }) {
  return (
    <section style={{ padding: '100px 48px', borderTop: `1px solid ${t.rule}` }}>
      <div style={{ maxWidth: 1320, margin: '0 auto', background: t.card, border: `1px solid ${t.rule}`, borderRadius: 16, padding: '72px 56px', position: 'relative', overflow: 'hidden' }}>
        <svg width="100%" height="100%" style={{ position: 'absolute', inset: 0, opacity: 0.6 }}>
          <defs>
            <pattern id="cta-grid-home" width="40" height="40" patternUnits="userSpaceOnUse">
              <circle cx="0" cy="0" r="1" fill={t.accent} opacity="0.22" />
            </pattern>
          </defs>
          <rect width="100%" height="100%" fill="url(#cta-grid-home)" />
        </svg>
        <div style={{ position: 'relative', display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 72, alignItems: 'center' }}>
          <div>
            <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, color: t.accent, marginBottom: 16 }}>▸ let's work</div>
            <h2 style={{ fontSize: 'clamp(40px, 5vw, 64px)', fontWeight: 500, letterSpacing: -2, lineHeight: 1, margin: 0 }}>
              Short brief.<br />Honest answer on fit.
            </h2>
            <p style={{ fontSize: 17, lineHeight: 1.55, color: t.sub, marginTop: 20, maxWidth: 520 }}>
              If we're the right call we'll say so. If someone else is a better fit, we'll
              tell you who.
            </p>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            <SgButton t={t} full onClick={() => navigate('/contact')}>
              <span style={{ marginRight: 'auto' }}>Send a brief</span>
              <span style={{ fontFamily: 'JetBrains Mono, monospace' }}>→</span>
            </SgButton>
            <SgButton t={t} variant="secondary" full onClick={() => navigate('/contact', { form: 'intro' })}>
              <span style={{ marginRight: 'auto' }}>Book an intro call</span>
              <span style={{ fontFamily: 'JetBrains Mono, monospace', color: t.sub }}>30 min</span>
            </SgButton>
            <SgButton t={t} variant="secondary" full onClick={() => navigate('/contact', { form: 'signal' })}>
              <span style={{ marginRight: 'auto' }}>Subscribe to Signal</span>
              <span style={{ fontFamily: 'JetBrains Mono, monospace', color: t.sub }}>monthly</span>
            </SgButton>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { PageHome });