/* WASH BODEGA — Scroll-Reactive Logo System
   Pure RAF loop, no React state re-renders. */

const ScrollLogo = () => {
  const logoRef = React.useRef(null);

  React.useEffect(() => {
    const el = logoRef.current;
    if (!el) return;
    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
      el.style.display = 'none';
      return;
    }

    const mountTime = performance.now();
    let phase = 'entering'; // entering | docked | floating
    let raf;
    const pos = { x: 0, y: -200, scale: 0.3, rotation: 720 };
    const mouse = { x: window.innerWidth - 80, y: window.innerHeight / 2 };

    const onMouseMove = (e) => { mouse.x = e.clientX; mouse.y = e.clientY; };
    window.addEventListener('mousemove', onMouseMove, { passive: true });

    const lerp = (a, b, t) => a + (b - a) * t;

    const getDock = () => {
      const glass = document.querySelector('.washer-glass');
      if (glass) {
        const r = glass.getBoundingClientRect();
        return { x: r.left + r.width / 2, y: r.top + r.height / 2, size: r.width * 0.65 };
      }
      return { x: window.innerWidth * 0.75, y: window.innerHeight * 0.5, size: 280 };
    };

    const animate = () => {
      const dock = getDock();
      const heroEl = document.querySelector('.hero');
      const heroBottom = heroEl ? heroEl.getBoundingClientRect().bottom : 800;
      const threshold = 200;

      // Phase transitions
      if (phase === 'entering') {
        const t = (performance.now() - mountTime) / 1000;
        if (t > 2.2) phase = 'docked';
      }
      if (phase !== 'entering') {
        if (heroBottom < threshold && phase !== 'floating') phase = 'floating';
        else if (heroBottom >= threshold && phase === 'floating') phase = 'docked';
      }

      let tx, ty, ts, tr;

      if (phase === 'entering') {
        const t = (performance.now() - mountTime) / 1000;
        const dur = 1.8;
        const p = Math.min(t / dur, 1);
        // Spring-bounce ease
        const ease = p < 0.55
          ? p / 0.55 * (p / 0.55)
          : 1 - Math.pow(2, -10 * (p - 0.55)) * Math.cos((p - 0.55) * 7 * Math.PI) * 0.25 * (1 - p);
        const e = Math.min(ease, 1.15);

        tx = dock.x;
        ty = lerp(-200, dock.y, Math.min(e, 1));
        ts = lerp(0.3, dock.size / 140, Math.min(e, 1));
        tr = lerp(720, 0, Math.min(p * 1.4, 1));

        // Direct set for entrance (no lerp lag)
        pos.x = tx; pos.y = ty; pos.scale = ts; pos.rotation = tr;

      } else if (phase === 'docked') {
        tx = dock.x;
        ty = dock.y;
        ts = dock.size / 140;
        tr = 0;
        pos.x = lerp(pos.x, tx, 0.1);
        pos.y = lerp(pos.y, ty, 0.1);
        pos.scale = lerp(pos.scale, ts, 0.08);
        pos.rotation = lerp(pos.rotation, tr, 0.1);

      } else { // floating
        const baseX = window.innerWidth - 56;
        const baseY = window.innerHeight - 56;
        tx = baseX + (mouse.x - baseX) * 0.06;
        ty = baseY + (mouse.y - baseY) * 0.06;
        ts = 0.38;
        tr = Math.sin(performance.now() / 1200) * 6;
        pos.x = lerp(pos.x, tx, 0.06);
        pos.y = lerp(pos.y, ty, 0.06);
        pos.scale = lerp(pos.scale, ts, 0.06);
        pos.rotation = lerp(pos.rotation, tr, 0.08);
      }

      el.style.transform = `translate(-50%, -50%) translate3d(${pos.x}px, ${pos.y}px, 0) scale(${pos.scale}) rotate(${pos.rotation}deg)`;

      // Z-index + pointer
      const isFloating = phase === 'floating';
      el.style.zIndex = isFloating ? '95' : '6';
      el.style.pointerEvents = isFloating ? 'auto' : 'none';
      el.style.cursor = isFloating ? 'pointer' : 'default';

      // Glow
      if (phase === 'entering') {
        el.style.filter = 'drop-shadow(0 12px 40px rgba(229,35,43,0.5)) drop-shadow(0 0 80px rgba(255,198,39,0.4))';
      } else if (isFloating) {
        el.style.filter = 'drop-shadow(0 6px 16px rgba(229,35,43,0.35)) drop-shadow(0 0 30px rgba(255,198,39,0.3))';
      } else {
        el.style.filter = 'drop-shadow(0 8px 24px rgba(90,42,18,0.35)) drop-shadow(0 0 40px rgba(255,198,39,0.25))';
      }

      raf = requestAnimationFrame(animate);
    };

    raf = requestAnimationFrame(animate);

    const onClick = () => window.scrollTo({ top: 0, behavior: 'smooth' });
    el.addEventListener('click', onClick);

    return () => {
      cancelAnimationFrame(raf);
      window.removeEventListener('mousemove', onMouseMove);
      el.removeEventListener('click', onClick);
    };
  }, []);

  return (
    <img
      ref={logoRef}
      src="assets/logo.png"
      alt="Wash Bodega"
      style={{
        position: 'fixed',
        top: 0,
        left: 0,
        width: 140,
        height: 140,
        objectFit: 'contain',
        borderRadius: '50%',
        willChange: 'transform, filter',
        backfaceVisibility: 'hidden',
      }}
    />
  );
};

Object.assign(window, { ScrollLogo });