// icons.jsx — Custom SVG icon set for StarPath
// No emoji, all hand-built strokes at 1.5 weight.

const Icon = ({ children, size = 18, stroke = 1.5, style = {}, className = "" }) => (
  <svg
    width={size} height={size} viewBox="0 0 24 24"
    fill="none" stroke="currentColor" strokeWidth={stroke}
    strokeLinecap="round" strokeLinejoin="round"
    style={style} className={className}
  >{children}</svg>
);

// ——— Brand mark for Star Path: a stylized 8-pointed star inside a path arc ———
const LogoMark = ({ size = 28, stroke = 1.5 }) => (
  <svg width={size} height={size} viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round">
    {/* Outer orbital arc */}
    <path d="M 4 20 Q 16 4 28 20" opacity="0.55" />
    {/* 8-pointed star */}
    <g>
      <path d="M 16 8 L 16 24" />
      <path d="M 8 16 L 24 16" />
      <path d="M 10.3 10.3 L 21.7 21.7" opacity="0.55" />
      <path d="M 21.7 10.3 L 10.3 21.7" opacity="0.55" />
    </g>
    {/* small orbiter */}
    <circle cx="28" cy="20" r="1.4" fill="currentColor" stroke="none" />
  </svg>
);

// ——— UI Icons ———
const IconArrowRight = (p) => <Icon {...p}><path d="M5 12h14M13 6l6 6-6 6"/></Icon>;
const IconArrowUpRight = (p) => <Icon {...p}><path d="M7 17L17 7M8 7h9v9"/></Icon>;
const IconArrowLeft = (p) => <Icon {...p}><path d="M19 12H5M11 6L5 12l6 6"/></Icon>;
const IconCheck = (p) => <Icon {...p}><path d="M4 12l5 5L20 6"/></Icon>;
const IconClose = (p) => <Icon {...p}><path d="M6 6l12 12M18 6L6 18"/></Icon>;
const IconPlus = (p) => <Icon {...p}><path d="M12 5v14M5 12h14"/></Icon>;
const IconMinus = (p) => <Icon {...p}><path d="M5 12h14"/></Icon>;
const IconSearch = (p) => <Icon {...p}><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></Icon>;
const IconFilter = (p) => <Icon {...p}><path d="M4 6h16M7 12h10M10 18h4"/></Icon>;
const IconChevDown = (p) => <Icon {...p}><path d="M6 9l6 6 6-6"/></Icon>;
const IconChevRight = (p) => <Icon {...p}><path d="M9 6l6 6-6 6"/></Icon>;
const IconMore = (p) => <Icon {...p}><circle cx="5" cy="12" r="1" fill="currentColor"/><circle cx="12" cy="12" r="1" fill="currentColor"/><circle cx="19" cy="12" r="1" fill="currentColor"/></Icon>;

