function Splash({ onDone, hold }) {
  React.useEffect(() => { if (hold) return; const t = setTimeout(() => onDone && onDone(), 2200); return () => clearTimeout(t); }, [hold]);
  const ring = (d, delay) => <div style={{ position: 'absolute', width: d, height: d, borderRadius: '50%', border: '1px solid rgba(227,30,36,.28)', animation: 'splashRing 2.6s ' + delay + 's cubic-bezier(.2,.7,.3,1) infinite' }}></div>;
  return (
    <div style={{ flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', background: 'var(--surface-1)', position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(circle at 50% 42%, #FDECEC 0%, rgba(253,236,236,0) 62%)' }}></div>
      <div style={{ position: 'absolute', top: '42%', left: '50%', transform: 'translate(-50%,-50%)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        {ring(210, 0)}{ring(300, .5)}{ring(390, 1)}
      </div>
      <div style={{ position: 'relative', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 18, marginTop: -70 }}>
        <span className="spoture-wordmark" style={{ '--wm-size': '92px', animation: 'splashIn .9s cubic-bezier(.2,.8,.2,1) both' }}></span>
        <span style={{ font: 'var(--text-body)', color: 'var(--text-secondary)', animation: 'splashIn .9s .25s cubic-bezier(.2,.8,.2,1) both' }}>지금 여기, 내가 찾은 맛집</span>
      </div>
      <div style={{ position: 'absolute', left: 0, right: 0, bottom: 46, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 16 }}>
        <div style={{ width: 34, height: 3, borderRadius: 999, background: 'var(--border-strong)', overflow: 'hidden' }}><div style={{ height: '100%', background: 'var(--text-accent)', animation: 'splashBar 2.1s linear both' }}></div></div>
        <span style={{ font: 'var(--text-micro)', color: 'var(--text-muted)', letterSpacing: '.08em' }}>SPOTURE · 2026</span>
      </div>
    </div>
  );
}
window.Splash = Splash;