// hush-icons.jsx — Hush in-app icon family.
//
// Design language:
//   • 24×24 viewBox
//   • 1.8 unit stroke by default (override via `stroke` prop)
//   • Round caps + round joins, always
//   • Geometric construction — quadratic curves, no organic Béziers
//   • Echo the mark's cradled-dot motif where it adds meaning
//     (Now, Growth, Mic terminate in a filled dot)
//
// Naming: every icon exported as Icon{Name}. Bundled to window for cross-file use.

const Icon = ({ children, size = 24, color = 'currentColor', stroke = 1.8, ...rest }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
       stroke={color} strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round"
       {...rest}>
    {children}
  </svg>
);

// ─── Hush mark (the brand glyph, usable as an icon) ──────────────────────
const IconHush = (p) => (
  <Icon {...p}>
    <path d="M 7.3 12 Q 7.3 18.7, 12 18.7 Q 16.7 18.7, 16.7 12" />
    <circle cx="12" cy="7.7" r="2" fill={p.color || 'currentColor'} stroke="none" />
  </Icon>
);

// ─── Feeding ─────────────────────────────────────────────────────────────
// Feed: bottle silhouette with a clear cap, body, and a single liquid line
const IconFeed = (p) => (
  <Icon {...p}>
    <path d="M 9.5 3 H 14.5" />
    <path d="M 9.5 3 V 5 L 8.8 6.8 A 3.5 3.5 0 0 0 8.4 8.2 V 18.3 A 2.7 2.7 0 0 0 11.1 21 H 12.9 A 2.7 2.7 0 0 0 15.6 18.3 V 8.2 A 3.5 3.5 0 0 0 15.2 6.8 L 14.5 5 V 3" />
    <path d="M 8.4 11.4 H 15.6" />
  </Icon>
);

// Breast: simple half-disc with a centered dot
const IconBreast = (p) => (
  <Icon {...p}>
    <path d="M 4.5 10 A 7.5 7.5 0 0 1 19.5 10" />
    <path d="M 4.5 10 V 11" />
    <path d="M 19.5 10 V 11" />
    <circle cx="12" cy="10" r="1.3" fill={p.color || 'currentColor'} stroke="none" />
  </Icon>
);

// Pump: stylized droplet
const IconPump = (p) => (
  <Icon {...p}>
    <path d="M 12 3 C 8 8, 6.5 11, 6.5 14 a 5.5 5.5 0 0 0 11 0 c 0-3 -1.5-6 -5.5-11 Z" />
  </Icon>
);
const IconDroplet = IconPump;

// Solids: shallow bowl with two steam wisps
const IconSolids = (p) => (
  <Icon {...p}>
    <path d="M 3.5 12 H 20.5" />
    <path d="M 4.5 12 A 7.5 7.5 0 0 0 19.5 12" />
    <path d="M 9.5 7 Q 9.5 5.5, 10.5 4.5" />
    <path d="M 13.5 7 Q 13.5 5.5, 14.5 4.5" />
  </Icon>
);

// ─── Sleep ────────────────────────────────────────────────────────────────
// Nap: crescent — outlined
const IconNap = (p) => (
  <Icon {...p}>
    <path d="M 20.5 14.5 A 8.5 8.5 0 0 1 9.5 3.5 8.5 8.5 0 1 0 20.5 14.5 Z" />
  </Icon>
);

// Night: crescent — filled (used in 3am affordances)
const IconNight = (p) => (
  <Icon {...p}>
    <path d="M 20.5 14.5 A 8.5 8.5 0 0 1 9.5 3.5 8.5 8.5 0 1 0 20.5 14.5 Z"
          fill={p.color || 'currentColor'} />
  </Icon>
);

// Sun: simple disc + rays
const IconSun = (p) => (
  <Icon {...p}>
    <circle cx="12" cy="12" r="4" />
    <path d="M 12 2.5 V 4.5 M 12 19.5 V 21.5 M 4.5 12 H 2.5 M 21.5 12 H 19.5 M 5.6 5.6 L 7 7 M 17 17 L 18.4 18.4 M 5.6 18.4 L 7 17 M 17 7 L 18.4 5.6" />
  </Icon>
);

// ─── Care ─────────────────────────────────────────────────────────────────
// Diaper: trapezoid with a small fold line
const IconDiaper = (p) => (
  <Icon {...p}>
    <path d="M 4 8 H 20 L 18.5 15.5 A 2.5 2.5 0 0 1 16 17.5 H 8 A 2.5 2.5 0 0 1 5.5 15.5 L 4 8 Z" />
    <path d="M 12 8 V 17.5" />
  </Icon>
);

// Med: horizontal capsule, split down the middle
const IconMed = (p) => (
  <Icon {...p}>
    <rect x="3" y="8.5" width="18" height="7" rx="3.5" />
    <path d="M 12 8.5 V 15.5" />
  </Icon>
);

