// Wander — Map (discovery) screen

function MapScreen({ onOpenTour, onTab, dense, brand }) {
  const { TOURS, NEARBY } = window.WANDER_DATA;
  const [filter, setFilter] = React.useState('all');
  const [selected, setSelected] = React.useState(null);
  const sel = NEARBY.find(n => n.id === selected);
  const visible = filter==='all' ? NEARBY : NEARBY.filter(n => n.kind===filter);

  return (
    <div style={{ height:'100%', position:'relative', overflow:'hidden', background:'var(--map-water)' }}>
      <IllustratedMap points={visible} selected={selected} onSelect={setSelected}/>

      <div style={{ position:'absolute', top:56, left:16, right:16, zIndex:50 }}>
        <div style={{ background:'rgba(255,253,246,0.85)', backdropFilter:'blur(20px) saturate(180%)', WebkitBackdropFilter:'blur(20px) saturate(180%)', borderRadius:22, padding:'12px 16px', display:'flex', alignItems:'center', gap:12, boxShadow:'var(--sh-card)' }}>
          <div style={{ flex:1 }}>
            <div style={{ fontSize:11, color:'var(--w-mute)', fontWeight:600, letterSpacing:0.4, textTransform:'uppercase' }}>Now exploring</div>
            <div style={{ fontWeight:700, fontSize:16, display:'flex', alignItems:'center', gap:6 }}>
              <Icon.pin size={16} color={brand}/> Marina Bay, Singapore
            </div>
          </div>
          <button style={{ width:40, height:40, borderRadius:20, border:'none', background:'var(--w-paper)', boxShadow:'inset 0 0 0 1px var(--w-line)', display:'flex', alignItems:'center', justifyContent:'center', cursor:'pointer' }}>
            <Icon.search size={18}/>
          </button>
        </div>
        <div style={{ display:'flex', gap:8, marginTop:10, overflowX:'auto' }} className="no-scroll">
          {[{id:'all',label:'All'},{id:'free',label:'Free'},{id:'pro',label:'Pro'},{id:'current',label:'Active'}].map(f => (
            <button key={f.id} onClick={()=>setFilter(f.id)} style={{ padding:'8px 14px', borderRadius:999, border:'none', cursor:'pointer', background:filter===f.id?'var(--w-ink)':'rgba(255,253,246,0.85)', backdropFilter:'blur(12px)', color:filter===f.id?'var(--w-yellow)':'var(--w-ink)', fontWeight:700, fontSize:13, fontFamily:'inherit', boxShadow:filter===f.id?'none':'var(--sh-card)', flexShrink:0 }}>{f.label}</button>
          ))}
        </div>
      </div>

      <button style={{ position:'absolute', right:16, bottom:sel?320:290, zIndex:40, width:48, height:48, borderRadius:24, border:'none', background:'var(--w-paper)', boxShadow:'var(--sh-pop)', cursor:'pointer', display:'flex', alignItems:'center', justifyContent:'center', transition:'bottom .3s' }}>
        <Icon.loc size={22} color={brand}/>
      </button>

      {sel
        ? <SelectedCard point={sel} tours={TOURS} onClose={()=>setSelected(null)} onOpen={onOpenTour}/>
        : <NearbySheet tours={TOURS.slice(0,4)} onOpen={onOpenTour} dense={dense}/>
      }
      <TabBar active="map" onChange={onTab}/>
    </div>
  );
}

