// SplashIntro — full-bleed title card that plays on first load (per session).
// Mirrors cbdctracker.hrf.org's intro pattern: title, "Presented by" subtitle,
// then a tasteful fade-out into the site.

function SplashIntro({ onDone }) {
  const [phase, setPhase] = React.useState('enter'); // enter → hold → exit → gone
  const dismissedRef = React.useRef(false);

  React.useEffect(() => {
    // session-scoped: skip if already played this session
    if (sessionStorage.getItem('btpi.splash.played') === '1') {
      dismissedRef.current = true;
      onDone();
      return;
    }
    // Lock scroll while splash is up
    const prevOverflow = document.body.style.overflow;
    document.body.style.overflow = 'hidden';

    const t1 = setTimeout(() => setPhase('hold'),   80);  // start title reveal
    const t2 = setTimeout(() => setPhase('exit'),  2800); // begin exit
    const t3 = setTimeout(() => {
      setPhase('gone');
      document.body.style.overflow = prevOverflow;
      sessionStorage.setItem('btpi.splash.played', '1');
      onDone();
    }, 3500);

    return () => {
      clearTimeout(t1); clearTimeout(t2); clearTimeout(t3);
      document.body.style.overflow = prevOverflow;
    };
  }, [onDone]);

  const skip = () => {
    if (dismissedRef.current) return;
    dismissedRef.current = true;
    setPhase('exit');
    setTimeout(() => {
      setPhase('gone');
      document.body.style.overflow = '';
      sessionStorage.setItem('btpi.splash.played', '1');
      onDone();
    }, 600);
  };

  if (phase === 'gone') return null;

  const isExiting = phase === 'exit';
  const isHold = phase === 'hold' || phase === 'exit';

  return (
    <div
      onClick={skip}
      style={{
        position: 'fixed',
        inset: 0,
        background: 'var(--paper, #faf8f4)',
        zIndex: 9999,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        cursor: 'pointer',
        opacity: isExiting ? 0 : 1,
        transition: 'opacity 600ms cubic-bezier(.22,.61,.36,1)',
      }}>

      {/* Subtle parallel-rule motif in corners — matches editorial design language */}
      <div style={{ position: 'absolute', top: 32, left: 32, right: 32, display: 'flex', justifyContent: 'space-between',
        fontFamily: 'JetBrains Mono, monospace', fontSize: 10, color: 'var(--muted)', textTransform: 'uppercase', letterSpacing: '.16em',
        opacity: isHold ? 1 : 0, transition: 'opacity 800ms 220ms cubic-bezier(.22,.61,.36,1)' }}>
        <span>2026 Edition</span>
        <span>25 Countries · 25,880 Respondents</span>
      </div>
      <div style={{ position: 'absolute', bottom: 32, left: 32, right: 32, display: 'flex', justifyContent: 'space-between',
        fontFamily: 'JetBrains Mono, monospace', fontSize: 10, color: 'var(--muted)', textTransform: 'uppercase', letterSpacing: '.16em',
        opacity: isHold ? 1 : 0, transition: 'opacity 800ms 320ms cubic-bezier(.22,.61,.36,1)' }}>
        <span>Click anywhere to enter →</span>
        <span>v1.0</span>
      </div>

      {/* Center stack */}
      <div style={{ textAlign: 'center', padding: '0 32px', maxWidth: 880 }}>
        {/* "Presented by" eyebrow */}
        <div style={{
          fontFamily: 'JetBrains Mono, monospace',
          fontSize: 11,
          textTransform: 'uppercase',
          letterSpacing: '.22em',
          color: 'var(--muted)',
          marginBottom: 24,
          opacity: isHold ? 1 : 0,
          transform: isHold ? 'translateY(0)' : 'translateY(-8px)',
          transition: 'opacity 700ms cubic-bezier(.22,.61,.36,1), transform 700ms cubic-bezier(.22,.61,.36,1)',
        }}>
          Presented by the Tech Policy Institute in Cornell University's Jeb E. Brooks School of Public Policy
        </div>

        {/* Title — reveals word by word */}
        <h1 style={{
          fontFamily: '"Source Serif 4", Georgia, serif',
          fontSize: 'clamp(48px, 8vw, 112px)',
          letterSpacing: '-0.035em',
          lineHeight: 1.02,
          fontWeight: 500,
          margin: 0,
          color: 'var(--fg, #18181b)',
        }}>
          {['Bitcoin', 'Adoption', 'Index'].map((word, i) => (
            <span key={word} style={{
              display: 'inline-block',
              marginRight: i < 2 ? '0.28em' : 0,
              opacity: isHold ? 1 : 0,
              transform: isHold ? 'translateY(0)' : 'translateY(28px)',
              transition: `opacity 900ms ${260 + i * 140}ms cubic-bezier(.22,.61,.36,1), transform 900ms ${260 + i * 140}ms cubic-bezier(.22,.61,.36,1)`,
            }}>{word}</span>
          ))}
        </h1>

        {/* Bottom-aligned brand mark — appears last */}
        <div style={{
          marginTop: 48,
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 14,
          opacity: isHold ? 1 : 0,
          transform: isHold ? 'translateY(0)' : 'translateY(8px)',
          transition: 'opacity 700ms 900ms cubic-bezier(.22,.61,.36,1), transform 700ms 900ms cubic-bezier(.22,.61,.36,1)',
        }}>
          {/* Cornell-mark style square */}
          <div style={{ width: 12, height: 12, background: 'var(--brand, #b31b1b)' }} />
          <div style={{
            fontFamily: '"Source Serif 4", Georgia, serif',
            fontSize: 15,
            letterSpacing: '-0.005em',
            color: 'var(--fg)',
          }}>
            <span style={{ fontWeight: 500 }}>Tech Policy Institute</span>{' '}
            <span style={{ color: 'var(--muted)' }}>Cornell University</span>
          </div>
        </div>

        {/* Progress hairline */}
        <div style={{
          marginTop: 56,
          width: 220, height: 1,
          margin: '56px auto 0',
          background: 'var(--rule, #e7e3da)',
          overflow: 'hidden',
        }}>
          <div style={{
            height: '100%',
            background: 'var(--brand, #b31b1b)',
            transform: 'translateX(-100%)',
            animation: isHold ? 'btpiSplashProgress 2700ms cubic-bezier(.45,.05,.55,.95) forwards' : 'none',
          }} />
        </div>
      </div>

      <style>{`
        @keyframes btpiSplashProgress {
          from { transform: translateX(-100%); }
          to   { transform: translateX(0); }
        }
      `}</style>
    </div>
  );
}

Object.assign(window, { SplashIntro });