// ROAMR — Travel-led screens: Explore, Place detail, Trip planner.
// Photo-first, Airbnb / AllTrails energy. Reads cardStyle, mapStyle,
// density and audience from window.TOKENS.

const { Photo: TPhoto, SaveBtn, Pill, MetaLine, TravelSection, MapMockV2,
  TravelRouteCard, PlaceCard, TripHeroCard } = window;

// ─── Sample travel data ────────────────────────────────────────────────────
const TRIPS = [
  {
    id: 't1', name: 'Snowdonia · slow weekend',
    region: 'North Wales', days: 2, kicker: 'curated',
    tagline: 'Two days of low passes, slate lakes and a cozy harbour pub. No epics — just the good bits.',
    activities: ['hike', 'gravel'],
    stops: [
      { day: 1, name: 'Llyn Idwal sunset walk', kind: 'WALK', time: '17:30' },
      { day: 1, name: 'Pen-y-Gwryd Inn', kind: 'STAY', time: '20:00' },
      { day: 2, name: 'Crib Goch ridge (optional)', kind: 'HIKE', time: '09:00' },
      { day: 2, name: 'Caffi Glan Llyn', kind: 'CAFÉ', time: '13:00' },
      { day: 2, name: 'Mawddach Estuary gravel loop', kind: 'RIDE', time: '15:00' },
    ],
  },
  {
    id: 't2', name: 'North Coast 500',
    region: 'Scottish Highlands', days: 5, kicker: 'bucket list',
    tagline: 'The full loop — long passes, white-sand bays, and stops that earn their place.',
    activities: ['moto', '4x4'],
    stops: [
      { day: 1, name: 'Inverness → Applecross', kind: 'RIDE', time: '08:30' },
      { day: 2, name: 'Bealach na Bà pass', kind: 'PASS', time: '10:00' },
      { day: 3, name: 'Achmelvich beach camp', kind: 'CAMP', time: '17:00' },
      { day: 4, name: 'Smoo Cave detour', kind: 'POI', time: '11:00' },
      { day: 5, name: 'John O\'Groats → home', kind: 'RIDE', time: '08:00' },
    ],
  },
  {
    id: 't3', name: 'Peak District in a day',
    region: 'Derbyshire', days: 1, kicker: 'near you',
    tagline: 'Stanage Edge at sunrise, a cake-stop in Hathersage, a quiet byway home.',
    activities: ['hike', 'moto'],
    stops: [
      { day: 1, name: 'Stanage Edge sunrise', kind: 'HIKE', time: '06:00' },
      { day: 1, name: 'Outside Café · Hathersage', kind: 'CAFÉ', time: '10:00' },
      { day: 1, name: 'Roych Clough Byway', kind: 'RIDE', time: '13:00' },
      { day: 1, name: 'Ladybower viewpoint', kind: 'POI', time: '16:30' },
    ],
  },
];

const PLACES = [
  { id: 'p1', name: 'Stickle Tarn Wildcamp', kind: 'CAMP', region: 'Lake District', distFromYou: '142 km', vibe: 'Quiet · high · pristine', season: 'Apr–Oct' },
  { id: 'p2', name: 'Sunset on Mam Tor', kind: 'VIEW', region: 'Peak District', distFromYou: '38 km', vibe: 'Iconic ridge', season: 'Year-round' },
  { id: 'p3', name: 'The Old Forge', kind: 'CAFÉ', region: 'Snowdonia · Beddgelert', distFromYou: '180 km', vibe: 'Slate roof · cake', season: 'Year-round' },
  { id: 'p4', name: 'Coruisk Bothy', kind: 'STAY', region: 'Isle of Skye', distFromYou: '590 km', vibe: 'Remote · boat-in', season: 'May–Sep' },
  { id: 'p5', name: 'Bealach na Bà Pass', kind: 'PASS', region: 'NW Highlands', distFromYou: '520 km', vibe: 'Hairpins · road', season: 'May–Oct' },
  { id: 'p6', name: 'Padley Gorge', kind: 'WALK', region: 'Peak District', distFromYou: '24 km', vibe: 'Mossy · short', season: 'Year-round' },
];

