// KarlaPay — Scenes part 3: Result + final lockup

// ─────────────────────────────────────────────────────────────────────────────
// SCENE 4 — Result (19.0 → 25.0s)
// "PAGADO" check ripples out, euro counter tickers up, line chart draws in.

function CheckBurst({ localTime }) {
  const popT = clamp(localTime / 0.5, 0, 1);
  const popEased = Easing.easeOutBack(popT);
  const scale = popEased;

  const rippleT = clamp((localTime - 0.3) / 1.4, 0, 1);
  const rippleSize = 120 + rippleT * 520;
  const rippleOpacity = (1 - rippleT) * 0.6;

  return (
    <div style={{ position: 'relative', width: 180, height: 180 }}>
      {/* Ripple */}
      <div style={{
        position: 'absolute',
        left: '50%', top: '50%',
        width: rippleSize, height: rippleSize,
        marginLeft: -rippleSize / 2, marginTop: -rippleSize / 2,
        borderRadius: '50%',
        border: `2px solid ${ORANGE}`,
        opacity: rippleOpacity,
      }}/>
      {/* Circle */}
      <div style={{
        position: 'absolute',
        inset: 0,
        borderRadius: '50%',
        background: ORANGE,
        transform: `scale(${scale})`,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        boxShadow: `0 0 60px rgba(255,106,26,0.5)`,
      }}>
        {/* Check draw */}
        <svg width="90" height="90" viewBox="0 0 90 90">
          <path
            d="M 22 46 L 40 62 L 68 30"
            fill="none"
            stroke="#0D0F14"
            strokeWidth="8"
            strokeLinecap="round"
            strokeLinejoin="round"
            style={{
              strokeDasharray: 80,
              strokeDashoffset: 80 - Easing.easeOutCubic(clamp((localTime - 0.3) / 0.6, 0, 1)) * 80,
            }}
          />
        </svg>
      </div>
    </div>
  );
}

function Counter({ localTime, delay, duration, from, to, prefix = '', suffix = '', size = 120, weight = 600 }) {
  const t = clamp((localTime - delay) / duration, 0, 1);
  const eased = Easing.easeOutCubic(t);
  const value = from + (to - from) * eased;
  const formatted = Math.floor(value).toLocaleString('es-ES');

  return (
    <div style={{
      fontFamily: SATOSHI,
      fontSize: size,
      fontWeight: weight,
      color: INK,
      letterSpacing: '-0.035em',
      lineHeight: 1,
      fontVariantNumeric: 'tabular-nums',
    }}>
      {prefix}{formatted}{suffix}
    </div>
  );
}

