// Splash / loading screen — animated logo, drifting brand blobs, filling
// progress bar and a tagline; then a sleek scale+blur dissolve to reveal the
// site. Shows once per session (first visit); internal navigation uses the
// page dissolve instead. Fires "jmk:splash-hidden" so the hero can time itself.
function Splash() {
  const firstVisit = (typeof window !== "undefined") ? window.__jmkFirstVisit !== false : true;
  const [visible, setVisible] = React.useState(firstVisit);
  const [fading, setFading] = React.useState(false);

  React.useEffect(() => {
    const signal = () => {
      try { window.__jmkSplashHidden = true; window.dispatchEvent(new CustomEvent("jmk:splash-hidden")); } catch (e) {}
    };
    if (!firstVisit) { signal(); return; }

    const MIN_MS = 1500;
    const start = Date.now();
    const finish = () => {
      const wait = Math.max(0, MIN_MS - (Date.now() - start));
      window.setTimeout(() => {
        setFading(true);
        window.setTimeout(() => { setVisible(false); signal(); }, 640);
      }, wait);
    };
    if (document.readyState === "complete") finish();
    else { window.addEventListener("load", finish); return () => window.removeEventListener("load", finish); }
  }, [firstVisit]);

  if (!visible) return null;

  return (
    <div
      style={{
        position: "fixed", inset: 0, zIndex: 9999, background: "#111111", overflow: "hidden",
        display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center",
        opacity: fading ? 0 : 1,
        transform: fading ? "scale(1.06)" : "scale(1)",
        filter: fading ? "blur(8px)" : "blur(0px)",
        transition: "opacity 640ms var(--ease-confident, ease), transform 640ms var(--ease-confident, ease), filter 640ms var(--ease-confident, ease)",
        pointerEvents: fading ? "none" : "auto",
      }}
    >
      <div style={{ position: "absolute", top: "20%", right: "16%", width: 300, height: 300, borderRadius: "50%", background: "var(--color-primary)", opacity: 0.22, filter: "blur(52px)", animation: "heroDrift1 14s ease-in-out infinite" }} />
      <div style={{ position: "absolute", bottom: "16%", left: "14%", width: 240, height: 240, borderRadius: "50%", background: "var(--color-secondary)", opacity: 0.2, filter: "blur(52px)", animation: "heroDrift2 12s ease-in-out infinite" }} />

      <div className="jmk-float" style={{ position: "relative", zIndex: 2 }}>
        <img
          src="assets/logo-full-colour.png"
          alt="JMK Studios"
          style={{ width: "clamp(180px, 24vw, 280px)", display: "block", animation: "splashLogoIn 900ms var(--ease-confident, ease) both" }}
        />
      </div>
      <div style={{ position: "relative", zIndex: 2, marginTop: 18, fontFamily: "var(--font-editorial)", fontStyle: "italic", fontSize: "clamp(14px,2vw,20px)", color: "rgba(255,255,255,0.72)", opacity: 0, animation: "jmkSplashUp 700ms var(--ease-confident, ease) 550ms both" }}>
        Think Outside The Box.
      </div>

      <div style={{ position: "absolute", bottom: 0, left: 0, right: 0, height: 3, background: "rgba(255,255,255,0.12)" }}>
        <div style={{ height: "100%", background: "linear-gradient(90deg, var(--color-primary), var(--color-secondary))", transformOrigin: "left center", transform: "scaleX(0)", animation: "jmkSplashBar 1500ms var(--ease-confident, ease) forwards" }} />
      </div>
    </div>
  );
}
window.JMK = window.JMK || {};
window.JMK.Splash = Splash;