// Indoor wayfinding map — the walk from the east drop-off to the Dive meeting
// room, in the BECoach visual language (theme-aware). North-up floor plans.
//   Ground floor (1F): east roundabout → double AUTO GLASS DOORS (animated) →
//     Free Workspace (square, west wall; Berlin Wall piece opposite to the east)
//     → push door on the north wall → stairs (north wall). Badge door (north
//     wall) leads only outside.
//   3rd floor (3F): door → right-wall aisle past 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 = 568;

  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>
  );

  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>

        {/* ===================== compass (north-up) ===================== */}
        <g transform="translate(560,46)">
          <circle r="17" fill="var(--panel)" stroke="var(--surface-border)" strokeWidth="1" />
          <path d="M0,-12 L4,2 L0,-1 L-4,2 Z" fill="var(--accent)" />
          <text x="0" y="-9" textAnchor="middle" fontFamily="var(--font-rounded)" fontWeight="800" fontSize="8" fill="var(--ink)" dy="-3">N</text>
          <text x="0" y="13" textAnchor="middle" fontFamily="var(--font-rounded)" fontSize="6.5" fill="var(--ink-faint)">S</text>
          <text x="13" y="0" textAnchor="middle" dominantBaseline="central" fontFamily="var(--font-rounded)" fontSize="6.5" fill="var(--ink-faint)">E</text>
          <text x="-13" y="0" textAnchor="middle" dominantBaseline="central" fontFamily="var(--font-rounded)" fontSize="6.5" fill="var(--ink-faint)">W</text>
        </g>

        {/* ===================== 3rd floor band ===================== */}
        <rect x="14" y="18" width="572" height="210" rx="16" fill="var(--surface)" stroke="var(--surface-border)" strokeWidth="1" />
        <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)" />

        {/* 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="58" width="74" height="44" rx="8" fill="var(--surface-2)" stroke="var(--surface-border)" strokeWidth="1" />
        <g transform="translate(351,80)" 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={118} t={R.kitchen} s={11} w={700} />
        {/* restroom */}
        <rect x="226" y="58" width="74" height="44" rx="8" fill="var(--surface-2)" stroke="var(--surface-border)" strokeWidth="1" />
        <g transform="translate(255,80)" 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={118} t={R.restroom} s={11} w={700} />
        {/* 3F door (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} />
        {/* Dive room (gold destination) */}
        <rect x="40" y="56" width="132" height="118" rx="12" fill="var(--accent)" fillOpacity="0.16" stroke="var(--gold)" strokeWidth="1.6" />
        <Label cx={106} cy={146} t={R.dive} s={14.5} w={800} fill="var(--gold)" />
        <circle className="map-ping" cx="106" cy="98" r="16" fill="var(--accent)" opacity="0.3" />
        <g className="map-pin" style={{ transformOrigin: "106px 98px" }}>
          <path d="M106,82 C95,82 95,97 106,110 C117,97 117,82 106,82 Z" fill="url(#diveCore)" stroke="#fff" strokeWidth="1" filter="url(#inGlow)" />
          <circle cx="106" cy="93" r="4" fill="#3a2c08" />
        </g>
        {/* 3F route */}
        <path d="M490,150 L490,108 L106,108 L106,150" fill="none" stroke="var(--accent)" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" strokeDasharray="2 7" opacity="0.95" />
        <Way cx={490} cy={150} n="4" />
        <Way cx={300} cy={108} n="5" />
        <Way cx={150} cy={148} n="6" />

        {/* ===== stairs-up connector (1F stairs → 3F door) ===== */}
        <path d="M398,316 L398,250 L490,250 L490,180" fill="none" stroke="var(--gold)" strokeWidth="1.5" strokeDasharray="4 4" />
        <path d="M490,180 l-4,7 l8,0 z" fill="var(--gold)" />
        <Label cx={432} cy={240} t={"↑ " + x.upStairs} s={10} w={800} fill="var(--gold)" />

        {/* ===================== Ground floor band ===================== */}
        <rect x="14" y="300" width="572" height="252" rx="16" fill="var(--surface)" stroke="var(--surface-border)" strokeWidth="1" />
        <rect x="30" y="312" width="118" height="22" rx="11" fill="var(--panel)" stroke="var(--surface-border)" strokeWidth="0.75" />
        <Label cx={89} cy={324} t={x.floorGround} s={11} w={800} fill="var(--ink-faint)" />

        {/* building east wall (interior ends at x=470; strip to the east = outside) */}
        <line x1="470" y1="300" x2="470" y2="552" stroke="var(--surface-border)" strokeWidth="2" />
        <Label cx={524} cy={330} t={x.outside} s={10} w={700} fill="var(--ink-faint)" />

        {/* free workspace (square room, west wall) */}
        <rect x="40" y="372" width="160" height="150" rx="10" fill="var(--surface-2)" stroke="var(--surface-border)" strokeWidth="1" />
        <Label cx={120} cy={503} t={R.workspace} s={13} w={700} fill="var(--ink)" />

        {/* Berlin Wall (opposite the workspace, to the east) */}
        <g>
          <rect x="262" y="424" width="84" height="26" rx="2" fill="#8d9196" stroke="#6f7378" strokeWidth="1" />
          <line x1="290" y1="424" x2="290" y2="450" stroke="#6f7378" strokeWidth="0.8" />
          <line x1="318" y1="424" x2="318" y2="450" stroke="#6f7378" strokeWidth="0.8" />
          <circle cx="276" cy="437" r="3" fill="#FF6B6B" opacity="0.85" />
          <path d="M300,432 q6,-4 11,3" stroke="#4ECDC4" strokeWidth="2" fill="none" strokeLinecap="round" />
          <circle cx="333" cy="440" r="2.4" fill="#FDCB6E" opacity="0.9" />
        </g>
        <Label cx={304} cy={464} t={R.berlin} s={10.5} w={700} />

        {/* staircase (north wall) */}
        <g transform="translate(352,310)" 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" strokeOpacity="0.5" />
        </g>
        <Label cx={370} cy={362} t={R.stairs} s={11.5} w={700} />

        {/* normal push door (workspace ↔ stairwell) */}
        <g stroke="var(--ink-soft)" strokeWidth="1.6" fill="none" strokeLinecap="round">
          <path d="M286,360 L286,338" />
          <path d="M286,338 A22,22 0 0 1 308,360" strokeWidth="1.2" strokeDasharray="3 3" />
        </g>
        <Label cx={284} cy={374} t={R.push} s={10.5} w={700} />

        {/* badge-controlled door (north wall, stairs ↔ outside) */}
        <g stroke="var(--circle-talent, #88D8F4)" strokeWidth="2" fill="none" strokeLinecap="round">
          <path d="M430,300 L430,322" />
        </g>
        <rect x="436" y="304" width="13" height="9" rx="2" fill="none" stroke="#88D8F4" strokeWidth="1.2" />
        <circle cx="446" cy="308.5" r="1.3" fill="#88D8F4" />
        <Label cx={444} cy={332} t={R.badge} s={10} w={700} fill="#88D8F4" />

        {/* double AUTO GLASS DOORS (east wall) — slide apart + together on a loop */}
        <g>
          {/* door frame opening */}
          <rect x="464" y="402" width="12" height="66" fill="var(--panel)" stroke="var(--surface-border)" strokeWidth="0.75" />
          {/* top leaf slides up (north) */}
          <rect x="465" y="403" width="10" height="31" rx="1.5" fill="#88D8F4" fillOpacity="0.5" stroke="#bfe8f7" strokeWidth="1">
            <animateTransform attributeName="transform" type="translate" values="0 0; 0 -27; 0 -27; 0 0; 0 0" keyTimes="0; 0.22; 0.5; 0.72; 1" dur="4.6s" repeatCount="indefinite" />
          </rect>
          {/* bottom leaf slides down (south) */}
          <rect x="465" y="436" width="10" height="31" rx="1.5" fill="#88D8F4" fillOpacity="0.5" stroke="#bfe8f7" strokeWidth="1">
            <animateTransform attributeName="transform" type="translate" values="0 0; 0 27; 0 27; 0 0; 0 0" keyTimes="0; 0.22; 0.5; 0.72; 1" dur="4.6s" repeatCount="indefinite" />
          </rect>
        </g>
        <Label cx={446} cy={483} t={R.glass} s={10} w={700} fill="#88D8F4" />

        {/* roundabout drop-off (outside, east) */}
        <g>
          <ellipse cx="524" cy="430" rx="34" ry="25" fill="none" stroke="var(--ink-faint)" strokeWidth="1.4" strokeDasharray="5 5" />
          <ellipse cx="524" cy="430" rx="13" ry="9" fill="var(--panel)" stroke="var(--surface-border)" strokeWidth="1" />
          {/* little car */}
          <g transform="translate(524,406)" stroke="var(--ink-soft)" strokeWidth="1.3" fill="var(--surface-2)" strokeLinejoin="round">
            <path d="M-9,3 L-7,-3 L7,-3 L9,3 Z" /><circle cx="-5" cy="3" r="2" fill="var(--ink-soft)" stroke="none" /><circle cx="5" cy="3" r="2" fill="var(--ink-soft)" stroke="none" />
          </g>
          <Label cx={524} cy={470} t={R.roundabout} s={10} w={700} fill="var(--ink-faint)" />
        </g>

        {/* 1F route: roundabout → glass doors → free workspace → push door → stairs */}
        <path d="M524,430 L476,430 L476,472 L210,472 L120,472 L120,355 L286,355 L400,340"
              fill="none" stroke="var(--accent)" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" strokeDasharray="2 7" opacity="0.95" />
        <Way cx={486} cy={430} n="1" />
        <Way cx={120} cy={430} n="2" />
        <Way cx={400} cy={340} n="3" />
      </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;