/* explorer.jsx — shared list + map layout for trails / dog parks / garage sales */
function ExplorerLayout({ items, selectedId, onSelect, mapStyle, accent, pinIcon, renderRow, mapNote }) {
  return (
    <div className="page-wrap" style={{ padding:'26px 28px 0' }}>
      <div className="explorer" style={{ display:'grid', gridTemplateColumns:'minmax(340px,440px) 1fr', gap:26, alignItems:'start' }}>
        {/* list */}
        <div style={{ display:'flex', flexDirection:'column', gap:12 }}>
          {items.map(it => renderRow(it, it.id===selectedId, ()=>onSelect(it)))}
        </div>
        {/* sticky map */}
        <div className="explorer-map" style={{ position:'sticky', top:92, height:'calc(100vh - 120px)', minHeight:460 }}>
          <div className="card" style={{ height:'100%', overflow:'hidden', padding:0, position:'relative' }}>
            <LocalMap items={items} selectedId={selectedId} onSelect={onSelect} mapStyle={mapStyle} accent={accent} pinIcon={pinIcon}/>
            {mapNote &&
              <div style={{ position:'absolute', left:14, bottom:14, zIndex:50, background:'rgba(44,37,25,.86)', color:'var(--paper)',
                fontSize:12.5, fontWeight:600, padding:'8px 12px', borderRadius:9, maxWidth:240 }}>{mapNote}</div>}
          </div>
        </div>
      </div>
    </div>
  );
}
window.ExplorerLayout = ExplorerLayout;