// ColdOcean — BOLD content sections

// ─── Pillars ──────────────────────────────────────────
function CoPillars() {
  const pillars = [
    {
      n: '01',
      title: 'OUTBOUND AGENTS',
      body: 'AI-SDRs that research, write, and send — orchestrated across Apollo, Smartlead, and Close. Every reply routed, every objection handled.',
      tags: ['APOLLO', 'CLAUDE', 'SMARTLEAD', 'CLOSE'],
    },
    {
      n: '02',
      title: 'PIPELINE INTELLIGENCE',
      body: 'Live account scoring, ICP refinement, and signal-based triggers flowing straight into your CRM. Sales sees the best 20 moves every morning.',
      tags: ['HUBSPOT', 'SALESFORCE', 'CLAY', 'ZOOMINFO'],
    },
    {
      n: '03',
      title: 'WORKFLOW ORCHESTRATION',
      body: 'Long-running n8n flows with Claude Code in the loop. Enrich, classify, decide, write, post — a full GTM ops layer running 24/7.',
      tags: ['n8n', 'CLAUDE CODE', 'OPENCLAW'],
    },
    {
      n: '04',
      title: 'DATA INFRASTRUCTURE',
      body: 'One warehouse for every touchpoint. Supabase + Airtable + Vercel, wired for real-time reads from your dashboards and agents alike.',
      tags: ['SUPABASE', 'AIRTABLE', 'VERCEL', 'BLITZAPI'],
    },
  ];

  return (
    <section id="systems" className="co-section">
      <div className="co-container">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 60, marginBottom: 64, alignItems: 'end' }}>
          <div>
            <div style={{ marginBottom: 24 }}>
              <span className="co-eyebrow"><span className="dot" /> WHAT WE DO</span>
            </div>
            <h2 className="co-h2">
              FOUR PILLARS.<br/>
              <span className="co-flame">ONE ENGINE.</span>
            </h2>
          </div>
          <p className="co-lead">
            Agents, automations, and infrastructure assembled into a single compounding system — tuned to your motion, not ours.
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 0, border: '1px solid var(--co-line)' }}>
          {pillars.map((p, i) => (
            <div key={p.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)',
              position: 'relative',
              transition: 'background .3s',
              minHeight: 320,
              display: 'flex', flexDirection: 'column',
            }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 28 }}>
                <span className="co-mono" style={{ color: 'var(--co-flame)', fontSize: 13, letterSpacing: '0.1em' }}>[ {p.n} ]</span>
                <span className="co-mono" style={{ color: 'var(--co-muted)', fontSize: 10, letterSpacing: '0.16em' }}>PILLAR</span>
              </div>
              <h3 className="co-h3" style={{ marginBottom: 16, fontSize: 28 }}>{p.title}</h3>
              <p style={{ color: 'var(--co-ink-soft)', fontSize: 15, lineHeight: 1.55, margin: '0 0 24px', flex: 1 }}>{p.body}</p>
              <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
                {p.tags.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>
      <style>{`.co-pillar:hover { background: var(--co-bg-2); }`}</style>
    </section>
  );
}

