// Octodus Hero — editorial, type-driven. Chat in its own section.
// OctodusLogo and SiteNav are provided by src/shared/site-chrome.jsx.

/* ------------------------------------------------------------- *
   STATUS TICKER — three rotating "what octodus is doing" lines
 * ------------------------------------------------------------- */
const TICKER = [
  { time: 'now',        what: 'drafting a Telegram post for Marco',   arm: 'design' },
  { time: 'just now',   what: 'shipping prompts for a Blender plugin', arm: 'code' },
  { time: '12 min ago', what: 'cleaned /tmp/sessions · 27 GB → 124 MB',   arm: 'auto' },
  { time: '2 min ago',  what: 'coordinating $240K grant with 5 partners', arm: 'plan' },
  { time: '4 min ago',  what: 'briefed Maya on the 17:00 call',         arm: 'plan' },
  { time: 'just now',   what: 'scheduling a content batch for 10 clients', arm: 'auto' },
];
const ARM_COLOR = { design: 'var(--t-design)', code: 'var(--t-code)', plan: 'var(--t-plan)', auto: 'var(--t-auto)', research: 'var(--t-research)', sales: 'var(--t-sales)' };

function StatusTicker() {
  const [i, setI] = React.useState(0);
  React.useEffect(() => {
    const t = setInterval(() => setI((n) => (n + 1) % TICKER.length), 2800);
    return () => clearInterval(t);
  }, []);

  return (
    <div className="ticker" role="status" aria-live="polite">
      <span className="ticker-dot" />
      <span className="ticker-label">live</span>
      <span className="ticker-sep">·</span>
      <div className="ticker-roll">
        {TICKER.map((t, idx) => (
          <span
            key={idx}
            className={`ticker-line ${idx === i ? 'on' : 'off'}`}
            style={{ '--arm-color': ARM_COLOR[t.arm] }}
          >
            <span className="ticker-time">{t.time}</span>
            <span className="ticker-what">{t.what}</span>
          </span>
        ))}
      </div>

      <style>{`
        .ticker {
          display: inline-flex;
          align-items: center;
          gap: 12px;
          padding: 10px 18px;
          height: 44px;
          background: var(--accent-tint-04);
          border: 1px solid var(--accent-tint-22);
          border-radius: 999px;
          font-family: var(--font-mono);
          font-size: 13px;
          color: var(--text-secondary);
          backdrop-filter: blur(10px);
          overflow: hidden;
          max-width: 100%;
        }
        .ticker-dot {
          width: 8px; height: 8px; border-radius: 50%;
          background: var(--accent-light);
          box-shadow: 0 0 12px var(--accent-light);
          animation: pulse-dot 1.4s ease-in-out infinite;
          flex-shrink: 0;
        }
        @keyframes pulse-dot {
          0%, 100% { opacity: 1; transform: scale(1); }
          50% { opacity: 0.4; transform: scale(0.7); }
        }
        .ticker-label {
          color: var(--accent-light);
          font-weight: 600;
          letter-spacing: 0.18em;
          text-transform: uppercase;
          font-size: 10.5px;
          flex-shrink: 0;
        }
        .ticker-sep { color: var(--text-muted); flex-shrink: 0; }
        .ticker-roll {
          position: relative;
          height: 18px;
          flex: 1;
          min-width: 0;
          overflow: hidden;
        }
        .ticker-line {
          position: absolute;
          inset: 0;
          display: flex; align-items: center; gap: 8px;
          transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1), opacity 400ms;
          white-space: nowrap;
        }
        .ticker-line.off  { transform: translateY(20px); opacity: 0; }
        .ticker-line.on   { transform: translateY(0);    opacity: 1; }
        .ticker-time {
          color: var(--arm-color, var(--accent-light));
          font-weight: 600;
          flex-shrink: 0;
        }
        .ticker-what {
          color: var(--text);
          overflow: hidden;
          text-overflow: ellipsis;
        }
      `}</style>
    </div>
  );
}

/* ------------------------------------------------------------- *
   BACKDROP — large faded octopus + sparse tentacle peeks
 * ------------------------------------------------------------- */
