/* ===================================================================
   maps.jsx — four distinct hand-inked battle maps, one per location.
   Each draws on the same 24×16 grid. Exposed as window.MapArt.
   (GC = grid cell px; named to avoid colliding with map.jsx's CELL)
   =================================================================== */
const GC = 46;

/* shared defs: paper grit + rough-ink displacement */
function MapDefs({ idp }) {
  return (
    <defs>
      <filter id={`rough-${idp}`}><feTurbulence baseFrequency="0.04" numOctaves="2" result="n" />
        <feDisplacementMap in="SourceGraphic" in2="n" scale="6" /></filter>
      <pattern id={`grit-${idp}`} width="9" height="9" patternUnits="userSpaceOnUse">
        <circle cx="2" cy="3" r=".6" fill="#000" opacity=".18" />
        <circle cx="6" cy="7" r=".5" fill="#000" opacity=".13" />
      </pattern>
    </defs>
  );
}

/* ============================ 1 · EMBERHOLD CAVERNS ============================ */
function EmberholdCaverns({ W, H }) {
  const w = W*GC, h = H*GC;
  const room = (x,y,rw,rh,rx=26) => <rect x={x*GC} y={y*GC} width={rw*GC} height={rh*GC} rx={rx} ry={rx}
    fill="#d8c39a" stroke="#2a2017" strokeWidth="6" strokeLinejoin="round" />;
  return (
    <svg className="dungeon" width={w} height={h} viewBox={`0 0 ${w} ${h}`}>
      <MapDefs idp="ember" />
      <rect width={w} height={h} fill="#1b140d" />
      {/* carved corridors */}
      <g filter="url(#rough-ember)" stroke="#2a2017" strokeWidth="6" fill="#d8c39a" strokeLinejoin="round">
        <rect x={6.4*GC} y={10.2*GC} width={3.2*GC} height={1.9*GC} />
        <rect x={8.2*GC} y={6.2*GC} width={1.8*GC} height={5*GC} />
        <rect x={15.4*GC} y={3.1*GC} width={2.6*GC} height={1.8*GC} />
      </g>
      <g filter="url(#rough-ember)">
        {room(1.4,8.6,6.2,6.0)}{room(8.2,3.4,8.4,7.2,40)}{room(16.4,0.7,6.8,6.0)}
      </g>
      <rect width={w} height={h} fill="url(#grit-ember)" style={{mixBlendMode:'multiply'}} />
      {/* campfire in entry */}
      <g transform={`translate(${4.4*GC} ${11.5*GC})`}>
        <circle r="14" fill="#e0531f" opacity=".22" />
        <path d="M0 -10 q 7 6 0 14 q -7 -6 0 -14" fill="#e8a13a" /><path d="M0 -5 q 4 4 0 9 q -4 -4 0 -9" fill="#f6d97a" />
      </g>
      {/* stalagmite columns */}
      {[[9.4,5.0],[15.2,5.0],[9.4,9.4]].map(([cx,cy],i)=>(
        <g key={i}><circle cx={cx*GC} cy={cy*GC} r="11" fill="#bda478" stroke="#2a2017" strokeWidth="3" />
        <circle cx={cx*GC} cy={cy*GC} r="4" fill="#2a2017" opacity=".3" /></g>
      ))}
      {/* treasure + stairs in boss hall */}
      <g transform={`translate(${21.4*GC} ${2.0*GC})`}>
        <rect x="-13" y="-9" width="26" height="18" rx="3" fill="#8a5a2a" stroke="#2a2017" strokeWidth="3" />
        <rect x="-13" y="-9" width="26" height="6" rx="3" fill="#6b4220" stroke="#2a2017" strokeWidth="3" />
        <rect x="-3" y="-4" width="6" height="8" fill="#e8c372" stroke="#2a2017" strokeWidth="1.5" />
      </g>
      <g transform={`translate(${18.0*GC} ${1.4*GC})`} stroke="#2a2017" strokeWidth="2.5" opacity=".7">
        {[0,1,2,3].map(i=> <line key={i} x1="-16" y1={i*6-9} x2="16" y2={i*6-9} />)}
      </g>
      {[[7.6,10.7],[8.0,11.4],[16.0,3.7]].map(([cx,cy],i)=>(
        <g key={i} fill="#a88c5f" stroke="#2a2017" strokeWidth="1.5"><circle cx={cx*GC} cy={cy*GC} r="4" /><circle cx={cx*GC+7} cy={cy*GC+4} r="3" /></g>
      ))}
    </svg>
  );
}

