// LiveScanReplay — hero composition. Headline, two-pane split, subcopy + CTA.

function LiveScanReplay({ tweaks }) {
  const { React } = window;
  const { useScanReplay, TerminalPane, AttackGraphPane } = window;

  const { terminalLines, graphState, counters, elapsedMs, loopMs,
          isPlaying, paused, speed, togglePause, setSpeed, restart,
          reduceMotion } = useScanReplay({
    startOffsetMs: tweaks.resetToZero ? 0 : undefined,
    typeCharsPerSec: tweaks.typeSpeed ?? 260,
  });

  return (
    <section className="hero" data-screen-label="01 Hero — Live Scan Replay">
      <div className="hero-noise" aria-hidden="true" />

      <header className="hero-nav">
        <div className="nav-brand">
          <img src="branding/sekura-logo.svg" alt="sekura" height="28" />
        </div>
        <nav className="nav-links">
          <a href="#">the story</a>
          <a href="#how">how it works</a>
          <a href="#team">team</a>
          <a href="#scan" className="nav-scan">scan your repo</a>
          <a href="#login" className="nav-login">log in</a>
        </nav>
      </header>

      <div className="hero-inner">
        <div className="hero-copy-top">
          <div className="hero-eyebrow">
            <span className="eyebrow-dot" />
            autonomous pentest agent · <span className="eyebrow-em">live demo</span>
          </div>
          <h1 className="hero-h1">
            proof of exploitation,<br />not probability.
          </h1>
        </div>

        <div className="hero-split">
          <div className="pane pane--terminal">
            <TerminalPane lines={terminalLines} elapsedMs={elapsedMs} loopMs={loopMs} />
          </div>
          <div className="pane pane--graph">
            <AttackGraphPane graphState={graphState} counters={counters}
              elapsedMs={elapsedMs} loopMs={loopMs} />
          </div>
        </div>

        <div className="hero-copy-bottom">
          <p className="hero-sub">
            point it at your repo. 52 tools, 14 agents, six phases,
            one critical chain — all without a human in the loop.
          </p>
          <div className="hero-cta-row">
            <a href="#scan" className="cta cta--primary">
              run it on your code <span className="cta-arrow">→</span>
            </a>
            <a href="#sample" className="cta cta--ghost">
              see the sample report
            </a>
          </div>
        </div>

        <div className="hero-controls">
          <button className="ctrl" onClick={togglePause} aria-label={paused ? 'play' : 'pause'}>
            {paused ? '▶' : '❚❚'}
          </button>
          <button className="ctrl" onClick={restart} aria-label="restart">↻</button>
          <div className="ctrl-speed">
            {[0.5, 1, 2, 4].map(s => (
              <button key={s} className={`ctrl-speed-btn ${speed === s ? 'is-active':''}`}
                onClick={() => setSpeed(s)}>{s}×</button>
            ))}
          </div>
          {reduceMotion && <span className="ctrl-reduce">reduced motion · static snapshot</span>}
        </div>
      </div>
    </section>
  );
}

window.LiveScanReplay = LiveScanReplay;