// Shared primitives, palette, tokens, and reusable poker pieces.

const APG = {
  bg: '#07100B',           // near-black with green undertone
  bgAlt: '#0C1A12',        // slightly lighter
  felt: '#0F2A1C',         // poker felt
  feltDeep: '#0A1F15',
  surface: '#11241A',
  border: 'rgba(228,200,120,0.18)',
  borderSoft: 'rgba(242,235,216,0.10)',
  ink: '#F2EBD8',          // warm off-white
  inkMute: 'rgba(242,235,216,0.62)',
  inkDim:  'rgba(242,235,216,0.40)',
  gold: '#E4C878',         // primary accent
  goldBright: '#F4D98A',
  goldDeep: '#A88837',
  red: '#D9534F',
  green: '#5BB686',
  warn: '#E08A3D',
  serif: 'Instrument Serif, Georgia, serif',
  sans: 'Inter, system-ui, sans-serif',
  mono: 'JetBrains Mono, ui-monospace, monospace',
};

// ── Background: subtle felt + grain + vignette ──
function FeltBackground({ tone = 'dark' }) {
  const bg = tone === 'felt'
    ? `radial-gradient(ellipse 80% 60% at 50% 50%, #143524 0%, #0A1F15 55%, #07120C 100%)`
    : `radial-gradient(ellipse 90% 70% at 50% 45%, #0E1B14 0%, #07100B 60%, #04080A 100%)`;
  return (
    <div style={{ position: 'absolute', inset: 0, background: bg }}>
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: `radial-gradient(rgba(228,200,120,0.05) 1px, transparent 1px)`,
        backgroundSize: '3px 3px',
        opacity: 0.5,
        mixBlendMode: 'overlay',
      }} />
      <div style={{
        position: 'absolute', inset: 0,
        boxShadow: 'inset 0 0 240px rgba(0,0,0,0.7)',
        pointerEvents: 'none',
      }} />
    </div>
  );
}

// ── Top brand chip + scene label (always present) ──
function ChromeFrame({ scene, label }) {
  return (
    <>
      {/* Logo top-left */}
      <div style={{
        position: 'absolute', left: 56, top: 44,
        display: 'flex', alignItems: 'center', gap: 12,
        zIndex: 10,
      }}>
        <div style={{
          width: 30, height: 30,
          background: APG.gold,
          borderRadius: 6,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          color: '#07100B',
          fontFamily: APG.serif,
          fontStyle: 'italic',
          fontWeight: 600,
          fontSize: 22,
          lineHeight: 1,
        }}>A</div>
        <div style={{
          fontFamily: APG.sans,
          fontSize: 13,
          fontWeight: 600,
          letterSpacing: '0.16em',
          textTransform: 'uppercase',
          color: APG.ink,
        }}>Academy Poker GTO</div>
      </div>

      {/* Scene chip top-right */}
      <div style={{
        position: 'absolute', right: 56, top: 44,
        display: 'flex', alignItems: 'center', gap: 14,
        zIndex: 10,
      }}>
        <div style={{
          fontFamily: APG.mono, fontSize: 11, color: APG.inkMute,
          letterSpacing: '0.18em',
        }}>{String(scene).padStart(2,'0')} / 10</div>
        <div style={{
          padding: '6px 14px',
          border: `1px solid ${APG.border}`,
          borderRadius: 999,
          fontFamily: APG.sans,
          fontSize: 11,
          fontWeight: 600,
          letterSpacing: '0.18em',
          textTransform: 'uppercase',
          color: APG.gold,
        }}>{label}</div>
      </div>

      {/* Bottom slug */}
      <div style={{
        position: 'absolute', left: 56, bottom: 36,
        fontFamily: APG.mono, fontSize: 11,
        letterSpacing: '0.16em', color: APG.inkDim,
        textTransform: 'uppercase', zIndex: 10,
      }}>
        Análisis GTO · ICM · Burbuja MTT
      </div>
      <div style={{
        position: 'absolute', right: 56, bottom: 36,
        fontFamily: APG.mono, fontSize: 11,
        letterSpacing: '0.16em', color: APG.inkDim, zIndex: 10,
      }}>
        academypokergto.com
      </div>
    </>
  );
}

