// Ambience — background atmosphere for the black sections: a twinkling
// starfield with pointer parallax, soft glow spots, and a scroll-reveal
// wrapper so every section enters with the same cinematic blur-in.

const AMBIENT_FINE_POINTER =
  typeof window.matchMedia === "function" && window.matchMedia("(pointer: fine)").matches;

// Fixed full-viewport canvas of twinkling stars. Sits at z-0 behind all
// sections; the video sections paint over it with their own black bg.
function Starfield({ count = 140 }) {
  const canvasRef = React.useRef(null);

  React.useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    const ctx = canvas.getContext("2d");
    let raf = null;
    let stars = [];
    let W = 0;
    let H = 0;
    const DPR = Math.min(window.devicePixelRatio || 1, 2);

    const resize = () => {
      W = canvas.width = window.innerWidth * DPR;
      H = canvas.height = window.innerHeight * DPR;
      canvas.style.width = window.innerWidth + "px";
      canvas.style.height = window.innerHeight + "px";
      stars = Array.from({ length: count }, () => ({
        x: Math.random() * W,
        y: Math.random() * H,
        r: (Math.random() * 1.1 + 0.3) * DPR,
        phase: Math.random() * Math.PI * 2,
        speed: 0.4 + Math.random() * 1.2,
        depth: 0.3 + Math.random() * 0.7, // parallax strength per star
      }));
    };

    let mx = 0;
    let my = 0;
    const onMove = (e) => {
      mx = e.clientX / window.innerWidth - 0.5;
      my = e.clientY / window.innerHeight - 0.5;
    };

    const tick = (t) => {
      ctx.clearRect(0, 0, W, H);
      ctx.fillStyle = "#fff";
      for (const s of stars) {
        const twinkle = 0.2 + 0.5 * Math.abs(Math.sin(t * 0.001 * s.speed + s.phase));
        const ox = -mx * 26 * s.depth * DPR;
        const oy = -my * 26 * s.depth * DPR;
        ctx.globalAlpha = twinkle;
        ctx.beginPath();
        ctx.arc(s.x + ox, s.y + oy, s.r, 0, Math.PI * 2);
        ctx.fill();
      }
      raf = requestAnimationFrame(tick);
    };

    resize();
    window.addEventListener("resize", resize);
    if (AMBIENT_FINE_POINTER) window.addEventListener("pointermove", onMove);
    raf = requestAnimationFrame(tick);

    return () => {
      if (raf) cancelAnimationFrame(raf);
      window.removeEventListener("resize", resize);
      window.removeEventListener("pointermove", onMove);
    };
  }, [count]);

  return (
    <canvas
      ref={canvasRef}
      aria-hidden="true"
      className="fixed inset-0 z-0 pointer-events-none"
    />
  );
}

// Soft white radial glow to give flat black areas some depth.
// Position it with className (e.g. "-top-40 -right-40").
function GlowSpot({ className = "", size = 600, opacity = 0.07 }) {
  return (
    <div
      aria-hidden="true"
      className={"absolute pointer-events-none " + className}
      style={{
        width: size,
        height: size,
        borderRadius: "50%",
        background:
          "radial-gradient(circle, rgba(255,255,255," +
          opacity +
          ") 0%, rgba(255,255,255,0) 70%)",
      }}
    />
  );
}

// Scroll entrance: same blur-in used by the hero, triggered when scrolled
// into view (once).
function Reveal({ children, className = "", delay = 0, y = 24 }) {
  const { motion } = window.Motion;
  return (
    <motion.div
      className={className}
      initial={{ opacity: 0, y, filter: "blur(10px)" }}
      whileInView={{ opacity: 1, y: 0, filter: "blur(0px)" }}
      viewport={{ once: true, amount: 0.2 }}
      transition={{ duration: 0.8, ease: "easeOut", delay }}
    >
      {children}
    </motion.div>
  );
}

window.Starfield = Starfield;
window.GlowSpot = GlowSpot;
window.Reveal = Reveal;