// Tom Lee Academy — design tokens.
// Brand palette extracted from tomleemusic.com:
//   --tl-bg-dark:    #141414  (header / dark sections)
//   --tl-bg-light:   #F8F8F8  (cards, body bg)
//   --tl-text:       #333333  (body text)
//   --tl-text-on-dark: #FFFFFF
//   --tl-accent:     #FFE003  (yellow accent / buttons)
// Type pairing: Newsreader serif for editorial headlines, Helvetica grotesk for body,
// JetBrains Mono for labels/data. Sharp edges. Generous whitespace.

const TL_TOKENS = {
  light: {
    bg:        '#F8F8F8',  // brand light bg
    surface:   '#FFFFFF',
    surface2:  '#EFEFEF',
    ink:       '#141414',  // brand dark
    ink2:      '#333333',  // brand body text
    ink3:      '#6B6B6B',
    muted:     '#A0A0A0',
    line:      'rgba(20,20,20,0.10)',
    line2:     'rgba(20,20,20,0.06)',
    accent:    '#FFE003',  // brand yellow
    accentInk: '#141414',  // text on yellow = dark
    success:   '#1F7A37',
    warn:      '#8B6914',
    chipBg:    '#141414',
    chipInk:   '#FFE003',
  },
  dark: {
    bg:        '#141414',
    surface:   '#1E1E1E',
    surface2:  '#262626',
    ink:       '#FFFFFF',
    ink2:      '#E5E5E5',
    ink3:      '#A0A0A0',
    muted:     '#6B6B6B',
    line:      'rgba(255,255,255,0.12)',
    line2:     'rgba(255,255,255,0.06)',
    accent:    '#FFE003',
    accentInk: '#141414',
    success:   '#7BB089',
    warn:      '#FFE003',
    chipBg:    '#FFE003',
    chipInk:   '#141414',
  },
};

const TL_FONTS = {
  serif:  "'Newsreader', 'Source Serif Pro', Georgia, serif",
  sans:   "'Helvetica Neue', Helvetica, Arial, sans-serif",
  mono:   "'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace",
};

if (typeof document !== 'undefined' && !document.getElementById('tl-fonts')) {
  const link = document.createElement('link');
  link.id = 'tl-fonts';
  link.rel = 'stylesheet';
  link.href = 'https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;0,6..72,700;1,6..72,400;1,6..72,500&family=JetBrains+Mono:wght@400;500;600&display=swap';
  document.head.appendChild(link);
}

