// First-load curtain — black overlay with Solo wordmark fading in/out.
// Fires once per browser session (sessionStorage).
// Total runtime: ~1.6 seconds. Never blocks page rendering — the page is
// fully loaded behind it.

function HomeCurtain() {
  // sessionStorage key prevents re-firing on every home-page visit within
  // the same browsing session.
  const [phase, setPhase] = useState(() => {
    if (typeof window === "undefined") return "done";
    if (sessionStorage.getItem("solo-curtain-seen")) return "done";
    return "mount"; // mount → in → hold → out → done
  });

  useEffect(() => {
    if (phase === "done") return;
    sessionStorage.setItem("solo-curtain-seen", "1");
    // Prevent body scroll while curtain is active.
    const prevOverflow = document.body.style.overflow;
    document.body.style.overflow = "hidden";

    const t1 = setTimeout(() => setPhase("in"),    20);
    const t2 = setTimeout(() => setPhase("hold"),  500);
    const t3 = setTimeout(() => setPhase("out"),   1100);
    const t4 = setTimeout(() => {
      setPhase("done");
      document.body.style.overflow = prevOverflow;
    }, 1700);
    return () => {
      [t1, t2, t3, t4].forEach(clearTimeout);
      document.body.style.overflow = prevOverflow;
    };
  }, [phase]);

  if (phase === "done") return null;

  // Wordmark visibility / scale by phase.
  // - mount: invisible, slightly small
  // - in/hold: visible, full size
  // - out: invisible (sliding up subtly), curtain still black
  const markVisible = phase === "in" || phase === "hold" || phase === "out";
  const markScale =
    phase === "mount" ? 0.94 :
    phase === "out"   ? 1.02 :
    1;
  const markOpacity =
    phase === "mount" ? 0 :
    phase === "out"   ? 0 :
    1;

  // Curtain opacity — black background fades out at the very end.
  const curtainOpacity = phase === "out" ? 0 : 1;

  return (
    <div
      aria-hidden
      style={{
        position: "fixed", inset: 0,
        background: "#000",
        opacity: curtainOpacity,
        transition: "opacity 600ms cubic-bezier(0.4, 0, 0.2, 1)",
        zIndex: 200,
        pointerEvents: phase === "out" ? "none" : "auto",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
      }}
    >
      <div style={{
        opacity: markOpacity,
        transform: `scale(${markScale})`,
        transition: "opacity 500ms cubic-bezier(0.4, 0, 0.2, 1), transform 700ms cubic-bezier(0.4, 0, 0.2, 1)",
        // Place the wordmark + small system tag together so they ease in as one element.
        display: "flex", flexDirection: "column", alignItems: "center", gap: 24,
      }}>
        {/* Solo wordmark — use the white logo asset we already have. */}
        <img
          src="assets/solo-logo-white.png"
          alt="Solo"
          style={{
            width: "clamp(180px, 24vw, 360px)",
            height: "auto",
            display: "block",
          }}
        />
        {/* Small system tag — adds the defence-tech micro-detail */}
        <div style={{
          fontFamily: "var(--font-body, 'Helvetica Neue', sans-serif)",
          fontSize: 10,
          letterSpacing: "0.32em",
          textTransform: "uppercase",
          color: "rgba(255,255,255,0.55)",
          fontWeight: 500,
        }}>
          Secure Beyond Limits · v1.0 · 2026
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { HomeCurtain });