function HeroBackdrop() {
  return (
    <div className="hero-backdrop" aria-hidden="true">
      {/* Soft accent glow */}
      <div className="hero-glow-a" />
      <div className="hero-glow-b" />

      {/* Architectural dot grid — quiet, no cartoons */}
      <svg className="hero-dotgrid" viewBox="0 0 1400 900" preserveAspectRatio="xMidYMid slice">
        <defs>
          <pattern id="dots" x="0" y="0" width="40" height="40" patternUnits="userSpaceOnUse">
            <circle cx="2" cy="2" r="1" fill="var(--accent-tint-22)" />
          </pattern>
          <radialGradient id="dotMask" cx="50%" cy="40%" r="60%">
            <stop offset="0%" stopColor="#fff" stopOpacity="1" />
            <stop offset="100%" stopColor="#fff" stopOpacity="0" />
          </radialGradient>
          <mask id="m">
            <rect width="1400" height="900" fill="url(#dotMask)" />
          </mask>
        </defs>
        <rect width="1400" height="900" fill="url(#dots)" mask="url(#m)" />
      </svg>

      {/* Subtle vertical guide lines */}
      <div className="hero-guide hero-guide-l" />
      <div className="hero-guide hero-guide-r" />

      <style>{`
        .hero-backdrop {
          position: absolute; inset: 0; overflow: hidden; pointer-events: none;
          z-index: 0;
        }
        .hero-glow-a {
          position: absolute;
          width: 900px; height: 900px; border-radius: 50%;
          top: -200px; left: -300px;
          background: radial-gradient(circle, var(--accent-soft) 0%, transparent 65%);
          filter: blur(40px);
        }
        .hero-glow-b {
          position: absolute;
          width: 800px; height: 800px; border-radius: 50%;
          bottom: -300px; right: -200px;
          background: radial-gradient(circle, var(--accent-soft) 0%, transparent 60%);
          filter: blur(40px);
          opacity: 0.7;
        }
        .hero-dotgrid {
          position: absolute; inset: 0; width: 100%; height: 100%;
          opacity: 0.5;
        }
        .hero-guide {
          position: absolute;
          top: 0; bottom: 0;
          width: 1px;
          background: linear-gradient(180deg, transparent, var(--border) 20%, var(--border) 80%, transparent);
          opacity: 0.5;
        }
        .hero-guide-l { left: max(32px, calc(50% - 600px)); }
        .hero-guide-r { right: max(32px, calc(50% - 600px)); }
        @media (max-width: 1240px) {
          .hero-guide { display: none; }
        }
      `}</style>
    </div>
  );
}

