// intro.jsx — Opening wordmark animation, then a downward wipe to the hero.

const { useEffect, useState } = React;

function CinematicIntro({ onDone }) {
  const SEEN = "kavnet_intro_v10";
  const reduce = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
  const seen = (() => { try { return sessionStorage.getItem(SEEN) === "1"; } catch (e) { return false; } })();
  const [visible, setVisible] = useState(!seen && !reduce);
  const [phase, setPhase] = useState(0);   // 0 black · 1 KAV flies in · 2 suffix · 3 sub · 4 exit
  const [exiting, setExiting] = useState(false);

  useEffect(() => { if (!visible) { onDone && onDone(); } /* eslint-disable-next-line */ }, []);

  useEffect(() => {
    if (!visible || exiting) return;
    document.body.classList.add("intro-lock");
    const ts = [
      setTimeout(() => setPhase(1), 80),
      setTimeout(() => setPhase(2), 1800),
      setTimeout(() => setPhase(3), 2400),
      setTimeout(() => setPhase(4), 3200),
      setTimeout(() => dismiss(),    3500),
    ];
    return () => { ts.forEach(clearTimeout); document.body.classList.remove("intro-lock"); };
  }, [visible, exiting]);

  function dismiss() {
    if (exiting) return;
    setExiting(true);
    document.body.classList.remove("intro-lock");
    setTimeout(() => {
      try { sessionStorage.setItem(SEEN, "1"); } catch (e) {}
      setVisible(false);
      onDone && onDone();
    }, 1100);
  }

  useEffect(() => {
    if (!visible) return;
    const h = (e) => { if (e.key === "Escape" || e.key === "Enter" || e.key === " ") dismiss(); };
    window.addEventListener("keydown", h);
    return () => window.removeEventListener("keydown", h);
  }, [visible, exiting]);

  if (!visible) return null;
  return (
    <div className={`cintro phase-${phase} ${exiting ? "cintro-exit" : ""}`} aria-hidden="true">
      <span className="cintro-blip cintro-blip-1" />
      <span className="cintro-blip cintro-blip-2" />
      <span className="cintro-blip cintro-blip-3" />
      <div className="cintro-wordmark">
        <span className="cw-letter cw-K">K</span>
        <span className="cw-letter cw-A">A</span>
        <span className="cw-letter cw-V">V</span>
        <span className="cw-suffix">·NETWORK</span>
      </div>
      <div className="cintro-sub">
        <span>A holding company</span>
      </div>
    </div>
  );
}

window.CinematicIntro = CinematicIntro;