/* Hero background — sophisticated dark composition (no stock photos).
   Layered: brand-navy base, mint radial glow, animated dot grid, subtle
   noise texture, vignette. Replaces the photo carousel that was washing out
   the headline whenever a light image cycled in. */

function HeroImageCarousel() {
  // Slow drift animation lives in <style> in the host HTML (hero-grid &
  // hero-streak keyframes); the component just composes the layers.
  return (
    <div className="absolute inset-0 overflow-hidden bg-brand-navy">
      {/* Base gradient — deep at center, slightly lifted at edges */}
      <div
        className="absolute inset-0"
        style={{
          background:
            'radial-gradient(ellipse 90% 80% at 50% 45%, #161c28 0%, #10141d 55%, #07090d 100%)',
        }}
      />

      {/* Mint glow — top-left corner, editorial "light source" */}
      <div
        className="absolute -top-40 -left-48 w-[60rem] h-[60rem] pointer-events-none"
        style={{
          background:
            'radial-gradient(circle, rgba(52,229,198,0.22) 0%, rgba(52,229,198,0.07) 30%, transparent 60%)',
          filter: 'blur(10px)',
        }}
      />

      {/* Secondary cool glow — bottom-right */}
      <div
        className="absolute -bottom-40 -right-40 w-[50rem] h-[50rem] pointer-events-none opacity-80"
        style={{
          background:
            'radial-gradient(circle, rgba(52,229,198,0.12) 0%, transparent 55%)',
        }}
      />

      {/* Animated dot-grid layer — feels like a quiet data field */}
      <div
        className="absolute inset-0 pointer-events-none hero-grid"
        style={{
          backgroundImage:
            'radial-gradient(rgba(235,246,244,0.13) 1px, transparent 1.4px)',
          backgroundSize: '28px 28px',
          maskImage:
            'radial-gradient(ellipse 70% 60% at 50% 45%, black 30%, transparent 78%)',
          WebkitMaskImage:
            'radial-gradient(ellipse 70% 60% at 50% 45%, black 30%, transparent 78%)',
        }}
      />

      {/* Diagonal scanline streak — very faint, very slow */}
      <div
        className="absolute inset-0 pointer-events-none hero-streak opacity-[0.06]"
        style={{
          background:
            'linear-gradient(115deg, transparent 35%, rgba(52,229,198,0.9) 50%, transparent 65%)',
        }}
      />

      {/* Center vignette — pushes attention to the headline */}
      <div
        className="absolute inset-0 pointer-events-none"
        style={{
          background:
            'radial-gradient(ellipse 95% 70% at 50% 50%, transparent 55%, rgba(7,9,13,0.6) 100%)',
        }}
      />

      {/* Bottom fade into the next section */}
      <div
        className="absolute inset-x-0 bottom-0 h-48 pointer-events-none"
        style={{
          background:
            'linear-gradient(180deg, transparent 0%, #10141d 100%)',
        }}
      />

      {/* Subtle noise grain (SVG fractal noise inlined) */}
      <div
        className="absolute inset-0 pointer-events-none opacity-[0.04] mix-blend-overlay"
        style={{
          backgroundImage:
            'url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' width=\'160\' height=\'160\'><filter id=\'n\'><feTurbulence type=\'fractalNoise\' baseFrequency=\'0.9\' numOctaves=\'2\' stitchTiles=\'stitch\'/></filter><rect width=\'100%\' height=\'100%\' filter=\'url(%23n)\'/></svg>")',
        }}
      />
    </div>
  );
}

window.HeroImageCarousel = HeroImageCarousel;