// tokens.jsx — UmrahGuide design tokens + theme system
// Three palettes (forest / desert / midnight), two type pairings (editorial / modern).
// Anything theme-dependent is a CSS custom property so screens can share styling
// across themes without prop-drilling.

const UG_THEMES = {
  forest: {
    name: 'Forest',
    primary:     '#0F3D2E',
    primaryDark: '#0A2A20',
    primaryInk:  '#FBFAF6',
    sand:        '#E9DCC4',
    gold:        '#C9A961',
    surface:     '#FBFAF6',
    surfaceAlt:  '#F4EFE3',
    card:        '#FFFFFF',
    ink:         '#1A1A1A',
    inkSoft:     '#3A3A3A',
    muted:       '#6B6B6B',
    hairline:    '#E5E0D5',
    success:     '#5C7A4D',
    danger:      '#A23A2A',
    bgGradient:  'radial-gradient(120% 80% at 50% -10%, rgba(201,169,97,0.18), transparent 60%), #0F3D2E',
  },
  desert: {
    name: 'Desert',
    primary:     '#5C3A1E',     // burnt umber
    primaryDark: '#3E2612',
    primaryInk:  '#FBF6EE',
    sand:        '#F2E6CF',
    gold:        '#B98A3C',
    surface:     '#FBF6EE',
    surfaceAlt:  '#F0E5CD',
    card:        '#FFFFFF',
    ink:         '#241A11',
    inkSoft:     '#3F2E20',
    muted:       '#7A6852',
    hairline:    '#E6D9BD',
    success:     '#7A6A2D',
    danger:      '#A23A2A',
    bgGradient:  'radial-gradient(120% 80% at 50% -10%, rgba(185,138,60,0.22), transparent 60%), #5C3A1E',
  },
  midnight: {
    name: 'Midnight',
    primary:     '#0E1A33',
    primaryDark: '#070E1F',
    primaryInk:  '#F4F0E4',
    sand:        '#E8DEC4',
    gold:        '#D4B570',
    surface:     '#F6F2E7',
    surfaceAlt:  '#EDE7D4',
    card:        '#FFFFFF',
    ink:         '#0E1424',
    inkSoft:     '#2A2F3F',
    muted:       '#6B6F7C',
    hairline:    '#E0DAC9',
    success:     '#3B6A55',
    danger:      '#9A2E2A',
    bgGradient:  'radial-gradient(120% 80% at 50% -10%, rgba(212,181,112,0.20), transparent 60%), #0E1A33',
  },
};

const UG_TYPESETS = {
  editorial: {
    name: 'Editorial',
    display: '"Fraunces", "Cormorant Garamond", Georgia, serif',
    body:    '"Inter", -apple-system, "Segoe UI", system-ui, sans-serif',
    arabic:  '"Amiri", "Scheherazade New", serif',
    displayWeight: 400,
    displayLetter: '-0.015em',
  },
  modern: {
    name: 'Modern',
    display: '"Inter", -apple-system, "Segoe UI", system-ui, sans-serif',
    body:    '"Inter", -apple-system, "Segoe UI", system-ui, sans-serif',
    arabic:  '"Amiri", "Scheherazade New", serif',
    displayWeight: 600,
    displayLetter: '-0.025em',
  },
};

// Apply theme tokens as CSS variables on a root element.
function ugThemeVars(themeKey, typeKey) {
  const t = UG_THEMES[themeKey] || UG_THEMES.forest;
  const f = UG_TYPESETS[typeKey] || UG_TYPESETS.editorial;
  return {
    '--ug-primary':       t.primary,
    '--ug-primary-dark':  t.primaryDark,
    '--ug-primary-ink':   t.primaryInk,
    '--ug-sand':          t.sand,
    '--ug-gold':          t.gold,
    '--ug-surface':       t.surface,
    '--ug-surface-alt':   t.surfaceAlt,
    '--ug-card':          t.card,
    '--ug-ink':           t.ink,
    '--ug-ink-soft':      t.inkSoft,
    '--ug-muted':         t.muted,
    '--ug-hairline':      t.hairline,
    '--ug-success':       t.success,
    '--ug-danger':        t.danger,
    '--ug-bg-gradient':   t.bgGradient,
    '--ug-display':       f.display,
    '--ug-body':          f.body,
    '--ug-arabic':        f.arabic,
    '--ug-display-weight': f.displayWeight,
    '--ug-display-letter': f.displayLetter,
    fontFamily: f.body,
    color: t.ink,
  };
}