/* ============================ 2 · THE DROWNED CHAPEL ============================ */
function DrownedChapel({ W, H }) {
  const w = W*GC, h = H*GC;
  return (
    <svg className="dungeon" width={w} height={h} viewBox={`0 0 ${w} ${h}`}>
      <MapDefs idp="chapel" />
      <rect width={w} height={h} fill="#16242b" />
      {/* flagstone nave running left→right */}
      <g filter="url(#rough-chapel)">
        <rect x={3*GC} y={3.5*GC} width={18*GC} height={9*GC} rx="8" fill="#9aa7a3" stroke="#20302f" strokeWidth="6" />
        {/* apse (rounded altar end) */}
        <path d={`M ${21*GC} ${4.5*GC} a ${3*GC} ${3.5*GC} 0 0 1 0 ${7*GC} Z`} fill="#aeb9b3" stroke="#20302f" strokeWidth="6" />
      </g>
      {/* flagstone seams */}
      <g stroke="#20302f" strokeWidth="1.2" opacity=".4">
        {[4,5,6,7,8,9,10,11].map(r=> <line key={'h'+r} x1={3*GC} y1={r*GC} x2={21*GC} y2={r*GC} />)}
        {[4,6,8,10,12,14,16,18,20].map(c=> <line key={'v'+c} x1={c*GC} y1={3.5*GC} x2={c*GC} y2={12.5*GC} />)}
      </g>
      {/* flood water pooling at the near (low) end + center aisle */}
      <g opacity=".62">
        <path d={`M ${3.4*GC} ${10.2*GC} h ${17*GC} v ${2*GC} a 8 8 0 0 1 -8 8 H ${3.4*GC} Z`} fill="#3d7d93" />
        <ellipse cx={9*GC} cy={8*GC} rx={2.2*GC} ry={1.1*GC} fill="#3d7d93" />
      </g>
      {/* water ripples */}
      <g stroke="#cfeaf0" strokeWidth="1.4" fill="none" opacity=".5">
        {[0,1,2].map(i=> <path key={i} d={`M ${(6+i*3)*GC} ${11.4*GC} q ${0.5*GC} ${-0.3*GC} ${GC} 0 q ${0.5*GC} ${0.3*GC} ${GC} 0`} />)}
      </g>
      {/* rows of broken pews */}
      {[5.2,6.6,8.0].map((ry,ri)=> [4.4,6.0,14.0,15.6].map((rx,ci)=>(
        <rect key={ri+'-'+ci} x={rx*GC} y={ry*GC} width={1.3*GC} height={0.5*GC} rx="3"
          fill="#6b4a2c" stroke="#2c1c10" strokeWidth="2" transform={ci%2?`rotate(${ri-1} ${rx*GC} ${ry*GC})`:''} />
      )))}
      {/* shattered columns flanking the nave */}
      {[[4,3.8],[8,3.8],[12,3.8],[16,3.8],[4,12.2],[8,12.2],[12,12.2],[16,12.2]].map(([cx,cy],i)=>(
        <g key={i}><circle cx={cx*GC} cy={cy*GC} r="9" fill="#c3ccc6" stroke="#20302f" strokeWidth="3" />
        <circle cx={cx*GC} cy={cy*GC} r="3.5" fill="#20302f" opacity=".35" /></g>
      ))}
      {/* altar + fallen cross */}
      <g transform={`translate(${20.4*GC} ${8*GC})`}>
        <rect x="-15" y="-10" width="30" height="20" rx="3" fill="#d8ddd6" stroke="#20302f" strokeWidth="3" />
        <rect x="-3" y="-22" width="6" height="20" fill="#b8a06a" stroke="#20302f" strokeWidth="2" />
        <rect x="-9" y="-17" width="18" height="5" fill="#b8a06a" stroke="#20302f" strokeWidth="2" />
      </g>
      {/* tall stained-glass window glow on back wall */}
      {[6,10,14,18].map((cx,i)=>(
        <rect key={i} x={cx*GC-6} y={3.5*GC+4} width="12" height="20" rx="6" fill="#6a8fc4" opacity=".5" stroke="#20302f" strokeWidth="2" />
      ))}
      <rect width={w} height={h} fill="url(#grit-chapel)" style={{mixBlendMode:'multiply'}} />
    </svg>
  );
}

