// Shared constants, primitives, and chrome for the ObraPlanner teaser.
// All scene files import from window globals (React, Easing, etc.)

const OP_COLORS = {
  bg: '#0f172a',       // slate-900
  bg2: '#0b1222',      // deeper slate
  surface: '#111c32',
  surface2: '#182648',
  border: 'rgba(148,163,184,0.16)',
  border2: 'rgba(148,163,184,0.26)',
  text: '#f1f5f9',
  textDim: '#94a3b8',
  textMute: '#64748b',
  blue: '#2563eb',
  blueLight: '#3b82f6',
  green: '#16a34a',
  greenLight: '#22c55e',
  amber: '#f59e0b',
  orange: '#f97316',
  red: '#ef4444',
};

const SANS = "'Inter', system-ui, -apple-system, sans-serif";
const MONO = "'JetBrains Mono', ui-monospace, monospace";

// Soft spotlight / vignette background for the stage
function Vignette({ color = OP_COLORS.blue, opacity = 0.35 }) {
  return (
    <div style={{
      position: 'absolute', inset: 0,
      background: `radial-gradient(60% 60% at 50% 40%, ${color}22 0%, transparent 60%), ${OP_COLORS.bg}`,
      opacity: 1,
      pointerEvents: 'none',
    }} />
  );
}

// Small tag / pill
function Pill({ children, color = OP_COLORS.blue, bg, style }) {
  return (
    <div style={{
      display: 'inline-flex', alignItems: 'center', gap: 8,
      padding: '8px 14px',
      border: `1px solid ${color}55`,
      background: bg || `${color}18`,
      color,
      borderRadius: 999,
      fontFamily: SANS, fontWeight: 600, fontSize: 14,
      letterSpacing: '0.02em',
      textTransform: 'uppercase',
      ...style,
    }}>
      {children}
    </div>
  );
}

// Reusable "chapter counter" in the corner
function ChapterTag({ index, total = 3, title }) {
  return (
    <div style={{
      position: 'absolute', top: 44, left: 60,
      display: 'flex', alignItems: 'center', gap: 14,
      fontFamily: MONO, color: OP_COLORS.textDim,
      fontSize: 14, letterSpacing: '0.1em',
    }}>
      <span style={{ color: OP_COLORS.blueLight, fontWeight: 600 }}>
        0{index} <span style={{ color: OP_COLORS.textMute }}>/ 0{total}</span>
      </span>
      <span style={{ width: 40, height: 1, background: OP_COLORS.border2 }} />
      <span style={{ textTransform: 'uppercase', color: OP_COLORS.text, fontWeight: 500 }}>
        {title}
      </span>
    </div>
  );
}

const LOGO_SRC = 'assets/logo-obraplanner-trimmed.png';

// Logo mark (the real ObraPlanner logo) — always square
function LogoMark({ size = 40, glow = false, style }) {
  return (
    <img src={LOGO_SRC} width={size} height={size} alt="ObraPlanner"
         style={{
           display: 'block',
           filter: glow ? 'drop-shadow(0 10px 40px rgba(37,99,235,0.45))' : 'none',
           ...style,
         }} />
  );
}

// Simple ObraPlanner wordmark
function Wordmark({ size = 36, color = OP_COLORS.text, style }) {
  return (
    <div style={{
      display: 'inline-flex', alignItems: 'center', gap: 12,
      fontFamily: SANS, fontWeight: 700, fontSize: size,
      letterSpacing: '-0.02em',
      color, ...style,
    }}>
      <LogoMark size={size * 1.05} />
      <span>Obra<span style={{ color: OP_COLORS.blueLight }}>Planner</span></span>
    </div>
  );
}

Object.assign(window, { OP_COLORS, SANS, MONO, Vignette, Pill, ChapterTag, Wordmark, LogoMark, LOGO_SRC });