// `#init` — interactive walkthrough of `npx sekura@latest init`.
// Mirrors the second-by-second flow in docs/distribution-model-plan.md
// "First-Time UX" so what you read here matches what you experience.

function CliInitFlow() {
  const { React } = window;
  const { useState, useEffect } = React;
  const [copied, setCopied] = useState(false);

  const cmd = 'npx sekura@latest init';

  const copy = () => {
    navigator.clipboard.writeText(cmd).then(
      () => {
        setCopied(true);
        setTimeout(() => setCopied(false), 1500);
      },
      () => {/* noop */}
    );
  };

  useEffect(() => {
    document.title = 'Sekura — npx sekura@latest init';
  }, []);

  const steps = [
    { t: '0s',  text: 'You run npx sekura@latest init' },
    { t: '2s',  text: 'We detect Claude Code, Cursor, VS Code, Windsurf — and register Sekura as an MCP server in each.' },
    { t: '4s',  text: 'Browser opens to sign in via OAuth (single click; most devs are already signed in to GitHub).' },
    { t: '15s', text: 'Token is stored in your OS keychain (keytar). Fallback: AES-256-GCM-encrypted JSON in ~/.config/sekura/.' },
    { t: '16s', text: 'Pick a repo from the list (Sekura GitHub App reads what you can already see).' },
    { t: '22s', text: '.github/workflows/sekura.yml is committed to that repo. SEKURA_TOKEN is set as a repo secret.' },
    { t: '25s', text: 'First scan dispatched on your runner — you get the GitHub Actions URL.' },
    { t: '27s', text: 'CLI exits. You can close the terminal. We notify you (email + inline in your IDE) when it completes.' },
  ];

  return (
    <div className="init-page">
      <header className="init-header">
        <a href="#" className="init-logo">SEKURA</a>
        <nav>
          <a href="#pricing">pricing</a>
          <a href="#cicd">ci/cd</a>
          <a href="#scan">try the demo</a>
        </nav>
      </header>

      <section className="init-hero">
        <h1>Get a security scan on your repo in 60 seconds.</h1>
        <p className="init-sub">
          Your code never leaves GitHub. The scanner runs in your own GitHub Actions runner.
          You don't supply an LLM key — we resell tokens at a flat margin.
        </p>

        <div className="init-cmd">
          <code>{cmd}</code>
          <button onClick={copy} aria-label="copy command">
            {copied ? '✓ copied' : 'copy'}
          </button>
        </div>

        <p className="init-fineprint">
          Node 18+ required. Works on macOS, Linux, Windows.
          Free tier covers public repos with 2M LLM tokens / month.
        </p>
      </section>

      <section className="init-timeline">
        <h2>What happens after you run it</h2>
        <ol>
          {steps.map((s, i) => (
            <li key={i}>
              <span className="init-time">t≈{s.t}</span>
              <span className="init-text">{s.text}</span>
            </li>
          ))}
        </ol>
      </section>

      <section className="init-after">
        <h2>From then on, every push and every PR auto-scans.</h2>
        <ul>
          <li>PR review comments inline on the lines we found issues on.</li>
          <li>SARIF uploaded to your repo's Security → Code Scanning tab.</li>
          <li>Pro tier: auto-fix-PRs follow up the review with proposed code changes.</li>
        </ul>
        <p>
          <a className="init-cta" href="#pricing">See pricing →</a>
        </p>
      </section>

      <window.SiteFooter />
    </div>
  );
}

window.CliInitFlow = CliInitFlow;