// Tiny inline SVG icon set. All accept {size, color, stroke}.
const Icon = ({ children, size = 18, color = 'currentColor', stroke = 1.8, style }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
       stroke={color} strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round"
       style={style}>
    {children}
  </svg>
);

const IconSearch = (p) => <Icon {...p}><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></Icon>;
const IconBolt = (p) => <Icon {...p}><path d="M13 2 4.5 13.5h6L11 22l8.5-11.5h-6L13 2Z"/></Icon>;
const IconCheck = (p) => <Icon {...p}><path d="M4 12.5 9 17.5 20 6.5"/></Icon>;
const IconX = (p) => <Icon {...p}><path d="M6 6l12 12M18 6 6 18"/></Icon>;
const IconChevronDown = (p) => <Icon {...p}><path d="m6 9 6 6 6-6"/></Icon>;
const IconChevronRight = (p) => <Icon {...p}><path d="m9 6 6 6-6 6"/></Icon>;
const IconArrowRight = (p) => <Icon {...p}><path d="M5 12h14M13 5l7 7-7 7"/></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 IconMail = (p) => <Icon {...p}><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 7 9-7"/></Icon>;
const IconPhone = (p) => <Icon {...p}><path d="M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2Z"/></Icon>;
const IconGlobe = (p) => <Icon {...p}><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18"/></Icon>;
const IconBot = (p) => <Icon {...p}><rect x="4" y="7" width="16" height="13" rx="3"/><path d="M12 3v4M9 13v.01M15 13v.01M8 17h8"/></Icon>;
const IconTarget = (p) => <Icon {...p}><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="5"/><circle cx="12" cy="12" r="1"/></Icon>;
const IconSpark = (p) => <Icon {...p}><path d="M12 3v4M12 17v4M3 12h4M17 12h4M6 6l2.5 2.5M15.5 15.5 18 18M6 18l2.5-2.5M15.5 8.5 18 6"/></Icon>;
const IconShield = (p) => <Icon {...p}><path d="M12 3 4 6v6c0 5 3.5 8.5 8 9 4.5-.5 8-4 8-9V6l-8-3Z"/></Icon>;
const IconStar = (p) => <Icon {...p}><path d="m12 3 2.7 5.8 6.3.6-4.8 4.4 1.4 6.2L12 17l-5.6 3 1.4-6.2L3 9.4l6.3-.6L12 3Z"/></Icon>;
const IconPlay = (p) => <Icon {...p}><path d="M6 4v16l14-8L6 4Z"/></Icon>;
const IconClock = (p) => <Icon {...p}><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3.5 2"/></Icon>;
const IconLock = (p) => <Icon {...p}><rect x="4" y="11" width="16" height="10" rx="2"/><path d="M8 11V8a4 4 0 0 1 8 0v3"/></Icon>;
const IconRefresh = (p) => <Icon {...p}><path d="M3 12a9 9 0 0 1 15-6.7L21 8M21 3v5h-5M21 12a9 9 0 0 1-15 6.7L3 16M3 21v-5h5"/></Icon>;
const IconWand = (p) => <Icon {...p}><path d="m15 4 1 2 2 1-2 1-1 2-1-2-2-1 2-1 1-2ZM5 14l1 2 2 1-2 1-1 2-1-2-2-1 2-1 1-2ZM10 9 4 19l1.5 1.5L15 11l-3-3-2 1Z"/></Icon>;
const IconMap = (p) => <Icon {...p}><path d="M9 4 3 6v14l6-2 6 2 6-2V4l-6 2-6-2Z"/><path d="M9 4v14M15 6v14"/></Icon>;
const IconStripe = ({ size = 18 }) => (
  <svg width={size * 2.4} height={size} viewBox="0 0 60 24" fill="currentColor">
    <text x="0" y="18" fontFamily="ui-sans-serif,system-ui" fontWeight="700" fontSize="18" letterSpacing="-0.02em">stripe</text>
  </svg>
);

Object.assign(window, {
  Icon, IconSearch, IconBolt, IconCheck, IconX, IconChevronDown, IconChevronRight,
  IconArrowRight, IconCalendar, IconMail, IconPhone, IconGlobe, IconBot, IconTarget,
  IconSpark, IconShield, IconStar, IconPlay, IconClock, IconLock, IconRefresh,
  IconWand, IconMap, IconStripe,
});