// Symptom: thermometer with mercury bulb
const IconSymptom = (p) => (
  <Icon {...p}>
    <path d="M 10 4 a 2 2 0 0 1 4 0 v 10.2 a 4 4 0 1 1 -4 0 V 4 Z" />
    <circle cx="12" cy="17" r="1.6" fill={p.color || 'currentColor'} stroke="none" />
    <path d="M 12 5.5 V 13" />
  </Icon>
);

// Growth: rising sparkline with a dot at the peak (echoes the mark)
const IconGrowth = (p) => (
  <Icon {...p}>
    <path d="M 4 17.5 L 9 12.5 L 13 15 L 19.5 6.5" />
    <circle cx="19.5" cy="6.5" r="1.8" fill={p.color || 'currentColor'} stroke="none" />
  </Icon>
);

// Heart: two arcs + a clean V — geometric, on-grid
const IconHeart = (p) => (
  <Icon {...p}>
    <path d="M 12 8 A 4 4 0 0 0 4 8 L 12 20 L 20 8 A 4 4 0 0 0 12 8 Z" />
  </Icon>
);

// ─── Navigation / nav-bar ────────────────────────────────────────────────
// Now: a "you are here" beacon — concentric ring + filled dot
const IconNow = (p) => (
  <Icon {...p}>
    <circle cx="12" cy="12" r="8.5" />
    <circle cx="12" cy="12" r="3.5" fill={p.color || 'currentColor'} stroke="none" />
  </Icon>
);
const IconBolt = IconNow;  // backwards-compat (replaces old lightning bolt)

// Timeline / list — three lines with dots (like a vertical timeline)
const IconTimeline = (p) => (
  <Icon {...p}>
    <circle cx="5.5" cy="6" r="1.5" fill={p.color || 'currentColor'} stroke="none" />
    <circle cx="5.5" cy="12" r="1.5" fill={p.color || 'currentColor'} stroke="none" />
    <circle cx="5.5" cy="18" r="1.5" fill={p.color || 'currentColor'} stroke="none" />
    <path d="M 10 6 H 20" />
    <path d="M 10 12 H 18" />
    <path d="M 10 18 H 16" />
  </Icon>
);
const IconSwap = IconTimeline;  // backwards-compat

// Family / community — three figures
const IconFamily = (p) => (
  <Icon {...p}>
    <circle cx="6" cy="9.5" r="2" />
    <circle cx="18" cy="9.5" r="2" />
    <circle cx="12" cy="7.5" r="2.5" />
    <path d="M 3 18 a 3 3 0 0 1 6 0" />
    <path d="M 15 18 a 3 3 0 0 1 6 0" />
    <path d="M 7 19 a 5 5 0 0 1 10 0" />
  </Icon>
);

// Settings: sliders (modern alternative to a gear)
const IconSettings = (p) => (
  <Icon {...p}>
    <path d="M 4 7 H 14" />
    <path d="M 18 7 H 20" />
    <circle cx="16" cy="7" r="2" fill={p.color || 'currentColor'} stroke="none" />
    <path d="M 4 17 H 8" />
    <path d="M 12 17 H 20" />
    <circle cx="10" cy="17" r="2" fill={p.color || 'currentColor'} stroke="none" />
  </Icon>
);

// Lock: privacy
const IconLock = (p) => (
  <Icon {...p}>
    <rect x="4.5" y="11" width="15" height="9.5" rx="2.5" />
    <path d="M 8 11 V 7.5 a 4 4 0 0 1 8 0 V 11" />
    <circle cx="12" cy="15.5" r="1.2" fill={p.color || 'currentColor'} stroke="none" />
  </Icon>
);

// Calendar: with a dotted "today" marker
const IconCalendar = (p) => (
  <Icon {...p}>
    <rect x="3.5" y="5.5" width="17" height="15" rx="2.5" />
    <path d="M 3.5 10 H 20.5" />
    <path d="M 8 3.5 V 7.5" />
    <path d="M 16 3.5 V 7.5" />
    <circle cx="12" cy="15.5" r="1.5" fill={p.color || 'currentColor'} stroke="none" />
  </Icon>
);

// ─── Controls ────────────────────────────────────────────────────────────
const IconChevronDown = (p) => (
  <Icon {...p}><path d="M 6 9 L 12 15 L 18 9" /></Icon>
);
const IconChevronRight = (p) => (
  <Icon {...p}><path d="M 9 6 L 15 12 L 9 18" /></Icon>
);
const IconChevronLeft = (p) => (
  <Icon {...p}><path d="M 15 6 L 9 12 L 15 18" /></Icon>
);
const IconChevronUp = (p) => (
  <Icon {...p}><path d="M 6 15 L 12 9 L 18 15" /></Icon>
);
const IconBack = (p) => (
  <Icon {...p}>
    <path d="M 19 12 H 5" />
    <path d="M 11 6 L 5 12 L 11 18" />
  </Icon>
);
const IconPlus = (p) => (
  <Icon {...p}><path d="M 12 5 V 19 M 5 12 H 19" /></Icon>
);
const IconMinus = (p) => (
  <Icon {...p}><path d="M 5 12 H 19" /></Icon>
);
const IconClose = (p) => (
  <Icon {...p}><path d="M 6 6 L 18 18 M 18 6 L 6 18" /></Icon>
);
const IconCheck = (p) => (
  <Icon {...p}><path d="M 4.5 12.5 L 10 18 L 19.5 6.5" /></Icon>
);