// ─── EXPLORE — Travel ───────────────────────────────────────────────────
function ExploreTravelScreen({ onOpenRoute, onOpenPlace, onOpenTrip, onOpenStay, onNavigate }) {
  const T = window.TOKENS;
  const greenLane = T.audience === 'green-lane';
  const acts = greenLane
    ? [
        { k: 'all', label: 'For me' },
        { k: 'moto', label: 'Adventure moto' },
        { k: '4x4', label: '4×4' },
        { k: 'gravel', label: 'Gravel' },
        { k: 'hike', label: 'Hike' },
        { k: 'camp', label: 'Vanlife' },
      ]
    : [
        { k: 'all', label: 'For me' },
        { k: 'hike', label: 'Walk & hike' },
        { k: 'gravel', label: 'Gravel' },
        { k: 'moto', label: 'Motorbike' },
        { k: 'camp', label: 'Vanlife' },
        { k: 'mtb', label: 'MTB' },
        { k: 'dog', label: 'Dog-friendly' },
      ];
  const [activeAct, setActiveAct] = React.useState('all');
  const routes = window.ROUTES;

  return (
    <div style={{ background: T.bg, paddingBottom: 120 }}>
      {/* ── Greeting header ── */}
      <div style={{ padding: '12px 20px 8px' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div>
            <div style={{ fontFamily: T.fontM, fontSize: 10, color: T.textMute, letterSpacing: 1.6, marginBottom: 4 }}>WED · 11°C · SHEFFIELD</div>
            <div style={{ fontFamily: T.fontD, fontSize: 26, fontWeight: 600, color: T.textHi, letterSpacing: -0.5, lineHeight: 1.1 }}>Where to next, Alex?</div>
          </div>
          <button onClick={() => onNavigate('profile')} style={{
            width: 42, height: 42, borderRadius: 21, padding: 0,
            background: T.signal, color: '#fff', border: 'none',
            fontFamily: T.fontD, fontSize: 14, fontWeight: 600, cursor: 'pointer',
          }}>AK</button>
        </div>
      </div>

      {/* ── Search ── */}
      <div style={{ padding: '14px 20px 18px' }}>
        <button onClick={() => onNavigate('ai')} style={{
          width: '100%', display: 'flex', alignItems: 'center', gap: 12,
          background: T.card, border: `1px solid ${T.border}`,
          padding: '14px 16px', borderRadius: 100, cursor: 'pointer', textAlign: 'left',
        }}>
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke={T.textMid} strokeWidth="1.7"><circle cx="7" cy="7" r="4.5"/><path d="M10.5 10.5 L14 14"/></svg>
          <span style={{ flex: 1, fontFamily: T.fontB, fontSize: 14, color: T.textLo }}>Search trails, places or just ask…</span>
          <span style={{
            fontFamily: T.fontM, fontSize: 10, color: '#fff',
            background: T.signal, padding: '4px 9px', borderRadius: 100, letterSpacing: 1,
          }}>AI ✦</span>
        </button>
      </div>

      {/* ── Activity pills ── */}
      <div style={{ overflowX: 'auto', paddingBottom: 16, marginBottom: 6 }}>
        <div style={{ display: 'inline-flex', gap: 8, padding: '0 20px' }}>
          {acts.map(a => (
            <Pill key={a.k} active={activeAct === a.k} onClick={() => setActiveAct(a.k)}>{a.label}</Pill>
          ))}
        </div>
      </div>

      {/* ── Featured trips · horizontal scroll ── */}
      <TravelSection kicker="§ TRIPS YOU'LL LOVE" title="Curated for this weekend" action="see all" onAction={() => onNavigate('trips')}>
        <div style={{ overflowX: 'auto', paddingBottom: 6 }}>
          <div style={{ display: 'inline-flex', gap: 12, padding: '0 20px' }}>
            {TRIPS.map((t, i) => (
              <TripHeroCard key={t.id} trip={t} onClick={() => onOpenTrip(t)} photoTone={i} />
            ))}
          </div>
        </div>
      </TravelSection>

      {/* ── This weekend — photo route cards ── */}
      <TravelSection kicker="§ THIS WEEKEND" title="Within 2 hours of home" action="map" onAction={() => onNavigate('map')}>
        <div style={{ padding: '0 20px', display: 'flex', flexDirection: 'column', gap: 18 }}>
          {routes.slice(0, 2).map((r, i) => (
            <TravelRouteCard key={r.id} route={r} onClick={() => onOpenRoute(r)} photoTone={i + 1} />
          ))}
        </div>
      </TravelSection>

      {/* ── AI plan ── */}
      <div style={{ padding: '0 20px 28px' }}>
        <button onClick={() => onNavigate('ai')} style={{
          width: '100%', background: T.cardElev, border: `1px solid ${T.border}`,
          borderRadius: 18, padding: 20, textAlign: 'left', cursor: 'pointer',
          position: 'relative', overflow: 'hidden',
        }}>
          <div style={{ position: 'absolute', right: -30, top: -30, width: 160, height: 160,
            borderRadius: 80, background: T.signal, opacity: 0.12 }} />
          <div style={{ position: 'absolute', right: 20, top: 20, width: 90, height: 90,
            borderRadius: 45, background: T.signal, opacity: 0.18 }} />
          <div style={{ fontFamily: T.fontM, fontSize: 10, color: T.signal, letterSpacing: 1.6, marginBottom: 8 }}>✦ AI TRIP BUILDER</div>
          <div style={{ fontFamily: T.fontD, fontSize: 22, fontWeight: 600, color: T.textHi, letterSpacing: -0.4, lineHeight: 1.15, marginBottom: 6, maxWidth: '78%' }}>
            "Plan me a 3-day vanlife loop with cafés and a wild swim."
          </div>
          <div style={{ fontFamily: T.fontB, fontSize: 13, color: T.textLo, lineHeight: 1.5, maxWidth: '78%', marginBottom: 14 }}>
            Tell ROAMR what kind of trip you want. It'll thread routes, places and stays — and tell you which bits to check.
          </div>
          <span style={{
            display: 'inline-flex', alignItems: 'center', gap: 8,
            fontFamily: T.fontB, fontSize: 13, fontWeight: 500, color: T.signal,
          }}>Try the trip builder <span>→</span></span>
        </button>
      </div>

      {/* ── Where to sleep — Campfind partner ── */}
      <TravelSection
        kicker={<>§ STAYS NEAR YOU · <window.CampfindMark size={10} color={T.signal} /></>}
        title="Where to sleep tonight"
        action="all stays"
        onAction={() => onNavigate('stays')}>
        <div style={{ overflowX: 'auto', paddingBottom: 4 }}>
          <div style={{ display: 'inline-flex', gap: 12, padding: '0 20px' }}>
            {window.STAYS.slice(0, 4).map((s, i) => (
              <div key={s.id} role="button" tabIndex={0} onClick={() => onOpenStay(s)} style={{
                width: 230, flexShrink: 0, cursor: 'pointer',
                background: T.card, border: `1px solid ${T.border}`,
                borderRadius: 14, overflow: 'hidden',
                display: 'flex', flexDirection: 'column',
              }}>
                <div style={{ position: 'relative', height: 140 }}>
                  <TPhoto caption={s.kind.toLowerCase()} tone={s.photo} height={140} />
                  <div style={{ position: 'absolute', top: 8, left: 8 }}>
                    <window.Pill glass>{s.kind}</window.Pill>
                  </div>
                  <div style={{
                    position: 'absolute', bottom: 8, left: 8,
                    background: 'rgba(0,0,0,0.55)', backdropFilter: 'blur(8px)',
                    padding: '3px 9px', borderRadius: 100,
                    fontFamily: T.fontD, fontWeight: 600, fontSize: 12, color: '#fff',
                  }}>£{s.price} <span style={{ opacity: 0.7, fontSize: 9 }}>{s.unit}</span></div>
                </div>
                <div style={{ padding: '10px 12px 12px' }}>
                  <div style={{ fontFamily: T.fontD, fontSize: 14, fontWeight: 600, color: T.textHi, letterSpacing: -0.1, lineHeight: 1.2 }}>{s.name}</div>
                  <div style={{ fontFamily: T.fontB, fontSize: 11, color: T.textLo, marginTop: 2 }}>{s.distFromYou} · ★ {s.rating}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
        <div style={{ padding: '12px 20px 0', display: 'flex', justifyContent: 'center' }}>
          <window.PoweredByCampfind />
        </div>
      </TravelSection>

      {/* ── Hidden places ── */}
      <TravelSection kicker="§ PLACES" title="Hidden spots near you" action="all" onAction={() => onNavigate('places')}>
        <div style={{ padding: '0 20px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
          {PLACES.slice(0, 4).map((p, i) => (
            <PlaceCard key={p.id} place={p} onClick={() => onOpenPlace(p)} photoTone={i + 2} />
          ))}
        </div>
      </TravelSection>

      {/* ── Routes by locals ── */}
      <TravelSection kicker="§ BY LOCALS" title="Routes by Sheffield creators">
        <div style={{ padding: '0 20px', display: 'flex', flexDirection: 'column', gap: 14 }}>
          {routes.slice(2, 4).map((r, i) => (
            <TravelRouteCard key={r.id} route={r} onClick={() => onOpenRoute(r)} photoTone={i + 3} />
          ))}
        </div>
      </TravelSection>

      {/* ── Story strip ── */}
      <TravelSection kicker="§ COMMUNITY" title="From the road this week">
        <div style={{ overflowX: 'auto' }}>
          <div style={{ display: 'inline-flex', gap: 10, padding: '0 20px' }}>
            {[
              { who: 'Lina', body: 'Snowdonia in mist · slept by Llyn Padarn.', tone: 1 },
              { who: 'Tom', body: 'Stanage at sunrise — pure light show.', tone: 2 },
              { who: 'Marco', body: 'NC500 day 4 — the Bealach in cloud.', tone: 0 },
              { who: 'Hana', body: 'Wild swim at Stickle Tarn. Cold!', tone: 3 },
            ].map((s, i) => (
              <div key={i} style={{ width: 200, flexShrink: 0, borderRadius: 14, overflow: 'hidden', position: 'relative', height: 280 }}>
                <TPhoto caption={`story · ${s.who.toLowerCase()}`} tone={s.tone} height={280} />
                <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.75))' }} />
                <div style={{ position: 'absolute', left: 14, right: 14, bottom: 14, color: '#fff' }}>
                  <div style={{ fontFamily: T.fontM, fontSize: 10, letterSpacing: 1.4, opacity: 0.85, marginBottom: 4 }}>{s.who.toUpperCase()} · 2D AGO</div>
                  <div style={{ fontFamily: T.fontD, fontSize: 15, fontWeight: 500, lineHeight: 1.25 }}>{s.body}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </TravelSection>
    </div>
  );
}

// ─── TRIP DETAIL ─────────────────────────────────────────────────────────
function TripScreen({ trip, onBack, onOpenRoute, onOpenPlace }) {
  const T = window.TOKENS;
  const t = trip || TRIPS[0];
  const [day, setDay] = React.useState(1);
  const days = [...new Set(t.stops.map(s => s.day))].sort();
  const daysStops = t.stops.filter(s => s.day === day);

  return (
    <div style={{ background: T.bg, paddingBottom: 120 }}>
      {/* Hero */}
      <div style={{ position: 'relative', height: 320 }}>
        <TPhoto caption={t.region.toLowerCase()} tone={0} height={320} />
        <div style={{ position: 'absolute', inset: 0,
          background: 'linear-gradient(180deg, rgba(0,0,0,0.4) 0%, transparent 30%, transparent 50%, rgba(0,0,0,0.78) 100%)' }} />
        <button onClick={onBack} style={{
          position: 'absolute', top: 12, left: 14, width: 40, height: 40, borderRadius: 20,
          background: 'rgba(0,0,0,0.4)', backdropFilter: 'blur(10px)',
          border: '1px solid rgba(255,255,255,0.2)', color: '#fff', fontSize: 18, cursor: 'pointer',
        }}>←</button>
        <div style={{ position: 'absolute', top: 12, right: 14, display: 'flex', gap: 8 }}>
          <SaveBtn />
          <button style={{
            width: 40, height: 40, borderRadius: 20,
            background: 'rgba(0,0,0,0.4)', backdropFilter: 'blur(10px)',
            border: '1px solid rgba(255,255,255,0.2)', color: '#fff', cursor: 'pointer',
          }}>↗</button>
        </div>
        <div style={{ position: 'absolute', left: 20, right: 20, bottom: 18, color: '#fff' }}>
          <div style={{ display: 'flex', gap: 6, marginBottom: 12 }}>
            <Pill glass>{t.days} {t.days === 1 ? 'day' : 'days'}</Pill>
            <Pill glass>{t.region}</Pill>
            <Pill glass>{t.kicker}</Pill>
          </div>
          <div style={{ fontFamily: T.fontD, fontSize: 30, fontWeight: 600, letterSpacing: -0.6, lineHeight: 1.05, textShadow: '0 2px 10px rgba(0,0,0,0.5)' }}>{t.name}</div>
        </div>
      </div>

      {/* Tagline */}
      <div style={{ padding: '20px 20px 4px' }}>
        <div style={{ fontFamily: T.fontB, fontSize: 16, color: T.text, lineHeight: 1.55 }}>{t.tagline}</div>
      </div>

      {/* Quick stats */}
      <div style={{ padding: '16px 20px 0' }}>
        <div style={{ display: 'flex', gap: 16, padding: '14px 16px', background: T.card, border: `1px solid ${T.border}`,
          borderRadius: 14, justifyContent: 'space-between' }}>
          {[
            { v: `${t.days}`, l: 'days' },
            { v: `${t.stops.length}`, l: 'stops' },
            { v: '218', l: 'km' },
            { v: '£90', l: 'est cost' },
          ].map((s, i) => (
            <div key={i} style={{ flex: 1, textAlign: 'center', borderRight: i < 3 ? `1px solid ${T.border}` : 'none' }}>
              <div style={{ fontFamily: T.fontD, fontSize: 20, fontWeight: 600, color: T.textHi, letterSpacing: -0.4 }}>{s.v}</div>
              <div style={{ fontFamily: T.fontM, fontSize: 9, color: T.textMute, letterSpacing: 1, marginTop: 4 }}>{s.l.toUpperCase()}</div>
            </div>
          ))}
        </div>
      </div>

      {/* CTA */}
      <div style={{ padding: '18px 20px 8px', display: 'flex', gap: 10 }}>
        <button style={{
          flex: 1, padding: '14px', background: T.signal, color: '#fff', border: 'none',
          borderRadius: 100, fontFamily: T.fontB, fontSize: 15, fontWeight: 600, cursor: 'pointer',
        }}>Save this trip</button>
        <button style={{
          padding: '14px 18px', background: T.card, color: T.textHi, border: `1px solid ${T.borderSoft}`,
          borderRadius: 100, fontFamily: T.fontB, fontSize: 14, fontWeight: 500, cursor: 'pointer',
        }}>Customise</button>
      </div>

      {/* Day tabs */}
      <div style={{ padding: '24px 20px 8px' }}>
        <div style={{ fontFamily: T.fontM, fontSize: 10, color: T.signal, letterSpacing: 1.6, marginBottom: 12 }}>§ ITINERARY</div>
        <div style={{ display: 'flex', gap: 8, overflowX: 'auto', paddingBottom: 6 }}>
          {days.map(d => (
            <button key={d} onClick={() => setDay(d)} style={{
              padding: '10px 16px', borderRadius: 100,
              fontFamily: T.fontB, fontSize: 13, fontWeight: 500, cursor: 'pointer',
              background: day === d ? T.signal : T.card,
              color: day === d ? '#fff' : T.text,
              border: `1px solid ${day === d ? T.signal : T.border}`,
              whiteSpace: 'nowrap',
            }}>Day {d}</button>
          ))}
          <button style={{
            padding: '10px 14px', borderRadius: 100,
            fontFamily: T.fontB, fontSize: 13, fontWeight: 500, cursor: 'pointer',
            background: 'transparent', color: T.textLo,
            border: `1px dashed ${T.borderSoft}`, whiteSpace: 'nowrap',
          }}>+ day</button>
        </div>
      </div>

      {/* Day stops */}
      <div style={{ padding: '12px 20px 0', display: 'flex', flexDirection: 'column', gap: 0 }}>
        {daysStops.map((s, i) => (
          <div key={i} style={{ display: 'flex', gap: 14 }}>
            {/* Timeline rail */}
            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', minWidth: 50 }}>
              <div style={{ fontFamily: T.fontM, fontSize: 11, color: T.textMute, letterSpacing: 0.8, marginTop: 18 }}>{s.time}</div>
              <div style={{
                width: 28, height: 28, marginTop: 8, borderRadius: 14,
                background: T.signal, color: '#fff',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontFamily: T.fontM, fontSize: 9, fontWeight: 700, letterSpacing: 0.5,
              }}>{i + 1}</div>
              {i < daysStops.length - 1 && <div style={{ flex: 1, width: 2, background: T.border, marginTop: 4, minHeight: 60 }} />}
            </div>
            {/* Card */}
            <div style={{ flex: 1, marginBottom: 14, marginTop: 8 }}>
              <div style={{
                background: T.card, border: `1px solid ${T.border}`,
                borderRadius: 14, overflow: 'hidden', display: 'flex',
              }}>
                <div style={{ width: 86, flexShrink: 0 }}>
                  <TPhoto caption={s.kind.toLowerCase()} tone={i} height={106} />
                </div>
                <div style={{ flex: 1, padding: '14px 14px' }}>
                  <div style={{ fontFamily: T.fontM, fontSize: 9, color: T.signal, letterSpacing: 1.4, marginBottom: 4 }}>{s.kind}</div>
                  <div style={{ fontFamily: T.fontD, fontSize: 15, fontWeight: 600, color: T.textHi, letterSpacing: -0.2, lineHeight: 1.25 }}>{s.name}</div>
                  <div style={{ fontFamily: T.fontB, fontSize: 11, color: T.textLo, marginTop: 6 }}>tap to view ›</div>
                </div>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ─── PLACE DETAIL ────────────────────────────────────────────────────────
function PlaceScreen({ place, onBack, onAddToTrip }) {
  const T = window.TOKENS;
  const p = place || PLACES[0];
  return (
    <div style={{ background: T.bg, paddingBottom: 120 }}>
      {/* Hero gallery */}
      <div style={{ position: 'relative', height: 300 }}>
        <TPhoto caption={p.kind.toLowerCase()} tone={1} height={300} />
        <div style={{ position: 'absolute', inset: 0,
          background: 'linear-gradient(180deg, rgba(0,0,0,0.45) 0%, transparent 40%, transparent 60%, rgba(0,0,0,0.6) 100%)' }} />
        <button onClick={onBack} style={{
          position: 'absolute', top: 12, left: 14, width: 40, height: 40, borderRadius: 20,
          background: 'rgba(0,0,0,0.4)', backdropFilter: 'blur(10px)',
          border: '1px solid rgba(255,255,255,0.2)', color: '#fff', fontSize: 18, cursor: 'pointer',
        }}>←</button>
        <div style={{ position: 'absolute', top: 12, right: 14, display: 'flex', gap: 8 }}>
          <SaveBtn />
        </div>
        {/* gallery indicators */}
        <div style={{ position: 'absolute', left: 0, right: 0, bottom: 12, display: 'flex', justifyContent: 'center', gap: 5 }}>
          {[0, 1, 2, 3].map(i => (
            <span key={i} style={{
              width: i === 0 ? 18 : 6, height: 6, borderRadius: 3,
              background: i === 0 ? '#fff' : 'rgba(255,255,255,0.5)',
            }} />
          ))}
        </div>
      </div>

      {/* Title */}
      <div style={{ padding: '20px 20px 12px' }}>
        <div style={{ display: 'flex', gap: 6, marginBottom: 12 }}>
          <Pill>{p.kind}</Pill>
          <Pill>{p.region.split(' · ')[0]}</Pill>
        </div>
        <div style={{ fontFamily: T.fontD, fontSize: 28, fontWeight: 600, color: T.textHi, letterSpacing: -0.5, lineHeight: 1.05 }}>{p.name}</div>
        <div style={{ marginTop: 8, fontFamily: T.fontB, fontSize: 13, color: T.textLo }}>{p.region} · {p.distFromYou} from you</div>
      </div>

      {/* Stats strip */}
      <div style={{ padding: '0 20px 6px' }}>
        <div style={{
          display: 'flex', gap: 0, padding: '14px 16px',
          background: T.card, border: `1px solid ${T.border}`, borderRadius: 14,
        }}>
          {[
            { v: p.vibe.split(' · ')[0], l: 'vibe' },
            { v: p.season, l: 'season' },
            { v: '4.8', l: '★ 142' },
          ].map((s, i) => (
            <div key={i} style={{ flex: 1, textAlign: 'center', borderRight: i < 2 ? `1px solid ${T.border}` : 'none' }}>
              <div style={{ fontFamily: T.fontD, fontSize: 14, fontWeight: 600, color: T.textHi, letterSpacing: -0.2 }}>{s.v}</div>
              <div style={{ fontFamily: T.fontM, fontSize: 9, color: T.textMute, letterSpacing: 1, marginTop: 4 }}>{s.l.toUpperCase()}</div>
            </div>
          ))}
        </div>
      </div>

      {/* CTAs */}
      <div style={{ padding: '18px 20px 8px', display: 'flex', gap: 10 }}>
        <button onClick={onAddToTrip} style={{
          flex: 1, padding: '14px', background: T.signal, color: '#fff', border: 'none',
          borderRadius: 100, fontFamily: T.fontB, fontSize: 15, fontWeight: 600, cursor: 'pointer',
        }}>Add to trip</button>
        <button style={{
          padding: '14px 18px', background: T.card, color: T.textHi, border: `1px solid ${T.borderSoft}`,
          borderRadius: 100, fontFamily: T.fontB, fontSize: 14, fontWeight: 500, cursor: 'pointer',
        }}>Directions</button>
      </div>

      {/* About */}
      <div style={{ padding: '24px 20px 0' }}>
        <div style={{ fontFamily: T.fontM, fontSize: 10, color: T.signal, letterSpacing: 1.6, marginBottom: 12 }}>§ ABOUT</div>
        <div style={{ fontFamily: T.fontB, fontSize: 14, color: T.text, lineHeight: 1.6 }}>
          A quiet tarn tucked above Great Langdale — clear water, big sky, and a short scramble in. Locals know to arrive at golden hour and stay for the stars. Bring layers; bring a stove.
        </div>
      </div>

      {/* Map snippet */}
      <div style={{ padding: '24px 20px 0' }}>
        <div style={{ fontFamily: T.fontM, fontSize: 10, color: T.signal, letterSpacing: 1.6, marginBottom: 12 }}>§ ON THE MAP</div>
        <div style={{ borderRadius: 14, overflow: 'hidden', border: `1px solid ${T.border}` }}>
          <MapMockV2 height={180}
            pins={[
              { x: 200, y: 100, size: 11, color: T.signal },
              { x: 60, y: 160, size: 5, color: T.textHi },
              { x: 340, y: 130, size: 5, color: T.textHi },
            ]}
            showLabels="LAKE DISTRICT · 54.45°N · 3.10°W" />
        </div>
      </div>

      {/* Nearby */}
      <div style={{ padding: '24px 0 0' }}>
        <TravelSection kicker="§ ALSO NEARBY" title="Pair this with…">
          <div style={{ overflowX: 'auto' }}>
            <div style={{ display: 'inline-flex', gap: 12, padding: '0 20px' }}>
              {PLACES.filter(x => x.id !== p.id).slice(0, 4).map((np, i) => (
                <div key={np.id} style={{ width: 180, flexShrink: 0 }}>
                  <PlaceCard place={np} photoTone={i + 2} />
                </div>
              ))}
            </div>
          </div>
        </TravelSection>
      </div>

      {/* Reviews preview */}
      <div style={{ padding: '8px 20px 0' }}>
        <div style={{ fontFamily: T.fontM, fontSize: 10, color: T.signal, letterSpacing: 1.6, marginBottom: 12 }}>§ FROM RECENT VISITORS</div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          {[
            { who: 'Lina', when: '2d', body: 'Went at sunset. Mirror-flat water, completely alone for an hour. Easily a top-5 spot in the Lakes.', rating: 5 },
            { who: 'Marco', when: '1w', body: 'Path can be slippery after rain — wear grippy shoes. Worth every step.', rating: 5 },
          ].map((r, i) => (
            <div key={i} style={{ background: T.card, border: `1px solid ${T.border}`, borderRadius: 14, padding: 14 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6 }}>
                <span style={{ fontFamily: T.fontB, fontWeight: 600, fontSize: 13, color: T.textHi }}>{r.who}</span>
                <span style={{ fontFamily: T.fontM, fontSize: 11, color: T.signal }}>{'★'.repeat(r.rating)}</span>
              </div>
              <div style={{ fontFamily: T.fontB, fontSize: 13, color: T.text, lineHeight: 1.5 }}>{r.body}</div>
              <div style={{ fontFamily: T.fontM, fontSize: 10, color: T.textMute, letterSpacing: 0.8, marginTop: 6 }}>{r.when.toUpperCase()} AGO</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ─── TRIPS HUB (list) ──────────────────────────────────────────────────
function TripsHubScreen({ onOpenTrip }) {
  const T = window.TOKENS;
  return (
    <div style={{ background: T.bg, paddingBottom: 120 }}>
      <div style={{ padding: '14px 20px 10px' }}>
        <div style={{ fontFamily: T.fontM, fontSize: 10, color: T.textMute, letterSpacing: 1.6, marginBottom: 4 }}>§ YOUR TRIPS</div>
        <div style={{ fontFamily: T.fontD, fontSize: 28, fontWeight: 600, color: T.textHi, letterSpacing: -0.5 }}>Trips</div>
      </div>
      <div style={{ padding: '0 20px 16px', display: 'flex', gap: 6 }}>
        {['Upcoming · 2', 'Saved · 5', 'Past · 8', 'Drafts · 1'].map((c, i) => <Pill key={i} active={i === 0}>{c}</Pill>)}
      </div>
      <div style={{ padding: '0 20px', display: 'flex', flexDirection: 'column', gap: 18 }}>
        {TRIPS.map((t, i) => (
          <button key={t.id} onClick={() => onOpenTrip(t)} style={{
            background: T.card, border: `1px solid ${T.border}`, borderRadius: 16,
            padding: 0, overflow: 'hidden', cursor: 'pointer', width: '100%', textAlign: 'left',
          }}>
            <div style={{ position: 'relative', height: 180 }}>
              <TPhoto caption={t.region.toLowerCase()} tone={i} height={180} />
              <div style={{ position: 'absolute', inset: 0,
                background: 'linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.7))' }} />
              <div style={{ position: 'absolute', top: 12, left: 12, display: 'flex', gap: 6 }}>
                <Pill glass>{t.days} days</Pill>
              </div>
              <div style={{ position: 'absolute', left: 14, right: 14, bottom: 12, color: '#fff' }}>
                <div style={{ fontFamily: T.fontD, fontSize: 20, fontWeight: 600, letterSpacing: -0.3, textShadow: '0 1px 6px rgba(0,0,0,0.4)' }}>{t.name}</div>
                <div style={{ fontFamily: T.fontB, fontSize: 12, opacity: 0.9, marginTop: 2 }}>{t.region} · {t.stops.length} stops</div>
              </div>
            </div>
          </button>
        ))}
        <button style={{
          background: 'transparent', border: `1px dashed ${T.borderSoft}`,
          borderRadius: 16, padding: 20, cursor: 'pointer', textAlign: 'center',
          fontFamily: T.fontD, fontSize: 15, fontWeight: 500, color: T.textLo,
        }}>+ New trip · start with AI</button>
      </div>
    </div>
  );
}

// ─── PLACES HUB ────────────────────────────────────────────────────────
function PlacesHubScreen({ onOpenPlace }) {
  const T = window.TOKENS;
  return (
    <div style={{ background: T.bg, paddingBottom: 120 }}>
      <div style={{ padding: '14px 20px 10px' }}>
        <div style={{ fontFamily: T.fontM, fontSize: 10, color: T.textMute, letterSpacing: 1.6, marginBottom: 4 }}>§ DISCOVER</div>
        <div style={{ fontFamily: T.fontD, fontSize: 28, fontWeight: 600, color: T.textHi, letterSpacing: -0.5 }}>Places</div>
      </div>
      <div style={{ padding: '0 20px 16px', overflowX: 'auto' }}>
        <div style={{ display: 'inline-flex', gap: 8 }}>
          {['All', 'Camps', 'Views', 'Cafés', 'Stays', 'Passes', 'Walks'].map((c, i) => <Pill key={i} active={i === 0}>{c}</Pill>)}
        </div>
      </div>
      <div style={{ padding: '0 20px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
        {PLACES.map((p, i) => (
          <PlaceCard key={p.id} place={p} onClick={() => onOpenPlace(p)} photoTone={i} large={i === 0 || i === 5} />
        ))}
      </div>
    </div>
  );
}

Object.assign(window, {
  TRIPS, PLACES,
  ExploreTravelScreen, TripScreen, PlaceScreen,
  TripsHubScreen, PlacesHubScreen,
});