// aurora-hero.jsx — Animated aurora background scene
// Requires: aurora-hero.css loaded before this script

const BEAMS = [
  { left: '12%',  height: 340, delay: 0,    dur: 7.2, color: 'rgba(0,255,130,0.7)',  width: 1.5 },
  { left: '22%',  height: 480, delay: 0.4,  dur: 8.5, color: 'rgba(0,230,110,0.55)', width: 1 },
  { left: '34%',  height: 560, delay: 0.8,  dur: 6.8, color: 'rgba(50,255,160,0.8)', width: 2 },
  { left: '45%',  height: 640, delay: 0.2,  dur: 9.1, color: 'rgba(0,255,120,0.6)',  width: 1.5 },
  { left: '50%',  height: 720, delay: 0.6,  dur: 7.5, color: 'rgba(0,255,140,0.9)',  width: 2.5 },
  { left: '56%',  height: 610, delay: 0.3,  dur: 8.2, color: 'rgba(30,255,130,0.65)', width: 1.5 },
  { left: '66%',  height: 520, delay: 0.9,  dur: 7.8, color: 'rgba(0,220,100,0.55)', width: 1 },
  { left: '76%',  height: 400, delay: 0.5,  dur: 6.5, color: 'rgba(0,255,120,0.7)',  width: 1.5 },
  { left: '85%',  height: 300, delay: 1.1,  dur: 8.0, color: 'rgba(0,200,90,0.5)',   width: 1 },
  { left: '28%',  height: 260, delay: 1.4,  dur: 7.0, color: 'rgba(80,255,180,0.45)', width: 1 },
  { left: '61%',  height: 290, delay: 0.7,  dur: 9.4, color: 'rgba(0,245,115,0.5)',  width: 1 },
];

const BackgroundScene = ({
  children,
  minHeight = '100vh',
  className = '',
  showGrid = true,
}) => {
  return (
    <div
      className={`aurora-scene ${className}`}
      style={{ minHeight }}
    >
      {/* Animated grid */}
      {showGrid && <div className="aurora-grid" aria-hidden="true" />}

      {/* Ambient orb */}
      <div className="aurora-orb" aria-hidden="true" />

      {/* Light beams */}
      <div aria-hidden="true">
        {BEAMS.map((b, i) => (
          <div
            key={i}
            className="aurora-beam"
            style={{
              left: b.left,
              height: `${b.height}px`,
              width: `${b.width}px`,
              background: `linear-gradient(to top, ${b.color} 0%, transparent 100%)`,
              animationDelay: `${b.delay}s`,
              animationDuration: `${b.dur}s`,
              '--drift-dur': `${b.dur + 1}s`,
            }}
          />
        ))}
      </div>

      {/* Floor reflection */}
      <div className="aurora-floor" aria-hidden="true" />

      {/* Edge vignette */}
      <div className="aurora-vignette" aria-hidden="true" />

      {/* Slot content */}
      <div className="aurora-content">
        {children}
      </div>
    </div>
  );
};

window.BackgroundScene = BackgroundScene;