/* Decretando Disney — fondo aurora boreal. Exporta window.Aurora */
(function(){
  const { useMemo } = React;

  function Aurora({ dim }){
    // estrellas generadas una sola vez
    const stars = useMemo(()=>{
      const arr=[];
      for(let i=0;i<150;i++){
        const big = Math.random()>0.86;
        arr.push({
          left: Math.random()*100,
          top: Math.random()*92,
          size: big? 2.4+Math.random()*1.8 : 1+Math.random()*1.4,
          tw: (2.5+Math.random()*5).toFixed(2)+'s',
          delay: (-Math.random()*6).toFixed(2)+'s',
          glow: big
        });
      }
      return arr;
    },[]);

    const sparks = useMemo(()=>{
      const arr=[];
      for(let i=0;i<14;i++){
        arr.push({
          left: Math.random()*100,
          size: 8+Math.random()*12,
          fl: (10+Math.random()*12).toFixed(1)+'s',
          delay: (-Math.random()*18).toFixed(1)+'s'
        });
      }
      return arr;
    },[]);

    const shoots = useMemo(()=>([
      { top:14, left:8, dur:'8s', delay:'2s' },
      { top:30, left:55, dur:'11s', delay:'7s' }
    ]),[]);

    return (
      <div className="dd-sky" aria-hidden="true">
        <div className="dd-aurora">
          <b className="a1"></b>
          <b className="a2"></b>
          <b className="a3"></b>
          <b className="a4"></b>
          <b className="curtain"></b>
        </div>
        <div className="dd-sky__glow"></div>

        <div className="dd-stars">
          {stars.map((s,i)=>(
            <span key={i} className="dd-star" style={{
              left:s.left+'%', top:s.top+'%', width:s.size+'px', height:s.size+'px',
              '--tw':s.tw, animationDelay:s.delay,
              boxShadow: s.glow? '0 0 6px 1px rgba(255,255,255,.9)' : 'none'
            }}></span>
          ))}
          {sparks.map((s,i)=>(
            <span key={'sp'+i} className="dd-spark" style={{
              left:s.left+'%', bottom:'-20px', '--fl':s.fl, animationDelay:s.delay
            }}>
              <DDIcons.sparkle size={s.size} color="#fff" fill="#fff" stroke={2}/>
            </span>
          ))}
          {shoots.map((s,i)=>(
            <span key={'sh'+i} className="dd-shoot" style={{
              top:s.top+'%', left:s.left+'%',
              animation:`shoot ${s.dur} ease-in ${s.delay} infinite`
            }}></span>
          ))}
        </div>

        <img className="dd-watermark" src="assets/logo-white.png" alt="" />
        <div className={"dd-dim"+(dim?" on":"")}></div>
      </div>
    );
  }

  window.Aurora = Aurora;
})();