// Domain icons (custom drawn, not stock)
const IconChart = (p) => <Icon {...p}><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="5"/><path d="M12 3v18M3 12h18"/></Icon>;
const IconUser = (p) => <Icon {...p}><circle cx="12" cy="8" r="4"/><path d="M4 20c1.5-4 5-6 8-6s6.5 2 8 6"/></Icon>;
const IconUsers = (p) => <Icon {...p}><circle cx="9" cy="8" r="3.5"/><path d="M2 19c1-3 4-5 7-5s6 2 7 5"/><circle cx="17" cy="6" r="2.5"/><path d="M16 12c2.5.3 4.5 1.7 6 4"/></Icon>;
const IconCalendar = (p) => <Icon {...p}><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 10h18M8 3v4M16 3v4"/></Icon>;
const IconBook = (p) => <Icon {...p}><path d="M5 4h11a2 2 0 012 2v14a2 2 0 00-2-2H5V4z"/><path d="M5 18H4a1 1 0 01-1-1V5a1 1 0 011-1h1"/><path d="M9 8h6M9 12h5"/></Icon>;
const IconDocument = (p) => <Icon {...p}><path d="M6 3h9l5 5v13a1 1 0 01-1 1H6a1 1 0 01-1-1V4a1 1 0 011-1z"/><path d="M14 3v6h6"/></Icon>;
const IconHeart = (p) => <Icon {...p}><path d="M12 20s-7-4.5-7-10a4.5 4.5 0 018-3 4.5 4.5 0 018 3c0 5.5-9 10-9 10z"/></Icon>;
const IconMoon = (p) => <Icon {...p}><path d="M20 14A8 8 0 1110 4a6 6 0 0010 10z"/></Icon>;
const IconSun = (p) => <Icon {...p}><circle cx="12" cy="12" r="4"/><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"/></Icon>;
const IconSparkle = (p) => <Icon {...p}><path d="M12 3l1.5 6.5L20 11l-6.5 1.5L12 19l-1.5-6.5L4 11l6.5-1.5z"/><path d="M19 4l.5 1.5L21 6l-1.5.5L19 8l-.5-1.5L17 6l1.5-.5z"/></Icon>;
const IconCompass = (p) => <Icon {...p}><circle cx="12" cy="12" r="9"/><path d="M15 9l-2 6-4 1 2-6z" fill="currentColor" stroke="none"/></Icon>;
const IconDownload = (p) => <Icon {...p}><path d="M12 3v13M6 11l6 6 6-6M4 21h16"/></Icon>;
const IconShield = (p) => <Icon {...p}><path d="M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6l8-3z"/></Icon>;
const IconBell = (p) => <Icon {...p}><path d="M6 16V10a6 6 0 0112 0v6l2 2H4l2-2zM10 21a2 2 0 004 0"/></Icon>;
const IconSettings = (p) => <Icon {...p}><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 00.3 1.8l.1.1a2 2 0 01-2.8 2.8l-.1-.1a1.7 1.7 0 00-1.8-.3 1.7 1.7 0 00-1 1.5V21a2 2 0 01-4 0v-.1a1.7 1.7 0 00-1.1-1.5 1.7 1.7 0 00-1.8.3l-.1.1a2 2 0 01-2.8-2.8l.1-.1a1.7 1.7 0 00.3-1.8 1.7 1.7 0 00-1.5-1H3a2 2 0 010-4h.1a1.7 1.7 0 001.5-1.1 1.7 1.7 0 00-.3-1.8l-.1-.1a2 2 0 012.8-2.8l.1.1a1.7 1.7 0 001.8.3h.1a1.7 1.7 0 001-1.5V3a2 2 0 014 0v.1a1.7 1.7 0 001 1.5 1.7 1.7 0 001.8-.3l.1-.1a2 2 0 012.8 2.8l-.1.1a1.7 1.7 0 00-.3 1.8v.1a1.7 1.7 0 001.5 1H21a2 2 0 010 4h-.1a1.7 1.7 0 00-1.5 1z"/></Icon>;
const IconTrend = (p) => <Icon {...p}><path d="M3 17l6-6 4 4 8-8"/><path d="M14 7h7v7"/></Icon>;
const IconFlow = (p) => <Icon {...p}><rect x="3" y="3" width="6" height="6" rx="1"/><rect x="15" y="15" width="6" height="6" rx="1"/><path d="M9 6h6a3 3 0 013 3v6"/></Icon>;
const IconCpu = (p) => <Icon {...p}><rect x="5" y="5" width="14" height="14" rx="2"/><rect x="9" y="9" width="6" height="6"/><path d="M9 2v3M15 2v3M9 19v3M15 19v3M2 9h3M2 15h3M19 9h3M19 15h3"/></Icon>;
const IconLayers = (p) => <Icon {...p}><path d="M12 3l9 5-9 5-9-5z"/><path d="M3 13l9 5 9-5"/></Icon>;
const IconCircle = (p) => <Icon {...p}><circle cx="12" cy="12" r="9"/></Icon>;
const IconLock = (p) => <Icon {...p}><rect x="5" y="11" width="14" height="10" rx="2"/><path d="M8 11V7a4 4 0 018 0v4"/></Icon>;
const IconMail = (p) => <Icon {...p}><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 7 9-7"/></Icon>;
const IconClock = (p) => <Icon {...p}><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></Icon>;
const IconPin = (p) => <Icon {...p}><path d="M12 22s7-7 7-12a7 7 0 10-14 0c0 5 7 12 7 12z"/><circle cx="12" cy="10" r="2.5"/></Icon>;
const IconRefresh = (p) => <Icon {...p}><path d="M3 12a9 9 0 0115-6.7L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 01-15 6.7L3 16"/><path d="M3 21v-5h5"/></Icon>;
const IconStar = (p) => <Icon {...p}><path d="M12 3l2.7 6L21 10l-5 4.5L17.5 21 12 17.5 6.5 21 8 14.5 3 10l6.3-1z"/></Icon>;
const IconBolt = (p) => <Icon {...p}><path d="M13 3L4 14h7l-2 7 9-11h-7z"/></Icon>;
const IconCoin = (p) => <Icon {...p}><circle cx="12" cy="12" r="9"/><path d="M9 9.5a2 2 0 012-1.5h2a2 2 0 010 4h-2a2 2 0 000 4h2a2 2 0 002-1.5M12 6v2M12 16v2"/></Icon>;
const IconJournal = (p) => <Icon {...p}><path d="M5 3h12a2 2 0 012 2v16l-4-2-4 2-4-2-4 2V5a2 2 0 012-2z"/><path d="M8 8h8M8 12h5"/></Icon>;
const IconScales = (p) => <Icon {...p}><path d="M12 3v18M5 21h14M5 8l4 8H1zM19 8l4 8h-8zM5 8h14"/></Icon>;

