// Minimal line icons — 24x24 stroke 1.75
const I = ({ children, size = 24, strokeWidth = 1.75, ...rest }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
       stroke="currentColor" strokeWidth={strokeWidth}
       strokeLinecap="round" strokeLinejoin="round" {...rest}>
    {children}
  </svg>
);

const Icon = {
  phone:    (p) => <I {...p}><path d="M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 5a2 2 0 0 1 2-1"/></I>,
  whatsapp: (p) => <I {...p}><path d="M21 12a9 9 0 1 1-3.5-7.1L21 4l-1 3.5A9 9 0 0 1 21 12Z"/><path d="M8 10c0 4 2 6 6 6l1.5-1.5-2-1-1 1c-1.5-.4-2.6-1.5-3-3l1-1-1-2L8 10Z"/></I>,
  instagram:(p) => <I {...p}><rect x="3" y="3" width="18" height="18" rx="5.2"/><circle cx="12" cy="12" r="4.1"/><circle cx="17.2" cy="6.8" r="1.15" fill="currentColor" stroke="none"/></I>,
  arrow:    (p) => <I {...p}><path d="M5 12h14M13 6l6 6-6 6"/></I>,
  check:    (p) => <I {...p}><path d="M5 12.5 10 17 19 7"/></I>,
  shield:   (p) => <I {...p}><path d="M12 3 4 6v6c0 5 3.5 8 8 9 4.5-1 8-4 8-9V6l-8-3Z"/><path d="m9 12 2 2 4-4"/></I>,
  heart:    (p) => <I {...p}><path d="M12 20s-7-4.5-7-10a4 4 0 0 1 7-2.5A4 4 0 0 1 19 10c0 5.5-7 10-7 10Z"/></I>,
  clock:    (p) => <I {...p}><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></I>,
  calendar: (p) => <I {...p}><rect x="3" y="5" width="18" height="16" rx="3"/><path d="M3 10h18M8 3v4M16 3v4"/></I>,
  pin:      (p) => <I {...p}><path d="M12 22s7-7 7-12a7 7 0 0 0-14 0c0 5 7 12 7 12Z"/><circle cx="12" cy="10" r="2.5"/></I>,
  wheel:    (p) => <I {...p}><circle cx="9" cy="18" r="3"/><path d="M9 6v9M9 6h6l-1 4M15 11l3 5h-2"/><circle cx="9" cy="4" r="1.5"/></I>,
  user:     (p) => <I {...p}><circle cx="12" cy="8" r="4"/><path d="M4 21c1-4 4.5-6 8-6s7 2 8 6"/></I>,
  users:    (p) => <I {...p}><circle cx="9" cy="8" r="3.5"/><path d="M2 20c.8-3.5 3.5-5 7-5s6.2 1.5 7 5"/><circle cx="17" cy="7" r="2.5"/><path d="M22 17c-.6-2.4-2.2-3.5-4.5-3.7"/></I>,
  bed:      (p) => <I {...p}><path d="M3 18V8M3 14h18v4M11 11a3 3 0 0 1 6 0v3"/><circle cx="7.5" cy="11" r="1.5"/></I>,
  chair:    (p) => <I {...p}><path d="M7 4v8a3 3 0 0 0 3 3h7M7 15v5M17 15v5M14 4v8"/></I>,
  doc:      (p) => <I {...p}><path d="M7 3h7l4 4v14a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1Z"/><path d="M14 3v4h4M9 13h6M9 17h4"/></I>,
  pulse:    (p) => <I {...p}><path d="M3 12h4l2-6 4 12 2-6h6"/></I>,
  hospital: (p) => <I {...p}><path d="M4 21V8l8-4 8 4v13"/><path d="M9 21v-6h6v6M12 9v4M10 11h4"/></I>,
  star:     (p) => <I {...p}><path d="m12 3 2.7 5.5 6.1.9-4.4 4.3 1 6.1L12 17l-5.4 2.8 1-6.1L3.2 9.4l6.1-.9L12 3Z"/></I>,
  lock:     (p) => <I {...p}><rect x="4" y="11" width="16" height="10" rx="2.5"/><path d="M8 11V8a4 4 0 0 1 8 0v3"/></I>,
  car:      (p) => <I {...p}><path d="M3 14h18v4H3zM5 14l2-6h10l2 6"/><circle cx="7.5" cy="18" r="1.5"/><circle cx="16.5" cy="18" r="1.5"/></I>,
  upload:   (p) => <I {...p}><path d="M4 17v3a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-3M12 3v13M7 8l5-5 5 5"/></I>,
  mail:     (p) => <I {...p}><rect x="3" y="5" width="18" height="14" rx="2.5"/><path d="m3 7 9 7 9-7"/></I>,
  menu:     (p) => <I {...p}><path d="M4 7h16M4 12h16M4 17h16"/></I>,
  close:    (p) => <I {...p}><path d="M6 6l12 12M18 6 6 18"/></I>,
  plus:     (p) => <I {...p}><path d="M12 5v14M5 12h14"/></I>,
  minus:    (p) => <I {...p}><path d="M5 12h14"/></I>,
  globe:    (p) => <I {...p}><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3c3 3.5 3 14 0 18M12 3c-3 3.5-3 14 0 18"/></I>,
};

// Crane mark — brandbook-style geometric K-bird abstract glyph
const CraneMark = ({ size = 36, color = "currentColor", accent }) => {
  const acc = accent || color;
  return (
    <svg width={size} height={size} viewBox="0 0 48 48" fill="none" aria-hidden>
      {/* Stylized bird in flight — sharp geometric arrow form */}
      <path d="M6 36 L24 8 L42 36 L34 36 L24 22 L14 36 Z" fill={color}/>
      <path d="M24 22 L24 36 L18 36 Z" fill={acc}/>
    </svg>
  );
};

// Logo lockup — wordmark with mark
const Wordmark = ({ size = "md", invert = false }) => {
  const sizes = { sm: 18, md: 22, lg: 32 };
  const fs = sizes[size];
  const markSize = fs * 1.35;
  return (
    <span className="wordmark" style={{ fontSize: fs, color: invert ? "#fff" : "var(--ink)" }}>
      <CraneMark size={markSize} color={invert ? "#fff" : "var(--ink)"} accent="var(--accent)"/>
      <span className="kranich-text">
        KRANICH
        <small style={{ color: invert ? "rgba(255,255,255,.6)" : "var(--ink-3)" }}>Krankentransport</small>
      </span>
    </span>
  );
};

Object.assign(window, { Icon, CraneMark, Wordmark });
