// ColdOcean — shared page components for About, Case Studies, Playbook.
// Loaded after Hero.jsx / Sections1.jsx / Sections2.jsx so `window.Co*` and
// window.CO_STUDIES / window.CO_BOOKING_URL are available.

const BOOKING = window.CO_BOOKING_URL || 'https://tidycal.com/coldocean/15-minute-meeting';

// ─── Shared hero shell ────────────────────────────────────────
function CoPageHero({ eyebrow, title, subtitle, kicker, tag, minHeight = 560 }) {
  return (
    <section style={{
      position: 'relative',
      minHeight,
      background: 'var(--co-bg)',
      overflow: 'hidden',
      borderBottom: '1px solid var(--co-line)',
    }}>
      <div style={{ position: 'absolute', inset: 0, opacity: 0.55 }}>
        <ParticleNetwork density={0.8} speed={0.8} showLabels={false} accent="#ff5a1f" accent2="#ffa726" />
      </div>
      <div style={{
        position: 'absolute', inset: 0,
        background: 'linear-gradient(180deg, rgba(10,10,10,0.85) 0%, rgba(10,10,10,0.35) 50%, rgba(10,10,10,0.9) 100%)',
        pointerEvents: 'none',
      }} />
      <div className="co-container" style={{ position: 'relative', zIndex: 3, paddingTop: 140, paddingBottom: 64 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 48, alignItems: 'end' }}>
          <div>
            <div className="co-mono" style={{
              fontSize: 11, letterSpacing: '0.2em',
              color: 'var(--co-flame)', marginBottom: 24,
              display: 'flex', alignItems: 'center', gap: 14,
            }}>
              <span style={{ width: 36, height: 1, background: 'var(--co-flame)' }} />
              {kicker}
            </div>
            <h1 className="co-h1" style={{ color: 'var(--co-ink)', marginBottom: 22 }}>
              {title}
            </h1>
            {subtitle && (
              <p className="co-lead" style={{ maxWidth: 640, fontSize: 16 }}>{subtitle}</p>
            )}
          </div>
          <div style={{ textAlign: 'right' }}>
            {tag && <span className="co-tape">{tag}</span>}
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── ABOUT ────────────────────────────────────────────────────
function CoAbout() {
  const values = [
    { n: '01', t: 'OPERATORS, NOT VENDORS', b: 'We carry a P&L mindset into every engagement. We ship the system we would want on our own team.' },
    { n: '02', t: 'SHIP IN WEEKS, NOT QUARTERS', b: 'Our first workflow lands in two weeks. Iteration is continuous. Scope is whatever compounds.' },
    { n: '03', t: 'COMPOSE, DONT REPLACE',      b: 'We meet your stack where it runs — HubSpot, Salesforce, Close, Apollo. We bring the glue and the agents.' },
    { n: '04', t: 'AGENTS DO THE WORK',         b: 'Not dashboards about work. Not copilots that suggest. Autonomous agents that research, decide, write, ship.' },
  ];
  const timeline = [
    { yr: '2024', l: 'FOUNDED', b: 'ColdOcean starts as a two-person studio in Amsterdam shipping outbound workflows on n8n + Claude.' },
    { yr: '2025', l: 'FIRST 20 CLIENTS', b: 'Bilingual outbound, research agents, inbound triage. Expanded to London. First enterprise deployment.' },
    { yr: '2026', l: 'PLATFORM + STUDIO', b: 'Four pillars solidify. 47 GTM teams operating. €42M pipeline generated across EU · UK · APAC.' },
  ];
  const stats = [['47', 'GTM TEAMS'], ['€42M', 'PIPELINE'], ['1.2M', 'LEADS / DAY'], ['< 72h', 'FIRST SHIP']];

  return (
    <>
      <CoNav active="about" />
      <CoPageHero
        kicker="ABOUT · EST. 2024"
        title={<>WE ARE THE PEOPLE<br/>YOU <span className="co-flame">CALL</span> WHEN<br/>YOU WANT IT <span style={{ WebkitTextStroke: '1.5px var(--co-ink)', WebkitTextFillColor: 'transparent', color: 'transparent' }}>GONE.</span></>}
          subtitle="ColdOcean is a GTM AI automation studio. We ship autonomous revenue systems — pipeline, outbound, research, ops. Our voice is confident, declarative, operator-first."
        tag="STUDIO · AMSTERDAM · LONDON"
      />

      {/* Positioning + mission */}
      <section className="co-section">
        <div className="co-container">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0, border: '1px solid var(--co-line)' }}>
            <div style={{ padding: 40, borderRight: '1px solid var(--co-line)', background: 'var(--co-bg)' }}>
              <div className="co-mono" style={{ fontSize: 10, letterSpacing: '0.18em', color: 'var(--co-muted)', marginBottom: 14 }}>ONE-LINER</div>
              <div className="co-display" style={{ fontSize: 36, lineHeight: 0.95, letterSpacing: '-0.02em' }}>
                We build revenue machines that <span className="co-flame">never sleep.</span>
              </div>
            </div>
            <div style={{ padding: 40, background: 'var(--co-bg)' }}>
              <div className="co-mono" style={{ fontSize: 10, letterSpacing: '0.18em', color: 'var(--co-muted)', marginBottom: 14 }}>MISSION</div>
              <p style={{ fontSize: 17, color: 'var(--co-ink-soft)', lineHeight: 1.55, margin: 0 }}>
                Give every GTM team a 24/7 autonomous revenue layer — agents that research, decide, write, and ship — composed around the tools they already run.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Values grid (re-uses .co-pillar hover) */}
      <section className="co-section" style={{ background: 'var(--co-bg-2)', borderTop: '1px solid var(--co-line)', borderBottom: '1px solid var(--co-line)' }}>
        <div className="co-container">
          <div style={{ marginBottom: 48 }}>
            <span className="co-eyebrow"><span className="dot" /> HOW WE WORK</span>
            <h2 className="co-h2" style={{ marginTop: 24 }}>FOUR VALUES.<br/><span className="co-flame">ZERO FLUFF.</span></h2>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 0, border: '1px solid var(--co-line)' }}>
            {values.map((v, i) => (
              <div key={v.n} className="co-pillar" style={{
                padding: 40,
                borderRight: i % 2 === 0 ? '1px solid var(--co-line)' : 'none',
                borderBottom: i < 2 ? '1px solid var(--co-line)' : 'none',
                background: 'var(--co-bg)',
                minHeight: 220,
                display: 'flex', flexDirection: 'column',
              }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 }}>
                  <span className="co-mono" style={{ color: 'var(--co-flame)', fontSize: 13, letterSpacing: '0.1em' }}>[ {v.n} ]</span>
                  <span className="co-mono" style={{ color: 'var(--co-muted)', fontSize: 10, letterSpacing: '0.16em' }}>VALUE</span>
                </div>
                <h3 className="co-h3" style={{ marginBottom: 14, fontSize: 24 }}>{v.t}</h3>
                <p style={{ color: 'var(--co-ink-soft)', fontSize: 15, lineHeight: 1.55, margin: 0 }}>{v.b}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Timeline */}
      <section className="co-section">
        <div className="co-container">
          <div style={{ marginBottom: 48 }}>
            <span className="co-eyebrow"><span className="dot" /> TIMELINE</span>
            <h2 className="co-h2" style={{ marginTop: 24 }}>FROM TWO PEOPLE<br/>TO <span className="co-flame">47 TEAMS.</span></h2>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, border: '1px solid var(--co-line)' }}>
            {timeline.map((t, i) => (
              <div key={t.yr} style={{
                padding: 32,
                background: 'var(--co-bg)',
                borderRight: i < 2 ? '1px solid var(--co-line)' : 'none',
              }}>
                <div className="co-display" style={{ fontSize: 44, color: 'var(--co-flame)', marginBottom: 8 }}>{t.yr}</div>
                <div className="co-mono" style={{ fontSize: 10, letterSpacing: '0.18em', color: 'var(--co-muted)', marginBottom: 12 }}>{t.l}</div>
                <p style={{ color: 'var(--co-ink-soft)', fontSize: 14, lineHeight: 1.55, margin: 0 }}>{t.b}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Stats */}
      <section className="co-section co-section--tight">
        <div className="co-container">
          <div style={{
            background: 'var(--co-flame)', color: '#0a0a0a',
            padding: '56px 48px',
            display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 32,
            position: 'relative', overflow: 'hidden', borderRadius: 'var(--co-radius)',
          }}>
            <div style={{
              position: 'absolute', inset: 0, opacity: 0.08,
              backgroundImage: 'linear-gradient(rgba(10,10,10,0.4) 1px, transparent 1px), linear-gradient(90deg, rgba(10,10,10,0.4) 1px, transparent 1px)',
              backgroundSize: '40px 40px',
            }} />
            {stats.map(([v, k], i) => (
              <div key={k} style={{ position: 'relative', borderLeft: i > 0 ? '1px solid rgba(10,10,10,0.2)' : 'none', paddingLeft: i > 0 ? 28 : 0 }}>
                <div className="co-display" style={{ fontSize: 56, lineHeight: 0.88, letterSpacing: '-0.03em' }}>{v}</div>
                <div className="co-mono" style={{ fontSize: 11, marginTop: 12, letterSpacing: '0.16em', fontWeight: 600 }}>{k}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Locations */}
      <section className="co-section">
        <div className="co-container">
          <div style={{ marginBottom: 40 }}>
            <span className="co-eyebrow"><span className="dot" /> LOCATIONS</span>
            <h2 className="co-h2" style={{ marginTop: 24 }}>AMSTERDAM · <span className="co-flame">LONDON.</span></h2>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0, border: '1px solid var(--co-line)' }}>
            {[
              { city: 'AMSTERDAM', coords: '52.37° N · 4.89° E', role: 'HQ · ENGINEERING · AGENTS' },
              { city: 'LONDON',    coords: '51.50° N · 0.12° W', role: 'GTM · PARTNERSHIPS' },
            ].map((loc, i) => (
              <div key={loc.city} style={{
                padding: 40,
                borderRight: i < 1 ? '1px solid var(--co-line)' : 'none',
                background: 'var(--co-bg)',
              }}>
                <div className="co-display" style={{ fontSize: 48, lineHeight: 0.9, marginBottom: 12 }}>{loc.city}</div>
                <div className="co-mono" style={{ fontSize: 11, color: 'var(--co-flame)', letterSpacing: '0.14em', marginBottom: 8 }}>{loc.coords}</div>
                <div className="co-mono" style={{ fontSize: 11, color: 'var(--co-muted)', letterSpacing: '0.14em' }}>{loc.role}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <CoCTA />
      <CoFooter />
    </>
  );
}

// ─── CASE STUDIES INDEX ──────────────────────────────────────
function CoCaseIndex() {
  const studies = window.CO_STUDIES || [];
  const [filter, setFilter] = React.useState('ALL');
  const groups = ['ALL', 'EU', 'UK', 'APAC'];
  const visible = filter === 'ALL' ? studies : studies.filter(s => s.regionGroup === filter);

  return (
    <>
      <CoNav active="work" />
      <CoPageHero
        kicker="SELECTED WORK · 2024 — 2026"
        title={<>SHIPPED WITH TEAMS<br/>IN <span className="co-flame">EU · UK · APAC.</span></>}
        subtitle="Five deployments where agents replaced teams, rewired pipelines, and compounded. Filter by region."
        tag={`${studies.length} SYSTEMS · LIVE`}
      />

      <section className="co-section">
        <div className="co-container">
          {/* Filter chips */}
          <div style={{ display: 'flex', gap: 8, marginBottom: 40, flexWrap: 'wrap' }}>
            {groups.map(g => {
              const active = filter === g;
              return (
                <button key={g} onClick={() => setFilter(g)} className="co-mono" style={{
                  padding: '10px 18px',
                  border: `1px solid ${active ? 'var(--co-flame)' : 'var(--co-line)'}`,
                  background: active ? 'var(--co-flame)' : 'transparent',
                  color: active ? '#0a0a0a' : 'var(--co-ink-soft)',
                  fontSize: 11, letterSpacing: '0.18em',
                  cursor: 'pointer',
                  borderRadius: 2,
                  transition: 'all .2s',
                }}>{g}</button>
              );
            })}
            <span className="co-mono" style={{ marginLeft: 'auto', alignSelf: 'center', fontSize: 11, color: 'var(--co-muted)', letterSpacing: '0.16em' }}>
              {visible.length} / {studies.length} STUDIES
            </span>
          </div>

          {/* Grid */}
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 0, border: '1px solid var(--co-line)' }}>
            {visible.map((s, i) => (
              <a key={s.id} href={`case-${s.id}.html`} className="co-case" style={{
                padding: 40, background: 'var(--co-bg)', color: 'var(--co-ink)',
                borderRight: i % 2 === 0 ? '1px solid var(--co-line)' : 'none',
                borderBottom: i < visible.length - (visible.length % 2 === 0 ? 2 : 1) ? '1px solid var(--co-line)' : 'none',
                textDecoration: 'none',
                display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
                minHeight: 340,
              }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                    <Mark letter={s.m} bg="var(--co-flame)" fg="#0a0a0a" />
                    <div>
                      <div className="co-display" style={{ fontSize: 18 }}>{s.client}</div>
                      <div className="co-mono" style={{ fontSize: 10, color: 'var(--co-muted)', letterSpacing: '0.16em', marginTop: 2 }}>
                        {s.region} · CASE {String(i+1).padStart(2,'0')}
                      </div>
                    </div>
                  </div>
                  <Arrow />
                </div>
                <div>
                  <h3 className="co-display" style={{ fontSize: 32, lineHeight: 0.95, marginBottom: 16 }}>{s.title}</h3>
                  <p style={{ fontSize: 14, color: 'var(--co-ink-soft)', lineHeight: 1.5, margin: 0, marginBottom: 20, maxWidth: 480 }}>{s.body}</p>
                  <div style={{ display: 'flex', gap: 28, paddingTop: 16, borderTop: '1px solid var(--co-line)' }}>
                    {s.kpis.map(([k, v]) => (
                      <div key={k}>
                        <div className="co-mono" style={{ fontSize: 9, color: 'var(--co-muted)', letterSpacing: '0.18em' }}>{k}</div>
                        <div className="co-display" style={{ fontSize: 26, marginTop: 4, color: 'var(--co-flame)' }}>{v}</div>
                      </div>
                    ))}
                  </div>
                </div>
              </a>
            ))}
          </div>

          {visible.length === 0 && (
            <div style={{ padding: 80, textAlign: 'center', border: '1px solid var(--co-line)', color: 'var(--co-muted)' }}>
              <div className="co-mono" style={{ fontSize: 11, letterSpacing: '0.18em' }}>NO STUDIES IN {filter}. YET.</div>
            </div>
          )}
        </div>
      </section>

      <CoCTA />
      <CoFooter />
    </>
  );
}

// ─── CASE DETAIL ────────────────────────────────────────────
// Per-case architecture diagrams (nodes/edges for a mini CoWorkflow-style flow)
const CO_CASE_DETAIL = {
  wattlift: {
    length: '14 WEEKS',
    problem: 'WattLift runs an EV fleet-sales motion across France and Benelux. Four SDRs could not cover the account list in two languages, and handoffs between research and send were killing reply rates.',
    approach: 'We replaced the outbound team with a bilingual agent loop: Apollo identifies fleet managers, Claude drafts FR/NL emails using live account research, Smartlead sends, replies route to HubSpot with full context.',
    stack: ['APOLLO', 'CLAUDE', 'SMARTLEAD', 'HUBSPOT', 'n8n'],
    arch: {
      nodes: [
        { id: 0, x: 80,  y: 170, label: 'APOLLO',   sub: 'FLEET ICP',     kind: 'source' },
        { id: 1, x: 280, y: 100, label: 'CLAUDE',   sub: 'FR / NL BRIEF', kind: 'agent' },
        { id: 2, x: 280, y: 240, label: 'BLITZAPI', sub: 'ENRICH',        kind: 'source' },
        { id: 3, x: 480, y: 170, label: 'n8n',      sub: 'ROUTE',         kind: 'workflow' },
        { id: 4, x: 680, y: 100, label: 'SMARTLEAD', sub: 'SEND',         kind: 'outbound' },
        { id: 5, x: 680, y: 240, label: 'HUBSPOT',  sub: 'REPLY ROUTE',   kind: 'crm' },
        { id: 6, x: 880, y: 170, label: 'SUPABASE', sub: 'LEARN',         kind: 'data' },
      ],
      edges: [[0,1],[0,2],[1,3],[2,3],[3,4],[3,5],[4,6],[5,6]],
    },
    results: [['PIPELINE', '+5.2×'], ['CAC', '−41%'], ['REPLIES', '+380%'], ['SDR HEADCOUNT', '−4']],
    quote: { q: 'ColdOcean shipped our first outbound agent in 9 days. It booked more meetings in month one than our SDR team did in Q1.', n: 'HEAD OF REVENUE', o: 'WATTLIFT' },
  },
  hexus: {
    length: '6 WEEKS',
    problem: 'Hexus.AI’s AEs were spending 18 hours a week on account research. Brief quality varied wildly. Nothing landed in inboxes before stand-up.',
    approach: 'Claude drafts account briefs overnight using Apollo + web signals. n8n ships one brief per AE per assigned account into Slack and HubSpot before 9am every day. Feedback loop writes back to Supabase.',
    stack: ['CLAUDE', 'APOLLO', 'n8n', 'HUBSPOT', 'SLACK', 'SUPABASE'],
    arch: {
      nodes: [
        { id: 0, x: 80,  y: 170, label: 'APOLLO',   sub: 'ACCOUNTS',     kind: 'source' },
        { id: 1, x: 280, y: 100, label: 'WEB',      sub: 'SIGNALS',      kind: 'source' },
        { id: 2, x: 480, y: 170, label: 'CLAUDE',   sub: 'BRIEF',        kind: 'agent' },
        { id: 3, x: 680, y: 100, label: 'SLACK',    sub: '9AM DELIVERY', kind: 'outbound' },
        { id: 4, x: 680, y: 240, label: 'HUBSPOT',  sub: 'ATTACH',       kind: 'crm' },
        { id: 5, x: 880, y: 170, label: 'SUPABASE', sub: 'FEEDBACK',     kind: 'data' },
      ],
      edges: [[0,2],[1,2],[2,3],[2,4],[3,5],[4,5]],
    },
    results: [['TIME-TO-BRIEF', '2 MIN'], ['AE HOURS', '−18/WK'], ['BRIEF QUALITY', '+62%'], ['ACCOUNTS/AE', '+3×']],
    quote: { q: 'The team thinks like operators, not vendors. They rewired our entire GTM stack without breaking a single integration.', n: 'VP GROWTH', o: 'HEXUS.AI' },
  },
  leadzen: {
    length: '8 WEEKS',
    problem: 'Leadzen.AI was drowning in 3,000+ weekly inbound leads. First-response time was north of an hour. Qualified meetings were being lost to competitors who replied faster.',
    approach: 'Agent-led inbound triage: web form → n8n enrich → Claude qualification with scripted questions → Calendar booking for fit leads, escalation to human for edge cases. Under three minutes end-to-end.',
    stack: ['n8n', 'CLAUDE', 'CALENDAR', 'HUBSPOT', 'SLACK'],
    arch: {
      nodes: [
        { id: 0, x: 80,  y: 170, label: 'FORM',     sub: 'INBOUND',      kind: 'source' },
        { id: 1, x: 280, y: 170, label: 'n8n',      sub: 'ENRICH',       kind: 'workflow' },
        { id: 2, x: 480, y: 100, label: 'CLAUDE',   sub: 'QUALIFY',      kind: 'agent' },
        { id: 3, x: 480, y: 240, label: 'HUBSPOT',  sub: 'LOG',          kind: 'crm' },
        { id: 4, x: 680, y: 100, label: 'CALENDAR', sub: 'BOOK',         kind: 'outbound' },
        { id: 5, x: 680, y: 240, label: 'SLACK',    sub: 'ESCALATE',     kind: 'outbound' },
        { id: 6, x: 880, y: 170, label: 'SUPABASE', sub: 'LEARN',        kind: 'data' },
      ],
      edges: [[0,1],[1,2],[1,3],[2,4],[2,5],[4,6],[5,6]],
    },
    results: [['RESPONSE', '< 3 MIN'], ['BOOK-RATE', '+2.1×'], ['QUALIFIED/WK', '+4.4×'], ['OPS HEADCOUNT', '−2']],
    quote: { q: 'The triage agent books more meetings on its own than our best rep did on a full desk. It never sleeps, never misses, never forgets.', n: 'HEAD OF OPERATIONS', o: 'LEADZEN.AI' },
  },
  terranconnect: {
    length: '10 WEEKS',
    problem: 'TerranConnect’s ICP had drifted. Forecast accuracy was sub-70%. Leadership had stopped trusting the CRM. Weekly pipeline reviews were pure theater.',
    approach: 'Supabase warehouse pulls every win/loss signal weekly. Claude re-scores the ICP against closed-won traits, flags accounts worth re-engaging, and writes the forecast narrative. Leadership gets a Monday-morning brief.',
    stack: ['HUBSPOT', 'SUPABASE', 'CLAUDE', 'n8n', 'METABASE'],
    arch: {
      nodes: [
        { id: 0, x: 80,  y: 100, label: 'HUBSPOT',  sub: 'WINS/LOSSES', kind: 'crm' },
        { id: 1, x: 80,  y: 240, label: 'PRODUCT',  sub: 'USAGE',       kind: 'source' },
        { id: 2, x: 280, y: 170, label: 'SUPABASE', sub: 'WAREHOUSE',   kind: 'data' },
        { id: 3, x: 480, y: 170, label: 'CLAUDE',   sub: 'RESCORE',     kind: 'agent' },
        { id: 4, x: 680, y: 100, label: 'n8n',      sub: 'FLAG',        kind: 'workflow' },
        { id: 5, x: 680, y: 240, label: 'METABASE', sub: 'BRIEF',       kind: 'outbound' },
        { id: 6, x: 880, y: 170, label: 'HUBSPOT',  sub: 'UPDATE ICP',  kind: 'crm' },
      ],
      edges: [[0,2],[1,2],[2,3],[3,4],[3,5],[4,6],[5,6]],
    },
    results: [['WIN-RATE', '+34%'], ['FORECAST ACC', '92%'], ['REVIEW TIME', '−60%'], ['DEAD ACCOUNTS', '−28%']],
    quote: { q: 'We finally trust our pipeline. The signal-based workflows flag every account that matters and ignore the rest.', n: 'CRO', o: 'TERRANCONNECT' },
  },
  dbs: {
    length: '16 WEEKS',
    problem: 'DBS Bank ran lead ops across a multi-product portfolio with heavy compliance requirements. Manual routing consumed 62% of the ops team’s time. SLA hit-rate sat at 84%.',
    approach: 'Compliance-aware routing layer: inbound leads hit n8n, get classified against product eligibility, enriched against internal systems, and routed to the right banker with an auto-generated compliance memo.',
    stack: ['n8n', 'CLAUDE', 'SALESFORCE', 'SUPABASE', 'INTERNAL APIS'],
    arch: {
      nodes: [
        { id: 0, x: 80,  y: 170, label: 'CRM',      sub: 'MULTI-PRODUCT', kind: 'crm' },
        { id: 1, x: 280, y: 100, label: 'CLAUDE',   sub: 'CLASSIFY',      kind: 'agent' },
        { id: 2, x: 280, y: 240, label: 'COMPLY',   sub: 'CHECK',         kind: 'source' },
        { id: 3, x: 480, y: 170, label: 'n8n',      sub: 'ROUTE',         kind: 'workflow' },
        { id: 4, x: 680, y: 100, label: 'BANKER',   sub: 'ASSIGN',        kind: 'outbound' },
        { id: 5, x: 680, y: 240, label: 'MEMO',     sub: 'GENERATE',      kind: 'agent' },
        { id: 6, x: 880, y: 170, label: 'SUPABASE', sub: 'AUDIT LOG',     kind: 'data' },
      ],
      edges: [[0,1],[0,2],[1,3],[2,3],[3,4],[3,5],[4,6],[5,6]],
    },
    results: [['MANUAL OPS', '−62%'], ['SLA HIT', '99.1%'], ['ROUTING TIME', '< 90s'], ['AUDIT PASS', '100%']],
    quote: { q: 'Compliance-aware automation is rare. ColdOcean delivered it in four months across five product lines.', n: 'HEAD OF DIGITAL BANKING', o: 'DBS BANK' },
  },
};

function CoCaseFlow({ arch }) {
  return (
    <div style={{ border: '1px solid var(--co-line)', background: 'var(--co-bg-2)', padding: 32, position: 'relative', overflow: 'hidden', borderRadius: 'var(--co-radius)' }}>
      <div className="co-grid-bg" style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }} />
      <svg viewBox="0 0 960 340" style={{ width: '100%', height: 'auto', display: 'block', position: 'relative' }}>
        <defs>
          <filter id="gl">
            <feGaussianBlur stdDeviation="3" result="b"/>
            <feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
          </filter>
        </defs>
        {arch.edges.map(([a, b], i) => {
          const A = arch.nodes.find(n => n.id === a);
          const B = arch.nodes.find(n => n.id === b);
          const d = `M ${A.x+44} ${A.y} C ${(A.x+B.x)/2} ${A.y}, ${(A.x+B.x)/2} ${B.y}, ${B.x-44} ${B.y}`;
          return (
            <g key={i}>
              <path d={d} stroke="#ff5a1f" strokeWidth="1.2" fill="none" opacity="0.6" />
              <circle r="3" fill="#e4ff3f" filter="url(#gl)">
                <animateMotion dur={`${2 + (i % 3) * 0.4}s`} repeatCount="indefinite" path={d} />
              </circle>
            </g>
          );
        })}
        {arch.nodes.map(n => (
          <g key={n.id}>
            <rect x={n.x - 44} y={n.y - 24} width="88" height="48" rx="2" fill="#141414" stroke="#ff5a1f" strokeWidth="1" />
            <text x={n.x} y={n.y - 2} textAnchor="middle" fontFamily="Archivo Black, sans-serif" fontSize="11" fill="#f5f2ec" style={{ letterSpacing: '-0.01em' }}>{n.label}</text>
            <text x={n.x} y={n.y + 12} textAnchor="middle" fontFamily="JetBrains Mono, monospace" fontSize="8" fill="#7a7468" style={{ letterSpacing: '0.1em' }}>{n.sub}</text>
          </g>
        ))}
      </svg>
    </div>
  );
}

