// patch.jsx — window.Patch. SVG emblem for each trail stop.
// Props: { mark, size, shape, earned }
//   shape: 'hex' | 'shield' | 'rounded' | 'circle'   (frame)
//   mark : glyph key (garage, club, shop, ticket, factory, loop, ring, dev, lake, strait)
//   earned: true => glowing; false => dim/locked
// Styling hooks live in styles.css: .patch-svg .stroke / .ink / .dim / .locked

const FRAMES = {
  hex: "M50 4 L88 27 L88 73 L50 96 L12 73 L12 27 Z",
  shield: "M50 5 L90 20 V52 C90 76 72 90 50 96 C28 90 10 76 10 52 V20 Z",
  rounded: "M24 7 H76 A17 17 0 0 1 93 24 V76 A17 17 0 0 1 76 93 H24 A17 17 0 0 1 7 76 V24 A17 17 0 0 1 24 7 Z",
};

function PatchGlyph({ mark }) {
  switch (mark) {
    case "garage":
      return (
        <g className="glyph">
          <path className="stroke" d="M31 58 L50 41 L69 58 V71 H31 Z" strokeWidth="3.5" />
          <line className="stroke" x1="31" y1="64" x2="69" y2="64" strokeWidth="3" />
          <line className="stroke" x1="40" y1="64" x2="40" y2="71" strokeWidth="3" />
          <line className="stroke" x1="60" y1="64" x2="60" y2="71" strokeWidth="3" />
        </g>
      );
    case "club":
      return (
        <g className="glyph">
          <line className="stroke" x1="40" y1="42" x2="60" y2="42" strokeWidth="3" />
          <line className="stroke" x1="40" y1="42" x2="36" y2="62" strokeWidth="3" />
          <line className="stroke" x1="60" y1="42" x2="64" y2="62" strokeWidth="3" />
          <circle className="stroke" cx="40" cy="42" r="5" strokeWidth="3" />
          <circle className="stroke" cx="60" cy="42" r="5" strokeWidth="3" />
          <circle className="stroke" cx="50" cy="64" r="6" strokeWidth="3" />
        </g>
      );
    case "shop":
      return (
        <g className="glyph">
          <path className="stroke" d="M37 36 H63 V70 L57 66 L50 70 L43 66 L37 70 Z" strokeWidth="3" />
          <line className="stroke" x1="43" y1="46" x2="57" y2="46" strokeWidth="3" />
          <line className="stroke" x1="43" y1="54" x2="57" y2="54" strokeWidth="3" />
        </g>
      );
    case "ticket":
      return (
        <g className="glyph">
          <path className="stroke" d="M34 41 H66 V48 A4 4 0 0 0 66 60 V67 H34 V60 A4 4 0 0 0 34 48 Z" strokeWidth="3" />
          <line className="stroke" x1="50" y1="44" x2="50" y2="64" strokeWidth="2.5" strokeDasharray="3 4" />
        </g>
      );
    case "factory":
      return (
        <g className="glyph">
          <path className="stroke" d="M33 70 V49 L45 56 V49 L57 56 V44 H67 V70 Z" strokeWidth="3.2" />
        </g>
      );
    case "loop":
      return (
        <g className="glyph">
          <circle className="stroke" cx="42" cy="52" r="9" strokeWidth="3.4" />
          <circle className="stroke" cx="58" cy="52" r="9" strokeWidth="3.4" />
        </g>
      );
    case "ring":
      return (
        <g className="glyph">
          <circle className="stroke" cx="50" cy="52" r="18" strokeWidth="4" />
          <circle className="stroke" cx="50" cy="52" r="8" strokeWidth="3" />
        </g>
      );
    case "dev":
      return (
        <g className="glyph">
          <polyline className="stroke" points="45 41 33 52 45 63" strokeWidth="3.4" />
          <polyline className="stroke" points="55 41 67 52 55 63" strokeWidth="3.4" />
        </g>
      );
    // ---- macOS California place glyphs (OS Trail) ----
    case "wave": // Mavericks — a breaking swell
      return (
        <g className="glyph" fill="none">
          <path className="stroke" d="M30 62 Q44 38 58 54 Q63 60 70 56" strokeWidth="3.4" />
          <path className="stroke" d="M58 54 Q62 47 69 49" strokeWidth="3" />
          <line className="stroke" x1="31" y1="68" x2="69" y2="68" strokeWidth="2.6" strokeDasharray="3 5" />
        </g>
      );
    case "valley": // Yosemite — twin walls + a falls
      return (
        <g className="glyph" fill="none">
          <path className="stroke" d="M31 70 L42 44 L48 56 L54 44 L69 70" strokeWidth="3.2" />
          <line className="stroke" x1="50" y1="47" x2="50" y2="68" strokeWidth="2.6" strokeDasharray="2.5 4" />
        </g>
      );
    case "monolith": // El Capitan — a vertical granite face
      return (
        <g className="glyph" fill="none">
          <path className="stroke" d="M40 70 L40 41 L55 36 L61 70 Z" strokeWidth="3.2" />
          <line className="stroke" x1="48" y1="44" x2="48" y2="68" strokeWidth="2.4" />
        </g>
      );
    case "range": // Sierra — a mountain range
      return (
        <g className="glyph" fill="none">
          <path className="stroke" d="M29 68 L40 49 L48 60 L57 45 L71 68 Z" strokeWidth="3.2" />
        </g>
      );
    case "summit": // High Sierra — a snow-capped peak
      return (
        <g className="glyph" fill="none">
          <path className="stroke" d="M31 70 L50 39 L69 70 Z" strokeWidth="3.2" />
          <path className="stroke" d="M43 51 L47 46 L50 50 L54 45 L57 51" strokeWidth="2.6" />
        </g>
      );
    case "cactus": // Mojave — a saguaro
      return (
        <g className="glyph" fill="none">
          <path className="stroke" d="M50 70 L50 42" strokeWidth="3.4" />
          <path className="stroke" d="M50 56 H44 a3 3 0 0 1-3-3 V49" strokeWidth="3" />
          <path className="stroke" d="M50 52 H57 a3 3 0 0 0 3-3 V45" strokeWidth="3" />
          <line className="stroke" x1="40" y1="70" x2="60" y2="70" strokeWidth="2.6" strokeDasharray="3 5" />
        </g>
      );
    case "island": // Catalina — an island in the channel
      return (
        <g className="glyph" fill="none">
          <path className="stroke" d="M33 58 Q44 41 50 47 Q56 41 67 58" strokeWidth="3.2" />
          <path className="stroke" d="M32 64 Q40 60 48 64 T64 64" strokeWidth="2.6" />
        </g>
      );
    case "bridge": // Big Sur — Bixby arch bridge
      return (
        <g className="glyph" fill="none">
          <line className="stroke" x1="30" y1="48" x2="70" y2="48" strokeWidth="3.2" />
          <path className="stroke" d="M34 48 Q50 70 66 48" strokeWidth="3" />
          <line className="stroke" x1="40" y1="48" x2="40" y2="62" strokeWidth="2.4" />
          <line className="stroke" x1="60" y1="48" x2="60" y2="62" strokeWidth="2.4" />
        </g>
      );
    case "bay": // Monterey — nested bay swells
      return (
        <g className="glyph" fill="none">
          <path className="stroke" d="M33 46 Q41 40 49 46 T65 46" strokeWidth="2.8" />
          <path className="stroke" d="M31 55 Q41 48 50 55 T69 55" strokeWidth="3" />
          <path className="stroke" d="M33 64 Q41 58 49 64 T65 64" strokeWidth="2.8" />
        </g>
      );
    case "sun": // Ventura — coastal sunset
      return (
        <g className="glyph" fill="none">
          <circle className="stroke" cx="50" cy="54" r="9" strokeWidth="3.2" />
          <line className="stroke" x1="29" y1="66" x2="71" y2="66" strokeWidth="3" />
          <line className="stroke" x1="50" y1="36" x2="50" y2="41" strokeWidth="2.6" />
          <line className="stroke" x1="35" y1="42" x2="38" y2="45" strokeWidth="2.6" />
          <line className="stroke" x1="65" y1="42" x2="62" y2="45" strokeWidth="2.6" />
        </g>
      );
    case "grapes": // Sonoma — a cluster of grapes
      return (
        <g className="glyph">
          <path className="stroke" d="M50 38 q6 -2 9 2" strokeWidth="2.6" fill="none" />
          <circle className="stroke" cx="50" cy="46" r="4" strokeWidth="2.4" fill="none" />
          <circle className="stroke" cx="43" cy="53" r="4" strokeWidth="2.4" fill="none" />
          <circle className="stroke" cx="57" cy="53" r="4" strokeWidth="2.4" fill="none" />
          <circle className="stroke" cx="50" cy="60" r="4" strokeWidth="2.4" fill="none" />
        </g>
      );
    case "sequoia": // Sequoia — a giant conifer
      return (
        <g className="glyph" fill="none">
          <path className="stroke" d="M50 40 L42 52 H58 Z" strokeWidth="2.8" />
          <path className="stroke" d="M50 48 L39 63 H61 Z" strokeWidth="3" />
          <line className="stroke" x1="50" y1="63" x2="50" y2="70" strokeWidth="3" />
        </g>
      );
    case "lake": // Tahoe — an alpine lake with Fannette, its lone island
      return (
        <g className="glyph" fill="none">
          <ellipse className="stroke" cx="50" cy="54" rx="20" ry="11" strokeWidth="3.2" />
          <path className="stroke" d="M46 56 L50 48 L54 56 Z" strokeWidth="2.6" />
          <path className="stroke" d="M40 60 Q45 57 50 60 T60 60" strokeWidth="2.2" />
        </g>
      );
    case "strait": // Golden Gate — a suspension bridge over the strait
      return (
        <g className="glyph" fill="none">
          <line className="stroke" x1="30" y1="64" x2="70" y2="64" strokeWidth="3.2" />
          <line className="stroke" x1="42" y1="64" x2="42" y2="40" strokeWidth="3" />
          <line className="stroke" x1="58" y1="64" x2="58" y2="40" strokeWidth="3" />
          <path className="stroke" d="M30 58 L42 40 Q50 56 58 40 L70 58" strokeWidth="2.8" />
        </g>
      );
    default:
      return (
        <g className="glyph">
          <circle className="stroke" cx="50" cy="52" r="14" strokeWidth="3.5" />
        </g>
      );
  }
}

function Patch({ mark = "ring", size = 64, shape = "hex", earned = true, accent = null }) {
  const frame = FRAMES[shape] || null;
  // `accent` overrides the patch's hue (stroke + glow) by scoping --glow locally.
  return (
    <svg className={"patch-svg" + (earned ? "" : " locked")}
      width={size} height={size} viewBox="0 0 100 100"
      style={accent ? { "--glow": accent } : undefined}
      strokeLinecap="round" strokeLinejoin="round">
      {shape === "circle" || !frame
        ? <circle className={earned ? "stroke" : "dim"} cx="50" cy="50" r="46" strokeWidth="3" />
        : <path className={earned ? "stroke" : "dim"} d={frame} strokeWidth="3" />}
      <PatchGlyph mark={mark} />
    </svg>
  );
}

window.Patch = Patch;