// Indoor wayfinding map — the walk from the main entrance to the Dive meeting
// room, in the BECoach visual language (theme-aware, unlike the fixed-palette
// driving map). Two floor bands (Ground + 3rd) connected by the stairs; a gold
// route threads entrance → atrium → stairs → 3F door → right-wall aisle (past a
// small kitchen + restroom) → Dive room. Pairs with map.jsx via the toggle in
// pages.jsx. Receives `c` (language-resolved).
function IndoorRoute({ c }) {
  const x = c.meetings.indoor;
  const R = x.rooms;
  const W = 600, H = 484;

  // small numbered waypoint badge
  const Way = ({ cx, cy, n }) => (
    <g>
      <circle cx={cx} cy={cy} r="11" fill="var(--accent)" stroke="var(--on-accent)" strokeWidth="0.5" style={{ filter: "drop-shadow(0 1px 3px rgba(0,0,0,0.35))" }} />
      <text x={cx} y={cy + 0.5} textAnchor="middle" dominantBaseline="central" fontFamily="var(--font-rounded)" fontWeight="800" fontSize="12" fill="var(--on-accent)">{n}</text>
    </g>
  );
  const Label = ({ cx, cy, t, w = 700, s = 12, fill = "var(--ink-soft)" }) => (
    <text x={cx} y={cy} textAnchor="middle" dominantBaseline="central" fontFamily="var(--font-rounded)" fontWeight={w} fontSize={s} fill={fill}>{t}</text>
  );

  // route: entrance → hall → stairs → up → 3F door → aisle → Dive
  const route = "M70,444 L70,360 L270,360 L516,360 L516,150 L516,110 L106,110 L106,152";

  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="Indoor route to the Dive meeting room">
        <defs>
          <radialGradient id="diveCore" cx="50%" cy="38%" r="62%">
            <stop offset="0%" stopColor="#FFEAA7" /><stop offset="100%" stopColor="#FDCB6E" />
          </radialGradient>
          <filter id="inGlow" x="-60%" y="-60%" width="220%" height="220%">
            <feGaussianBlur stdDeviation="2.4" result="b" /><feMerge><feMergeNode in="b" /><feMergeNode in="SourceGraphic" /></feMerge>
          </filter>
        </defs>

        {/* floor bands */}
        <rect x="14" y="18" width="572" height="200" rx="16" fill="var(--surface)" stroke="var(--surface-border)" strokeWidth="1" />
        <rect x="14" y="262" width="572" height="206" rx="16" fill="var(--surface)" stroke="var(--surface-border)" strokeWidth="1" />

        {/* floor tags */}
        <g>
          <rect x="30" y="30" width="118" height="22" rx="11" fill="var(--panel)" stroke="var(--surface-border)" strokeWidth="0.75" />
          <Label cx={89} cy={42} t={x.floorThird} s={11} w={800} fill="var(--gold)" />
          <rect x="30" y="274" width="118" height="22" rx="11" fill="var(--panel)" stroke="var(--surface-border)" strokeWidth="0.75" />
          <Label cx={89} cy={286} t={x.floorGround} s={11} w={800} fill="var(--ink-faint)" />
        </g>

        {/* ===== Ground floor ===== */}
        {/* atrium hall */}
        <rect x="120" y="296" width="300" height="138" rx="12" fill="var(--surface-2)" stroke="var(--surface-border)" strokeWidth="1" />
        <Label cx={270} cy={372} t={R.hall} s={15} w={700} fill="var(--ink)" />
        {/* main entrance (door at bottom edge) */}
        <g stroke="var(--gold)" strokeWidth="2" fill="none" strokeLinecap="round">
          <path d="M52,444 L52,418 L88,418 L88,444" />
          <path d="M52,418 A36,36 0 0 1 88,444" stroke="var(--surface-border)" strokeWidth="1.4" strokeDasharray="3 3" />
        </g>
        <Label cx={70} cy={460} t={R.entrance} s={12} w={700} />
        {/* stairs (ground) */}
        <g transform="translate(498,330)" stroke="var(--ink-soft)" strokeWidth="1.6" fill="none" strokeLinejoin="round">
          <path d="M0,40 L0,28 L12,28 L12,18 L24,18 L24,8 L36,8 L36,-2" />
          <path d="M0,40 L36,40 M0,40 L0,46" strokeOpacity="0.5" />
        </g>
        <Label cx={516} cy={392} t={R.stairs} s={11.5} w={700} />

        {/* up-arrow connector hint */}
        <g>
          <path d="M548,300 L548,236" stroke="var(--gold)" strokeWidth="1.4" strokeDasharray="4 4" markerEnd="url(#up)" />
          <path d="M548,236 l-4,7 l8,0 z" fill="var(--gold)" />
          <Label cx={560} cy={268} t={x.upStairs} s={10} w={800} fill="var(--gold)" />
        </g>

        {/* ===== 3rd floor ===== */}
        {/* 3F door (top right) */}
        <g stroke="var(--gold)" strokeWidth="2" fill="none" strokeLinecap="round">
          <path d="M500,150 L536,150" />
          <path d="M518,150 A18,18 0 0 1 536,168" stroke="var(--surface-border)" strokeWidth="1.4" strokeDasharray="3 3" />
        </g>
        <Label cx={516} cy={182} t={R.door} s={11} w={700} />
        {/* aisle hint (right wall) */}
        <path d="M540,196 L540,96 L96,96" fill="none" stroke="var(--surface-border)" strokeWidth="1" strokeDasharray="2 5" opacity="0.8" />
        {/* kitchen */}
        <rect x="332" y="60" width="74" height="44" rx="8" fill="var(--surface-2)" stroke="var(--surface-border)" strokeWidth="1" />
        <g transform="translate(351,82)" stroke="var(--ink-soft)" strokeWidth="1.3" fill="none" strokeLinecap="round">
          <path d="M0,-7 L0,7 M-3,-7 L-3,-1 M3,-7 L3,-1 M-3,-1 L3,-1" /><path d="M9,-7 C5,-7 5,-1 9,-1 L9,7" />
        </g>
        <Label cx={369} cy={120} t={R.kitchen} s={11} w={700} />
        {/* restroom */}
        <rect x="226" y="60" width="74" height="44" rx="8" fill="var(--surface-2)" stroke="var(--surface-border)" strokeWidth="1" />
        <g transform="translate(255,82)" stroke="var(--ink-soft)" strokeWidth="1.3" fill="none" strokeLinecap="round">
          <circle cx="-4" cy="-5" r="2.4" /><path d="M-4,-2 L-4,5 M-7,1 L-1,1" /><circle cx="6" cy="-5" r="2.4" /><path d="M6,-2 L3,5 M6,-2 L9,5 M6,-2 L6,3" />
        </g>
        <Label cx={263} cy={120} t={R.restroom} s={11} w={700} />
        {/* Dive room (gold destination) */}
        <rect x="40" y="58" width="132" height="124" rx="12" fill="var(--accent)" fillOpacity="0.16" stroke="var(--gold)" strokeWidth="1.6" />
        <Label cx={106} cy={150} t={R.dive} s={14.5} w={800} fill="var(--gold)" />
        {/* pulse + pin at Dive */}
        <circle className="map-ping" cx="106" cy="100" r="16" fill="var(--accent)" opacity="0.3" />
        <g className="map-pin" style={{ transformOrigin: "106px 100px" }}>
          <path d="M106,84 C95,84 95,99 106,112 C117,99 117,84 106,84 Z" fill="url(#diveCore)" stroke="#fff" strokeWidth="1" filter="url(#inGlow)" />
          <circle cx="106" cy="95" r="4" fill="#3a2c08" />
        </g>

        {/* route */}
        <path d={route} fill="none" stroke="var(--accent)" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" strokeDasharray="2 7" opacity="0.95" />

        {/* waypoints */}
        <Way cx={70} cy={414} n="1" />
        <Way cx={270} cy={336} n="2" />
        <Way cx={470} cy={344} n="3" />
        <Way cx={490} cy={150} n="4" />
        <Way cx={300} cy={110} n="5" />
        <Way cx={150} cy={110} n="6" />
      </svg>

      {/* footer */}
      <div style={{ display: "flex", alignItems: "center", gap: 8, padding: "13px 16px", borderTop: "1px solid var(--surface-border)" }}>
        <span style={{ width: 8, height: 8, borderRadius: "50%", background: "var(--accent)", boxShadow: "var(--glow)", flexShrink: 0 }} />
        <span style={{ fontFamily: "var(--font-rounded)", fontSize: 13, fontWeight: 600, color: "var(--ink-soft)" }}>{x.footer}</span>
      </div>
    </div>
  );
}

window.IndoorRoute = IndoorRoute;
