{/* Big map */}

{mapTilerReady && (

{liveTiles.map(tile => (

))}

)}

{mapTilerReady ? 'MAPTILER LIVE TILES' : 'PLACEHOLDER MAP · ADD MAPTILER KEY'}

{/* Top controls */}

setQuery(e.target.value)} onKeyDown={e => { if (e.key === 'Enter') searchRoute(); }} aria-label="Search destination" placeholder="Search this area…" style={{ flex: 1, minWidth: 0, background: 'transparent', border: 'none', outline: 'none', fontFamily: T.fontB, fontSize: 13, color: T.textHi, }} />

setLayers(!layers)} active={layers} label="layers">

{/* Layers panel */} {layers && (

MAP LAYERS

{[ { k: 'BOAT byways', on: true, c: T.signal }, { k: 'UCR network', on: true, c: T.signal }, { k: 'ORPA candidate', on: false, c: T.amber }, { k: 'TRO/closures', on: true, c: T.rust }, { k: 'Recent reports', on: true, c: T.signalGlow }, { k: 'Contour lines', on: true, c: T.textMute }, ].map(l => (

{l.k}

))}

)} {/* Bottom sheet with selected route */}

{(routeStatus || routeError || saveStatus) && (

{routeError || saveStatus || routeStatus}

)}

); } // ──────────────────────────────────────────────────────────── // ROUTE DETAIL SCREEN // ──────────────────────────────────────────────────────────── function RouteDetailScreen({ route, onBack, onStartNav }) { const r = route || ROUTES[0]; const [reportOpen, setReportOpen] = React.useState(false); const [reportNote, setReportNote] = React.useState(''); const [reportStatus, setReportStatus] = React.useState(''); const [saveStatus, setSaveStatus] = React.useState(''); const saveRoute = async () => { setSaveStatus('Saving…'); try { await window.ROAMR_API.saveRoute(r); setSaveStatus('Saved to Supabase'); } catch (err) { setSaveStatus(err.message || 'Sign in to save routes.'); } }; const submitReport = async () => { setReportStatus('Submitting…'); try { await window.ROAMR_API.submitReport(r, reportNote); setReportNote(''); setReportOpen(false); setReportStatus('Report submitted for moderation'); } catch (err) { setReportStatus(err.message || 'Report failed.'); } }; return (

{/* Hero map */}

{/* Title block */}

}>{r.activity.toUpperCase()} {r.tags && r.tags.map(t => {t})}

{r.name}

{r.region.toUpperCase()}

{/* Stats row */}

{/* Actions */}

{saveStatus &&

{saveStatus}

} {/* Access confidence panel */}

§ ACCESS CONFIDENCE

{[ { label: 'Designated BOAT', src: 'Derbyshire CC · ROW Map · 2024', status: 'ok' }, { label: 'No active TRO', src: 'DCC TRO database · checked 8d ago', status: 'ok' }, { label: 'TRF route reference', src: 'TRF GreenRoad · 2024-Q2', status: 'ok' }, { label: 'Seasonal advisory', src: '"Avoid Nov-Feb during wet" · TRF', status: 'warn' }, ].map((s, i) => (

{s.status === 'ok' ? '✓' : '!'}

{s.label}

{s.src.toUpperCase()}

))}

ROAMR's access confidence is a planning aid, not legal advice. Always verify local signs and authority notices before riding.

{/* Surface profile */}

§ SURFACE PROFILE

{/* Elevation */}

§ ELEVATION

{/* AI summary */}

§ AI SUMMARY

A classic Peak District byway with a manageable rocky descent at km 9. Surface is dry across recent reports — good for a big ADV bike on mixed tyres. The optional pub stop at the halfway point makes this a popular weekend loop. One seasonal advisory: TRF recommends avoiding Nov–Feb during prolonged wet.

GENERATED 14 MIN AGO · 12 SOURCES

{/* Recent reports */}

§ RECENT REPORTS · 3

