// KarlaPay — Scenes
// Brand: #FF6A1A orange, #0D0F14 bg, Satoshi + Caveat
// Arc (30s): Logo build → Problem → Carla (orb/waveform) → Result → Tagline/CTA

const BG = '#0D0F14';
const ORANGE = '#FF6A1A';
const INK = '#FFFFFF';
const MUTED = '#6B7280';
const PANEL = '#14171F';
const LINE = '#2A2F3A';

const SATOSHI = '"Satoshi", "Inter", system-ui, sans-serif';
const CAVEAT = '"Caveat", "Brush Script MT", cursive';
const MONO = '"JetBrains Mono", ui-monospace, monospace';

// ─────────────────────────────────────────────────────────────────────────────
// Ambient background — subtle radial orange glow + grid
function AmbientBG() {
  const t = useTime();
  const pulse = 0.7 + 0.3 * Math.sin(t * 0.8);
  return (
    <div style={{ position: 'absolute', inset: 0, background: BG, overflow: 'hidden' }}>
      {/* Orange glow */}
      <div style={{
        position: 'absolute',
        left: '50%', top: '50%',
        width: 1800, height: 1800,
        transform: 'translate(-50%, -50%)',
        background: `radial-gradient(circle, rgba(255,106,26,${0.12 * pulse}) 0%, rgba(255,106,26,0) 55%)`,
        pointerEvents: 'none',
      }}/>
      {/* Faint grid */}
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: `
          linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
          linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px)
        `,
        backgroundSize: '64px 64px',
        maskImage: 'radial-gradient(circle at center, black 30%, transparent 75%)',
        WebkitMaskImage: 'radial-gradient(circle at center, black 30%, transparent 75%)',
      }}/>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// SCENE 1 — Logo build (0.0 → 5.0s)
// "Karla" writes on in Caveat, then "pay" joins with a fade, tagline follows.
function SceneLogo() {
  const { localTime, progress } = useSprite();

  // Handwriting reveal: clip-path sweeps left→right over Caveat "Karla"
  const writeDur = 1.9;
  const writeT = clamp(localTime / writeDur, 0, 1);
  const writeEased = Easing.easeInOutCubic(writeT);

  // "pay" appears at 1.8s
  const payStart = 1.9;
  const payT = clamp((localTime - payStart) / 0.6, 0, 1);
  const payEased = Easing.easeOutCubic(payT);

  // Tagline at 2.7s
  const tagStart = 2.7;
  const tagT = clamp((localTime - tagStart) / 0.7, 0, 1);
  const tagEased = Easing.easeOutCubic(tagT);

  // Exit at end
  const exitStart = 4.3;
  const exitT = clamp((localTime - exitStart) / 0.7, 0, 1);
  const exitEased = Easing.easeInCubic(exitT);
  const exitOpacity = 1 - exitT;
  const exitScale = 1 - exitEased * 0.04;

  return (
    <div style={{
      position: 'absolute', inset: 0,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      opacity: exitOpacity,
      transform: `scale(${exitScale})`,
    }}>
      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 32 }}>
        {/* Wordmark */}
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 4 }}>
          {/* "Karla" in Caveat — clipped reveal */}
          <div style={{
            position: 'relative',
            fontFamily: CAVEAT,
            fontSize: 220,
            fontWeight: 700,
            color: ORANGE,
            lineHeight: 1,
            letterSpacing: '-0.01em',
            clipPath: `inset(0 ${(1 - writeEased) * 100}% 0 0)`,
            WebkitClipPath: `inset(0 ${(1 - writeEased) * 100}% 0 0)`,
            paddingRight: 8,
            paddingBottom: 8,
            filter: `drop-shadow(0 0 24px rgba(255,106,26,${0.3 + 0.2 * Math.sin(localTime * 2)}))`,
          }}>
            Karla
          </div>
          {/* "pay" in Satoshi */}
          <div style={{
            fontFamily: SATOSHI,
            fontSize: 140,
            fontWeight: 600,
            color: INK,
            lineHeight: 1,
            letterSpacing: '-0.03em',
            opacity: payEased,
            transform: `translateX(${(1 - payEased) * -20}px)`,
          }}>
            pay
          </div>
        </div>

        {/* Tagline */}
        <div style={{
          fontFamily: SATOSHI,
          fontSize: 28,
          fontWeight: 500,
          color: MUTED,
          letterSpacing: '0.01em',
          opacity: tagEased,
          transform: `translateY(${(1 - tagEased) * 12}px)`,
        }}>
          Tu agente de <span style={{ color: ORANGE }}>IA</span> que llama por ti para cobrar.
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// SCENE 2 — Problem (5.0 → 10.5s)
// Pile of "IMPAGO" (unpaid) invoice cards fall onto screen, red warning accent.

