// FlyingLogo: a single logo element that lives fixed in the viewport and
// interpolates between two anchors based on scroll position:
//   - "hero" pose: large, reserved between the location line and headline
//   - "nav"  pose: small, exactly where the navbar brand is
// We measure both anchors live, so it stays correct on resize.

const FlyingLogo = () => {
  const ref = React.useRef(null);

  React.useEffect(() => {
    let raf = 0;

    // Tunables
    const HERO_HEIGHT = 44;           // px — logo height in hero (centered, compact)
    const NAV_HEIGHT_DEFAULT = 28;    // matches .navbar-logo height
    const NAV_HEIGHT_SCROLLED = 24;   // matches .navbar.scrolled .navbar-logo height
    const SCROLL_RANGE = 420;         // px of scroll over which the morph happens

    const lerp = (a, b, t) => a + (b - a) * t;
    const easeInOut = (t) => t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2;

    const measure = () => {
      const el = ref.current;
      if (!el) return null;

      // NAV target: real position of the navbar brand placeholder
      const navAnchor = document.querySelector('.navbar-brand');
      const navRect = navAnchor ? navAnchor.getBoundingClientRect() : null;

      // HERO target: a reserved slot in the hero's normal document flow.
      // Measuring the slot keeps the location line, logo, and headline from
      // colliding as type and viewport dimensions change.
      const heroAnchor = document.querySelector('.hero-logo-anchor');

      let heroX, heroY, heroH = HERO_HEIGHT;

      if (heroAnchor) {
        const anchorRect = heroAnchor.getBoundingClientRect();
        heroX = anchorRect.left;
        heroY = anchorRect.top;
        heroH = anchorRect.height || HERO_HEIGHT;
      } else {
        const logoRatio = el.naturalWidth && el.naturalHeight
          ? el.naturalWidth / el.naturalHeight
          : 2.955;
        heroX = (window.innerWidth - heroH * logoRatio) / 2;
        heroY = 120;
      }

      let navX = 40, navY = 24, navH = NAV_HEIGHT_DEFAULT;
      if (navRect) {
        navH = window.scrollY > 40 ? NAV_HEIGHT_SCROLLED : NAV_HEIGHT_DEFAULT;
        navX = navRect.left;
        navY = navRect.top + (navRect.height - navH) / 2;
      }

      return { heroX, heroY, heroH, navX, navY, navH };
    };

    const apply = () => {
      raf = 0;
      const el = ref.current;
      if (!el) return;
      const m = measure();
      if (!m) return;

      const t = easeInOut(Math.min(1, Math.max(0, window.scrollY / SCROLL_RANGE)));

      const x = lerp(m.heroX, m.navX, t);
      const y = lerp(m.heroY, m.navY, t);
      const h = lerp(m.heroH, m.navH, t);

      el.style.transform = `translate3d(${x}px, ${y}px, 0)`;
      el.style.height = h + 'px';
    };

    const schedule = () => {
      if (!raf) raf = requestAnimationFrame(apply);
    };

    // Apply immediately, then on scroll/resize.
    apply();
    // Re-apply after fonts/images settle so anchors are accurate.
    const settle = setTimeout(apply, 50);
    const settle2 = setTimeout(apply, 300);

    window.addEventListener('scroll', schedule, { passive: true });
    window.addEventListener('resize', schedule);
    if (document.fonts && document.fonts.ready) document.fonts.ready.then(apply);

    return () => {
      window.removeEventListener('scroll', schedule);
      window.removeEventListener('resize', schedule);
      if (raf) cancelAnimationFrame(raf);
      clearTimeout(settle);
      clearTimeout(settle2);
    };
  }, []);

  return (
    <img
      ref={ref}
      src="assets/HAYRE-logo-white.webp"
      alt="HAYRE"
      className="flying-logo"
    />
  );
};

window.FlyingLogo = FlyingLogo;