A central headline anchors a radial explosion of mail-themed stickers that scatter across

import React, { useEffect, useMemo } from 'react';
import { motion, useAnimation } from 'framer-motion';

const STICKER_COUNT = 22;
const COLORS = ['#7096BB', '#E7A1B0', '#D9C5B2', '#F3D34A', '#8B5E3C'];
const EASE_OUT_BACK = [0.34, 1.56, 0.64, 1];

const ShapeRenderer = ({ type, color }) => {
  switch (type) {
    case 'tag':
      return (
        <svg viewBox="0 0 100 60" fill={color} style={{ width: '100%', height: '100%' }}>
          <path d="M0,10 Q0,0 10,0 L70,0 L100,30 L70,60 L10,60 Q0,60 0,50 Z" />
          <circle cx="15" cy="30" r="5" fill="white" />
        </svg>
      );
    case 'envelope':
      return (
        <svg viewBox="0 0 100 70" fill={color} style={{ width: '100%', height: '100%' }}>
          <rect width="100" height="70" rx="4" />
          <path d="M0,0 L50,35 L100,0" fill="none" stroke="rgba(0,0,0,0.1)" strokeWidth="2" />
        </svg>
      );
    case 'badge':
      return (
        <svg viewBox="0 0 100 100" fill={color} style={{ width: '100%', height: '100%' }}>
          <circle cx="50" cy="50" r="45" stroke="rgba(0,0,0,0.1)" strokeWidth="2" strokeDasharray="4 2" />
          <path d="M50,20 L58,38 L78,38 L62,50 L68,70 L50,58 L32,70 L38,50 L22,38 L42,38 Z" fill="rgba(255,255,255,0.5)" />
        </svg>
      );
    case 'coffee':
      return (
        <svg viewBox="0 0 80 100" fill={color} style={{ width: '100%', height: '100%' }}>
          <path d="M10,20 L70,20 L60,90 Q60,100 50,100 L30,100 Q20,100 20,90 Z" />
          <path d="M70,30 Q80,30 80,45 Q80,60 70,60" fill="none" stroke={color} strokeWidth="8" />
          <rect x="5" y="10" width="70" height="15" rx="5" fill="rgba(0,0,0,0.1)" />
        </svg>
      );
    case 'house':
      return (
        <svg viewBox="0 0 100 100" fill={color} style={{ width: '100%', height: '100%' }}>
          <path d="M10,40 L50,0 L90,40 L90,90 Q90,100 80,100 L20,100 Q10,100 10,90 Z" />
          <rect x="40" y="60" width="20" height="40" fill="rgba(0,0,0,0.2)" />
        </svg>
      );
    case 'plane':
      return (
        <svg viewBox="0 0 100 100" fill={color} style={{ width: '100%', height: '100%' }}>
          <path d="M0,50 L100,20 L80,50 L100,80 Z" />
          <path d="M0,50 L40,50 L20,70 Z" fill="rgba(0,0,0,0.1)" />
        </svg>
      );
    default:
      return null;
  }
};