/* ============================ 3 · SABLEWOOD CROSSING ============================ */
function SablewoodCrossing({ W, H }) {
  const w = W*GC, h = H*GC;
  const tree = (cx, cy, r, dark) => (
    <g key={`${cx}-${cy}`}>
      <ellipse cx={cx*GC+3} cy={cy*GC+5} rx={r*1.05} ry={r*0.5} fill="#0d1f12" opacity=".35" />
      <rect x={cx*GC-3} y={cy*GC} width="6" height={r*0.7} fill="#4a3322" />
      <circle cx={cx*GC} cy={cy*GC} r={r} fill={dark?'#27502f':'#36703f'} stroke="#16331c" strokeWidth="3" />
      <circle cx={cx*GC-r*0.4} cy={cy*GC-r*0.3} r={r*0.5} fill={dark?'#2e5c36':'#3f7d48'} />
    </g>
  );
  return (
    <svg className="dungeon" width={w} height={h} viewBox={`0 0 ${w} ${h}`}>
      <MapDefs idp="sable" />
      {/* meadow floor */}
      <rect width={w} height={h} fill="#5f8a47" />
      <rect width={w} height={h} fill="#6f9a52" filter="url(#rough-sable)" opacity=".5" />
      {/* grass tufts */}
      <g stroke="#4a7338" strokeWidth="2" opacity=".5">
        {Array.from({length:90}).map((_,i)=>{const x=(i*53%w),y=((i*97)%h);return <path key={i} d={`M ${x} ${y} l 0 -6 M ${x-3} ${y} l 1 -5 M ${x+3} ${y} l -1 -5`} />;})}
      </g>
      {/* river crossing diagonally */}
      <g filter="url(#rough-sable)">
        <path d={`M -20 ${5*GC} Q ${10*GC} ${8.5*GC} ${w+20} ${6.5*GC} L ${w+20} ${10.5*GC} Q ${10*GC} ${12.5*GC} -20 ${9*GC} Z`} fill="#2f6f93" />
        <path d={`M -20 ${5.6*GC} Q ${10*GC} ${9*GC} ${w+20} ${7*GC}`} stroke="#7fb4cc" strokeWidth="3" fill="none" opacity=".6" />
        <path d={`M -20 ${8.4*GC} Q ${10*GC} ${11.8*GC} ${w+20} ${9.8*GC}`} stroke="#7fb4cc" strokeWidth="3" fill="none" opacity=".5" />
      </g>
      {/* dirt road north-south */}
      <g filter="url(#rough-sable)">
        <path d={`M ${10.2*GC} 0 L ${11.4*GC} 0 L ${12.0*GC} ${h} L ${10.8*GC} ${h} Z`} fill="#a9844f" />
        <path d={`M ${10.2*GC} 0 L ${11.4*GC} 0 L ${12.0*GC} ${h} L ${10.8*GC} ${h} Z`} fill="url(#grit-sable)" />
      </g>
      {/* wooden plank bridge over the river */}
      <g transform={`translate(${11*GC} ${8.4*GC})`}>
        <rect x="-30" y={-2.6*GC} width="60" height={5.2*GC} rx="4" fill="#7a5733" stroke="#3c2817" strokeWidth="4" />
        {Array.from({length:9}).map((_,i)=> <line key={i} x1="-30" y1={-2.6*GC+i*13} x2="30" y2={-2.6*GC+i*13} stroke="#3c2817" strokeWidth="2" opacity=".7" />)}
        <rect x="-34" y={-2.6*GC} width="5" height={5.2*GC} fill="#5e4226" /><rect x="29" y={-2.6*GC} width="5" height={5.2*GC} fill="#5e4226" />
      </g>
      {/* sable woods — dense dark trees clustering at the corners */}
      {[[1.4,1.6],[3,1],[1,3.4],[2.4,3.6],[4.2,2.2],[0.9,5],[3.6,5.2],
        [22.6,1.4],[21,1.1],[23,3.2],[20.6,3.6],[22.4,5.2],[19.4,2],
        [1.2,13.6],[2.8,14.4],[0.8,11.6],[3.6,12.4],[1.8,15.2],
        [22.8,13.2],[21,14.2],[23.2,11.4],[20.4,12.8],[22,15.2]].map(([cx,cy])=>tree(cx,cy,18,true))}
      {/* a few lighter scattered trees mid-field */}
      {[[6.5,2.4],[15.5,13.2],[7,13.6],[16,2.6]].map(([cx,cy])=>tree(cx,cy,16,false))}
      {/* signpost at the crossing */}
      <g transform={`translate(${13.4*GC} ${6.4*GC})`}>
        <rect x="-2" y="-2" width="4" height="34" fill="#5e4226" />
        <rect x="0" y="2" width="26" height="9" rx="2" fill="#8a6a3c" stroke="#3c2817" strokeWidth="2" />
      </g>
      <rect width={w} height={h} fill="url(#grit-sable)" style={{mixBlendMode:'multiply'}} opacity=".4" />
    </svg>
  );
}

