// FireTail portfolio — seamless name + flame morph.
// Two fixed elements (flame SVG + name text) that independently scale + travel
// from the hero position to the nav slot, driven by scroll.

function MorphName() {
  const textRef = React.useRef(null);
  const flameRef = React.useRef(null);

  React.useEffect(() => {
    const scroller = document.querySelector("#ft-scroll");
    const heroEl = document.querySelector("#ft-hero-name");
    const dockEl = document.querySelector("#ft-nav-namedock");
    const flameDock = document.querySelector("#ft-nav-flamedock");
    const textEl = textRef.current;
    const flameEl = flameRef.current;
    const flameSvg = flameEl && flameEl.querySelector("svg");
    if (!heroEl || !dockEl || !flameDock || !textEl || !flameEl || !flameSvg) return;
    heroEl.style.visibility = "hidden";

    let textStart = {}, textEnd = {}, flameStart = {}, flameEnd = {};
    let dock = 1, textRatio = 0.2, startOffset = 0;
    let heroFS = 100, heroFlameSize = 55, navFlameSize = 44;
    const sTop = () => (scroller ? scroller.scrollTop : window.scrollY);

    const measure = () => {
      const top = sTop();
      const hr = heroEl.getBoundingClientRect();
      const dr = dockEl.getBoundingClientRect();
      const fd = flameDock.getBoundingClientRect();
      heroFS = parseFloat(getComputedStyle(heroEl).fontSize);
      const dockFS = parseFloat(getComputedStyle(dockEl).fontSize);

      textEl.style.fontSize = heroFS + "px";
      textRatio = dockFS / heroFS;

      textStart = { left: hr.left, top: hr.top + top };
      textEnd = { left: dr.left, top: dr.top };

      dock = Math.max(1, textStart.top - textEnd.top);
      startOffset = Math.max(0, dock - 120);

      navFlameSize = 44;
      heroFlameSize = heroFS * 0.8;

      flameStart = {
        left: hr.left - heroFlameSize - 16,
        top: hr.top + top + (hr.height - heroFlameSize) / 2,
      };
      flameEnd = {
        left: fd.left + (fd.width - navFlameSize) / 2,
        top: fd.top + (fd.height - navFlameSize) / 2,
      };
    };

    const apply = () => {
      const top = sTop();
      const denom = Math.max(1, dock - startOffset);
      const p = Math.max(0, Math.min(1, (top - startOffset) / denom));

      // Text
      const curHeroTop = textStart.top - top;
      const tx = textStart.left + (textEnd.left - textStart.left) * p;
      const ty = curHeroTop + (textEnd.top - curHeroTop) * p;
      const ts = 1 + (textRatio - 1) * p;
      textEl.style.transform = "translate(" + tx + "px," + ty + "px) scale(" + ts + ")";

      // Flame
      const flameSize = heroFlameSize + (navFlameSize - heroFlameSize) * p;
      const curFlameTop = flameStart.top - top;
      const fx = flameStart.left + (flameEnd.left - flameStart.left) * p;
      const fy = curFlameTop + (flameEnd.top - curFlameTop) * p;
      flameSvg.setAttribute("width", flameSize);
      flameSvg.setAttribute("height", flameSize);
      flameEl.style.transform = "translate(" + fx + "px," + fy + "px)";
    };

    const run = () => { measure(); apply(); };
    run();
    if (document.fonts && document.fonts.ready) document.fonts.ready.then(run);
    setTimeout(run, 350);

    const onScroll = () => apply();
    const target = scroller || window;
    target.addEventListener("scroll", onScroll, { passive: true });
    window.addEventListener("resize", run);
    return () => {
      target.removeEventListener("scroll", onScroll);
      window.removeEventListener("resize", run);
      heroEl.style.visibility = "";
    };
  }, []);

  return (
    <React.Fragment>
      <div ref={flameRef} id="ft-morph-flame" aria-hidden="true" style={{
        position: "fixed", left: 0, top: 0, zIndex: 55,
        pointerEvents: "none", lineHeight: 0, overflow: "visible",
      }}>
        <svg className="ft-logo-flame" width="44" height="44" viewBox="0 0 64 64" fill="none"
          style={{ display: "block", overflow: "visible" }}>
          <defs>
            <linearGradient id="ftFlameMorph" 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="ftCoreMorph" 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(#ftFlameMorph)" />
          <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(#ftCoreMorph)" />
        </svg>
      </div>
      <div ref={textRef} aria-hidden="true" style={{
        position: "fixed", left: 0, top: 0, transformOrigin: "top left", zIndex: 55,
        fontFamily: "var(--font-display)", fontWeight: 500, letterSpacing: "-0.03em",
        color: "var(--text-strong)", lineHeight: 1, whiteSpace: "nowrap", pointerEvents: "none",
      }}>Smit Waghela</div>
    </React.Fragment>
  );
}

window.MorphName = MorphName;