// Shared design tokens & primitive components for the Pot Odds video.

const POKER_COLORS = {
  bg: '#0a0e0c',
  bgAlt: '#0f1512',
  felt: '#0d2a20',
  feltDeep: '#082018',
  green: '#10b981',
  greenSoft: 'oklch(72% 0.18 160)',
  greenDeep: 'oklch(45% 0.16 160)',
  gold: '#d4af37',
  red: '#dc2626',
  ink: '#f6f4ef',
  inkDim: '#a0aec0',
  inkSubtle: '#4a5568',
  border: 'rgba(255,255,255,0.08)',
  borderStrong: 'rgba(255,255,255,0.16)',
};

const FONTS = {
  display: '"Bebas Neue", "Oswald", "Anton", system-ui, sans-serif',
  serif: '"Fraunces", "Cormorant Garamond", Georgia, serif',
  sans: '"Inter", system-ui, -apple-system, sans-serif',
  mono: '"JetBrains Mono", "Fira Code", ui-monospace, monospace',
};

// ── Felt / table background ────────────────────────────────────────────────
function FeltBackground({ opacity = 1 }) {
  return (
    <div style={{
      position: 'absolute',
      inset: 0,
      background: `
        radial-gradient(ellipse at 50% 40%, ${POKER_COLORS.felt} 0%, ${POKER_COLORS.feltDeep} 60%, ${POKER_COLORS.bg} 100%)
      `,
      opacity,
    }}>
      {/* subtle felt texture */}
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: `radial-gradient(circle at 20% 30%, rgba(16,185,129,0.06) 0%, transparent 40%),
                          radial-gradient(circle at 80% 70%, rgba(16,185,129,0.04) 0%, transparent 40%)`,
      }}/>
      {/* grain */}
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: `repeating-linear-gradient(0deg, rgba(255,255,255,0.012) 0 1px, transparent 1px 3px),
                          repeating-linear-gradient(90deg, rgba(255,255,255,0.012) 0 1px, transparent 1px 3px)`,
      }}/>
    </div>
  );
}

// ── Branded eyebrow / kicker ──────────────────────────────────────────────
function Kicker({ children, x = 80, y = 80, color = POKER_COLORS.green, delay = 0, size = 22 }) {
  const { localTime } = useSprite();
  const t = clamp((localTime - delay) / 0.4, 0, 1);
  const eased = Easing.easeOutCubic(t);
  return (
    <div style={{
      position: 'absolute', left: x, top: y,
      fontFamily: FONTS.mono,
      fontSize: size,
      letterSpacing: '0.32em',
      textTransform: 'uppercase',
      color,
      fontWeight: 500,
      opacity: eased,
      transform: `translateY(${(1-eased)*8}px)`,
      display: 'flex', alignItems: 'center', gap: 14,
    }}>
      <div style={{
        width: 36 * eased, height: 2, background: color, transformOrigin: 'left',
      }}/>
      {children}
    </div>
  );
}

// ── Big display number with reveal ─────────────────────────────────────────
function CountUp({ value, suffix = '', x, y, size = 220, color = POKER_COLORS.green, delay = 0, dur = 0.9, font = FONTS.display, decimals = 0 }) {
  const { localTime } = useSprite();
  const t = clamp((localTime - delay) / dur, 0, 1);
  const eased = Easing.easeOutExpo(t);
  const current = (value * eased).toFixed(decimals);
  return (
    <div style={{
      position: 'absolute', left: x, top: y,
      fontFamily: font, fontSize: size,
      fontWeight: 700,
      color,
      letterSpacing: '-0.02em',
      lineHeight: 1,
      fontVariantNumeric: 'tabular-nums',
      opacity: clamp(t * 2, 0, 1),
    }}>
      {current}{suffix}
    </div>
  );
}

// ── Poker chip (SVG, stylized) ────────────────────────────────────────────
function PokerChip({ size = 80, color = POKER_COLORS.green, label = '', stripe = '#fff' }) {
  return (
    <svg width={size} height={size} viewBox="0 0 100 100" style={{ display: 'block' }}>
      <defs>
        <radialGradient id={`chipGrad-${color}-${label}`} cx="50%" cy="40%">
          <stop offset="0%" stopColor={color} stopOpacity="1"/>
          <stop offset="100%" stopColor={color} stopOpacity="0.7"/>
        </radialGradient>
      </defs>
      <circle cx="50" cy="50" r="48" fill={`url(#chipGrad-${color}-${label})`} stroke="rgba(0,0,0,0.4)" strokeWidth="1"/>
      {/* edge stripes */}
      {[0, 60, 120, 180, 240, 300].map(a => (
        <rect key={a} x="46" y="2" width="8" height="14" fill={stripe} opacity="0.85"
              transform={`rotate(${a} 50 50)`}/>
      ))}
      <circle cx="50" cy="50" r="32" fill={color} stroke={stripe} strokeWidth="1.5" opacity="0.95"/>
      <circle cx="50" cy="50" r="32" fill="none" stroke="rgba(0,0,0,0.2)" strokeWidth="0.5" strokeDasharray="2 3"/>
      {label && (
        <text x="50" y="56" textAnchor="middle"
              fontFamily={FONTS.display} fontSize="20" fontWeight="700"
              fill={stripe}>{label}</text>
      )}
    </svg>
  );
}

