// Splash.jsx — LaVid brand splash, ProMotion-tuned cinematic intro.
// Defines the shared LavidMark SVG (real, vectorized logo), then composes
// the splash around it with stroke-draw → fill → glow → light-sweep → wordmark.

// -- LavidMark ------------------------------------------------------------
// The real Lavid emblem, vectorized from assets/lavid-logo-white-bold.png
// (potrace, two subpaths). Renders as inline SVG so we can animate strokes,
// fill-opacity, and per-path timing.
//
// Props:
//   size        — px (default 80)
//   color       — fill/stroke color (default white)
//   animated    — when true, plays the draw → fill → settle intro ONCE (used by splash)
//   loop        — when true, runs the draw → fill → fade cycle FOREVER via CSS keyframes
//   strokeWidth — stroke width in path-coord units (×10 of viewBox); pick higher for smaller sizes
const LAVID_PATH_PETAL =
  'M876 2548 c-13 -19 -16 -61 -16 -262 0 -230 1 -241 21 -262 20 -21 27 -22 105 -17 138 10 264 -24 381 -103 71 -48 84 -52 103 -29 9 11 9 27 0 72 -54 260 -228 471 -485 588 -42 19 -80 35 -85 35 -5 0 -16 -10 -24 -22z';
const LAVID_PATH_BODY =
  'M1853 2215 c-177 -48 -342 -211 -378 -374 -4 -17 -8 -31 -10 -31 -1 0 -22 11 -47 25 -69 38 -162 58 -244 52 -178 -13 -352 -162 -400 -341 -54 -203 57 -425 260 -520 72 -33 139 -41 160 -17 19 21 14 27 -49 59 -57 29 -97 70 -125 127 -21 41 -25 64 -25 135 1 75 4 91 30 139 53 96 133 141 252 141 157 0 267 -101 280 -257 4 -57 1 -79 -20 -134 -25 -67 -23 -89 9 -89 16 0 67 59 100 117 15 26 29 49 30 51 1 2 19 -7 41 -20 59 -37 112 -55 202 -68 l82 -12 -6 -47 c-4 -25 -20 -75 -37 -109 -24 -50 -40 -70 -77 -93 -65 -42 -142 -63 -199 -54 -95 13 -151 49 -235 150 -25 29 -25 29 -46 11 -64 -58 90 -277 246 -348 140 -64 308 -45 433 48 54 41 122 120 150 174 39 75 52 219 26 303 l-14 47 82 82 c89 89 128 157 149 254 10 47 9 56 -6 71 -15 16 -18 15 -37 -2 -11 -10 -33 -42 -50 -71 -59 -106 -170 -160 -309 -152 -127 8 -219 68 -270 178 -22 47 -26 69 -26 150 0 85 3 101 29 150 61 119 145 171 288 178 119 6 139 31 60 71 -81 41 -204 51 -299 26z';

