// FireTail portfolio — intro splash.
// Phase 1 (CSS): flame ignites at center — scale up, glow, clip-path reveal.
// Phase 2 (JS):  measure nav flame rect, animate splash flame to exact position.
// Background fades during travel; flame stays visible for seamless handoff.

function SplashFlame({ size = 132 }) {
  return (
    <svg className="ft-logo-flame" width={size} height={size} viewBox="0 0 64 64" fill="none" aria-hidden="true"
      style={{ display: "block", overflow: "visible" }}>
      <defs>
        <linearGradient id="ftFlameSplash" x1="32" y1="6" x2="32" y2="58" gradientUnits="userSpaceOnUse">
          <stop offset="0" stopColor="#9fdcff" /><stop offset="0.5" stopColor="#1f9bff" /><stop offset="1" stopColor="#0e5db4" />
        </linearGradient>
        <linearGradient id="ftCoreSplash" x1="32" y1="26" x2="32" y2="51" gradientUnits="userSpaceOnUse">
          <stop offset="0" stopColor="#eafcff" /><stop offset="1" stopColor="#45e2d2" />
        </linearGradient>
      </defs>
      <path d="M32 6 C 30 18 44 24 44 40 C 44 49 39 56 32 56 C 25 56 20 49 20 40 C 20 33 25 31 27 25 C 28 31 33 31 33 23 C 33 16 32 11 32 6 Z" fill="url(#ftFlameSplash)" />
      <path className="ft-logo-core" d="M32 27 C 31 34 38 35 38 43 C 38 48 35 51 32 51 C 28 51 25 48 25 43 C 25 39 28 38 29 34 C 30 38 33 37 33 32 C 33 29 32 28 32 27 Z" fill="url(#ftCoreSplash)" />
    </svg>
  );
}

function Splash({ onDone }) {
  const flameRef = React.useRef(null);
  const bgRef = React.useRef(null);
  const wordRef = React.useRef(null);

  React.useEffect(() => {
    const flame = flameRef.current;
    const bg = bgRef.current;
    const word = wordRef.current;
    const navFlame = document.querySelector("#ft-morph-flame svg");

    const IGNITE_MS = 2500;
    const TRAVEL_MS = 1000;

    // Phase 2: after ignite, JS takes over for the travel
    const travelTimer = setTimeout(() => {
      if (!flame || !navFlame) return;

      // Measure nav flame's exact viewport position
      const navRect = navFlame.getBoundingClientRect();

      // Cancel CSS animation, snapshot at centered position
      flame.style.animation = "none";
      flame.style.transform = "translate(-50%, -50%) scale(1)";
      flame.offsetHeight; // force reflow

      // Measure splash flame's current rect
      const flameRect = flame.getBoundingClientRect();
      const dx = (navRect.left + navRect.width / 2) - (flameRect.left + flameRect.width / 2);
      const dy = (navRect.top + navRect.height / 2) - (flameRect.top + flameRect.height / 2);
      const s = navRect.width / flameRect.width;

      // Animate flame to nav position
      flame.style.transition = "transform " + TRAVEL_MS + "ms var(--ease-in-out)";
      flame.style.transform = "translate(calc(-50% + " + dx + "px), calc(-50% + " + dy + "px)) scale(" + s + ")";

      // Fade background and word during travel
      if (bg) {
        bg.style.transition = "opacity " + TRAVEL_MS + "ms var(--ease-in-out)";
        bg.style.opacity = "0";
      }
      if (word) {
        word.style.transition = "opacity " + (TRAVEL_MS * 0.4) + "ms var(--ease-out)";
        word.style.opacity = "0";
      }
    }, IGNITE_MS);

    // Remove splash after travel completes
    const doneTimer = setTimeout(onDone, IGNITE_MS + TRAVEL_MS + 200);

    return () => {
      clearTimeout(travelTimer);
      clearTimeout(doneTimer);
    };
  }, [onDone]);

  return (
    <div style={{ position: "fixed", inset: 0, zIndex: 300, overflow: "hidden", pointerEvents: "none" }}>
      {/* Background — fades independently of flame */}
      <div ref={bgRef} style={{ position: "absolute", inset: 0, background: "var(--bg)" }}>
        <div className="ft-splash-glow" style={{
          position: "absolute", left: "50%", top: "50%", width: "60vmin", height: "60vmin",
          transform: "translate(-50%,-50%)", borderRadius: "50%",
          background: "radial-gradient(circle, rgba(31,155,255,0.30) 0%, rgba(69,226,210,0.12) 40%, transparent 70%)",
          pointerEvents: "none",
        }} />
      </div>
      {/* Flame — stays visible throughout, JS-driven travel */}
      <div ref={flameRef} className="ft-splash-mark" style={{
        position: "absolute", left: "50%", top: "50%",
        willChange: "transform, opacity",
      }}>
        <SplashFlame size={132} />
      </div>
      {/* Word */}
      <div ref={wordRef} className="ft-splash-word" style={{
        position: "absolute", left: "50%", top: "calc(50% + 96px)", transform: "translate(-50%,0)",
        fontFamily: "var(--font-mono)", fontSize: 12, letterSpacing: "0.4em", textTransform: "uppercase",
        color: "var(--text-faint)", whiteSpace: "nowrap",
      }}>FireTail Studio</div>
    </div>
  );
}

window.Splash = Splash;