// ─── Use cases ────────────────────────────────────────
function CoUseCases() {
  const cases = [
    { title: 'AUTONOMOUS OUTBOUND',    body: 'Research → personalize → send → reply-route. No SDRs, no breakage.', metric: '8× REPLY RATE' },
    { title: 'ACCOUNT INTELLIGENCE',    body: "Daily signal digests for AEs. Who's hiring, raising, visiting your site.", metric: '42 MIN SAVED / DAY' },
    { title: 'REVOPS CLEANUP',         body: 'De-dupe, enrich, route. CRM hygiene on autopilot.', metric: '96% MATCH RATE' },
    { title: 'LEAD SCORING V2',        body: 'LLM-powered fit + intent + timing scoring that beats rules.', metric: '2.3× WIN-RATE' },
    { title: 'INBOUND QUALIFICATION',  body: 'Agent handles first-touch, books meetings, escalates when needed.', metric: '< 3 MIN RESPONSE' },
    { title: 'CHURN EARLY-WARNING',    body: 'Product + CRM signals fuse into retention plays per account.', metric: '18% SAVE RATE' },
  ];
  return (
    <section id="usecases" 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: 56, display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap', gap: 24 }}>
          <div>
            <div style={{ marginBottom: 24 }}>
              <span className="co-eyebrow"><span className="dot" /> USE CASES</span>
            </div>
            <h2 className="co-h2">BUILT FOR<br/>GTM MOTION.</h2>
          </div>
          <span className="co-tape">06 SYSTEMS · LIVE IN PRODUCTION</span>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, border: '1px solid var(--co-line)' }}>
          {cases.map((c, i) => (
            <div key={i} className="co-usecase" style={{
              padding: 32,
              background: 'var(--co-bg)',
              borderRight: (i + 1) % 3 !== 0 ? '1px solid var(--co-line)' : 'none',
              borderBottom: i < 3 ? '1px solid var(--co-line)' : 'none',
              display: 'flex', flexDirection: 'column', minHeight: 260,
              transition: 'background .3s, color .3s',
              position: 'relative',
            }}>
              <span className="co-mono" style={{ fontSize: 10, color: 'var(--co-muted)', letterSpacing: '0.18em', marginBottom: 20 }}>
                /{String(i+1).padStart(2,'0')} USE CASE
              </span>
              <h3 className="co-h3" style={{ fontSize: 22, marginBottom: 12 }}>{c.title}</h3>
              <p style={{ color: 'var(--co-ink-soft)', fontSize: 14, lineHeight: 1.55, flex: 1, margin: 0 }}>{c.body}</p>
              <div style={{ marginTop: 24, paddingTop: 16, borderTop: '1px dashed var(--co-line)' }}>
                <div className="co-mono" style={{ fontSize: 10, color: 'var(--co-muted)', letterSpacing: '0.16em', marginBottom: 4 }}>RESULT →</div>
                <div className="co-display" style={{ fontSize: 22, color: 'var(--co-flame)' }}>{c.metric}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
      <style>{`.co-usecase:hover { background: var(--co-surface); }`}</style>
    </section>
  );
}

// ─── Workflow demo ────────────────────────────────────
function CoWorkflow() {
  const [activeNode, setActiveNode] = React.useState(0);
  const [activeEdge, setActiveEdge] = React.useState(-1);

  const nodes = [
    { id: 0, x: 80,  y: 170, label: 'APOLLO',   sub: 'IDENTIFY ICP', kind: 'source' },
    { id: 1, x: 260, y: 100, label: 'CLAUDE',   sub: 'RESEARCH',     kind: 'agent' },
    { id: 2, x: 260, y: 240, label: 'BLITZAPI', sub: 'ENRICH',       kind: 'source' },
    { id: 3, x: 460, y: 170, label: 'n8n',      sub: 'ROUTE',        kind: 'workflow' },
    { id: 4, x: 660, y: 100, label: 'HUBSPOT',  sub: 'CREATE DEAL',  kind: 'crm' },
    { id: 5, x: 660, y: 240, label: 'SMARTLEAD', sub: 'SEND',        kind: 'outbound' },
    { id: 6, x: 860, y: 170, label: 'SUPABASE', sub: 'LEARN',        kind: 'data' },
  ];
  const edges = [[0,1],[0,2],[1,3],[2,3],[3,4],[3,5],[4,6],[5,6]];

  React.useEffect(() => {
    let i = 0;
    const id = setInterval(() => {
      i = (i + 1) % nodes.length;
      setActiveNode(i);
      setActiveEdge((i + edges.length - 1) % edges.length);
    }, 1000);
    return () => clearInterval(id);
  }, []);

  return (
    <section id="process" className="co-section">
      <div className="co-container">
        <div style={{ marginBottom: 48 }}>
          <div style={{ marginBottom: 24 }}>
            <span className="co-eyebrow"><span className="dot" /> LIVE WORKFLOW</span>
          </div>
          <h2 className="co-h2" style={{ maxWidth: 900 }}>
            ONE SIGNAL.<br/>
            <span className="co-flame">SEVEN AGENTS.</span> ZERO TOUCH.
          </h2>
        </div>

        <div style={{
          border: '1px solid var(--co-line)',
          background: 'var(--co-bg-2)',
          padding: 40,
          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="glow-orange">
                <feGaussianBlur stdDeviation="3" result="b"/>
                <feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
              </filter>
            </defs>

            {edges.map(([a, b], i) => {
              const A = nodes[a], B = nodes[b];
              const active = activeEdge === i || activeNode === a || activeNode === 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={active ? '#ff5a1f' : '#333'}
                    strokeWidth={active ? 2 : 1}
                    fill="none"
                    style={{ transition: 'stroke 0.4s, stroke-width 0.4s' }}
                  />
                  {active && (
                    <circle r="3" fill="#e4ff3f" filter="url(#glow-orange)">
                      <animateMotion dur="0.9s" repeatCount="indefinite" path={d} />
                    </circle>
                  )}
                </g>
              );
            })}

            {nodes.map((n) => {
              const active = activeNode === n.id;
              return (
                <g key={n.id}>
                  {active && (
                    <rect x={n.x - 52} y={n.y - 30} width="104" height="60" rx="3"
                      fill="none" stroke="#ff5a1f" strokeWidth="1.5" opacity="0.5">
                      <animate attributeName="width" values="104;120;104" dur="1.6s" repeatCount="indefinite"/>
                      <animate attributeName="x" values={`${n.x-52};${n.x-60};${n.x-52}`} dur="1.6s" repeatCount="indefinite"/>
                      <animate attributeName="opacity" values="0.5;0.1;0.5" dur="1.6s" repeatCount="indefinite"/>
                    </rect>
                  )}
                  <rect x={n.x - 44} y={n.y - 24} width="88" height="48" rx="2"
                    fill={active ? '#ff5a1f' : '#141414'}
                    stroke={active ? '#ff5a1f' : '#333'}
                    strokeWidth="1"
                    style={{ transition: 'fill 0.3s, stroke 0.3s' }}
                  />
                  <text x={n.x} y={n.y - 2} textAnchor="middle" fontFamily="Archivo Black, sans-serif" fontSize="11"
                    fill={active ? '#0a0a0a' : '#f5f2ec'} style={{ transition: 'fill 0.3s', letterSpacing: '-0.01em' }}>
                    {n.label}
                  </text>
                  <text x={n.x} y={n.y + 12} textAnchor="middle" fontFamily="JetBrains Mono, monospace" fontSize="8"
                    fill={active ? 'rgba(10,10,10,0.7)' : '#7a7468'} style={{ transition: 'fill 0.3s', letterSpacing: '0.1em' }}>
                    {n.sub}
                  </text>
                </g>
              );
            })}
          </svg>

          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 24, paddingTop: 20, borderTop: '1px solid var(--co-line)' }}>
            <div style={{ display: 'flex', gap: 28, fontSize: 11 }} className="co-mono">
              <span style={{ color: 'var(--co-ink-soft)', letterSpacing: '0.12em' }}>STATUS: <span style={{ color: 'var(--co-acid)' }}>● RUNNING</span></span>
              <span style={{ color: 'var(--co-muted)', letterSpacing: '0.12em' }}>UPTIME 99.98%</span>
            </div>
            <span className="co-mono" style={{ fontSize: 11, color: 'var(--co-muted)', letterSpacing: '0.12em' }}>
              → PROCESSING <span style={{ color: 'var(--co-flame)' }}>{nodes[activeNode].label}</span>
            </span>
          </div>
        </div>
      </div>
    </section>
  );
}

window.CoPillars = CoPillars;
window.CoWorkflow = CoWorkflow;
window.CoUseCases = CoUseCases;