// ROAMR — animated splash screen + Campfind partner mark.
// 3-stage reveal: contour-lines fade in → route line draws → logo + wordmark
// scale-in → tagline fades in → hold → fade out. Skippable on tap.

function SplashScreen({ onDone, logoKey }) {
  const T = window.TOKENS;
  const Logo = (window.LOGOS[logoKey] || window.LOGOS.contour).render;
  const [phase, setPhase] = React.useState(0); // 0 mounting, 1 leaving

  React.useEffect(() => {
    const tIn  = setTimeout(() => setPhase(1), 3300);
    const tEnd = setTimeout(() => onDone && onDone(), 3900);
    return () => { clearTimeout(tIn); clearTimeout(tEnd); };
  }, []);

  // Always-dark moody splash regardless of theme — feels premium across modes.
  return (
    <div
      onClick={() => onDone && onDone()}
      style={{
        position: 'absolute', inset: 0,
        background: 'radial-gradient(ellipse at 50% 60%, #1F1812 0%, #0A0807 60%, #050403 100%)',
        overflow: 'hidden', cursor: 'pointer',
        opacity: phase === 1 ? 0 : 1,
        transition: 'opacity 0.5s ease-out',
        zIndex: 100,
      }}>
      <style>{`
        @keyframes roamrSplashDraw { from { stroke-dashoffset: 1000; } to { stroke-dashoffset: 0; } }
        @keyframes roamrSplashFadeIn { from { opacity: 0; } to { opacity: 1; } }
        @keyframes roamrSplashFadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
        @keyframes roamrSplashMark { 0% { opacity: 0; transform: scale(0.7); } 70% { transform: scale(1.04); } 100% { opacity: 1; transform: scale(1); } }
        @keyframes roamrSplashSpread { from { letter-spacing: 30px; opacity: 0; } to { letter-spacing: 8px; opacity: 1; } }
        @keyframes roamrSplashPulse { 0% { transform: scale(1); opacity: 0.4; } 100% { transform: scale(2); opacity: 0; } }
      `}</style>

      {/* Topographic backdrop — staggered fade-in */}
      <svg viewBox="0 0 400 800" preserveAspectRatio="xMidYMid slice"
        style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
        <defs>
          <linearGradient id="splash-glow" x1="0" y1="0" x2="1" y2="0.5">
            <stop offset="0%" stopColor="#E25E1F" stopOpacity="0"/>
            <stop offset="40%" stopColor="#E25E1F" stopOpacity="1"/>
            <stop offset="60%" stopColor="#F58A4A" stopOpacity="1"/>
            <stop offset="100%" stopColor="#E25E1F" stopOpacity="0"/>
          </linearGradient>
        </defs>
        {/* Contour rings */}
        <g stroke="#2A2418" strokeWidth="1" fill="none">
          {Array.from({ length: 14 }).map((_, i) => {
            const y = 60 + i * 50;
            const delay = 0.05 * i;
            return (
              <path key={i}
                d={`M-20 ${y} Q 100 ${y - 28} 200 ${y - 12} T 420 ${y + 22}`}
                style={{
                  opacity: 0,
                  animation: `roamrSplashFadeIn 0.7s ease-out ${delay}s forwards`,
                }} />
            );
          })}
        </g>
        {/* Echo route — soft glow underlay */}
        <path
          d="M-20 580 Q 80 540 140 480 Q 200 420 250 410 Q 320 400 380 360 Q 430 330 460 280"
          stroke="#E25E1F" strokeWidth="14" fill="none"
          strokeLinecap="round" opacity="0.18"
          style={{
            filter: 'blur(8px)',
            strokeDasharray: 1000,
            strokeDashoffset: 1000,
            animation: 'roamrSplashDraw 1.4s 0.5s cubic-bezier(0.65, 0, 0.35, 1) forwards',
          }} />
        {/* Primary route line */}
        <path
          d="M-20 580 Q 80 540 140 480 Q 200 420 250 410 Q 320 400 380 360 Q 430 330 460 280"
          stroke="url(#splash-glow)" strokeWidth="3.5" fill="none"
          strokeLinecap="round" strokeLinejoin="round"
          style={{
            strokeDasharray: 1000,
            strokeDashoffset: 1000,
            animation: 'roamrSplashDraw 1.4s 0.5s cubic-bezier(0.65, 0, 0.35, 1) forwards',
          }} />
        {/* Start pin */}
        <g style={{ opacity: 0, animation: 'roamrSplashFadeIn 0.4s 1.6s forwards' }}>
          <circle cx="-20" cy="580" r="22" fill="#E25E1F" opacity="0.18"
            style={{ transformOrigin: '-20px 580px', animation: 'roamrSplashPulse 1.6s 2.0s ease-out infinite' }}/>
          <circle cx="-20" cy="580" r="6" fill="#E25E1F" stroke="#fff" strokeWidth="2"/>
        </g>
        {/* End pin */}
        <g style={{ opacity: 0, animation: 'roamrSplashFadeIn 0.4s 1.85s forwards' }}>
          <circle cx="460" cy="280" r="22" fill="#E25E1F" opacity="0.18"
            style={{ transformOrigin: '460px 280px', animation: 'roamrSplashPulse 1.6s 2.2s ease-out infinite' }}/>
          <circle cx="460" cy="280" r="6" fill="#E25E1F" stroke="#fff" strokeWidth="2"/>
        </g>
        {/* Grid noise */}
        <g opacity="0.04">
          {Array.from({ length: 40 }).map((_, i) => {
            const x = (i * 53) % 400, y = (i * 113) % 800;
            return <circle key={i} cx={x} cy={y} r="1" fill="#fff"/>;
          })}
        </g>
      </svg>

      {/* Center stack — logo + wordmark + tagline */}
      <div style={{
        position: 'absolute', inset: 0,
        display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
        gap: 18, padding: 24, textAlign: 'center',
      }}>
        <div style={{
          opacity: 0,
          animation: 'roamrSplashMark 0.9s 1.1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards',
          // ensure dark-friendly variant
        }}>
          {/* Force splash logo to dark-friendly colors */}
          <Logo T={{ ...T, textHi: '#F2EDE2', bg: '#0A0807', signal: '#F58A4A' }} height={86} />
        </div>
        <div style={{
          fontFamily: 'Space Grotesk, system-ui, sans-serif',
          fontWeight: 600, fontSize: 30, color: '#F2EDE2',
          opacity: 0, marginTop: 6,
          animation: 'roamrSplashSpread 0.9s 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards',
          textShadow: '0 1px 12px rgba(245,138,74,0.20)',
        }}>ROAMR</div>
        <div style={{
          fontFamily: 'IBM Plex Sans, system-ui, sans-serif',
          fontSize: 13, color: '#A8AD9D', letterSpacing: 0.4,
          opacity: 0, maxWidth: 280, lineHeight: 1.4,
          animation: 'roamrSplashFadeUp 0.7s 2.1s cubic-bezier(0.16, 1, 0.3, 1) forwards',
        }}>The AI adventure map for trails, byways and wild routes.</div>
      </div>

      {/* Bottom — partner strip + skip */}
      <div style={{
        position: 'absolute', left: 0, right: 0, bottom: 30,
        display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10,
        opacity: 0,
        animation: 'roamrSplashFadeIn 0.6s 2.6s forwards',
      }}>
        <div style={{
          fontFamily: 'JetBrains Mono, monospace', fontSize: 9, color: '#797F72',
          letterSpacing: 2, textTransform: 'uppercase',
        }}>● tap anywhere to enter</div>
      </div>

      {/* Coordinate strip top — premium technical detail */}
      <div style={{
        position: 'absolute', top: 60, left: 22, right: 22,
        display: 'flex', justifyContent: 'space-between',
        fontFamily: 'JetBrains Mono, monospace', fontSize: 9,
        color: '#52483A', letterSpacing: 1.5,
        opacity: 0, animation: 'roamrSplashFadeIn 0.6s 0.7s forwards',
      }}>
        <span>53.1424°N · 1.9789°W</span>
        <span>● BOOTING ROUTE ENGINE</span>
      </div>
    </div>
  );
}

