// Simple icon set — stroke-based, consistent
const Icon = ({ children, size = 20, stroke = 1.5, style = {}, ...rest }) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width={size}
    height={size}
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth={stroke}
    strokeLinecap="round"
    strokeLinejoin="round"
    style={style}
    {...rest}
  >
    {children}
  </svg>
);

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 IconCheck = (p) => <Icon {...p}><path d="M5 12l5 5L20 7" /></Icon>;
const IconChevronDown = (p) => <Icon {...p}><path d="M6 9l6 6 6-6" /></Icon>;
const IconChevronLeft = (p) => <Icon {...p}><path d="M15 18l-6-6 6-6" /></Icon>;
const IconChevronRight = (p) => <Icon {...p}><path d="M9 18l6-6-6-6" /></Icon>;
const IconClose = (p) => <Icon {...p}><path d="M18 6L6 18M6 6l12 12" /></Icon>;
const IconMenu = (p) => <Icon {...p}><path d="M3 6h18M3 12h18M3 18h18" /></Icon>;
const IconSparkles = (p) => (
  <Icon {...p}>
    <path d="M12 3l1.8 4.8L18 9.6l-4.2 1.8L12 16l-1.8-4.6L6 9.6l4.2-1.8z" />
    <path d="M19 15l.9 2.4L22 18l-2.1.6L19 21l-.9-2.4L16 18l2.1-.6z" />
  </Icon>
);
const IconLeaf = (p) => (
  <Icon {...p}>
    <path d="M6 20c0-8 6-14 14-14 0 8-6 14-14 14z" />
    <path d="M6 20c3-3 6-5 10-8" />
  </Icon>
);
const IconHeart = (p) => <Icon {...p}><path d="M12 20s-7-4.5-7-10a4 4 0 017-2.6A4 4 0 0119 10c0 5.5-7 10-7 10z" /></Icon>;
const IconApple = (p) => (
  <Icon {...p}>
    <path d="M12 7c-3 0-6 2-6 6s3 8 6 8 6-3 6-8-3-6-6-6z" />
    <path d="M12 7c0-2 1-4 3-4" />
    <path d="M12 7c-.5-1.5-1.5-2.5-3-3" />
  </Icon>
);
const IconSend = (p) => <Icon {...p}><path d="M22 2L11 13M22 2l-7 20-4-9-9-4z" /></Icon>;
const IconMessageCircle = (p) => <Icon {...p}><path d="M21 12a9 9 0 11-3.5-7.1L21 4l-1.1 3.5A9 9 0 0121 12z" /></Icon>;
const IconInstagram = (p) => (
  <Icon {...p}>
    <rect x="3" y="3" width="18" height="18" rx="5" />
    <circle cx="12" cy="12" r="4" />
    <circle cx="17.5" cy="6.5" r="0.6" fill="currentColor" />
  </Icon>
);
const IconMapPin = (p) => (
  <Icon {...p}>
    <path d="M12 22s-7-7-7-12a7 7 0 0114 0c0 5-7 12-7 12z" />
    <circle cx="12" cy="10" r="2.5" />
  </Icon>
);
const IconClock = (p) => <Icon {...p}><circle cx="12" cy="12" r="9" /><path d="M12 7v5l3 2" /></Icon>;
const IconVideo = (p) => (
  <Icon {...p}>
    <rect x="3" y="6" width="13" height="12" rx="2" />
    <path d="M16 10l5-2v8l-5-2z" />
  </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.5" fill="currentColor" /></Icon>;
const IconUsers = (p) => (
  <Icon {...p}>
    <path d="M16 21v-2a4 4 0 00-4-4H7a4 4 0 00-4 4v2" />
    <circle cx="9.5" cy="7" r="3.5" />
    <path d="M21 21v-2a4 4 0 00-3-3.9" />
    <circle cx="17" cy="7" r="3" />
  </Icon>
);

// WhatsApp filled logo
const IconWhatsApp = ({ size = 22, color = "currentColor", ...rest }) => (
  <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill={color} {...rest}>
    <path d="M17.5 14.4c-.3-.15-1.77-.87-2.04-.97-.27-.1-.47-.15-.67.15-.2.3-.77.97-.94 1.17-.17.2-.35.22-.65.07-.3-.15-1.25-.46-2.38-1.47-.88-.78-1.47-1.74-1.65-2.04-.17-.3-.02-.46.13-.6.13-.13.3-.35.45-.52.15-.17.2-.3.3-.5.1-.2.05-.37-.02-.52-.07-.15-.67-1.62-.92-2.21-.24-.58-.48-.5-.67-.51-.17-.01-.37-.01-.57-.01-.2 0-.52.07-.8.37-.27.3-1.04 1.02-1.04 2.49 0 1.47 1.07 2.89 1.22 3.09.15.2 2.1 3.21 5.09 4.5.71.31 1.27.49 1.7.63.71.23 1.36.2 1.87.12.57-.08 1.77-.72 2.02-1.42.25-.7.25-1.29.17-1.42-.07-.12-.27-.2-.57-.35zM12.04 2C6.54 2 2.08 6.46 2.08 11.96c0 1.76.46 3.48 1.34 5L2 22l5.2-1.37c1.46.8 3.11 1.22 4.83 1.22 5.5 0 9.96-4.46 9.96-9.96S17.54 2 12.04 2zm0 18.03c-1.54 0-3.05-.42-4.37-1.2l-.31-.19-3.24.85.87-3.16-.2-.32a8.04 8.04 0 01-1.24-4.31c0-4.45 3.62-8.07 8.08-8.07s8.08 3.62 8.08 8.07c0 4.46-3.63 8.07-8.08 8.07z"/>
  </svg>
);

const IconBody = ({ size = 20, color = "currentColor", ...rest }) => (
  <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...rest}>
    <path d="M4 16c0-2.5 1.5-4.5 4-5l1-3c.5-1.5 2-2.5 3.5-2.5S15.5 6.5 16 8l1 3c2.5.5 4 2.5 4 5" />
    <path d="M9 11c1 .5 2.5.8 4 .5" />
    <path d="M12 6V4" />
  </svg>
);

const IconYouTube = ({ size = 20, color = "currentColor", ...rest }) => (
  <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill={color} {...rest}>
    <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/>
  </svg>
);

const IconTikTok = ({ size = 20, color = "currentColor", ...rest }) => (
  <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill={color} {...rest}>
    <path d="M19.59 6.69a4.83 4.83 0 01-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 01-2.88 2.5 2.89 2.89 0 01-2.89-2.89 2.89 2.89 0 012.89-2.89c.28 0 .54.04.79.1V9.01a6.33 6.33 0 00-.79-.05 6.34 6.34 0 00-6.34 6.34 6.34 6.34 0 006.34 6.34 6.34 6.34 0 006.33-6.34V8.69a8.18 8.18 0 004.78 1.52V6.76a4.85 4.85 0 01-1.01-.07z"/>
  </svg>
);

Object.assign(window, {
  Icon, IconArrowRight, IconArrowUpRight, IconCheck, IconChevronDown, IconChevronLeft, IconChevronRight, IconClose, IconMenu,
  IconSparkles, IconLeaf, IconHeart, IconApple, IconSend, IconMessageCircle, IconInstagram,
  IconMapPin, IconClock, IconVideo, IconTarget, IconUsers, IconWhatsApp, IconTikTok, IconYouTube, IconBody
});