/* ============================================================
   UNSTOPPABLES — post-sign-in welcome splash
   "You!" (1.7s) → rest of the phrase (1.6s) → dashboard.
   Rotates through 50 phrases, one per sign-in.
   Exports: WelcomeSplash
   ============================================================ */

const SPLASH_PHRASES = [
  'You are an absolute badass today.',
  'You make the real magic happen.',
  'You are out here moving mountains.',
  'You show up and crush it.',
  'You are genuinely a total powerhouse.',
  'You are doing the real, hard work.',
  'You are a total game changer.',
  'You absolutely own this space today.',
  'You bring the absolute best energy.',
  'You set the bar incredibly high.',
  'You make an absolutely massive impact.',
  'You are the definition of badass.',
  'You are literally crushing it today.',
  'You are out here changing everything.',
  'You show up and take names.',
  'You are entirely unstoppable right now.',
  'You handle the chaos like a boss.',
  'You are a fiercely driven force.',
  'You run this shift like a pro.',
  'You outwork everyone in the room.',
  'You bring the absolute fire today.',
  'You are stepping up and dominating.',
  'You handle heavy lifting completely effortlessly.',
  'You are building something totally iconic.',
  'You are pure, unfiltered boss energy.',
  'You make breaking barriers look easy.',
  'You consistently deliver the absolute best.',
  'You are a fierce, driven trailblazer.',
  'You take charge and get results.',
  'You are writing your very own rules.',
  'You step up and shut it down.',
  'You are a literal rockstar every day.',
  'You never back down from a challenge.',
  'You are the absolute main character.',
  'You run the show with total confidence.',
  'You make an unbelievable difference daily.',
  'You completely own your incredible power.',
  'You are out here setting major trends.',
  'You tackle the impossible every single day.',
  'You bring the heat every single shift.',
  'You completely redefine what success looks like.',
  'You are a straight-up, undeniable legend.',
  'You make the hardest jobs look cool.',
  'You just keep winning every single day.',
  'You are absolutely killing it right now.',
  'You never stop pushing the damn limits.',
  'You are completely running the entire game.',
  'You show up and deliver pure greatness.',
  'You are an absolute force of nature.',
  'You bring out the badass in everyone.'
];

function WelcomeSplash({ onDone }) {
  // rotate: each sign-in advances to the next phrase
  const phrase = React.useMemo(() => {
    const idx = parseInt(localStorage.getItem('trellis_splash_idx') || '0', 10) % SPLASH_PHRASES.length;
    localStorage.setItem('trellis_splash_idx', String((idx + 1) % SPLASH_PHRASES.length));
    return SPLASH_PHRASES[idx];
  }, []);
  const rest = phrase.replace(/^You\s+/, '');

  const [phase, setPhase] = React.useState(0); // 0: "You!"  1: rest  2: fading out
  React.useEffect(() => {
    if (window.TrellisMesh) {
      window.TrellisMesh.pulse(window.innerWidth / 2, window.innerHeight / 2);
    }
    const t1 = setTimeout(() => {
      setPhase(1);
      if (window.TrellisMesh) window.TrellisMesh.pulse(window.innerWidth / 2, window.innerHeight / 2);
    }, 1700);
    const t2 = setTimeout(() => setPhase(2), 1700 + 1600);
    const t3 = setTimeout(onDone, 1700 + 1600 + 450);
    return () => { clearTimeout(t1); clearTimeout(t2); clearTimeout(t3); };
  }, [onDone]);

  return (
    <div onClick={onDone} style={{
      position: 'fixed', inset: 0, zIndex: 380, display: 'grid', placeItems: 'center',
      padding: '24px', cursor: 'pointer', textAlign: 'center',
      opacity: phase === 2 ? 0 : 1, transition: 'opacity .45s ease'
    }}>
      <style>{`
        @keyframes splash-you {
          0% { opacity: 0; transform: scale(.6); }
          60% { opacity: 1; transform: scale(1.06); }
          100% { opacity: 1; transform: scale(1); }
        }
        @keyframes splash-rest {
          from { opacity: 0; transform: translateY(26px); filter: blur(6px); }
          to { opacity: 1; transform: translateY(0); filter: blur(0); }
        }
      `}</style>
      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 'clamp(14px, 3vh, 28px)', maxWidth: 900 }}>
        <span style={{
          fontFamily: 'var(--font-display)', fontWeight: 800,
          fontSize: phase === 0 ? 'clamp(72px, 16vw, 180px)' : 'clamp(34px, 6vw, 64px)',
          letterSpacing: '-0.04em', lineHeight: 1,
          background: 'linear-gradient(110deg, var(--accent), oklch(0.78 0.15 88))',
          WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent',
          animation: 'splash-you .7s var(--ease-spring)',
          transition: 'font-size .55s var(--ease-spring)'
        }}>You{phase === 0 ? ' !' : ''}</span>
        {phase >= 1 && (
          <span style={{
            fontFamily: 'var(--font-display)', fontWeight: 700,
            fontSize: 'clamp(26px, 4.6vw, 52px)', letterSpacing: '-0.025em', lineHeight: 1.25,
            color: 'var(--ink)', textWrap: 'balance',
            animation: 'splash-rest .55s var(--ease-spring) backwards'
          }}>{rest}</span>
        )}
        <span className="t-faint" style={{
          fontSize: 12, fontWeight: 600, letterSpacing: '.14em', textTransform: 'uppercase',
          position: 'fixed', bottom: 30, left: 0, right: 0
        }}>EHCW Unstoppables</span>
      </div>
    </div>
  );
}

Object.assign(window, { WelcomeSplash });