// Icons + small UI atoms. Single-file collection of inline SVGs.
// Stroke-based, current-color, so they pick up parent color.

const Icon = ({ name, size = 22, stroke = 1.6, ...rest }) => {
  const props = {
    width: size, height: size, viewBox: "0 0 24 24",
    fill: "none", stroke: "currentColor", strokeWidth: stroke,
    strokeLinecap: "round", strokeLinejoin: "round", ...rest,
  };
  switch (name) {
    case "scan":
      return (<svg {...props}><path d="M3 8V5a2 2 0 0 1 2-2h3"/><path d="M21 8V5a2 2 0 0 0-2-2h-3"/><path d="M3 16v3a2 2 0 0 0 2 2h3"/><path d="M21 16v3a2 2 0 0 1-2 2h-3"/><circle cx="12" cy="12" r="3.2"/><path d="M12 7v1.5M12 15.5V17M7 12h1.5M15.5 12H17"/></svg>);
    case "alert":
      return (<svg {...props}><path d="M12 9v4"/><path d="M12 17h.01"/><path d="M10.3 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/></svg>);
    case "scalpel":
      return (<svg {...props}><path d="M14 4 4 14l-1 4 4-1L17 7"/><path d="m14 4 6 6-3 3"/></svg>);
    case "shield":
      return (<svg {...props}><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><path d="m9 12 2 2 4-4"/></svg>);
    case "drop":
      return (<svg {...props}><path d="M12 3s6 7 6 11a6 6 0 0 1-12 0c0-4 6-11 6-11z"/></svg>);
    case "heart":
      return (<svg {...props}><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>);
    case "tooth":
      return (<svg {...props}><path d="M12 2c-3 0-4 1.5-6 1.5S3 5 3 8c0 4 2 5 2.5 8s.5 5 2 5 1.5-3 2.5-5 1-3 2-3 1 1 2 3 1 5 2.5 5 1.5-2 2-5 2.5-4 2.5-8c0-3-1-4.5-3-4.5S15 2 12 2z"/></svg>);
    case "leaf":
      return (<svg {...props}><path d="M11 20A7 7 0 0 1 4 13c0-7 8-9 16-9 0 8-2 16-9 16Z"/><path d="M4 21 14 11"/></svg>);
    case "tag":
      return (<svg {...props}><path d="M20.6 13.4 13.4 20.6a2 2 0 0 1-2.83 0L3.4 13.4A2 2 0 0 1 2.8 12V4.8A2 2 0 0 1 4.8 2.8H12a2 2 0 0 1 1.4.58l7.2 7.2a2 2 0 0 1 0 2.82Z"/><circle cx="7.5" cy="7.5" r="1.2"/></svg>);
    case "house":
      return (<svg {...props}><path d="m3 11 9-7 9 7"/><path d="M5 10v10h14V10"/><path d="M10 20v-5h4v5"/></svg>);
    case "car":
      return (<svg {...props}><path d="M5 16V11l2-5h10l2 5v5"/><circle cx="7" cy="17" r="2"/><circle cx="17" cy="17" r="2"/><path d="M5 14h14"/></svg>);
    case "plane":
      return (<svg {...props}><path d="M21 16v-2L13 9V4a1.5 1.5 0 0 0-3 0v5L2 14v2l8-2v5l-2 1v1l3.5-.7L15 21v-1l-2-1v-5z"/></svg>);
    case "phone":
      return (<svg {...props}><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z"/></svg>);
    case "mail":
      return (<svg {...props}><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg>);
    case "pin":
      return (<svg {...props}><path d="M12 22s8-7.5 8-13a8 8 0 1 0-16 0c0 5.5 8 13 8 13z"/><circle cx="12" cy="9" r="2.5"/></svg>);
    case "clock":
      return (<svg {...props}><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>);
    case "calendar":
      return (<svg {...props}><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 9h18M8 3v4M16 3v4"/></svg>);
    case "chat":
      return (<svg {...props}><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/></svg>);
    case "check":
      return (<svg {...props}><path d="m5 12 4 4L19 6"/></svg>);
    case "arrow-right":
      return (<svg {...props}><path d="M5 12h14M13 5l7 7-7 7"/></svg>);
    case "arrow-up-right":
      return (<svg {...props}><path d="M7 17 17 7M8 7h9v9"/></svg>);
    case "menu":
      return (<svg {...props}><path d="M3 6h18M3 12h18M3 18h18"/></svg>);
    case "x":
      return (<svg {...props}><path d="M18 6 6 18M6 6l12 12"/></svg>);
    case "paw":
      return (<svg {...props} strokeWidth="0" fill="currentColor"><circle cx="6" cy="10" r="1.7"/><circle cx="10" cy="6" r="1.7"/><circle cx="14" cy="6" r="1.7"/><circle cx="18" cy="10" r="1.7"/><path d="M12 11c-3 0-5 2.5-5 5 0 2 1.5 3 3 3 .8 0 1.5-.5 2-.5s1.2.5 2 .5c1.5 0 3-1 3-3 0-2.5-2-5-5-5z"/></svg>);
    case "stethoscope":
      return (<svg {...props}><path d="M6 3v6a4 4 0 0 0 8 0V3"/><path d="M6 3h2M12 3h2"/><path d="M10 13v3a5 5 0 0 0 10 0v-1"/><circle cx="20" cy="14" r="2"/></svg>);
    case "globe":
      return (<svg {...props}><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18"/></svg>);
    case "spark":
      return (<svg {...props}><path d="M12 3v4M12 17v4M3 12h4M17 12h4M5.6 5.6l2.8 2.8M15.6 15.6l2.8 2.8M5.6 18.4l2.8-2.8M15.6 8.4l2.8-2.8"/></svg>);
    default:
      return (<svg {...props}><circle cx="12" cy="12" r="9"/></svg>);
  }
};

// ECG / heartbeat line — visual nod to the logo's pulse
const ECGLine = ({ color = "currentColor", strokeWidth = 1.6, className = "ecg" }) => (
  <svg className={className} viewBox="0 0 1200 32" preserveAspectRatio="none" aria-hidden="true">
    <path d="M0 16 L240 16 L260 16 L272 6 L286 26 L300 4 L314 28 L326 16 L520 16 L540 16 L552 6 L566 26 L580 4 L594 28 L606 16 L820 16 L840 16 L852 6 L866 26 L880 4 L894 28 L906 16 L1200 16"
      fill="none" stroke={color} strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round" />
  </svg>
);

// Heart-line ECG variant for hero — single big pulse
const ECGPulse = ({ color = "currentColor" }) => (
  <svg viewBox="0 0 400 80" preserveAspectRatio="none" style={{ width: "100%", height: "auto" }} aria-hidden="true">
    <path d="M0 40 L120 40 L140 40 L155 18 L175 62 L195 8 L215 70 L230 40 L400 40"
      fill="none" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
);

// Brand mark — original "Blue Oasis Vet" lockup (we do NOT recreate the photo logo —
// instead we draw a clean monogram + wordmark using brand colors).
const BrandLogo = ({ size = 36, withWord = true, color = "var(--oasis-deep)" }) => (
  <span style={{ display: "inline-flex", alignItems: "center", gap: 10, color }}>
    <svg width={size} height={size} viewBox="0 0 40 40" fill="none" aria-hidden="true">
      {/* water drop / oasis */}
      <path d="M20 4 C 12 14, 7 20, 7 26 a 13 13 0 0 0 26 0 c 0 -6 -5 -12 -13 -22 z"
            fill="var(--oasis)" />
      {/* leaf — leaf-green crescent inside drop */}
      <path d="M14 26 c 0 -6 5 -10 12 -10 c 0 7 -4 12 -10 12 c -1.2 0 -2 -1 -2 -2 z"
            fill="var(--leaf)" opacity="0.9"/>
      {/* heartbeat */}
      <path d="M9 32 L15 32 L17 28 L20 36 L23 26 L26 34 L28 32 L31 32"
            stroke="#fff" strokeWidth="1.6" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
    {withWord && (
      <span style={{ display: "inline-flex", flexDirection: "column", lineHeight: 1 }}>
        <span style={{ fontFamily: "var(--f-display)", fontStyle: "italic", fontSize: 22, color: "var(--oasis-deep)" }}>Blue Oasis</span>
        <span style={{ fontFamily: "var(--f-mono)", fontSize: 9.5, letterSpacing: ".22em", color: "var(--leaf-deep)", textTransform: "uppercase", marginTop: 2 }}>Veterinary Clinic</span>
      </span>
    )}
  </span>
);

window.Icon = Icon;
window.ECGLine = ECGLine;
window.ECGPulse = ECGPulse;
window.BrandLogo = BrandLogo;