{reportOpen && (

setReportNote(e.target.value)} rows={3}
              placeholder="What changed on the ground?"
              style={{ width: '100%', background: T.bg, border: `1px solid ${T.borderSoft}`, color: T.textHi, padding: 10, fontFamily: T.fontB, fontSize: 13, resize: 'vertical' }} />
            <button onClick={submitReport} style={{ marginTop: 8, background: T.signal, color: '#fff', border: 'none', padding: '10px 12px', fontFamily: T.fontB, fontWeight: 600, cursor: 'pointer' }}>Submit report</button>
          </div>
        )}
        {reportStatus && <div style={{ marginBottom: 10, fontFamily: T.fontM, fontSize: 10, color: reportStatus.includes('submitted') ? T.lichen : T.amber, letterSpacing: 0.8 }}>{reportStatus}</div>}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {[
            { type: 'OK', color: T.lichen, body: 'Rode in light rain, surface holding up.', by: 'James M.', when: '1d' },
            { type: 'WATER', color: T.slate, body: 'Ford at km 7 deeper than usual. Crossable with care.', by: 'Tom R.', when: '4d' },
            { type: 'TREE', color: T.amber, body: 'Small fallen branch around km 11 — easy to ride past.', by: 'Sarah K.', when: '8d' },
          ].map((rp, i) => (
            <div key={i} style={{ background: T.card, border: `1px solid ${T.border}`, padding: 12, display: 'flex', gap: 10 }}>
              <div style={{ fontFamily: T.fontM, fontSize: 9, color: rp.color, border: `1px solid ${rp.color}`, padding: '2px 5px', height: 'fit-content', letterSpacing: 1 }}>{rp.type}</div>
              <div style={{ flex: 1 }}>
                <div style={{ fontFamily: T.fontB, fontSize: 13, color: T.text, lineHeight: 1.4 }}>{rp.body}</div>
                <div style={{ fontFamily: T.fontM, fontSize: 9, color: T.textMute, letterSpacing: 0.8, marginTop: 4 }}>{rp.by.toUpperCase()} · {rp.when.toUpperCase()}</div>
              </div>
            </div>
          ))}
        </div>
      </div>

