// theme.jsx — design tokens + small shared primitives for the Scam Protect launch video.
// Warm + premium + technical, light & clean. Exports to window.

const T = {
  // Surfaces — warm whites
  bg:          '#F7F4EE',
  surface:     '#FFFFFF',
  surfaceWarm: '#FDFBF6',
  panel:       '#F1ECE3',

  // Ink — warm near-blacks
  ink:     '#241F1A',
  inkSoft: '#5A534A',
  muted:   '#8C8377',
  faint:   '#B6AEA1',

  // Hairlines
  line:     '#E7E0D4',
  lineSoft: '#F0EAE0',

  // Brand — deep emerald-teal (premium, trustworthy, warm-leaning)
  brand:     '#1C6B57',
  brandDeep: '#114C3E',
  brandSoft: '#E4EFE9',
  brandTint: '#F0F6F2',

  // Safe / confirm
  safe:     '#2E9D71',
  safeSoft: '#E3F2EA',

  // Threat — warm coral-red
  threat:     '#CF4B33',
  threatDeep: '#A6371F',
  threatSoft: '#FAE7E1',

  // Caution amber
  amber:     '#CC8A2B',
  amberSoft: '#F6ECD8',

  // Type
  display: "'Hanken Grotesk', system-ui, sans-serif",
  mono:    "'JetBrains Mono', ui-monospace, SFMono-Regular, monospace",
};

// ── Shield (premium, simple geometry via clip-path) ──────────────────────────
function Shield({ size = 64, fill = T.brand, stroke = 'none', children, style = {} }) {
  return (
    <div style={{
      position: 'relative',
      width: size, height: size * 1.16,
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      ...style,
    }}>
      <div style={{
        position: 'absolute', inset: 0,
        background: fill,
        clipPath: 'polygon(50% 0%, 100% 16%, 100% 56%, 50% 100%, 0% 56%, 0% 16%)',
        boxShadow: stroke !== 'none' ? `inset 0 0 0 2px ${stroke}` : 'none',
      }} />
      <div style={{ position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        {children}
      </div>
    </div>
  );
}

// ── Checkmark (two-segment polyline, simple) ─────────────────────────────────
function Check({ size = 24, color = '#fff', weight = 3, progress = 1 }) {
  const len = 32; // approx path length
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" style={{ display: 'block' }}>
      <path d="M5 12.5 L10 17.5 L19 7"
        stroke={color} strokeWidth={weight}
        strokeLinecap="round" strokeLinejoin="round"
        strokeDasharray={len} strokeDashoffset={len * (1 - progress)} />
    </svg>
  );
}

// ── Warning triangle (polygon, simple) ───────────────────────────────────────
function WarnTri({ size = 22, color = T.threat, mark = '#fff' }) {
  return (
    <div style={{
      position: 'relative', width: size, height: size,
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
    }}>
      <div style={{
        position: 'absolute', inset: 0, background: color,
        clipPath: 'polygon(50% 6%, 96% 92%, 4% 92%)',
        borderRadius: 3,
      }} />
      <span style={{
        position: 'relative', color: mark, fontFamily: T.display, fontWeight: 800,
        fontSize: size * 0.5, lineHeight: 1, marginTop: size * 0.12,
      }}>!</span>
    </div>
  );
}

// ── Small status dot ─────────────────────────────────────────────────────────
function Dot({ size = 8, color = T.safe, glow = false }) {
  return (
    <span style={{
      width: size, height: size, borderRadius: '50%', background: color,
      display: 'inline-block', flexShrink: 0,
      boxShadow: glow ? `0 0 0 ${size * 0.5}px ${color}22` : 'none',
    }} />
  );
}

// ── Mono kicker label ────────────────────────────────────────────────────────
function Kicker({ children, color = T.brand, style = {} }) {
  return (
    <div style={{
      fontFamily: T.mono, fontSize: 15, fontWeight: 500,
      letterSpacing: '0.22em', textTransform: 'uppercase', color,
      ...style,
    }}>{children}</div>
  );
}

Object.assign(window, { T, Shield, Check, WarnTri, Dot, Kicker });