function Hero() {
  return (
    <header className="hero" id="top">
      <HeroBackdrop />

      <div className="container hero-body">
        {/* Eyebrow */}
        <div className="hero-eyebrow" data-reveal>
          <span className="hero-eyebrow-dot" />
          <span>AI coworker · live in Telegram</span>
        </div>

        {/* THE HEADLINE — affirmative identity, stagger-in on load */}
        <h1 className="hero-h1" data-stagger>
          <span className="hero-h1-row" style={{'--i': 0}}>An AI coworker.</span>
          <span className="hero-h1-row hero-h1-em" style={{'--i': 1}}><em>Lives in your chat.</em></span>
          <span className="hero-h1-row hero-h1-mute" style={{'--i': 2}}>Ships real work.</span>
        </h1>

        {/* deck — punchy startup tone */}
        <p className="hero-deck" data-reveal>
          Voice notes, photos, panicked midnight pings — Octodus turns them into
          shipped content, code, design and coordination, right inside the chat
          your team already uses.
        </p>

        {/* CTAs */}
        <div className="hero-ctas" data-reveal>
          <a className="btn btn-primary" href="https://calend.ly/emdx" target="_blank" rel="noopener">
            {Icons.telegram({ width: 18, height: 18 })} Hire octodus
            {Icons.arrow({ width: 16, height: 16 })}
          </a>
          <a className="btn btn-ghost" href="#chat">
            <span className="play-icon" /> See it work
          </a>
        </div>

        {/* Live ticker */}
        <div className="hero-ticker-row">
          <StatusTicker />
        </div>

        {/* Big proof strip — three metric chunks */}
        <div className="hero-strip" data-stagger>
          <div className="hero-strip-cell" style={{'--i': 0}}>
            <div className="hero-strip-val">112</div>
            <div className="hero-strip-lbl">prompts shipped<br/>from a voice note</div>
          </div>
          <div className="hero-strip-cell" style={{'--i': 1}}>
            <div className="hero-strip-val">16</div>
            <div className="hero-strip-lbl">design revisions<br/>in one evening</div>
          </div>
          <div className="hero-strip-cell" style={{'--i': 2}}>
            <div className="hero-strip-val">3:14<span className="hero-strip-sm">am</span></div>
            <div className="hero-strip-lbl">self-healed disk<br/>27 GB → 124 MB</div>
          </div>
          <div className="hero-strip-cell" style={{'--i': 3}}>
            <div className="hero-strip-val">10<span className="hero-strip-sm">+</span></div>
            <div className="hero-strip-lbl">concurrent clients<br/>2× delivery speed</div>
          </div>
        </div>

        <a href="#chat" className="hero-scroll-cue" aria-label="Scroll to see the chat" style={{ display: 'none' }}>
          <span>Watch it work</span>
          <span className="hero-scroll-arrow">↓</span>
        </a>
      </div>

      <style>{`
        .hero {
          position: relative;
          overflow: hidden;
          padding-bottom: 80px;
        }
        .hero-body {
          padding-top: 80px;
          padding-bottom: 40px;
          position: relative;
          z-index: 2;
          max-width: 1100px;
          margin: 0 auto;
        }

        .hero-eyebrow {
          display: inline-flex; align-items: center; gap: 10px;
          padding: 8px 16px;
          border-radius: 999px;
          background: var(--accent-tint-06);
          border: 1px solid var(--accent-tint-22);
          font-family: var(--font-mono);
          font-size: 12px;
          color: var(--text-secondary);
          margin-bottom: 40px;
          letter-spacing: 0.05em;
        }
        .hero-eyebrow-dot {
          width: 6px; height: 6px;
          border-radius: 50%;
          background: var(--accent-light);
          box-shadow: 0 0 8px var(--accent-light);
          animation: pulse-dot 2s ease-in-out infinite;
        }

        /* THE HEADLINE */
        .hero-h1 {
          font-family: var(--font-heading);
          font-size: clamp(3.6rem, 11vw, 9.5rem);
          font-weight: 800;
          line-height: 0.9;
          letter-spacing: -0.05em;
          margin: 0;
        }
        .hero-h1-row {
          display: block;
        }
        .hero-h1-em em {
          font-style: normal;
          background: linear-gradient(110deg, var(--accent-light) 0%, var(--accent) 50%, var(--accent-light) 100%);
          background-size: 200% 100%;
          -webkit-background-clip: text;
          background-clip: text;
          color: transparent;
          animation: shine 7s linear infinite;
        }
        @keyframes shine {
          0%, 100% { background-position: 0% 0; }
          50% { background-position: 200% 0; }
        }
        .hero-h1-mute {
          color: var(--text-muted);
          font-weight: 500;
        }

        .hero-deck {
          margin-top: 28px;
          max-width: 620px;
          font-size: clamp(17px, 1.6vw, 22px);
          line-height: 1.5;
          color: var(--text-secondary);
          text-wrap: balance;
        }

        .hero-ctas {
          margin-top: 40px;
          display: flex; gap: 14px; flex-wrap: wrap;
        }
        .hero-ctas .btn { height: 56px; padding: 0 26px; font-size: 16px; }
        .play-icon {
          width: 0; height: 0;
          border-style: solid;
          border-width: 6px 0 6px 9px;
          border-color: transparent transparent transparent currentColor;
          display: inline-block;
        }

        .hero-ticker-row {
          margin-top: 28px;
        }

        .hero-strip {
          margin-top: 80px;
          padding-top: 32px;
          border-top: 1px solid var(--border);
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 0;
        }
        .hero-strip-cell {
          padding-right: 28px;
        }
        .hero-strip-cell + .hero-strip-cell {
          padding-left: 28px;
          border-left: 1px solid var(--border);
        }
        .hero-strip-val {
          font-family: var(--font-heading);
          font-size: clamp(2.4rem, 4vw, 3.4rem);
          font-weight: 700;
          letter-spacing: -0.04em;
          line-height: 1;
          color: var(--text);
        }
        .hero-strip-sm {
          font-size: 0.5em;
          color: var(--text-muted);
          margin-left: 2px;
          vertical-align: 0.4em;
        }
        .hero-strip-lbl {
          margin-top: 12px;
          font-size: 13px;
          color: var(--text-muted);
          line-height: 1.5;
          font-family: var(--font-mono);
          letter-spacing: 0.01em;
        }
        @media (max-width: 880px) {
          .hero-strip { grid-template-columns: repeat(2, 1fr); gap: 24px 0; }
          .hero-strip-cell { padding: 0 16px; }
          .hero-strip-cell + .hero-strip-cell { border-left: none; padding-left: 16px; }
          .hero-strip-cell:nth-child(odd) { border-right: 1px solid var(--border); }
        }

        .hero-scroll-cue {
          position: absolute;
          left: 50%;
          bottom: 24px;
          transform: translateX(-50%);
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 6px;
          font-family: var(--font-mono);
          font-size: 11px;
          color: var(--text-muted);
          letter-spacing: 0.15em;
          text-transform: uppercase;
          opacity: 0.7;
          transition: opacity 220ms var(--ease-out);
        }
        .hero-scroll-cue:hover { opacity: 1; }
        .hero-scroll-arrow {
          font-size: 16px;
          color: var(--accent-light);
          animation: arrow-bob 1.8s ease-in-out infinite;
        }
        @keyframes arrow-bob {
          0%, 100% { transform: translateY(0); opacity: 0.6; }
          50% { transform: translateY(6px); opacity: 1; }
        }

        @media (max-width: 720px) {
          .hero { min-height: auto; padding-bottom: 60px; }
          .hero-scroll-cue { display: none; }
        }
      `}</style>
    </header>
  );
}

Object.assign(window, { Hero });