// ColdOcean — BOLD Sections2: Stack, Work, Stats, Testimonials, CTA, Footer

function CoStack() {
  const groups = [
    { name: 'CRM',      color: '#ff5a1f', tools: [{ n:'HUBSPOT', m:'H' },{ n:'SALESFORCE', m:'SF' },{ n:'CLOSE', m:'C' },{ n:'PIPEDRIVE', m:'PD' }] },
    { name: 'LEAD GEN', color: '#ffa726', tools: [{ n:'APOLLO', m:'A' },{ n:'BLITZAPI', m:'Bz' },{ n:'ZOOMINFO', m:'Zi' },{ n:'CLAY', m:'Cl' }] },
    { name: 'AGENTS',   color: '#e4ff3f', tools: [{ n:'CLAUDE CODE', m:'Cd' },{ n:'n8n', m:'n8' },{ n:'OPENCLAW', m:'Ow' },{ n:'LANGCHAIN', m:'LC' }] },
    { name: 'DATA',     color: '#f5f2ec', tools: [{ n:'SUPABASE', m:'Sb' },{ n:'VERCEL', m:'V' },{ n:'AIRTABLE', m:'At' },{ n:'POSTGRES', m:'Pg' }] },
  ];

  return (
    <section id="stack" className="co-section">
      <div className="co-container">
        <div style={{ marginBottom: 48 }}>
          <div style={{ marginBottom: 24 }}>
            <span className="co-eyebrow"><span className="dot" /> STACK</span>
          </div>
          <h2 className="co-h2">WE SPEAK<br/>YOUR <span className="co-flame">TOOLCHAIN.</span></h2>
          <p className="co-lead" style={{ marginTop: 20 }}>
            No rip-and-replace. We compose around what you run — and bring the glue.
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0, border: '1px solid var(--co-line)' }}>
          {groups.map((g, gi) => (
            <div key={g.name} style={{
              padding: 28,
              background: 'var(--co-bg)',
              borderRight: gi < 3 ? '1px solid var(--co-line)' : 'none',
              position: 'relative',
            }}>
              <div style={{ height: 3, background: g.color, marginBottom: 24, width: 40 }} />
              <div className="co-display" style={{ fontSize: 20, color: g.color, marginBottom: 20 }}>{g.name}</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
                {g.tools.map((t) => (
                  <div key={t.n} className="co-tool-row" style={{
                    display: 'flex', alignItems: 'center', gap: 12,
                    padding: '10px 8px',
                    borderRadius: 2,
                    transition: 'background .2s',
                    cursor: 'pointer',
                  }}>
                    <Mark letter={t.m} bg={g.color} fg="#0a0a0a" />
                    <span className="co-mono" style={{ fontSize: 12, color: 'var(--co-ink)', letterSpacing: '0.08em' }}>{t.n}</span>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
      <style>{`.co-tool-row:hover { background: var(--co-bg-2); }`}</style>
    </section>
  );
}

const CO_STUDIES = [
  { id: 'wattlift',     client: 'WATTLIFT',       m: 'W',   region: 'FR',   regionGroup: 'EU',   title: 'OUTBOUND ENGINE FOR EV FLEET SALES',            body: 'Built a bilingual outbound agent hitting fleet managers across France and Benelux. Replaced a 4-rep SDR team.', kpis: [['PIPELINE','+5.2×'],['CAC','−41%']] },
  { id: 'hexus',        client: 'HEXUS.AI',       m: 'Hx',  region: 'UK',   regionGroup: 'UK',   title: 'RESEARCH + ENRICHMENT AGENTS FOR GTM',           body: 'Claude drafts the brief, n8n ships it to every AE before 9am stand-up.', kpis: [['TIME-TO-BRIEF','2 MIN'],['AE HOURS','−18/WK']] },
  { id: 'leadzen',      client: 'LEADZEN.AI',     m: 'Lz',  region: 'EU',   regionGroup: 'EU',   title: 'INBOUND QUALIFICATION + ROUTING',                body: 'Agent-led qualification triaging 3K+ inbound/week, booking meetings, escalating edge cases.', kpis: [['RESPONSE','< 3 MIN'],['BOOK-RATE','+2.1×']] },
  { id: 'terranconnect',client: 'TERRANCONNECT',  m: 'Tc',  region: 'EU',   regionGroup: 'EU',   title: 'PIPELINE INTELLIGENCE + ICP REFINEMENT',         body: 'Weekly ICP re-scoring based on won/lost signals. Leadership finally trusts forecast.', kpis: [['WIN-RATE','+34%'],['FORECAST','92%']] },
  { id: 'dbs',          client: 'DBS BANK',       m: 'DBS', region: 'APAC', regionGroup: 'APAC', title: 'ENTERPRISE LEAD OPS AT SCALE',                   body: 'Compliance-aware lead routing and enrichment across a multi-product portfolio.', kpis: [['MANUAL OPS','−62%'],['SLA HIT','99.1%']] },
];
window.CO_STUDIES = CO_STUDIES;

function CoCaseStudies() {
  const studies = CO_STUDIES;

  return (
    <section id="work" 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={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 48, flexWrap: 'wrap', gap: 20 }}>
          <div>
            <div style={{ marginBottom: 24 }}>
              <span className="co-eyebrow"><span className="dot" /> SELECTED WORK</span>
            </div>
            <h2 className="co-h2">SHIPPED WITH TEAMS<br/>IN <span className="co-flame">EU · UK · APAC.</span></h2>
          </div>
          <a className="co-btn co-btn-ghost" href="case-studies.html">ALL CASE STUDIES <Arrow /></a>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 0, border: '1px solid var(--co-line)' }}>
          {studies.map((s, i) => {
            const big = i < 2;
            const span = big ? 'span 3' : 'span 2';
            const borderR = (i === 0 || i === 2 || i === 3) ? '1px solid var(--co-line)' : 'none';
            const borderB = i < 2 ? '1px solid var(--co-line)' : 'none';
            return (
              <a key={s.client} href={`case-${s.id}.html`} className="co-case" style={{
                gridColumn: span,
                background: 'var(--co-bg)',
                color: 'var(--co-ink)',
                padding: big ? 40 : 32,
                minHeight: big ? 360 : 280,
                display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
                position: 'relative', overflow: 'hidden',
                textDecoration: 'none',
                borderRight: borderR,
                borderBottom: borderB,
                transition: 'background .3s, color .3s',
              }}>
                <div style={{ position: 'relative', display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                    <Mark letter={s.m} bg="#ff5a1f" 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 style={{ position: 'relative' }}>
                  <h3 className="co-display" style={{ fontSize: big ? 36 : 22, 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: 440 }}>{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: 24, marginTop: 4, color: 'var(--co-flame)' }}>{v}</div>
                      </div>
                    ))}
                  </div>
                </div>
              </a>
            );
          })}
        </div>
      </div>
      <style>{`.co-case:hover { background: var(--co-surface); }`}</style>
    </section>
  );
}

