// Icons built with stroke style to echo the hand-drawn botanical feel of the brand.
const strokeProps = { fill: "none", stroke: "currentColor", strokeWidth: 1.4, strokeLinecap: "round", strokeLinejoin: "round" };

const IconLeaf = (p) => (
  <svg viewBox="0 0 48 48" width={p.size||44} height={p.size||44} {...strokeProps}>
    <path d="M8 40c0-14 10-28 32-32-2 22-14 32-28 32-2 0-4-0-4 0z"/>
    <path d="M8 40C16 32 24 24 36 12"/>
    <path d="M22 26c2-2 5-3 9-3"/>
    <path d="M16 32c1-2 3-4 6-5"/>
  </svg>
);

const IconHands = (p) => (
  <svg viewBox="0 0 48 48" width={p.size||44} height={p.size||44} {...strokeProps}>
    <path d="M8 28c0-4 2-7 4-8 2-1 4 0 4 2v8"/>
    <path d="M40 28c0-4-2-7-4-8-2-1-4 0-4 2v8"/>
    <path d="M16 30v8c0 2 2 4 4 4h8c2 0 4-2 4-4v-8"/>
    <path d="M20 24c0-2 2-4 4-4s4 2 4 4"/>
    <path d="M24 14c-1.5-2-1.5-5 0-7 1.5 2 1.5 5 0 7z" />
    <path d="M19 16c-2-1-3-3-3-5 2 0 4 2 4 4"/>
    <path d="M29 16c2-1 3-3 3-5-2 0-4 2-4 4"/>
  </svg>
);

const IconCircle = (p) => (
  <svg viewBox="0 0 48 48" width={p.size||44} height={p.size||44} {...strokeProps}>
    <circle cx="24" cy="24" r="14"/>
    <circle cx="24" cy="24" r="8"/>
    <path d="M24 10v4M24 34v4M10 24h4M34 24h4"/>
    <path d="M14 14l3 3M34 34l-3-3M14 34l3-3M34 14l-3 3"/>
  </svg>
);

const IconSprout = (p) => (
  <svg viewBox="0 0 48 48" width={p.size||44} height={p.size||44} {...strokeProps}>
    <path d="M24 40V22"/>
    <path d="M24 22c0-6-4-10-10-10 0 6 4 10 10 10z"/>
    <path d="M24 22c0-6 4-10 10-10 0 6-4 10-10 10z"/>
    <path d="M14 40h20"/>
    <path d="M18 40c0-2 2-4 6-4s6 2 6 4"/>
  </svg>
);

const IconHeart = (p) => (
  <svg viewBox="0 0 48 48" width={p.size||44} height={p.size||44} {...strokeProps}>
    <path d="M24 38c-8-6-14-12-14-19a7 7 0 0 1 14-2 7 7 0 0 1 14 2c0 7-6 13-14 19z"/>
    <path d="M18 22c1 0 3 1 3 3M30 22c-1 0-3 1-3 3"/>
  </svg>
);

const IconBuilding = (p) => (
  <svg viewBox="0 0 48 48" width={p.size||44} height={p.size||44} {...strokeProps}>
    <path d="M10 40V14l10-6 10 6v26"/>
    <path d="M30 40V20h8v20"/>
    <path d="M10 40h32"/>
    <path d="M16 20h8M16 26h8M16 32h8"/>
    <path d="M34 26h2M34 32h2"/>
  </svg>
);

const IconUser = (p) => (
  <svg viewBox="0 0 48 48" width={p.size||44} height={p.size||44} {...strokeProps}>
    <circle cx="24" cy="18" r="7"/>
    <path d="M10 40c0-7 6-12 14-12s14 5 14 12"/>
    <path d="M20 20c0-1 2-2 4-2s4 1 4 2"/>
  </svg>
);

const IconBook = (p) => (
  <svg viewBox="0 0 48 48" width={p.size||44} height={p.size||44} {...strokeProps}>
    <path d="M8 10c6 0 12 2 16 4 4-2 10-4 16-4v28c-6 0-12 2-16 4-4-2-10-4-16-4V10z"/>
    <path d="M24 14v28"/>
  </svg>
);