function CoCaseDetail({ studyId }) {
  const studies = window.CO_STUDIES || [];
  const study = studies.find(s => s.id === studyId);
  const detail = CO_CASE_DETAIL[studyId];
  if (!study || !detail) {
    return (
      <>
        <CoNav active="work" />
        <section className="co-section" style={{ minHeight: '60vh' }}>
          <div className="co-container">
            <h1 className="co-h2">CASE NOT FOUND.</h1>
            <a className="co-btn co-btn-ghost" href="case-studies.html" style={{ marginTop: 20 }}>ALL CASE STUDIES <Arrow /></a>
          </div>
        </section>
        <CoFooter />
      </>
    );
  }

  const idx = studies.findIndex(s => s.id === studyId);
  const prev = studies[(idx - 1 + studies.length) % studies.length];
  const next = studies[(idx + 1) % studies.length];

  return (
    <>
      <CoNav active="work" />

      {/* Hero header */}
      <section style={{ position: 'relative', background: 'var(--co-bg)', borderBottom: '1px solid var(--co-line)', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', inset: 0, opacity: 0.35 }}>
          <ParticleNetwork density={0.5} speed={0.6} showLabels={false} accent="#ff5a1f" accent2="#ffa726" />
        </div>
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(10,10,10,0.9), rgba(10,10,10,0.7))' }} />
        <div className="co-container" style={{ position: 'relative', zIndex: 2, paddingTop: 140, paddingBottom: 60 }}>
          <a href="case-studies.html" className="co-mono" style={{ color: 'var(--co-flame)', fontSize: 11, letterSpacing: '0.2em', textDecoration: 'none' }}>← ALL CASE STUDIES</a>
          <div style={{ display: 'flex', alignItems: 'center', gap: 16, margin: '24px 0 28px' }}>
            <Mark letter={study.m} bg="var(--co-flame)" fg="#0a0a0a" />
            <div>
              <div className="co-display" style={{ fontSize: 22 }}>{study.client}</div>
              <div className="co-mono" style={{ fontSize: 11, color: 'var(--co-muted)', letterSpacing: '0.16em', marginTop: 2 }}>
                {study.region} · CASE {String(idx+1).padStart(2,'0')} · {detail.length}
              </div>
            </div>
          </div>
          <h1 className="co-h1" style={{ maxWidth: 1000 }}>{study.title}</h1>

          {/* KPI strip */}
          <div style={{ marginTop: 40, display: 'grid', gridTemplateColumns: `repeat(${detail.results.length}, 1fr)`, gap: 0, border: '1px solid var(--co-line)', background: 'rgba(10,10,10,0.5)' }}>
            {detail.results.map(([k, v], i) => (
              <div key={k} style={{ padding: '24px 28px', borderRight: i < detail.results.length - 1 ? '1px solid var(--co-line)' : 'none' }}>
                <div className="co-mono" style={{ fontSize: 10, color: 'var(--co-muted)', letterSpacing: '0.18em' }}>{k}</div>
                <div className="co-display" style={{ fontSize: 36, marginTop: 6, color: 'var(--co-flame)' }}>{v}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Problem + approach */}
      <section className="co-section">
        <div className="co-container">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0, border: '1px solid var(--co-line)' }}>
            <div style={{ padding: 40, borderRight: '1px solid var(--co-line)', background: 'var(--co-bg)' }}>
              <div className="co-mono" style={{ fontSize: 10, letterSpacing: '0.18em', color: 'var(--co-flame)', marginBottom: 14 }}>/ 01 THE PROBLEM</div>
              <p style={{ fontSize: 17, color: 'var(--co-ink)', lineHeight: 1.55, margin: 0 }}>{detail.problem}</p>
            </div>
            <div style={{ padding: 40, background: 'var(--co-bg)' }}>
              <div className="co-mono" style={{ fontSize: 10, letterSpacing: '0.18em', color: 'var(--co-flame)', marginBottom: 14 }}>/ 02 WHAT WE BUILT</div>
              <p style={{ fontSize: 17, color: 'var(--co-ink)', lineHeight: 1.55, margin: 0 }}>{detail.approach}</p>
            </div>
          </div>
        </div>
      </section>

      {/* Architecture */}
      <section className="co-section" style={{ background: 'var(--co-bg-2)', borderTop: '1px solid var(--co-line)', borderBottom: '1px solid var(--co-line)' }}>
        <div className="co-container">
          <div style={{ marginBottom: 32 }}>
            <span className="co-eyebrow"><span className="dot" /> ARCHITECTURE</span>
            <h2 className="co-h2" style={{ marginTop: 20 }}>HOW IT <span className="co-flame">RUNS.</span></h2>
          </div>
          <CoCaseFlow arch={detail.arch} />
          <div style={{ marginTop: 28, display: 'flex', gap: 8, flexWrap: 'wrap' }}>
            {detail.stack.map(t => (
              <span key={t} className="co-mono" style={{
                padding: '8px 14px',
                border: '1px solid var(--co-line)',
                background: 'var(--co-bg)',
                fontSize: 11,
                letterSpacing: '0.14em',
                color: 'var(--co-ink-soft)',
                borderRadius: 2,
              }}>{t}</span>
            ))}
          </div>
        </div>
      </section>

      {/* Quote */}
      <section className="co-section">
        <div className="co-container">
          <div style={{
            border: '1px solid var(--co-line)',
            padding: '48px 48px',
            background: 'var(--co-bg)',
          }}>
            <div className="co-display" style={{ fontSize: 64, color: 'var(--co-flame)', lineHeight: 0.6, marginBottom: 20 }}>"</div>
            <p style={{ fontFamily: 'var(--co-font-display)', fontSize: 32, lineHeight: 1.15, letterSpacing: '-0.01em', margin: 0, color: 'var(--co-ink)', textTransform: 'none', maxWidth: 900 }}>
              {detail.quote.q}
            </p>
            <div style={{ marginTop: 28, paddingTop: 20, borderTop: '1px solid var(--co-line)', display: 'flex', alignItems: 'center', gap: 14 }}>
              <Mark letter={study.m} bg="var(--co-flame)" fg="#0a0a0a" />
              <div>
                <div className="co-mono" style={{ fontSize: 11, color: 'var(--co-ink)', letterSpacing: '0.14em' }}>{detail.quote.n}</div>
                <div className="co-mono" style={{ fontSize: 10, color: 'var(--co-muted)', letterSpacing: '0.14em', marginTop: 2 }}>{detail.quote.o}</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Prev / next */}
      <section className="co-section co-section--tight">
        <div className="co-container">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0, border: '1px solid var(--co-line)' }}>
            <a href={`case-${prev.id}.html`} style={{
              padding: 28, background: 'var(--co-bg)', textDecoration: 'none',
              borderRight: '1px solid var(--co-line)',
              display: 'flex', flexDirection: 'column', gap: 8,
            }}>
              <div className="co-mono" style={{ fontSize: 10, color: 'var(--co-muted)', letterSpacing: '0.18em' }}>← PREV</div>
              <div className="co-display" style={{ fontSize: 22, color: 'var(--co-ink)' }}>{prev.client}</div>
              <div className="co-mono" style={{ fontSize: 11, color: 'var(--co-flame)', letterSpacing: '0.14em' }}>{prev.region}</div>
            </a>
            <a href={`case-${next.id}.html`} style={{
              padding: 28, background: 'var(--co-bg)', textDecoration: 'none',
              display: 'flex', flexDirection: 'column', gap: 8, textAlign: 'right',
            }}>
              <div className="co-mono" style={{ fontSize: 10, color: 'var(--co-muted)', letterSpacing: '0.18em' }}>NEXT →</div>
              <div className="co-display" style={{ fontSize: 22, color: 'var(--co-ink)' }}>{next.client}</div>
              <div className="co-mono" style={{ fontSize: 11, color: 'var(--co-flame)', letterSpacing: '0.14em' }}>{next.region}</div>
            </a>
          </div>
        </div>
      </section>

      <CoCTA />
      <CoFooter />
    </>
  );
}