// ─── Media / playback ────────────────────────────────────────────────────
const IconPlay = (p) => (
  <Icon {...p}>
    <path d="M 7 5 V 19 L 19 12 Z" fill={p.color || 'currentColor'} />
  </Icon>
);
const IconPause = (p) => (
  <Icon {...p}>
    <rect x="6.5" y="5" width="3.5" height="14" rx="1.2" fill={p.color || 'currentColor'} stroke="none" />
    <rect x="14" y="5" width="3.5" height="14" rx="1.2" fill={p.color || 'currentColor'} stroke="none" />
  </Icon>
);
const IconStop = (p) => (
  <Icon {...p}>
    <rect x="6" y="6" width="12" height="12" rx="2" fill={p.color || 'currentColor'} stroke="none" />
  </Icon>
);

// ─── Atoms / utility ─────────────────────────────────────────────────────
const IconDot = (p) => (
  <Icon {...p}>
    <circle cx="12" cy="12" r="4" fill={p.color || 'currentColor'} stroke="none" />
  </Icon>
);
const IconMic = (p) => (
  <Icon {...p}>
    <rect x="9" y="3" width="6" height="11" rx="3" />
    <path d="M 5 11 a 7 7 0 0 0 14 0" />
    <path d="M 12 18 V 21" />
    <circle cx="12" cy="21" r="0.8" fill={p.color || 'currentColor'} stroke="none" />
  </Icon>
);
const IconCamera = (p) => (
  <Icon {...p}>
    <rect x="3" y="7" width="18" height="13" rx="2.5" />
    <path d="M 9 7 L 10 5 H 14 L 15 7" />
    <circle cx="12" cy="13.5" r="3.5" />
  </Icon>
);
const IconShare = (p) => (
  <Icon {...p}>
    <circle cx="6" cy="12" r="2.5" />
    <circle cx="18" cy="6" r="2.5" />
    <circle cx="18" cy="18" r="2.5" />
    <path d="M 8.2 10.8 L 15.8 7.2" />
    <path d="M 8.2 13.2 L 15.8 16.8" />
  </Icon>
);
const IconExport = (p) => (
  <Icon {...p}>
    <path d="M 12 3 V 15" />
    <path d="M 7 8 L 12 3 L 17 8" />
    <path d="M 4 17 V 19.5 a 1.5 1.5 0 0 0 1.5 1.5 H 18.5 a 1.5 1.5 0 0 0 1.5 -1.5 V 17" />
  </Icon>
);
const IconAlert = (p) => (
  <Icon {...p}>
    <path d="M 12 3 L 21.5 19.5 H 2.5 Z" />
    <path d="M 12 10 V 14" />
    <circle cx="12" cy="16.8" r="1" fill={p.color || 'currentColor'} stroke="none" />
  </Icon>
);
const IconMore = (p) => (
  <Icon {...p}>
    <circle cx="6" cy="12" r="1.7" fill={p.color || 'currentColor'} stroke="none" />
    <circle cx="12" cy="12" r="1.7" fill={p.color || 'currentColor'} stroke="none" />
    <circle cx="18" cy="12" r="1.7" fill={p.color || 'currentColor'} stroke="none" />
  </Icon>
);
const IconFilter = (p) => (
  <Icon {...p}>
    <path d="M 3 5 H 21" />
    <path d="M 6 12 H 18" />
    <path d="M 10 19 H 14" />
  </Icon>
);
const IconSearch = (p) => (
  <Icon {...p}>
    <circle cx="10.5" cy="10.5" r="6.5" />
    <path d="M 15.5 15.5 L 20 20" />
  </Icon>
);

Object.assign(window, {
  // Core
  IconHush,
  // Feeding
  IconFeed, IconBreast, IconPump, IconDroplet, IconSolids,
  // Sleep
  IconNap, IconNight, IconSun,
  // Care
  IconDiaper, IconMed, IconSymptom, IconGrowth, IconHeart,
  // Nav
  IconNow, IconBolt, IconTimeline, IconSwap, IconFamily, IconSettings, IconLock, IconCalendar,
  // Controls
  IconChevronDown, IconChevronRight, IconChevronLeft, IconChevronUp,
  IconBack, IconPlus, IconMinus, IconClose, IconCheck,
  // Media
  IconPlay, IconPause, IconStop,
  // Utility
  IconDot, IconMic, IconCamera, IconShare, IconExport, IconAlert, IconMore, IconFilter, IconSearch,
});
