// Faithful flat-vector redraw of the official Frontier RTP campus map.
// Soft green canopy, pale campus grounds, I-40 / NC HWY 54 / Park Offices Drive,
// Buildings 700/600/800/400/200 and the campus amenities. Building 800 (the
// meeting location) is lifted into gold with a pulsing pin. The illustration
// keeps the Frontier palette; the footer ties into the page theme.
function MapRoute({ c }) {
  const m = c.meetings.map;
  const W = 600, H = 436;

  // ---- palette (fixed to the Frontier campus look) ----
  const P = {
    road: "#f4f6f1", roadCase: "#e4e8de",
    ground: "#e0e3da",
    bldg: "#2c423b", bldgSide: "#1f322c", bldgLabel: "#eef2ea",
    gold: "#f1c04c", goldStroke: "#d39f2c", goldDark: "#3a2c08",
    ink: "#33433c", inkSoft: "#5c6b60",
    greens: ["#6e9165", "#83a675", "#a3c294", "#bdd4ad"],
    teal: ["#56b79a", "#74c8af"],
    logo: "#2f4a3f",
  };

  // ---- canopy blob clusters ----
  const CL = [
    [40, 34, 46, 0], [150, 26, 40, 1], [300, 20, 34, 0], [452, 26, 42, 1], [560, 30, 46, 0],
    [26, 150, 40, 0], [24, 300, 44, 1], [22, 408, 46, 0], [150, 420, 40, 1], [320, 424, 38, 0],
    [470, 418, 42, 1], [576, 404, 46, 0], [578, 150, 30, 2], [536, 168, 26, 2],
    [110, 96, 22, 1], [432, 70, 20, 0], [576, 250, 26, 1], [28, 232, 18, 2],
  ];
  const blobOffsets = [[0, 0, 1], [-0.72, -0.28, 0.82], [0.7, -0.22, 0.86], [-0.34, 0.6, 0.72], [0.5, 0.52, 0.78], [0.05, -0.7, 0.62], [-0.62, 0.34, 0.6]];
  const renderBlobs = () => CL.flatMap(([cx, cy, s, kind], ci) =>
    blobOffsets.map(([dx, dy, r], i) => {
      const shade = kind === 2 ? P.teal[i % 2] : P.greens[(i + ci) % P.greens.length];
      return <ellipse key={ci + "-" + i} cx={cx + dx * s} cy={cy + dy * s} rx={s * r} ry={s * r * 0.86} fill={shade} opacity={0.55 + ((i + ci) % 3) * 0.14} />;
    })
  );

  // ---- campus ground ----
  const ground = "M58,250 C30,244 24,214 46,202 C64,192 86,200 104,194 C140,182 150,150 196,150 C252,150 276,168 330,172 C404,178 426,150 472,160 C520,170 540,202 572,232 C592,250 588,282 558,296 C536,306 516,298 496,308 C470,322 460,350 412,352 C366,354 350,336 302,338 C256,340 244,360 196,356 C156,353 152,332 112,332 C84,332 74,344 56,334 C36,323 34,300 40,286 C45,274 70,258 58,250 Z";

  // ---- roads ----
  const i40Y = 66, nc54Y = 376;
  const parkOffices = "M206,436 C204,402 198,366 204,334 C210,302 232,278 256,260 C286,238 330,233 372,226 C416,219 456,200 492,168 C516,146 532,120 544,96";
  const drives = [
    "M256,260 C250,292 246,320 252,346",                    // spur down to lower lots
    "M372,226 C384,250 404,272 436,286 C462,297 498,300 528,298", // toward 400/200
    "M150,236 C120,220 86,222 64,238",                      // west cul-de-sac arm
    "M460,250 C480,250 500,256 516,270",                    // 200 access
  ];
  const westLoop = "M64,238 C42,232 28,244 30,262 C32,280 52,288 70,282 C86,277 92,258 84,246";

  // ---- parking stripe groups ----
  const stripes = [
    { base: [40, 214], step: [7.5, 2.4], dir: [16, 22], n: 7 },
    { base: [236, 306], step: [8, 1.5], dir: [20, 24], n: 8 },
    { base: [300, 318], step: [8, 1.4], dir: [20, 22], n: 7 },
    { base: [392, 232], step: [8, 1.2], dir: [4, 30], n: 9 },
    { base: [470, 270], step: [7, 1.4], dir: [16, 18], n: 6 },
  ];

  // ---- buildings ----
  const buildings = [
    { id: "700", d: "M112,232 L150,172 L208,186 L172,248 Z", lx: 162, ly: 210 },
    { id: "600", d: "M250,206 L278,160 L324,170 L298,216 Z", lx: 288, ly: 188 },
    { id: "800", gold: true, d: "M312,302 L328,250 L380,258 L366,310 Z", lx: 348, ly: 282 },
    { id: "400", d: "M404,342 L414,296 L464,303 L455,348 Z", lx: 434, ly: 322 },
    { id: "200", d: "M538,304 L543,258 L584,262 L580,308 Z", lx: 561, ly: 284 },
  ];
  const sideFor = (d) => d.replace("Z", "").trim(); // not used; kept for clarity

  // ---- amenities (simple line glyphs + caps labels) ----
  const Amen = ({ x, y, label, children }) => (
    <g>
      <g transform={`translate(${x},${y})`} stroke={P.ink} strokeWidth="1.3" fill="none" strokeLinecap="round" strokeLinejoin="round">{children}</g>
      <text x={x} y={y + 16} textAnchor="middle" fontFamily="var(--font-rounded)" fontWeight="700" fontSize="7" letterSpacing="0.4" fill={P.ink}>{label}</text>
    </g>
  );

  return (
    <div style={{ position: "relative", width: "100%", borderRadius: "var(--radius-xl)", overflow: "hidden", border: "1px solid var(--surface-border)", background: "var(--panel)" }}>
      <svg viewBox={`0 0 ${W} ${H}`} width="100%" style={{ display: "block" }} role="img" aria-label="Frontier RTP campus map — Building 800">
        <defs>
          <linearGradient id="campusBg" x1="0" y1="0" x2="0.4" y2="1">
            <stop offset="0%" stopColor="#aac79d" /><stop offset="100%" stopColor="#92b085" />
          </linearGradient>
          <radialGradient id="cmPin" cx="50%" cy="40%" r="60%">
            <stop offset="0%" stopColor="#FFEAA7" /><stop offset="100%" stopColor="#F1C04C" />
          </radialGradient>
          <filter id="cmGlow" x="-60%" y="-60%" width="220%" height="220%">
            <feGaussianBlur stdDeviation="3" result="b" /><feMerge><feMergeNode in="b" /><feMergeNode in="SourceGraphic" /></feMerge>
          </filter>
        </defs>

        {/* background + canopy */}
        <rect width={W} height={H} fill="url(#campusBg)" />
        {renderBlobs()}

        {/* campus grounds */}
        <path d={ground} fill={P.ground} />

        {/* highways (full width) */}
        <rect x="0" y={i40Y - 8} width={W} height="16" fill={P.road} />
        <rect x="0" y={nc54Y - 7} width={W} height="14" fill={P.road} />

        {/* park offices drive + internal drives */}
        <path d={parkOffices} fill="none" stroke={P.roadCase} strokeWidth="16" strokeLinecap="round" />
        <path d={parkOffices} fill="none" stroke={P.road} strokeWidth="13" strokeLinecap="round" />
        {drives.map((d, i) => <path key={i} d={d} fill="none" stroke={P.road} strokeWidth="8.5" strokeLinecap="round" />)}
        <path d={westLoop} fill="none" stroke={P.road} strokeWidth="9" strokeLinecap="round" />

        {/* parking striping */}
        {stripes.map((s, gi) => (
          <g key={gi} stroke={P.roadCase} strokeWidth="1.6" opacity="0.9">
            {Array.from({ length: s.n }).map((_, i) => {
              const x = s.base[0] + s.step[0] * i, y = s.base[1] + s.step[1] * i;
              return <line key={i} x1={x} y1={y} x2={x + s.dir[0]} y2={y + s.dir[1]} />;
            })}
          </g>
        ))}

        {/* buildings (with subtle extrude) */}
        {buildings.map((b) => (
          <g key={b.id}>
            <path d={b.d} transform="translate(0,4)" fill={b.gold ? P.goldStroke : P.bldgSide} opacity="0.9" />
            <path d={b.d} fill={b.gold ? P.gold : P.bldg} stroke={b.gold ? P.goldStroke : "none"} strokeWidth="1" />
            <text x={b.lx} y={b.ly - 4} textAnchor="middle" fontFamily="var(--font-rounded)" fontWeight="600" fontSize="5.6" letterSpacing="0.6" fill={b.gold ? P.goldDark : P.bldgLabel}>BUILDING</text>
            <text x={b.lx} y={b.ly + 6} textAnchor="middle" fontFamily="var(--font-rounded)" fontWeight="800" fontSize="12" fill={b.gold ? P.goldDark : P.bldgLabel}>{b.id}</text>
          </g>
        ))}

        {/* amenities */}
        <Amen x={108} y={314} label="DOG PARK">
          <circle cx="-3" cy="0" r="3" /><path d="M0,0 l5,-1 l1,4 M5,-1 l2,-3" /><path d="M-5,3 l0,3 M2,4 l0,3" />
        </Amen>
        <Amen x={236} y={196} label="PICNIC AREA">
          <path d="M-7,5 L-4,-3 L4,-3 L7,5 M-5,1 L5,1 M-5,5 l-1,3 M5,5 l1,3 M-4,-3 l-1,-2 M4,-3 l1,-2" />
        </Amen>
        <Amen x={196} y={228} label="GAMES">
          <rect x="-6" y="-3" width="12" height="7" rx="3" /><path d="M-3,0 h3 M-1.5,-1.5 v3 M3,0 h0.1 M4.5,1.5 h0.1" />
        </Amen>
        <Amen x={200} y={258} label="BENCHES">
          <path d="M-7,-1 L7,-1 M-7,1.5 L7,1.5 M-5,1.5 l-1,4 M5,1.5 l1,4 M-7,-1 l0,-2 M7,-1 l0,-2" />
        </Amen>
        <Amen x={248} y={264} label="HAMMOCKS">
          <path d="M-7,-3 v8 M7,-3 v8 M-7,0 C-3,7 3,7 7,0" />
        </Amen>
        <Amen x={290} y={262} label="WORD WALL">
          <rect x="-7" y="-4" width="14" height="9" rx="1.4" /><path d="M-4,-1 h4 M-4,1.5 h6 M2.5,-1 h1.5" />
        </Amen>

        {/* Boxyard RTP — established venue (white wordmark + red diamond on teal tile) */}
        <g transform="translate(158,300)">
          <rect x="-40" y="-17" width="80" height="34" rx="6" fill="#173a40" />
          <text x="-7" y="-1" textAnchor="middle" dominantBaseline="middle" fontFamily="var(--font-rounded)" fontWeight="800" fontSize="12.5" fill="#fff">Boxyard</text>
          <rect x="22" y="-12" width="7" height="7" rx="1" transform="rotate(45 25.5 -8.5)" fill="#df512c" />
          <g transform="translate(13,6)">
            <rect x="0" y="0" width="18" height="9" rx="1.8" fill="none" stroke="#b9c6c1" strokeWidth="0.8" />
            <text x="9" y="6.8" textAnchor="middle" fontFamily="var(--font-rounded)" fontWeight="800" fontSize="5.6" letterSpacing="0.5" fill="#b9c6c1">RTP</text>
          </g>
        </g>

        {/* teal foliage cluster near 200 */}
        {[[523, 162, 13], [538, 152, 11], [548, 168, 12], [532, 174, 10]].map(([cx, cy, r], i) => (
          <circle key={i} cx={cx} cy={cy} r={r} fill={P.teal[i % 2]} opacity="0.92" />
        ))}

        {/* road labels */}
        <text x={293} y={i40Y + 3} textAnchor="middle" fontFamily="var(--font-rounded)" fontWeight="800" fontSize="9" letterSpacing="2" fill={P.ink}>I-40</text>
        <text x={293} y={nc54Y + 3} textAnchor="middle" fontFamily="var(--font-rounded)" fontWeight="800" fontSize="9" letterSpacing="1.6" fill={P.ink}>NC HWY 54</text>
        <text x={200} y={322} textAnchor="middle" fontFamily="var(--font-rounded)" fontWeight="700" fontSize="7" letterSpacing="1.4" fill={P.inkSoft} transform="rotate(78 200 322)">PARK OFFICES DRIVE</text>
        <text x={452} y={196} textAnchor="middle" fontFamily="var(--font-rounded)" fontWeight="700" fontSize="7" letterSpacing="1.4" fill={P.inkSoft} transform="rotate(-52 452 196)">PARK OFFICES DRIVE</text>

        {/* Building 800 destination highlight: pulse + pin + chip (NE of 800, clear of 600) */}
        <circle className="map-ping" cx={348} cy={282} r="20" fill={P.gold} opacity="0.3" />
        <g className="map-pin" style={{ transformOrigin: "352px 240px" }}>
          <path d="M352,224 C341,224 341,239 352,252 C363,239 363,224 352,224 Z" fill="url(#cmPin)" stroke="#fff" strokeWidth="1" filter="url(#cmGlow)" />
          <circle cx="352" cy="235" r="4" fill={P.goldDark} />
        </g>
        {(() => {
          const txt = m.meetHere, cw = txt.length * 8 + 24;
          const tx = Math.min(366, W - cw - 8);
          return (
            <g transform={`translate(${tx},228)`}>
              <rect x="0" y="0" width={cw} height="22" rx="11" fill="#fff" stroke={P.goldStroke} strokeWidth="1.2" />
              <circle cx="13" cy="11" r="3.4" fill={P.gold} stroke={P.goldStroke} strokeWidth="0.8" />
              <text x="23" y="15" fontFamily="var(--font-rounded)" fontWeight="800" fontSize="10.5" fill={P.bldg}>{txt}</text>
            </g>
          );
        })()}

        {/* FRONTIER RTP logo */}
        <text x={584} y={404} textAnchor="end" fontFamily="var(--font-rounded)" fontWeight="800" fontSize="26" letterSpacing="1" fill={P.logo}>FRONTIER</text>
        <g transform="translate(556,410)">
          <rect x="0" y="0" width="28" height="15" rx="3" fill="none" stroke={P.logo} strokeWidth="1.4" />
          <text x="14" y="11" textAnchor="middle" fontFamily="var(--font-rounded)" fontWeight="800" fontSize="9" letterSpacing="1" fill={P.logo}>RTP</text>
        </g>
      </svg>

      {/* footer */}
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12, padding: "13px 16px", borderTop: "1px solid var(--surface-border)", flexWrap: "wrap" }}>
        <span style={{ display: "inline-flex", alignItems: "center", gap: 8, fontFamily: "var(--font-rounded)", fontSize: 13, fontWeight: 600, color: "var(--ink-soft)" }}>
          <span style={{ width: 8, height: 8, borderRadius: "50%", background: "var(--accent)", boxShadow: "var(--glow)" }} />
          {c.meetings.where}
        </span>
        <a href="https://www.google.com/maps/search/?api=1&query=The+Frontier+RTP+800+Park+Offices+Drive+Durham+NC" target="_blank" rel="noopener noreferrer"
           style={{ display: "inline-flex", alignItems: "center", gap: 6, fontFamily: "var(--font-rounded)", fontSize: 13, fontWeight: 700, color: "var(--gold)", textDecoration: "none" }}>
          {m.cta}
          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2"><path d="M7 17L17 7M9 7h8v8" /></svg>
        </a>
      </div>
    </div>
  );
}

window.MapRoute = MapRoute;