const IconChat = (p) => (
  <svg viewBox="0 0 48 48" width={p.size||44} height={p.size||44} {...strokeProps}>
    <path d="M10 12h28a2 2 0 0 1 2 2v18a2 2 0 0 1-2 2H20l-8 6v-6h-2a2 2 0 0 1-2-2V14a2 2 0 0 1 2-2z"/>
    <path d="M18 22h12M18 27h8"/>
  </svg>
);

const IconArrow = (p) => (
  <svg viewBox="0 0 24 24" width={p.size||16} height={p.size||16} {...strokeProps} strokeWidth={1.6}>
    <path d="M5 12h14M13 6l6 6-6 6"/>
  </svg>
);

const IconChevron = (p) => (
  <svg viewBox="0 0 24 24" width={p.size||14} height={p.size||14} {...strokeProps} strokeWidth={1.8}>
    <path d="M6 9l6 6 6-6"/>
  </svg>
);

const IconPlus = (p) => (
  <svg viewBox="0 0 24 24" width={p.size||18} height={p.size||18} {...strokeProps} strokeWidth={1.6}>
    <path d="M12 5v14M5 12h14"/>
  </svg>
);

const IconMinus = (p) => (
  <svg viewBox="0 0 24 24" width={p.size||18} height={p.size||18} {...strokeProps} strokeWidth={1.6}>
    <path d="M5 12h14"/>
  </svg>
);

const IconIG = (p) => (
  <svg viewBox="0 0 24 24" width={p.size||18} height={p.size||18} {...strokeProps}>
    <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=".6" fill="currentColor" stroke="none"/>
  </svg>
);

const IconLI = (p) => (
  <svg viewBox="0 0 24 24" width={p.size||18} height={p.size||18} {...strokeProps}>
    <rect x="3" y="3" width="18" height="18" rx="3"/>
    <path d="M8 10v7M8 7.5v.01M12 17v-4.5a2.5 2.5 0 0 1 5 0V17M12 17v-7"/>
  </svg>
);

const IconYT = (p) => (
  <svg viewBox="0 0 24 24" width={p.size||18} height={p.size||18} {...strokeProps}>
    <rect x="2" y="6" width="20" height="12" rx="3"/>
    <path d="M10 9.5v5l5-2.5-5-2.5z" fill="currentColor" stroke="none"/>
  </svg>
);

const IconWA = (p) => (
  <svg viewBox="0 0 24 24" width={p.size||22} height={p.size||22} fill="currentColor">
    <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51l-.57-.01c-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.304-1.654a11.88 11.88 0 0 0 5.684 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.82 11.82 0 0 0-3.48-8.414z"/>
  </svg>
);

const IconQuote = (p) => (
  <svg viewBox="0 0 48 48" width={p.size||40} height={p.size||40} fill="currentColor">
    <path d="M14 14c-4 0-8 4-8 10 0 5 3 8 7 8 1 0 2-.2 3-.6-.5 3.4-3 6-7 7.6.4 1.2.8 2 1.2 3 6-2 11-7 11-16 0-7-3-12-7-12zm20 0c-4 0-8 4-8 10 0 5 3 8 7 8 1 0 2-.2 3-.6-.5 3.4-3 6-7 7.6.4 1.2.8 2 1.2 3 6-2 11-7 11-16 0-7-3-12-7-12z" opacity=".4"/>
  </svg>
);

const IconStar = (p) => (
  <svg viewBox="0 0 24 24" width={p.size||16} height={p.size||16} fill="currentColor">
    <path d="M12 2l3 6.5 7 .9-5 4.7 1.4 7L12 17.7 5.6 21l1.4-7-5-4.7 7-.9z"/>
  </svg>
);

const IconArrowLeft = (p) => (
  <svg viewBox="0 0 24 24" width={p.size||18} height={p.size||18} {...strokeProps} strokeWidth={1.6}>
    <path d="M19 12H5M11 18l-6-6 6-6"/>
  </svg>
);

const IconArrowRight = (p) => (
  <svg viewBox="0 0 24 24" width={p.size||18} height={p.size||18} {...strokeProps} strokeWidth={1.6}>
    <path d="M5 12h14M13 6l6 6-6 6"/>
  </svg>
);

Object.assign(window, {
  IconLeaf, IconHands, IconCircle, IconSprout, IconHeart, IconBuilding,
  IconUser, IconBook, IconChat, IconArrow, IconChevron, IconPlus, IconMinus,
  IconIG, IconLI, IconYT, IconWA, IconQuote, IconStar, IconArrowLeft, IconArrowRight
});