function RecoveryChart({ localTime }) {
  // Draw a line chart that climbs
  const drawT = clamp((localTime - 1.2) / 2.2, 0, 1);
  const drawEased = Easing.easeInOutCubic(drawT);

  // Points (normalized)
  const pts = [
    [0, 0.85],
    [0.12, 0.78],
    [0.22, 0.82],
    [0.35, 0.68],
    [0.45, 0.62],
    [0.55, 0.50],
    [0.65, 0.42],
    [0.75, 0.28],
    [0.85, 0.22],
    [1.0, 0.08],
  ];

  const W = 460, H = 180;
  const path = pts.map(([x, y], i) => {
    const cmd = i === 0 ? 'M' : 'L';
    return `${cmd} ${x * W} ${y * H}`;
  }).join(' ');

  const totalLen = 600; // approx

  return (
    <div style={{ position: 'relative', width: W, height: H }}>
      {/* Y labels */}
      <div style={{
        position: 'absolute', left: -64, top: 0, width: 56,
        height: H, fontFamily: MONO, fontSize: 11, color: MUTED,
        display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
        textAlign: 'right',
      }}>
        <span>€ 12K</span>
        <span>€ 6K</span>
        <span>€ 0</span>
      </div>
      {/* Grid */}
      <svg width={W} height={H} style={{ position: 'absolute', inset: 0 }}>
        {[0, 0.25, 0.5, 0.75, 1].map((p, i) => (
          <line key={i}
            x1={0} x2={W}
            y1={p * H} y2={p * H}
            stroke={LINE} strokeWidth="1"
            strokeDasharray="3 4"
            opacity="0.6"
          />
        ))}
        {/* Line */}
        <path
          d={path}
          fill="none"
          stroke={ORANGE}
          strokeWidth="3"
          strokeLinecap="round"
          strokeLinejoin="round"
          style={{
            strokeDasharray: totalLen,
            strokeDashoffset: totalLen - drawEased * totalLen,
            filter: `drop-shadow(0 0 8px rgba(255,106,26,0.4))`,
          }}
        />
        {/* End dot */}
        {drawT > 0.95 && (
          <circle
            cx={pts[pts.length - 1][0] * W}
            cy={pts[pts.length - 1][1] * H}
            r={6}
            fill={ORANGE}
            style={{
              filter: `drop-shadow(0 0 10px ${ORANGE})`,
            }}
          />
        )}
      </svg>
    </div>
  );
}

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

  // Label in
  const labelT = clamp(localTime / 0.5, 0, 1);
  const labelEased = Easing.easeOutCubic(labelT);

  // Check
  const checkStart = 0.2;

  // Counter
  const counterStart = 0.6;

  // Chart
  const chartStart = 1.0;

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

  return (
    <div style={{ position: 'absolute', inset: 0, opacity: exitOpacity }}>
      {/* Label */}
      <div style={{
        position: 'absolute',
        top: 90, left: '50%',
        transform: `translateX(-50%) translateY(${(1 - labelEased) * -20}px)`,
        opacity: labelEased,
        textAlign: 'center',
      }}>
        <div style={{
          fontFamily: MONO,
          fontSize: 13,
          color: ORANGE,
          letterSpacing: '0.2em',
          marginBottom: 14,
        }}>
          EL RESULTADO
        </div>
        <div style={{
          fontFamily: SATOSHI,
          fontSize: 64,
          fontWeight: 600,
          color: INK,
          letterSpacing: '-0.025em',
          lineHeight: 1.05,
        }}>
          Más cobros. Menos esfuerzo.
        </div>
      </div>

      {/* Left: Big counter + check */}
      <div style={{
        position: 'absolute',
        left: 180, top: 320,
        width: 640,
      }}>
        <div style={{
          display: 'flex', alignItems: 'center', gap: 28,
          marginBottom: 24,
          opacity: clamp((localTime - checkStart) / 0.4, 0, 1),
        }}>
          {localTime >= checkStart && (
            <CheckBurst localTime={localTime - checkStart} />
          )}
          <div style={{
            fontFamily: SATOSHI,
            fontSize: 22,
            fontWeight: 500,
            color: MUTED,
            letterSpacing: '0.02em',
            lineHeight: 1.3,
          }}>
            Recuperado este mes<br/>
            <span style={{ color: ORANGE, fontWeight: 600 }}>por Carla</span>
          </div>
        </div>

        <div style={{
          opacity: clamp((localTime - counterStart) / 0.3, 0, 1),
          transform: `translateY(${(1 - clamp((localTime - counterStart) / 0.3, 0, 1)) * 16}px)`,
        }}>
          <Counter
            localTime={localTime - counterStart}
            delay={0}
            duration={2.2}
            from={0}
            to={82450}
            prefix="€ "
            size={140}
          />
          <div style={{
            display: 'flex', alignItems: 'center', gap: 10,
            marginTop: 16,
          }}>
            <svg width="14" height="14" viewBox="0 0 14 14">
              <path d="M 2 10 L 7 4 L 12 10" stroke={ORANGE} strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
            <span style={{
              fontFamily: SATOSHI,
              fontSize: 18,
              color: ORANGE,
              fontWeight: 600,
            }}>
              +18,6% vs. mes anterior
            </span>
          </div>
        </div>
      </div>

      {/* Right: Chart card */}
      <div style={{
        position: 'absolute',
        right: 160, top: 320,
        width: 560,
        padding: '36px 40px 40px 90px',
        background: PANEL,
        border: `1px solid ${LINE}`,
        borderRadius: 16,
        opacity: clamp((localTime - chartStart) / 0.5, 0, 1),
        transform: `translateY(${(1 - clamp((localTime - chartStart) / 0.5, 0, 1)) * 20}px)`,
      }}>
        <div style={{
          fontFamily: MONO,
          fontSize: 11,
          color: MUTED,
          letterSpacing: '0.18em',
          marginBottom: 8,
        }}>
          IMPAGO RESTANTE
        </div>
        <div style={{
          fontFamily: SATOSHI,
          fontSize: 20,
          color: INK,
          fontWeight: 500,
          marginBottom: 28,
        }}>
          De € 12K a casi cero
        </div>
        {localTime >= chartStart && (
          <RecoveryChart localTime={localTime - chartStart} />
        )}
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// SCENE 5 — Final lockup (25.0 → 30.0s)

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

  // Logo reassembles
  const t1 = clamp(localTime / 0.8, 0, 1);
  const e1 = Easing.easeOutCubic(t1);

  const t2 = clamp((localTime - 0.6) / 0.6, 0, 1);
  const e2 = Easing.easeOutCubic(t2);

  const t3 = clamp((localTime - 1.1) / 0.6, 0, 1);
  const e3 = Easing.easeOutCubic(t3);

  const t4 = clamp((localTime - 1.8) / 0.5, 0, 1);
  const e4 = Easing.easeOutBack(t4);

  return (
    <div style={{
      position: 'absolute', inset: 0,
      display: 'flex', flexDirection: 'column',
      alignItems: 'center', justifyContent: 'center',
      gap: 44,
    }}>
      {/* Wordmark */}
      <div style={{
        display: 'flex', alignItems: 'baseline', gap: 4,
      }}>
        <div style={{
          fontFamily: CAVEAT,
          fontSize: 200,
          fontWeight: 700,
          color: ORANGE,
          lineHeight: 1,
          letterSpacing: '-0.01em',
          opacity: e1,
          transform: `translateY(${(1 - e1) * 20}px)`,
          paddingRight: 8,
          paddingBottom: 6,
          filter: `drop-shadow(0 0 20px rgba(255,106,26,0.35))`,
        }}>
          Karla
        </div>
        <div style={{
          fontFamily: SATOSHI,
          fontSize: 128,
          fontWeight: 600,
          color: INK,
          lineHeight: 1,
          letterSpacing: '-0.03em',
          opacity: e2,
          transform: `translateX(${(1 - e2) * -20}px)`,
        }}>
          pay
        </div>
      </div>

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

      {/* CTA */}
      <div style={{
        display: 'flex', alignItems: 'center', gap: 18,
        marginTop: 20,
        opacity: clamp(t4, 0, 1),
        transform: `translateY(${(1 - Math.min(e4, 1)) * 20}px) scale(${0.9 + 0.1 * Math.min(e4, 1)})`,
      }}>
        <div style={{
          padding: '18px 32px',
          background: ORANGE,
          borderRadius: 999,
          fontFamily: SATOSHI,
          fontSize: 20,
          fontWeight: 600,
          color: BG,
          display: 'flex', alignItems: 'center', gap: 10,
          boxShadow: '0 0 40px rgba(255,106,26,0.35)',
        }}>
          Solicita una demo
          <svg width="16" height="16" viewBox="0 0 16 16">
            <path d="M 4 8 L 12 8 M 8 4 L 12 8 L 8 12" stroke={BG} strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
        </div>
        <div style={{
          fontFamily: MONO,
          fontSize: 15,
          color: MUTED,
          letterSpacing: '0.05em',
        }}>
          karlapay.com
        </div>
      </div>
    </div>
  );
}

Object.assign(window, {
  CheckBurst, Counter, RecoveryChart, SceneResult, SceneFinal,
});