function InvoiceCard({ delay, x, y, rot, amount, client, status = 'IMPAGO' }) {
  const { localTime } = useSprite();
  const t = clamp((localTime - delay) / 0.5, 0, 1);
  const eased = Easing.easeOutCubic(t);
  const opacity = t;
  const dy = (1 - eased) * -40;
  const scale = 0.9 + eased * 0.1;

  const isOverdue = status === 'IMPAGO';

  return (
    <div style={{
      position: 'absolute',
      left: x, top: y,
      width: 280, height: 160,
      background: PANEL,
      border: `1px solid ${LINE}`,
      borderRadius: 12,
      padding: '18px 20px',
      transform: `translateY(${dy}px) rotate(${rot}deg) scale(${scale})`,
      opacity,
      boxShadow: '0 20px 40px rgba(0,0,0,0.5)',
      fontFamily: SATOSHI,
      color: INK,
      display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div style={{ fontSize: 13, color: MUTED, fontFamily: MONO, letterSpacing: '0.05em' }}>
          FAC-{Math.floor(1000 + Math.random() * 9000)}
        </div>
        <div style={{
          padding: '3px 10px',
          background: isOverdue ? 'rgba(255,106,26,0.14)' : 'rgba(107,114,128,0.14)',
          color: isOverdue ? ORANGE : MUTED,
          fontSize: 11, fontWeight: 600,
          borderRadius: 4,
          letterSpacing: '0.06em',
        }}>
          {status}
        </div>
      </div>
      <div>
        <div style={{ fontSize: 14, color: MUTED, marginBottom: 4 }}>{client}</div>
        <div style={{ fontSize: 32, fontWeight: 600, letterSpacing: '-0.02em' }}>
          € {amount}
        </div>
      </div>
    </div>
  );
}

function SceneProblem() {
  const { localTime, duration } = useSprite();

  // Title in first
  const titleT = clamp(localTime / 0.6, 0, 1);
  const titleEased = Easing.easeOutCubic(titleT);

  // Exit
  const exitStart = duration - 0.7;
  const exitT = clamp((localTime - exitStart) / 0.7, 0, 1);
  const exitOpacity = 1 - Easing.easeInCubic(exitT);

  const cards = [
    { delay: 0.6, x: 180, y: 220, rot: -8, amount: '1.250', client: 'Clínica Dental Sonríe' },
    { delay: 0.85, x: 500, y: 180, rot: 3, amount: '840', client: 'Autoescuela Velocidad' },
    { delay: 1.1, x: 850, y: 240, rot: -4, amount: '2.100', client: 'Gimnasio Fuerza' },
    { delay: 1.35, x: 1200, y: 200, rot: 6, amount: '560', client: 'Peluquería Bella' },
    { delay: 1.6, x: 320, y: 450, rot: 5, amount: '1.780', client: 'Academia Idiomas' },
    { delay: 1.85, x: 680, y: 490, rot: -6, amount: '3.400', client: 'Consultoría Nova' },
    { delay: 2.1, x: 1040, y: 470, rot: 2, amount: '920', client: 'Restaurante Mar' },
  ];

  return (
    <div style={{ position: 'absolute', inset: 0, opacity: exitOpacity }}>
      {/* Top label */}
      <div style={{
        position: 'absolute',
        top: 90, left: '50%',
        transform: `translateX(-50%) translateY(${(1 - titleEased) * -20}px)`,
        opacity: titleEased,
        textAlign: 'center',
      }}>
        <div style={{
          fontFamily: MONO,
          fontSize: 13,
          color: ORANGE,
          letterSpacing: '0.2em',
          marginBottom: 14,
        }}>
          EL PROBLEMA
        </div>
        <div style={{
          fontFamily: SATOSHI,
          fontSize: 64,
          fontWeight: 600,
          color: INK,
          letterSpacing: '-0.025em',
          lineHeight: 1.05,
        }}>
          Las facturas no se pagan solas.
        </div>
      </div>

      {cards.map((c, i) => <InvoiceCard key={i} {...c} />)}

      {/* Counter at bottom */}
      <SceneProblemCounter localTime={localTime} />
    </div>
  );
}

function SceneProblemCounter({ localTime }) {
  const t = clamp((localTime - 2.3) / 1.4, 0, 1);
  const eased = Easing.easeOutCubic(t);
  const value = Math.floor(eased * 10850);
  const formatted = value.toLocaleString('es-ES');

  const appearT = clamp((localTime - 2.3) / 0.5, 0, 1);

  return (
    <div style={{
      position: 'absolute',
      bottom: 70, left: '50%',
      transform: `translateX(-50%) translateY(${(1 - appearT) * 20}px)`,
      opacity: appearT,
      textAlign: 'center',
    }}>
      <div style={{
        fontFamily: MONO,
        fontSize: 12,
        color: MUTED,
        letterSpacing: '0.2em',
        marginBottom: 8,
      }}>
        IMPAGADO ESTE MES
      </div>
      <div style={{
        fontFamily: SATOSHI,
        fontSize: 72,
        fontWeight: 600,
        color: ORANGE,
        letterSpacing: '-0.03em',
        fontVariantNumeric: 'tabular-nums',
      }}>
        € {formatted}
      </div>
    </div>
  );
}

Object.assign(window, {
  BG, ORANGE, INK, MUTED, PANEL, LINE,
  SATOSHI, CAVEAT, MONO,
  AmbientBG, SceneLogo, SceneProblem,
});