/* ============================================================
   STYLE TOKEN CONFIG + MENU TAXONOMY
   Each style is a self-contained config object. To add a 5th
   style: append one entry here, add its CSS block in empire.css,
   and (optionally) author preview blocks. Nothing else changes.
   ============================================================ */

const STYLES = {
  glass: {
    id:'glass',
    name:'Glassmorphism',
    tagline:'Frosted, weightless, premium',
    vibe:'Translucent surfaces floating on light. Calm and Vision-OS clean.',
    count:52,
    fontClass:'gl-canvas',
    canvas:'gl-canvas',
    swatch:['#7c4dff','#ff5d8f','#2bd6ff','#ffffff'],
    chart:['rgba(255,255,255,.9)','rgba(255,255,255,.45)'],
    cls:{
      surface:'gl-surface', surface2:'gl-surface-2',
      btn:'gl-btn', btnPrimary:'gl-btn-primary', input:'gl-input', chip:'gl-chip',
      text:'text-white', sub:'text-white/70', muted:'text-white/50',
      accent:'#e9ecff',
    },
  },
  maximal: {
    id:'maximal',
    name:'Maximalism',
    tagline:'Loud, layered, fearless',
    vibe:'Clashing color blocks, fat borders, hard shadows. Editorial poster energy.',
    count:38,
    fontClass:'mx-canvas',
    canvas:'mx-canvas',
    swatch:['#ffe600','#ff2d75','#2d6bff','#111111'],
    chart:['#ff2d75','#2d6bff'],
    cls:{
      surface:'mx-surface', surface2:'mx-surface-lime',
      btn:'mx-btn', btnPrimary:'mx-btn mx-btn-pink', input:'mx-input', chip:'mx-chip',
      text:'text-[#111]', sub:'text-[#333]', muted:'text-[#555]',
      display:'mx-display',
      accent:'#ff2d75',
    },
  },
  motion: {
    id:'motion',
    name:'Motion Morphism',
    tagline:'Fluid, springy, alive',
    vibe:'Morphing blobs and animated gradients. Everything reacts and breathes.',
    count:44,
    fontClass:'mo-canvas',
    canvas:'mo-canvas',
    swatch:['#7a5cff','#ff6fd8','#5ad0ff','#ffd6f5'],
    chart:['#7a5cff','#ff6fd8'],
    cls:{
      surface:'mo-surface', surface2:'mo-surface',
      btn:'mo-btn', btnPrimary:'mo-btn', btnGhost:'mo-btn-ghost', input:'mo-input', chip:'mo-chip',
      text:'text-[#1a1240]', sub:'text-[#4a3d7a]', muted:'text-[#7a6da6]',
      grad:'mo-grad-text',
      accent:'#7a5cff',
    },
  },
  retro: {
    id:'retro',
    name:'Retro Futurism',
    tagline:'Neon, chrome, arcade-future',
    vibe:'Synthwave glow on near-black. Scanlines, grid horizon, holographic edges.',
    count:41,
    fontClass:'rf-canvas',
    canvas:'rf-canvas',
    swatch:['#2dd4ff','#ff37e6','#b06bff','#070713'],
    chart:['#2dd4ff','#ff37e6'],
    cls:{
      surface:'rf-surface', surface2:'rf-surface rf-surface-mag',
      btn:'rf-btn', btnPrimary:'rf-btn-mag rf-btn', input:'rf-input', chip:'rf-chip',
      text:'text-[#d7f7ff]', sub:'text-[#8fd4e6]', muted:'text-[#5f93a6]',
      display:'rf-display', glow:'rf-glow',
      accent:'#2dd4ff',
    },
  },
};

const STYLE_ORDER = ['glass','maximal','motion','retro'];

/* Menu taxonomy: component TYPE -> sub-types. Drives the accordion sidebar.
   Each subtype id maps to blocks via block.subtype. */
const MENU = [
  { id:'buttons', label:'Buttons', icon:'cursor', subs:[
    { id:'primary', label:'Primary & states' },
    { id:'group', label:'Button group' },
    { id:'icon', label:'Icon & FAB' },
  ]},
  { id:'cards', label:'Cards', icon:'card', subs:[
    { id:'product', label:'Product' },
    { id:'pricing', label:'Pricing' },
    { id:'profile', label:'Profile' },
    { id:'stat', label:'Stat / KPI' },
    { id:'testimonial', label:'Testimonial' },
    { id:'media', label:'Media' },
  ]},
  { id:'navigation', label:'Navigation & Interactions', icon:'compass', subs:[
    { id:'navbar', label:'Top nav bar' },
    { id:'tabs', label:'Tabs & segmented' },
    { id:'breadcrumb', label:'Breadcrumb' },
    { id:'cursor', label:'Custom cursors' },
    { id:'scrollbar', label:'Scrollbars' },
  ]},
  { id:'forms', label:'Inputs & Forms', icon:'input', subs:[
    { id:'signin', label:'Sign-in' },
    { id:'field', label:'Text field' },
    { id:'toggle', label:'Toggle & switch' },
  ]},
  { id:'overlays', label:'Overlays & Feedback', icon:'layers', subs:[
    { id:'modal', label:'Modal' },
    { id:'toast', label:'Toast' },
    { id:'tooltip', label:'Tooltip' },
  ]},
  { id:'data', label:'Data & Charts', icon:'chart', subs:[
    { id:'area', label:'Area chart' },
    { id:'bars', label:'Bar chart' },
    { id:'table', label:'Table' },
  ]},
  { id:'marketing', label:'Marketing Sections', icon:'mega', subs:[
    { id:'hero', label:'Hero' },
    { id:'cta', label:'CTA banner' },
    { id:'features', label:'Feature grid' },
  ]},
  { id:'dashboard', label:'Dashboard', icon:'grid', subs:[
    { id:'analytics', label:'Analytics widget' },
    { id:'activity', label:'Activity feed' },
  ]},
];

/* tiny inline icon set for the sidebar (stroke, currentColor) */
function MenuIcon({ name, size=16 }){
  const p = {
    cursor:'M5 3l14 7-6 2-2 6z',
    card:'M3 6h18v12H3z M3 10h18',
    compass:'M12 2a10 10 0 100 20 10 10 0 000-20z M15 9l-2 4-4 2 2-4z',
    input:'M4 7h16v10H4z M8 7v10',
    layers:'M12 3l9 5-9 5-9-5z M3 13l9 5 9-5',
    chart:'M4 20V10 M10 20V4 M16 20v-7 M22 20H2',
    mega:'M3 11l14-6v14L3 13z M7 12v6',
    grid:'M4 4h7v7H4z M13 4h7v7h-7z M13 13h7v7h-7z M4 13h7v7H4z',
  }[name] || 'M4 4h16v16H4z';
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
      stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <path d={p}/>
    </svg>
  );
}

window.STYLES = STYLES;
window.STYLE_ORDER = STYLE_ORDER;
window.MENU = MENU;
window.MenuIcon = MenuIcon;