// ─── Campfind partner mark ────────────────────────────────────────────────
// Small wordmark with a flame icon — used as "powered by" badges and on
// stay cards. Reads colors from T so it adapts to palette.
function CampfindMark({ size = 14, color, mono }) {
  const T = window.TOKENS;
  const c = color || (mono ? T.textMid : '#F58A4A');
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 5,
      fontFamily: 'Space Grotesk, system-ui, sans-serif',
      fontWeight: 700, fontSize: size, letterSpacing: -0.2, color: c,
    }}>
      <svg width={size} height={size} viewBox="0 0 14 14" fill="none">
        {/* Flame */}
        <path d="M7 1.5 C 8 4 10.5 5 10.5 8 C 10.5 10.4 9 12 7 12 C 5 12 3.5 10.4 3.5 8 C 3.5 6.6 4.2 5.8 5 5 C 5.5 6 6.5 6 7 4.5 Z"
          fill={c}/>
        <path d="M7 6 C 7.4 7 8.4 7.6 8.4 9 C 8.4 10.2 7.6 11 7 11 C 6.4 11 5.6 10.2 5.6 9 C 5.6 8.3 6 7.9 6.4 7.5"
          fill={mono ? '#0A0807' : '#FFE9D6'} opacity="0.55"/>
      </svg>
      campfind
    </span>
  );
}

function PoweredByCampfind({ tone = 'dim' }) {
  const T = window.TOKENS;
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      fontFamily: T.fontM, fontSize: 9, letterSpacing: 1.4,
      color: tone === 'dim' ? T.textMute : T.textLo, textTransform: 'uppercase',
    }}>
      powered by <CampfindMark size={11} mono={tone === 'dim'} color={tone === 'dim' ? T.textMid : undefined} />
    </span>
  );
}

Object.assign(window, { SplashScreen, CampfindMark, PoweredByCampfind });