/* ══════════════════════════════════════════════════
   PHONE ICONS — the in-app (mockup) icon set.

   Separate from js/icons.jsx on purpose: that file is the
   marketing/page icon set (I* prefix) and changes when the
   landing copy changes; these change when the APP changes.

   Two conventions, both load-bearing:

   • P* prefix — all .jsx files share one global lexical
     scope, so a second top-level `const Gear` anywhere is a
     SyntaxError that blanks the entire page.

   • stroke="currentColor" — never a literal, never var().
     var() inside an SVG presentation attribute fails
     silently. currentColor lets the parent set `color` and
     have the icon follow, which is also what makes one
     definition serve both the 14px and 22px call sites.
══════════════════════════════════════════════════ */

const PIco = ({ sz = 20, sw = 2, children }) => (
  <svg width={sz} height={sz} viewBox="0 0 24 24" fill="none" stroke="currentColor"
       strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">{children}</svg>
);

/* ── status / stats ── */
const PPin       = p => <PIco {...p}><path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z"/><circle cx="12" cy="10" r="3"/></PIco>;
const PClock     = p => <PIco {...p}><circle cx="12" cy="12" r="9"/><polyline points="12 7 12 12 15 14"/></PIco>;
const PGauge     = p => <PIco {...p}><path d="M12 14a2 2 0 1 0 2-2"/><path d="M3.5 18a9 9 0 1 1 17 0"/></PIco>;
const PHourglass = p => <PIco {...p}><path d="M6 2h12M6 22h12M6 2l6 8 6-8M6 22l6-8 6 8"/></PIco>;
const PBattery   = p => <PIco {...p}><rect x="2" y="7" width="16" height="10" rx="2.5"/><line x1="21.5" y1="10.5" x2="21.5" y2="13.5"/><rect x="4.5" y="9.5" width="9" height="5" rx="1" fill="currentColor" stroke="none"/></PIco>;
const PNav       = p => <PIco {...p}><polygon points="3 11 22 2 13 21 11 13 3 11" fill="currentColor" stroke="none"/></PIco>;
const PWifi      = p => <PIco {...p}><path d="M2 8.5a16 16 0 0 1 20 0"/><path d="M5 12a12 12 0 0 1 14 0"/><path d="M8.5 15.5a7 7 0 0 1 7 0"/><line x1="12" y1="19" x2="12" y2="19"/></PIco>;

/* ── controls ── */
const PPlay   = p => <PIco {...p}><polygon points="6 4 20 12 6 20 6 4" fill="currentColor" stroke="none"/></PIco>;
const PPause  = p => <PIco {...p}><rect x="6" y="4" width="4" height="16" rx="1.5" fill="currentColor" stroke="none"/><rect x="14" y="4" width="4" height="16" rx="1.5" fill="currentColor" stroke="none"/></PIco>;
const PStop   = p => <PIco {...p}><rect x="5" y="5" width="14" height="14" rx="3" fill="currentColor" stroke="none"/></PIco>;
const PBack   = p => <PIco {...p} sw={2.4}><polyline points="15 18 9 12 15 6"/></PIco>;
const PLogout = p => <PIco {...p}><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></PIco>;

/* ── chrome / navigation ── */
const PGear = p => <PIco {...p}><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1A1.7 1.7 0 0 0 4.6 9a1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z"/></PIco>;
/* The diagnostics entry point in the app's header — a first-aid kit. */
const PKit     = p => <PIco {...p}><rect x="2.5" y="6.5" width="19" height="14" rx="3"/><path d="M8.5 6.5V5a1.5 1.5 0 0 1 1.5-1.5h4A1.5 1.5 0 0 1 15.5 5v1.5"/><line x1="12" y1="10.5" x2="12" y2="16.5"/><line x1="9" y1="13.5" x2="15" y2="13.5"/></PIco>;
const PChevron = p => <PIco {...p}><polyline points="6 9 12 15 18 9"/></PIco>;
const PCheck   = p => <PIco {...p} sw={3}><polyline points="20 6 9 17 4 12"/></PIco>;
const PInfo    = p => <PIco {...p}><circle cx="12" cy="12" r="9"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></PIco>;
const PUser    = p => <PIco {...p}><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></PIco>;
const PCal     = p => <PIco {...p}><rect x="3" y="4.5" width="18" height="17" rx="2.5"/><line x1="16" y1="2.5" x2="16" y2="6.5"/><line x1="8" y1="2.5" x2="8" y2="6.5"/><line x1="3" y1="10" x2="21" y2="10"/></PIco>;
const PBldg    = p => <PIco {...p}><rect x="4" y="2.5" width="16" height="19" rx="2.5"/><path d="M9.5 21.5v-4h5v4"/><path d="M8.5 6.5h.01M8.5 10.5h.01M15.5 6.5h.01M15.5 10.5h.01M12 6.5h.01M12 10.5h.01"/></PIco>;

/* ── diagnostics checklist ── */
const PCrosshair = p => <PIco {...p}><circle cx="12" cy="12" r="3.5"/><line x1="12" y1="2" x2="12" y2="5"/><line x1="12" y1="19" x2="12" y2="22"/><line x1="2" y1="12" x2="5" y2="12"/><line x1="19" y1="12" x2="22" y2="12"/></PIco>;
const PBell      = p => <PIco {...p}><path d="M18 8.5a6 6 0 0 0-12 0c0 7-3 8.5-3 8.5h18s-3-1.5-3-8.5"/><path d="M13.7 21a2 2 0 0 1-3.4 0"/></PIco>;
const PBattChg   = p => <PIco {...p}><rect x="2" y="7" width="16" height="10" rx="2.5"/><line x1="21.5" y1="10.5" x2="21.5" y2="13.5"/><path d="M10.5 9.5 8 12.5h3l-1.5 2.5" strokeWidth="1.8"/></PIco>;
const PAlarm     = p => <PIco {...p}><circle cx="12" cy="13" r="8"/><polyline points="12 9 12 13 14.5 14.5"/><path d="M5 3.5 2.5 6M19 3.5 21.5 6"/></PIco>;
const PDownload  = p => <PIco {...p}><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="3" x2="12" y2="15"/></PIco>;
const PTool      = p => <PIco {...p}><path d="M14.7 6.3a4 4 0 0 1 5.3 5.3L17 8.6l-2.3-2.3z"/><path d="M14.7 6.3 4.5 16.5a2.1 2.1 0 0 0 3 3L17.7 9.3"/></PIco>;
const PActivity  = p => <PIco {...p}><polyline points="2 12 6 12 9 4 15 20 18 12 22 12"/></PIco>;
const PUpload    = p => <PIco {...p}><path d="M17 18a4 4 0 0 0 .8-7.9A6 6 0 0 0 6.3 9.2 3.5 3.5 0 0 0 7 18"/><polyline points="9 13 12 10 15 13"/><line x1="12" y1="10" x2="12" y2="20"/></PIco>;
const PShield    = p => <PIco {...p}><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><polyline points="9 11.5 11 13.5 15 9.5"/></PIco>;
const PMobile    = p => <PIco {...p}><rect x="6" y="2.5" width="12" height="19" rx="3"/><line x1="10.5" y1="18.5" x2="13.5" y2="18.5"/></PIco>;
