{!isMobile && ( ); } // ── Detail hero (gradient banner used in slide-out details) ─────────────────── function DetailHero({ color, emoji, height = 220, fontSize = 80, gradientEnd = '55', badge, onClose }) { return (

{emoji}

{badge && ( {badge} )}

); } // ── Detail stats grid (3-4 stat cards in a row) ─────────────────────────────── function DetailStatsGrid({ stats, valueSize = 13 }) { return (

{stats.map(s => (

{s.label}

{s.val}

))}

); } // ── Tabs (used inside slide-out detail) ──────────────────────────────────────── function DetailTabs({ tabs, active, onChange }) { return (

{tabs.map(t => ( ))}

); } // ── Toast system ─────────────────────────────────────────────────────────────── function toast(message, type = 'success') { if (typeof window !== 'undefined' && window.__rmtToast) window.__rmtToast(message, type); } function Toast({ message, type, onDismiss }) { React.useEffect(() => { const t = setTimeout(onDismiss, 3000); return () => clearTimeout(t); }, [onDismiss]); const accent = type === 'error' ? TOKENS.color.error : TOKENS.color.accent; return (

{message}

); } function ToastContainer() { const [toasts, setToasts] = React.useState([]); React.useEffect(() => { window.__rmtToast = (message, type = 'success') => { setToasts(prev => [...prev, { id: Date.now() + Math.random(), message, type }]); }; return () => { delete window.__rmtToast; }; }, []); return (

{toasts.map(t => ( setToasts(prev => prev.filter(x => x.id !== t.id))} /> ))}

); } // ── Modal shell ──────────────────────────────────────────────────────────────── function ModalShell({ title, onClose, children, width = 480, footer }) { const modalRef = React.useRef(null); const titleId = `modal-title-${title ? title.replace(/\s+/g, '-').toLowerCase() : 'dlg'}`; React.useEffect(() => { const modal = modalRef.current; // Focus the modal container on mount so keyboard users are placed correctly if (modal) modal.focus(); const onKey = (e) => { if (e.key === 'Escape') { e.stopPropagation(); onClose(); return; } // Focus trap — keep Tab cycling within the modal if (e.key === 'Tab' && modal) { const focusable = Array.from(modal.querySelectorAll( 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])' )); if (!focusable.length) return; const first = focusable[0], last = focusable[focusable.length - 1]; if (e.shiftKey && document.activeElement === first) { e.preventDefault(); last.focus(); } else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first.focus(); } } }; window.addEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey); }, [onClose]); return (

); } // ── Edit Profile (pre-filled) ────────────────────────────────────────────────── function EditProfileModal({ onClose }) { const [name, setName] = React.useState('Alex Lawson'); const [email, setEmail] = React.useState('alex@rmtctrl.app'); const [city, setCity] = React.useState('Sydney'); const [country, setCountry] = React.useState('Australia'); const [currency, setCurrency] = React.useState('AUD'); const [bio, setBio] = React.useState('Remote-first product designer. Always chasing fast Wi-Fi and good coffee.'); return ( { toast('Profile updated'); onClose(); }}>Save changes Cancel }>

Profile photo · Click avatar to upload

Bio

setBio(e.target.value)} rows={3} style={{ width: '100%', background: TOKENS.color.surface2, border: '1.5px solid #26262E', borderRadius: 12, padding: '12px 14px', fontFamily: "'Inter',sans-serif", fontSize: 14, color: TOKENS.color.textPrimary, outline: 'none', resize: 'vertical' }} />
        </div>
      </div>
    </ModalShell>
  );
}

// ── Change Password ────────────────────────────────────────────────────────────
function ChangePasswordModal({ onClose }) {
  const [current, setCurrent] = React.useState('');
  const [next, setNext] = React.useState('');
  const [confirm, setConfirm] = React.useState('');
  const mismatch = next && confirm && next !== confirm;
  return (
    <ModalShell title="Change password" onClose={onClose} width={460} footer={
      <>
        <Btn variant="primary" size="md" fullWidth onClick={() => { toast('Password updated'); onClose(); }} disabled={!current || !next || mismatch}>Update password</Btn>
        <Btn variant="secondary" size="md" onClick={onClose}>Cancel</Btn>
      </>
    }>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
        <Input label="Current password" value={current} onChange={setCurrent} type="password" />
        <Input label="New password" value={next} onChange={setNext} type="password" helper="Min 12 characters · Use a passphrase" />
        <Input label="Confirm new password" value={confirm} onChange={setConfirm} type="password" error={mismatch ? "Passwords don't match" : null} />
      </div>
    </ModalShell>
  );
}