const TLIcon = ({ name, size = 16, color = 'currentColor', stroke = 1.5 }) => {
  const s = { width: size, height: size, display: 'inline-block', flexShrink: 0 };
  const p = { fill: 'none', stroke: color, strokeWidth: stroke, strokeLinecap: 'round', strokeLinejoin: 'round' };
  switch (name) {
    case 'check':    return <svg style={s} viewBox="0 0 24 24"><polyline {...p} points="4,12 10,18 20,6"/></svg>;
    case 'x':        return <svg style={s} viewBox="0 0 24 24"><line {...p} x1="6" y1="6" x2="18" y2="18"/><line {...p} x1="18" y1="6" x2="6" y2="18"/></svg>;
    case 'chevR':    return <svg style={s} viewBox="0 0 24 24"><polyline {...p} points="9,5 16,12 9,19"/></svg>;
    case 'chevL':    return <svg style={s} viewBox="0 0 24 24"><polyline {...p} points="15,5 8,12 15,19"/></svg>;
    case 'chevD':    return <svg style={s} viewBox="0 0 24 24"><polyline {...p} points="5,9 12,16 19,9"/></svg>;
    case 'plus':     return <svg style={s} viewBox="0 0 24 24"><line {...p} x1="12" y1="5" x2="12" y2="19"/><line {...p} x1="5" y1="12" x2="19" y2="12"/></svg>;
    case 'arrowR':   return <svg style={s} viewBox="0 0 24 24"><line {...p} x1="4" y1="12" x2="20" y2="12"/><polyline {...p} points="14,6 20,12 14,18"/></svg>;
    case 'cal':      return <svg style={s} viewBox="0 0 24 24"><rect {...p} x="3" y="5" width="18" height="16" rx="1"/><line {...p} x1="3" y1="10" x2="21" y2="10"/><line {...p} x1="8" y1="3" x2="8" y2="7"/><line {...p} x1="16" y1="3" x2="16" y2="7"/></svg>;
    case 'clock':    return <svg style={s} viewBox="0 0 24 24"><circle {...p} cx="12" cy="12" r="9"/><polyline {...p} points="12,7 12,12 16,14"/></svg>;
    case 'mic':      return <svg style={s} viewBox="0 0 24 24"><rect {...p} x="9" y="3" width="6" height="12" rx="3"/><path {...p} d="M5 11a7 7 0 0 0 14 0"/><line {...p} x1="12" y1="18" x2="12" y2="22"/></svg>;
    case 'paperclip':return <svg style={s} viewBox="0 0 24 24"><path {...p} d="M21 12.5l-8.5 8.5a5.5 5.5 0 0 1-7.8-7.8l9-9a3.5 3.5 0 0 1 5 5l-9 9a1.5 1.5 0 0 1-2.1-2.1l8-8"/></svg>;
    case 'note':     return <svg style={s} viewBox="0 0 24 24"><path {...p} d="M5 4h11l4 4v12H5z"/><polyline {...p} points="15,4 15,9 20,9"/></svg>;
    case 'star':     return <svg style={s} viewBox="0 0 24 24"><polygon {...p} points="12,3 14.6,9 21,9.7 16.2,14 17.6,20.5 12,17 6.4,20.5 7.8,14 3,9.7 9.4,9"/></svg>;
    case 'msg':      return <svg style={s} viewBox="0 0 24 24"><path {...p} d="M4 5h16v12H8l-4 4z"/></svg>;
    case 'home':     return <svg style={s} viewBox="0 0 24 24"><polyline {...p} points="3,11 12,3 21,11"/><path {...p} d="M5 10v11h14V10"/></svg>;
    case 'user':     return <svg style={s} viewBox="0 0 24 24"><circle {...p} cx="12" cy="8" r="4"/><path {...p} d="M4 21a8 8 0 0 1 16 0"/></svg>;
    case 'flame':    return <svg style={s} viewBox="0 0 24 24"><path {...p} d="M12 3c1 4 5 5 5 10a5 5 0 0 1-10 0c0-2 1-3 2-4 0 2 1 3 2 3 0-3-1-5 1-9z"/></svg>;
    case 'book':     return <svg style={s} viewBox="0 0 24 24"><path {...p} d="M4 4h7a3 3 0 0 1 3 3v14a2 2 0 0 0-2-2H4z"/><path {...p} d="M20 4h-7a3 3 0 0 0-3 3v14a2 2 0 0 1 2-2h8z"/></svg>;
    case 'reply':    return <svg style={s} viewBox="0 0 24 24"><polyline {...p} points="9,7 4,12 9,17"/><path {...p} d="M4 12h11a5 5 0 0 1 5 5v3"/></svg>;
    case 'send':     return <svg style={s} viewBox="0 0 24 24"><line {...p} x1="22" y1="2" x2="11" y2="13"/><polygon {...p} points="22,2 15,22 11,13 2,9"/></svg>;
    case 'chart':    return <svg style={s} viewBox="0 0 24 24"><polyline {...p} points="3,17 9,11 13,15 21,7"/><polyline {...p} points="15,7 21,7 21,13"/></svg>;
    case 'lock':     return <svg style={s} viewBox="0 0 24 24"><rect {...p} x="5" y="11" width="14" height="9" rx="1"/><path {...p} d="M8 11V8a4 4 0 0 1 8 0v3"/></svg>;
    case 'phone':    return <svg style={s} viewBox="0 0 24 24"><path {...p} d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.37 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.33 1.85.57 2.81.7A2 2 0 0 1 22 16.92z"/></svg>;
    case 'video':    return <svg style={s} viewBox="0 0 24 24"><polygon {...p} points="23,7 16,12 23,17"/><rect {...p} x="1" y="5" width="15" height="14" rx="2"/></svg>;
    case 'camera':   return <svg style={s} viewBox="0 0 24 24"><path {...p} d="M3 7h4l2-3h6l2 3h4v13H3z"/><circle {...p} cx="12" cy="13" r="4"/></svg>;
    case 'smile':    return <svg style={s} viewBox="0 0 24 24"><circle {...p} cx="12" cy="12" r="9"/><path {...p} d="M8 14a4 4 0 0 0 8 0"/><line {...p} x1="9" y1="10" x2="9" y2="10"/><line {...p} x1="15" y1="10" x2="15" y2="10"/></svg>;
    default: return null;
  }
};

// Tom Lee logo — uses local PNG. Bigger by default; pass `height` to override.
const TLLogo = ({ height = 56, style = {} }) => (
  <img src="tomlee-logo.png" alt="Tom Lee Music" style={{ height, width: 'auto', display: 'block', ...style }} />
);

window.TL_TOKENS = TL_TOKENS;
window.TL_FONTS = TL_FONTS;
window.TLIcon = TLIcon;
window.TLLogo = TLLogo;