/* ============ INTRO: short branded splash on app open + skip ============ */
(function(){
  const { useState, useEffect, useRef } = React;
  const LOGO = 'icons/icon-192.png';
  const CONF = ['#2fe07a','#1fd9e6','#ffd23f','#ff4d9d','#b06bff'];
  const SHAPE = ['#2fe07a','#1fd9e6','#ffd23f','#ff4d9d'];

  // deterministic-ish scatter so React doesn't re-roll on re-render
  function build(n, seedFn){ const a=[]; for(let i=0;i<n;i++) a.push(seedFn(i)); return a; }

  function IntroSplash({ onDone, duration=3400 }){
    const [leaving,setLeaving]=useState(false);
    const done=useRef(false);

    const finish=()=>{
      if(done.current) return; done.current=true;
      setLeaving(true);
      setTimeout(()=>{ onDone && onDone(); }, 540);
    };

    useEffect(()=>{
      const t=setTimeout(finish, duration);
      return ()=>clearTimeout(t);
    },[]);

    const shapes=build(7,(i)=>{
      const sz=70+(i*37%120);
      return { sz, left:(i*53%100), top:(i*29%100), col:SHAPE[i%4], rot:(i*47%360), dur:7+(i%5), delay:(i%4)*0.4 };
    });
    const bits=build(26,(i)=>({
      left:(i*53%100), col:CONF[i%5], delay:0.9+((i%9)*0.06), dur:1.6+((i%5)*0.18),
      sz:9+(i%4)*4, rot:(i*40%360), drift:((i%2)?1:-1)*(8+(i%5)*5)
    }));

    return (
      <div className={'intro'+(leaving?' leaving':'')} onClick={finish} role="dialog" aria-label="ברוכים הבאים לבנקבוק">
        <div className="intro-deco" aria-hidden="true">
          {shapes.map((s,i)=>(
            <span key={i} style={{width:s.sz,height:s.sz,left:s.left+'%',top:s.top+'%',background:s.col,
              transform:'rotate('+s.rot+'deg)', animationDuration:s.dur+'s', animationDelay:s.delay+'s'}}/>
          ))}
        </div>

        <button className="intro-skip" onClick={(e)=>{ e.stopPropagation(); finish(); }}>דלג ›</button>

        <div className="intro-stage">
          <div className="intro-logo"><img src={LOGO} alt="בנקבוק"/></div>
          <h1 className="intro-name">בַּנְקְבּוּק</h1>
          <div className="intro-tag">הבנק של הבקבוקים 🏦</div>
          <div className="intro-chips">
            <span style={{animationDelay:'1.05s'}}>אוספים</span>
            <i style={{animationDelay:'1.18s'}}>·</i>
            <span style={{animationDelay:'1.30s'}}>חוסכים</span>
            <i style={{animationDelay:'1.43s'}}>·</i>
            <span style={{animationDelay:'1.55s'}}>מתחרים</span>
          </div>
        </div>

        <div className="intro-confetti" aria-hidden="true">
          {bits.map((b,i)=>(
            <span key={i} style={{left:b.left+'%', background:b.col, width:b.sz, height:b.sz*1.4,
              animationDelay:b.delay+'s', animationDuration:b.dur+'s',
              ['--rot']:b.rot+'deg', ['--drift']:b.drift+'px'}}/>
          ))}
        </div>
      </div>
    );
  }

  window.IntroSplash = IntroSplash;
})();