// screens-splash.jsx — cute boot splash: a fanned trio of booster packs,
// the Rook wordmark, a filling foil bar, and cycling stock-room status lines.

const SPLASH_LINES = [
  'Stacking the shelves',
  'Sorting the foils',
  'Chilling the sodas',
  'Counting the chase pulls',
  'Unlocking the clubhouse',
];

function Splash({ onDone }) {
  const [pct, setPct] = React.useState(0);
  const [line, setLine] = React.useState(0);
  const [leaving, setLeaving] = React.useState(false);

  // three packs fanned: center is the hero
  const fan = React.useMemo(() => {
    const pick = (id) => (typeof setById === 'function' ? setById(id) : SETS.find(s => s.id === id));
    return { left: pick('tide'), center: pick('ember'), right: pick('astral') };
  }, []);

  React.useEffect(() => {
    const start = performance.now();
    const DUR = 1850;
    let raf;
    const tick = (now) => {
      const p = Math.min(1, (now - start) / DUR);
      // ease-out so the bar decelerates into place
      setPct(Math.round((1 - Math.pow(1 - p, 2)) * 100));
      if (p < 1) { raf = requestAnimationFrame(tick); }
      else {
        setLeaving(true);
        setTimeout(onDone, 480);
      }
    };
    raf = requestAnimationFrame(tick);
    const li = setInterval(() => setLine(l => (l + 1) % SPLASH_LINES.length), 620);
    return () => { cancelAnimationFrame(raf); clearInterval(li); };
  }, [onDone]);

  return (
    <div className={'splash' + (leaving ? ' splash-out' : '')}>
      {/* fanned packs */}
      <div className="splash-fan">
        <div className="splash-pack splash-pack-l">
          <PackArt set={fan.left} w={104} h={140} sheen={false} />
        </div>
        <div className="splash-pack splash-pack-r">
          <PackArt set={fan.right} w={104} h={140} sheen={false} />
        </div>
        <div className="splash-pack splash-pack-c pack-float">
          <PackArt set={fan.center} w={120} h={162} sheen={true} />
        </div>
      </div>

      {/* wordmark */}
      <div className="splash-mark">
        <span className="splash-rook"><RookMark size={26} color="var(--accent)" /></span>
        <div className="splash-words">
          <div className="splash-kicker">EST. ON YOUR BLOCK</div>
          <div className="splash-title t-display">RGS</div>
        </div>
      </div>

      {/* foil loading bar */}
      <div className="splash-bar">
        <div className="track"><span style={{ width: pct + '%' }} /></div>
        <div className="splash-status t-mono">
          {SPLASH_LINES[line]}<span className="splash-dots" />
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Splash });