// ── Two-factor Authentication ──────────────────────────────────────────────────
function TwoFAModal({ onClose }) {
  const [code, setCode] = React.useState('');
  return (
    <ModalShell title="Two-factor authentication" onClose={onClose} width={460} footer={
      <>
        <Btn variant="primary" size="md" fullWidth onClick={() => { toast('Two-factor authentication enabled'); onClose(); }}>Verify & enable</Btn>
        <Btn variant="secondary" size="md" onClick={onClose}>Cancel</Btn>
      </>
    }>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
        <p style={{ fontFamily: "'Inter',sans-serif", fontSize: 14, color: TOKENS.color.textSecondary, margin: 0, lineHeight: 1.6 }}>
          Scan the QR code with your authenticator app (1Password, Authy, Google Authenticator), then enter the 6-digit code below.
        </p>
        <div style={{ alignSelf: 'center', width: 160, height: 160, background: TOKENS.color.textPrimary, borderRadius: 12, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <div style={{ width: 132, height: 132, background: 'repeating-linear-gradient(0deg, #0A0A0B 0 6px, transparent 6px 10px), repeating-linear-gradient(90deg, #0A0A0B 0 6px, transparent 6px 10px)' }} />
        </div>
        <div style={{ background: TOKENS.color.surface2, border: '1px solid #26262E', borderRadius: 10, padding: '10px 14px', fontFamily: "'JetBrains Mono',monospace", fontSize: 13, color: TOKENS.color.textSecondary, textAlign: 'center', letterSpacing: '0.1em' }}>
          JBSW Y3DP EHPK 3PXP
        </div>
        <Input label="Verification code" value={code} onChange={setCode} mono helper="6-digit code" />
      </div>
    </ModalShell>
  );
}

// ── Sign Out ───────────────────────────────────────────────────────────────────
function SignOutModal({ onClose }) {
  return (
    <ModalShell title="Sign out" onClose={onClose} width={420} footer={
      <>
        <Btn variant="primary" size="md" fullWidth onClick={() => { toast('Signed out'); onClose(); }}>Sign out</Btn>
        <Btn variant="secondary" size="md" onClick={onClose}>Cancel</Btn>
      </>
    }>
      <p style={{ fontFamily: "'Inter',sans-serif", fontSize: 15, color: TOKENS.color.textSecondary, margin: 0, lineHeight: 1.6 }}>
        You'll be signed out of RMTCTRL on this device. Any unsynced changes will be saved automatically.
      </p>
    </ModalShell>
  );
}

// ── Delete Account ─────────────────────────────────────────────────────────────
function DeleteAccountModal({ onClose }) {
  const [confirm, setConfirm] = React.useState('');
  return (
    <ModalShell title="Delete account" onClose={onClose} width={460} footer={
      <>
        <button onClick={() => { toast('Account deletion requested', 'error'); onClose(); }} disabled={confirm !== 'DELETE'} style={{ flex: 1, height: 42, borderRadius: 10, border: 'none', cursor: confirm === 'DELETE' ? 'pointer' : 'not-allowed', background: confirm === 'DELETE' ? TOKENS.color.error : TOKENS.color.errorMuted, color: confirm === 'DELETE' ? '#fff' : TOKENS.color.textSecondary, fontFamily: "'Inter',sans-serif", fontSize: 14, fontWeight: 600 }}>
          Permanently delete account
        </button>
        <Btn variant="secondary" size="md" onClick={onClose}>Cancel</Btn>
      </>
    }>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
        <div style={{ background: 'rgba(255,59,92,0.08)', border: '1px solid rgba(255,59,92,0.3)', borderRadius: 10, padding: '12px 14px' }}>
          <div style={{ fontFamily: "'Inter',sans-serif", fontSize: 13, fontWeight: 600, color: TOKENS.color.error, marginBottom: 4 }}>This action is irreversible</div>
          <div style={{ fontFamily: "'Inter',sans-serif", fontSize: 13, color: TOKENS.color.textSecondary, lineHeight: 1.5 }}>All trips, vault documents, expenses and saved workspaces will be permanently deleted.</div>
        </div>
        <Input label='Type "DELETE" to confirm' value={confirm} onChange={setConfirm} mono />
      </div>
    </ModalShell>
  );
}

// ── Add Expense ────────────────────────────────────────────────────────────────
function AddExpenseModal({ onClose }) {
  const [vendor, setVendor] = React.useState('');
  const [amount, setAmount] = React.useState('');
  const [cat, setCat] = React.useState('Food');
  const [note, setNote] = React.useState('');
  const cats = ['Food', 'Transport', 'Accommodation', 'Workspace', 'Other'];
  return (
    <ModalShell title="Add expense" onClose={onClose} width={500} footer={
      <>
        <Btn variant="primary" size="md" fullWidth onClick={() => { toast(`Expense saved · €${amount} ${vendor}`); onClose(); }} disabled={!vendor || !amount}>Save expense</Btn>
        <Btn variant="secondary" size="md" onClick={onClose}>Cancel</Btn>
      </>
    }>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
        <Input label="Vendor / merchant" value={vendor} onChange={setVendor} helper="e.g. Time Out Market" />
        <div style={{ display: 'flex', gap: 12 }}>
          <div style={{ flex: 1 }}>
            <Input label="Amount" value={amount} onChange={setAmount} mono prefix="€" />
          </div>
          <div style={{ flex: 1, background: TOKENS.color.surface2, borderRadius: 12, border: '1.5px solid #26262E', padding: '8px 14px' }}>
            <div style={{ fontFamily: "'Inter',sans-serif", fontSize: 11, color: TOKENS.color.textSecondary, marginBottom: 4 }}>Date</div>
            <div style={{ fontFamily: "'JetBrains Mono',monospace", fontSize: 14, color: TOKENS.color.textPrimary }}>TODAY · 14:32</div>
          </div>
        </div>
        <div>
          <div style={{ fontFamily: "'Inter',sans-serif", fontSize: 12, color: TOKENS.color.textSecondary, marginBottom: 8 }}>Category</div>
          <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
            {cats.map(c => <FilterChip key={c} label={c} selected={cat === c} onClick={() => setCat(c)} />)}
          </div>
        </div>
        <div>
          <div style={{ fontFamily: "'Inter',sans-serif", fontSize: 12, color: TOKENS.color.textSecondary, marginBottom: 6 }}>Note (optional)</div>
          <textarea value={note} onChange={e => setNote(e.target.value)} rows={2} style={{ width: '100%', background: TOKENS.color.surface2, border: '1.5px solid #26262E', borderRadius: 12, padding: '10px 14px', fontFamily: "'Inter',sans-serif", fontSize: 14, color: TOKENS.color.textPrimary, outline: 'none', resize: 'vertical' }} />
        </div>
      </div>
    </ModalShell>
  );
}

// ── Post Job ───────────────────────────────────────────────────────────────────
function PostJobModal({ onClose }) {
  const [title, setTitle] = React.useState('');
  const [company, setCompany] = React.useState('');
  const [type, setType] = React.useState('Full-time');
  const [cat, setCat] = React.useState('Engineering');
  const [tz, setTz] = React.useState('Any');
  const [salary, setSalary] = React.useState('');
  const [desc, setDesc] = React.useState('');
  const types = ['Full-time', 'Part-time', 'Contract', 'Freelance'];
  const cats = ['Engineering', 'Design', 'Marketing', 'Product', 'Writing', 'Support', 'Finance'];
  const tzs = ['Any', 'Americas', 'EMEA', 'APAC'];
  return (
    <ModalShell title="Post a job" onClose={onClose} width={560} footer={
      <>
        <Btn variant="primary" size="md" fullWidth onClick={() => { toast(`Job posted · ${title} at ${company}`); onClose(); }} disabled={!title || !company || !desc}>Post job</Btn>
        <Btn variant="secondary" size="md" onClick={onClose}>Cancel</Btn>
      </>
    }>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
        <Input label="Role title" value={title} onChange={setTitle} helper="e.g. Senior Full-Stack Engineer" />
        <Input label="Company" value={company} onChange={setCompany} />
        <div style={{ display: 'flex', gap: 12 }}>
          <div style={{ flex: 1 }}>
            <div style={{ fontFamily: "'Inter',sans-serif", fontSize: 12, color: TOKENS.color.textSecondary, marginBottom: 6 }}>Contract type</div>
            <select value={type} onChange={e => setType(e.target.value)} style={{ width: '100%', height: 40, background: TOKENS.color.surface2, border: '1.5px solid #26262E', borderRadius: 12, padding: '0 14px', fontFamily: "'Inter',sans-serif", fontSize: 14, color: TOKENS.color.textPrimary, outline: 'none', cursor: 'pointer' }}>
              {types.map(t => <option key={t} value={t}>{t}</option>)}
            </select>
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ fontFamily: "'Inter',sans-serif", fontSize: 12, color: TOKENS.color.textSecondary, marginBottom: 6 }}>Category</div>
            <select value={cat} onChange={e => setCat(e.target.value)} style={{ width: '100%', height: 40, background: TOKENS.color.surface2, border: '1.5px solid #26262E', borderRadius: 12, padding: '0 14px', fontFamily: "'Inter',sans-serif", fontSize: 14, color: TOKENS.color.textPrimary, outline: 'none', cursor: 'pointer' }}>
              {cats.map(c => <option key={c} value={c}>{c}</option>)}
            </select>
          </div>
        </div>
        <div style={{ display: 'flex', gap: 12 }}>
          <div style={{ flex: 1 }}>
            <div style={{ fontFamily: "'Inter',sans-serif", fontSize: 12, color: TOKENS.color.textSecondary, marginBottom: 6 }}>Timezone</div>
            <select value={tz} onChange={e => setTz(e.target.value)} style={{ width: '100%', height: 40, background: TOKENS.color.surface2, border: '1.5px solid #26262E', borderRadius: 12, padding: '0 14px', fontFamily: "'Inter',sans-serif", fontSize: 14, color: TOKENS.color.textPrimary, outline: 'none', cursor: 'pointer' }}>
              {tzs.map(t => <option key={t} value={t}>{t}</option>)}
            </select>
          </div>
          <div style={{ flex: 1 }}><Input label="Salary range" value={salary} onChange={setSalary} mono helper="$130k – $160k" /></div>
        </div>
        <div>
          <div style={{ fontFamily: "'Inter',sans-serif", fontSize: 12, color: TOKENS.color.textSecondary, marginBottom: 6 }}>Role description</div>
          <textarea value={desc} onChange={e => setDesc(e.target.value)} rows={4} placeholder="What will the person do? Who's the team? What's the impact?" style={{ width: '100%', background: TOKENS.color.surface2, border: '1.5px solid #26262E', borderRadius: 12, padding: '12px 14px', fontFamily: "'Inter',sans-serif", fontSize: 14, color: TOKENS.color.textPrimary, outline: 'none', resize: 'vertical' }} />
        </div>
      </div>
    </ModalShell>
  );
}

