// scenes.jsx — the 5 scenes that compose the animation

const W = 1080;
const H = 1920;

// ── Scene 1: Opening — Seoul + "From Seoul" (0–2s) ───────────────────────
function Scene1Opening() {
  const { localTime } = useSprite();
  const taglineOp = animate({ from: 0, to: 1, start: 0.2, end: 1.2 })(localTime);
  const boxY = interpolate([0, 1.5, 2.2], [H + 200, H * 0.6, H * 0.58], Easing.easeOutCubic)(localTime);
  const boxScale = interpolate([0, 1.5, 2.2], [0.4, 1, 1.05], Easing.easeOutCubic)(localTime);
  const boxRot = interpolate([0, 1.5, 2.2], [-8, 2, 4])(localTime);

  return (
    <div style={{ position: 'absolute', inset: 0, background: '#0A0A0A' }}>
      <div style={{ position: 'absolute', inset: 0,
        background: 'radial-gradient(ellipse at 50% 80%, rgba(255,90,95,0.18), transparent 55%), linear-gradient(180deg, #050505 0%, #0a0a0a 50%, #1a0a0a 100%)' }}/>
      {Array.from({length: 40}).map((_, i) => (
        <div key={i} style={{
          position: 'absolute',
          left: `${(i * 47) % 100}%`, top: `${(i * 23) % 60}%`,
          width: 2, height: 2, borderRadius: 99,
          background: WHITE, opacity: 0.3 + (i % 3) * 0.2,
        }}/>
      ))}
      <div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, height: 340, opacity: 0.85 }}>
        <Skyline variant="seoul" width={1080} height={340} color="#000"/>
      </div>

      <div style={{ position: 'absolute', top: 180, left: 0, right: 0, textAlign: 'center', opacity: taglineOp }}>
        <Eyebrow text="MVP MARKETS · PHASE 0—1" x="50%" y={0} size={15}/>
      </div>

      <div style={{
        position: 'absolute', top: 300, left: 0, right: 0,
        textAlign: 'center',
        opacity: taglineOp,
        transform: `translateY(${(1 - taglineOp) * 30}px)`,
      }}>
        <div style={{
          fontFamily: SANS, fontWeight: 800, fontSize: 140,
          letterSpacing: '-5px', color: WHITE, lineHeight: 0.95,
        }}>Shipping</div>
        <div style={{
          fontFamily: SERIF, fontStyle: 'italic', fontWeight: 400,
          fontSize: 140, letterSpacing: '-3px',
          color: 'rgba(255,255,255,0.75)', lineHeight: 0.95,
          marginTop: 8,
        }}>from Seoul.</div>
      </div>

      <div style={{
        position: 'absolute', left: '50%', top: boxY,
        transform: `translate(-50%, -50%) scale(${boxScale}) rotate(${boxRot}deg)`,
      }}>
        <Package x={0} y={0} size={240} label="ICN · 01"/>
      </div>
    </div>
  );
}