/* ============================ 4 · THE GILDED STAG (TAVERN) ============================ */
function GildedStag({ W, H }) {
  const w = W*GC, h = H*GC;
  const table = (cx, cy) => (
    <g key={`${cx}-${cy}`}>
      {[[-0.7,-0.7],[0.7,-0.7],[-0.7,0.7],[0.7,0.7]].map(([dx,dy],i)=>
        <circle key={i} cx={(cx+dx)*GC} cy={(cy+dy)*GC} r="8" fill="#5e4226" stroke="#2c1c10" strokeWidth="2" />)}
      <circle cx={cx*GC} cy={cy*GC} r="20" fill="#8a6238" stroke="#3c2817" strokeWidth="4" />
      <circle cx={cx*GC} cy={cy*GC} r="20" fill="#a87c45" opacity=".4" />
    </g>
  );
  return (
    <svg className="dungeon" width={w} height={h} viewBox={`0 0 ${w} ${h}`}>
      <MapDefs idp="stag" />
      {/* timber walls */}
      <rect width={w} height={h} fill="#3a2817" />
      {/* plank floor */}
      <rect x={GC} y={GC} width={(W-2)*GC} height={(H-2)*GC} rx="6" fill="#9c6f3e" stroke="#2c1c10" strokeWidth="6" />
      <g stroke="#7a5530" strokeWidth="2" opacity=".55">
        {Array.from({length:H-2}).map((_,i)=> <line key={i} x1={GC} y1={(i+2)*GC} x2={(W-1)*GC} y2={(i+2)*GC} />)}
        {[5,11,17].map(c=> <line key={c} x1={c*GC} y1={GC} x2={c*GC} y2={(H-1)*GC} strokeDasharray="22 24" />)}
      </g>
      {/* warm hearth glow rug centre */}
      <ellipse cx={11.5*GC} cy={8*GC} rx={4.2*GC} ry={2.6*GC} fill="#7d2330" opacity=".22" />
      <ellipse cx={11.5*GC} cy={8*GC} rx={3.4*GC} ry={2*GC} fill="none" stroke="#b8863f" strokeWidth="3" opacity=".5" />
      {/* L-shaped bar counter, top-right */}
      <g filter="url(#rough-stag)">
        <rect x={15.5*GC} y={1.6*GC} width={6.4*GC} height={1.5*GC} rx="5" fill="#6b4423" stroke="#2c1c10" strokeWidth="5" />
        <rect x={20.4*GC} y={1.6*GC} width={1.5*GC} height={6*GC} rx="5" fill="#6b4423" stroke="#2c1c10" strokeWidth="5" />
        <rect x={15.6*GC} y={1.75*GC} width={6.0*GC} height={0.5*GC} fill="#a87c45" opacity=".6" />
      </g>
      {/* kegs behind the bar */}
      {[[21.2,4],[21.2,5.2],[21.2,6.4]].map(([cx,cy],i)=>(
        <g key={i}><ellipse cx={cx*GC} cy={cy*GC} rx="11" ry="14" fill="#7a5733" stroke="#2c1c10" strokeWidth="3" />
        <line x1={cx*GC-11} y1={cy*GC} x2={cx*GC+11} y2={cy*GC} stroke="#2c1c10" strokeWidth="2" /></g>
      ))}
      {/* great stone hearth on left wall with fire */}
      <g>
        <rect x={1.2*GC} y={6*GC} width={1.6*GC} height={4*GC} fill="#6e6a63" stroke="#2c2a25" strokeWidth="4" />
        <rect x={1.5*GC} y={6.6*GC} width={1.0*GC} height={2.8*GC} fill="#1a1410" />
        <g transform={`translate(${2*GC} ${8.6*GC})`}>
          <path d="M0 -16 q 10 9 0 20 q -10 -9 0 -20" fill="#e0531f" /><path d="M0 -8 q 6 6 0 13 q -6 -6 0 -13" fill="#f6c560" />
        </g>
        <ellipse cx={2*GC} cy={8*GC} rx={1.8*GC} ry={1.4*GC} fill="#e0531f" opacity=".18" />
      </g>
      {/* round tables with stools */}
      {[[6,4],[6,12],[9.5,11.5],[14,11.5],[8.5,5.5],[16.5,9.5]].map(([cx,cy])=>table(cx,cy))}
      {/* long communal table centre */}
      <g>
        <rect x={9.4*GC} y={6.6*GC} width={4.2*GC} height={1.4*GC} rx="4" fill="#8a6238" stroke="#3c2817" strokeWidth="4" />
        {[9.7,10.6,11.5,12.4,13.3].map((cx,i)=> <circle key={i} cx={cx*GC} cy={6.2*GC} r="7" fill="#5e4226" stroke="#2c1c10" strokeWidth="2" />)}
        {[9.7,10.6,11.5,12.4,13.3].map((cx,i)=> <circle key={'b'+i} cx={cx*GC} cy={8.4*GC} r="7" fill="#5e4226" stroke="#2c1c10" strokeWidth="2" />)}
      </g>
      {/* entrance doormat + stairs up, bottom + right */}
      <rect x={10.4*GC} y={14.0*GC} width={2.2*GC} height={0.9*GC} rx="3" fill="#7d2330" opacity=".5" stroke="#3c2817" strokeWidth="2" />
      <g transform={`translate(${3.2*GC} ${12.4*GC})`} stroke="#3c2817" strokeWidth="2.5" opacity=".8" fill="#7a5530">
        {[0,1,2,3].map(i=> <rect key={i} x="0" y={i*8} width="44" height="7" />)}
      </g>
      {/* hanging chandelier shadow centre */}
      <circle cx={11.5*GC} cy={8*GC} r="6" fill="none" stroke="#caa24a" strokeWidth="2.5" opacity=".55" />
      <rect width={w} height={h} fill="url(#grit-stag)" style={{mixBlendMode:'multiply'}} opacity=".5" />
    </svg>
  );
}

/* ---------- dispatcher ---------- */
function MapArt({ id, W, H }) {
  switch (id) {
    case 'map2': return <DrownedChapel W={W} H={H} />;
    case 'map3': return <SablewoodCrossing W={W} H={H} />;
    case 'map4': return <GildedStag W={W} H={H} />;
    case 'map1':
    default:     return <EmberholdCaverns W={W} H={H} />;
  }
}

Object.assign(window, { MapArt });