function CoStats() {
  const stats = [
    ['€42M',   'PIPELINE GENERATED'],
    ['1.2M',   'LEADS / DAY'],
    ['< 72h',  'FIRST WORKFLOW SHIPPED'],
    ['47',     'GTM TEAMS OPERATING'],
  ];
  return (
    <section className="co-section co-section--tight">
      <div className="co-container">
        <div style={{
          background: 'var(--co-flame)',
          color: '#0a0a0a',
          padding: '64px 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: 64, 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>
  );
}

function CoTestimonials() {
  const quotes = [
    { 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', m: 'W' },
    { 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', m: 'Hx' },
    { q: 'We finally trust our pipeline. The signal-based workflows flag every account that matters and ignore the rest.', n: 'CRO', o: 'TERRANCONNECT', m: 'Tc' },
  ];
  return (
    <section className="co-section">
      <div className="co-container">
        <div style={{ marginBottom: 48 }}>
          <div style={{ marginBottom: 24 }}>
            <span className="co-eyebrow"><span className="dot" /> TESTIMONIALS</span>
          </div>
          <h2 className="co-h2">WHAT OPERATORS SAY.</h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, border: '1px solid var(--co-line)' }}>
          {quotes.map((q, i) => (
            <div key={i} style={{
              padding: 36, background: 'var(--co-bg)',
              borderRight: i < 2 ? '1px solid var(--co-line)' : 'none',
              display: 'flex', flexDirection: 'column', minHeight: 340,
            }}>
              <div className="co-display" style={{ fontSize: 56, color: 'var(--co-flame)', lineHeight: 0.7, marginBottom: 20 }}>"</div>
              <p style={{ fontFamily: 'var(--co-font-display)', fontSize: 20, lineHeight: 1.2, letterSpacing: '-0.01em', flex: 1, margin: 0, color: 'var(--co-ink)', textTransform: 'none' }}>
                {q.q}
              </p>
              <div style={{ marginTop: 24, paddingTop: 20, borderTop: '1px solid var(--co-line)', display: 'flex', alignItems: 'center', gap: 12 }}>
                <Mark letter={q.m} bg="var(--co-flame)" fg="#0a0a0a" />
                <div>
                  <div className="co-mono" style={{ fontSize: 11, color: 'var(--co-ink)', letterSpacing: '0.12em' }}>{q.n}</div>
                  <div className="co-mono" style={{ fontSize: 10, color: 'var(--co-muted)', letterSpacing: '0.14em', marginTop: 2 }}>{q.o}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function CoCTA() {
  return (
    <section id="cta" className="co-section" style={{ background: 'var(--co-bg-2)', borderTop: '1px solid var(--co-line)' }}>
      <div className="co-container">
        <div style={{
          border: '1px solid var(--co-flame)',
          padding: '72px 48px',
          textAlign: 'left',
          position: 'relative',
          overflow: 'hidden',
          background: 'var(--co-bg)',
        }}>
          <div style={{ position: 'absolute', inset: 0, zIndex: 0, opacity: 0.35 }}>
            <ParticleNetwork density={0.5} speed={0.6} showLabels={false} accent="#ff5a1f" accent2="#ffa726" />
          </div>
          <div style={{ position: 'relative', zIndex: 1, display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 48, alignItems: 'center' }}>
            <div>
              <div style={{ marginBottom: 24 }}>
                <span className="co-eyebrow"><span className="dot" /> LET'S BUILD</span>
              </div>
              <h2 className="co-h2">
                YOUR PIPELINE<br/>
                DESERVES <span className="co-flame">AGENTS.</span><br/>
                WE SHIP IN <span style={{ color: 'var(--co-acid)' }}>TWO WEEKS.</span>
              </h2>
            </div>
            <div>
              <p className="co-lead" style={{ marginBottom: 28 }}>
                30-minute strategy call. We'll sketch your first workflow, scope the stack, and show a demo that mirrors your motion.
              </p>
              <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
                <a className="co-btn co-btn-primary" href={window.CO_BOOKING_URL || 'https://tidycal.com/coldocean/15-minute-meeting'} target="_blank" rel="noreferrer">BOOK A CALL <Arrow /></a>
                <a className="co-btn co-btn-ghost" href="case-studies.html">SEE THE WORK <Arrow /></a>
              </div>
              <div className="co-mono" style={{ marginTop: 20, fontSize: 11, color: 'var(--co-muted)', letterSpacing: '0.14em' }}>
                hi@coldocean.io · AMSTERDAM · LONDON
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function CoFooter() {
  return (
    <footer style={{ padding: '48px 40px 32px', borderTop: '1px solid var(--co-line)', background: 'var(--co-bg)' }}>
      <div className="co-container" style={{ padding: 0 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr', gap: 32, marginBottom: 36 }}>
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 16 }}>
              <CoLogo />
              <span className="co-display" style={{ fontSize: 18 }}>
                COLDOCEAN<span style={{ color: 'var(--co-flame)' }}>.IO</span>
              </span>
            </div>
            <p style={{ color: 'var(--co-muted)', fontSize: 13, maxWidth: 360, lineHeight: 1.55, margin: 0 }}>
              GTM AI AUTOMATION STUDIO. WE BUILD REVENUE MACHINES FOR MODERN SALES TEAMS.
            </p>
          </div>
          {[
            { t: 'COMPANY', items: [['ABOUT', 'about.html'], ['PLAYBOOK', 'playbook.html'], ['BLOG', 'blog.html'], ['CONTACT', window.CO_BOOKING_URL || 'https://tidycal.com/coldocean/15-minute-meeting']] },
            { t: 'WORK',    items: [['CASE STUDIES', 'case-studies.html'], ['BRAND', 'brand-guidelines.html']] },
            { t: 'LEGAL',   items: [['PRIVACY POLICY', 'privacy.html'], ['COOKIE POLICY', 'cookies.html'], ['TERMS & CONDITIONS', 'terms.html']] },
          ].map((col) => (
            <div key={col.t}>
              <div className="co-mono" style={{ fontSize: 10, letterSpacing: '0.18em', color: 'var(--co-flame)', marginBottom: 14 }}>{col.t}</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                {col.items.map(([label, href]) => (
                  <a key={label} href={href} className="co-mono" style={{ color: 'var(--co-ink-soft)', textDecoration: 'none', fontSize: 12, letterSpacing: '0.08em' }}>{label}</a>
                ))}
              </div>
            </div>
          ))}
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', paddingTop: 20, borderTop: '1px solid var(--co-line)' }}>
          <div className="co-mono" style={{ fontSize: 11, color: 'var(--co-muted)', letterSpacing: '0.12em' }}>
            © 2026 COLDOCEAN · AMSTERDAM · LONDON
          </div>
          <div className="co-mono" style={{ fontSize: 11, color: 'var(--co-muted)', letterSpacing: '0.12em' }}>
            ENGINEERED FOR <span style={{ color: 'var(--co-flame)' }}>PIPELINE</span>
          </div>
        </div>
      </div>
    </footer>
  );
}

window.CoStack = CoStack;
window.CoCaseStudies = CoCaseStudies;
window.CoStats = CoStats;
window.CoTestimonials = CoTestimonials;
window.CoCTA = CoCTA;
window.CoFooter = CoFooter;