// Mirais Icon Set — original line-art SVGs
// Stroke-based, 24x24 viewBox, currentColor

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

const IconSparkle = (props) => (
  <Icon {...props}>
    <path d="M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M5.6 18.4l2.1-2.1M16.3 7.7l2.1-2.1" />
    <circle cx="12" cy="12" r="2.5" fill="currentColor" stroke="none" />
  </Icon>
);

const IconLayout = (props) => (
  <Icon {...props}>
    <rect x="3" y="3" width="18" height="18" rx="2.5" />
    <path d="M3 8.5h18M8.5 8.5V21" />
  </Icon>
);

const IconChat = (props) => (
  <Icon {...props}>
    <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" />
  </Icon>
);

const IconCheck = (props) => (
  <Icon {...props}>
    <path d="M5 12.5l4.5 4.5L19 7" />
  </Icon>
);

const IconCheckCircle = (props) => (
  <Icon {...props}>
    <circle cx="12" cy="12" r="10" />
    <path d="M8 12.5l2.5 2.5L16 9.5" />
  </Icon>
);

const IconArrow = (props) => (
  <Icon {...props}>
    <path d="M5 12h14M13 6l6 6-6 6" />
  </Icon>
);

const IconHeart = (props) => (
  <Icon {...props}>
    <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78L12 21.23l8.84-8.84a5.5 5.5 0 0 0 0-7.78z" />
  </Icon>
);

const IconShield = (props) => (
  <Icon {...props}>
    <path d="M12 2l8 4v6c0 5-3.5 9.4-8 10-4.5-.6-8-5-8-10V6l8-4z" />
    <path d="M9 12l2 2 4-4" />
  </Icon>
);

const IconStar = ({ filled = true, ...props }) => (
  <Icon {...props} fill={filled ? "currentColor" : "none"}>
    <polygon points="12 2 15.1 8.6 22 9.6 17 14.5 18.2 21.5 12 18.2 5.8 21.5 7 14.5 2 9.6 8.9 8.6" />
  </Icon>
);

const IconPlus = (props) => (
  <Icon {...props}>
    <path d="M12 5v14M5 12h14" />
  </Icon>
);

const IconClose = (props) => (
  <Icon {...props}>
    <path d="M6 6l12 12M18 6L6 18" />
  </Icon>
);

const IconMenu = (props) => (
  <Icon {...props}>
    <path d="M4 7h16M4 12h16M4 17h16" />
  </Icon>
);

const IconPlay = (props) => (
  <Icon {...props}>
    <polygon points="6 4 20 12 6 20" fill="currentColor" stroke="none" />
  </Icon>
);

const IconWand = (props) => (
  <Icon {...props}>
    <path d="M15 4l1 2 2 1-2 1-1 2-1-2-2-1 2-1z" />
    <path d="M3 21l9-9" />
    <path d="M19 13l1 1.5 1.5 1-1.5 1-1 1.5-1-1.5-1.5-1 1.5-1z" />
  </Icon>
);

const IconLine = (props) => (
  <Icon {...props}>
    <path d="M21 11c0-4.4-4-8-9-8s-9 3.6-9 8c0 3.9 3.2 7.2 7.5 7.9.3.1.7.2.8.5.1.3.1.7 0 1l-.1.7c0 .4.3.8.7.6.5-.2 5-3 6.8-5C20.2 14.7 21 13 21 11z" />
  </Icon>
);

const IconInstagram = (props) => (
  <Icon {...props}>
    <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 IconX = (props) => (
  <Icon {...props}>
    <path d="M4 4l16 16M20 4L4 20" stroke={undefined} />
    <path d="M5 4h3l11 16h-3zM5 20l6.5-7M12.5 11L19 4" />
  </Icon>
);

const IconFacebook = (props) => (
  <Icon {...props}>
    <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" />
  </Icon>
);

Object.assign(window, {
  IconSparkle, IconLayout, IconChat, IconCheck, IconCheckCircle,
  IconArrow, IconHeart, IconShield, IconStar, IconPlus, IconClose,
  IconMenu, IconPlay, IconWand, IconLine, IconInstagram, IconX, IconFacebook,
});