// ── Currency Converter ─────────────────────────────────────────────────────────
function CurrencyModal({ onClose }) {
  // TODO: set EXCHANGERATE_API_KEY to your key from exchangerate-api.com (free tier available)
  const EXCHANGERATE_API_KEY = '';

// Fetch live rates on mount if key is configured
  React.useEffect(() => {
    if (!EXCHANGERATE_API_KEY) return;
    setRatesLoading(true);
    fetch(`https://v6.exchangerate-api.com/v6/${EXCHANGERATE_API_KEY}/latest/AUD`)
      .then(r => r.json())
      .then(data => {
        if (data.result === 'success' && data.conversion_rates) {
          setRates(data.conversion_rates);
          setRatesLive(true);
        }
      })
      .catch(() => {}) // silently fall back to hardcoded rates
      .finally(() => setRatesLoading(false));
  }, []);

<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8 }}>
          <button onClick={swap} aria-label="Swap currencies" style={{ width: 32, height: 32, borderRadius: 8, background: TOKENS.color.surface, border: `1px solid ${TOKENS.color.border}`, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', color: TOKENS.color.textSecondary, fontFamily: "'JetBrains Mono',monospace", fontSize: 14 }}>⇅</button>
          <MonoText size={11} color="#5C5C66">1 {from.code} = {rate.toFixed(4)} {to.code}</MonoText>
        </div>

<Card style={{ padding: 16 }}>
          <div style={{ fontFamily: "'JetBrains Mono',monospace", fontSize: 10, fontWeight: 600, color: TOKENS.color.textTertiary, letterSpacing: '0.08em', marginBottom: 8 }}>TO</div>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, background: TOKENS.color.surface2, borderRadius: 10, padding: '6px 10px' }}>
              <span style={{ fontSize: 18 }}>{to.flag}</span>
              <span style={{ fontFamily: "'JetBrains Mono',monospace", fontSize: 14, fontWeight: 600, color: TOKENS.color.textPrimary }}>{to.code}</span>
            </div>
            <div style={{ fontFamily: "'JetBrains Mono',monospace", fontSize: 26, fontWeight: 600, color: TOKENS.color.accent, textAlign: 'right' }}>{converted}</div>
          </div>
        </Card>