{/* Trust timeline */}
      <div style={{ padding: '20px 18px' }}>
        <div style={{ fontFamily: T.fontM, fontSize: 10, color: T.signal, letterSpacing: 1.5, marginBottom: 14 }}>§ TRUST TIMELINE</div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12, fontFamily: T.fontM, fontSize: 11, color: T.textMid, letterSpacing: 0.3 }}>
          {[
            ['Created', '2021-04-14', 'TRF Derbyshire'],
            ['Last ridden', '2026-05-23', '12 contributors this month'],
            ['Last report', '2026-05-24', 'OK — surface dry'],
            ['Moderator check', '2026-05-17', 'Verified by ROAMR'],
            ['Legal source', '2026-05-17', 'DCC ROW database'],
          ].map(([k, d, v], i) => (
            <div key={i} style={{ display: 'flex', gap: 14, alignItems: 'baseline' }}>
              <span style={{ width: 130, color: T.textMute, letterSpacing: 1 }}>{k.toUpperCase()}</span>
              <span style={{ width: 90, color: T.textHi }}>{d}</span>
              <span style={{ flex: 1, color: T.textLo, fontFamily: T.fontB, fontSize: 12 }}>{v}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ────────────────────────────────────────────────────────────
// SAVED SCREEN
// ────────────────────────────────────────────────────────────
function SavedScreen({ onOpenRoute }) {
  const [routes, setRoutes] = React.useState([]);
  const [status, setStatus] = React.useState('Loading saved routes…');

React.useEffect(() => {
    loadSaved();
    window.addEventListener('roamr:saves-changed', loadSaved);
    return () => window.removeEventListener('roamr:saves-changed', loadSaved);
  }, [loadSaved]);

return (
    <div style={{ background: T.bg, paddingBottom: 100 }}>
      <div style={{ padding: '18px' }}>
        <div style={{ fontFamily: T.fontM, fontSize: 10, color: T.textMute, letterSpacing: 1.6, marginBottom: 4 }}>§ LIBRARY</div>
        <div style={{ fontFamily: T.fontD, fontSize: 28, fontWeight: 600, color: T.textHi, letterSpacing: -0.5 }}>Saved</div>
      </div>
      <div style={{ padding: '0 18px 14px', display: 'flex', gap: 6 }}>
        {[`All · ${routes.length}`, 'Offline · later', 'Collections · later', 'Drafts · later'].map((t, i) => <Chip key={i} active={i === 0}>{t}</Chip>)}
      </div>

<SectionHead kicker="§ SAVED ROUTES" title="Your library" />
      <div style={{ padding: '0 18px', display: 'flex', flexDirection: 'column', gap: 14 }}>
        {status && <div style={{ background: T.card, border: `1px solid ${T.border}`, padding: 14, fontFamily: T.fontB, color: T.textLo, fontSize: 13 }}>{status}</div>}
        {routes.map(r => (
          <div key={r.id} style={{ position: 'relative' }}>
            <RouteCard route={r} onClick={() => onOpenRoute(r)} compact />
            <button onClick={async () => { await window.ROAMR_API.unsaveRoute(r.id); loadSaved(); }} style={{ position: 'absolute', top: 8, right: 8, background: T.bg, color: T.textLo, border: `1px solid ${T.borderSoft}`, padding: '6px 8px', fontFamily: T.fontM, fontSize: 9, cursor: 'pointer' }}>REMOVE</button>
          </div>
        ))}
      </div>
    </div>
  );
}

// ────────────────────────────────────────────────────────────
// PROFILE SCREEN
// ────────────────────────────────────────────────────────────
function ProfileScreen({ onNavigate }) {
  const [user, setUser] = React.useState(window.ROAMR_STATE?.user || null);
  const [profile, setProfile] = React.useState(window.ROAMR_STATE?.profile || null);
  const [email, setEmail] = React.useState('');
  const [password, setPassword] = React.useState('');
  const [status, setStatus] = React.useState('Checking session…');

React.useEffect(() => {
    refreshProfile();
    const onAuth = () => refreshProfile();
    window.addEventListener('roamr:auth', onAuth);
    return () => window.removeEventListener('roamr:auth', onAuth);
  }, [refreshProfile]);

const signOut = async () => {
    setStatus('Signing out…');
    await window.ROAMR_API.signOut();
    setProfile(null);
    setUser(null);
    setStatus('Signed out.');
  };

const displayEmail = profile?.email || user?.email || 'Not signed in';
  const initials = displayEmail?.[0]?.toUpperCase() || 'R';

return (
    <div style={{ background: T.bg, paddingBottom: 100 }}>
      <div style={{ padding: '24px 18px 20px' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 18 }}>
          <div style={{
            width: 56, height: 56, background: T.signal,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontFamily: T.fontD, fontSize: 22, fontWeight: 600, color: '#fff',
          }}>{initials}</div>
          <div>
            <div style={{ fontFamily: T.fontD, fontSize: 20, fontWeight: 600, color: T.textHi, letterSpacing: -0.3 }}>{profile?.display_name || displayEmail}</div>
            <div style={{ fontFamily: T.fontM, fontSize: 10, color: T.textMute, letterSpacing: 1.2, marginTop: 4 }}>{user ? `SIGNED IN · ${profile?.role || 'USER'}` : 'ACCOUNT REQUIRED FOR SAVES'}</div>
          </div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 14, padding: 16, background: T.card, border: `1px solid ${T.border}` }}>
          <Stat value="42" unit="ROUTES" />
          <Stat value="318" unit="KM YTD" />
          <Stat value="8" unit="REPORTS" />
        </div>
      </div>

<div style={{ padding: '0 18px 16px' }}>
        <div style={{ background: T.card, border: `1px solid ${T.border}`, padding: 14, display: 'flex', flexDirection: 'column', gap: 10 }}>
          {!user && (
            <>
              <input value={email} onChange={e => setEmail(e.target.value)} placeholder="Email" autoComplete="email" style={{ background: T.bg, border: `1px solid ${T.borderSoft}`, color: T.textHi, padding: 12, fontFamily: T.fontB, fontSize: 14 }} />
              <input value={password} onChange={e => setPassword(e.target.value)} placeholder="Password" type="password" autoComplete="current-password" style={{ background: T.bg, border: `1px solid ${T.borderSoft}`, color: T.textHi, padding: 12, fontFamily: T.fontB, fontSize: 14 }} />
              <div style={{ display: 'flex', gap: 8 }}>
                <button onClick={() => submitAuth('signin')} style={{ flex: 1, background: T.signal, color: '#fff', border: 'none', padding: 12, fontFamily: T.fontB, fontWeight: 600, cursor: 'pointer' }}>Sign in</button>
                <button onClick={() => submitAuth('signup')} style={{ flex: 1, background: T.cardElev, color: T.textHi, border: `1px solid ${T.borderSoft}`, padding: 12, fontFamily: T.fontB, fontWeight: 600, cursor: 'pointer' }}>Sign up</button>
              </div>
            </>
          )}
          {user && <button onClick={signOut} style={{ background: T.signal, color: '#fff', border: 'none', padding: 12, fontFamily: T.fontB, fontWeight: 600, cursor: 'pointer' }}>Sign out</button>}
          {status && <div style={{ fontFamily: T.fontM, fontSize: 10, color: status.includes('Signed') || status === '' ? T.lichen : T.textLo, letterSpacing: 0.8 }}>{status}</div>}
        </div>
      </div>

<div style={{ padding: '0 18px 16px' }}>
        <button onClick={() => onNavigate('upgrade')} style={{
          width: '100%', textAlign: 'left',
          background: T.cardElev, border: `1px solid ${T.signalDeep}`, borderLeft: `3px solid ${T.signal}`,
          padding: '16px', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 12,
        }}>
          <div style={{ flex: 1 }}>
            <div style={{ fontFamily: T.fontM, fontSize: 9, color: T.signal, letterSpacing: 1.5, marginBottom: 4 }}>YOUR PLAN · FREE</div>
            <div style={{ fontFamily: T.fontD, fontSize: 15, fontWeight: 600, color: T.textHi }}>Upgrade to Premium</div>
          </div>
          <span style={{ fontFamily: T.fontM, color: T.signalGlow }}>→</span>
        </button>
      </div>

<div style={{ padding: '0 18px' }}>
        {[
          ['§ MY ACTIVITIES', ['Adv motorbike — Big-ADV', 'Hiking', 'Gravel cycling']],
          ['§ MY BIKE', ['Triumph Tiger 900 GT', '21" front · Dual sport tyres']],
          ['§ PREFERENCES', ['Avoid deep mud', 'Avoid private-risk routes', 'Voice guidance on']],
          ['§ DEVICES', ['Apple Watch Series 10', 'Garmin Tread 2 (export)']],
          ['§ ACCOUNT', ['Email · alex@…', 'Subscription · Free', 'Sign out']],
        ].map(([title, items]) => (
          <div key={title} style={{ marginBottom: 24 }}>
            <div style={{ fontFamily: T.fontM, fontSize: 10, color: T.signal, letterSpacing: 1.5, marginBottom: 10 }}>{title}</div>
            <div style={{ background: T.card, border: `1px solid ${T.border}` }}>
              {items.map((it, i) => (
                <div key={i} style={{
                  padding: '14px 14px', borderTop: i > 0 ? `1px solid ${T.border}` : 'none',
                  fontFamily: T.fontB, fontSize: 14, color: T.text, display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                }}>
                  {it}<span style={{ color: T.textMute }}>›</span>
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { ROUTES, RouteCard, ExploreScreen, MapScreen, RouteDetailScreen, SavedScreen, ProfileScreen });