// ─── PLAYBOOK ────────────────────────────────────────────────
function CoFAQRow({ q, a, open, onToggle }) {
  return (
    <div style={{ borderBottom: '1px solid var(--co-line)' }}>
      <button onClick={onToggle} style={{
        width: '100%', textAlign: 'left', background: 'transparent', border: 'none',
        padding: '24px 0', cursor: 'pointer',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 20,
        color: 'var(--co-ink)',
      }}>
        <span className="co-display" style={{ fontSize: 20, lineHeight: 1.1, textTransform: 'none', letterSpacing: '-0.01em' }}>{q}</span>
        <span className="co-mono" style={{ color: 'var(--co-flame)', fontSize: 18, flexShrink: 0 }}>{open ? '−' : '+'}</span>
      </button>
      {open && (
        <div style={{ paddingBottom: 24, color: 'var(--co-ink-soft)', fontSize: 15, lineHeight: 1.6, maxWidth: 820 }}>
          {a}
        </div>
      )}
    </div>
  );
}

function CoPlaybook() {
  const [openFaq, setOpenFaq] = React.useState(0);

  const weeks = [
    {
      n: 'WEEK 1',
      title: 'DISCOVERY',
      sub: 'AUDIT · ICP · STACK MAPPING',
      bullets: [
        'Half-day working session: current motion, top 3 bottlenecks',
        'ICP refinement using your closed-won data',
        'Stack audit: what connects, what breaks, what we replace',
        'Agreed target workflow + success metrics',
      ],
      tools: ['CLAUDE', 'NOTION', 'FIGMA', 'HUBSPOT'],
    },
    {
      n: 'WEEK 2',
      title: 'FIRST WORKFLOW',
      sub: 'BUILD · INTEGRATE · SHIP',
      bullets: [
        'Agent + n8n workflow wired end-to-end',
        'Live integration with your CRM and send tools',
        'Human-in-loop review for first 48 hours',
        'Workflow shipped live by Friday of week 2',
      ],
      tools: ['n8n', 'CLAUDE', 'APOLLO', 'SUPABASE'],
    },
    {
      n: 'WEEK 3+',
      title: 'COMPOUND',
      sub: 'MEASURE · ITERATE · EXPAND',
      bullets: [
        'Weekly iteration against live metrics',
        'New pillars layered: research → outbound → revops',
        'Monthly architecture review with leadership',
        'Every quarter: one new autonomous workflow live',
      ],
      tools: ['METABASE', 'SLACK', 'LINEAR', 'HUBSPOT'],
    },
  ];

  const youProvide = [
    'CRM access (read + write, scoped role)',
    'Closed-won + closed-lost data for last 12 months',
    'One operator point-of-contact, 2 hrs/week',
    'Goals, constraints, and what "good" looks like',
  ];

  const weDeliver = [
    'End-to-end working agent workflow (not a demo)',
    'Live integration with your existing stack',
    'Architecture doc + runbook your team can own',
    'Weekly iteration calls + Slack channel access',
  ];

  const faqs = [
    { q: 'Why two weeks? Isn’t that too fast for enterprise?', a: 'Two weeks is the time to ship the first workflow. Enterprise-grade hardening — compliance, audit logging, multi-tenant routing — is layered in weeks 3–8. The point of week 2 is to have a live, measurable system your team can react to. Theoretical architecture docs don’t compound; shipped systems do.' },
    { q: 'Do you replace our SDRs / ops team?', a: 'Sometimes yes, usually partially. Most teams redeploy their human operators to higher-leverage work — strategic accounts, edge-case handling, feedback loops into the agents. The agents handle volume; humans handle judgment.' },
    { q: 'Which stack do you require?', a: 'None. We compose around what you already run. HubSpot, Salesforce, Close, Apollo, Smartlead, Zoominfo, Clay, Airtable, Supabase, Vercel — we wire to what exists. The only thing we bring in by default is n8n (self-hosted or cloud) and Claude as the agent runtime.' },
    { q: 'What does pricing look like?', a: 'Fixed-fee engagements. Typical first workflow: €25–45k depending on scope and integration depth. Ongoing iteration: monthly retainer tied to measurable outcomes. We share exact scope + price on the second call, after discovery is scoped.' },
    { q: 'Can we see a workflow before we commit?', a: 'Yes. The 30-minute call always ends with a demo that mirrors your motion — no canned decks. If the fit is right, we scope a two-week engagement on the spot. If not, we hand you the architecture notes anyway.' },
  ];

  return (
    <>
      <CoNav active="playbook" />
      <CoPageHero
        kicker="PLAYBOOK · HOW WE SHIP"
        title={<>HOW WE SHIP<br/>IN <span className="co-flame">TWO WEEKS.</span></>}
        subtitle="Every engagement follows the same rhythm. Week 1 we scope. Week 2 we ship. Week 3+ we compound. No roadmaps. No workshops. No decks."
        tag="2-WEEK CADENCE"
      />

      {/* Weeks timeline */}
      <section className="co-section">
        <div className="co-container">
          <div style={{ marginBottom: 40 }}>
            <span className="co-eyebrow"><span className="dot" /> THE RHYTHM</span>
            <h2 className="co-h2" style={{ marginTop: 24 }}>THREE PHASES.<br/>ONE <span className="co-flame">LIVE SYSTEM.</span></h2>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, border: '1px solid var(--co-line)' }}>
            {weeks.map((w, i) => (
              <div key={w.n} style={{
                padding: 32,
                background: 'var(--co-bg)',
                borderRight: i < 2 ? '1px solid var(--co-line)' : 'none',
                display: 'flex', flexDirection: 'column', minHeight: 440,
              }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 }}>
                  <span className="co-mono" style={{ color: 'var(--co-flame)', fontSize: 13, letterSpacing: '0.14em' }}>{w.n}</span>
                  <span className="co-mono" style={{ color: 'var(--co-muted)', fontSize: 10, letterSpacing: '0.16em' }}>PHASE {String(i+1).padStart(2, '0')}</span>
                </div>
                <h3 className="co-display" style={{ fontSize: 36, lineHeight: 0.95, marginBottom: 8 }}>{w.title}</h3>
                <div className="co-mono" style={{ fontSize: 10, color: 'var(--co-acid)', letterSpacing: '0.18em', marginBottom: 24 }}>{w.sub}</div>
                <ul style={{ listStyle: 'none', padding: 0, margin: 0, flex: 1, display: 'flex', flexDirection: 'column', gap: 10 }}>
                  {w.bullets.map((b, j) => (
                    <li key={j} style={{ fontSize: 14, color: 'var(--co-ink-soft)', lineHeight: 1.5, display: 'flex', gap: 10 }}>
                      <span style={{ color: 'var(--co-flame)', flexShrink: 0, fontFamily: 'var(--co-font-mono)' }}>▸</span>
                      <span>{b}</span>
                    </li>
                  ))}
                </ul>
                <div style={{ marginTop: 24, paddingTop: 16, borderTop: '1px dashed var(--co-line)', display: 'flex', gap: 6, flexWrap: 'wrap' }}>
                  {w.tools.map(t => (
                    <span key={t} className="co-mono" style={{
                      fontSize: 10, color: 'var(--co-ink-soft)',
                      padding: '4px 8px', border: '1px solid var(--co-line)',
                      borderRadius: 2, letterSpacing: '0.1em',
                    }}>{t}</span>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* You provide / we deliver */}
      <section className="co-section" style={{ background: 'var(--co-bg-2)', borderTop: '1px solid var(--co-line)', borderBottom: '1px solid var(--co-line)' }}>
        <div className="co-container">
          <div style={{ marginBottom: 40 }}>
            <span className="co-eyebrow"><span className="dot" /> SHAPE OF THE ENGAGEMENT</span>
            <h2 className="co-h2" style={{ marginTop: 24 }}>CLEAR <span className="co-flame">SWIM LANES.</span></h2>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0, border: '1px solid var(--co-line)' }}>
            <div style={{ padding: 36, borderRight: '1px solid var(--co-line)', background: 'var(--co-bg)' }}>
              <div className="co-mono" style={{ fontSize: 11, letterSpacing: '0.18em', color: 'var(--co-acid)', marginBottom: 20 }}>YOU PROVIDE</div>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 14 }}>
                {youProvide.map((b, j) => (
                  <li key={j} style={{ fontSize: 15, color: 'var(--co-ink)', display: 'flex', gap: 12 }}>
                    <span style={{ color: 'var(--co-acid)', fontFamily: 'var(--co-font-mono)', flexShrink: 0 }}>01 · {String(j+1).padStart(2, '0')}</span>
                    <span>{b}</span>
                  </li>
                ))}
              </ul>
            </div>
            <div style={{ padding: 36, background: 'var(--co-bg)' }}>
              <div className="co-mono" style={{ fontSize: 11, letterSpacing: '0.18em', color: 'var(--co-flame)', marginBottom: 20 }}>WE DELIVER</div>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 14 }}>
                {weDeliver.map((b, j) => (
                  <li key={j} style={{ fontSize: 15, color: 'var(--co-ink)', display: 'flex', gap: 12 }}>
                    <span style={{ color: 'var(--co-flame)', fontFamily: 'var(--co-font-mono)', flexShrink: 0 }}>02 · {String(j+1).padStart(2, '0')}</span>
                    <span>{b}</span>
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section className="co-section">
        <div className="co-container">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 60 }}>
            <div>
              <span className="co-eyebrow"><span className="dot" /> FAQ</span>
              <h2 className="co-h2" style={{ marginTop: 24 }}>COMMON<br/><span className="co-flame">QUESTIONS.</span></h2>
            </div>
            <div>
              {faqs.map((f, i) => (
                <CoFAQRow key={i} q={f.q} a={f.a} open={openFaq === i} onToggle={() => setOpenFaq(openFaq === i ? -1 : i)} />
              ))}
            </div>
          </div>
        </div>
      </section>

      <CoCTA />
      <CoFooter />
    </>
  );
}