<div>
          <div style={{ fontFamily: "'JetBrains Mono',monospace", fontSize: 10, fontWeight: 600, color: TOKENS.color.textTertiary, letterSpacing: '0.08em', marginBottom: 8 }}>QUICK SWITCH</div>
          <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
            {recentCurrencies.map(c => (
              <button key={c.code} onClick={() => setTo(c)} style={{ background: to.code === c.code ? 'rgba(0,255,148,0.1)' : TOKENS.color.surface2, border: `1px solid ${to.code === c.code ? TOKENS.color.accent : TOKENS.color.border}`, borderRadius: 999, padding: '5px 10px', fontFamily: "'JetBrains Mono',monospace", fontSize: 12, fontWeight: 600, color: to.code === c.code ? TOKENS.color.accent : TOKENS.color.textSecondary, cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 5 }}>
                <span>{c.flag}</span>{c.code}
              </button>
            ))}
          </div>
        </div>
      </div>
    </ModalShell>
  );
}

// ── Submit Event ───────────────────────────────────────────────────────────────
function SubmitEventModal({ onClose }) {
  const [title, setTitle] = React.useState('');
  const [type, setType] = React.useState('Meetup');
  const [city, setCity] = React.useState('');
  const [loc, setLoc] = React.useState('');
  const [date, setDate] = React.useState('');
  const [desc, setDesc] = React.useState('');
  const types = ['Meetup', 'Conference', 'Workshop', 'Co-working Day', 'Social'];
  return (
    <ModalShell title="Submit an event" onClose={onClose} width={560} footer={
      <>
        <Btn variant="primary" size="md" fullWidth onClick={() => { toast('Event submitted for review'); onClose(); }} disabled={!title || !city || !date}>Submit event</Btn>
        <Btn variant="secondary" size="md" onClick={onClose}>Cancel</Btn>
      </>
    }>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
        <Input label="Event title" value={title} onChange={setTitle} helper="e.g. Lisbon Digital Nomad Meetup" />
        <div>
          <div style={{ fontFamily: "'Inter',sans-serif", fontSize: 12, color: TOKENS.color.textSecondary, marginBottom: 8 }}>Event type</div>
          <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
            {types.map(t => <FilterChip key={t} label={t} selected={type === t} onClick={() => setType(t)} />)}
          </div>
        </div>
        <div style={{ display: 'flex', gap: 12 }}>
          <div style={{ flex: 1 }}><Input label="City" value={city} onChange={setCity} /></div>
          <div style={{ flex: 1 }}><Input label="Date & time" value={date} onChange={setDate} mono helper="e.g. Thu 8 May · 19:00" /></div>
        </div>
        <Input label="Venue / location" value={loc} onChange={setLoc} helper="e.g. Hub Lisbon, Chiado" />
        <div>
          <div style={{ fontFamily: "'Inter',sans-serif", fontSize: 12, color: TOKENS.color.textSecondary, marginBottom: 6 }}>Description</div>
          <textarea value={desc} onChange={e => setDesc(e.target.value)} rows={4} placeholder="What's the event about? Who should come?" style={{ width: '100%', background: TOKENS.color.surface2, border: '1.5px solid #26262E', borderRadius: 12, padding: '12px 14px', fontFamily: "'Inter',sans-serif", fontSize: 14, color: TOKENS.color.textPrimary, outline: 'none', resize: 'vertical' }} />
        </div>
      </div>
    </ModalShell>
  );
}