// ── Stack of chips ────────────────────────────────────────────────────────
function ChipStack({ count = 5, size = 70, color = POKER_COLORS.green, label = '' }) {
  return (
    <div style={{ position: 'relative', width: size, height: size + count * 6 }}>
      {Array.from({ length: count }).map((_, i) => (
        <div key={i} style={{
          position: 'absolute',
          left: 0,
          bottom: i * 5,
          filter: `brightness(${1 - (count - i) * 0.04})`,
        }}>
          <PokerChip size={size} color={color} label={i === count - 1 ? label : ''} stripe="#f6f4ef"/>
        </div>
      ))}
    </div>
  );
}

// ── Playing card ──────────────────────────────────────────────────────────
function PlayingCard({ rank = 'A', suit = '♠', width = 90, height = 130, faceDown = false, tilt = 0 }) {
  const isRed = suit === '♥' || suit === '♦';
  const color = isRed ? '#dc2626' : '#0a0e0c';
  if (faceDown) {
    return (
      <div style={{
        width, height,
        borderRadius: 8,
        background: `repeating-linear-gradient(45deg, #1a472a 0 6px, #0f3a1f 6px 12px)`,
        border: '2px solid #f6f4ef',
        boxShadow: '0 4px 12px rgba(0,0,0,0.5)',
        transform: `rotate(${tilt}deg)`,
        position: 'relative',
      }}>
        <div style={{
          position: 'absolute', inset: 6,
          border: '1px solid rgba(246,244,239,0.4)',
          borderRadius: 4,
        }}/>
      </div>
    );
  }
  return (
    <div style={{
      width, height,
      background: '#f6f4ef',
      borderRadius: 8,
      boxShadow: '0 4px 12px rgba(0,0,0,0.5)',
      position: 'relative',
      transform: `rotate(${tilt}deg)`,
      fontFamily: FONTS.serif,
      color,
      padding: 8,
    }}>
      <div style={{ fontSize: 26, fontWeight: 700, lineHeight: 1 }}>{rank}</div>
      <div style={{ fontSize: 24, lineHeight: 1, marginTop: -2 }}>{suit}</div>
      <div style={{
        position: 'absolute', inset: 0,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontSize: 56, fontWeight: 700,
      }}>{suit}</div>
      <div style={{
        position: 'absolute', bottom: 8, right: 8,
        textAlign: 'right',
        transform: 'rotate(180deg)',
      }}>
        <div style={{ fontSize: 26, fontWeight: 700, lineHeight: 1 }}>{rank}</div>
        <div style={{ fontSize: 24, lineHeight: 1, marginTop: -2 }}>{suit}</div>
      </div>
    </div>
  );
}

// ── Brand mark ────────────────────────────────────────────────────────────
function BrandMark({ x = 80, y = 980, opacity = 0.55 }) {
  return (
    <div style={{
      position: 'absolute', left: x, top: y,
      display: 'flex', alignItems: 'center', gap: 12,
      fontFamily: FONTS.mono, fontSize: 14,
      letterSpacing: '0.3em',
      color: POKER_COLORS.inkDim,
      opacity,
      textTransform: 'uppercase',
    }}>
      <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
        <path d="M12 2L2 7l10 5 10-5-10-5z" stroke={POKER_COLORS.green} strokeWidth="1.5" strokeLinejoin="round"/>
        <path d="M2 17l10 5 10-5M2 12l10 5 10-5" stroke={POKER_COLORS.green} strokeWidth="1.5" strokeLinejoin="round" opacity="0.5"/>
      </svg>
      Academy Poker GTO
    </div>
  );
}

// Reveals children from below with a clip-path mask, gated by sprite localTime.
function MaskReveal({ children, delay = 0, dur = 0.6, dir = 'up' }) {
  const { localTime } = useSprite();
  const t = clamp((localTime - delay) / dur, 0, 1);
  const eased = Easing.easeOutQuart(t);
  const clip =
    dir === 'up'    ? `inset(${(1 - eased) * 100}% 0 0 0)` :
    dir === 'down'  ? `inset(0 0 ${(1 - eased) * 100}% 0)` :
    dir === 'left'  ? `inset(0 ${(1 - eased) * 100}% 0 0)` :
                       `inset(0 0 0 ${(1 - eased) * 100}%)`;
  return (
    <div style={{
      clipPath: clip,
      WebkitClipPath: clip,
      transition: 'none',
    }}>
      {children}
    </div>
  );
}

Object.assign(window, {
  POKER_COLORS, FONTS,
  FeltBackground, Kicker, CountUp, PokerChip, ChipStack, PlayingCard,
  BrandMark, MaskReveal,
});