// Variation A — Terminal / Typewriter hero
const { useState: useStateA, useEffect: useEffectA } = React;

function HeroTerminal() {
  const [stage, setStage] = useStateA(0);
  const [line1] = useTypewriter("$ whoami", { speed: 40, startDelay: 400, enabled: stage >= 0 });
  const [line2, done2] = useTypewriter("crime-of-curiosity :: offensive security research & consulting", { speed: 14, startDelay: 1000, enabled: stage >= 0 });
  const [line3, done3] = useTypewriter("$ cat ./manifesto.txt | head -n 3", { speed: 28, startDelay: 2600, enabled: stage >= 1 });
  const [line4] = useTypewriter("  we explore...            and you call us criminals.\n  we seek after knowledge. and you call us criminals.\n  my crime is that of curiosity.", { speed: 8, startDelay: 3800, enabled: stage >= 2 });

  useEffectA(() => {
    if (done2) setStage(1);
    if (done3) setStage(2);
  }, [done2, done3]);

  return (
    <section className="hero-terminal">
      <Scanlines opacity={0.05} />
      <div className="term-chrome">
        <div className="term-dots">
          <span /><span /><span />
        </div>
        <div className="term-title">tty0 — ssh operator@crimeofcuriosity.sh</div>
        <div className="term-meta">{new Date().toISOString().slice(0,19).replace('T',' ')}Z</div>
      </div>

      <div className="term-body">
        <pre className="term-line">{line1}{stage === 0 && <Caret />}</pre>
        <pre className="term-line term-out">{line2}</pre>
        {stage >= 1 && <pre className="term-line">{line3}{stage === 1 && <Caret />}</pre>}
        {stage >= 2 && <pre className="term-line term-manifesto">{line4}<Caret /></pre>}
      </div>

      <div className="term-footer">
        <div className="term-wordmark">
          <span className="wm-brack">[</span>
          crime<span className="wm-dot">·</span>of<span className="wm-dot">·</span>curiosity
          <span className="wm-brack">]</span>
        </div>
        <div className="term-tag">offensive security · est. 2015 · operators, not vendors</div>
      </div>
    </section>
  );
}

window.HeroTerminal = HeroTerminal;