function IllustratedMap({ points, selected, onSelect }) {
  return (
    <div style={{ position:'absolute', inset:0 }}>
      <div style={{ position:'absolute', inset:0, background:'linear-gradient(180deg,#C8E5EF 0%,#B8DDEA 100%)' }}/>
      <svg viewBox="0 0 100 100" preserveAspectRatio="none" style={{ position:'absolute', inset:0, width:'100%', height:'100%' }}>
        <defs><pattern id="dots" width="3" height="3" patternUnits="userSpaceOnUse"><circle cx="1.5" cy="1.5" r="0.3" fill="rgba(255,255,255,0.45)"/></pattern></defs>
        <rect width="100" height="100" fill="url(#dots)"/>
        <path d="M 0,0 L 0,75 Q 8,72 14,68 Q 22,64 28,55 Q 34,48 38,42 Q 42,38 40,30 Q 36,22 30,18 Q 22,12 18,8 L 18,0 Z" fill="var(--map-land)"/>
        <path d="M 0,100 L 100,100 L 100,82 Q 90,80 78,78 Q 65,75 55,78 Q 45,82 30,82 Q 18,84 8,88 Q 2,92 0,95 Z" fill="var(--map-land)"/>
        <path d="M 100,28 Q 90,30 80,38 Q 72,46 70,55 Q 72,62 80,65 Q 92,65 100,62 L 100,28 Z" fill="var(--map-land)"/>
        <path d="M 70,55 Q 80,55 88,60 Q 92,68 88,75 Q 80,72 72,68 Q 68,62 70,55 Z" fill="var(--map-park)"/>
        <path d="M 0,72 Q 20,70 35,55 Q 48,40 60,50 Q 75,60 85,55" stroke="var(--map-road)" strokeWidth="1.6" fill="none" strokeLinecap="round"/>
        <path d="M 18,0 Q 25,15 40,28 Q 55,40 65,55" stroke="var(--map-road)" strokeWidth="1.2" fill="none" strokeLinecap="round" strokeOpacity="0.85"/>
        <path d="M 100,40 Q 88,50 78,58 Q 68,65 60,80" stroke="var(--map-road)" strokeWidth="1.2" fill="none" strokeLinecap="round" strokeOpacity="0.85"/>
        <path d="M 38,58 Q 48,52 58,55" stroke="#fff" strokeWidth="0.8" fill="none" strokeDasharray="1.5 1"/>
        <path d="M 42,55 Q 46,52 52,46 Q 56,44 58,42 Q 62,46 68,55" stroke="#FFC93C" strokeWidth="1" fill="none" strokeDasharray="2 1.5" strokeLinecap="round"/>
      </svg>
      <div style={{ position:'absolute', left:'15%', top:'40%', fontFamily:'var(--w-display)', fontSize:11, color:'rgba(74,69,56,0.6)', fontWeight:600, fontStyle:'italic' }}>Downtown Core</div>
      <div style={{ position:'absolute', left:'70%', top:'85%', fontFamily:'var(--w-display)', fontSize:11, color:'rgba(74,69,56,0.6)', fontWeight:600, fontStyle:'italic' }}>Marina South</div>
      <div style={{ position:'absolute', left:'40%', top:'20%', fontFamily:'var(--w-display)', fontSize:10, color:'rgba(74,69,56,0.45)', fontWeight:500, fontStyle:'italic' }}>Singapore Strait</div>
      <div style={{ position:'absolute', left:'50%', top:'48%', transform:'translate(-50%,-50%)' }}>
        <div style={{ position:'absolute', inset:-16, borderRadius:'50%', background:'rgba(79,183,232,0.3)', animation:'wPulse 2.4s ease-in-out infinite' }}/>
        <div style={{ width:18, height:18, borderRadius:'50%', background:'#4FB7E8', boxShadow:'0 0 0 3px #fff,0 4px 10px rgba(79,183,232,0.5)' }}/>
      </div>
      {points.map(p => (
        <button key={p.id} onClick={()=>onSelect(p.id)} style={{ position:'absolute', left:p.x+'%', top:p.y+'%', transform:`translate(-50%,-100%) ${selected===p.id?'scale(1.15)':''}`, background:'none', border:'none', cursor:'pointer', padding:0, transition:'transform .2s' }}>
          <PinShape kind={p.kind} emoji={p.emoji}/>
        </button>
      ))}
    </div>
  );
}

function PinShape({ kind, emoji }) {
  const bg   = kind==='free'?'var(--w-mint)':kind==='pro'?'var(--w-ink)':kind==='current'?'var(--w-coral)':'var(--w-paper)';
  const ring = kind==='current'?'0 0 0 3px rgba(255,107,90,0.3),0 6px 14px rgba(0,0,0,0.18)':'0 6px 14px rgba(0,0,0,0.18)';
  return (
    <div style={{ position:'relative' }}>
      <div style={{ width:42, height:42, borderRadius:'50% 50% 50% 4px', transform:'rotate(-45deg)', background:bg, boxShadow:ring, display:'flex', alignItems:'center', justifyContent:'center' }}>
        <span style={{ transform:'rotate(45deg)', fontSize:18 }}>{emoji}</span>
      </div>
      {kind==='current' && <div style={{ position:'absolute', top:-6, right:-8, width:14, height:14, borderRadius:'50%', background:'var(--w-yellow)', boxShadow:'0 0 0 2px #fff', animation:'wPulse 1.8s ease-in-out infinite' }}/>}
    </div>
  );
}

