/* ============================================================
   PWC ICONS & LOGO — geometric line work, no illustration.
   The logomark is a "command reticle": nested response brackets
   around a center bore — ties to the coverage-map marker direction.
   ============================================================ */

/* ============================================================
   BRAND LOGOMARKS — four directions for the iteration phase.
   All geometric (no illustration), 2-tone: steel structure + an
   ember accent on the "act"/bore element. Flip via the Logo tweak.
   ============================================================ */

/* A — Command Reticle: response brackets + center bore.
   Reads as command/target; ties directly to the coverage-map marker. */
function Mark_reticle({ ember, steel }) {
  return (
    <g fill="none">
      <g stroke={steel} strokeWidth="2.2" strokeLinecap="square">
        <path d="M5 13 V5 H13" /><path d="M27 5 H35 V13" />
        <path d="M35 27 V35 H27" /><path d="M13 35 H5 V27" />
        <path d="M12 20 H16 M24 20 H28 M20 12 V16 M20 24 V28" opacity="0.9" />
      </g>
      <rect x="16" y="16" width="8" height="8" fill={ember} />
    </g>
  );
}

/* B — Wellhead Tree: master valve, flow arm, base flange.
   The most literal / industrial. Equipment that looks capable. */
function Mark_wellhead({ ember, steel }) {
  return (
    <g fill="none" stroke={steel} strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M20 8 V32" />
      <circle cx="20" cy="13" r="4.4" />
      <path d="M14 13 H10 M26 13 H30" opacity=".85" />
      <path d="M20 22 H30" />
      <rect x="29" y="19.5" width="5" height="5" rx="1" fill={ember} stroke="none" />
      <path d="M12 32 H28" strokeWidth="2.6" />
    </g>
  );
}

/* C — Hold the Line: controlled descent settling onto a held baseline.
   Hero motion-but-controlled; the brand's core idea as a mark. */
function Mark_holdline({ ember, steel }) {
  return (
    <g fill="none" stroke={steel} strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
      <path d="M9 11 L20 18 L31 11" opacity=".55" />
      <path d="M11 18 L20 24 L29 18" opacity=".8" />
      <path d="M9 31 H31" stroke={ember} strokeWidth="3" />
    </g>
  );
}

/* D — Response Bands: a true vertical plumb with bands radiating from a
   base origin (Midland). Cartographic; ties to the response-time ramp. */
function Mark_bands({ ember, steel }) {
  return (
    <g fill="none">
      <g stroke={steel} strokeWidth="2.1" strokeLinecap="round">
        <path d="M9 31 A11 11 0 0 1 31 31" opacity=".5" />
        <path d="M13 31 A7 7 0 0 1 27 31" opacity=".75" />
        <path d="M20 31 V9" />
      </g>
      <rect x="16.5" y="29.5" width="7" height="7" rx="1" fill={ember} />
    </g>
  );
}

const LOGOS = [
  { id: "reticle", label: "Command Reticle", Comp: Mark_reticle },
  { id: "wellhead", label: "Wellhead Tree", Comp: Mark_wellhead },
  { id: "holdline", label: "Hold the Line", Comp: Mark_holdline },
  { id: "bands", label: "Response Bands", Comp: Mark_bands },
];

function PWCMark({ size = 34, variant = "reticle", ember = "var(--ember)", steel = "currentColor" }) {
  const entry = LOGOS.find((l) => l.id === variant) || LOGOS[0];
  const Inner = entry.Comp;
  return (
    <svg width={size} height={size} viewBox="0 0 40 40" fill="none" aria-hidden="true" style={{ display: "block" }}>
      <Inner ember={ember} steel={steel} />
    </svg>
  );
}

/* Phone glyph for the call action */
function IconPhone({ size = 20, stroke = "currentColor", sw = 2.1 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" aria-hidden="true">
      <path d="M6.5 3.5h3l1.4 4-2 1.4a12 12 0 0 0 5.8 5.8l1.4-2 4 1.4v3a2 2 0 0 1-2.2 2A16.5 16.5 0 0 1 4.5 5.7 2 2 0 0 1 6.5 3.5Z"
        stroke={stroke} strokeWidth={sw} strokeLinejoin="round" />
    </svg>
  );
}

/* Value-prop icons — calm, structural */
function IconGauge({ size = 30 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 32 32" fill="none" aria-hidden="true" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M5 22a11 11 0 1 1 22 0" />
      <path d="M16 22l6-6" />
      <circle cx="16" cy="22" r="1.6" fill="currentColor" stroke="none" />
      <path d="M5 22h2M25 22h2M16 9v2" opacity=".7" />
    </svg>
  );
}
function IconReticle({ size = 30 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 32 32" fill="none" aria-hidden="true" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="16" cy="16" r="9" />
      <path d="M16 3v5M16 24v5M3 16h5M24 16h5" />
      <circle cx="16" cy="16" r="2.2" fill="currentColor" stroke="none" />
    </svg>
  );
}
function IconCommand({ size = 30 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 32 32" fill="none" aria-hidden="true" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M16 4l10 4v7c0 6-4.3 10-10 13C9.3 25 5 21 5 15V8z" />
      <path d="M11.5 16l3 3 6-6.5" />
    </svg>
  );
}
const VP_ICONS = [IconGauge, IconReticle, IconCommand];

/* small utility glyphs */
function IconShield({ size = 16 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 20 20" fill="none" aria-hidden="true" stroke="currentColor" strokeWidth="1.7" strokeLinejoin="round">
      <path d="M10 2.5l6 2.2v4.3c0 3.7-2.6 6.2-6 7.5-3.4-1.3-6-3.8-6-7.5V4.7z" />
      <path d="M10 8v3.2M10 13.4v.2" strokeLinecap="round" />
    </svg>
  );
}
function IconArrow({ size = 16 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 20 20" fill="none" aria-hidden="true" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M4 10h11M11 6l4 4-4 4" />
    </svg>
  );
}
function IconChevron({ size = 18, open = false }) {
  return (
    <svg width={size} height={size} viewBox="0 0 20 20" fill="none" aria-hidden="true" stroke="currentColor" strokeWidth="2.1" strokeLinecap="round" strokeLinejoin="round"
      style={{ transform: open ? "rotate(180deg)" : "none", transition: "transform .25s var(--ease)" }}>
      <path d="M5 8l5 5 5-5" />
    </svg>
  );
}
function IconTick({ size = 18 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 20 20" fill="none" aria-hidden="true" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M4 7l3.2 8L16 4" />
    </svg>
  );
}

Object.assign(window, {
  PWCMark, LOGOS, IconPhone, IconGauge, IconReticle, IconCommand, VP_ICONS,
  IconShield, IconArrow, IconChevron, IconTick,
});
