// OpenGrade POC deck — theme tokens
// All slides import these. No ad-hoc pixel values elsewhere.

const TYPE_SCALE = {
  display: 120,
  title: 64,
  subtitle: 44,
  body: 34,
  small: 28,
  micro: 24,
};

const SPACING = {
  paddingTop: 100,
  paddingBottom: 80,
  paddingX: 100,
  titleGap: 52,
  itemGap: 28,
  sectionGap: 72,
};

const COLORS = {
  // OpenGrade light theme — slate text on slate-50 background
  ink: '#020617',       // text primary
  inkSoft: '#1e293b',   // text secondary
  inkMute: '#64748b',   // text muted
  // Slate paper
  paper: '#f1f5f9',     // app background (slate-100)
  paperSoft: '#e2e8f0', // slightly darker surface (slate-200)
  surface: '#ffffff',   // card / popover
  // Accent: OpenGrade primary green
  accent: '#059669',
  accentSoft: '#ecfdf5', // mint accent bg
  // Traffic light for scoring
  green: '#22c55e',
  amber: '#eab308',
  red: '#ef4444',
  // Info
  blue: '#3b82f6',
  // Rule lines
  rule: '#e2e8f0',
  ruleSoft: '#f1f5f9',
};

const FONTS = {
  sans: "'Heebo', 'Inter', system-ui, -apple-system, sans-serif",
  mono: "'JetBrains Mono', ui-monospace, Menlo, monospace",
  serif: "'Fraunces', Georgia, serif",
};

// Base slide frame — every slide uses this
const SlideFrame = ({ children, bg = COLORS.paper, style = {}, padded = true }) => (
  <div
    dir="rtl"
    style={{
      width: '100%',
      height: '100%',
      background: bg,
      color: COLORS.ink,
      fontFamily: FONTS.sans,
      padding: padded
        ? `${SPACING.paddingTop}px ${SPACING.paddingX}px ${SPACING.paddingBottom}px`
        : 0,
      boxSizing: 'border-box',
      position: 'relative',
      overflow: 'hidden',
      ...style,
    }}
  >
    {children}
  </div>
);

// Small page-corner mark used across slides for rhythm
const CornerMark = () => (
  <div
    style={{
      position: 'absolute',
      top: 48,
      left: 100,
      display: 'flex',
      alignItems: 'center',
      gap: 16,
      fontFamily: FONTS.mono,
      fontSize: TYPE_SCALE.micro,
      color: COLORS.inkMute,
      letterSpacing: '0.04em',
    }}
  >
    <span
      dir="ltr"
      style={{ unicodeBidi: 'isolate', display: 'inline-flex', alignItems: 'center', gap: 10 }}
    >
      <span
        style={{
          width: 26,
          height: 26,
          borderRadius: 6,
          background: 'linear-gradient(135deg, #059669, #0d9488)',
          position: 'relative',
          flexShrink: 0,
        }}
      >
        <svg width="26" height="26" viewBox="0 0 32 32" style={{ position: 'absolute', inset: 0 }}>
          <rect x="7" y="20" width="4" height="6" rx="2" fill="#ffffff" />
          <rect x="14" y="15" width="4" height="11" rx="2" fill="#ffffff" />
          <rect x="21" y="9" width="4" height="17" rx="2" fill="#ffffff" />
        </svg>
      </span>
      <span style={{ fontFamily: FONTS.sans, fontSize: TYPE_SCALE.small, fontWeight: 600, letterSpacing: '-0.005em' }}>
        <span style={{ color: COLORS.ink }}>Open</span>
        <span style={{ color: COLORS.accent }}>Grade</span>
      </span>
    </span>
    <span style={{ width: 40, height: 1, background: COLORS.rule }} />
    <span>POC · 2026</span>
  </div>
);

// Section eyebrow — tiny all-caps label above titles
const Eyebrow = ({ children, color = COLORS.accent }) => (
  <div
    style={{
      fontFamily: FONTS.mono,
      fontSize: TYPE_SCALE.micro,
      color,
      letterSpacing: '0.12em',
      textTransform: 'uppercase',
      marginBottom: SPACING.itemGap,
    }}
  >
    {children}
  </div>
);

const Title = ({ children, size = TYPE_SCALE.title, color = COLORS.ink, style = {} }) => (
  <h1
    style={{
      fontSize: size,
      fontWeight: 700,
      lineHeight: 1.05,
      letterSpacing: '-0.01em',
      color,
      margin: 0,
      textWrap: 'balance',
      ...style,
    }}
  >
    {children}
  </h1>
);

Object.assign(window, {
  TYPE_SCALE,
  SPACING,
  COLORS,
  FONTS,
  SlideFrame,
  CornerMark,
  Eyebrow,
  Title,
});