/* global React */
// ── Tiny stroke icons used throughout the page ─────────────────────────────
// Original, geometric, monoline. Drawn at 24×24; consumers set width/height.

const I = ({ children, size = 18, sw = 1.5 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
       stroke="currentColor" strokeWidth={sw} strokeLinecap="round"
       strokeLinejoin="round" aria-hidden="true">
    {children}
  </svg>
);

const IconArrow      = (p) => <I {...p}><path d="M5 12h14"/><path d="M13 6l6 6-6 6"/></I>;
const IconArrowUp    = (p) => <I {...p}><path d="M12 19V5"/><path d="M6 11l6-6 6 6"/></I>;
const IconCheck      = (p) => <I {...p}><path d="M5 12.5l4.5 4.5L19 7.5"/></I>;
const IconPlus       = (p) => <I {...p}><path d="M12 5v14M5 12h14"/></I>;
const IconWhatsapp   = (p) => <I {...p}><path d="M21 12a9 9 0 1 1-3.6-7.2L21 4l-1.2 3.6A9 9 0 0 1 21 12z"/><path d="M8 11.5c.5 2 2.5 4 4.5 4.5l1.5-1.5 2 1c0 1-1 2-2.5 2C10 17.5 6.5 14 6.5 11c0-1.5 1-2.5 2-2.5l1 2L8 11.5z"/></I>;
const IconCalendar   = (p) => <I {...p}><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 10h18M8 3v4M16 3v4"/></I>;
const IconLayers     = (p) => <I {...p}><path d="M12 3l9 5-9 5-9-5 9-5z"/><path d="M3 13l9 5 9-5"/><path d="M3 17l9 5 9-5"/></I>;
const IconBox        = (p) => <I {...p}><path d="M3 7l9-4 9 4-9 4-9-4z"/><path d="M3 7v10l9 4 9-4V7"/><path d="M12 11v10"/></I>;
const IconReceipt    = (p) => <I {...p}><path d="M6 3h12v18l-3-2-3 2-3-2-3 2V3z"/><path d="M9 8h6M9 12h6M9 16h4"/></I>;
const IconChart      = (p) => <I {...p}><path d="M4 20V10"/><path d="M10 20V4"/><path d="M16 20v-7"/><path d="M22 20H2"/></I>;
const IconPhone      = (p) => <I {...p}><rect x="6" y="2" width="12" height="20" rx="2"/><path d="M11 18h2"/></I>;
const IconShield     = (p) => <I {...p}><path d="M12 3l8 3v5c0 5-3.5 8.5-8 10-4.5-1.5-8-5-8-10V6l8-3z"/></I>;
const IconLightning  = (p) => <I {...p}><path d="M13 2L4 14h7l-1 8 9-12h-7l1-8z"/></I>;
const IconWifi       = (p) => <I {...p}><path d="M5 12.5a10 10 0 0 1 14 0"/><path d="M8.5 16a5 5 0 0 1 7 0"/><circle cx="12" cy="19" r="1"/></I>;
const IconEye        = (p) => <I {...p}><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z"/><circle cx="12" cy="12" r="3"/></I>;
const IconUser       = (p) => <I {...p}><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4 4-7 8-7s8 3 8 7"/></I>;
const IconBell       = (p) => <I {...p}><path d="M6 8a6 6 0 1 1 12 0c0 7 3 7 3 9H3c0-2 3-2 3-9z"/><path d="M10 21a2 2 0 0 0 4 0"/></I>;
const IconCog        = (p) => <I {...p}><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z"/></I>;
const IconCircle     = (p) => <I {...p}><circle cx="12" cy="12" r="9"/></I>;
const IconDot        = (p) => <I {...p}><circle cx="12" cy="12" r="3" fill="currentColor"/></I>;
const IconStar       = (p) => <I {...p}><path d="M12 3l2.6 6 6.4.6-4.8 4.4 1.4 6.4L12 17l-5.6 3.4 1.4-6.4L3 9.6 9.4 9 12 3z"/></I>;
const IconMessage    = (p) => <I {...p}><path d="M21 12c0 4-4 7-9 7-1.5 0-3-.3-4.3-.8L3 20l1.4-4.2A7 7 0 0 1 3 12c0-4 4-7 9-7s9 3 9 7z"/></I>;

const LotusMark = ({ size = 32 }) => (
  <svg width={size} height={size} viewBox="0 0 32 32" fill="none" aria-hidden="true">
    {/* Stylized "L" mark matching real LothusPDV brand — neutral graphite + orange */}
    <rect x="5" y="5" width="10" height="22" fill="oklch(0.32 0.02 60)"/>
    <rect x="15" y="17" width="12" height="10" fill="oklch(0.62 0.17 55)"/>
  </svg>
);

const LothusLogo = ({ height = 36, alt = "LothusPDV by SYSIT" }) => (
  <img
    src="assets/lothus-logo.png"
    alt={alt}
    style={{ height, width: 'auto', display: 'block' }}
  />
);

Object.assign(window, {
  IconArrow, IconArrowUp, IconCheck, IconPlus, IconWhatsapp, IconCalendar,
  IconLayers, IconBox, IconReceipt, IconChart, IconPhone, IconShield,
  IconLightning, IconWifi, IconEye, IconUser, IconBell, IconCog, IconCircle,
  IconDot, IconStar, IconMessage, LotusMark, LothusLogo
});
