// Line-style icons

const Icon = ({ children, size = 20, stroke = 1.8, ...props }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
    stroke="currentColor" strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round" {...props}>
    {children}
  </svg>
);

const IconHome = (p) => <Icon {...p}><path d="M3 11.5 12 4l9 7.5" /><path d="M5 10v10h14V10" /></Icon>;
const IconCalendar = (p) => <Icon {...p}><rect x="3.5" y="5" width="17" height="15" rx="2.5" /><path d="M8 3v4M16 3v4M3.5 10h17" /></Icon>;
const IconHeart = (p) => <Icon {...p}><path d="M12 20s-7-4.35-7-10a4 4 0 0 1 7-2.65A4 4 0 0 1 19 10c0 5.65-7 10-7 10Z" /></Icon>;
const IconHeartFilled = ({ size = 20, ...p }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" {...p}>
    <path d="M12 20s-7-4.35-7-10a4 4 0 0 1 7-2.65A4 4 0 0 1 19 10c0 5.65-7 10-7 10Z" />
  </svg>
);
const IconUser = (p) => <Icon {...p}><circle cx="12" cy="8.5" r="3.5" /><path d="M4.5 20c1-4 4-6 7.5-6s6.5 2 7.5 6" /></Icon>;
const IconPlus = (p) => <Icon {...p}><path d="M12 5v14M5 12h14" /></Icon>;
const IconSearch = (p) => <Icon {...p}><circle cx="11" cy="11" r="6.5" /><path d="m20 20-4-4" /></Icon>;
const IconBell = (p) => <Icon {...p}><path d="M6 10a6 6 0 1 1 12 0c0 5 2 6 2 6H4s2-1 2-6Z" /><path d="M10 20a2 2 0 0 0 4 0" /></Icon>;
const IconMessage = (p) => <Icon {...p}><path d="M4 6.5A2.5 2.5 0 0 1 6.5 4h11A2.5 2.5 0 0 1 20 6.5v8A2.5 2.5 0 0 1 17.5 17H9l-5 4v-14.5Z" /></Icon>;
const IconSettings = (p) => <Icon {...p}><circle cx="12" cy="12" r="3" /><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9c.39.2.68.53.85.92" /></Icon>;
const IconBookmark = (p) => <Icon {...p}><path d="M6 4h12v17l-6-4-6 4V4Z" /></Icon>;
const IconShare = (p) => <Icon {...p}><circle cx="18" cy="5" r="3" /><circle cx="6" cy="12" r="3" /><circle cx="18" cy="19" r="3" /><path d="m8.6 13.5 6.8 4M15.4 6.5l-6.8 4" /></Icon>;
const IconMore = (p) => <Icon {...p}><circle cx="5" cy="12" r="1" /><circle cx="12" cy="12" r="1" /><circle cx="19" cy="12" r="1" /></Icon>;
const IconCheck = (p) => <Icon {...p}><path d="m4 12 5 5 11-11" /></Icon>;
const IconChevronLeft = (p) => <Icon {...p}><path d="m15 18-6-6 6-6" /></Icon>;
const IconChevronRight = (p) => <Icon {...p}><path d="m9 18 6-6-6-6" /></Icon>;
const IconChevronDown = (p) => <Icon {...p}><path d="m6 9 6 6 6-6" /></Icon>;
const IconClose = (p) => <Icon {...p}><path d="M6 6l12 12M18 6 6 18" /></Icon>;
const IconMapPin = (p) => <Icon {...p}><path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z" /><circle cx="12" cy="10" r="3" /></Icon>;
const IconClock = (p) => <Icon {...p}><circle cx="12" cy="12" r="8.5" /><path d="M12 7.5V12l3 2" /></Icon>;
const IconCamera = (p) => <Icon {...p}><path d="M4.5 8A2 2 0 0 1 6.5 6h2l1.5-2h4L15.5 6h2A2 2 0 0 1 19.5 8v10a2 2 0 0 1-2 2h-11a2 2 0 0 1-2-2V8Z" /><circle cx="12" cy="13" r="3.5" /></Icon>;
const IconGrid = (p) => <Icon {...p}><rect x="4" y="4" width="7" height="7" rx="1" /><rect x="13" y="4" width="7" height="7" rx="1" /><rect x="4" y="13" width="7" height="7" rx="1" /><rect x="13" y="13" width="7" height="7" rx="1" /></Icon>;
const IconList = (p) => <Icon {...p}><path d="M8 6h13M8 12h13M8 18h13M4 6h.01M4 12h.01M4 18h.01" /></Icon>;
const IconFilter = (p) => <Icon {...p}><path d="M4 5h16M7 12h10M10 19h4" /></Icon>;
const IconArrowRight = (p) => <Icon {...p}><path d="M5 12h14M13 6l6 6-6 6" /></Icon>;
const IconSparkle = (p) => <Icon {...p}><path d="M12 3v4M12 17v4M3 12h4M17 12h4M5.6 5.6l2.8 2.8M15.6 15.6l2.8 2.8M5.6 18.4l2.8-2.8M15.6 8.4l2.8-2.8" /></Icon>;
const IconQr = (p) => <Icon {...p}><rect x="3.5" y="3.5" width="7" height="7" rx="1" /><rect x="13.5" y="3.5" width="7" height="7" rx="1" /><rect x="3.5" y="13.5" width="7" height="7" rx="1" /><path d="M13.5 13.5h3v3M20.5 16.5v4M16.5 20.5h4" /></Icon>;
const IconEdit = (p) => <Icon {...p}><path d="M4 20h4L19 9l-4-4L4 16v4Z" /><path d="M14 6l4 4" /></Icon>;
const IconTrophy = (p) => <Icon {...p}><path d="M7 4h10v4a5 5 0 0 1-10 0V4Z" /><path d="M17 5h3v2a3 3 0 0 1-3 3M7 5H4v2a3 3 0 0 0 3 3" /><path d="M10 14h4l-1 4h-2l-1-4Z" /><path d="M8 20h8" /></Icon>;

