/* global React, Wordmark */
const { useState: useIN, useEffect: useEffIN } = React;

// ════════════════════════════════════════════════════════════
//  INTRO — grand entrance curtain
//  Two stacked panels lift in sequence after the logo resolves.
// ════════════════════════════════════════════════════════════
function Intro() {
  const reduce = typeof window !== 'undefined' && window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  const [phase, setPhase] = useIN(reduce ? 'gone' : 'in'); // 'in' -> 'lift' -> 'gone'

  useEffIN(() => {
    if (reduce) return;
    document.body.style.overflow = 'hidden';
    const t1 = setTimeout(() => setPhase('lift'), 2150);
    const t2 = setTimeout(() => { setPhase('gone'); document.body.style.overflow = ''; }, 3150);
    return () => { clearTimeout(t1); clearTimeout(t2); document.body.style.overflow = ''; };
  }, []);

  const skip = () => { setPhase('gone'); document.body.style.overflow = ''; };

  if (phase === 'gone') return null;
  const lifting = phase === 'lift';

  const panel = (extra) => ({
    position: 'fixed', inset: 0, willChange: 'transform',
    transform: lifting ? 'translateY(-100%)' : 'translateY(0)',
    transition: 'transform 1s cubic-bezier(.76,0,.24,1)',
    ...extra,
  });

  return (
    <div role="presentation" onClick={skip} style={{ position: 'fixed', inset: 0, zIndex: 1000, cursor: 'pointer' }}>
      {/* back curtain — cream, lifts slightly later for layered depth */}
      <div aria-hidden="true" style={panel({ background: 'var(--cream)', zIndex: 1000, transitionDelay: lifting ? '.14s' : '0s' })} />

      {/* front curtain — terracotta, holds the logo */}
      <div style={panel({ background: 'var(--terra)', zIndex: 1001, display: 'grid', placeItems: 'center' })}>
        {/* soft radial glow */}
        <div aria-hidden="true" style={{ position: 'absolute', inset: 0, background: 'radial-gradient(circle at 50% 42%, rgba(250,244,234,0.16), rgba(250,244,234,0) 55%)' }} />

        <div style={{ position: 'relative', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
          <span className="intro-wm wordmark" style={{ fontSize: 'clamp(60px, 13vw, 132px)', color: 'var(--paper)', lineHeight: 0.9 }}>convive</span>
          <svg className="intro-smile" width="min(58vw, 560px)" height="64" viewBox="0 0 200 34" fill="none" aria-hidden="true" style={{ overflow: 'visible' }}>
            <path d="M 6 9 Q 100 41 194 9" stroke="var(--ink)" strokeWidth="6" strokeLinecap="round" />
          </svg>
        </div>

        <span className="intro-skip" style={{ position: 'absolute', bottom: 34, left: '50%', transform: 'translateX(-50%)', fontSize: 12.5, letterSpacing: '.16em', textTransform: 'uppercase', color: 'rgba(250,244,234,0.6)', fontWeight: 600 }}>
          Pular intro
        </span>
      </div>

      <style>{`
        @keyframes introWm {
          0%   { opacity: 0; transform: translateY(26px) scale(.96); filter: blur(14px); letter-spacing: .12em; }
          100% { opacity: 1; transform: none; filter: blur(0); letter-spacing: -.01em; }
        }
        .intro-wm { animation: introWm 1.15s cubic-bezier(.2,.7,.2,1) .18s both; }
        @keyframes introDraw { to { stroke-dashoffset: 0; } }
        .intro-smile path { stroke-dasharray: 232; stroke-dashoffset: 232; animation: introDraw .95s cubic-bezier(.55,0,.2,1) .82s forwards; }
        @keyframes introSkipIn { from { opacity: 0; } to { opacity: 1; } }
        .intro-skip { animation: introSkipIn .6s ease 1.5s both; }
        @media (prefers-reduced-motion: reduce) {
          .intro-wm, .intro-smile path, .intro-skip { animation: none; opacity: 1; stroke-dashoffset: 0; }
        }
      `}</style>
    </div>
  );
}

Object.assign(window, { Intro });