// Hand-drawn-feel line icons, stroke-based, sage tinted
const Icon = ({ children, size = 24, stroke = "currentColor", style }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={stroke}
       strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" style={style}>
    {children}
  </svg>
);

const IconLeaf = (p) => <Icon {...p}>
  <path d="M5 19c0-7 5-13 14-14-1 9-7 14-14 14z" />
  <path d="M5 19c4-4 7-7 14-14" />
</Icon>;

const IconSprout = (p) => <Icon {...p}>
  <path d="M12 20v-7" />
  <path d="M12 13c0-3 2-5 6-5 0 3-2 5-6 5z" />
  <path d="M12 13c0-3-2-5-6-5 0 3 2 5 6 5z" />
</Icon>;

const IconHeart = (p) => <Icon {...p}>
  <path d="M12 20s-7-4.5-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.5-7 10-7 10z" />
</Icon>;

const IconPerson = (p) => <Icon {...p}>
  <circle cx="12" cy="8" r="3.2" />
  <path d="M5 20c1-4 4-6 7-6s6 2 7 6" />
</Icon>;

const IconFamily = (p) => <Icon {...p}>
  <circle cx="8" cy="9" r="2.4" />
  <circle cx="16" cy="9" r="2.4" />
  <path d="M3 19c1-3 3-4.5 5-4.5s4 1.5 5 4.5" />
  <path d="M11 19c1-3 3-4.5 5-4.5s4 1.5 5 4.5" />
</Icon>;

const IconCalendar = (p) => <Icon {...p}>
  <rect x="4" y="5" width="16" height="15" rx="2.5" />
  <path d="M4 10h16M8 3v4M16 3v4" />
</Icon>;

const IconVideo = (p) => <Icon {...p}>
  <rect x="3" y="7" width="13" height="10" rx="2" />
  <path d="M16 11l5-3v8l-5-3z" />
</Icon>;

const IconCompass = (p) => <Icon {...p}>
  <circle cx="12" cy="12" r="9" />
  <path d="M15 9l-2 5-5 2 2-5 5-2z" />
</Icon>;

const IconChevron = (p) => <Icon {...p}>
  <path d="M9 6l6 6-6 6" />
</Icon>;

const IconArrow = (p) => <Icon {...p}>
  <path d="M5 12h14M13 6l6 6-6 6" />
</Icon>;

const IconCheck = (p) => <Icon {...p}>
  <path d="M5 12.5l4.5 4.5L19 7.5" />
</Icon>;

const IconPhone = (p) => <Icon {...p}>
  <path d="M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A15 15 0 0 1 3 6a2 2 0 0 1 2-2z" />
</Icon>;

const IconMail = (p) => <Icon {...p}>
  <rect x="3" y="5" width="18" height="14" rx="2" />
  <path d="M3 7l9 7 9-7" />
</Icon>;

const IconPin = (p) => <Icon {...p}>
  <path d="M12 21s-7-7-7-12a7 7 0 0 1 14 0c0 5-7 12-7 12z" />
  <circle cx="12" cy="9" r="2.5" />
</Icon>;

const IconShield = (p) => <Icon {...p}>
  <path d="M12 3l8 3v6c0 5-4 8-8 9-4-1-8-4-8-9V6l8-3z" />
</Icon>;

const IconSun = (p) => <Icon {...p}>
  <circle cx="12" cy="12" r="4" />
  <path d="M12 2v2M12 20v2M2 12h2M20 12h2M5 5l1.5 1.5M17.5 17.5L19 19M5 19l1.5-1.5M17.5 6.5L19 5" />
</Icon>;

const IconBranch = (p) => <Icon {...p}>
  <path d="M6 20V6" />
  <path d="M6 14c3 0 5-2 5-5" />
  <path d="M6 10c3 0 5-2 5-5" />
  <circle cx="11" cy="9" r="0.8" fill="currentColor" />
  <circle cx="11" cy="5" r="0.8" fill="currentColor" />
</Icon>;

Object.assign(window, {
  Icon, IconLeaf, IconSprout, IconHeart, IconPerson, IconFamily,
  IconCalendar, IconVideo, IconCompass, IconChevron, IconArrow, IconCheck,
  IconPhone, IconMail, IconPin, IconShield, IconSun, IconBranch,
});