// Syntari v4 — Mid sections: Global footprint map, Manifesto (editorial), What we ship (de-slopped)

const { useEffect: useEff2, useRef: useRef2, useState: useState2, useMemo: useMemo2 } = React;

/* ─────────────────────────────────────────────
   Global footprint — a quiet world map with pins
   for US, Brazil, Portugal, Europe.
   Uses equirectangular projection.
   ───────────────────────────────────────────── */

function GlobalFootprint() {
  const ref = useRef2();
  useReveal(ref);

  // [lng, lat, label, country, labelDx, labelDy, labelAnchor]
  // Manual label offsets to avoid collisions in the European cluster.
  const clients = [
    { lng: -74,   lat: 40.7,  label: 'New York',      country: 'US', dx: 10,  dy: 4,   anchor: 'start' },
    { lng: -122,  lat: 37.8,  label: 'San Francisco', country: 'US', dx: -10, dy: 4,   anchor: 'end' },
    { lng: -46.6, lat: -23.5, label: 'São Paulo',     country: 'BR', dx: 10,  dy: 4,   anchor: 'start' },
    { lng: -9.1,  lat: 38.7,  label: 'Lisbon',        country: 'PT', dx: -10, dy: 4,   anchor: 'end' },
    { lng: -0.1,  lat: 51.5,  label: 'London',        country: 'EU', dx: -10, dy: -2,  anchor: 'end' },
    { lng: 2.3,   lat: 48.8,  label: 'Paris',         country: 'EU', dx: -10, dy: 14,  anchor: 'end' },
    { lng: 13.4,  lat: 52.5,  label: 'Berlin',        country: 'EU', dx: 10,  dy: 4,   anchor: 'start' },
  ];

  // Equirect projection to an 1100×520 canvas
  const W = 1100, H = 520;
  const project = (lng, lat) => {
    const x = (lng + 180) / 360 * W;
    const y = (90 - lat) / 180 * H;
    return { x, y };
  };

  // Generate a dotted landmass field — approximate via a procedural mask.
  // We'll draw a grid of tiny dots over rough continent polygons using path data.
  // To keep this elegant and lightweight, we inline a low-res continent silhouette
  // encoded as a simplified SVG path (from public domain world outline).
  // For simplicity, we generate a grid of dots and only show dots that fall inside
  // a few rectangular landmass "hints" — looks close enough to a stylized map.
  const dots = useMemo2(() => {
    const step = 8;
    const ds = [];
    // Rough landmass bounding regions (lng1, lat1, lng2, lat2)
    const regions = [
      // North America
      [-165, 70, -52, 15],
      // Central America tail
      [-110, 25, -60, 7],
      // South America
      [-82, 13, -34, -55],
      // Greenland
      [-55, 83, -20, 60],
      // Europe / Scandinavia
      [-10, 72, 40, 36],
      // UK / Ireland
      [-11, 60, 2, 50],
      // Africa
      [-18, 37, 52, -35],
      // Middle East
      [25, 42, 62, 12],
      // Russia / N Asia
      [30, 78, 180, 50],
      // China / SE Asia
      [70, 55, 145, 5],
      // India
      [68, 35, 92, 6],
      // Indonesia / Philippines
      [95, 8, 142, -11],
      // Australia
      [113, -11, 154, -40],
      // New Zealand
      [165, -34, 179, -48],
      // Japan
      [128, 46, 146, 30],
      // Iceland
      [-25, 67, -13, 63],
    ];
    // Add some "holes" to carve out oceans roughly inside bboxes
    const holes = [
      // Gulf of Mexico
      [-98, 30, -80, 18],
      // Mediterranean
      [-5, 45, 35, 30],
      // Hudson Bay
      [-95, 65, -75, 51],
      // Red Sea
      [32, 30, 44, 12],
      // Caspian
      [47, 47, 55, 36],
      // Black Sea
      [28, 47, 42, 40],
      // Persian Gulf
      [48, 30, 57, 24],
      // Baltic
      [10, 66, 30, 54],
      // Sea of Japan
      [128, 50, 142, 36],
      // Bay of Bengal
      [80, 22, 95, 5],
      // Arabian Sea
      [55, 22, 72, 8],
      // South China Sea
      [105, 22, 122, 3],
      // Java Sea
      [105, -2, 122, -8],
      // Tasman Sea
      [150, -30, 175, -46],
    ];

    for (let lat = 75; lat > -60; lat -= 2.2) {
      for (let lng = -175; lng < 180; lng += 2.5) {
        let inside = false;
        for (const [a, b, c, d] of regions) {
          if (lng >= a && lng <= c && lat <= b && lat >= d) { inside = true; break; }
        }
        if (!inside) continue;
        let holed = false;
        for (const [a, b, c, d] of holes) {
          if (lng >= a && lng <= c && lat <= b && lat >= d) { holed = true; break; }
        }
        if (holed) continue;
        const { x, y } = project(lng, lat);
        ds.push({ x, y });
      }
    }
    return ds;
  }, []);

  const pins = clients.map(c => ({ ...c, ...project(c.lng, c.lat) }));

  return (
    <section ref={ref} style={{
      position: 'relative',
      padding: '140px 48px 140px',
      borderTop: '1px solid var(--line)',
      background: 'var(--bg-2)',
      overflow: 'hidden',
    }}>
      <div style={{ maxWidth: 1400, margin: '0 auto' }}>
        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 72, gap: 40, flexWrap: 'wrap' }}>
          <h2 data-reveal className="reveal-up" style={{
            fontSize: 'clamp(36px, 4.2vw, 58px)',
            lineHeight: 1.05, letterSpacing: '-0.032em', fontWeight: 300,
            margin: 0, maxWidth: 760, textWrap: 'balance',
          }}>
            Trusted by founders across the US, Brazil, Portugal, <span className="serif">and Europe.</span>
          </h2>
          <div data-reveal className="reveal" style={{ fontSize: 14, color: 'var(--fg-muted)', maxWidth: 280, lineHeight: 1.55 }}>
            Ten-plus projects, four time zones. Remote first, in person when it matters.
          </div>
        </div>

        <div data-reveal className="reveal" style={{ position: 'relative' }}>
          <svg viewBox={`0 0 ${W} ${H}`} width="100%" style={{ display: 'block' }}>
            {/* Subtle crosshair grid */}
            <g stroke="rgba(255,255,255,0.03)" strokeWidth="1">
              {[0, 0.25, 0.5, 0.75, 1].map(f => (
                <line key={`h${f}`} x1="0" y1={H * f} x2={W} y2={H * f} />
              ))}
              {[0, 0.25, 0.5, 0.75, 1].map(f => (
                <line key={`v${f}`} x1={W * f} y1="0" x2={W * f} y2={H} />
              ))}
            </g>

            {/* Landmass dots */}
            {dots.map((d, i) => (
              <circle key={i} cx={d.x} cy={d.y} r="1.1" fill="rgba(245,245,242,0.22)" />
            ))}

            {/* Pins */}
            {pins.map((p, i) => (
              <g key={i}>
                {/* Pulse ring */}
                <circle cx={p.x} cy={p.y} r="3" fill="oklch(0.82 0.13 40)">
                  <animate attributeName="r" values="3;14;3" dur="3s" begin={`${i * 0.35}s`} repeatCount="indefinite" />
                  <animate attributeName="opacity" values="0.8;0;0.8" dur="3s" begin={`${i * 0.35}s`} repeatCount="indefinite" />
                </circle>
                <circle cx={p.x} cy={p.y} r="3.5" fill="oklch(0.88 0.14 40)" />
                <circle cx={p.x} cy={p.y} r="1.2" fill="#fff" />
                {/* Label */}
                <g transform={`translate(${p.x + p.dx}, ${p.y + p.dy})`}>
                  <text fontFamily="'Geist Mono', monospace" fontSize="11" fill="rgba(245,245,242,0.72)"
                    textAnchor={p.anchor}
                    style={{ letterSpacing: '0.05em' }}>
                    {p.label}
                  </text>
                </g>
              </g>
            ))}
          </svg>
        </div>

        {/* Country strip */}
        <div data-reveal className="reveal" style={{
          marginTop: 64,
          display: 'grid',
          gridTemplateColumns: 'repeat(4, 1fr)',
          gap: 1,
          background: 'var(--line)',
          border: '1px solid var(--line)',
        }}>
          {[
            { c: 'United States', n: 'New York · San Francisco' },
            { c: 'Brazil',        n: 'São Paulo · Florianópolis' },
            { c: 'Portugal',      n: 'Lisbon' },
            { c: 'Europe',        n: 'London · Paris · Berlin' },
          ].map((r, i) => (
            <div key={i} style={{
              background: 'var(--bg-2)',
              padding: '32px 28px',
            }}>
              <div style={{ fontSize: 16, fontWeight: 500, letterSpacing: '-0.015em', marginBottom: 6 }}>{r.c}</div>
              <div style={{ fontSize: 13, color: 'var(--fg-muted)' }}>{r.n}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ─── Manifesto — editorial, no principles grid ─── */
function Manifesto() {
  const ref = useRef2();
  useReveal(ref);
  return (
    <section ref={ref} id="approach" style={{
      position: 'relative',
      padding: '200px 48px 180px',
      maxWidth: 1400, margin: '0 auto',
    }}>
      <div style={{ display: 'grid', gridTemplateColumns: '220px 1fr', gap: 80, alignItems: 'flex-start' }}>
        <div data-reveal className="reveal-up" style={{ position: 'sticky', top: 120 }}>
          <div style={{ fontSize: 13, color: 'var(--fg-muted)', marginBottom: 8 }}>01 / Approach</div>
          <div style={{ width: 32, height: 1, background: 'var(--fg-faint)' }} />
        </div>

        <div style={{ maxWidth: 900 }}>
          <h2 data-reveal className="reveal-up" style={{
            fontSize: 'clamp(40px, 5vw, 72px)',
            lineHeight: 1.05,
            letterSpacing: '-0.035em',
            fontWeight: 300,
            margin: '0 0 56px',
            textWrap: 'balance',
          }}>
            The growth engineering team <span className="serif">you’d hire</span> if you could find one.
          </h2>

          <div style={{ fontSize: 18, lineHeight: 1.7, color: 'var(--fg-muted)' }}>
            <p data-reveal className="reveal-up" style={{ margin: '0 0 28px', textWrap: 'pretty' }}>
              The best growth operators sit at Ramp, Perplexity, Cursor, ElevenLabs. They understand
              growth, product, and how to build with AI well enough to ship a new system overnight.
              There are not many of them. The ones that exist are not for hire.
            </p>
            <p data-reveal className="reveal-up" style={{ margin: '0 0 28px', textWrap: 'pretty' }}>
              We are that team, on retainer. Senior hands only. We build inside your company, on your data, sized to what your business actually needs.
            </p>
            <p data-reveal className="reveal-up" style={{ margin: 0, color: 'var(--fg)', fontSize: 20, textWrap: 'pretty' }}>
              Then we hand it over. The system keeps running without us. That is the point.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ─── What we ship — interactive switcher with live demos ─── */
function WhatWeShip() {
  const ref = useRef2();
  useReveal(ref);
  const [active, setActive] = useState2(0);

  const engines = [
    { k: 'Paid Acquisition',        d: 'Google, Meta, LinkedIn. Creative, funnel, tracking. Every dollar tied to a real outcome.' },
    { k: 'Outbound & Outreach',     d: 'We find the customers you want and reach them in your voice, across email and LinkedIn.' },
    { k: 'Landing Pages & Funnels', d: 'Pages that convert, tied to the rest of your funnel, kept improving on what the data shows.' },
    { k: 'AI Agents & Automations', d: 'Focused assistants that take busy work off your team: scoring leads, sorting support, drafting content.' },
    { k: 'Customer Success Agents', d: 'Onboarding new customers, keeping them active, spotting risk early. The follow-ups your team never has time for.' },
    { k: 'CRM Build & Migration',   d: 'Build a CRM that fits your business, or move the messy one you already have somewhere cleaner.' },
    { k: 'Revenue Operations',      d: 'The wiring that makes growth visible: where customers come from, what they cost, which bets are paying off.' },
  ];

  return (
    <section ref={ref} id="systems" style={{
      position: 'relative',
      padding: '180px 48px 160px',
      maxWidth: 1400, margin: '0 auto',
    }}>
      <div style={{ display: 'grid', gridTemplateColumns: '220px 1fr', gap: 80, marginBottom: 96 }}>
        <div data-reveal className="reveal-up">
          <div style={{ fontSize: 13, color: 'var(--fg-muted)', marginBottom: 8 }}>02 / What we ship</div>
          <div style={{ width: 32, height: 1, background: 'var(--fg-faint)' }} />
        </div>
        <div style={{ maxWidth: 900 }}>
          <h2 data-reveal className="reveal-up" style={{
            fontSize: 'clamp(40px, 5vw, 72px)',
            lineHeight: 1.05, letterSpacing: '-0.035em', fontWeight: 300,
            margin: '0 0 40px', textWrap: 'balance',
          }}>
            Quick fixes break fast. <span className="serif">We build the few that keep working.</span>
          </h2>
          <p data-reveal className="reveal-up" style={{
            fontSize: 18, lineHeight: 1.65, color: 'var(--fg-muted)',
            margin: 0, maxWidth: 680, textWrap: 'pretty',
          }}>
            Channels get crowded. Generic outreach gets ignored. We build systems that fit your business,
            target the customers you actually want, and keep performing as the market shifts.
          </p>
        </div>
      </div>

      {/* Switcher */}
      <div data-reveal className="reveal-up" style={{
        display: 'grid',
        gridTemplateColumns: '380px 1fr',
        gap: 0,
        border: '1px solid var(--line)',
        background: 'var(--bg)',
        minHeight: 560,
      }}>
        {/* Left: system list */}
        <div style={{
          borderRight: '1px solid var(--line)',
          background: 'var(--bg-2)',
        }}>
          {engines.map((e, i) => {
            const isActive = i === active;
            return (
              <button
                key={i}
                onClick={() => setActive(i)}
                onMouseEnter={() => setActive(i)}
                className="ship-row"
                data-active={isActive}
                style={{
                  display: 'grid',
                  gridTemplateColumns: '56px 1fr',
                  gap: 20,
                  width: '100%',
                  textAlign: 'left',
                  padding: '28px 32px',
                  background: isActive ? 'var(--bg)' : 'transparent',
                  border: 'none',
                  borderBottom: i < engines.length - 1 ? '1px solid var(--line)' : 'none',
                  borderLeft: isActive ? '2px solid var(--accent)' : '2px solid transparent',
                  cursor: 'pointer',
                  color: 'inherit',
                  fontFamily: 'inherit',
                  transition: 'background .25s ease, border-color .25s ease',
                }}
              >
                <span style={{
                  fontFamily: "'Geist Mono', monospace",
                  fontSize: 11,
                  color: isActive ? 'var(--accent)' : 'var(--fg-dim)',
                  letterSpacing: '0.14em',
                  paddingTop: 6,
                  transition: 'color .25s ease',
                }}>
                  0{i + 1}
                </span>
                <div>
                  <div className="serif" style={{
                    fontSize: 22, fontWeight: 400, letterSpacing: '-0.02em',
                    color: isActive ? 'var(--fg)' : 'var(--fg-muted)',
                    marginBottom: 6,
                    transition: 'color .25s ease',
                  }}>
                    {e.k}
                  </div>
                  <div style={{
                    fontSize: 13.5, color: 'var(--fg-muted)', lineHeight: 1.5,
                    maxHeight: isActive ? 80 : 0,
                    opacity: isActive ? 1 : 0,
                    overflow: 'hidden',
                    transition: 'max-height .3s ease, opacity .25s ease',
                  }}>
                    {e.d}
                  </div>
                </div>
              </button>
            );
          })}
        </div>

        {/* Right: live demo stage */}
        <div style={{
          position: 'relative',
          padding: '56px 56px',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          background: 'var(--bg)',
          overflow: 'hidden',
        }}>
          <ShipDemo active={active} />
        </div>
      </div>

      {/* Tools stack — what we work with */}
      <div data-reveal className="reveal-up" style={{ marginTop: 80 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 32, flexWrap: 'wrap', gap: 16 }}>
          <div style={{
            fontFamily: "'Geist Mono', monospace", fontSize: 11,
            color: 'var(--fg-dim)', letterSpacing: '0.16em',
          }}>
            TOOLS WE WORK WITH
          </div>
          <div style={{ fontSize: 13, color: 'var(--fg-dim)', maxWidth: 420, lineHeight: 1.55 }}>
            We use what already works for your business. If the tool is here we plug in. If it is not we build it.
          </div>
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(4, 1fr)',
          gap: 1,
          background: 'var(--line)',
          border: '1px solid var(--line)',
        }}>
          {[
            {
              cat: 'Data & CRM',
              tools: ['HubSpot', 'Salesforce', 'Pipedrive', 'Attio', 'Clay', 'Clearbit', 'Apollo'],
            },
            {
              cat: 'Outreach & Email',
              tools: ['Customer.io', 'Lemlist', 'Smartlead', 'Instantly', 'Mailchimp', 'Resend'],
            },
            {
              cat: 'Analytics',
              tools: ['Mixpanel', 'Amplitude', 'PostHog', 'GA4', 'Segment', 'Metabase'],
            },
            {
              cat: 'Build & LLM',
              tools: ['Next.js', 'Supabase', 'Stripe', 'n8n', 'Zapier', 'OpenAI', 'Anthropic', 'Replicate'],
            },
          ].map((g, i) => (
            <div key={i} style={{
              background: 'var(--bg-2)',
              padding: '32px 28px',
              display: 'flex',
              flexDirection: 'column',
              gap: 16,
            }}>
              <div style={{
                fontFamily: "'Geist Mono', monospace", fontSize: 10.5,
                color: 'var(--accent)', letterSpacing: '0.16em',
              }}>
                {g.cat.toUpperCase()}
              </div>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                {g.tools.map((t, j) => (
                  <span key={j} style={{
                    fontSize: 12,
                    padding: '5px 10px',
                    border: '1px solid var(--line-2)',
                    color: 'var(--fg-muted)',
                    background: 'var(--bg)',
                    fontFamily: "'Geist Mono', monospace",
                    letterSpacing: '0.03em',
                  }}>{t}</span>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ─── ShipDemo: animated mini-visualizations per system ─── */
function ShipDemo({ active }) {
  return (
    <div style={{ position: 'relative', width: '100%', height: 440 }}>
      {[0, 1, 2, 3, 4, 5, 6].map(i => (
        <div key={i} style={{
          position: 'absolute', inset: 0,
          opacity: i === active ? 1 : 0,
          transform: i === active ? 'translateY(0)' : 'translateY(12px)',
          transition: 'opacity .4s ease, transform .4s ease',
          pointerEvents: i === active ? 'auto' : 'none',
        }}>
          {i === 0 && <DemoPaid     live={i === active} />}
          {i === 1 && <DemoOutbound live={i === active} />}
          {i === 2 && <DemoPages    live={i === active} />}
          {i === 3 && <DemoAgents   live={i === active} />}
          {i === 4 && <DemoCS       live={i === active} />}
          {i === 5 && <DemoCRM      live={i === active} />}
          {i === 6 && <DemoRevOps   live={i === active} />}
        </div>
      ))}
    </div>
  );
}

/* ─── Demo 01: Paid Acquisition — channel bar chart + ROAS ticker ─── */
function DemoPaid({ live }) {
  const channels = [
    { name: 'Google',   spend: 42, rev: 168, color: 'oklch(0.82 0.13 40)' },
    { name: 'Meta',     spend: 31, rev: 112, color: 'oklch(0.78 0.16 350)' },
    { name: 'LinkedIn', spend: 18, rev: 86,  color: 'oklch(0.75 0.14 240)' },
    { name: 'Reddit',   spend: 9,  rev: 41,  color: 'oklch(0.85 0.15 130)' },
  ];
  const max = Math.max(...channels.map(c => c.rev));
  return (
    <div style={{ width: '100%', height: '100%', display: 'flex', flexDirection: 'column', gap: 24 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
        <span style={{ fontFamily: "'Geist Mono', monospace", fontSize: 11, color: 'var(--fg-dim)', letterSpacing: '0.12em' }}>PAID CHANNELS · LAST 30D</span>
        <span style={{ fontFamily: "'Geist Mono', monospace", fontSize: 11, color: 'var(--accent)', letterSpacing: '0.12em' }}>ROAS 4.1×</span>
      </div>
      <div style={{ flex: 1, display: 'flex', alignItems: 'flex-end', gap: 32, paddingBottom: 40 }}>
        {channels.map((c, i) => {
          const hSpend = (c.spend / max) * 100;
          const hRev   = (c.rev / max) * 100;
          return (
            <div key={i} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'stretch', gap: 10 }}>
              <div style={{ position: 'relative', height: 260, display: 'flex', alignItems: 'flex-end', gap: 6 }}>
                <div style={{
                  flex: 1,
                  height: live ? `${hSpend}%` : '0%',
                  background: 'var(--line-2)',
                  transition: `height 1.2s cubic-bezier(.2,.8,.2,1) ${i * 0.08}s`,
                }} />
                <div style={{
                  flex: 1,
                  height: live ? `${hRev}%` : '0%',
                  background: c.color,
                  transition: `height 1.4s cubic-bezier(.2,.8,.2,1) ${i * 0.08 + 0.2}s`,
                }} />
              </div>
              <div style={{ fontSize: 13, color: 'var(--fg)', fontWeight: 500 }}>{c.name}</div>
              <div style={{ fontFamily: "'Geist Mono', monospace", fontSize: 11, color: 'var(--fg-dim)' }}>
                ${c.spend}k → ${c.rev}k
              </div>
            </div>
          );
        })}
      </div>
      <div style={{ display: 'flex', gap: 24, fontSize: 12, color: 'var(--fg-dim)', fontFamily: "'Geist Mono', monospace", letterSpacing: '0.08em' }}>
        <span style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <span style={{ width: 10, height: 10, background: 'var(--line-2)' }} /> SPEND
        </span>
        <span style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <span style={{ width: 10, height: 10, background: 'var(--accent)' }} /> REVENUE
        </span>
      </div>
    </div>
  );
}

/* ─── Demo 02: Outbound — email thread with personalization tokens ─── */
function DemoOutbound({ live }) {
  const tokens = [
    { text: 'Sarah', delay: 0.2 },
    { text: 'Ramp', delay: 0.5 },
    { text: 'Series B', delay: 0.8 },
    { text: 'NY → SF expansion', delay: 1.1 },
  ];
  return (
    <div style={{ width: '100%', height: '100%', display: 'flex', flexDirection: 'column', gap: 20 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
        <span style={{ fontFamily: "'Geist Mono', monospace", fontSize: 11, color: 'var(--fg-dim)', letterSpacing: '0.12em' }}>OUTREACH · SEGMENT 04</span>
        <span style={{ fontFamily: "'Geist Mono', monospace", fontSize: 11, color: 'var(--accent)', letterSpacing: '0.12em' }}>REPLY RATE 18.4%</span>
      </div>

      <div style={{
        flex: 1,
        border: '1px solid var(--line)',
        background: 'var(--bg-2)',
        padding: 28,
        display: 'flex',
        flexDirection: 'column',
        gap: 16,
      }}>
        <div style={{ display: 'flex', gap: 12, alignItems: 'center', paddingBottom: 14, borderBottom: '1px solid var(--line)' }}>
          <div style={{ width: 32, height: 32, borderRadius: 999, background: 'var(--accent-dim)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 12, fontWeight: 600 }}>S</div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 13, color: 'var(--fg)' }}>To: <HiLite live={live} delay={tokens[0].delay}>{tokens[0].text}</HiLite> @ <HiLite live={live} delay={tokens[1].delay}>{tokens[1].text}</HiLite></div>
            <div style={{ fontSize: 11, color: 'var(--fg-dim)', marginTop: 2, fontFamily: "'Geist Mono', monospace" }}>context · 14 signals matched</div>
          </div>
        </div>
        <div style={{ fontSize: 14, color: 'var(--fg-muted)', lineHeight: 1.7 }}>
          Hey <HiLite live={live} delay={tokens[0].delay}>Sarah</HiLite>,
          <br/><br/>
          Saw <HiLite live={live} delay={tokens[1].delay}>Ramp</HiLite> just closed <HiLite live={live} delay={tokens[2].delay}>Series B</HiLite>.
          Teams going through <HiLite live={live} delay={tokens[3].delay}>NY to SF expansion</HiLite> usually hit
          finance ops bottlenecks in month 3.
          <br/><br/>
          Built a system for a company in your stage that saved 11h/week. Worth a 15-min look?
        </div>
      </div>
      <div style={{ fontSize: 12, color: 'var(--fg-dim)', fontFamily: "'Geist Mono', monospace", letterSpacing: '0.08em' }}>
        4 TOKENS · ENRICHED FROM CRUNCHBASE, LINKEDIN, CRM
      </div>
    </div>
  );
}

function HiLite({ live, delay = 0, children }) {
  return (
    <span style={{
      background: live ? 'oklch(0.82 0.13 40 / 0.22)' : 'transparent',
      color: live ? 'var(--fg)' : 'inherit',
      padding: '1px 4px',
      borderRadius: 2,
      transition: `background .5s ease ${delay}s, color .5s ease ${delay}s`,
    }}>{children}</span>
  );
}

/* ─── Demo 03: AI Agents — flow diagram with live signal ─── */
function DemoAgents({ live }) {
  return (
    <div style={{ width: '100%', height: '100%', display: 'flex', flexDirection: 'column', gap: 20 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
        <span style={{ fontFamily: "'Geist Mono', monospace", fontSize: 11, color: 'var(--fg-dim)', letterSpacing: '0.12em' }}>LEAD SCORING AGENT · LIVE</span>
        <span style={{ fontFamily: "'Geist Mono', monospace", fontSize: 11, color: 'var(--accent)', letterSpacing: '0.12em' }}>847 RUNS TODAY</span>
      </div>

      <svg viewBox="0 0 700 340" style={{ flex: 1, width: '100%' }}>
        <defs>
          <linearGradient id="flowGrad" x1="0" x2="1">
            <stop offset="0%" stopColor="oklch(0.82 0.13 40)" stopOpacity="0" />
            <stop offset="50%" stopColor="oklch(0.82 0.13 40)" stopOpacity="1" />
            <stop offset="100%" stopColor="oklch(0.82 0.13 40)" stopOpacity="0" />
          </linearGradient>
        </defs>

        {/* Nodes */}
        {[
          { x: 60,  y: 170, label: 'New lead',    sub: 'Webhook', w: 120 },
          { x: 260, y: 80,  label: 'Enrich',       sub: 'Clearbit + LinkedIn', w: 160 },
          { x: 260, y: 260, label: 'Fit check',    sub: 'vs ICP model', w: 160 },
          { x: 480, y: 170, label: 'Score',        sub: '0–100', w: 120 },
          { x: 640, y: 100, label: 'Hot → Sales',  sub: '', w: 1, col: 'oklch(0.85 0.15 130)' },
          { x: 640, y: 170, label: 'Warm → Nurture', sub: '', w: 1, col: 'oklch(0.82 0.13 40)' },
          { x: 640, y: 240, label: 'Cold → Archive', sub: '', w: 1, col: 'var(--fg-dim)' },
        ].map((n, i) => (
          n.w > 1 ? (
            <g key={i}>
              <rect x={n.x - n.w/2} y={n.y - 22} width={n.w} height={44} rx={2}
                fill="var(--bg-2)" stroke="var(--line-2)" strokeWidth="1" />
              <text x={n.x} y={n.y - 2} textAnchor="middle" fontSize="13" fill="var(--fg)" fontFamily="inherit">{n.label}</text>
              <text x={n.x} y={n.y + 14} textAnchor="middle" fontSize="10" fill="var(--fg-dim)" fontFamily="'Geist Mono', monospace" letterSpacing="0.06em">{n.sub}</text>
            </g>
          ) : (
            <g key={i}>
              <circle cx={n.x - 60} cy={n.y} r="4" fill={n.col} />
              <text x={n.x - 50} y={n.y + 4} fontSize="12" fill="var(--fg-muted)" fontFamily="inherit">{n.label}</text>
            </g>
          )
        ))}

        {/* Edges */}
        <g stroke="var(--line-2)" strokeWidth="1" fill="none">
          <path d="M 120 170 Q 190 170 260 80" />
          <path d="M 120 170 Q 190 170 260 260" />
          <path d="M 340 80 Q 410 80 480 170" />
          <path d="M 340 260 Q 410 260 480 170" />
          <path d="M 540 170 L 580 100" />
          <path d="M 540 170 L 580 170" />
          <path d="M 540 170 L 580 240" />
        </g>

        {/* Animated pulse traveling the flow */}
        {live && (
          <circle r="3" fill="oklch(0.82 0.13 40)">
            <animateMotion dur="3.6s" repeatCount="indefinite" path="M 60 170 Q 130 170 260 80 Q 410 80 480 170 L 580 170" />
            <animate attributeName="opacity" values="0;1;1;0" dur="3.6s" repeatCount="indefinite" />
          </circle>
        )}
        {live && (
          <circle r="3" fill="oklch(0.82 0.13 40)" opacity="0.7">
            <animateMotion dur="3.6s" begin="1.8s" repeatCount="indefinite" path="M 60 170 Q 130 170 260 260 Q 410 260 480 170 L 580 240" />
            <animate attributeName="opacity" values="0;1;1;0" dur="3.6s" begin="1.8s" repeatCount="indefinite" />
          </circle>
        )}
      </svg>
      <div style={{ fontSize: 12, color: 'var(--fg-dim)', fontFamily: "'Geist Mono', monospace", letterSpacing: '0.08em' }}>
        EVERY DECISION AUDITABLE · HUMAN OVERRIDE IN 2 CLICKS
      </div>
    </div>
  );
}

/* ─── Demo 04: Landing Pages — A/B conversion ticker ─── */
function DemoPages({ live }) {
  const [tick, setTick] = useState2(0);
  useEff2(() => {
    if (!live) return;
    const id = setInterval(() => setTick(t => t + 1), 2200);
    return () => clearInterval(id);
  }, [live]);
  const aRate = 2.8 + (tick % 4) * 0.02;
  const bRate = 4.1 + (tick % 5) * 0.03;
  return (
    <div style={{ width: '100%', height: '100%', display: 'flex', flexDirection: 'column', gap: 20 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
        <span style={{ fontFamily: "'Geist Mono', monospace", fontSize: 11, color: 'var(--fg-dim)', letterSpacing: '0.12em' }}>A/B TEST · 14 DAYS IN</span>
        <span style={{ fontFamily: "'Geist Mono', monospace", fontSize: 11, color: 'var(--accent)', letterSpacing: '0.12em' }}>{(bRate/aRate).toFixed(2)}× LIFT</span>
      </div>
      <div style={{ flex: 1, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>
        {[
          { v: 'A', rate: aRate, dim: true,  lines: [72, 52, 38] },
          { v: 'B', rate: bRate, dim: false, lines: [64, 72, 58] },
        ].map((card, i) => (
          <div key={i} style={{
            position: 'relative',
            border: card.dim ? '1px solid var(--line)' : '1px solid var(--line-2)',
            background: card.dim ? 'var(--bg-2)' : 'var(--bg-2)',
            padding: 24,
            display: 'flex', flexDirection: 'column', gap: 14,
            opacity: card.dim ? 0.6 : 1,
            transition: 'opacity .3s',
          }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <span style={{ fontFamily: "'Geist Mono', monospace", fontSize: 11, color: 'var(--fg-dim)', letterSpacing: '0.14em' }}>VARIANT {card.v}</span>
              {!card.dim && <span style={{ fontSize: 10, color: 'oklch(0.85 0.15 130)', fontFamily: "'Geist Mono', monospace", letterSpacing: '0.1em' }}>● WINNING</span>}
            </div>
            {/* wireframe */}
            <div style={{ height: 10, background: 'var(--fg-faint)', width: `${card.lines[0]}%` }} />
            <div style={{ height: 5, background: 'var(--fg-faint)', width: `${card.lines[1]}%` }} />
            <div style={{ height: 5, background: 'var(--fg-faint)', width: `${card.lines[2]}%` }} />
            <div style={{ marginTop: 'auto', paddingTop: 18, borderTop: '1px solid var(--line)' }}>
              <div style={{ fontSize: 36, fontWeight: 300, letterSpacing: '-0.02em', color: card.dim ? 'var(--fg-muted)' : 'var(--fg)' }}>
                {card.rate.toFixed(2)}<span style={{ fontSize: 18, color: 'var(--fg-dim)' }}>%</span>
              </div>
              <div style={{ fontSize: 11, color: 'var(--fg-dim)', fontFamily: "'Geist Mono', monospace", letterSpacing: '0.1em', marginTop: 4 }}>CONVERSION</div>
            </div>
          </div>
        ))}
      </div>
      <div style={{ fontSize: 12, color: 'var(--fg-dim)', fontFamily: "'Geist Mono', monospace", letterSpacing: '0.08em' }}>
        3,412 SESSIONS · SIGNIFICANCE 97.2%
      </div>
    </div>
  );
}

/* ─── Demo 05: Customer Success Agents — lifecycle journey with traveling pulse ─── */
function DemoCS({ live }) {
  const stages = [
    { day: 'D 0',  label: 'Sign up',     action: 'Welcome' },
    { day: 'D 1',  label: 'First value', action: 'Activation nudge' },
    { day: 'D 7',  label: 'Habit',       action: 'Feature unlock' },
    { day: 'D 30', label: 'Adoption',    action: 'Success call' },
    { day: 'D 60', label: 'At risk',     action: 'Re-engage play' },
    { day: 'D 90', label: 'Expansion',   action: 'Upsell signal' },
  ];
  return (
    <div style={{ width: '100%', height: '100%', display: 'flex', flexDirection: 'column', gap: 20 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
        <span style={{ fontFamily: "'Geist Mono', monospace", fontSize: 11, color: 'var(--fg-dim)', letterSpacing: '0.12em' }}>LIFECYCLE AGENT · 2,341 CUSTOMERS</span>
        <span style={{ fontFamily: "'Geist Mono', monospace", fontSize: 11, color: 'var(--accent)', letterSpacing: '0.12em' }}>RETENTION +14 PTS</span>
      </div>

      <div style={{ flex: 1, position: 'relative', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
        {/* Track line */}
        <div style={{ position: 'absolute', left: '4%', right: '4%', top: '50%', height: 1, background: 'var(--line-2)' }} />

        {/* Pulse traveling left to right */}
        {live && (
          <div style={{
            position: 'absolute', left: '4%', top: 'calc(50% - 3px)',
            width: 6, height: 6, borderRadius: 999, background: 'var(--accent)',
            boxShadow: '0 0 18px var(--accent)',
            animation: 'csPulse 6s linear infinite',
          }} />
        )}

        {/* Stages */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', alignItems: 'center', position: 'relative', zIndex: 1, gap: 0 }}>
          {stages.map((s, i) => (
            <div key={i} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 14 }}>
              <div style={{
                fontSize: 10, fontFamily: "'Geist Mono', monospace",
                letterSpacing: '0.14em', color: 'var(--fg-muted)', textAlign: 'center',
              }}>
                {s.day}<br/><span style={{ color: 'var(--fg)' }}>{s.label.toUpperCase()}</span>
              </div>
              <div style={{
                width: 14, height: 14, borderRadius: 999,
                background: 'var(--bg)', border: '1.5px solid var(--accent)',
              }} />
              <div style={{
                fontSize: 11, color: 'var(--fg-dim)',
                fontFamily: "'Geist Mono', monospace", letterSpacing: '0.06em',
                textAlign: 'center', padding: '5px 8px',
                border: '1px solid var(--line-2)', background: 'var(--bg-2)',
              }}>
                {s.action}
              </div>
            </div>
          ))}
        </div>
      </div>
      <div style={{ fontSize: 12, color: 'var(--fg-dim)', fontFamily: "'Geist Mono', monospace", letterSpacing: '0.08em' }}>
        AGENT DECIDES THE NEXT MOVE · YOUR TEAM REVIEWS THE EDGE CASES
      </div>
      {/* Inline keyframe — animation moves dot from 0 to 96% over the track */}
      <style>{`
        @keyframes csPulse {
          0%   { left: 4%; opacity: 0; }
          5%   { opacity: 1; }
          92%  { opacity: 1; }
          100% { left: 96%; opacity: 0; }
        }
      `}</style>
    </div>
  );
}

/* ─── Demo 06: CRM Build & Migration — schema diagram with animated connections ─── */
function DemoCRM({ live }) {
  return (
    <div style={{ width: '100%', height: '100%', display: 'flex', flexDirection: 'column', gap: 20 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
        <span style={{ fontFamily: "'Geist Mono', monospace", fontSize: 11, color: 'var(--fg-dim)', letterSpacing: '0.12em' }}>HUBSPOT MIGRATION · 84K RECORDS</span>
        <span style={{ fontFamily: "'Geist Mono', monospace", fontSize: 11, color: 'var(--accent)', letterSpacing: '0.12em' }}>0 LOST · 12 DEDUPED</span>
      </div>

      <svg viewBox="0 0 700 340" style={{ flex: 1, width: '100%' }}>
        <defs>
          <marker id="crmArrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto">
            <path d="M 0 0 L 10 5 L 0 10 z" fill="var(--fg-dim)" />
          </marker>
        </defs>

        {/* Entities */}
        {(() => {
          const entities = [
            { x: 120, y: 80,  label: 'Companies',  fields: ['domain', 'industry', 'ARR', 'tier'],     w: 170 },
            { x: 120, y: 240, label: 'Contacts',   fields: ['email', 'role', 'seniority'],           w: 170 },
            { x: 410, y: 80,  label: 'Deals',      fields: ['stage', 'amount', 'close date'],        w: 170 },
            { x: 410, y: 240, label: 'Activities', fields: ['type', 'agent', 'outcome'],             w: 170 },
            { x: 600, y: 160, label: 'Custom',     fields: ['churn risk', 'expansion'],              w: 130 },
          ];
          return entities.map((e, i) => (
            <g key={i} style={{
              opacity: live ? 1 : 0,
              transition: `opacity 0.5s ease ${i * 0.15}s`,
            }}>
              <rect x={e.x - e.w/2} y={e.y - 48} width={e.w} height={96} rx={2}
                fill="var(--bg-2)" stroke="var(--line-2)" strokeWidth="1" />
              <line x1={e.x - e.w/2 + 10} y1={e.y - 20} x2={e.x + e.w/2 - 10} y2={e.y - 20}
                stroke="var(--line-2)" strokeWidth="1" />
              <text x={e.x} y={e.y - 28} textAnchor="middle" fontSize="13" fontWeight="500" fill="var(--fg)" fontFamily="inherit">
                {e.label}
              </text>
              {e.fields.map((f, j) => (
                <text key={j} x={e.x - e.w/2 + 14} y={e.y - 6 + j * 14} fontSize="10.5" fill="var(--fg-muted)"
                  fontFamily="'Geist Mono', monospace" letterSpacing="0.04em">
                  {f}
                </text>
              ))}
            </g>
          ));
        })()}

        {/* Relationships — draw in with stroke-dasharray */}
        <g stroke="var(--fg-dim)" strokeWidth="1" fill="none" markerEnd="url(#crmArrow)">
          {[
            { d: 'M 120 128 L 120 192', delay: 0.9 },
            { d: 'M 205 80 L 325 80',   delay: 1.1 },
            { d: 'M 205 240 L 325 240', delay: 1.3 },
            { d: 'M 410 128 L 410 192', delay: 1.5 },
            { d: 'M 495 80 L 535 160',  delay: 1.7 },
            { d: 'M 495 240 L 535 160', delay: 1.9 },
          ].map((r, i) => (
            <path key={i} d={r.d} style={{
              strokeDasharray: 200,
              strokeDashoffset: live ? 0 : 200,
              transition: `stroke-dashoffset 0.8s ease ${r.delay}s`,
            }} />
          ))}
        </g>
      </svg>
      <div style={{ fontSize: 12, color: 'var(--fg-dim)', fontFamily: "'Geist Mono', monospace", letterSpacing: '0.08em' }}>
        DATA MODEL FIRST · WORKFLOWS AFTER · NOTHING LEFT BEHIND
      </div>
    </div>
  );
}

/* ─── Demo 07: RevOps — attribution flow ─── */
function DemoRevOps({ live }) {
  return (
    <div style={{ width: '100%', height: '100%', display: 'flex', flexDirection: 'column', gap: 20 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
        <span style={{ fontFamily: "'Geist Mono', monospace", fontSize: 11, color: 'var(--fg-dim)', letterSpacing: '0.12em' }}>ATTRIBUTION · Q1 2026</span>
        <span style={{ fontFamily: "'Geist Mono', monospace", fontSize: 11, color: 'var(--accent)', letterSpacing: '0.12em' }}>$1.24M PIPELINE</span>
      </div>
      <svg viewBox="0 0 700 340" style={{ flex: 1, width: '100%' }}>
        {/* Left: channels */}
        {[
          { y: 60,  label: 'Paid Search',  pct: 0.34, col: 'oklch(0.82 0.13 40)' },
          { y: 130, label: 'Outbound',     pct: 0.28, col: 'oklch(0.78 0.16 350)' },
          { y: 200, label: 'Organic',      pct: 0.22, col: 'oklch(0.75 0.14 240)' },
          { y: 270, label: 'Referral',     pct: 0.16, col: 'oklch(0.85 0.15 130)' },
        ].map((s, i) => {
          const h = s.pct * 260;
          const cy = s.y;
          return (
            <g key={i}>
              <rect x="40" y={cy - h/2} width="14" height={live ? h : 0} fill={s.col}
                style={{ transition: `all 1s cubic-bezier(.2,.8,.2,1) ${i * 0.12}s` }} />
              <text x="70" y={cy + 4} fontSize="13" fill="var(--fg)" fontFamily="inherit">{s.label}</text>
              <text x="70" y={cy + 20} fontSize="10" fill="var(--fg-dim)" fontFamily="'Geist Mono', monospace" letterSpacing="0.06em">
                {Math.round(s.pct * 100)}% · ${Math.round(s.pct * 1240)}k
              </text>
              {/* flow line */}
              <path d={`M 220 ${cy} C 340 ${cy}, 400 170, 520 170`}
                fill="none" stroke={s.col} strokeWidth={h * 0.15}
                opacity={live ? 0.4 : 0}
                style={{ transition: `opacity 1.4s ease ${i * 0.12 + 0.4}s` }} />
            </g>
          );
        })}
        {/* Right: pipeline */}
        <rect x="520" y="100" width="140" height="140" rx="2"
          fill="var(--bg-2)" stroke="var(--line-2)" strokeWidth="1" />
        <text x="590" y="150" textAnchor="middle" fontSize="14" fill="var(--fg)" fontFamily="inherit">Pipeline</text>
        <text x="590" y="180" textAnchor="middle" fontSize="28" fill="var(--fg)" fontFamily="inherit" fontWeight="300" letterSpacing="-0.02em">$1.24M</text>
        <text x="590" y="205" textAnchor="middle" fontSize="10" fill="var(--accent)" fontFamily="'Geist Mono', monospace" letterSpacing="0.1em">+38% QoQ</text>
      </svg>
      <div style={{ fontSize: 12, color: 'var(--fg-dim)', fontFamily: "'Geist Mono', monospace", letterSpacing: '0.08em' }}>
        ALL TOUCHPOINTS TRACKED · CUSTOMER VALUE OVER TIME · UPDATED NIGHTLY
      </div>
    </div>
  );
}

/* ─── Operating principles — how we work, in plain language ─── */
function Principles() {
  const ref = useRef2();
  useReveal(ref);
  const [hovered, setHovered] = useState2(null);

  const principles = [
    {
      k: 'Close to the work',
      d: 'No account managers. The person building it is the one you talk to.',
      typical: 'Your message goes to an account lead, then a manager, then a junior. Two days for a small change.',
      ours: 'Message the person doing the work. Small changes go live the same day.',
    },
    {
      k: 'AI where it actually helps',
      d: 'We use AI when it does the job better than a person. Not just to say we used it.',
      typical: 'An old funnel with a chatbot bolted on the end.',
      ours: 'AI handles the busy work. People handle the calls that matter.',
    },
    {
      k: 'Built for your business, not a template',
      d: 'We start with what your business actually needs. Nothing reused from another client.',
      typical: 'Every client gets the same seven-email sequence, no matter their business.',
      ours: 'We look at your numbers, find what moves the needle, and build that one thing.',
    },
    {
      k: 'Measured in money, not slides',
      d: 'We report by the revenue or cost the work actually moved. Nothing else.',
      typical: 'Monthly slides full of clicks, opens, and leads that never close.',
      ours: 'One dashboard. New revenue and money saved, tied to what we shipped.',
    },
  ];

  return (
    <section ref={ref} style={{
      position: 'relative',
      padding: '160px 48px 160px',
      borderTop: '1px solid var(--line)',
      background: 'var(--bg-2)',
    }}>
      <div style={{ maxWidth: 1400, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '220px 1fr', gap: 80, marginBottom: 88 }}>
          <div data-reveal className="reveal-up">
            <div style={{ fontSize: 13, color: 'var(--fg-muted)', marginBottom: 8 }}>03 / How we operate</div>
            <div style={{ width: 32, height: 1, background: 'var(--fg-faint)' }} />
          </div>
          <div>
            <h2 data-reveal className="reveal-up" style={{
              fontSize: 'clamp(36px, 4.4vw, 64px)',
              lineHeight: 1.05, letterSpacing: '-0.032em', fontWeight: 300,
              margin: '0 0 24px', maxWidth: 900, textWrap: 'balance',
            }}>
              Four things <span className="serif">you can count on</span>, on every project.
            </h2>
            <p data-reveal className="reveal-up" style={{
              fontSize: 14,
              color: 'var(--fg-dim)',
              fontFamily: "'Geist Mono', monospace",
              letterSpacing: '0.08em',
              margin: 0,
            }}>
              Hover any card for the contrast →
            </p>
          </div>
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(2, 1fr)',
          gap: 1,
          background: 'var(--line)',
          border: '1px solid var(--line)',
        }}>
          {principles.map((p, i) => {
            const isOn = hovered === i;
            return (
              <div
                key={i}
                data-reveal
                className="reveal-up"
                onMouseEnter={() => setHovered(i)}
                onMouseLeave={() => setHovered(null)}
                style={{
                  background: 'var(--bg-2)',
                  minHeight: 300,
                  position: 'relative',
                  cursor: 'default',
                  overflow: 'hidden',
                }}
              >
                {/* Default face */}
                <div style={{
                  position: 'absolute', inset: 0,
                  padding: '48px 48px 48px',
                  display: 'flex', flexDirection: 'column',
                  opacity: isOn ? 0 : 1,
                  transform: isOn ? 'translateY(-6px)' : 'translateY(0)',
                  transition: 'opacity .3s ease, transform .3s ease',
                }}>
                  <div style={{
                    fontFamily: "'Geist Mono', monospace",
                    fontSize: 11,
                    color: 'var(--fg-dim)',
                    letterSpacing: '0.12em',
                    marginBottom: 18,
                  }}>
                    0{i + 1}
                  </div>
                  <h3 className="serif" style={{
                    fontSize: 32, fontWeight: 400, letterSpacing: '-0.02em',
                    margin: '0 0 18px', lineHeight: 1.1,
                  }}>
                    {p.k}
                  </h3>
                  <p style={{
                    fontSize: 15.5, color: 'var(--fg-muted)', lineHeight: 1.6,
                    margin: 0, textWrap: 'pretty',
                  }}>
                    {p.d}
                  </p>
                </div>

                {/* Hover face — same box, replaces content entirely */}
                <div style={{
                  position: 'absolute', inset: 0,
                  padding: '48px 48px 48px',
                  display: 'flex', flexDirection: 'column', gap: 16,
                  background: 'var(--bg-2)',
                  opacity: isOn ? 1 : 0,
                  transform: isOn ? 'translateY(0)' : 'translateY(6px)',
                  transition: 'opacity .3s ease, transform .3s ease',
                  pointerEvents: isOn ? 'auto' : 'none',
                }}>
                  <div style={{
                    fontFamily: "'Geist Mono', monospace",
                    fontSize: 11,
                    color: 'var(--accent)',
                    letterSpacing: '0.12em',
                    marginBottom: 4,
                  }}>
                    0{i + 1} · {p.k}
                  </div>
                  <div>
                    <div style={{
                      fontFamily: "'Geist Mono', monospace", fontSize: 10,
                      letterSpacing: '0.14em', color: 'var(--fg-dim)',
                      marginBottom: 8,
                    }}>TYPICAL AGENCY</div>
                    <div style={{
                      fontSize: 15, color: 'var(--fg-muted)', lineHeight: 1.55,
                      textDecoration: 'line-through',
                      textDecorationColor: 'var(--fg-faint)',
                      textDecorationThickness: '1px',
                    }}>
                      {p.typical}
                    </div>
                  </div>
                  <div style={{ width: 24, height: 1, background: 'var(--line-2)' }} />
                  <div>
                    <div style={{
                      fontFamily: "'Geist Mono', monospace", fontSize: 10,
                      letterSpacing: '0.14em', color: 'var(--accent)',
                      marginBottom: 8,
                    }}>SYNTARI</div>
                    <div style={{
                      fontSize: 15, color: 'var(--fg)', lineHeight: 1.55,
                    }}>
                      {p.ours}
                    </div>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { GlobalFootprint, Manifesto, WhatWeShip, Principles });