// Icon components — clean, minimal stroke icons matching Manrope's geometric feel.

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

const IconBag = (p) => <Icon {...p}><path d="M5 8h14l-1 12H6L5 8Z"/><path d="M9 8V6a3 3 0 0 1 6 0v2"/></Icon>;
const IconShoe = (p) => <Icon {...p}><path d="M3 16c0-1 .5-2 2-2h2l3-6 4 1 1 3 4 2c2 .8 3 1.6 3 3v2H3v-3Z"/><path d="M7 14l1 2M11 14l1 2M15 15l1 2"/></Icon>;
const IconShirt = (p) => <Icon {...p}><path d="M4 7l4-3 2 2h4l2-2 4 3-2 4-2-1v11H8V10L6 11 4 7Z"/></Icon>;
const IconCamera = (p) => <Icon {...p}><path d="M3 8a2 2 0 0 1 2-2h2l1.5-2h7L17 6h2a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8Z"/><circle cx="12" cy="13" r="3.5"/></Icon>;
const IconCheck = (p) => <Icon {...p}><path d="M5 12l4 4 10-10"/></Icon>;
const IconArrow = (p) => <Icon {...p}><path d="M5 12h14M13 6l6 6-6 6"/></Icon>;
const IconArrowL = (p) => <Icon {...p}><path d="M19 12H5M11 6l-6 6 6 6"/></Icon>;
const IconPlus = (p) => <Icon {...p}><path d="M12 5v14M5 12h14"/></Icon>;
const IconLink = (p) => <Icon {...p}><path d="M10 14a4 4 0 0 0 5.6 0l3-3a4 4 0 0 0-5.6-5.6l-1.5 1.5"/><path d="M14 10a4 4 0 0 0-5.6 0l-3 3a4 4 0 0 0 5.6 5.6l1.5-1.5"/></Icon>;
const IconWA = (p) => <Icon {...p}><path d="M4 20l1.5-4.5A8 8 0 1 1 8.5 18.5L4 20Z"/><path d="M9 10c0 4 2 5 4 6 .5.2 1.2 0 1.5-.5l.5-1c.2-.4 0-.8-.4-1l-1-.5c-.4-.2-.8 0-1 .3-.3-.2-1.4-1-1.6-2 .3-.2.5-.6.3-1l-.5-1c-.2-.4-.6-.6-1-.4l-1 .5c-.5.3-.7 1-.5 1.5z" fill="currentColor" stroke="none"/></Icon>;
const IconMail = (p) => <Icon {...p}><rect x="3" y="6" width="18" height="13" rx="2"/><path d="M3 8l9 6 9-6"/></Icon>;
const IconSMS = (p) => <Icon {...p}><path d="M4 5h16a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1h-9l-5 4v-4H4a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1Z"/></Icon>;
const IconCard = (p) => <Icon {...p}><rect x="3" y="6" width="18" height="13" rx="2"/><path d="M3 10h18"/></Icon>;
const IconBank = (p) => <Icon {...p}><path d="M3 10l9-5 9 5"/><path d="M5 10v8M9 10v8M15 10v8M19 10v8"/><path d="M3 20h18"/></Icon>;
const IconClock = (p) => <Icon {...p}><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></Icon>;
const IconSparkle = (p) => <Icon {...p}><path d="M12 4v4M12 16v4M4 12h4M16 12h4M6.3 6.3l2.8 2.8M14.9 14.9l2.8 2.8M6.3 17.7l2.8-2.8M14.9 9.1l2.8-2.8"/></Icon>;
const IconStore = (p) => <Icon {...p}><path d="M3 9l1.5-4h15L21 9"/><path d="M3 9v11h18V9"/><path d="M3 9a3 3 0 0 0 6 0 3 3 0 0 0 6 0 3 3 0 0 0 6 0"/><path d="M9 20v-6h6v6"/></Icon>;
const IconTruck = (p) => <Icon {...p}><path d="M3 7h11v9H3z"/><path d="M14 10h4l3 3v3h-7"/><circle cx="7" cy="18" r="2"/><circle cx="17" cy="18" r="2"/></Icon>;
const IconShare = (p) => <Icon {...p}><circle cx="6" cy="12" r="2.5"/><circle cx="18" cy="6" r="2.5"/><circle cx="18" cy="18" r="2.5"/><path d="M8 11l8-4M8 13l8 4"/></Icon>;
const IconCopy = (p) => <Icon {...p}><rect x="9" y="9" width="11" height="11" rx="2"/><path d="M15 9V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h3"/></Icon>;
const IconChev = (p) => <Icon {...p}><path d="M9 6l6 6-6 6"/></Icon>;
const IconTag = (p) => <Icon {...p}><path d="M3 12V4h8l9 9-8 8-9-9Z"/><circle cx="7.5" cy="7.5" r="1.2" fill="currentColor"/></Icon>;
const IconSplit = (p) => <Icon {...p}><rect x="3" y="6" width="5" height="12" rx="1.2"/><rect x="9.5" y="6" width="5" height="12" rx="1.2"/><rect x="16" y="6" width="5" height="12" rx="1.2"/></Icon>;
const IconLock = (p) => <Icon {...p}><rect x="5" y="11" width="14" height="9" rx="2"/><path d="M8 11V8a4 4 0 0 1 8 0v3"/></Icon>;

// Tiny "MiPaghi" mark — three overlapping circles + wordmark
const MiPaghiMark = ({ size = 28 }) => (
  <svg width={size} height={size} viewBox="0 0 60 60" fill="none">
    <circle cx="20" cy="22" r="14" fill="#9FC5E8" opacity="0.7"/>
    <circle cx="28" cy="22" r="14" fill="#5A9AC8" opacity="0.6"/>
    <circle cx="38" cy="22" r="14" fill="#1E78C8"/>
  </svg>
);

const MiPaghiLockup = ({ color = '#fff', sub = '#fff' }) => (
  <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
    <MiPaghiMark size={22}/>
    <div style={{ display: 'flex', flexDirection: 'column', lineHeight: 1 }}>
      <span style={{ fontWeight: 800, fontSize: 14, color, letterSpacing: '-0.02em' }}>MiPaghi</span>
    </div>
  </div>
);

Object.assign(window, {
  Icon, IconBag, IconShoe, IconShirt, IconCamera, IconCheck, IconArrow, IconArrowL,
  IconPlus, IconLink, IconWA, IconMail, IconSMS, IconCard, IconBank, IconClock,
  IconSparkle, IconStore, IconTruck, IconShare, IconCopy, IconChev, IconTag, IconSplit, IconLock,
  MiPaghiMark, MiPaghiLockup,
});
