// Icons used across the site. Inline SVG, currentColor.

const IconMenu = ({ size = 18 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round">
    <path d="M4 7h16" /><path d="M4 12h16" /><path d="M4 17h10" />
  </svg>
);

const IconWA = ({ size = 16 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
    <path d="M19.11 4.91A10 10 0 0 0 4.6 18.32L3 22l3.78-1.55a10 10 0 0 0 14.81-8.7 10 10 0 0 0-2.48-6.84zM12 20.13a8.1 8.1 0 0 1-4.13-1.13l-.3-.18-2.24.92.93-2.18-.2-.32A8.13 8.13 0 1 1 12 20.13zm4.46-6.08c-.24-.12-1.45-.72-1.68-.8s-.39-.12-.55.12-.63.8-.78.97-.29.18-.54.06a6.66 6.66 0 0 1-1.97-1.22 7.43 7.43 0 0 1-1.37-1.7c-.14-.24 0-.37.11-.48s.24-.28.36-.42a1.7 1.7 0 0 0 .24-.4.45.45 0 0 0 0-.42c-.06-.12-.55-1.33-.75-1.82s-.4-.4-.55-.42h-.46a.9.9 0 0 0-.66.3 2.74 2.74 0 0 0-.86 2.05 4.78 4.78 0 0 0 1 2.5 10.93 10.93 0 0 0 4.16 3.66 13.65 13.65 0 0 0 1.39.52 3.33 3.33 0 0 0 1.53.1 2.5 2.5 0 0 0 1.64-1.16 2 2 0 0 0 .14-1.16c-.06-.1-.22-.16-.46-.28z"/>
  </svg>
);

const IconArrow = ({ size = 14 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <path d="M5 12h14" /><path d="M13 6l6 6-6 6" />
  </svg>
);

const IconStar = ({ size = 14, filled = true }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill={filled ? "currentColor" : "none"} stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round">
    <path d="M12 2.5l2.8 6.3 6.7.6-5.1 4.6 1.5 6.7L12 17l-5.9 3.7 1.5-6.7L2.5 9.4l6.7-.6L12 2.5z" />
  </svg>
);

const IconPlus = ({ size = 14 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
    <path d="M12 5v14" /><path d="M5 12h14" />
  </svg>
);

const IconPause = ({ size = 16 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor"><rect x="6" y="5" width="4" height="14" rx="1.2"/><rect x="14" y="5" width="4" height="14" rx="1.2"/></svg>
);

const IconBook = ({ size = 18 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round" strokeLinecap="round">
    <path d="M4 5.5A2.5 2.5 0 0 1 6.5 3H20v15H6.5A2.5 2.5 0 0 0 4 20.5z" />
    <path d="M4 5.5V20.5A2.5 2.5 0 0 0 6.5 23H20" />
  </svg>
);

const IconSparkle = ({ size = 18 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor">
    <path d="M12 2l1.6 5.4L19 9l-5.4 1.6L12 16l-1.6-5.4L5 9l5.4-1.6z"/>
    <path d="M19 14l.7 2.3L22 17l-2.3.7L19 20l-.7-2.3L16 17l2.3-.7z" opacity=".7"/>
  </svg>
);

const IconLogoMark = ({ size = 22 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" aria-hidden="true">
    <path d="M4 18.5V6.5A2.5 2.5 0 0 1 6.5 4H18a2 2 0 0 1 2 2v12.5A1.5 1.5 0 0 1 18.5 20H6.5A2.5 2.5 0 0 1 4 17.5z" fill="currentColor" opacity=".15" />
    <path d="M4 18.5V6.5A2.5 2.5 0 0 1 6.5 4H18a2 2 0 0 1 2 2v12.5" stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round"/>
    <path d="M4 18.5A2.5 2.5 0 0 1 6.5 16H20" stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round" strokeLinecap="round"/>
    <path d="M9 8h6" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />
  </svg>
);

const IconUser = ({ size = 20 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <circle cx="12" cy="8" r="3.5" />
    <path d="M5 20c0-3.6 3.1-6 7-6s7 2.4 7 6" />
  </svg>
);

Object.assign(window, { IconMenu, IconWA, IconArrow, IconStar, IconPlus, IconPause, IconBook, IconSparkle, IconLogoMark, IconUser });