// ─── LEGAL PAGES (Privacy / Cookies / Terms) ─────────────────
const CO_LEGAL = {
  privacy: {
    kicker: 'LEGAL · PRIVACY POLICY',
    tag: 'EFFECTIVE 2026-01-01',
    title: <>PRIVACY<br/><span className="co-flame">POLICY.</span></>,
    subtitle: 'How ColdOcean B.V. collects, uses, and protects the personal data of visitors, prospects, and customers. Written to meet GDPR (EU) and UK GDPR requirements.',
    toc: [
      ['01', 'Who we are'],
      ['02', 'What we collect'],
      ['03', 'How we use it'],
      ['04', 'Legal basis'],
      ['05', 'Sharing + sub-processors'],
      ['06', 'Retention'],
      ['07', 'Your rights'],
      ['08', 'International transfers'],
      ['09', 'Security'],
      ['10', 'Contact'],
    ],
    sections: [
      { n: '01', h: 'WHO WE ARE', body: (
        <p>ColdOcean B.V. ("ColdOcean", "we", "us") is a GTM AI automation studio registered in the Netherlands with offices in Amsterdam and London. For questions about this policy or the data we hold about you, contact <a href="mailto:privacy@coldocean.io" style={{ color: 'var(--co-flame)' }}>privacy@coldocean.io</a>.</p>
      )},
      { n: '02', h: 'WHAT WE COLLECT', body: (
        <ul>
          <li><b>Contact data</b> — name, work email, company, role — when you book a call, submit a form, or email us.</li>
          <li><b>Usage data</b> — pages visited, referrer, approximate location (country-level), device type — via our analytics.</li>
          <li><b>Customer data</b> — during an engagement we process data you authorize us to, as described in the signed DPA.</li>
          <li>We do not knowingly collect data from children under 16.</li>
        </ul>
      )},
      { n: '03', h: 'HOW WE USE IT', body: (
        <ul>
          <li>Respond to inquiries and schedule meetings.</li>
          <li>Deliver the engagement and operate the agents we build.</li>
          <li>Improve the site, our positioning, and our product.</li>
          <li>Send operational email (never marketing without opt-in).</li>
        </ul>
      )},
      { n: '04', h: 'LEGAL BASIS', body: (
        <p>Under GDPR / UK GDPR we rely on: <b>contract</b> (to deliver engagements), <b>legitimate interest</b> (to run the site, respond to B2B inquiries, improve the service), and <b>consent</b> (for non-essential cookies and marketing). You can withdraw consent at any time.</p>
      )},
      { n: '05', h: 'SHARING + SUB-PROCESSORS', body: (
        <>
          <p>We share data only with vetted sub-processors needed to operate the service. Current list:</p>
          <ul>
            <li><b>Vercel</b> — site hosting (EU region).</li>
            <li><b>Supabase</b> — database (EU region).</li>
            <li><b>Google Workspace</b> — email + docs.</li>
            <li><b>TidyCal</b> — meeting scheduling.</li>
            <li><b>Anthropic</b> — Claude API for agent workloads (no training on your data).</li>
            <li><b>HubSpot</b> — CRM for prospects that opt in.</li>
          </ul>
          <p>We do not sell personal data. Ever.</p>
        </>
      )},
      { n: '06', h: 'RETENTION', body: (
        <ul>
          <li>Contact data: until you ask us to delete it, or 3 years after last contact.</li>
          <li>Engagement data: as specified in the DPA, typically 12 months post-termination.</li>
          <li>Analytics data: 14 months.</li>
        </ul>
      )},
      { n: '07', h: 'YOUR RIGHTS', body: (
        <p>You can request access, correction, deletion, portability, restriction, or objection at any time by emailing <a href="mailto:privacy@coldocean.io" style={{ color: 'var(--co-flame)' }}>privacy@coldocean.io</a>. You can also lodge a complaint with your local data protection authority (Autoriteit Persoonsgegevens in NL, ICO in the UK).</p>
      )},
      { n: '08', h: 'INTERNATIONAL TRANSFERS', body: (
        <p>Our primary infrastructure is in the EU. When data is transferred outside the EU/UK, we rely on Standard Contractual Clauses and, where required, supplementary measures.</p>
      )},
      { n: '09', h: 'SECURITY', body: (
        <p>Encryption in transit (TLS 1.2+), encryption at rest, scoped credentials, audit logs on all agent actions, SOC 2–aligned operational practices. Security incidents are disclosed within 72 hours per GDPR Art. 33.</p>
      )},
      { n: '10', h: 'CONTACT', body: (
        <p>
          ColdOcean B.V.<br/>
          Herengracht 1, 1015 BA Amsterdam, The Netherlands<br/>
          <a href="mailto:privacy@coldocean.io" style={{ color: 'var(--co-flame)' }}>privacy@coldocean.io</a>
        </p>
      )},
    ],
  },

  cookies: {
    kicker: 'LEGAL · COOKIE POLICY',
    tag: 'EFFECTIVE 2026-01-01',
    title: <>COOKIE<br/><span className="co-flame">POLICY.</span></>,
    subtitle: 'Which cookies we use, why, and how to control them. Essential cookies only by default; everything else requires consent.',
    toc: [
      ['01', 'What is a cookie'],
      ['02', 'What we use'],
      ['03', 'Essential'],
      ['04', 'Analytics'],
      ['05', 'Marketing'],
      ['06', 'Managing cookies'],
      ['07', 'Changes'],
    ],
    sections: [
      { n: '01', h: 'WHAT IS A COOKIE', body: (
        <p>A cookie is a small text file stored on your device when you visit a website. We use cookies and similar technologies (local storage, pixels) to operate the site and, with your consent, to understand how it is used.</p>
      )},
      { n: '02', h: 'WHAT WE USE', body: (
        <p>We use three categories: <b>essential</b> (always on), <b>analytics</b> (opt-in), <b>marketing</b> (opt-in). The cookie banner on your first visit controls the last two.</p>
      )},
      { n: '03', h: 'ESSENTIAL', body: (
        <ul>
          <li><b>co_consent</b> — remembers your cookie preferences. 12 months. First-party.</li>
          <li><b>co_session</b> — session identifier while you browse. Session. First-party.</li>
        </ul>
      )},
      { n: '04', h: 'ANALYTICS (OPT-IN)', body: (
        <ul>
          <li><b>_pk_id / _pk_ses</b> — Plausible self-hosted analytics. Aggregated, IP-anonymized. 30 days / session.</li>
        </ul>
      )},
      { n: '05', h: 'MARKETING (OPT-IN)', body: (
        <ul>
          <li><b>_li_fat_id</b> — LinkedIn attribution for paid campaigns. 90 days. Set only if you opt in.</li>
        </ul>
      )},
      { n: '06', h: 'MANAGING COOKIES', body: (
        <p>Reopen the cookie preferences panel any time from the footer. You can also clear cookies from your browser settings. Blocking essential cookies may break parts of the site.</p>
      )},
      { n: '07', h: 'CHANGES', body: (
        <p>When we add or remove cookies we update this page and, for non-essential cookies, re-prompt for consent. Last reviewed 2026-01-01.</p>
      )},
    ],
  },

  terms: {
    kicker: 'LEGAL · TERMS & CONDITIONS',
    tag: 'EFFECTIVE 2026-01-01',
    title: <>TERMS &<br/><span className="co-flame">CONDITIONS.</span></>,
    subtitle: 'The rules governing use of coldocean.io and our engagements. Short version: we ship what we scope, you pay on agreed terms, nobody sues anybody on a whim.',
    toc: [
      ['01', 'Acceptance'],
      ['02', 'Services'],
      ['03', 'Fees + payment'],
      ['04', 'Intellectual property'],
      ['05', 'Confidentiality'],
      ['06', 'Warranties'],
      ['07', 'Liability'],
      ['08', 'Termination'],
      ['09', 'Governing law'],
      ['10', 'Contact'],
    ],
    sections: [
      { n: '01', h: 'ACCEPTANCE', body: (
        <p>By using coldocean.io or signing an engagement with us, you accept these terms. Engagements are governed first by the signed Statement of Work (SOW); these terms fill in what the SOW does not.</p>
      )},
      { n: '02', h: 'SERVICES', body: (
        <p>We design, build, and operate AI-driven GTM workflows. Scope, deliverables, and timelines are defined per engagement in the SOW. We ship iteratively — the first workflow lands within two weeks unless otherwise scoped.</p>
      )},
      { n: '03', h: 'FEES + PAYMENT', body: (
        <ul>
          <li>Fixed-fee engagements, milestone-billed. Net-14 from invoice date unless otherwise agreed.</li>
          <li>Late payment accrues interest at the statutory commercial rate (EU Directive 2011/7/EU).</li>
          <li>Third-party tool costs (CRMs, send infra, API usage) are pass-through unless bundled into the SOW.</li>
        </ul>
      )},
      { n: '04', h: 'INTELLECTUAL PROPERTY', body: (
        <ul>
          <li><b>Your data stays yours.</b> We process it under the DPA and return/delete it on termination.</li>
          <li><b>Custom deliverables</b> (workflows, prompts, code specific to your engagement) are assigned to you on final payment.</li>
          <li><b>Our tools</b> (templates, libraries, methodology, the site itself) remain ours — you get a perpetual non-exclusive license to use them as part of the deliverable.</li>
        </ul>
      )},
      { n: '05', h: 'CONFIDENTIALITY', body: (
        <p>Mutual NDA is implied in every engagement and can be formalized separately. We keep your data, metrics, and strategy private. We may reference the engagement publicly only with your written approval.</p>
      )},
      { n: '06', h: 'WARRANTIES', body: (
        <p>We warrant the services will be performed with professional care. We do not warrant specific outcomes (pipeline, reply rates, revenue) — those depend on your inputs and market conditions. Third-party LLMs can hallucinate; we design workflows to minimize this, but we cannot guarantee it.</p>
      )},
      { n: '07', h: 'LIABILITY', body: (
        <p>To the extent permitted by law, our aggregate liability for any engagement is capped at the fees paid in the prior 12 months. We are not liable for indirect, consequential, or lost-profits damages. Nothing here limits liability for willful misconduct or fraud.</p>
      )},
      { n: '08', h: 'TERMINATION', body: (
        <ul>
          <li>Either party may terminate for material breach, uncured within 30 days of written notice.</li>
          <li>You may terminate for convenience with 30 days' notice; fees earned to termination date are due.</li>
          <li>On termination we return or delete your data per the DPA.</li>
        </ul>
      )},
      { n: '09', h: 'GOVERNING LAW', body: (
        <p>These terms are governed by the laws of the Netherlands. Disputes go to the competent courts of Amsterdam, unless we agree otherwise in writing.</p>
      )},
      { n: '10', h: 'CONTACT', body: (
        <p>
          ColdOcean B.V.<br/>
          Herengracht 1, 1015 BA Amsterdam, The Netherlands<br/>
          <a href="mailto:legal@coldocean.io" style={{ color: 'var(--co-flame)' }}>legal@coldocean.io</a>
        </p>
      )},
    ],
  },
};