// Zodiac glyphs — drawn as SVG paths (no Unicode/emoji)
const Zodiac = {
  aries: <g><path d="M5 18c0-6 2-9 4-9s3 2 3 4M19 18c0-6-2-9-4-9s-3 2-3 4"/></g>,
  taurus: <g><circle cx="12" cy="15" r="4"/><path d="M5 7c2 2 4 3 7 3s5-1 7-3"/></g>,
  gemini: <g><path d="M7 5v14M17 5v14M6 6h12M6 18h12"/></g>,
  cancer: <g><circle cx="8" cy="14" r="3"/><circle cx="16" cy="10" r="3"/><path d="M5 8c2-2 5-3 9-2M19 16c-2 2-5 3-9 2"/></g>,
  leo: <g><circle cx="9" cy="11" r="4"/><path d="M13 11c2 0 4 2 4 5s-1 4-2 4"/></g>,
  virgo: <g><path d="M5 7v12M5 7c1-1 3-1 3 2v10M8 9c1-1 3-1 3 2v8M11 11c1-1 3-1 3 2v6c0 2 1 3 3 3s2-1 2-3-1-3-3-3"/></g>,
  libra: <g><path d="M4 18h16M5 15h6c0-3 1-5 4-5s4 2 4 5h-2"/></g>,
  scorpio: <g><path d="M5 7v12M5 7c1-1 3-1 3 2v10M8 9c1-1 3-1 3 2v8M11 11c1-1 3-1 3 2v6h4M17 14l4 4-4 4"/></g>,
  sagittarius: <g><path d="M5 19l14-14M14 5h5v5M9 9l4 4"/></g>,
  capricorn: <g><path d="M5 7v8c0 2 1 3 3 3s3-1 3-3V7M11 14c1-3 4-5 6-3s1 5-2 5"/></g>,
  aquarius: <g><path d="M3 10l3-2 3 2 3-2 3 2 3-2 3 2M3 15l3-2 3 2 3-2 3 2 3-2 3 2"/></g>,
  pisces: <g><path d="M5 5c4 3 4 11 0 14M19 5c-4 3-4 11 0 14M5 12h14"/></g>,
};

// Planet glyphs
const Planet = {
  sun: <g><circle cx="12" cy="12" r="7"/><circle cx="12" cy="12" r="1.5" fill="currentColor" stroke="none"/></g>,
  moon: <g><path d="M16 4a8 8 0 100 16 6 6 0 010-16z"/></g>,
  mercury: <g><circle cx="12" cy="10" r="4"/><path d="M9 5c0-2 1-3 3-3s3 1 3 3M12 14v8M9 19h6"/></g>,
  venus: <g><circle cx="12" cy="9" r="5"/><path d="M12 14v8M9 19h6"/></g>,
  mars: <g><circle cx="11" cy="13" r="5"/><path d="M15 9l5-5M16 4h4v4"/></g>,
  jupiter: <g><path d="M7 6c5-3 9 1 7 6-1 3-4 3-6 3M10 4v16M5 16h10"/></g>,
  saturn: <g><path d="M7 4v14c0 2 1 3 3 3s3-1 3-3M11 6c2-3 8-2 8 3s-5 5-7 3"/></g>,
};

const PlanetGlyph = ({ kind, size = 18 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
    {Planet[kind] || Planet.sun}
  </svg>
);

const ZodiacGlyph = ({ kind, size = 18 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
    {Zodiac[kind] || Zodiac.aries}
  </svg>
);

Object.assign(window, {
  Icon, LogoMark,
  IconArrowRight, IconArrowUpRight, IconArrowLeft, IconCheck, IconClose, IconPlus, IconMinus,
  IconSearch, IconFilter, IconChevDown, IconChevRight, IconMore,
  IconChart, IconUser, IconUsers, IconCalendar, IconBook, IconDocument, IconHeart,
  IconMoon, IconSun, IconSparkle, IconCompass, IconDownload, IconShield, IconBell,
  IconSettings, IconTrend, IconFlow, IconCpu, IconLayers, IconCircle, IconLock, IconMail,
  IconClock, IconPin, IconRefresh, IconStar, IconBolt, IconCoin, IconJournal, IconScales,
  PlanetGlyph, ZodiacGlyph, Zodiac, Planet,
});
