// InkIntro — Boot sequence 2500ms
const { useState, useEffect, useRef, useMemo, useCallback, Suspense, lazy } = React;

function InkIntro({ onDone }) {
  const [phase, setPhase] = useState(0); // 0 drops, 1 splash, 2 reveal, 3 fadeout

  useEffect(() => {
    const t1 = setTimeout(() => setPhase(1), 700);
    const t2 = setTimeout(() => setPhase(2), 1200);
    const t3 = setTimeout(() => setPhase(3), 2200);
    const t4 = setTimeout(() => onDone && onDone(), 2500);
    return () => { [t1,t2,t3,t4].forEach(clearTimeout); };
  }, [onDone]);

  return (
    <motion.div
      initial={{ opacity: 1 }}
      animate={{ opacity: phase === 3 ? 0 : 1 }}
      transition={{ duration: 0.4 }}
      style={{
        position: 'fixed', inset: 0, background: '#000',
        zIndex: 9999, display: 'grid', placeItems: 'center',
        overflow: 'hidden', pointerEvents: phase === 3 ? 'none' : 'auto'
      }}
    >
      {/* 3 falling ink drops */}
      {phase < 1 && [0,1,2].map(i => (
        <motion.div
          key={i}
          initial={{ y: -200, x: (i-1)*40, opacity: 0 }}
          animate={{ y: 0, opacity: 1 }}
          transition={{ duration: 0.6, delay: i*0.08, ease: [0.7, 0, 0.84, 0] }}
          style={{
            position: 'absolute',
            top: '45%', left: '50%',
            marginLeft: -8,
          }}
        >
          <svg width="16" height="26" viewBox="0 0 16 26">
            <path d="M8 2 C8 2, 1 14, 1 20 a7 7 0 0 0 14 0 C15 14, 8 2, 8 2 Z" fill="#CC0000"/>
          </svg>
        </motion.div>
      ))}

      {/* Splash expanding circles */}
      {phase >= 1 && [0,1,2].map(i => (
        <motion.div
          key={`s${i}`}
          initial={{ scale: 0, opacity: 0.9 }}
          animate={{ scale: phase >= 2 ? 40 : 8, opacity: phase >= 2 ? 0 : 0.9 }}
          transition={{ duration: 1, delay: i*0.08, ease: [0.22, 1, 0.36, 1] }}
          style={{
            position: 'absolute',
            top: '50%', left: '50%',
            width: 40, height: 40, marginLeft: -20, marginTop: -20,
            borderRadius: '50%',
            background: i === 1 ? '#8B0000' : '#000',
          }}
        />
      ))}

      {/* ISFER reveal */}
      {phase >= 2 && (
        <motion.div style={{ position: 'relative', textAlign: 'center' }}>
          <motion.h1
            initial={{ clipPath: 'inset(0 100% 0 0)' }}
            animate={{ clipPath: 'inset(0 0% 0 0)' }}
            transition={{ duration: 0.8, ease: [0.22, 1, 0.36, 1] }}
            style={{
              fontFamily: 'var(--font-display)',
              fontSize: 'clamp(60px, 10vw, 140px)',
              color: '#F5F0EB',
              letterSpacing: '0.08em',
              lineHeight: 1,
            }}
          >
            ISFER
          </motion.h1>
          <motion.div
            initial={{ opacity: 0, y: 10 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.4, duration: 0.5 }}
            style={{
              fontFamily: 'var(--font-accent)',
              fontSize: 'clamp(18px, 2vw, 28px)',
              color: '#CC0000',
              letterSpacing: '0.6em',
              marginTop: 12,
              marginLeft: '0.6em'
            }}
          >
            502 TATTOOS
          </motion.div>
        </motion.div>
      )}
    </motion.div>
  );
}

window.InkIntro = InkIntro;