function CoLegalPage({ docId }) {
  const doc = CO_LEGAL[docId];
  if (!doc) {
    return (
      <>
        <CoNav />
        <section className="co-section" style={{ minHeight: '60vh' }}>
          <div className="co-container">
            <h1 className="co-h2">DOCUMENT NOT FOUND.</h1>
          </div>
        </section>
        <CoFooter />
      </>
    );
  }
  return (
    <>
      <CoNav />
      <CoPageHero
        kicker={doc.kicker}
        title={doc.title}
        subtitle={doc.subtitle}
        tag={doc.tag}
        minHeight={480}
      />

      <section className="co-section">
        <div className="co-container">
          <div style={{ display: 'grid', gridTemplateColumns: '240px 1fr', gap: 60 }}>
            {/* TOC */}
            <aside style={{ position: 'sticky', top: 40, alignSelf: 'start' }}>
              <div className="co-mono" style={{ fontSize: 10, letterSpacing: '0.18em', color: 'var(--co-flame)', marginBottom: 18 }}>CONTENTS</div>
              <nav style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                {doc.toc.map(([n, t]) => (
                  <a key={n} href={`#s-${n}`} className="co-mono" style={{
                    color: 'var(--co-ink-soft)', textDecoration: 'none',
                    fontSize: 12, letterSpacing: '0.08em',
                    display: 'flex', gap: 10, lineHeight: 1.4,
                  }}>
                    <span style={{ color: 'var(--co-flame)' }}>{n}</span>
                    <span>{t}</span>
                  </a>
                ))}
              </nav>
            </aside>

            {/* Sections */}
            <div style={{ border: '1px solid var(--co-line)', background: 'var(--co-bg)' }}>
              {doc.sections.map((s, i) => (
                <section key={s.n} id={`s-${s.n}`} style={{
                  padding: '36px 40px',
                  borderBottom: i < doc.sections.length - 1 ? '1px solid var(--co-line)' : 'none',
                }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 14 }}>
                    <span className="co-mono" style={{ color: 'var(--co-flame)', fontSize: 12, letterSpacing: '0.14em' }}>[ {s.n} ]</span>
                    <h2 className="co-h3" style={{ fontSize: 22 }}>{s.h}</h2>
                  </div>
                  <div className="co-legal-body" style={{ color: 'var(--co-ink-soft)', fontSize: 15, lineHeight: 1.65 }}>
                    {s.body}
                  </div>
                </section>
              ))}
            </div>
          </div>
        </div>
      </section>

      <CoFooter />

      <style>{`
        .co-legal-body p { margin: 0 0 14px; }
        .co-legal-body p:last-child { margin-bottom: 0; }
        .co-legal-body ul { margin: 0 0 14px; padding-left: 20px; }
        .co-legal-body ul:last-child { margin-bottom: 0; }
        .co-legal-body li { margin-bottom: 8px; }
        .co-legal-body li:last-child { margin-bottom: 0; }
        .co-legal-body b { color: var(--co-ink); font-weight: 600; }
      `}</style>
    </>
  );
}

window.CoPageHero = CoPageHero;
window.CoAbout = CoAbout;
window.CoCaseIndex = CoCaseIndex;
window.CoCaseDetail = CoCaseDetail;
window.CoPlaybook = CoPlaybook;
window.CoLegalPage = CoLegalPage;
