// Icon set — minimal stroke icons, no fills, follows currentColor.
// Drawn at 32x32 viewBox.

const Icon = ({ children, size = 32, stroke = 1.4 }) => (
  <svg width={size} height={size} viewBox="0 0 32 32" fill="none"
    stroke="currentColor" strokeWidth={stroke}
    strokeLinecap="round" strokeLinejoin="round"
    style={{ display: 'block' }}>
    {children}
  </svg>
);

// 01 — Tech / molecule
const IconTech = (p) => (
  <Icon {...p}>
    <circle cx="6" cy="9" r="2" />
    <circle cx="26" cy="9" r="2" />
    <circle cx="6" cy="23" r="2" />
    <circle cx="26" cy="23" r="2" />
    <circle cx="16" cy="16" r="3" />
    <path d="M8 9h7M17 9h7M8 23h7M17 23h7M16 13V10M16 22v-3M14 14L8 10M18 14l6-4M14 18l-6 4M18 18l6 4" />
  </Icon>
);

// 02 — Food / vessel
const IconFood = (p) => (
  <Icon {...p}>
    <path d="M9 6h14l-1 4H10z" />
    <path d="M11 10c0 6-2 8-2 12 0 2 2 4 7 4s7-2 7-4c0-4-2-6-2-12" />
    <path d="M13 16h6M13 20h6" />
  </Icon>
);

// 03 — Sustain / leaf-circle
const IconLeaf = (p) => (
  <Icon {...p}>
    <circle cx="16" cy="16" r="11" />
    <path d="M11 21c4 0 10-3 11-11-8 1-11 7-11 11z" />
    <path d="M11 21l5-5" />
  </Icon>
);

// 04 — Social / people
const IconPeople = (p) => (
  <Icon {...p}>
    <circle cx="12" cy="11" r="3" />
    <circle cx="22" cy="13" r="2.5" />
    <path d="M6 24c0-3.5 3-6 6-6s6 2.5 6 6" />
    <path d="M18 24c0-2.5 2-4.5 4-4.5s4 2 4 4.5" />
  </Icon>
);

// Arrow
const IconArrow = ({ size = 14, stroke = 1.6 }) => (
  <svg width={size} height={size} viewBox="0 0 14 14" fill="none"
    stroke="currentColor" strokeWidth={stroke}
    strokeLinecap="round" strokeLinejoin="round"
    style={{ display: 'block' }}>
    <path d="M1 7h12M8 2l5 5-5 5" />
  </svg>
);

const IconChev = ({ dir = 'left', size = 16, stroke = 1.4 }) => (
  <svg width={size} height={size} viewBox="0 0 16 16" fill="none"
    stroke="currentColor" strokeWidth={stroke}
    strokeLinecap="round" strokeLinejoin="round" style={{ display: 'block' }}>
    {dir === 'left'
      ? <path d="M10 3L5 8l5 5" />
      : <path d="M6 3l5 5-5 5" />}
  </svg>
);

// Brand mark — a small fish/molecule mashup, abstract
const BrandMark = ({ size = 22, ...props }) => (
  <svg width={size} height={size} viewBox="0 0 22 22" fill="none"
    stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round"
    style={{ display: 'block' }} {...props}>
    <circle cx="11" cy="11" r="9" />
    <circle cx="11" cy="11" r="3.4" />
    <path d="M2 11h4.5M15.5 11H20M11 2v4.5M11 15.5V20" />
  </svg>
);

Object.assign(window, { Icon, IconTech, IconFood, IconLeaf, IconPeople, IconArrow, IconChev, BrandMark });