// ── Error boundary ─────────────────────────────────────────────────────────────
class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, error: null };
  }
  static getDerivedStateFromError(error) {
    return { hasError: true, error };
  }
  componentDidCatch(error, info) {
    console.error('[RMTCTRL] Uncaught error:', error, info.componentStack);
  }
  render() {
    if (this.state.hasError) {
      const { fallback, onReset } = this.props;
      if (fallback) return fallback(this.state.error, () => this.setState({ hasError: false, error: null }));
      return (
        <div style={{
          flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
          padding: '40px 24px', gap: 16, textAlign: 'center',
        }}>
          <div style={{ fontSize: 48 }}>⚠️</div>
          <div style={{ fontFamily: "'Inter',sans-serif", fontSize: 18, fontWeight: 700, color: TOKENS.color.textPrimary }}>
            Something went wrong
          </div>
          <div style={{ fontFamily: "'Inter',sans-serif", fontSize: 14, color: TOKENS.color.textSecondary, maxWidth: 320 }}>
            {this.state.error?.message || 'An unexpected error occurred in this screen.'}
          </div>
          <button
            onClick={() => { this.setState({ hasError: false, error: null }); if (onReset) onReset(); }}
            style={{
              height: 40, padding: '0 20px', borderRadius: 10, border: 'none', cursor: 'pointer',
              background: TOKENS.color.accent, color: TOKENS.color.bg,
              fontFamily: "'Inter',sans-serif", fontSize: 14, fontWeight: 600,
            }}
          >Try again</button>
        </div>
      );
    }
    return this.props.children;
  }
}