// Animated reveal helper using a sprite's progress
function Reveal({ from = 0, to = 0.18, children, dy = 14 }) {
  const { progress } = useSprite();
  const local = clamp((progress - from) / (to - from), 0, 1);
  const eased = Easing.easeOutCubic(local);
  return (
    <div style={{
      opacity: eased,
      transform: `translateY(${(1 - eased) * dy}px)`,
      transition: 'none',
      visibility: eased <= 0.001 ? 'hidden' : 'visible',
    }}>{children}</div>
  );
}

// Counts a number from `from` to `to` over progress window
function CountUp({ from, to, dec = 0, suffix = '', startP = 0, endP = 0.5 }) {
  const { progress } = useSprite();
  const t = clamp((progress - startP) / (endP - startP), 0, 1);
  const eased = Easing.easeOutQuart(t);
  const v = from + (to - from) * eased;
  return <>{v.toFixed(dec)}{suffix}</>;
}

// ── Card (poker card) ──
function Card({ rank, suit, x = 0, y = 0, width = 130, rotate = 0, dim = false, dealProgress = 1 }) {
  const isRed = suit === '♥' || suit === '♦';
  const suitColor = isRed ? '#D44243' : '#0E0E0E';
  const height = width * 1.4;
  const rOffset = (1 - dealProgress) * 60;
  const opacity = dealProgress;
  return (
    <div style={{
      position: 'absolute', left: x, top: y,
      width, height,
      transform: `rotate(${rotate}deg) translateY(${rOffset}px)`,
      opacity: dim ? 0.4 * opacity : opacity,
      borderRadius: width * 0.08,
      background: 'linear-gradient(180deg, #fdfaf2 0%, #f1ead8 100%)',
      boxShadow: '0 14px 28px rgba(0,0,0,0.55), 0 2px 4px rgba(0,0,0,0.3), inset 0 0 0 1px rgba(255,255,255,0.4)',
      padding: width * 0.08,
      display: 'flex', flexDirection: 'column',
      justifyContent: 'space-between',
      fontFamily: APG.serif,
      color: suitColor,
      willChange: 'transform, opacity',
    }}>
      <div style={{ fontSize: width * 0.30, lineHeight: 0.95, fontWeight: 600 }}>
        <div>{rank}</div>
        <div style={{ fontSize: width * 0.22, marginTop: -2 }}>{suit}</div>
      </div>
      <div style={{
        alignSelf: 'center',
        fontSize: width * 0.55,
        lineHeight: 1,
        marginTop: -width * 0.1,
      }}>{suit}</div>
      <div style={{
        fontSize: width * 0.30, lineHeight: 0.95, fontWeight: 600,
        alignSelf: 'flex-end',
        transform: 'rotate(180deg)',
      }}>
        <div>{rank}</div>
        <div style={{ fontSize: width * 0.22, marginTop: -2 }}>{suit}</div>
      </div>
    </div>
  );
}

// ── Big stat / number display ──
function BigStat({ label, value, sub, color = APG.gold }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
      <div style={{
        fontFamily: APG.mono, fontSize: 12,
        textTransform: 'uppercase', letterSpacing: '0.18em',
        color: APG.inkMute,
      }}>{label}</div>
      <div style={{
        fontFamily: APG.serif, fontSize: 96, lineHeight: 0.95,
        color, fontWeight: 400,
        fontVariantNumeric: 'tabular-nums',
      }}>{value}</div>
      {sub && <div style={{ fontSize: 14, color: APG.inkMute, fontWeight: 400 }}>{sub}</div>}
    </div>
  );
}

// ── Eyebrow tag ──
function Eyebrow({ text, color = APG.gold }) {
  return (
    <div style={{
      display: 'inline-flex', alignItems: 'center', gap: 10,
      fontFamily: APG.sans,
      fontSize: 12, fontWeight: 600,
      letterSpacing: '0.22em', textTransform: 'uppercase',
      color,
    }}>
      <span style={{ width: 24, height: 1, background: color, opacity: 0.7 }}></span>
      {text}
    </div>
  );
}

// Title helper (Instrument Serif, large)
function SerifTitle({ children, size = 92, color = APG.ink, italic = false }) {
  return (
    <div style={{
      fontFamily: APG.serif,
      fontSize: size,
      lineHeight: 1.02,
      letterSpacing: '-0.015em',
      color,
      fontWeight: 400,
      fontStyle: italic ? 'italic' : 'normal',
      textWrap: 'pretty',
    }}>{children}</div>
  );
}

Object.assign(window, {
  APG, FeltBackground, ChromeFrame, Reveal, CountUp, Card, BigStat, Eyebrow, SerifTitle,
});