const Sticker = ({ index }) => {
  const controls = useAnimation();
  
  const config = useMemo(() => {
    const angle = (index / STICKER_COUNT) * Math.PI * 2 + (Math.random() * 0.4 - 0.2);
    const radius = 280 + Math.random() * 180;
    return {
      x: Math.cos(angle) * radius,
      y: Math.sin(angle) * radius,
      size: 80 + (index % 5) * 15,
      type: ['tag', 'envelope', 'badge', 'coffee', 'house', 'plane'][index % 6],
      color: COLORS[index % COLORS.length],
      rotation: Math.random() * 40 - 20,
      driftDelay: Math.random() * 2
    };
  }, [index]);

  useEffect(() => {
    const sequence = async () => {
      // 1. Assembly (3330ms)
      await new Promise(r => setTimeout(r, 3330 + index * 30));
      await controls.start({
        scale: 1,
        opacity: 1,
        transition: { duration: 0.9, ease: [0.22, 1, 0.36, 1] }
      });

      // 2. Explosion (4350ms)
      await new Promise(r => setTimeout(r, (4350 - (3330 + index * 30 + 900)) + index * 10));
      await controls.start({
        x: config.x,
        y: config.y,
        rotate: config.rotation,
        transition: { duration: 0.65, ease: EASE_OUT_BACK }
      });

      // 3. Ambient Drift (5000ms)
      controls.start({
        x: [config.x, config.x + 15, config.x],
        y: [config.y, config.y - 10, config.y],
        rotate: [config.rotation, config.rotation + 3, config.rotation - 3, config.rotation],
        transition: {
          duration: 5,
          repeat: Infinity,
          ease: "easeInOut",
          times: [0, 0.5, 1],
          rotate: { duration: 4, repeat: Infinity, ease: "easeInOut" }
        }
      });
    };
    sequence();
  }, [controls, index, config]);

  return (
    <motion.div
      initial={{ scale: 0, opacity: 0, x: 0, y: 0, rotate: 0 }}
      animate={controls}
      style={{
        position: 'absolute',
        width: config.size,
        height: config.size,
        zIndex: 10,
        filter: 'drop-shadow(0 10px 15px rgba(0,0,0,0.08))'
      }}
    >
      <ShapeRenderer type={config.type} color={config.color} />
    </motion.div>
  );
};

export default function MotionLensMailScene() {
  return (
    <motion.div 
      initial={{ opacity: 1 }}
      animate={{ opacity: 0 }}
      transition={{ delay: 9.75, duration: 0.25, ease: "easeIn" }}
      style={{
        width: '100vw',
        height: '100vh',
        backgroundColor: '#F9F9F7',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        overflow: 'hidden',
        position: 'relative',
        fontFamily: 'Inter, system-ui, sans-serif'
      }}
    >
      {/* Background Grid */}
      <div style={{
        position: 'absolute',
        inset: 0,
        backgroundImage: 'radial-gradient(#D1D1D1 1.5px, transparent 1.5px)',
        backgroundSize: '48px 48px',
        opacity: 0.4
      }} />

      {/* Stickers Layer */}
      {Array.from({ length: STICKER_COUNT }).map((_, i) => (
        <Sticker key={i} index={i} />
      ))}

      {/* Headline & Focus Ring */}
      <div style={{ position: 'relative', zIndex: 30 }}>
        <motion.h1
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ delay: 1.75, duration: 0.25, ease: "easeOut" }}
          style={{
            fontSize: '64px',
            fontWeight: '900',
            color: '#000',
            margin: 0,
            letterSpacing: '-0.04em',
            textAlign: 'center'
          }}
        >
          Got Mail?
        </motion.h1>

        <motion.div
          initial={{ opacity: 0, scale: 0.8 }}
          animate={{ opacity: 1, scale: 1 }}
          transition={{ delay: 8.45, duration: 0.4, ease: "easeOut" }}
          style={{
            position: 'absolute',
            top: '50%',
            left: '50%',
            x: '-50%',
            y: '-50%',
            width: '320px',
            height: '100px',
            border: '3px dashed #000',
            borderRadius: '100px',
            pointerEvents: 'none'
          }}
        />
      </div>

      {/* Floating Bird */}
      <motion.div
        initial={{ opacity: 0, x: '60vw', y: 0 }}
        animate={{ 
          opacity: [0, 0.8, 0.8, 0],
          x: '-60vw',
          y: [0, -40, 0]
        }}
        transition={{ 
          delay: 6,
          duration: 3.5,
          ease: "linear",
          opacity: { times: [0, 0.1, 0.9, 1], duration: 3.5 },
          y: { duration: 1.75, repeat: Infinity, ease: "easeInOut" }
        }}
        style={{
          position: 'absolute',
          width: '140px',
          height: '100px',
          zIndex: 40,
          pointerEvents: 'none'
        }}
      >
        <svg viewBox="0 0 120 80" fill="#F5F5DC">
          <path d="M10,40 Q30,10 60,40 Q90,70 110,40 Q90,30 60,10 Q30,30 10,40" />
          <path d="M40,35 Q60,20 80,35" fill="none" stroke="rgba(0,0,0,0.1)" strokeWidth="2" />
        </svg>
      </motion.div>
    </motion.div>
  );
}