// ── Main Web App ───────────────────────────────────────────────────────────────
// ── Hash routing helpers ──────────────────────────────────────────────────────
// Parses the current URL hash (#home, #trips, etc.) into a screen name.
// Falls back to 'home' for empty or unknown hashes.
const VALID_SCREENS = new Set([
  'home','trips','workspaces','accommodation','vault','expenses',
  'location','whatson','jobs','profile','add-segment','workspace-detail',
  'doc-detail','add-workspace','submit-review',
]);
function screenFromHash() {
  const hash = window.location.hash.replace('#', '') || 'home';
  return VALID_SCREENS.has(hash) ? hash : 'home';
}

function WebApp() {
  const [screen, setScreen] = React.useState(screenFromHash);
  const [dashState, setDashState] = React.useState(WEB_TWEAK_DEFAULTS.dashboardState);
  const [cmdOpen, setCmdOpen] = React.useState(false);
  const [addSegOpen, setAddSegOpen] = React.useState(false);
  const [postJobOpen, setPostJobOpen] = React.useState(false);
  const [submitEventOpen, setSubmitEventOpen] = React.useState(false);
  const [currencyOpen, setCurrencyOpen] = React.useState(false);
  const [profileBtnHovered, setProfileBtnHovered] = React.useState(false);

React.useEffect(() => {
    const handler = (e) => {
      if ((e.metaKey || e.ctrlKey) && e.key === 'k') { e.preventDefault(); setCmdOpen(o => !o); }
      if (e.key === 'Escape') setCmdOpen(false);
    };
    window.addEventListener('keydown', handler);
    return () => window.removeEventListener('keydown', handler);
  }, []);

// Sync screen ↔ URL hash. Back/forward buttons now work correctly.
  React.useEffect(() => {
    const onHashChange = () => {
      const next = screenFromHash();
      setScreen(next);
    };
    window.addEventListener('hashchange', onHashChange);
    return () => window.removeEventListener('hashchange', onHashChange);
  }, []);

const vw = useViewportWidth();
  const isMobile = vw < 768;
  const [mobileNavOpen, setMobileNavOpen] = React.useState(false);

const topNav = [
    { icon: CompassIcon, label: 'Dashboard', id: 'home' },
    { icon: RouteIcon, label: 'Trips', id: 'trips', badge: '3' },
    { icon: BedIcon, label: 'Accommodation', id: 'accommodation' },
    { icon: MapPinIcon, label: 'Workspaces', id: 'workspaces' },
    { icon: GlobeIcon, label: 'Location Info', id: 'location' },
    { icon: CalendarIcon, label: "What's On", id: 'whatson' },
    { icon: BriefcaseIcon, label: 'Remote Jobs', id: 'jobs' },
  ];
  const bottomNav = [
    { icon: FolderIcon, label: 'Vault', id: 'vault', badge: '2⚠' },
    { icon: DollarIcon, label: 'Expenses', id: 'expenses' },
  ];

const screenTitles = {
    home: { title: 'Dashboard', subtitle: 'Your live travel command centre' },
    trips: { title: 'Trips', subtitle: 'Plan, track and review your journeys' },
    accommodation: { title: 'Accommodation', subtitle: 'Search, filter and save places to stay' },
    workspaces: { title: 'Workspaces', subtitle: 'Discover places to work nearby' },
    vault: { title: 'Vault', subtitle: 'Documents, visas and travel essentials' },
    expenses: { title: 'Expenses', subtitle: 'Track spending across trips' },
    location: { title: 'Location Info', subtitle: 'Visa, cost of living, internet and safety data' },
    whatson: { title: "What's On", subtitle: 'Events and meetups for digital nomads' },
    jobs: { title: 'Remote Jobs', subtitle: 'Find your next fully remote opportunity' },
    profile: { title: 'Profile & Settings', subtitle: '' },
    'add-workspace': { title: 'Submit a Workspace', subtitle: '' },
    currency: { title: 'Currency Converter', subtitle: 'Live rates' },
    'workspace-detail': { title: 'Hub Lisbon', subtitle: 'Cowork · Chiado', breadcrumb: 'Workspaces' },
    'doc-detail': { title: 'Australian Passport', subtitle: 'Expires Mar 2027', breadcrumb: 'Vault' },
    'submit-review': { title: 'Write a Review', subtitle: 'Hub Lisbon', breadcrumb: 'Workspaces' },
  };
  const st = screenTitles[screen] || { title: screen, subtitle: '' };

const sidebarVisible = !isMobile || mobileNavOpen;
  return (
    <div style={{ height: '100vh', display: 'flex', background: TOKENS.color.bg, color: TOKENS.color.textPrimary, overflow: 'hidden', position: 'relative' }}>
      {/* Mobile backdrop */}
      {isMobile && mobileNavOpen && (
        <div onClick={() => setMobileNavOpen(false)} style={{
          position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.5)', zIndex: 90, cursor: 'pointer',
        }} />
      )}
      {/* Sidebar */}
      <div style={{
        width: 220, flexShrink: 0, borderRight: '1px solid #26262E',
        display: sidebarVisible ? 'flex' : 'none', flexDirection: 'column',
        background: TOKENS.color.bg,
        position: isMobile ? 'fixed' : 'relative',
        top: 0, bottom: 0, left: 0, zIndex: 100,
        boxShadow: isMobile ? '4px 0 30px rgba(0,0,0,0.5)' : 'none',
      }}>
        {/* Logo */}
        <div style={{ height: 56, display: 'flex', alignItems: 'center', padding: '0 16px', borderBottom: '1px solid #26262E', gap: 10, flexShrink: 0 }}>
          <div style={{ width: 28, height: 28, borderRadius: 7, background: 'rgba(0,255,148,0.12)', border: '1px solid rgba(0,255,148,0.2)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <CompassIcon size={16} color="#00FF94" />
          </div>
          <span style={{ fontFamily: "'JetBrains Mono',monospace", fontSize: 14, fontWeight: 600, color: TOKENS.color.textPrimary, letterSpacing: '0.08em' }}>RMTCTRL</span>
        </div>

{/* Search / cmd */}
        <div style={{ padding: '12px 10px 8px' }}>
          <button onClick={() => setCmdOpen(true)} style={{
            width: '100%', height: 34, background: TOKENS.color.surface2, border: '1px solid #26262E',
            borderRadius: 8, cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 8,
            padding: '0 10px',
          }}>
            <SearchIcon size={14} />
            <span style={{ fontFamily: "'Inter',sans-serif", fontSize: 13, color: TOKENS.color.textTertiary, flex: 1, textAlign: 'left' }}>Search</span>
            <kbd style={{ fontFamily: "'JetBrains Mono',monospace", fontSize: 10, color: TOKENS.color.textTertiary, background: TOKENS.color.border, padding: '1px 5px', borderRadius: 3 }}>⌘K</kbd>
          </button>
        </div>

{/* Top nav (scrollable) */}
        <div style={{ flex: 1, overflowY: 'auto', padding: '4px 10px', display: 'flex', flexDirection: 'column', gap: 2 }}>
          {topNav.map(item => (
            <SideNavItem key={item.id} icon={item.icon} label={item.label} badge={item.badge}
              active={screen === item.id} onClick={() => navigate(item.id)} />
          ))}
        </div>

{/* Bottom-pinned nav: Vault + Expenses */}
        <div style={{ padding: '8px 10px', borderTop: '1px solid #26262E', display: 'flex', flexDirection: 'column', gap: 2 }}>
          {bottomNav.map(item => (
            <SideNavItem key={item.id} icon={item.icon} label={item.label} badge={item.badge}
              active={screen === item.id} onClick={() => navigate(item.id)} />
          ))}
        </div>

{/* Bottom: user */}
        <div style={{ borderTop: '1px solid #26262E', padding: '10px' }}>
          <button
            onClick={() => navigate('profile')}
            aria-label="Go to Profile & Settings"
            aria-current={screen === 'profile' ? 'page' : undefined}
            onMouseEnter={() => setProfileBtnHovered(true)}
            onMouseLeave={() => setProfileBtnHovered(false)}
            style={{
              width: '100%', height: 46, display: 'flex', alignItems: 'center', gap: 10,
              background: (screen === 'profile' || profileBtnHovered) ? TOKENS.color.surface2 : 'transparent',
              borderRadius: 8, border: 'none', cursor: 'pointer', padding: '0 10px',
              transition: `background ${TOKENS.anim.fast}`,
            }}
          >
            <Avatar size={28} initials="AL" color="#00FF94" />
            <div style={{ flex: 1, textAlign: 'left' }}>
              <div style={{ fontFamily: "'Inter',sans-serif", fontSize: 13, fontWeight: 600, color: TOKENS.color.textPrimary }}>Alex Lawson</div>
              <div style={{ fontFamily: "'JetBrains Mono',monospace", fontSize: 10, color: TOKENS.color.textTertiary }}>PRO</div>
            </div>
            <ChevronRightIcon size={14} />
          </button>
        </div>
      </div>

{/* Main area */}
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
        <TopBar
          title={st.title}
          subtitle={st.subtitle}
          breadcrumb={st.breadcrumb}
          actions={renderActions()}
          isMobile={isMobile}
          onMenu={() => setMobileNavOpen(true)}
        />
        <div style={{ flex: 1, display: 'flex', overflow: 'hidden' }}>
          <ErrorBoundary key={screen} onReset={() => navigate('home')}>
            {renderScreen()}
          </ErrorBoundary>
        </div>
      </div>

{/* Overlays */}
      {cmdOpen && <CommandBar onClose={() => setCmdOpen(false)} onNavigate={navigate} />}
      {addSegOpen && <WebAddSegment onClose={() => setAddSegOpen(false)} />}
      {postJobOpen && <PostJobModal onClose={() => setPostJobOpen(false)} />}
      {submitEventOpen && <SubmitEventModal onClose={() => setSubmitEventOpen(false)} />}
      {currencyOpen && <CurrencyModal onClose={() => setCurrencyOpen(false)} />}
      <ToastContainer />
    </div>
  );
}

// Delay the React mount so that every type="text/babel" script (especially
// webapp-screens.jsx which defines WebDashboard) finishes compiling first.
// Babel-standalone processes <script type="text/babel"> tags in parallel and
// doesn't guarantee execution order; mounting immediately caused
// "ReferenceError: WebDashboard is not defined" when webapp.jsx evaluated
// before webapp-screens.jsx. Real fix is the Vite migration in VITE-MIGRATION.md
// which removes Babel-in-browser entirely.
window.addEventListener('load', () => {
  setTimeout(() => {
    ReactDOM.createRoot(document.getElementById('root')).render(<WebApp />);
  }, 250);
});

{title}

Add segment