function LavidMark({ size = 80, color = '#FFFFFF', animated = false, loop = false, strokeWidth = 50 }) {
  // React-state path: 0 = hidden, 1 = drawing, 2 = filling, 3 = settled.
  const [phase, setPhase] = React.useState(animated && !loop ? 0 : 3);

  React.useEffect(() => {
    if (!animated || loop) return;  // loop runs via CSS, not state
    const r1 = requestAnimationFrame(() => setPhase(1));
    const t2 = setTimeout(() => setPhase(2), 1100);
    const t3 = setTimeout(() => setPhase(3), 1700);
    return () => { cancelAnimationFrame(r1); clearTimeout(t2); clearTimeout(t3); };
  }, [animated, loop]);

  const ease = 'cubic-bezier(0.22, 1, 0.36, 1)';

  // Static / one-shot path style (driven by `phase` state).
  const reactStyle = (delay) => ({
    fill: color, stroke: color, strokeWidth,
    strokeLinecap: 'round', strokeLinejoin: 'round',
    strokeDasharray: 100,
    strokeDashoffset: phase === 0 ? 100 : 0,
    fillOpacity: phase >= 2 ? 1 : 0,
    strokeOpacity: phase === 0 ? 0 : (phase === 3 ? 0 : 0.95),
    transition:
      `stroke-dashoffset 1.0s ${ease} ${delay}s, ` +
      `fill-opacity 0.55s ${ease} ${1.0 + delay}s, ` +
      `stroke-opacity 0.55s ${ease} ${1.4 + delay}s`,
  });

  // Loop path style — the keyframe owns dashoffset / fill-opacity / stroke-opacity.
  const loopStyle = (delay) => ({
    fill: color, stroke: color, strokeWidth,
    strokeLinecap: 'round', strokeLinejoin: 'round',
    strokeDasharray: 100,
    animation: `lavidMarkLoop 4s cubic-bezier(0.4, 0, 0.2, 1) ${delay}s infinite both`,
  });

  const styleFn = loop ? loopStyle : reactStyle;

  return (
    <svg
      width={size} height={size}
      viewBox="0 0 172 190"
      preserveAspectRatio="xMidYMid meet"
      style={{ overflow: 'visible', display: 'block' }}
    >
      {loop && (
        <defs>
          <style>{`
            @keyframes lavidMarkLoop {
              0%, 4%   { stroke-dashoffset: 100; fill-opacity: 0; stroke-opacity: 0; }
              5%       { stroke-dashoffset: 100; fill-opacity: 0; stroke-opacity: 0.95; }
              28%      { stroke-dashoffset: 0;   fill-opacity: 0; stroke-opacity: 0.95; }
              42%      { stroke-dashoffset: 0;   fill-opacity: 1; stroke-opacity: 0.5;  }
              52%      { stroke-dashoffset: 0;   fill-opacity: 1; stroke-opacity: 0;    }
              82%      { stroke-dashoffset: 0;   fill-opacity: 1; stroke-opacity: 0;    }
              92%, 100%{ stroke-dashoffset: 100; fill-opacity: 0; stroke-opacity: 0;    }
            }
          `}</style>
        </defs>
      )}
      <g transform="translate(-76.0353,257) scale(0.1,-0.1)">
        <path d={LAVID_PATH_PETAL} pathLength="100" style={styleFn(0)} />
        <path d={LAVID_PATH_BODY}  pathLength="100" style={styleFn(0.18)} />
      </g>
    </svg>
  );
}
Object.assign(window, { LavidMark });

