// Animated horizontal beam — scroll-linked, red glow → green glow.
// Bridges the Problema (dark/red) and Solutia (lifted/green) sections.

const { useState: useStateBM, useEffect: useEffectBM, useRef: useRefBM } = React;
const clampBM = (v, lo, hi) => Math.max(lo, Math.min(hi, v));

const Beam = () => {
  const ref = useRefBM(null);
  const [p, setP] = useStateBM(0);

  useEffectBM(() => {
    const el = ref.current;
    if (!el) return;
    let raf = 0;
    const update = () => {
      raf = 0;
      const r = el.getBoundingClientRect();
      const vh = window.innerHeight || 1;
      const start = vh * 1.1;
      const end = vh * 0.2;
      setP(clampBM((start - r.top) / (start - end), 0, 1));
    };
    const onScroll = () => { if (!raf) raf = requestAnimationFrame(update); };
    update();
    window.addEventListener("scroll", onScroll, { passive: true });
    window.addEventListener("resize", onScroll);
    return () => {
      window.removeEventListener("scroll", onScroll);
      window.removeEventListener("resize", onScroll);
      if (raf) cancelAnimationFrame(raf);
    };
  }, []);

  // Trace progresses across the screen as user scrolls
  const traceWidth = `${(p * 100).toFixed(2)}%`;
  // Colour shifts red → green as it crosses
  const headHue = 0 + p * 146; // 0=red, 146=green
  const headColor = `hsl(${headHue}, 92%, 60%)`;
  const headGlow = `0 0 24px ${headColor}, 0 0 60px ${headColor}, 0 0 120px ${headColor}`;

  return (
    <div
      ref={ref}
      aria-hidden="true"
      style={{
        position: "relative",
        width: "100%",
        height: 120,
        margin: "40px 0",
        overflow: "hidden",
        pointerEvents: "none",
      }}
    >
      {/* Static track */}
      <div style={{
        position: "absolute",
        left: 0, right: 0,
        top: "50%",
        transform: "translateY(-50%)",
        height: 1,
        background: "linear-gradient(90deg, rgba(239,68,68,0) 0%, rgba(239,68,68,0.25) 8%, rgba(255,255,255,0.18) 50%, rgba(9,169,85,0.25) 92%, rgba(9,169,85,0) 100%)",
      }} />

      {/* Animated trace */}
      <div style={{
        position: "absolute",
        left: 0,
        top: "50%",
        transform: "translateY(-50%)",
        height: 2,
        width: traceWidth,
        background: `linear-gradient(90deg,
          rgba(239,68,68,0.7) 0%,
          rgba(239,68,68,0.85) 25%,
          rgba(200,180,60,0.85) 55%,
          rgba(9,169,85,0.95) 85%,
          rgba(9,169,85,1) 100%)`,
        boxShadow: `0 0 12px rgba(239,68,68,${0.4 - p * 0.3}), 0 0 18px rgba(9,169,85,${p * 0.5})`,
        filter: "drop-shadow(0 0 6px rgba(9,169,85,0.45))",
        transition: "width 80ms linear",
      }} />

      {/* Leading head — bright dot at end of trace */}
      <div style={{
        position: "absolute",
        left: traceWidth,
        top: "50%",
        transform: "translate(-50%, -50%) scale(1)",
        width: 14,
        height: 14,
        borderRadius: "50%",
        background: headColor,
        boxShadow: headGlow,
        opacity: p > 0.02 && p < 0.99 ? 1 : 0,
        transition: "left 80ms linear, opacity 200ms ease, background 200ms ease",
      }} />

      {/* Tail glow follows trace */}
      <div style={{
        position: "absolute",
        left: 0,
        top: "50%",
        transform: "translateY(-50%)",
        width: traceWidth,
        height: 60,
        background: `radial-gradient(ellipse 240px 30px at ${(p * 100).toFixed(1)}% 50%, rgba(255,255,255,0.10), transparent 70%)`,
        opacity: p > 0.03 ? 1 : 0,
        transition: "opacity 200ms ease",
      }} />

      {/* Subtle ambient glow behind whole beam at full progress */}
      <div style={{
        position: "absolute",
        inset: 0,
        background: "radial-gradient(ellipse 600px 80px at 50% 50%, rgba(9,169,85,0.10), transparent 70%)",
        opacity: clampBM((p - 0.4) / 0.5, 0, 1),
        pointerEvents: "none",
      }} />
    </div>
  );
};

window.Beam = Beam;