/* Hero — spotlight cursor, animated terminal with real dbpilot output */

const HERO_LINES = [
  { t: 800,  html: `<span class="prompt">$</span><span class="cmd">dbpilot detect</span>` },
  { t: 1200, html: `<span class="dim">  scanning cluster prod-eu-west-1 for PostgreSQL instances...</span>` },
  { t: 800,  html: `<span class="ok">✓</span><span class="info"> Found <b style="color:var(--fg)">3</b> PostgreSQL instances across <b style="color:var(--fg)">2</b> namespaces</span>` },
  { t: 250,  html: `  <span class="dim">├</span> <span style="color:var(--fg)">app/postgres-main</span>      <span class="dim">pg 16.2</span>   <span class="ok">reachable</span>` },
  { t: 200,  html: `  <span class="dim">├</span> <span style="color:var(--fg)">app/postgres-events</span>    <span class="dim">pg 15.6</span>   <span class="ok">reachable</span>` },
  { t: 200,  html: `  <span class="dim">└</span> <span style="color:var(--fg)">billing/postgres-main</span>  <span class="dim">pg 16.1</span>   <span class="ok">reachable</span>` },
  { t: 400,  html: `<span class="dim">  → config written to ~/.config/dbpilot/backup.yaml</span>` },
  { t: 1000, html: `&nbsp;` },
  { t: 0,    html: `<span class="prompt">$</span><span class="cmd">dbpilot deploy myapp</span>` },
  { t: 900,  html: `<span class="ok">✓</span><span class="info">  app/postgres-main     (app/created)</span>` },
  { t: 300,  html: `<span class="ok">✓</span><span class="info">  app/postgres-events   (app/created)</span>` },
  { t: 300,  html: `<span class="ok">✓</span><span class="info">  billing/postgres-main (billing/created)</span>` },
  { t: 300,  html: `&nbsp;` },
  { t: 0,    html: `<span class="dim">  3 CronJob(s) deployed.</span>` },
  { t: 1000, html: `&nbsp;` },
  { t: 0,    html: `<span class="prompt">$</span><span class="cmd">dbpilot backup myapp run --wait</span>` },
  { t: 800,  html: `<span class="arrow">→</span> <span class="info">dbpilot-postgres-main</span>     <span class="ok">✓</span> <span class="dim">done</span>` },
  { t: 500,  html: `<span class="arrow">→</span> <span class="info">dbpilot-postgres-events</span>   <span class="ok">✓</span> <span class="dim">done</span>` },
  { t: 500,  html: `<span class="arrow">→</span> <span class="info">dbpilot-billing-main</span>      <span class="ok">✓</span> <span class="dim">done</span>` },
];

function HeroTerminal() {
  const [lines, setLines] = useState([]);

  useEffect(() => {
    let cancelled = false;
    let i = 0;
    const next = () => {
      if (cancelled) return;
      if (i >= HERO_LINES.length) {
        setTimeout(() => {
          if (!cancelled) { setLines([]); i = 0; setTimeout(next, 600); }
        }, 4000);
        return;
      }
      const line = HERO_LINES[i];
      setLines((prev) => [...prev, line.html]);
      i++;
      setTimeout(next, line.t);
    };
    const t = setTimeout(next, 600);
    return () => { cancelled = true; clearTimeout(t); };
  }, []);

  return (
    <div className="term">
      <div className="term-head">
        <span className="term-dot r"></span>
        <span className="term-dot y"></span>
        <span className="term-dot g"></span>
        <span className="term-title">~ dbpilot — production</span>
        <div className="term-tabs">
          <button className="term-tab active">k8s</button>
          <button className="term-tab">logs</button>
        </div>
      </div>
      <div className="term-body" style={{ minHeight: 420 }}>
        {lines.map((l, idx) => (
          <span key={idx} className="term-line" dangerouslySetInnerHTML={{ __html: l }} />
        ))}
        <span className="cursor"></span>
      </div>
    </div>
  );
}

function Hero() {
  const heroRef = useRef(null);
  useMouseTrack(heroRef);

  return (
    <section className="hero" ref={heroRef}>
      <div className="hero-grid-bg"></div>
      <div className="hero-aurora"></div>
      <div className="hero-spotlight"></div>

      <div className="container">
        <div className="hero-content">
          <Reveal>
            <span className="eyebrow">
              <span className="dot"></span>
              v1.0 · open source · MIT
            </span>
          </Reveal>

          <Reveal threshold={0.05}>
            <h1 className="hero-headline">
              Backups Postgres K8s,<br />
              <span className="accent">sans toucher au cluster.</span>
            </h1>
          </Reveal>

          <Reveal>
            <p className="hero-sub">
              dbpilot détecte tes instances PostgreSQL dans Kubernetes, génère la config
              et déploie des CronJobs qui font <code style={{fontFamily:'var(--font-mono)',fontSize:'0.9em'}}>pg_dump → S3</code>.
              Aucun sidecar, aucune modification de pod.
            </p>
          </Reveal>

          <Reveal>
            <div className="hero-cta">
              <a href="#install" className="btn btn-primary">
                Démarrer en 30 secondes <Icon.Arrow />
              </a>
              <a href="https://github.com/theo-mrn/pgpilot" className="btn btn-ghost">
                <Icon.Github />
                Star sur GitHub
              </a>
            </div>
          </Reveal>

          <Reveal>
            <div className="hero-meta">
              <span><span className="ok">●</span>&nbsp;&nbsp;PostgreSQL 14 · 15 · 16 · 17</span>
              <span><span className="ok">●</span>&nbsp;&nbsp;Aucun sidecar dans le cluster</span>
              <span><span className="ok">●</span>&nbsp;&nbsp;S3 · MinIO · tout S3-compatible</span>
            </div>
          </Reveal>
        </div>

        <Reveal threshold={0.05}>
          <div className="hero-term-wrap">
            <div className="hero-term">
              <HeroTerminal />
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

window.Hero = Hero;