// Wander — Browse, Search, Saved, Profile, Paywall (Stripe), Completion, Offline

// ─── BROWSE ───────────────────────────────────────────────────────────────────
function BrowseScreen({ onOpenTour, onTab, onSearch, dense }) {
  const { TOURS } = window.WANDER_DATA;
  const [cat, setCat] = React.useState('All');
  const cats = ['All','Free','Food','History','Architecture','Nature','After dark'];
  const featured = TOURS[1];
  const list = cat==='Free' ? TOURS.filter(t=>t.tier==='free') : TOURS;

  return (
    <div style={{ height:'100%', overflowY:'auto', background:'var(--w-cream)', paddingBottom:100 }} className="no-scroll app-scroll">
      <div style={{ padding:'60px 22px 16px' }}>
        <div style={{ fontSize:13, color:'var(--w-mute)', fontWeight:600 }}>Tours · Singapore</div>
        <h1 className="t-display" style={{ fontSize:36, fontWeight:600, lineHeight:1, margin:'4px 0 0' }}>Where to next?</h1>
      </div>
      <div style={{ padding:'0 22px 16px' }}>
        <button onClick={onSearch} style={{ width:'100%', height:50, borderRadius:25, background:'var(--w-paper)', border:'none', boxShadow:'inset 0 0 0 1px var(--w-line)', display:'flex', alignItems:'center', gap:10, padding:'0 18px', fontFamily:'inherit', cursor:'pointer', textAlign:'left' }}>
          <Icon.search size={18} color="var(--w-mute)"/>
          <span style={{ color:'var(--w-mute)', fontSize:15 }}>Search neighbourhoods, vibes…</span>
        </button>
      </div>
      <div style={{ display:'flex', gap:8, padding:'0 22px 18px', overflowX:'auto' }} className="no-scroll">
        {cats.map(c => (
          <button key={c} onClick={()=>setCat(c)} style={{ padding:'10px 16px', borderRadius:999, border:'none', cursor:'pointer', background:cat===c?'var(--w-ink)':'var(--w-paper)', color:cat===c?'var(--w-yellow)':'var(--w-ink)', fontWeight:700, fontSize:13, fontFamily:'inherit', flexShrink:0, boxShadow:cat===c?'none':'inset 0 0 0 1px var(--w-line)' }}>{c}</button>
        ))}
      </div>
      <div style={{ padding:'0 22px 22px' }}>
        <button onClick={()=>onOpenTour(featured.id)} style={{ width:'100%', border:'none', padding:0, background:'transparent', cursor:'pointer', textAlign:'left', fontFamily:'inherit', position:'relative' }}>
          <TourArt tour={featured} h={220} rounded={24}/>
          <div style={{ position:'absolute', bottom:14, left:14, right:14, background:'rgba(26,24,18,0.6)', backdropFilter:'blur(20px)', borderRadius:18, padding:14, color:'#fff' }}>
            <div style={{ fontSize:11, color:'var(--w-yellow)', fontWeight:700, letterSpacing:0.4, textTransform:'uppercase', display:'flex', alignItems:'center', gap:6 }}><Icon.sparkle size={11} color="var(--w-yellow)"/> Editor's pick</div>
            <div className="t-display" style={{ fontSize:22, fontWeight:600, marginTop:4 }}>{featured.title}</div>
            <div style={{ fontSize:12, opacity:0.8, marginTop:2 }}>{featured.duration} · {featured.stops} stops · ★ {featured.rating}</div>
          </div>
        </button>
      </div>
      <div style={{ padding:'0 22px' }}>
        <div className="t-display" style={{ fontSize:22, fontWeight:600, marginBottom:12 }}>All tours</div>
        <div style={{ display:'grid', gap:dense?10:14 }}>
          {list.map(t => (
            <button key={t.id} onClick={()=>onOpenTour(t.id)} style={{ display:'flex', gap:12, padding:dense?8:10, background:'var(--w-paper)', borderRadius:20, border:'none', boxShadow:'var(--sh-card)', cursor:'pointer', textAlign:'left', fontFamily:'inherit', alignItems:'center' }}>
              <div style={{ width:dense?76:92, height:dense?76:92, flexShrink:0 }}><TourArt tour={t} h={dense?76:92} rounded={14}/></div>
              <div style={{ flex:1, minWidth:0 }}>
                <div style={{ display:'flex', gap:6, marginBottom:4 }}>
                  {t.tier==='pro' ? <span className="w-chip w-chip--pro" style={{ padding:'3px 8px', fontSize:10 }}>PRO</span> : <span className="w-chip w-chip--free" style={{ padding:'3px 8px', fontSize:10 }}>FREE</span>}
                </div>
                <div style={{ fontWeight:700, fontSize:15, lineHeight:1.2, color:'var(--w-ink)', overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>{t.title}</div>
                <div style={{ fontSize:12, color:'var(--w-mute)', marginTop:4 }}>{t.duration} · {t.stops} stops · ★ {t.rating}</div>
              </div>
              <Icon.arrow size={16} color="var(--w-mute)"/>
            </button>
          ))}
        </div>
      </div>
      <TabBar active="browse" onChange={onTab}/>
    </div>
  );
}

// ─── SEARCH ───────────────────────────────────────────────────────────────────
function SearchScreen({ onClose, onOpenTour }) {
  const { TOURS } = window.WANDER_DATA;
  const [q, setQ] = React.useState('');
  const recent = ['Hawker','Sunset spots','Free tours','Architecture','Family-friendly'];
  const matches = q ? TOURS.filter(t => t.title.toLowerCase().includes(q.toLowerCase()) || t.subtitle.toLowerCase().includes(q.toLowerCase())) : [];

  return (
    <div style={{ height:'100%', background:'var(--w-cream)', overflowY:'auto' }} className="no-scroll app-scroll">
      <div style={{ padding:'56px 16px 14px', display:'flex', gap:10, alignItems:'center' }}>
        <div style={{ flex:1, height:50, borderRadius:25, background:'var(--w-paper)', boxShadow:'inset 0 0 0 1.5px var(--w-yellow)', display:'flex', alignItems:'center', gap:10, padding:'0 16px' }}>
          <Icon.search size={18} color="var(--w-slate)"/>
          <input autoFocus value={q} onChange={e=>setQ(e.target.value)} placeholder="Search tours…" style={{ flex:1, border:'none', outline:'none', background:'transparent', fontFamily:'inherit', fontSize:15, color:'var(--w-ink)' }}/>
        </div>
        <button onClick={onClose} style={{ background:'none', border:'none', fontFamily:'inherit', fontSize:15, fontWeight:600, color:'var(--w-ink)', cursor:'pointer' }}>Cancel</button>
      </div>
      {!q ? (
        <div style={{ padding:'8px 22px' }}>
          <div style={{ fontSize:11, color:'var(--w-mute)', fontWeight:700, letterSpacing:0.5, textTransform:'uppercase', marginBottom:10 }}>Recent</div>
          {recent.map(r => (
            <div key={r} onClick={()=>setQ(r)} style={{ display:'flex', alignItems:'center', gap:12, padding:'14px 0', borderBottom:'1px solid var(--w-line)', cursor:'pointer' }}>
              <Icon.search size={16} color="var(--w-mute)"/><span style={{ flex:1, fontSize:15 }}>{r}</span><Icon.arrow size={14} color="var(--w-mute)"/>
            </div>
          ))}
          <div style={{ marginTop:28, fontSize:11, color:'var(--w-mute)', fontWeight:700, letterSpacing:0.5, textTransform:'uppercase', marginBottom:12 }}>Trending in Singapore</div>
          <div style={{ display:'flex', gap:8, flexWrap:'wrap' }}>
            {['Chinatown food','Sunset Marina','Hidden gardens','Heritage shophouses','Peranakan Joo Chiat'].map(t => (
              <button key={t} onClick={()=>setQ(t)} style={{ padding:'10px 14px', borderRadius:999, border:'none', background:'var(--w-yellow-soft)', color:'var(--w-yellow-ink)', fontWeight:700, fontSize:13, fontFamily:'inherit', cursor:'pointer' }}>{t}</button>
            ))}
          </div>
        </div>
      ) : (
        <div style={{ padding:'8px 22px' }}>
          <div style={{ fontSize:13, color:'var(--w-mute)', marginBottom:10 }}>{matches.length} {matches.length===1?'result':'results'}</div>
          {matches.map(t => (
            <div key={t.id} onClick={()=>onOpenTour(t.id)} style={{ display:'flex', gap:12, padding:'12px 0', cursor:'pointer', borderBottom:'1px solid var(--w-line)', alignItems:'center' }}>
              <div style={{ width:56, height:56 }}><TourArt tour={t} h={56} rounded={12}/></div>
              <div style={{ flex:1 }}><div style={{ fontWeight:700, fontSize:15 }}>{t.title}</div><div style={{ fontSize:12, color:'var(--w-mute)' }}>{t.subtitle}</div></div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

// ─── SAVED ────────────────────────────────────────────────────────────────────
function SavedScreen({ onTab, onOpenTour, onOpenOffline, dense }) {
  const { TOURS } = window.WANDER_DATA;
  const saved = TOURS.slice(0,4);
  return (
    <div style={{ height:'100%', overflowY:'auto', background:'var(--w-cream)', paddingBottom:120 }} className="no-scroll app-scroll">
      <div style={{ padding:'60px 22px 14px' }}>
        <div style={{ fontSize:13, color:'var(--w-mute)', fontWeight:600 }}>Saved</div>
        <h1 className="t-display" style={{ fontSize:36, fontWeight:600, lineHeight:1, margin:'4px 0 0' }}>Your library</h1>
      </div>
      <div style={{ display:'flex', gap:6, padding:'4px 22px 18px' }}>
        {['Wishlist','Downloaded','Completed'].map((t,i) => (
          <button key={t} onClick={()=>i===1&&onOpenOffline()} style={{ flex:1, height:38, borderRadius:19, border:'none', cursor:'pointer', background:i===0?'var(--w-ink)':'transparent', color:i===0?'var(--w-yellow)':'var(--w-slate)', fontWeight:700, fontSize:13, fontFamily:'inherit', boxShadow:i===0?'none':'inset 0 0 0 1px var(--w-line)' }}>{t}</button>
        ))}
      </div>
      <div style={{ padding:'0 22px', display:'grid', gap:dense?10:14 }}>
        {saved.map(t => (
          <div key={t.id} onClick={()=>onOpenTour(t.id)} style={{ background:'var(--w-paper)', borderRadius:22, padding:12, display:'flex', gap:14, alignItems:'center', boxShadow:'var(--sh-card)', cursor:'pointer' }}>
            <div style={{ width:80, height:80 }}><TourArt tour={t} h={80} rounded={14}/></div>
            <div style={{ flex:1 }}>
              <div style={{ fontWeight:700, fontSize:15 }}>{t.title}</div>
              <div style={{ fontSize:12, color:'var(--w-mute)', marginTop:4 }}>{t.duration} · {t.stops} stops</div>
              <div style={{ display:'flex', gap:4, marginTop:6 }}>{t.formats.slice(0,3).map(f=>formatIcon(f,13,'var(--w-mute)'))}</div>
            </div>
            <Icon.heart size={20} color="var(--w-coral)" filled/>
          </div>
        ))}
      </div>
      <TabBar active="saved" onChange={onTab}/>
    </div>
  );
}

// ─── PROFILE ──────────────────────────────────────────────────────────────────
function ProfileScreen({ onTab, dense }) {
  const stats = [{label:'Tours',v:'12'},{label:'Cities',v:'4'},{label:'Steps',v:'38k'}];
  const badges = ['🦁 Singapore explorer','🌅 Sunrise walker','🍜 Hawker hunter','📜 History buff'];
  return (
    <div style={{ height:'100%', overflowY:'auto', background:'var(--w-cream)', paddingBottom:120 }} className="no-scroll app-scroll">
      <div style={{ background:'var(--w-yellow)', padding:'60px 22px 80px', position:'relative', overflow:'hidden' }}>
        <div style={{ position:'absolute', top:-40, right:-40, width:200, height:200, borderRadius:'50%', background:'rgba(255,255,255,0.25)' }}/>
        <div style={{ position:'absolute', bottom:-60, left:-30, width:160, height:160, borderRadius:'50%', background:'rgba(245,166,35,0.35)' }}/>
        <div style={{ position:'relative', display:'flex', alignItems:'center', justifyContent:'space-between' }}>
          <div style={{ fontSize:13, fontWeight:700, color:'var(--w-yellow-ink)' }}>You</div>
          <button style={{ width:36, height:36, borderRadius:18, border:'none', background:'rgba(58,42,6,0.1)', cursor:'pointer', display:'flex', alignItems:'center', justifyContent:'center' }}>
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="var(--w-yellow-ink)" strokeWidth="2" strokeLinecap="round"><circle cx="12" cy="12" r="3"/><path d="M19 12a7 7 0 11-14 0 7 7 0 0114 0z"/><path d="M12 2v2M12 20v2M2 12h2M20 12h2"/></svg>
          </button>
        </div>
      </div>
      <div style={{ padding:'0 22px', marginTop:-56, position:'relative' }}>
        <div style={{ background:'var(--w-paper)', borderRadius:28, padding:22, boxShadow:'var(--sh-pop)' }}>
          <div style={{ display:'flex', gap:16, alignItems:'center' }}>
            <div style={{ width:72, height:72, borderRadius:36, background:'linear-gradient(135deg,#FF6B5A,#FFC93C)', display:'flex', alignItems:'center', justifyContent:'center', fontSize:36, boxShadow:'0 8px 20px rgba(255,107,90,0.35)' }}>🧭</div>
            <div>
              <div className="t-display" style={{ fontSize:22, fontWeight:600 }}>Alex Lim</div>
              <div style={{ fontSize:13, color:'var(--w-mute)' }}>Wandering since April 2025</div>
            </div>
          </div>
          <div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:8, marginTop:18, padding:14, background:'var(--w-yellow-soft)', borderRadius:18 }}>
            {stats.map(s => (
              <div key={s.label} style={{ textAlign:'center' }}>
                <div className="t-display" style={{ fontSize:22, fontWeight:600, color:'var(--w-yellow-ink)' }}>{s.v}</div>
                <div style={{ fontSize:11, color:'var(--w-slate)', textTransform:'uppercase', letterSpacing:0.4, fontWeight:600 }}>{s.label}</div>
              </div>
            ))}
          </div>
        </div>
        <div style={{ marginTop:18, padding:18, borderRadius:22, background:'var(--w-ink)', color:'var(--w-paper)', display:'flex', gap:14, alignItems:'center' }}>
          <div style={{ flex:1 }}>
            <div style={{ fontSize:11, color:'var(--w-yellow)', fontWeight:700, letterSpacing:0.4, textTransform:'uppercase' }}>Wander Pro</div>
            <div className="t-display" style={{ fontSize:18, fontWeight:600, marginTop:4, color:'#fff' }}>All tours, every city</div>
            <div style={{ fontSize:12, opacity:0.7, marginTop:4 }}>$4.99/month after trial</div>
          </div>
          <button className="w-btn" style={{ height:40, padding:'0 16px', fontSize:13 }}>Try free</button>
        </div>
        <div className="t-display" style={{ fontSize:22, fontWeight:600, marginTop:28, marginBottom:12 }}>Badges</div>
        <div style={{ display:'flex', gap:8, flexWrap:'wrap' }}>
          {badges.map(b => <span key={b} style={{ padding:'8px 12px', borderRadius:999, background:'var(--w-paper)', fontSize:13, fontWeight:600, boxShadow:'inset 0 0 0 1px var(--w-line)' }}>{b}</span>)}
        </div>
        <div className="t-display" style={{ fontSize:22, fontWeight:600, marginTop:28, marginBottom:12 }}>Settings</div>
        <div style={{ background:'var(--w-paper)', borderRadius:18, overflow:'hidden' }}>
          {['Language · English','Voice · Mei Ling','Notifications','Help & Feedback'].map((s,i,a) => (
            <div key={s} style={{ padding:'16px 18px', display:'flex', alignItems:'center', borderBottom:i<a.length-1?'1px solid var(--w-line)':'none' }}>
              <span style={{ flex:1, fontSize:15 }}>{s}</span><Icon.arrow size={14} color="var(--w-mute)"/>
            </div>
          ))}
        </div>
      </div>
      <TabBar active="profile" onChange={onTab}/>
    </div>
  );
}

// ─── PAYWALL (with Stripe) ────────────────────────────────────────────────────
function PaywallScreen({ tourId, onClose, onSuccess }) {
  const { TOURS } = window.WANDER_DATA;
  const tour = TOURS.find(t => t.id===tourId) || TOURS[1];
  const [plan, setPlan] = React.useState('pro');
  const [loading, setLoading] = React.useState(false);
  const [error, setError] = React.useState(null);
  const plans = [
    { id:'tour',  label:'Just this tour', price:'$'+tour.price,   sub:'one-time',                       highlight:false },
    { id:'pro',   label:'Wander Pro',     price:'$4.99',          sub:'per month · 7-day free trial',   highlight:true  },
  ];

  // Listen for payment success from popup window
  React.useEffect(() => {
    const handler = (e) => {
      if (e.data?.type==='WANDER_PAYMENT_SUCCESS') onSuccess();
    };
    window.addEventListener('message', handler);
    return () => window.removeEventListener('message', handler);
  }, [onSuccess]);

  // Check if we landed back from Stripe redirect with ?unlocked=1
  React.useEffect(() => {
    const params = new URLSearchParams(window.location.search);
    if (params.get('unlocked')==='1') {
      window.history.replaceState({}, '', '/');
      onSuccess();
    }
  }, []);

  const handlePay = async () => {
    setLoading(true);
    setError(null);
    try {
      const res = await fetch('/api/stripe/checkout', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ tourId, plan }),
      });
      const data = await res.json();
      if (!res.ok) throw new Error(data.error || 'Payment failed');
      // Open Stripe Checkout in a small popup (stays inside the prototype view)
      const popup = window.open(data.url, 'stripe_checkout', 'width=480,height=700,left=200,top=100');
      if (!popup) {
        // Fallback: redirect current tab
        window.location.href = data.url;
      }
    } catch (e) {
      if (e.message.includes('not configured')) {
        // Demo mode — simulate success
        setTimeout(() => onSuccess(), 1200);
      } else {
        setError(e.message);
      }
    } finally {
      setLoading(false);
    }
  };

  return (
    <div style={{ height:'100%', background:'var(--w-ink)', color:'#fff', position:'relative', overflow:'hidden' }}>
      <div style={{ position:'absolute', top:-100, left:-50, right:-50, height:360, background:'radial-gradient(circle at center,rgba(255,201,60,0.4),transparent 70%)' }}/>
      <button onClick={onClose} style={{ position:'absolute', top:56, right:16, zIndex:10, width:38, height:38, borderRadius:19, border:'none', background:'rgba(255,255,255,0.1)', cursor:'pointer', display:'flex', alignItems:'center', justifyContent:'center' }}><Icon.close size={18} color="#fff"/></button>

      <div style={{ position:'relative', padding:'70px 24px 0', textAlign:'center' }}>
        <div style={{ fontSize:60, animation:'wFloat 3s ease-in-out infinite' }}>{tour.emoji}</div>
        <div style={{ fontSize:11, color:'var(--w-yellow)', fontWeight:700, letterSpacing:0.6, textTransform:'uppercase', marginTop:12 }}>Unlock pro tour</div>
        <h1 className="t-display" style={{ fontSize:30, fontWeight:600, lineHeight:1.1, margin:'8px 0 0' }}>{tour.title}</h1>
        <p style={{ fontSize:14, color:'rgba(255,255,255,0.65)', marginTop:10, maxWidth:300, marginLeft:'auto', marginRight:'auto' }}>{tour.blurb}</p>
      </div>

      <div style={{ padding:'24px 22px 30px', position:'relative' }}>
        <div style={{ display:'grid', gap:10 }}>
          {plans.map(p => (
            <button key={p.id} onClick={()=>setPlan(p.id)} style={{ width:'100%', padding:18, borderRadius:20, background:plan===p.id?'var(--w-yellow)':'rgba(255,255,255,0.06)', color:plan===p.id?'var(--w-yellow-ink)':'#fff', border:'none', cursor:'pointer', textAlign:'left', display:'flex', alignItems:'center', gap:14, fontFamily:'inherit', boxShadow:plan===p.id?'0 8px 24px rgba(255,201,60,0.35)':'inset 0 0 0 1px rgba(255,255,255,0.1)', position:'relative' }}>
              <div style={{ width:22, height:22, borderRadius:11, flexShrink:0, border:plan===p.id?'6px solid var(--w-yellow-ink)':'2px solid rgba(255,255,255,0.4)', background:plan===p.id?'#fff':'transparent' }}/>
              <div style={{ flex:1 }}>
                <div style={{ fontWeight:700, fontSize:15 }}>{p.label}</div>
                <div style={{ fontSize:12, opacity:0.75, marginTop:2 }}>{p.sub}</div>
              </div>
              <div className="t-display" style={{ fontSize:22, fontWeight:600 }}>{p.price}</div>
              {p.highlight && plan!==p.id && <div style={{ position:'absolute', top:-8, right:16, background:'var(--w-coral)', color:'#fff', padding:'3px 10px', borderRadius:999, fontSize:10, fontWeight:700, letterSpacing:0.4 }}>BEST VALUE</div>}
            </button>
          ))}
        </div>

        <ul style={{ margin:'20px 0 0', padding:0, listStyle:'none', display:'grid', gap:10 }}>
          {['Unlimited tours in 47 cities','Offline downloads & maps','AR overlays + bonus stops','Cancel anytime'].map(t => (
            <li key={t} style={{ display:'flex', gap:10, alignItems:'center', fontSize:14, color:'rgba(255,255,255,0.85)' }}>
              <div style={{ width:22, height:22, borderRadius:11, background:'var(--w-yellow)', color:'var(--w-yellow-ink)', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0 }}><Icon.check size={12} color="var(--w-yellow-ink)"/></div>
              {t}
            </li>
          ))}
        </ul>

        {error && <div style={{ marginTop:14, padding:'10px 14px', borderRadius:12, background:'rgba(255,107,90,0.2)', color:'var(--w-coral)', fontSize:13 }}>{error}</div>}

        <button onClick={handlePay} disabled={loading} className="w-btn" style={{ width:'100%', height:56, marginTop:20, opacity:loading?0.7:1 }}>
          {loading ? 'Opening payment…' : plan==='pro' ? 'Start free trial' : 'Unlock for $'+tour.price}
        </button>
        <div style={{ textAlign:'center', fontSize:11, color:'rgba(255,255,255,0.4)', marginTop:12 }}>Charged after 7 days. Cancel anytime in Settings.</div>
      </div>
    </div>
  );
}

// ─── COMPLETION ───────────────────────────────────────────────────────────────
function CompletionScreen({ tourId, onDone }) {
  const { TOURS, STOPS } = window.WANDER_DATA;
  const tour = TOURS.find(t=>t.id===tourId) || TOURS[0];
  const [stars, setStars] = React.useState(5);
  return (
    <div style={{ height:'100%', overflowY:'auto', position:'relative', background:`linear-gradient(180deg,${tour.hero[0]} 0%,var(--w-cream) 60%)` }} className="no-scroll app-scroll">
      <div style={{ position:'absolute', inset:'0 0 60% 0', pointerEvents:'none', overflow:'hidden' }}>
        {Array.from({length:20}).map((_,i) => {
          const colors=['#FFC93C','#FF6B5A','#2DD4A7','#9B7EDC','#4FB7E8'];
          return <div key={i} style={{ position:'absolute', left:(i*47)%100+'%', top:(i*23)%80+'%', width:8, height:14, borderRadius:2, background:colors[i%colors.length], transform:`rotate(${i*31}deg)`, animation:`wFloat ${2+(i%4)*0.5}s ${i*0.1}s ease-in-out infinite` }}/>;
        })}
      </div>
      <div style={{ padding:'90px 24px 24px', position:'relative', textAlign:'center' }}>
        <div style={{ width:100, height:100, borderRadius:50, margin:'0 auto', background:'var(--w-paper)', display:'flex', alignItems:'center', justifyContent:'center', boxShadow:'0 12px 32px rgba(0,0,0,0.18)', fontSize:56 }}>🏆</div>
        <div style={{ fontSize:11, color:'var(--w-yellow-ink)', fontWeight:700, letterSpacing:0.6, textTransform:'uppercase', marginTop:18 }}>Tour complete</div>
        <h1 className="t-display" style={{ fontSize:34, fontWeight:600, lineHeight:1.05, margin:'8px 0 0' }}>You wandered like a local.</h1>
        <p style={{ fontSize:15, color:'var(--w-slate)', marginTop:10 }}>{tour.title} · all {STOPS.length} stops · 1.8 km on foot</p>
      </div>
      <div style={{ padding:'0 22px 30px' }}>
        <div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:8, background:'var(--w-paper)', borderRadius:22, padding:16, boxShadow:'var(--sh-card)' }}>
          {[{l:'Time',v:'47 min'},{l:'Steps',v:'2,840'},{l:'Discoveries',v:'7'}].map(s => (
            <div key={s.l} style={{ textAlign:'center' }}>
              <div className="t-display" style={{ fontSize:22, fontWeight:600 }}>{s.v}</div>
              <div style={{ fontSize:11, color:'var(--w-mute)', textTransform:'uppercase', letterSpacing:0.4, fontWeight:600 }}>{s.l}</div>
            </div>
          ))}
        </div>
        <div style={{ marginTop:14, padding:16, borderRadius:20, background:'var(--w-yellow)', color:'var(--w-yellow-ink)', display:'flex', alignItems:'center', gap:14 }}>
          <div style={{ fontSize:36 }}>🦁</div>
          <div style={{ flex:1 }}>
            <div style={{ fontSize:11, fontWeight:700, letterSpacing:0.5, textTransform:'uppercase' }}>Badge unlocked</div>
            <div className="t-display" style={{ fontSize:18, fontWeight:600 }}>Marina Bay Master</div>
          </div>
          <Icon.sparkle size={20} color="var(--w-yellow-ink)"/>
        </div>
        <div style={{ marginTop:22, padding:18, background:'var(--w-paper)', borderRadius:22, boxShadow:'var(--sh-card)' }}>
          <div className="t-display" style={{ fontSize:18, fontWeight:600 }}>Rate this tour</div>
          <div style={{ display:'flex', gap:8, marginTop:12, justifyContent:'center' }}>
            {[1,2,3,4,5].map(n => <button key={n} onClick={()=>setStars(n)} style={{ background:'none', border:'none', cursor:'pointer', padding:4 }}><Icon.star size={36} color={n<=stars?'var(--w-yellow)':'var(--w-line)'}/></button>)}
          </div>
          <textarea placeholder="What stuck with you? (optional)" style={{ width:'100%', marginTop:14, padding:14, borderRadius:14, border:'1.5px solid var(--w-line)', resize:'none', fontFamily:'inherit', fontSize:14, minHeight:70, outline:'none', background:'var(--w-cream)' }}/>
        </div>
        <button onClick={onDone} className="w-btn" style={{ width:'100%', height:54, marginTop:18 }}>Done · find next tour</button>
        <button onClick={onDone} className="w-btn w-btn--ghost" style={{ width:'100%', height:50, marginTop:8 }}>Share my walk</button>
      </div>
    </div>
  );
}

// ─── OFFLINE ──────────────────────────────────────────────────────────────────
function OfflineScreen({ onClose }) {
  const { TOURS } = window.WANDER_DATA;
  const downloads = [
    { tour:TOURS[0], pct:1,    size:'24 MB' },
    { tour:TOURS[3], pct:1,    size:'18 MB' },
    { tour:TOURS[1], pct:0.62, size:'32 MB', downloading:true },
  ];
  return (
    <div style={{ height:'100%', overflowY:'auto', background:'var(--w-cream)' }} className="no-scroll app-scroll">
      <div style={{ padding:'56px 16px 14px', display:'flex', alignItems:'center', gap:12 }}>
        <button onClick={onClose} style={{ width:38, height:38, borderRadius:19, border:'none', background:'var(--w-paper)', boxShadow:'inset 0 0 0 1px var(--w-line)', cursor:'pointer', display:'flex', alignItems:'center', justifyContent:'center' }}><Icon.back size={18}/></button>
        <div style={{ flex:1 }}>
          <div style={{ fontSize:12, color:'var(--w-mute)', fontWeight:600 }}>Library</div>
          <div className="t-display" style={{ fontSize:22, fontWeight:600 }}>Offline tours</div>
        </div>
      </div>
      <div style={{ margin:'0 22px 20px', padding:18, background:'var(--w-ink)', borderRadius:22, color:'#fff' }}>
        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline' }}>
          <span style={{ fontSize:13, opacity:0.7 }}>Used</span>
          <span><span className="t-display" style={{ fontSize:22, fontWeight:600, color:'var(--w-yellow)' }}>74 MB</span><span style={{ fontSize:12, opacity:0.5 }}> / 500 MB</span></span>
        </div>
        <div style={{ height:6, borderRadius:3, background:'rgba(255,255,255,0.15)', marginTop:12, overflow:'hidden' }}>
          <div style={{ width:'15%', height:'100%', background:'var(--w-yellow)' }}/>
        </div>
      </div>
      <div style={{ padding:'0 22px', display:'grid', gap:12 }}>
        {downloads.map(d => (
          <div key={d.tour.id} style={{ display:'flex', gap:12, padding:12, background:'var(--w-paper)', borderRadius:20, alignItems:'center', boxShadow:'var(--sh-card)' }}>
            <div style={{ width:60, height:60 }}><TourArt tour={d.tour} h={60} rounded={12}/></div>
            <div style={{ flex:1, minWidth:0 }}>
              <div style={{ fontWeight:700, fontSize:14, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>{d.tour.title}</div>
              {d.downloading
                ? <><div style={{ fontSize:12, color:'var(--w-mute)', marginTop:2 }}>Downloading… {Math.round(d.pct*100)}% · {d.size}</div><div style={{ height:4, background:'var(--w-line)', borderRadius:2, marginTop:8, overflow:'hidden' }}><div style={{ width:d.pct*100+'%', height:'100%', background:'var(--w-yellow)' }}/></div></>
                : <div style={{ fontSize:12, color:'var(--w-mute)', marginTop:4, display:'flex', alignItems:'center', gap:6 }}><Icon.check size={12} color="var(--w-mint)"/> Available offline · {d.size}</div>
              }
            </div>
            <button style={{ width:36, height:36, borderRadius:18, border:'none', background:'var(--w-cream)', cursor:'pointer', display:'flex', alignItems:'center', justifyContent:'center' }}>
              {d.downloading ? <Icon.pause size={14}/> : <Icon.close size={14}/>}
            </button>
          </div>
        ))}
      </div>
      <div style={{ margin:'24px 22px', padding:18, borderRadius:20, background:'var(--w-yellow-soft)', display:'flex', gap:12, alignItems:'center' }}>
        <div style={{ fontSize:28 }}>📡</div>
        <div style={{ flex:1, fontSize:13, color:'var(--w-yellow-ink)', fontWeight:600 }}>Tip — download tours over Wi-Fi before flying. Maps work without signal.</div>
      </div>
    </div>
  );
}

Object.assign(window, { BrowseScreen, SearchScreen, SavedScreen, ProfileScreen, PaywallScreen, CompletionScreen, OfflineScreen });