// Tiny stroke icon set, monoline ~ 1.6 stroke.
function UGIcon({ name, size = 22, color = 'currentColor', stroke = 1.6 }) {
  const p = { fill: 'none', stroke: color, strokeWidth: stroke, strokeLinecap: 'round', strokeLinejoin: 'round' };
  const paths = {
    home:    <><path d="M3 11l9-7 9 7" {...p}/><path d="M5 10v9h5v-6h4v6h5v-9" {...p}/></>,
    book:    <><path d="M4 5a2 2 0 0 1 2-2h12v18H6a2 2 0 0 1-2-2V5z" {...p}/><path d="M4 19a2 2 0 0 1 2-2h12" {...p}/></>,
    compass: <><circle cx="12" cy="12" r="9" {...p}/><path d="M15.5 8.5L13 13l-4.5 2.5L11 11l4.5-2.5z" {...p}/></>,
    users:   <><circle cx="9" cy="8" r="3" {...p}/><circle cx="17" cy="9" r="2.2" {...p}/><path d="M3 19c0-3 2.7-5 6-5s6 2 6 5" {...p}/><path d="M15 19c0-2 1.5-3.5 4-3.5S22 17 22 19" {...p}/></>,
    user:    <><circle cx="12" cy="8" r="3.5" {...p}/><path d="M5 20c0-3.5 3-6 7-6s7 2.5 7 6" {...p}/></>,
    chevron: <path d="M9 6l6 6-6 6" {...p}/>,
    chevronL:<path d="M15 6l-6 6 6 6" {...p}/>,
    chevronD:<path d="M6 9l6 6 6-6" {...p}/>,
    chevronUp:<path d="M6 15l6-6 6 6" {...p}/>,
    edit:    <><path d="M4 20h4l10-10-4-4L4 16v4z" {...p}/><path d="M14 6l4 4" {...p}/></>,
    heart:   <path d="M12 20s-7-4.5-7-10a4 4 0 0 1 7-2.5A4 4 0 0 1 19 10c0 5.5-7 10-7 10z" {...p}/>,
    mosque:  <><path d="M12 3c-1 1.5-1 3 0 4.5 1-1.5 1-3 0-4.5z" {...p}/><path d="M5 21V12a7 7 0 0 1 14 0v9" {...p}/><path d="M5 21h14M9 21v-5a3 3 0 0 1 6 0v5" {...p}/></>,
    pin:     <><path d="M12 22s7-7.5 7-13a7 7 0 1 0-14 0c0 5.5 7 13 7 13z" {...p}/><circle cx="12" cy="9" r="2.5" {...p}/></>,
    kaaba:   <><rect x="5" y="7" width="14" height="13" {...p}/><path d="M5 11h14" {...p} strokeWidth={stroke*0.8}/></>,
    counter: <><circle cx="12" cy="12" r="9" {...p}/><circle cx="12" cy="12" r="2" {...p}/></>,
    play:    <path d="M8 5v14l11-7z" {...p} fill={color}/>,
    pause:   <><rect x="7" y="5" width="3.5" height="14" {...p} fill={color}/><rect x="13.5" y="5" width="3.5" height="14" {...p} fill={color}/></>,
    plus:    <><path d="M12 5v14M5 12h14" {...p}/></>,
    minus:   <path d="M5 12h14" {...p}/>,
    check:   <path d="M5 12.5l4.5 4.5L19 7" {...p}/>,
    bell:    <><path d="M6 9a6 6 0 1 1 12 0c0 4 1.5 6 1.5 6h-15S6 13 6 9z" {...p}/><path d="M10 19a2 2 0 0 0 4 0" {...p}/></>,
    settings:<><circle cx="12" cy="12" r="3" {...p}/><path d="M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M5.6 18.4l2.1-2.1M16.3 7.7l2.1-2.1" {...p}/></>,
    search:  <><circle cx="11" cy="11" r="6" {...p}/><path d="M16 16l4 4" {...p}/></>,
    sun:     <><circle cx="12" cy="12" r="4" {...p}/><path d="M12 3v2M12 19v2M3 12h2M19 12h2M5.6 5.6l1.4 1.4M17 17l1.4 1.4M5.6 18.4L7 17M17 7l1.4-1.4" {...p}/></>,
    clock:   <><circle cx="12" cy="12" r="9" {...p}/><path d="M12 7v5l3 2" {...p}/></>,
    calendar:<><rect x="4" y="6" width="16" height="14" rx="2" {...p}/><path d="M4 10h16M9 4v4M15 4v4" {...p}/></>,
    plane:   <path d="M3 13l3-1 3 4 3-1-2-7 2-1 4 6 5-1-3 4 3 4-5-1-4 6-2-1 2-7-3-1z" {...p}/>,
    arrowR:  <><path d="M5 12h14M13 6l6 6-6 6" {...p}/></>,
    arrowL:  <><path d="M19 12H5M11 6l-6 6 6 6" {...p}/></>,
    cross:   <path d="M6 6l12 12M18 6L6 18" {...p}/>,
    info:    <><circle cx="12" cy="12" r="9" {...p}/><path d="M12 11v5M12 8v.5" {...p}/></>,
    sos:     <><circle cx="12" cy="12" r="9" {...p}/><path d="M9 10c0-1 .8-2 2-2h2c1.2 0 2 1 2 2s-.8 2-2 2h-2c-1.2 0-2 1-2 2s.8 2 2 2h2c1.2 0 2-1 2-2" {...p}/></>,
    phone:   <path d="M5 4h3l2 5-2 1c1 2 3 4 5 5l1-2 5 2v3c0 1-1 2-2 2C9 20 4 15 4 6c0-1 1-2 2-2z" {...p}/>,
    medical: <><path d="M12 4v16M4 12h16" {...p} strokeWidth={stroke*1.4}/></>,
    waypoint:<><circle cx="12" cy="12" r="3" {...p}/><path d="M12 3v3M12 18v3M3 12h3M18 12h3" {...p}/></>,
    leaf:    <path d="M5 19c0-9 7-14 14-14 0 9-5 14-14 14zM5 19l8-8" {...p}/>,
  };
  return (
    <svg viewBox="0 0 24 24" width={size} height={size} style={{ display: 'block', flexShrink: 0 }}>
      {paths[name] || paths.home}
    </svg>
  );
}

// Subtle decorative pattern (Islamic 8-point star), used as background tint.
const UG_PATTERN_DATAURL = "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'><g fill='none' stroke='%23C9A961' stroke-width='0.6' opacity='0.7'><polygon points='40,8 48,32 72,32 52,46 60,70 40,55 20,70 28,46 8,32 32,32'/></g></svg>\")";

Object.assign(window, {
  UG_THEMES, UG_TYPESETS, ugThemeVars, UGIcon, UG_PATTERN_DATAURL,
});