// ColdOcean — BOLD Hero: content starts at top, rich right panel

function Mark({ letter, bg = '#ff5a1f', fg = '#0a0a0a' }) {
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      width: 30, height: 30, borderRadius: 4,
      background: bg, color: fg,
      fontFamily: 'var(--co-font-mono)', fontSize: 12, fontWeight: 700,
      letterSpacing: '-0.02em', flexShrink: 0,
    }}>{letter}</span>
  );
}

function Arrow({ size = 14 }) {
  return (
    <svg className="arrow" width={size} height={size} viewBox="0 0 16 16" fill="none">
      <path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}

function CoLogo() {
  return (
    <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
      <rect x="1" y="1" width="30" height="30" rx="3" stroke="#ff5a1f" strokeWidth="1.5"/>
      <rect x="7" y="7" width="8" height="8" fill="#ff5a1f"/>
      <rect x="17" y="7" width="8" height="8" fill="#f5f2ec" opacity="0.3"/>
      <rect x="7" y="17" width="8" height="8" fill="#f5f2ec" opacity="0.3"/>
      <rect x="17" y="17" width="8" height="8" fill="#ff5a1f"/>
    </svg>
  );
}

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

function CoNav({ active, absolute = true }) {
  const links = [
    { k: 'work',     l: 'WORK',     href: 'case-studies.html' },
    { k: 'about',    l: 'ABOUT',    href: 'about.html' },
    { k: 'playbook', l: 'PLAYBOOK', href: 'playbook.html' },
    { k: 'blog',     l: 'BLOG',     href: 'blog.html' },
  ];
  return (
    <nav style={{
      position: absolute ? 'absolute' : 'sticky',
      top: 0, left: 0, right: 0, zIndex: 10,
      padding: '18px 40px',
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      borderBottom: '1px solid var(--co-line)',
      background: 'rgba(10,10,10,0.7)',
      backdropFilter: 'blur(10px)',
    }}>
      <a href="index.html" style={{ display: 'flex', alignItems: 'center', gap: 12, color: 'var(--co-ink)', textDecoration: 'none' }}>
        <CoLogo />
        <span className="co-display" style={{ fontSize: 18, textTransform: 'uppercase', letterSpacing: '-0.01em' }}>
          COLDOCEAN<span style={{ color: 'var(--co-flame)' }}>.IO</span>
        </span>
      </a>
      <div style={{ display: 'flex', gap: 32 }} className="co-mono">
        {links.map((item, i) => {
          const isActive = active === item.k;
          return (
            <a key={item.k} href={item.href} style={{
              color: isActive ? 'var(--co-flame)' : 'var(--co-ink-soft)',
              textDecoration: 'none',
              fontSize: 12, letterSpacing: '0.14em',
              paddingBottom: 4,
              borderBottom: isActive ? '1px solid var(--co-flame)' : '1px solid transparent',
            }}>
              <span style={{ color: 'var(--co-flame)' }}>{String(i+1).padStart(2,'0')} </span>{item.l}
            </a>
          );
        })}
      </div>
      <a href={CO_BOOKING_URL} target="_blank" rel="noreferrer" className="co-btn co-btn-primary" style={{ padding: '10px 18px', fontSize: 12 }}>
        BOOK A CALL <Arrow />
      </a>
    </nav>
  );
}

// ── Live terminal panel (right side, fills space with animated content) ──
function HeroTerminal() {
  const steps = React.useMemo(() => [
    { t: 'BOOT', cmd: '$ coldocean --init workflow', out: 'Loading agents ▸ Claude · n8n · OpenClaw' },
    { t: 'FETCH', cmd: '$ apollo.search --icp "seed saas eu"', out: '► 1,284 accounts identified' },
    { t: 'ENRICH', cmd: '$ blitzapi.enrich --signals all', out: '► 96.4% match rate · 14ms avg' },
    { t: 'THINK', cmd: '$ claude.research --account acme', out: '► Brief drafted · 4 angles ranked' },
    { t: 'ROUTE', cmd: '$ n8n.flow --run gtm-cascade', out: '► Deal created in HubSpot' },
    { t: 'SEND', cmd: '$ smartlead.dispatch --persona cfo', out: '► 428 sequences queued' },
    { t: 'LEARN', cmd: '$ supabase.log --reply positive', out: '► Model updated · +0.3% lift' },
  ], []);
  const [i, setI] = React.useState(0);
  React.useEffect(() => {
    const id = setInterval(() => setI((p) => (p + 1) % steps.length), 1400);
    return () => clearInterval(id);
  }, [steps.length]);

  // Visible window of last 4 entries
  const vis = [];
  for (let k = 3; k >= 0; k--) {
    const idx = (i - k + steps.length * 10) % steps.length;
    vis.push({ ...steps[idx], current: k === 0 });
  }

  return (
    <div style={{
      border: '1px solid var(--co-line)',
      background: 'rgba(10,10,10,0.72)',
      backdropFilter: 'blur(8px)',
      borderRadius: 4,
      overflow: 'hidden',
      fontFamily: 'var(--co-font-mono)',
      fontSize: 12,
      position: 'relative',
    }}>
      {/* Header bar */}
      <div style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '10px 14px',
        borderBottom: '1px solid var(--co-line)',
        background: 'var(--co-bg-2)',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <span style={{ width: 8, height: 8, borderRadius: '50%', background: 'var(--co-flame)', boxShadow: '0 0 6px var(--co-flame)' }} />
          <span style={{ color: 'var(--co-ink)', fontSize: 11, letterSpacing: '0.14em' }}>REVENUE_MACHINE.SH</span>
        </div>
        <span style={{ color: 'var(--co-muted)', fontSize: 10, letterSpacing: '0.16em' }}>LIVE · {String(i+1).padStart(2,'0')}/{String(steps.length).padStart(2,'0')}</span>
      </div>

      {/* Log */}
      <div style={{ padding: '12px 16px', display: 'flex', flexDirection: 'column' }}>
        {vis.map((s, k) => (
          <div key={`${i}-${k}`} style={{
            opacity: s.current ? 1 : 0.4 - k * 0.06,
            transition: 'opacity .4s',
            height: 42,
            flexShrink: 0,
            display: 'flex',
            flexDirection: 'column',
            justifyContent: 'center',
            gap: 3,
            overflow: 'hidden',
          }}>
            <div style={{ display: 'flex', gap: 10, alignItems: 'center', minWidth: 0 }}>
              <span style={{
                fontSize: 9, letterSpacing: '0.14em',
                padding: '2px 6px',
                color: s.current ? '#0a0a0a' : 'var(--co-ink-soft)',
                background: s.current ? 'var(--co-flame)' : 'transparent',
                border: s.current ? 'none' : '1px solid var(--co-line)',
                borderRadius: 2,
                minWidth: 52, textAlign: 'center', flexShrink: 0,
              }}>{s.t}</span>
              <span style={{ color: 'var(--co-ink)', fontSize: 11, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', minWidth: 0 }}>{s.cmd}</span>
            </div>
            <div style={{ color: 'var(--co-muted)', fontSize: 10, paddingLeft: 62, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
              <span style={{ color: s.current ? 'var(--co-acid)' : 'var(--co-muted)' }}>{s.out}</span>
              {s.current && <span className="co-caret" style={{ color: 'var(--co-flame)', marginLeft: 4 }}>▌</span>}
            </div>
          </div>
        ))}
      </div>

      {/* Footer meters */}
      <div style={{
        borderTop: '1px solid var(--co-line)',
        padding: '10px 14px',
        display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12,
        background: 'var(--co-bg-2)',
      }}>
        {[
          ['PIPELINE', '€42M', '+12%'],
          ['LEADS/D', '1.2M', '+4%'],
          ['LATENCY', '14ms', '−2%'],
        ].map(([k, v, d]) => (
          <div key={k}>
            <div style={{ fontSize: 9, color: 'var(--co-muted)', letterSpacing: '0.16em' }}>{k}</div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginTop: 2 }}>
              <span style={{ color: 'var(--co-ink)', fontSize: 15, fontFamily: 'var(--co-font-display)', letterSpacing: '-0.01em' }}>{v}</span>
              <span style={{ color: 'var(--co-acid)', fontSize: 9, letterSpacing: '0.1em' }}>{d}</span>
            </div>
          </div>
        ))}
      </div>

      <style>{`
        @keyframes co-blink { 0%,50%{opacity:1} 51%,100%{opacity:0} }
        .co-caret { animation: co-blink 0.9s step-end infinite; }
      `}</style>
    </div>
  );
}

function CoHero({ direction, tweaks }) {
  const isVariant = direction === 'variant';
  return (
    <section style={{
      position: 'relative',
      height: '100vh',
      maxHeight: 900,
      minHeight: 640,
      background: 'var(--co-bg)',
      overflow: 'hidden',
      borderBottom: '1px solid var(--co-line)',
    }}>
      <CoNav />

      {/* Particle network backdrop */}
      <div style={{ position: 'absolute', inset: 0, opacity: 0.7 }}>
        <ParticleNetwork
          density={tweaks.density}
          speed={tweaks.speed}
          showLabels={true}
          accent={isVariant ? '#e4ff3f' : '#ff5a1f'}
          accent2={isVariant ? '#ffa726' : '#ffa726'}
          ink="#f5f2ec"
        />
      </div>

      {/* Left-side vertical fade only (so content is always legible) */}
      <div style={{
        position: 'absolute', inset: 0,
        background: 'linear-gradient(90deg, rgba(10,10,10,0.9) 0%, rgba(10,10,10,0.4) 50%, rgba(10,10,10,0.7) 100%)',
        pointerEvents: 'none',
      }} />

      {/* Marquee under nav */}
      <div style={{
        position: 'absolute', top: 70, left: 0, right: 0,
        padding: '9px 0',
        borderBottom: '1px solid var(--co-line)',
        background: 'rgba(10,10,10,0.55)',
        backdropFilter: 'blur(8px)',
        zIndex: 5,
      }}>
        <div className="co-marquee">
          <div className="co-marquee-track">
            {Array.from({ length: 2 }).flatMap((_, j) => (
              ['◆ GTM AUTOMATION', 'AGENTS THAT SHIP', '◆ EU · UK · APAC', 'AI WORKFLOWS AT SCALE', '◆ BUILT IN DAYS NOT MONTHS', 'n8n · CLAUDE · OPENCLAW', '◆ 47 GTM TEAMS', '1.2M LEADS/DAY']
                .map((t, i) => (
                  <span key={`${j}-${i}`} className="co-mono" style={{
                    padding: '0 28px',
                    fontSize: 11, letterSpacing: '0.2em',
                    color: i % 2 === 0 ? 'var(--co-flame)' : 'var(--co-ink-soft)',
                    whiteSpace: 'nowrap',
                  }}>{t}</span>
                ))
            ))}
          </div>
        </div>
      </div>

      {/* Content — anchored to TOP (no blank space above) */}
      <div className="co-container" style={{
        position: 'relative',
        zIndex: 4,
        paddingTop: 118,
        paddingBottom: 40,
      }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 48, alignItems: 'start' }}>
          {/* Left — headline */}
          <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)' }} />
              GTM AI AUTOMATION · EST. 2024
            </div>
            <h1 className="co-h1" style={{ color: 'var(--co-ink)', marginBottom: 22 }}>
              WE BUILD <span style={{ color: 'var(--co-flame)' }}>REVENUE</span><br/>
              MACHINES <span style={{
                WebkitTextStroke: '1.5px var(--co-ink)',
                WebkitTextFillColor: 'transparent',
                color: 'transparent',
              }}>THAT NEVER SLEEP.</span>
            </h1>
            <p className="co-lead" style={{ color: 'var(--co-ink-soft)', marginBottom: 22, maxWidth: 540, fontSize: 15 }}>
              A GTM automation studio. We ship AI-agent workflows for modern revenue teams — pipeline, outbound, research, ops. Autonomous. End-to-end.
            </p>
            <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', marginBottom: 28 }}>
              <a className="co-btn co-btn-primary" href={CO_BOOKING_URL} 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>

            {/* Trusted by strip */}
            <div>
              <div className="co-mono" style={{ fontSize: 10, letterSpacing: '0.2em', color: 'var(--co-muted)', marginBottom: 10 }}>
                TRUSTED BY GTM TEAMS AT
              </div>
              <div style={{ display: 'flex', gap: 18, flexWrap: 'wrap', alignItems: 'center' }}>
                {['WATTLIFT', 'HEXUS.AI', 'LEADZEN', 'TERRANCONNECT', 'DBS'].map((c) => (
                  <span key={c} className="co-display" style={{
                    fontSize: 13, color: 'var(--co-ink-soft)',
                    letterSpacing: '0.02em',
                    opacity: 0.7,
                  }}>{c}</span>
                ))}
              </div>
            </div>
          </div>

          {/* Right — terminal + tool cluster */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            <HeroTerminal />

            {/* Tool tiles */}
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 8 }}>
              {[
                { l: 'CLAUDE', c: '#ff5a1f' },
                { l: 'n8n', c: '#e4ff3f' },
                { l: 'HUBSPOT', c: '#ffa726' },
                { l: 'APOLLO', c: '#f5f2ec' },
                { l: 'SUPABASE', c: '#ff5a1f' },
                { l: 'SALESFORCE', c: '#ffa726' },
                { l: 'OPENCLAW', c: '#e4ff3f' },
                { l: 'AIRTABLE', c: '#f5f2ec' },
              ].map((t) => (
                <div key={t.l} style={{
                  border: '1px solid var(--co-line)',
                  background: 'rgba(10,10,10,0.5)',
                  padding: '10px 8px',
                  textAlign: 'center',
                  fontFamily: 'var(--co-font-mono)',
                  fontSize: 9,
                  letterSpacing: '0.14em',
                  color: 'var(--co-ink-soft)',
                  borderRadius: 2,
                  position: 'relative',
                  transition: 'border-color .2s, color .2s',
                }}>
                  <span style={{
                    display: 'inline-block', width: 6, height: 6, borderRadius: 1,
                    background: t.c, marginRight: 6, verticalAlign: 'middle',
                  }} />
                  {t.l}
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      {/* Corner markers */}
      <HeroCorner top={110} left={40} />
      <HeroCorner top={110} right={40} flip />
      <HeroCorner bottom={40} left={40} vflip />
      <HeroCorner bottom={40} right={40} flip vflip />

      {/* Scroll hint */}
      <div className="co-mono" style={{
        position: 'absolute', bottom: 18, left: '50%', transform: 'translateX(-50%)',
        fontSize: 10, letterSpacing: '0.25em', color: 'var(--co-muted)',
        display: 'flex', alignItems: 'center', gap: 10,
        zIndex: 5,
      }}>
        SCROLL
        <span style={{ width: 28, height: 1, background: 'var(--co-flame)' }} />
      </div>
    </section>
  );
}

function HeroCorner({ top, bottom, left, right, flip, vflip }) {
  const s = { position: 'absolute', width: 14, height: 14, borderColor: 'var(--co-flame)', borderStyle: 'solid', borderWidth: 0, zIndex: 6 };
  if (top != null) s.top = top; if (bottom != null) s.bottom = bottom;
  if (left != null) s.left = left; if (right != null) s.right = right;
  s.borderTopWidth = vflip ? 0 : 2;
  s.borderBottomWidth = vflip ? 2 : 0;
  s.borderLeftWidth = flip ? 0 : 2;
  s.borderRightWidth = flip ? 2 : 0;
  return <div style={s} />;
}

window.CoNav = CoNav;
window.CoHero = CoHero;
window.CoLogo = CoLogo;
window.Mark = Mark;
window.Arrow = Arrow;
window.CO_BOOKING_URL = CO_BOOKING_URL;