function NearbySheet({ tours, onOpen, dense }) {
  return (
    <div style={{ position:'absolute', bottom:100, left:0, right:0, zIndex:30, paddingBottom:8 }}>
      <div style={{ padding:'0 20px 10px', display:'flex', justifyContent:'space-between', alignItems:'center' }}>
        <div style={{ background:'rgba(26,24,18,0.78)', backdropFilter:'blur(14px)', WebkitBackdropFilter:'blur(14px)', padding:'8px 14px', borderRadius:999, display:'flex', alignItems:'baseline', gap:8 }}>
          <span style={{ fontSize:10, color:'var(--w-yellow)', fontWeight:700, letterSpacing:0.5, textTransform:'uppercase' }}>Within 2 km</span>
          <span style={{ fontSize:13, color:'#fff', fontWeight:700 }}>Nearby tours</span>
        </div>
        <button style={{ background:'rgba(255,253,246,0.92)', border:'none', padding:'8px 14px', borderRadius:999, fontSize:12, fontWeight:700, color:'var(--w-ink)', fontFamily:'inherit', cursor:'pointer' }}>See all</button>
      </div>
      <div style={{ display:'flex', gap:12, overflowX:'auto', padding:'0 20px 4px' }} className="no-scroll">
        {tours.map(t => (
          <button key={t.id} onClick={()=>onOpen(t.id)} style={{ width:dense?200:230, flexShrink:0, background:'var(--w-paper)', borderRadius:22, border:'none', padding:0, boxShadow:'var(--sh-pop)', cursor:'pointer', textAlign:'left', overflow:'hidden', fontFamily:'inherit' }}>
            <TourArt tour={t} h={dense?96:110} rounded={0}/>
            <div style={{ padding:dense?'10px 12px 12px':'12px 14px 14px' }}>
              <div style={{ fontWeight:700, fontSize:dense?14:15, lineHeight:1.2, color:'var(--w-ink)' }}>{t.title}</div>
              <div style={{ display:'flex', gap:10, marginTop:6, fontSize:12, color:'var(--w-mute)' }}>
                <span>⏱ {t.duration}</span><span>📍 {t.stops} stops</span>
              </div>
            </div>
          </button>
        ))}
      </div>
    </div>
  );
}

function SelectedCard({ point, tours, onClose, onOpen }) {
  const matchTour = tours[0];
  return (
    <div style={{ position:'absolute', bottom:100, left:16, right:16, zIndex:40, background:'var(--w-paper)', borderRadius:24, boxShadow:'var(--sh-pop)', padding:16, animation:'wFadeUp .35s ease-out both' }}>
      <div style={{ display:'flex', gap:14 }}>
        <div style={{ width:64, height:64, borderRadius:18, background:'linear-gradient(135deg,#FFC93C,#FF8A4C)', display:'flex', alignItems:'center', justifyContent:'center', fontSize:30, flexShrink:0 }}>{point.emoji}</div>
        <div style={{ flex:1 }}>
          <div style={{ display:'flex', justifyContent:'space-between' }}>
            <div className="t-display" style={{ fontSize:20, fontWeight:600 }}>{point.name}</div>
            <button onClick={onClose} style={{ background:'none', border:'none', cursor:'pointer', padding:4, marginRight:-4, marginTop:-4 }}><Icon.close size={18} color="var(--w-mute)"/></button>
          </div>
          <div style={{ fontSize:13, color:'var(--w-mute)', marginTop:2 }}>180 m away · 3 min walk</div>
          <Rating value={4.8} reviews={284} size={11}/>
        </div>
      </div>
      <div style={{ display:'flex', gap:8, marginTop:14 }}>
        <button onClick={()=>onOpen(matchTour.id)} className="w-btn" style={{ flex:1, height:46 }}><Icon.play size={16}/> Start tour</button>
        <button className="w-btn w-btn--ghost" style={{ width:46, height:46, padding:0 }}><Icon.heart size={18}/></button>
      </div>
    </div>
  );
}

Object.assign(window, { MapScreen });