// ── CityLane: destination-focused scene ──────────────────────────────────
// Shows a city label on top, a large doorway, package sliding in, compliance
// badge stamping the tax auto-clearance, then a Delivered stamp.
function CityLane({ city, flagEmoji, iata, cityLabel, distance, transit, taxLabel, taxValue, doorVariant, laneNum }) {
  const { localTime, duration } = useSprite();

  // Timing within a 4s scene:
  // 0.0–0.4 : title + cityLabel slide in
  // 0.4–1.6 : package slides in from left
  // 1.6–2.2 : package settles at door
  // 2.2–2.8 : compliance badge stamps in
  // 2.8–3.2 : Delivered stamp appears
  // 3.2–4.0 : hold + fade out
  const labelOp = Easing.easeOutCubic(clamp(localTime / 0.5, 0, 1));
  const labelY = (1 - labelOp) * 24;

  const pkgInProg = interpolate([0.4, 1.8], [0, 1], Easing.easeInOutCubic)(localTime);
  const pkgX = -300 + pkgInProg * (W / 2 + 300);
  const pkgWobble = Math.sin(localTime * 3.5) * 4 * (1 - pkgInProg);
  const pkgVisible = localTime < 1.85;

  const settledOp = interpolate([1.7, 2.0], [0, 1], Easing.easeOutCubic)(localTime);
  const settledRot = interpolate([1.7, 2.2], [-12, -4], Easing.easeOutBack)(localTime);

  const badgeOp = interpolate([2.2, 2.7], [0, 1], Easing.easeOutBack)(localTime);
  const badgeY = interpolate([2.2, 2.7], [30, 0], Easing.easeOutCubic)(localTime);

  const stampOp = interpolate([2.7, 3.0, duration - 0.3, duration], [0, 1, 1, 0])(localTime);
  const stampScale = interpolate([2.7, 3.0], [1.5, 1], Easing.easeOutBack)(localTime);

  const doorScale = interpolate([0, 1.0, duration], [1.02, 1.0, 0.98], Easing.easeOutCubic)(localTime);

  return (
    <div style={{ position: 'absolute', inset: 0,
      background: 'radial-gradient(ellipse at 50% 30%, #1a1a1a 0%, #050505 75%)',
    }}>
      {/* Lane header */}
      <div style={{
        position: 'absolute', top: 70, left: 0, right: 0,
        display: 'flex', justifyContent: 'space-between',
        padding: '0 60px', opacity: labelOp,
        transform: `translateY(${labelY}px)`,
      }}>
        <div style={{
          fontFamily: MONO, fontSize: 16, fontWeight: 700,
          letterSpacing: '0.24em', color: CORAL, textTransform: 'uppercase',
        }}>Semore · Lane {laneNum}</div>
        <div style={{
          fontFamily: MONO, fontSize: 16, fontWeight: 700,
          letterSpacing: '0.24em', color: 'rgba(255,255,255,0.55)',
        }}>{flagEmoji}  {city.toUpperCase()}</div>
      </div>

      {/* Huge destination title */}
      <div style={{
        position: 'absolute', top: 160, left: 0, right: 0,
        textAlign: 'center',
        opacity: labelOp,
        transform: `translateY(${labelY}px)`,
      }}>
        <div style={{
          fontFamily: SANS, fontWeight: 800, fontSize: 240,
          letterSpacing: '-8px', color: WHITE, lineHeight: 0.9,
        }}>{iata}</div>
        <div style={{
          fontFamily: SERIF, fontStyle: 'italic', fontSize: 56,
          color: 'rgba(255,255,255,0.65)', marginTop: 6, letterSpacing: '-1px',
        }}>{cityLabel}</div>
      </div>

      {/* Route breadcrumb */}
      <div style={{
        position: 'absolute', top: 560, left: 0, right: 0,
        display: 'flex', justifyContent: 'center', alignItems: 'center', gap: 20,
        opacity: labelOp,
        fontFamily: MONO, fontSize: 22, fontWeight: 700,
        letterSpacing: '0.3em', textTransform: 'uppercase',
        color: 'rgba(255,255,255,0.5)',
      }}>
        <span>ICN</span>
        <svg width="120" height="18" viewBox="0 0 120 18" fill="none">
          <line x1="4" y1="9" x2="104" y2="9" stroke={CORAL} strokeWidth="1.5"
            strokeLinecap="round" strokeDasharray="3 5" opacity="0.6"/>
          <path d="M 116 9 L 100 2 L 104 9 L 100 16 Z" fill={CORAL}/>
        </svg>
        <span style={{ color: CORAL }}>{iata}</span>
      </div>

      {/* Meta strip */}
      <div style={{
        position: 'absolute', top: 640, left: 0, right: 0,
        display: 'flex', justifyContent: 'center', gap: 54,
        fontFamily: MONO, fontSize: 13, fontWeight: 600,
        opacity: labelOp,
      }}>
        {[
          { label: 'DISTANCE', value: distance },
          { label: 'TRANSIT', value: transit },
          { label: taxLabel.toUpperCase(), value: taxValue },
        ].map((m, i) => (
          <div key={i} style={{ textAlign: 'center' }}>
            <div style={{ color: 'rgba(255,255,255,0.4)', fontSize: 11,
              letterSpacing: '0.2em', marginBottom: 6 }}>{m.label}</div>
            <div style={{ color: WHITE, fontSize: 18, letterSpacing: '-0.2px' }}>{m.value}</div>
          </div>
        ))}
      </div>

      {/* Doorway — large, bottom-centered */}
      <div style={{
        position: 'absolute', left: '50%', bottom: 0,
        width: 680, height: 900,
        transform: `translateX(-50%) scale(${doorScale})`,
        transformOrigin: 'center bottom',
      }}>
        <Doorway x={0} y={0} width={680} height={900} variant={doorVariant}/>
      </div>

      {/* Package sliding in from left (before settling) */}
      {pkgVisible && (
        <div style={{
          position: 'absolute', bottom: 120, left: pkgX,
          transform: `rotate(${pkgWobble}deg)`,
        }}>
          <Package x={0} y={0} size={150} label={iata}/>
        </div>
      )}

      {/* Package settled at door */}
      {localTime > 1.7 && (
        <div style={{
          position: 'absolute', bottom: 90,
          left: '50%',
          transform: `translateX(-50%) rotate(${settledRot}deg)`,
          opacity: settledOp,
        }}>
          <Package x={0} y={0} size={180} label={iata}/>
        </div>
      )}

      {/* Compliance badge — left side */}
      <div style={{
        position: 'absolute',
        bottom: 520, left: 60,
        opacity: badgeOp,
        transform: `translateY(${badgeY}px)`,
      }}>
        <ComplianceBadge
          label={taxLabel + ' · AUTO'}
          sub={taxValue}
          x={0} y={0}
        />
      </div>

      {/* Delivered stamp — right side, rotated */}
      {localTime > 2.7 && (
        <div style={{
          position: 'absolute', bottom: 420, right: 60,
          opacity: stampOp,
          transform: `rotate(-6deg) scale(${stampScale})`,
          border: `4px solid ${GREEN}`,
          borderRadius: 10,
          padding: '14px 24px',
          fontFamily: MONO, fontSize: 26, fontWeight: 800,
          letterSpacing: '0.2em', color: GREEN,
          textTransform: 'uppercase',
          background: 'rgba(34,168,121,0.1)',
          backdropFilter: 'blur(4px)',
        }}>
          Delivered
        </div>
      )}
    </div>
  );
}

