// components/icons.jsx
// Inline SVG icons. Stroke-based, 22px default, currentColor.

const IconApple = ({ size = 18 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
    {/* Custom apple silhouette. NOT the official Apple logo (per Section 3.5.5). */}
    <path d="M16.4 12.7c0-2.5 2-3.7 2.1-3.8-1.1-1.7-2.9-1.9-3.5-1.9-1.5-.2-2.9.9-3.7.9-.8 0-2-.9-3.2-.8-1.6 0-3.2.9-4 2.4-1.7 3-.4 7.4 1.2 9.8.8 1.2 1.8 2.5 3 2.5 1.2 0 1.7-.8 3.1-.8 1.4 0 1.9.8 3.1.8 1.3 0 2.1-1.2 2.9-2.4.9-1.4 1.3-2.7 1.3-2.8-.1 0-2.5-.9-2.5-3.8z" />
    <path d="M14.2 5.4c.6-.8 1.1-1.9 1-3-1 0-2.1.6-2.8 1.4-.6.7-1.2 1.8-1 2.9 1.1.1 2.2-.5 2.8-1.3z" />
  </svg>
);

const IconAndroid = ({ size = 18 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
    {/* Custom android robot silhouette. NOT the official Google Play badge. */}
    <path d="M6 10v7a1 1 0 001 1h1v3a1 1 0 102 0v-3h4v3a1 1 0 102 0v-3h1a1 1 0 001-1v-7H6z" />
    <circle cx="4.5" cy="11.5" r="1.5" />
    <circle cx="19.5" cy="11.5" r="1.5" />
    <path d="M16.3 5.8l1-1.7a.4.4 0 00-.7-.4l-1.1 1.8A6.5 6.5 0 0012 5c-1.3 0-2.5.3-3.5.8L7.4 4a.4.4 0 00-.7.4l1 1.7C5.9 6.9 5 8.3 5 10v.5h14V10c0-1.7-.9-3.1-2.7-4.2zM9 8.5a.7.7 0 110-1.5.7.7 0 010 1.5zm6 0a.7.7 0 110-1.5.7.7 0 010 1.5z" />
  </svg>
);

const IconInstagram = ({ size = 20 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <rect x="2" y="2" width="20" height="20" rx="5" ry="5" />
    <path d="M16 11.4a4 4 0 11-7.9 1.2 4 4 0 017.9-1.2z" />
    <line x1="17.5" y1="6.5" x2="17.5" y2="6.5" />
  </svg>
);

const IconTikTok = ({ size = 20 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
    <path d="M19.6 6.3a4.8 4.8 0 01-3-1.4 4.7 4.7 0 01-1.3-3h-3.5v12.4a2.7 2.7 0 11-2.7-2.7c.3 0 .5 0 .8.1V8.1a6.2 6.2 0 00-.8 0 6.2 6.2 0 106.2 6.2V9.5a8 8 0 004.3 1.3V7.3a4.6 4.6 0 01-.5 0z" />
  </svg>
);

const IconClose = ({ size = 18 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" />
  </svg>
);

const IconChevron = ({ open, size = 16 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" style={{ transform: open ? "rotate(180deg)" : "none", transition: "transform 200ms ease" }}>
    <polyline points="6 9 12 15 18 9" />
  </svg>
);

const IconLink = ({ size = 18 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <path d="M10 13a5 5 0 007.5.5l3-3a5 5 0 00-7-7l-1.5 1.4" />
    <path d="M14 11a5 5 0 00-7.5-.5l-3 3a5 5 0 007 7l1.5-1.4" />
  </svg>
);

const IconMessage = ({ size = 18 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <path d="M21 11.5a8.4 8.4 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.4 8.4 0 01-3.8-.9L3 21l1.9-5.7a8.4 8.4 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.4 8.4 0 013.8-.9h.5a8.5 8.5 0 018 8v.5z" />
  </svg>
);

const IconMenu = ({ size = 22 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <line x1="3" y1="6" x2="21" y2="6" /><line x1="3" y1="12" x2="21" y2="12" /><line x1="3" y1="18" x2="21" y2="18" />
  </svg>
);

Object.assign(window, {
  IconApple, IconAndroid, IconInstagram, IconTikTok,
  IconClose, IconChevron, IconLink, IconMessage, IconMenu,
});