// -- SplashScreen ---------------------------------------------------------
function SplashScreen({ onDone }) {
  // 0: ambient · 1: logo entering (mark plays its own draw cycle) · 2: light-sweep
  // 3: wordmark · 4: exit
  const [phase, setPhase] = React.useState(0);

  React.useEffect(() => {
    const t1 = setTimeout(() => setPhase(1),  150);
    const t2 = setTimeout(() => setPhase(2), 1500);  // mark mid-fill
    const t3 = setTimeout(() => setPhase(3), 2200);  // wordmark
    const t4 = setTimeout(() => setPhase(4), 3300);  // exit start
    const tEnd = setTimeout(() => onDone && onDone(), 3700);
    return () => [t1, t2, t3, t4, tEnd].forEach(clearTimeout);
  }, []);

  const EASE = 'cubic-bezier(0.22, 1, 0.36, 1)';

  return (
    <div style={{
      height: '100%', position: 'relative', overflow: 'hidden',
      background: 'radial-gradient(ellipse at 50% 40%, #6B2BD9 0%, #3A1599 40%, #1A0840 80%, #08051A 100%)',
      display: 'flex', flexDirection: 'column',
      alignItems: 'center', justifyContent: 'center',
      opacity: phase >= 4 ? 0 : 1,
      transform: phase >= 4 ? 'scale(1.04)' : 'scale(1)',
      transition: `opacity 0.5s ${EASE}, transform 0.6s ${EASE}`,
    }}>
      <style>{`
        @keyframes lvRise {
          0%   { opacity: 0; transform: translate(-50%, -42%) scale(0.78); filter: blur(10px); }
          60%  { opacity: 1; transform: translate(-50%, -51%) scale(1.04); filter: blur(0); }
          100% { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: blur(0); }
        }
        @keyframes lvHalo {
          0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(1); }
          50%      { opacity: 0.95; transform: translate(-50%, -50%) scale(1.08); }
        }
        @keyframes lvSweep {
          0%   { transform: translateX(-140%) skewX(-22deg); opacity: 0; }
          15%  { opacity: 0.9; }
          85%  { opacity: 0.9; }
          100% { transform: translateX(220%) skewX(-22deg); opacity: 0; }
        }
        @keyframes lvWordRise {
          0%   { opacity: 0; transform: translateY(18px); filter: blur(6px); letter-spacing: 8px; }
          100% { opacity: 1; transform: translateY(0);    filter: blur(0);  letter-spacing: -2px; }
        }
        @keyframes lvTagSpread {
          0%   { opacity: 0; letter-spacing: 1px; }
          100% { opacity: 1; letter-spacing: 4px; }
        }
        @keyframes lvFloat {
          0%, 100% { transform: translate(-50%, -50%) translateY(0); }
          50%      { transform: translate(-50%, -50%) translateY(-4px); }
        }
        @keyframes lvHaloPulse {
          0%, 100% { opacity: 0.45; transform: scale(1); }
          50%      { opacity: 0.85; transform: scale(1.08); }
        }
      `}</style>

      {/* breathing aura */}
      <div style={{
        position: 'absolute', top: '50%', left: '50%',
        width: 460, height: 460, borderRadius: '50%',
        background: 'radial-gradient(circle, rgba(192,132,252,0.45), transparent 60%)',
        filter: 'blur(70px)',
        animation: 'lvHalo 4.2s ease-in-out infinite',
      }} />

      {/* concentric rings */}
      {[1, 2, 3].map(i => (
        <div key={i} style={{
          position: 'absolute', top: '50%', left: '50%',
          width: 200 + i * 90, height: 200 + i * 90, borderRadius: '50%',
          transform: 'translate(-50%, -50%)',
          border: `1px solid rgba(221, 214, 254, ${0.28 - i * 0.06})`,
          animation: `hlbreathe ${3.4 + i * 0.5}s ease-in-out infinite`,
          animationDelay: `${i * 0.25}s`,
          opacity: phase >= 1 ? 1 : 0,
          transition: `opacity 0.6s ${EASE}`,
        }} />
      ))}

      {/* sparkle particles */}
      {[
        { x: '20%', y: '25%', d: 0 },
        { x: '78%', y: '22%', d: 0.4 },
        { x: '85%', y: '68%', d: 0.8 },
        { x: '15%', y: '72%', d: 1.2 },
        { x: '50%', y: '15%', d: 1.6 },
      ].map((p, i) => (
        <div key={i} style={{
          position: 'absolute', left: p.x, top: p.y,
          width: 4, height: 4, borderRadius: '50%',
          background: 'white', boxShadow: '0 0 12px rgba(255,255,255,0.9)',
          animation: 'hlsparkle 2.4s ease-in-out infinite',
          animationDelay: `${p.d}s`,
        }} />
      ))}

      {/* grain */}
      <div style={{
        position: 'absolute', inset: 0, opacity: 0.06, pointerEvents: 'none',
        backgroundImage: 'radial-gradient(rgba(255,255,255,0.5) 1px, transparent 1px)',
        backgroundSize: '3px 3px',
      }} />

      {/* logo stage — the real LavidMark drawing itself in */}
      <div style={{
        position: 'absolute', top: '44%', left: '50%',
        width: 168, height: 168,
        transform: 'translate(-50%, -50%)',
        animation: phase >= 1 ? `lvRise 1.0s ${EASE} both, lvFloat 5s ease-in-out 1.2s infinite` : 'none',
        opacity: phase >= 1 ? 1 : 0,
      }}>
        {/* halo behind the mark, ramps up after the draw completes */}
        <div style={{
          position: 'absolute', inset: -50, borderRadius: '50%',
          background: 'radial-gradient(circle, rgba(221,214,254,0.55), rgba(168,85,247,0.18) 45%, transparent 70%)',
          filter: 'blur(20px)',
          opacity: phase >= 2 ? 1 : 0.35,
          transform: phase >= 2 ? 'scale(1.05)' : 'scale(0.92)',
          animation: phase >= 3 ? 'lvHaloPulse 3.5s ease-in-out infinite' : 'none',
          transition: `opacity 1.0s ${EASE}, transform 1.0s ${EASE}`,
        }} />

        {/* the actual brand mark, with stroke-draw → fill animation */}
        <div style={{
          position: 'relative',
          width: '100%', height: '100%',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          filter: phase >= 2
            ? 'drop-shadow(0 0 22px rgba(221,214,254,0.85)) drop-shadow(0 0 60px rgba(168,85,247,0.55))'
            : 'drop-shadow(0 0 10px rgba(192,132,252,0.4))',
          transition: `filter 0.9s ${EASE}`,
        }}>
          {phase >= 1 && <LavidMark size={150} animated strokeWidth={42} />}
        </div>

        {/* light-sweep — fires once at phase 2, mid-fill of the mark */}
        {phase >= 2 && phase < 4 && (
          <div style={{
            position: 'absolute', inset: 0, overflow: 'hidden',
            borderRadius: 12, pointerEvents: 'none',
            mixBlendMode: 'screen',
          }}>
            <div style={{
              position: 'absolute', top: 0, bottom: 0, width: '40%',
              background: 'linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent)',
              animation: 'lvSweep 1.2s cubic-bezier(0.4, 0, 0.2, 1) 0.05s 1 both',
            }} />
          </div>
        )}
      </div>

      {/* wordmark + tagline */}
      <div style={{
        position: 'absolute', top: '64%', left: '50%',
        transform: 'translateX(-50%)',
        textAlign: 'center', zIndex: 2,
      }}>
        <div style={{
          fontFamily: 'var(--hl-font-display)',
          fontSize: 56, fontWeight: 400,
          color: '#fff', lineHeight: 0.95,
          fontStyle: 'italic',
          textShadow: '0 4px 30px rgba(192, 132, 252, 0.45)',
          opacity: phase >= 3 ? 1 : 0,
          animation: phase >= 3 ? `lvWordRise 0.85s ${EASE} both` : 'none',
        }}>LaVid</div>
        <div style={{
          marginTop: 14,
          fontFamily: 'var(--hl-font-mono)', fontSize: 10,
          color: 'rgba(255,255,255,0.7)',
          textTransform: 'uppercase', fontWeight: 500,
          opacity: phase >= 3 ? 1 : 0,
          animation: phase >= 3 ? `lvTagSpread 0.9s ${EASE} 0.25s both` : 'none',
        }}>Worship · Lyrics · Studio</div>
      </div>

      {/* loading dots */}
      <div style={{
        position: 'absolute', bottom: 80, left: '50%', transform: 'translateX(-50%)',
        display: 'flex', gap: 6, zIndex: 3,
        opacity: phase >= 1 && phase < 4 ? 1 : 0,
        transition: `opacity 0.5s ${EASE}`,
      }}>
        {[0, 1, 2].map(i => (
          <div key={i} style={{
            width: 6, height: 6, borderRadius: '50%',
            background: 'rgba(255,255,255,0.7)',
            animation: 'hlbreathe 1.2s ease-in-out infinite',
            animationDelay: `${i * 0.18}s`,
          }} />
        ))}
      </div>

      <div style={{
        position: 'absolute', bottom: 36, left: 0, right: 0,
        textAlign: 'center', zIndex: 2,
        fontFamily: 'var(--hl-font-mono)', fontSize: 9,
        color: 'rgba(255,255,255,0.5)', letterSpacing: 2,
        textTransform: 'uppercase',
        opacity: phase >= 3 ? 1 : 0,
        transition: `opacity 0.8s ${EASE} 0.4s`,
      }}>
        Iglesia LaVid · Valencia · Torrevieja
      </div>
    </div>
  );
}

Object.assign(window, { SplashScreen });