// 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" />

      <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. Get back a short, ranked list of exploitable
            findings — each with a working proof, not a severity score.
            16 agents · 50+ tools · seven phases · no 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="/init/" className="cta cta--ghost">
              install the CLI <span className="cta-arrow">→</span>
            </a>
          </div>
        </div>

      </div>
    </section>
  );
}

window.LiveScanReplay = LiveScanReplay;