// Lucide-style inline SVG icons (so the file is self-contained, no bundler).
const { useState, useEffect, useRef, useMemo } = React;

const Icon = ({ children, size = 24, stroke = 1.6, className = "", style }) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width={size}
    height={size}
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth={stroke}
    strokeLinecap="round"
    strokeLinejoin="round"
    className={className}
    style={style}
  >
    {children}
  </svg>
);

const Activity   = (p) => <Icon {...p}><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></Icon>;
const HeartIcon  = (p) => <Icon {...p}><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"/></Icon>;
const StarIcon   = (p) => <Icon {...p}><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></Icon>;
const Sparkles   = (p) => (
  <Icon {...p}>
    <path d="m12 3-1.9 5.8a2 2 0 0 1-1.287 1.288L3 12l5.8 1.9a2 2 0 0 1 1.288 1.287L12 21l1.9-5.8a2 2 0 0 1 1.287-1.288L21 12l-5.8-1.9a2 2 0 0 1-1.288-1.287Z"/>
    <path d="M5 3v4"/><path d="M19 17v4"/><path d="M3 5h4"/><path d="M17 19h4"/>
  </Icon>
);
const Stethoscope = (p) => (
  <Icon {...p}>
    <path d="M4.8 2.3A.3.3 0 1 0 5 2H4a2 2 0 0 0-2 2v5a6 6 0 0 0 6 6v0a6 6 0 0 0 6-6V4a2 2 0 0 0-2-2h-1a.2.2 0 1 0 .2.3"/>
    <path d="M8 15v1a6 6 0 0 0 6 6v0a6 6 0 0 0 6-6v-4"/>
    <circle cx="20" cy="10" r="2"/>
  </Icon>
);
const Syringe = (p) => (
  <Icon {...p}>
    <path d="m18 2 4 4"/>
    <path d="m17 7 3-3"/>
    <path d="M19 9 8.7 19.3c-1 1-2.5 1-3.4 0l-.6-.6c-1-1-1-2.5 0-3.4L15 5"/>
    <path d="m9 11 4 4"/>
    <path d="m5 19-3 3"/>
    <path d="m14 4 6 6"/>
  </Icon>
);
const Pill = (p) => (
  <Icon {...p}>
    <path d="m10.5 20.5 10-10a4.95 4.95 0 1 0-7-7l-10 10a4.95 4.95 0 1 0 7 7Z"/>
    <path d="m8.5 8.5 7 7"/>
  </Icon>
);
const Moon  = (p) => <Icon {...p}><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></Icon>;
const Coffee = (p) => (
  <Icon {...p}>
    <path d="M17 8h1a4 4 0 0 1 0 8h-1"/>
    <path d="M3 8h14v9a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4Z"/>
    <line x1="6" y1="2" x2="6" y2="4"/>
    <line x1="10" y1="2" x2="10" y2="4"/>
    <line x1="14" y1="2" x2="14" y2="4"/>
  </Icon>
);
const Lock = (p) => (
  <Icon {...p}>
    <rect x="3" y="11" width="18" height="11" rx="2"/>
    <path d="M7 11V7a5 5 0 0 1 10 0v4"/>
  </Icon>
);
const Unlock = (p) => (
  <Icon {...p}>
    <rect x="3" y="11" width="18" height="11" rx="2"/>
    <path d="M7 11V7a5 5 0 0 1 9.9-1"/>
  </Icon>
);
const X = (p) => <Icon {...p}><path d="M18 6 6 18"/><path d="m6 6 12 12"/></Icon>;
const ArrowDown = (p) => <Icon {...p}><path d="M12 5v14"/><path d="m19 12-7 7-7-7"/></Icon>;

// Animated EKG line. Used in intro + as decorative element.
const EKG = ({ className = "" }) => (
  <svg viewBox="0 0 480 120" className={className} preserveAspectRatio="none" aria-hidden="true">
    <defs>
      <linearGradient id="ekgGrad" x1="0%" x2="100%">
        <stop offset="0%"  stopColor="#6efff5"/>
        <stop offset="50%" stopColor="#ff6ec7"/>
        <stop offset="100%" stopColor="#ffd56e"/>
      </linearGradient>
      <filter id="ekgGlow" x="-20%" y="-50%" width="140%" height="200%">
        <feGaussianBlur stdDeviation="2.4" result="b"/>
        <feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
      </filter>
    </defs>
    <path
      d="M 0 60 L 90 60 L 120 60 L 132 38 L 148 84 L 164 16 L 180 96 L 196 60 L 250 60 L 280 60 L 292 46 L 308 76 L 322 60 L 480 60"
      fill="none"
      stroke="url(#ekgGrad)"
      strokeWidth="2.2"
      strokeLinecap="round"
      strokeLinejoin="round"
      filter="url(#ekgGlow)"
      className="ekg-path"
    />
  </svg>
);

Object.assign(window, {
  Icon, Activity, HeartIcon, StarIcon, Sparkles, Stethoscope, Syringe,
  Pill, Moon, Coffee, Lock, Unlock, X, ArrowDown, EKG,
});