// ── Scene 5: Outro — map + "To the world." ──────────────────────────────
function SceneOutro({ endTitle = 'To the world.' }) {
  const { localTime } = useSprite();
  const titleOp = interpolate([2.0, 2.8], [0, 1], Easing.easeOutCubic)(localTime);
  const subOp = interpolate([2.6, 3.2], [0, 1], Easing.easeOutCubic)(localTime);

  const arcProgs = [
    interpolate([0.3, 1.5], [0, 1], Easing.easeInOutCubic)(localTime),
    interpolate([0.6, 1.8], [0, 1], Easing.easeInOutCubic)(localTime),
    interpolate([0.9, 2.1], [0, 1], Easing.easeInOutCubic)(localTime),
  ];

  return (
    <div style={{ position: 'absolute', inset: 0, background: '#050505' }}>
      <div style={{ position: 'absolute', inset: 0,
        background: 'radial-gradient(ellipse at 50% 55%, rgba(255,90,95,0.15), transparent 60%)' }}/>

      <div style={{ position: 'absolute', top: H * 0.28, left: 40, right: 40, height: 560 }}>
        <WorldMap x={0} y={0} width={1000} height={560} progress={arcProgs}/>
      </div>

      <div style={{
        position: 'absolute', top: H * 0.58, left: 0, right: 0,
        display: 'flex', justifyContent: 'center', gap: 18,
        opacity: interpolate([2.0, 2.6], [0, 1])(localTime),
      }}>
        {[
          { flag: '🇪🇺', code: 'BER', tax: 'IOSS auto' },
          { flag: '🇯🇵', code: 'HND', tax: '消費税 auto' },
          { flag: '🇺🇸', code: 'JFK', tax: '≤ $800 duty-free' },
        ].map((d, i) => (
          <div key={i} style={{
            padding: '14px 20px',
            background: 'rgba(255,255,255,0.05)',
            border: `1px solid rgba(255,90,95,0.4)`,
            borderRadius: 14,
            fontFamily: MONO, fontSize: 14, fontWeight: 700,
            color: WHITE, letterSpacing: '0.06em',
            display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6,
          }}>
            <div style={{ fontSize: 22 }}>{d.flag}</div>
            <div style={{ color: CORAL, fontSize: 18, letterSpacing: '0.1em' }}>{d.code}</div>
            <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.6)', letterSpacing: '0.08em' }}>{d.tax}</div>
          </div>
        ))}
      </div>

      <div style={{
        position: 'absolute', top: 180, left: 0, right: 0, textAlign: 'center',
        opacity: titleOp,
        transform: `translateY(${(1 - titleOp) * 20}px)`,
      }}>
        <div style={{
          fontFamily: SANS, fontWeight: 800, fontSize: 110,
          letterSpacing: '-4px', color: WHITE, lineHeight: 0.95,
        }}>Shipping from Seoul.</div>
      </div>

      <div style={{
        position: 'absolute', top: H - 480, left: 0, right: 0, textAlign: 'center',
        opacity: subOp,
        transform: `translateY(${(1 - subOp) * 20}px)`,
      }}>
        <div style={{
          fontFamily: SERIF, fontStyle: 'italic', fontWeight: 400,
          fontSize: 120, letterSpacing: '-3px', color: CORAL, lineHeight: 0.95,
        }}>{endTitle}</div>
      </div>

      <div style={{
        position: 'absolute', bottom: 110, left: 0, right: 0, textAlign: 'center',
        opacity: subOp,
      }}>
        <div style={{
          fontFamily: MONO, fontSize: 16, fontWeight: 700,
          letterSpacing: '0.32em', color: 'rgba(255,255,255,0.5)',
          textTransform: 'uppercase',
        }}>ICN → BER · HND · JFK</div>
      </div>
    </div>
  );
}

Object.assign(window, { Scene1Opening, CityLane, SceneOutro });