// Status bar icons
const StatusSignal = () => (
  <svg width="18" height="10" viewBox="0 0 18 10" fill="currentColor"><rect x="0" y="6" width="3" height="4" rx="0.8"/><rect x="5" y="4" width="3" height="6" rx="0.8"/><rect x="10" y="2" width="3" height="8" rx="0.8"/><rect x="15" y="0" width="3" height="10" rx="0.8"/></svg>
);
const StatusWifi = () => (
  <svg width="16" height="11" viewBox="0 0 16 11" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"><path d="M1.5 4a9.5 9.5 0 0 1 13 0M3.5 6.5a6 6 0 0 1 9 0M5.5 9a3 3 0 0 1 5 0"/><circle cx="8" cy="10" r="0.6" fill="currentColor"/></svg>
);
const StatusBattery = () => (
  <svg width="26" height="12" viewBox="0 0 26 12" fill="none"><rect x="0.5" y="0.5" width="22" height="11" rx="3" stroke="currentColor" opacity="0.4"/><rect x="2" y="2" width="17" height="8" rx="1.5" fill="currentColor"/><rect x="23" y="4" width="2" height="4" rx="0.8" fill="currentColor" opacity="0.4"/></svg>
);

Object.assign(window, {
  IconHome, IconCalendar, IconHeart, IconHeartFilled, IconUser, IconPlus,
  IconSearch, IconBell, IconMessage, IconSettings, IconBookmark, IconShare,
  IconMore, IconCheck, IconChevronLeft, IconChevronRight, IconChevronDown,
  IconClose, IconMapPin, IconClock, IconCamera, IconGrid, IconList, IconFilter,
  IconArrowRight, IconSparkle, IconQr, IconEdit, IconTrophy,
  StatusSignal, StatusWifi, StatusBattery,
});
