// Slide primitives for Complete pitch deck — 1920×1080
// Protocol V.01: zero radius, 1px borders, SF Pro / SF Mono.

const D = {
  bg: '#0A0A0A', bgLight: '#D6D6D6',
  surface: '#181818', surfaceLight: '#E0E0E0',
  border: '#3A3A3A', borderLight: '#000000',
  text: '#D6D6D6', textLight: '#000000',
  textSec: '#999999', textSecLight: '#555555',
  textTer: '#787878',
  accent: '#D6D6D6', accentLight: '#000000',
  coral: '#FF5C84', // Rose Coral — the brand pop; used here as the longevity accent
  prGold: '#D4A845', rfTeal: '#4ECDC4', rfRed: '#E05555', rfViolet: '#9B8EC0',
  phaseBase: '#4A6FA5', phasePace: '#5A8C5A', phaseAccel: '#C47A30', phasePrime: '#7A5CA0', phaseRace: '#B84040',
  fontSans: '-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", system-ui, sans-serif',
  fontMono: 'ui-monospace, "SF Mono", Menlo, Consolas, monospace',
};

// Slide shell — handles light/dark, padding, border-frame chrome, slide-number
function Slide({ children, dark = true, label = '', number, total = 10, accent = false, style = {} }) {
  const bg = accent ? D.bgLight : (dark ? D.bg : D.bgLight);
  const text = accent ? D.textLight : (dark ? D.text : D.textLight);
  const border = accent ? D.borderLight : (dark ? D.border : D.borderLight);
  const sec = accent ? D.textSecLight : (dark ? D.textSec : D.textSecLight);
  return (
    <div style={{
      width: 1920, height: 1080, background: bg, color: text, position: 'relative',
      fontFamily: D.fontSans, overflow: 'hidden', ...style,
    }}>
      {/* Border frame */}
      <div style={{ position: 'absolute', inset: 48, border: `1px solid ${border}`, pointerEvents: 'none' }} />
      {/* Top chrome */}
      <div style={{ position: 'absolute', top: 60, left: 60, right: 60, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div style={{ display: 'flex', alignItems: 'center' }}>
          <img
            src={(dark && !accent) ? 'assets/wordmark-ondark.svg' : 'assets/wordmark-onlight.svg'}
            alt="Complete"
            style={{ height: 26, display: 'block' }}
          />
        </div>
        <span style={{ fontFamily: D.fontMono, fontSize: 13, fontWeight: 700, color: sec, textTransform: 'uppercase', letterSpacing: 1 }}>
          {label}
        </span>
        <span style={{ fontFamily: D.fontMono, fontSize: 13, fontWeight: 700, color: sec, letterSpacing: 1 }}>
          {String(number).padStart(2, '0')} / {String(total).padStart(2, '0')}
        </span>
      </div>
      {/* Content area */}
      <div style={{ position: 'absolute', inset: 100, display: 'flex' }}>
        {children}
      </div>
    </div>
  );
}

// "C" mark — square block letterform, derived from the logo asset
function CompleteLogo({ color = '#D6D6D6', size = 28 }) {
  return (
    <div style={{
      width: size, height: size, background: '#000000',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      border: `1px solid ${color}`,
    }}>
      <span style={{
        fontFamily: D.fontSans, fontWeight: 700, fontSize: size * 0.7,
        color: '#D6D6D6', letterSpacing: -0.02, lineHeight: 1, marginTop: -2,
      }}>C</span>
    </div>
  );
}

// Big stat with label
function BigStat({ value, label, mono = true, color, valueSize = 220 }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
      <span style={{
        fontFamily: mono ? D.fontMono : D.fontSans, fontWeight: 700,
        fontSize: valueSize, lineHeight: 0.92, letterSpacing: -0.02, color: color || 'inherit',
      }}>{value}</span>
      <span style={{
        fontFamily: D.fontSans, fontSize: 18, fontWeight: 700,
        textTransform: 'uppercase', letterSpacing: 1, opacity: 0.7,
      }}>{label}</span>
    </div>
  );
}

// Section label (uppercase, letter-spaced)
function SLabel({ children, color, style = {} }) {
  return (
    <span style={{
      fontFamily: D.fontSans, fontSize: 16, fontWeight: 700,
      textTransform: 'uppercase', letterSpacing: 1, color: color || 'inherit', ...style,
    }}>{children}</span>
  );
}

// Bordered cell with stat
function StatCell({ label, value, sub, color, dark = true, accent = false }) {
  const text = accent ? D.textLight : (dark ? D.text : D.textLight);
  const sec  = accent ? D.textSecLight : (dark ? D.textSec : D.textSecLight);
  const border = accent ? D.borderLight : (dark ? D.border : D.borderLight);
  return (
    <div style={{
      border: `1px solid ${border}`, padding: 28, display: 'flex', flexDirection: 'column', gap: 10,
      background: 'transparent',
    }}>
      <span style={{ fontFamily: D.fontSans, fontSize: 13, fontWeight: 700, textTransform: 'uppercase', letterSpacing: 0.8, color: sec }}>{label}</span>
      <span style={{ fontFamily: D.fontMono, fontSize: 56, fontWeight: 700, color: color || text, lineHeight: 1, marginTop: 4 }}>{value}</span>
      {sub && <span style={{ fontFamily: D.fontSans, fontSize: 14, color: sec }}>{sub}</span>}
    </div>
  );
}

// Blinking terminal cursor (CSS animation)
function Cursor({ char = '_', color, size = 28 }) {
  return (
    <span style={{
      display: 'inline-block', fontFamily: D.fontMono, fontWeight: 700,
      fontSize: size, color: color || 'inherit',
      animation: 'slideCursorBlink 1.2s ease-in-out infinite',
    }}>{char}</span>
  );
}

if (typeof document !== 'undefined' && !document.getElementById('slide-keyframes')) {
  const s = document.createElement('style'); s.id = 'slide-keyframes';
  s.textContent = `@keyframes slideCursorBlink { 0%,49% {opacity:1} 50%,100% {opacity:0} }`;
  document.head.appendChild(s);
}

Object.assign(window, { D, Slide, CompleteLogo, BigStat, SLabel, StatCell, Cursor });