// ui_kits/website/Icons.jsx
// Centralized inline SVG icon set. Stroke-based, 1.6–1.8px weight,
// 24×24 viewBox — matches the wellness/editorial aesthetic.

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

const SearchIcon = (p) => <Icon {...p}><circle cx="11" cy="11" r="7"/><path d="M20 20l-3.5-3.5"/></Icon>;
const MenuIcon = (p) => <Icon {...p}><path d="M4 7h16M4 12h16M4 17h16"/></Icon>;
const ChevronRight = (p) => <Icon {...p}><path d="M9 6l6 6-6 6"/></Icon>;
const ChevronDown = (p) => <Icon {...p}><path d="M6 9l6 6 6-6"/></Icon>;
const PlayIcon = (p) => <Icon {...p} fill="currentColor" sw={0}><path d="M8 5v14l11-7z"/></Icon>;
const PauseIcon = (p) => <Icon {...p} fill="currentColor" sw={0}><path d="M7 5h4v14H7zM13 5h4v14h-4z"/></Icon>;
const HeartIcon = (p) => <Icon {...p}><path d="M12 20s-7-4.3-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.7-7 10-7 10z"/></Icon>;
const BookmarkIcon = (p) => <Icon {...p}><path d="M6 4h12v17l-6-4-6 4z"/></Icon>;
const MailIcon = (p) => <Icon {...p}><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 7 9-7"/></Icon>;
const ClockIcon = (p) => <Icon {...p}><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></Icon>;
const ArrowRight = (p) => <Icon {...p}><path d="M5 12h14M13 6l6 6-6 6"/></Icon>;
const ShoppingBag = (p) => <Icon {...p}><path d="M5 7h14l-1.2 12.2a2 2 0 0 1-2 1.8H8.2a2 2 0 0 1-2-1.8L5 7z"/><path d="M9 7V5a3 3 0 0 1 6 0v2"/></Icon>;
const Globe = (p) => <Icon {...p}><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18"/></Icon>;
const Headphones = (p) => <Icon {...p}><path d="M4 13a8 8 0 0 1 16 0"/><rect x="3" y="13" width="4" height="7" rx="2"/><rect x="17" y="13" width="4" height="7" rx="2"/></Icon>;
const Star = (p) => <Icon {...p} fill="currentColor" sw={0}><path d="M12 3l2.6 5.5L20 9.3l-4.2 4.1 1 5.8L12 16.4 7.2 19.2l1-5.8L4 9.3l5.4-.8z"/></Icon>;

// The two-leaf brand mark from the logo. Outlined leaves with the
// signature inner-vein curl. Pass `mode="outline"` (default) for the
// logo-style line drawing, or `mode="solid"` for filled silhouettes.
const LeafMark = ({ size = 200, color = 'currentColor', mode = 'outline', strokeWidth = 3, style }) => {
  const isOutline = mode === 'outline';
  const common = isOutline
    ? { fill: 'none', stroke: color, strokeWidth, strokeLinecap: 'round', strokeLinejoin: 'round' }
    : { fill: color, stroke: 'none' };
  return (
    <svg
      width={size} height={size} viewBox="0 0 100 100"
      style={style} aria-hidden="true"
    >
      {/* Tall leaf (left) — flame shape with a curl-shaped inner vein */}
      <path
        {...common}
        d="M 44 92
           C 26 78 22 50 30 26
           C 35 12 42 8 46 14
           C 52 24 56 52 50 76
           C 47 86 45 91 44 92 Z"
      />
      {isOutline && (
        <path
          fill="none" stroke={color} strokeWidth={strokeWidth * 0.75}
          strokeLinecap="round" strokeLinejoin="round"
          d="M 41 78 C 41 66 40 50 42 36"
        />
      )}

      {/* Short leaf (right) — curls outward to the right */}
      <path
        {...common}
        d="M 56 92
           C 52 80 58 62 70 48
           C 78 38 84 38 84 44
           C 84 58 78 76 70 86
           C 64 91 58 92 56 92 Z"
      />
      {isOutline && (
        <path
          fill="none" stroke={color} strokeWidth={strokeWidth * 0.75}
          strokeLinecap="round" strokeLinejoin="round"
          d="M 60 84 C 64 76 70 64 76 54"
        />
      )}
    </svg>
  );
};

// Social glyphs (filled / hybrid)
const InstagramIcon = (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.9" fill="currentColor" stroke="none"/>
  </Icon>
);
const YouTubeIcon = (p) => (
  <Icon {...p}>
    <rect x="2" y="5" width="20" height="14" rx="3"/>
    <path d="M10 9l5 3-5 3z" fill="currentColor" stroke="none"/>
  </Icon>
);
const FacebookIcon = (p) => (
  <svg width={p.size||20} height={p.size||20} viewBox="0 0 24 24" fill="currentColor" style={p.style}>
    <path d="M13 22v-8h3l1-4h-4V7.5c0-1.2.4-2 2-2h2V2.2c-.3 0-1.5-.2-2.8-.2-2.8 0-4.7 1.7-4.7 4.8V10H7v4h2.5v8H13z"/>
  </svg>
);
const TikTokIcon = (p) => (
  <svg width={p.size||20} height={p.size||20} viewBox="0 0 24 24" fill="currentColor" style={p.style}>
    <path d="M16 3c.4 2 1.7 3.7 4 4v3c-1.6 0-3-.4-4-1.1V15a6 6 0 1 1-6-6v3a3 3 0 1 0 3 3V3h3z"/>
  </svg>
);

Object.assign(window, {
  Icon,
  SearchIcon, MenuIcon, ChevronRight, ChevronDown,
  PlayIcon, PauseIcon, HeartIcon, BookmarkIcon, MailIcon, ClockIcon,
  ArrowRight, ShoppingBag, Globe, Headphones, Star, LeafMark,
  InstagramIcon, YouTubeIcon, FacebookIcon, TikTokIcon,
});