/* LavaBubble, full-width lava-lamp transition band.
   As the band scrolls into view, a dark ink fill rises from the bottom with a
   wavy crest while gooey bubbles rise from below, merge mid-band and disappear
   off the top. By the time the band leaves the viewport, the entire band is
   ink, handing off cleanly into the dark CTA zone underneath. */
function LavaBubble({ topColor = "var(--pearl)", inkColor = "#0A0A0A" } = {}) {
  const ref = useRef(null);
  const [p, setP] = useState(0); // 0..1 scroll progress through the band
  const [t, setT] = useState(0); // continuous time for wobble + bubble travel

  // Continuous wobble clock
  useEffect(() => {
    let raf;
    const tick = () => { setT((x) => x + 0.012); raf = requestAnimationFrame(tick); };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, []);

  // Scroll progress: 0 when band just touching bottom of viewport,
  // 1 when band has just scrolled past the top.
  useEffect(() => {
    const onScroll = () => {
      const el = ref.current; if (!el) return;
      const r = el.getBoundingClientRect();
      const vh = window.innerHeight;
      const raw = (vh - r.top) / (r.height + vh);
      setP(Math.max(0, Math.min(1, raw)));
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    window.addEventListener("resize", onScroll);
    return () => {
      window.removeEventListener("scroll", onScroll);
      window.removeEventListener("resize", onScroll);
    };
  }, []);

  // Ink top edge in % of band height: 100 (fully below) → -8 (fully covering).
  // Finishes rising at p=0.75 so the band is solid ink before it leaves view.
  const inkTopPct = 100 - Math.max(0, Math.min(1, (p - 0.05) / 0.7)) * 108;

  // Wavy crest on the ink top
  const moving = p > 0.05 && p < 0.85;
  const amp = moving ? 2.6 : 1.0;
  const wv = (i) => Math.sin(i + t * 1.2) * amp;
  const xs = [0, 20, 40, 60, 80, 100];
  const pts = xs.map((x, i) => ({ x, y: inkTopPct + wv(i * 1.25) }));
  const inkPath = `
    M0,${inkTopPct + 4}
    Q ${pts[0].x + 10},${pts[0].y - 3} ${pts[1].x},${pts[1].y}
    T ${pts[2].x},${pts[2].y}
    T ${pts[3].x},${pts[3].y}
    T ${pts[4].x},${pts[4].y}
    T ${pts[5].x},${pts[5].y}
    L 100,108 L 0,108 Z
  `;
  const highlightPath =
    `M0,${inkTopPct + 0.3} Q ${pts[0].x + 10},${pts[0].y - 3.3} ${pts[1].x},${pts[1].y - 0.3} ` +
    `T ${pts[2].x},${pts[2].y - 0.3} T ${pts[3].x},${pts[3].y - 0.3} ` +
    `T ${pts[4].x},${pts[4].y - 0.3} T ${pts[5].x},${pts[5].y - 0.3}`;

  // Bubbles in viewBox 0..1000 × 0..320 (aspect-preserved separately).
  // Each cycles vertically from below the band to above it.
  const bubbles = [
    { x: 140, baseR: 22, speed: 0.30, phase: 0.0, wob: 1.0 },
    { x: 320, baseR: 36, speed: 0.40, phase: 1.4, wob: 0.7 },
    { x: 500, baseR: 18, speed: 0.34, phase: 0.6, wob: 1.2 },
    { x: 680, baseR: 42, speed: 0.26, phase: 2.1, wob: 0.6 },
    { x: 860, baseR: 24, speed: 0.38, phase: 1.0, wob: 0.9 },
  ];
  const bubbleAlpha = p > 0.05 ? Math.min(1, (p - 0.05) / 0.15) : 0;

  return (
    <div ref={ref} aria-hidden="true" style={{
      position: "relative", width: "100%", height: 320, overflow: "hidden", background: topColor,
    }}>
      {/* Ink fill with wavy crest, stretched */}
      <svg
        viewBox="0 0 100 100"
        preserveAspectRatio="none"
        style={{ position: "absolute", inset: 0, width: "100%", height: "100%", pointerEvents: "none" }}
      >
        <path d={inkPath} fill={inkColor} />
        <path
          d={highlightPath}
          stroke="rgba(255,255,255,0.18)" strokeWidth="0.18" fill="none"
          style={{ opacity: inkTopPct > -5 && inkTopPct < 100 ? 1 : 0 }}
        />
      </svg>

      {/* Rising goo bubbles, aspect-preserved so circles stay round */}
      <svg
        viewBox="0 0 1000 320"
        preserveAspectRatio="xMidYMid slice"
        style={{ position: "absolute", inset: 0, width: "100%", height: "100%", pointerEvents: "none", opacity: bubbleAlpha }}
      >
        <defs>
          <filter id="lava-bubbles-goo">
            <feGaussianBlur in="SourceGraphic" stdDeviation="6" result="b"/>
            <feColorMatrix in="b" type="matrix"
              values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 22 -10"/>
          </filter>
        </defs>
        <g filter="url(#lava-bubbles-goo)" fill={inkColor}>
          {bubbles.map((b, i) => {
            const cycle = (t * b.speed * 0.5 + b.phase) % 1;
            const y = 340 - cycle * 400;
            const x = b.x + Math.sin(t * 0.7 + b.phase * 2) * 14 * b.wob;
            const r = b.baseR + Math.sin(t * 1.3 + b.phase) * 4 * b.wob;
            return <circle key={i} cx={x} cy={y} r={r} />;
          })}
        </g>
      </svg>
    </div>
  );
}
window.LavaBubble = LavaBubble;