// ─── Primitives v2 ────────────────────────────────────────
const { useState, useEffect, useRef, useMemo } = React;

function Pill({ children, color = 'green' }) {
  return (
    <span className="pill">
      <span className="dot" style={{ background: color === 'green' ? 'var(--green)' : color === 'saffron' ? 'var(--saffron)' : 'var(--navy)' }} />
      {children}
    </span>
  );
}

function Eyebrow({ children }) { return <div className="eyebrow">{children}</div>; }

function SectionHeader({ eyebrow, title, italicTail, subtitle, align = 'left' }) {
  return (
    <div style={{ textAlign: align, maxWidth: align === 'center' ? 820 : 820, margin: align === 'center' ? '0 auto' : undefined, marginBottom: 64 }}>
      {eyebrow && <Eyebrow>{eyebrow}</Eyebrow>}
      <h2 className="display" style={{ fontSize: 'clamp(36px, 5vw, 64px)', marginTop: 18, marginBottom: subtitle ? 20 : 0 }}>
        {title} {italicTail && <em className="display-italic" style={{ color: 'var(--saffron)' }}>{italicTail}</em>}
      </h2>
      {subtitle && <p style={{ fontSize: 17, color: 'var(--ink-1)', lineHeight: 1.55, maxWidth: 640, marginLeft: align === 'center' ? 'auto' : 0, marginRight: align === 'center' ? 'auto' : 0 }}>{subtitle}</p>}
    </div>
  );
}

// Tiny icon set — geometric, institutional
const Icon = {
  Shield: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" {...p}><path d="M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6l8-3z"/></svg>,
  Pin: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" {...p}><path d="M12 21s-7-6-7-12a7 7 0 0114 0c0 6-7 12-7 12z"/><circle cx="12" cy="9" r="2.5"/></svg>,
  Check: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" {...p}><path d="M4 12l5 5 11-11"/></svg>,
  Bus: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" {...p}><rect x="4" y="5" width="16" height="12" rx="2"/><path d="M4 11h16"/><circle cx="8" cy="18" r="1.5"/><circle cx="16" cy="18" r="1.5"/></svg>,
  Brain: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" {...p}><path d="M9 4a3 3 0 00-3 3c-1.7 0-3 1.3-3 3 0 1.3.8 2.4 2 2.8v.7c0 1.7 1.3 3 3 3s3-1.3 3-3V4zm6 0v9.5c0 1.7 1.3 3 3 3s3-1.3 3-3v-.7c1.2-.4 2-1.5 2-2.8 0-1.7-1.3-3-3-3a3 3 0 00-3-3z"/></svg>,
  Chart: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" {...p}><path d="M4 20V8M10 20V4M16 20v-7M22 20H2"/></svg>,
  Bell: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" {...p}><path d="M6 10a6 6 0 1112 0c0 4 2 5 2 5H4s2-1 2-5z"/><path d="M10 19a2 2 0 004 0"/></svg>,
  Route: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" {...p}><circle cx="6" cy="5" r="2"/><circle cx="18" cy="19" r="2"/><path d="M8 5h6a4 4 0 014 4v0a4 4 0 01-4 4h-4a4 4 0 00-4 4v0a4 4 0 004 4h6"/></svg>,
  Users: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" {...p}><circle cx="9" cy="8" r="3"/><circle cx="17" cy="9" r="2.5"/><path d="M3 19c0-3 3-5 6-5s6 2 6 5M15 19c0-2 2-4 4-4s3 1.5 3 4"/></svg>,
  Grade: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" {...p}><path d="M4 4h12l4 4v12H4z"/><path d="M16 4v4h4M8 12h8M8 16h5"/></svg>,
  Heat: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" {...p}><rect x="3" y="3" width="6" height="6"/><rect x="11" y="3" width="6" height="6"/><rect x="3" y="11" width="6" height="6"/><rect x="11" y="11" width="6" height="6"/></svg>,
  Mic: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" {...p}><rect x="9" y="3" width="6" height="12" rx="3"/><path d="M5 11a7 7 0 0014 0M12 18v3"/></svg>,
  Arrow: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" {...p}><path d="M5 12h14M13 6l6 6-6 6"/></svg>,
  Star: (p) => <svg viewBox="0 0 24 24" fill="currentColor" {...p}><path d="M12 2l3 7 7 .5-5.5 4.5 2 7L12 17l-6.5 4 2-7L2 9.5 9 9z"/></svg>,
};

Object.assign(window, { Pill, Eyebrow, SectionHeader, Icon });
