// app.jsx — main router + state + tweaks

// Error boundary — catches render crashes and shows a recovery UI instead of a blank page
class AppErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { crashed: false, error: null };
  }
  static getDerivedStateFromError(error) {
    return { crashed: true, error };
  }
  render() {
    if (this.state.crashed) {
      return (
        <div style={{
          minHeight: '100vh', display: 'grid', placeItems: 'center',
          background: '#FBFAF7', padding: 32,
        }}>
          <div style={{
            background: 'white', border: '1px solid #E6E7EF', borderRadius: 20,
            padding: '40px 48px', maxWidth: 520, textAlign: 'center',
          }}>
            <div style={{ fontSize: 32, marginBottom: 16 }}>🔄</div>
            <h2 style={{ fontFamily: 'system-ui', fontWeight: 700, fontSize: 22, color: '#0F1525', marginBottom: 12 }}>
              Something went wrong
            </h2>
            <p style={{ color: '#6B7585', fontSize: 15, lineHeight: 1.6, marginBottom: 24 }}>
              {this.state.error && this.state.error.message
                ? this.state.error.message
                : 'An unexpected error occurred. Please refresh the page.'}
            </p>
            <button
              onClick={() => { this.setState({ crashed: false, error: null }); window.location.reload(); }}
              style={{
                background: '#5145CD', color: 'white', border: 0,
                borderRadius: 999, padding: '12px 28px', fontSize: 14,
                fontWeight: 600, cursor: 'pointer',
              }}>
              Reload page
            </button>
          </div>
        </div>
      );
    }
    return this.props.children;
  }
}

// ---------- Curated palettes (fresh, modern) ----------
const PALETTES = {
  iris: {
    label: 'Iris',
    swatch: ['#FBFAF7', '#5145CD', '#0E9F6E', '#0F1525'],
    vars: {
      '--psy-accent':      '#5145CD',
      '--psy-accent-soft': '#ECECFB',
      '--psy-accent-deep': '#3F35B5',
      '--psy-leaf':        '#0E9F6E',
      '--psy-leaf-soft':   '#DFFBEC',
      '--psy-surface':     '#FBFAF7',
      '--psy-surface-2':   '#FFFFFF',
      '--psy-ink':         '#0F1525',
      '--psy-rule':        '#E6E7EF',
    },
  },
  bloom: {
    label: 'Bloom',
    swatch: ['#FFF8F4', '#E84F6A', '#3F8E72', '#1B0F14'],
    vars: {
      '--psy-accent':      '#E84F6A',
      '--psy-accent-soft': '#FCE5EA',
      '--psy-accent-deep': '#C13653',
      '--psy-leaf':        '#3F8E72',
      '--psy-leaf-soft':   '#E0F1E9',
      '--psy-surface':     '#FFF8F4',
      '--psy-surface-2':   '#FFFFFF',
      '--psy-ink':         '#1B0F14',
      '--psy-rule':        '#F0E4DC',
    },
  },
  mint: {
    label: 'Mint',
    swatch: ['#F5FAF7', '#0E9F6E', '#7A6BD7', '#0B1F18'],
    vars: {
      '--psy-accent':      '#0E9F6E',
      '--psy-accent-soft': '#DAF4E7',
      '--psy-accent-deep': '#0B7E58',
      '--psy-leaf':        '#7A6BD7',
      '--psy-leaf-soft':   '#ECEAFB',
      '--psy-surface':     '#F5FAF7',
      '--psy-surface-2':   '#FFFFFF',
      '--psy-ink':         '#0B1F18',
      '--psy-rule':        '#DFEEE7',
    },
  },
  ocean: {
    label: 'Ocean',
    swatch: ['#F1F6FB', '#2563EB', '#0EA5A0', '#0B1C2E'],
    vars: {
      '--psy-accent':      '#2563EB',
      '--psy-accent-soft': '#DDE8FC',
      '--psy-accent-deep': '#1D4ED8',
      '--psy-leaf':        '#0EA5A0',
      '--psy-leaf-soft':   '#D6F2F1',
      '--psy-surface':     '#F1F6FB',
      '--psy-surface-2':   '#FFFFFF',
      '--psy-ink':         '#0B1C2E',
      '--psy-rule':        '#DEE5EE',
    },
  },
  graphite: {
    label: 'Graphite',
    swatch: ['#F5F5F4', '#171717', '#84CC16', '#0A0A0A'],
    vars: {
      '--psy-accent':      '#171717',
      '--psy-accent-soft': '#EAEAEA',
      '--psy-accent-deep': '#000000',
      '--psy-leaf':        '#65A30D',
      '--psy-leaf-soft':   '#ECF7D6',
      '--psy-surface':     '#F5F5F4',
      '--psy-surface-2':   '#FFFFFF',
      '--psy-ink':         '#0A0A0A',
      '--psy-rule':        '#E5E5E5',
    },
  },
};

function applyPalette(p) {
  const vars = PALETTES[p]?.vars || PALETTES.iris.vars;
  const root = document.documentElement.style;
  for (const [k, v] of Object.entries(vars)) root.setProperty(k, v);
}

// ---------- App ----------
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "typePersonality": "humanist",
  "palette": "iris",
  "showCrisisRibbon": true,
  "openOnStart": "home"
}/*EDITMODE-END*/;

function readStoredAuth() {
  try {
    const raw = localStorage.getItem('psyche-auth');
    if (!raw) return null;
    const { token, user } = JSON.parse(raw);
    if (token && user) return { token, user };
  } catch {}
  return null;
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const { lang: appLang } = useLang();

  // Nav avatar override — updated immediately on profile photo save
  // undefined = not yet set by user action; null = explicitly removed
  const [navAvatarData, setNavAvatarData] = useState(undefined);

  // Auth — restored from localStorage on first render
  const [authState, setAuthState] = useState(() => {
    const stored = readStoredAuth();
    return stored
      ? { status: 'in', user: stored.user, view: 'login' }
      : { status: 'out', view: 'login' };
  });

  // Routing — hash-synced so refresh preserves the current page
  function parseHash() {
    const hash = window.location.hash.slice(1); // strip '#'
    if (!hash) return null;
    const [name, ...rest] = hash.split('/');
    const id = rest.join('/') || null; // support ids with slashes
    return { name, params: id ? { id } : {} };
  }

  const [route, setRouteState] = useState(() => {
    // Restore from hash on first load; fall back to configured start
    const fromHash = parseHash();
    // Don't restore stateful-only routes that need extra context
    const skipRoutes = ['edit-profile', 'signup-pro'];
    if (fromHash && !skipRoutes.includes(fromHash.name)) return fromHash;
    return { name: t.openOnStart || 'home', params: {} };
  });

  function setRoute(name, params = {}) {
    if (typeof params === 'string') params = { id: params };
    const p = typeof params === 'object' ? params : { id: params };
    setRouteState({ name, params: p });
    window.scrollTo({ top: 0, behavior: 'instant' });
    // Sync hash — skip transient/auth routes
    const skipHash = ['edit-profile', 'signup-pro'];
    if (!skipHash.includes(name)) {
      window.location.hash = p.id ? `${name}/${p.id}` : name;
    }
  }

  // Keep hash in sync when route changes externally (e.g. persona switch)
  useEffect(() => {
    const skipHash = ['edit-profile', 'signup-pro'];
    if (!skipHash.includes(route.name)) {
      const expected = route.params.id ? `${route.name}/${route.params.id}` : route.name;
      if (window.location.hash.slice(1) !== expected) {
        window.location.hash = expected;
      }
    }
  }, [route]);

  // Listen for browser back/forward — sync hash changes back into React state
  useEffect(() => {
    function onHashChange() {
      const parsed = parseHash();
      if (!parsed) return;
      const skipRoutes = ['edit-profile', 'signup-pro'];
      if (skipRoutes.includes(parsed.name)) return;
      setRouteState(parsed);
      window.scrollTo({ top: 0, behavior: 'instant' });
    }
    window.addEventListener('hashchange', onHashChange);
    return function() { window.removeEventListener('hashchange', onHashChange); };
  }, []);

  // Persona — initialised from stored role, but persists view-switches across refresh
  const [persona, setPersonaState] = useState(() => {
    const stored = readStoredAuth();
    const role = stored?.user?.role || 'user';
    // Restore the last active persona from sessionStorage (view switches by admin/pro)
    try {
      const saved = sessionStorage.getItem('psyche-persona');
      // Only honour saved persona if it makes sense for the current role
      // Admin can browse as user or pro; pro can browse as user
      if (saved && saved !== role) {
        if (role === 'admin') return saved;              // admin may browse as any view
        if (role === 'pro' && saved === 'user') return saved; // pro may browse as visitor
      }
    } catch {}
    return role;
  });

  // Wrapper that persists persona switches across refresh
  function setPersona(p) {
    try { sessionStorage.setItem('psyche-persona', p); } catch {}
    setPersonaState(p);
  }

  // Saved shortlist
  const [saved, setSaved] = useState(new Set());
  function toggleSave(id) {
    const s = new Set(saved);
    if (s.has(id)) s.delete(id); else s.add(id);
    setSaved(s);
  }

  // Quiz state
  const [quizResult, setQuizResult] = useState(null);
  const [filters, setFilters] = useState({});
  function setFiltersFromResult(r) {
    const f = {};
    if (r.approach) f.approaches = [r.approach];
    if (r.tags?.length) f.specializations = r.tags;
    if (r.district && r.mode !== 'online') f.districts = [r.district];
    if (r.mode && r.mode !== 'both') f.modes = [r.mode];
    if (r.language) f.languages = [r.language];
    if (r.gesy === true) f.gesy = true;
    setFilters(f);
  }

  // Toast
  const [toast, setToast] = useState(null);

  // Active chat conversation
  const [activeChatId, setActiveChatId] = useState(null);
  function openChat(psyId) {
    setActiveChatId(psyId);
    setRoute('chat');
  }

  // Edit-profile target + the route to return to on cancel/save
  const [editTarget, setEditTarget] = useState(null);
  const [editReturnRoute, setEditReturnRoute] = useState(null);
  function openEditProfile(psyId = null) {
    setEditTarget(psyId);
    setEditReturnRoute({ ...route }); // remember where we came from
    setRoute('edit-profile');
  }
  function goBackFromEdit() {
    if (editReturnRoute) {
      setRouteState(editReturnRoute);
      window.scrollTo({ top: 0, behavior: 'instant' });
    } else {
      setRoute(persona === 'admin' ? 'admin' : 'provider');
    }
  }

  useEffect(() => { document.body.dataset.type = t.typePersonality || 'humanist'; }, [t.typePersonality]);
  useEffect(() => { applyPalette(t.palette); }, [t.palette]);

  // First-visit welcome modal
  const [showStartPrompt, setShowStartPrompt] = useState(() => {
    try { return !sessionStorage.getItem('psyche-seen'); } catch (e) { return false; }
  });

  // Cookie consent
  const [showCookieBanner, setShowCookieBanner] = useState(() => {
    try { return !localStorage.getItem('psyche-cookies'); } catch(e) { return true; }
  });
  function dismissCookies() {
    try { localStorage.setItem('psyche-cookies', '1'); } catch(e) {}
    setShowCookieBanner(false);
  }

  // Listen for privacy link clicks from cookie banner
  useEffect(() => {
    function onPrivacy() { setRoute('privacy'); }
    window.addEventListener('openPrivacy', onPrivacy);
    return () => window.removeEventListener('openPrivacy', onPrivacy);
  }, []);
  function dismissStartPrompt() {
    setShowStartPrompt(false);
    try { sessionStorage.setItem('psyche-seen', '1'); } catch (e) {}
  }

  // Convenience
  const authUser = authState.status === 'in' ? authState.user : null;

  // Handle ?verified=1 redirect from email verification link
  useEffect(() => {
    const params = new URLSearchParams(window.location.search);
    if (params.get('verified') === '1') {
      setToast('Email verified — your account is confirmed.');
      if (authState.status === 'in') {
        setAuthState(prev => ({ ...prev, user: { ...prev.user, email_verified: true } }));
        localStorage.setItem('psyche-auth', JSON.stringify({
          ...readStoredAuth(),
          user: { ...authUser, email_verified: true }
        }));
      }
      window.history.replaceState({}, '', '/');
    }
  }, []);

  // Auth modal — shown inline when a guest tries a protected action
  const [authModal, setAuthModal] = useState(null); // null | 'login' | 'signup'

  function openAuth(view = 'login') { setAuthModal(view); }
  function closeAuth() { setAuthModal(null); }

  function handleLogin({ user }) {
    const role = user.role;
    setPersona(role === 'pro' ? 'pro' : role === 'admin' ? 'admin' : 'user');
    setAuthState({ status: 'in', user });
    setAuthModal(null);
    // Explicitly route to the right home screen for each role
    if (role === 'admin') setRoute('admin');
    else if (role === 'pro') setRoute('home');
    else setRoute('home');
    setToast('Signed in. Welcome back.');
  }

  function handleSignup({ role, user }) {
    setPersona(role === 'pro' ? 'pro' : 'user');
    setAuthState({ status: 'in', user });
    setAuthModal(null);
    setToast(role === 'pro'
      ? 'Profile submitted for verification.'
      : 'Welcome to Psyche. Check your inbox to verify your email.');
  }

  function handleSignOut() {
    localStorage.removeItem('psyche-auth');
    try { sessionStorage.removeItem('psyche-persona'); } catch {}
    setAuthState({ status: 'out' });
    setPersona('user');
    setRoute('home');
  }

  // Show login modal for protected actions; if already logged in, execute callback
  function requireAuth(cb) {
    if (!authUser) {
      setAuthModal('login');
      return false;
    }
    if (cb) cb();
    return true;
  }

  // Open full psychologist registration (closes modal, routes to signup-pro page)
  function openProSignup() {
    setAuthModal(null);
    setRoute('signup-pro');
  }

  // Refresh auth state from server (used after admin approval)
  async function refreshAuthUser() {
    try {
      const raw = localStorage.getItem('psyche-auth');
      if (!raw) return;
      const { token } = JSON.parse(raw);
      const r = await fetch('/api/auth/me', { headers: { Authorization: `Bearer ${token}` } });
      if (!r.ok) return;
      const { token: newToken, user } = await r.json();
      localStorage.setItem('psyche-auth', JSON.stringify({ token: newToken, user }));
      setAuthState({ status: 'in', user });
      setPersona(user.role === 'pro' ? 'pro' : user.role === 'admin' ? 'admin' : 'user');
    } catch {}
  }

  // ---------- Always render the full app ----------
  function setRouteAdapter(name, idOrParams) {
    if (typeof idOrParams === 'string') setRoute(name, { id: idOrParams });
    else setRoute(name, idOrParams);
  }

  function renderScreen() {
    if (route.name === 'edit-profile') {
      return <EditProfileScreen
        psyId={editTarget}
        isAdmin={persona === 'admin'}
        onSave={goBackFromEdit}
        onCancel={goBackFromEdit}
        setToast={setToast}
        onSignOut={handleSignOut}
        onAvatarChange={setNavAvatarData} />;
    }

    if (persona === 'pro') {
      switch (route.name) {
        case 'chat':              return <ChatScreen activeId={activeChatId} setActiveId={setActiveChatId} authUser={authUser} />;
        case 'directory':         return <DirectoryScreen filters={filters} setFilters={setFilters} setRoute={setRouteAdapter} saved={saved} toggleSave={toggleSave} />;
        case 'detail':            return <DetailScreen psyId={route.params.id} setRoute={setRouteAdapter} saved={saved} toggleSave={toggleSave} setToast={setToast} openChat={openChat} authUser={authUser} requireAuth={requireAuth} />;
        case 'learn':             return <LearnScreen setRoute={setRouteAdapter} />;
        case 'article':           return <ArticleScreen articleId={route.params.id} setRoute={setRouteAdapter} />;
        case 'pricing':           return <PricingScreen setRoute={setRouteAdapter} authUser={authUser} />;
        case 'availability':      return <AvailabilityScreen setRoute={setRouteAdapter} />;
        case 'book':              return <BookingCalendarScreen psyId={route.params.id} setRoute={setRouteAdapter} authUser={authUser} requireAuth={requireAuth} setToast={setToast} />;
        case 'video-call':        return <VideoCallScreen bookingId={route.params.id} setRoute={setRouteAdapter} />;
        case 'account':           return <UserAccountScreen authUser={authUser} onSignOut={handleSignOut} setRoute={setRouteAdapter} />;
        case 'user-profile':      return <UserProfileScreen authUser={authUser} setRoute={setRouteAdapter} setToast={setToast} onProfileUpdate={refreshAuthUser} onAvatarChange={setNavAvatarData} />;
        case 'depression-test':   return <TestScreen key="depression-test" testId="depression" setRoute={setRouteAdapter} />;
        case 'anxiety-test':      return <TestScreen key="anxiety-test" testId="anxiety" setRoute={setRouteAdapter} />;
        case 'adhd-test':         return <TestScreen key="adhd-test" testId="adhd" setRoute={setRouteAdapter} />;
        case 'self-esteem-test':  return <TestScreen key="self-esteem-test" testId="self-esteem" setRoute={setRouteAdapter} />;
        default:                  return <ProviderScreen setRoute={setRouteAdapter} openEditProfile={openEditProfile} authUser={authUser} onRefresh={refreshAuthUser} />;
      }
    }
    if (persona === 'admin') {
      switch (route.name) {
        case 'admin':
        case 'home':              return <AdminScreen openEditProfile={openEditProfile} setToast={setToast} setRoute={setRouteAdapter} />;
        case 'directory':         return <DirectoryScreen filters={filters} setFilters={setFilters} setRoute={setRouteAdapter} saved={saved} toggleSave={toggleSave} />;
        case 'detail':            return <DetailScreen psyId={route.params.id} setRoute={setRouteAdapter} saved={saved} toggleSave={toggleSave} setToast={setToast} openChat={openChat} authUser={authUser} requireAuth={requireAuth} openEditProfile={openEditProfile} />;
        case 'learn':             return <LearnScreen setRoute={setRouteAdapter} />;
        case 'article':           return <ArticleScreen articleId={route.params.id} setRoute={setRouteAdapter} />;
        case 'pricing':           return <PricingScreen setRoute={setRouteAdapter} authUser={authUser} />;
        case 'book':              return <BookingCalendarScreen psyId={route.params.id} setRoute={setRouteAdapter} authUser={authUser} requireAuth={requireAuth} setToast={setToast} />;
        case 'depression-test':   return <TestScreen key="depression-test" testId="depression" setRoute={setRouteAdapter} />;
        case 'anxiety-test':      return <TestScreen key="anxiety-test" testId="anxiety" setRoute={setRouteAdapter} />;
        case 'adhd-test':         return <TestScreen key="adhd-test" testId="adhd" setRoute={setRouteAdapter} />;
        case 'self-esteem-test':  return <TestScreen key="self-esteem-test" testId="self-esteem" setRoute={setRouteAdapter} />;
        default:                  return <AdminScreen openEditProfile={openEditProfile} setToast={setToast} setRoute={setRouteAdapter} />;
      }
    }
    // Psychologist signup — full-page registration flow
    if (route.name === 'signup-pro') {
      return (
        <SignupScreen
          preRole="pro"
          onSignup={handleSignup}
          onSwitchLogin={() => { setRoute('home'); setAuthModal('login'); }}
        />
      );
    }
    switch (route.name) {
      case 'home':              return <HomeScreen setRoute={setRouteAdapter} openQuiz={() => setRouteAdapter('quiz')} t={t} />;
      case 'quiz':              return <QuizScreen onSkip={() => setRouteAdapter('directory')} onComplete={(r) => { setQuizResult(r); setRouteAdapter('quiz-result'); }} />;
      case 'quiz-result':       return <QuizResultScreen result={quizResult} setRoute={setRouteAdapter} setFiltersFromResult={setFiltersFromResult} />;
      case 'directory':         return <DirectoryScreen filters={filters} setFilters={setFilters} setRoute={setRouteAdapter} saved={saved} toggleSave={toggleSave} />;
      case 'detail':            return <DetailScreen psyId={route.params.id} setRoute={setRouteAdapter} saved={saved} toggleSave={toggleSave} setToast={setToast} openChat={openChat} authUser={authUser} requireAuth={requireAuth} />;
      case 'chat':              return <ChatScreen activeId={activeChatId} setActiveId={setActiveChatId} authUser={authUser} />;
      case 'learn':             return <LearnScreen setRoute={setRouteAdapter} />;
      case 'article':           return <ArticleScreen articleId={route.params.id} setRoute={setRouteAdapter} />;
      case 'journal':           return <JournalScreen authUser={authUser} requireAuth={requireAuth} />;
      case 'shortlist':         return <ShortlistScreen saved={saved} toggleSave={toggleSave} setRoute={setRouteAdapter} />;
      case 'pricing':           return <PricingScreen setRoute={setRouteAdapter} authUser={authUser} />;
      case 'book':              return <BookingCalendarScreen psyId={route.params.id} setRoute={setRouteAdapter} authUser={authUser} requireAuth={requireAuth} setToast={setToast} />;
      case 'my-sessions':       return <MySessionsScreen setRoute={setRouteAdapter} authUser={authUser} requireAuth={requireAuth} />;
      case 'video-call':        return <VideoCallScreen bookingId={route.params.id} setRoute={setRouteAdapter} />;
      case 'account':           return <UserAccountScreen authUser={authUser} onSignOut={handleSignOut} setRoute={setRouteAdapter} />;
      case 'user-profile':      return <UserProfileScreen authUser={authUser} setRoute={setRouteAdapter} setToast={setToast} onProfileUpdate={refreshAuthUser} />;
      case 'privacy':           return <PrivacyScreen setRoute={setRouteAdapter} />;
      case 'ethics':            return <EthicsScreen setRoute={setRouteAdapter} />;
      case 'terms':             return <TermsScreen setRoute={setRouteAdapter} />;
      case 'help':              return <HelpScreen setRoute={setRouteAdapter} />;
      case 'depression-test':   return <TestScreen key="depression-test" testId="depression" setRoute={setRouteAdapter} />;
      case 'anxiety-test':      return <TestScreen key="anxiety-test" testId="anxiety" setRoute={setRouteAdapter} />;
      case 'adhd-test':         return <TestScreen key="adhd-test" testId="adhd" setRoute={setRouteAdapter} />;
      case 'self-esteem-test':  return <TestScreen key="self-esteem-test" testId="self-esteem" setRoute={setRouteAdapter} />;
      default:                  return <HomeScreen setRoute={setRouteAdapter} openQuiz={() => setRouteAdapter('quiz')} t={t} />;
    }
  }

  const navHighlight =
    route.name === 'article' ? 'learn' :
    route.name === 'detail' ? 'directory' :
    route.name === 'quiz-result' || route.name === 'quiz' ? 'home' :
    route.name === 'edit-profile' ? (persona === 'admin' ? 'admin' : 'provider') :
    (route.name === 'home' && persona === 'admin') ? 'admin' :
    route.name === 'book' ? 'my-sessions' :
    route.name === 'video-call' ? 'my-sessions' :
    route.name;

  return (
    <div className="app">
      {t.showCrisisRibbon && route.name !== 'edit-profile' && <CrisisRibbon />}
      <TopNav
        route={navHighlight}
        setRoute={(n, p) => setRouteAdapter(n, p)}
        persona={persona}
        setPersona={setPersona}
        savedCount={saved.size}
        authUser={authUser}
        onSignOut={handleSignOut}
        openAuth={openAuth}
        navAvatarData={navAvatarData}
      />

      {/* Unverified email nudge */}
      {authUser && authUser.email_verified === false && (
        <EmailVerificationBanner
          email={authUser.email}
          onResent={() => setToast('Verification email resent — check your inbox.')}
        />
      )}

      {renderScreen()}

      {showStartPrompt && !authUser && persona === 'user' && route.name === 'home' && (
        <StartQuizPrompt onStart={() => { dismissStartPrompt(); setRouteAdapter('quiz'); }} onLater={dismissStartPrompt} />
      )}

      {/* Auth modal — shown when a guest triggers a protected action */}
      {authModal && (
        <AuthModal
          view={authModal}
          onClose={closeAuth}
          onLogin={handleLogin}
          onSignup={handleSignup}
          onSwitchView={setAuthModal}
          onOpenProSignup={openProSignup}
        />
      )}

      <Toast message={toast} onDone={() => setToast(null)} />
      {renderTweaksPanel(t, setTweak)}

      {/* Cookie consent banner — shown only on first visit */}
      {showCookieBanner && route.name !== 'privacy' && (
        <CookieBanner onAccept={dismissCookies} onDecline={dismissCookies} />
      )}

      {/* Footer */}
      {!['edit-profile','signup-pro'].includes(route.name) && (
        <SiteFooter setRoute={setRouteAdapter} />
      )}
    </div>
  );
}

// ---------- Tweaks panel renderer ----------
function renderTweaksPanel(t, setTweak) {
  return (
    <TweaksPanel>
      <TweakSection label="Colour palette" />
      <PaletteTweak value={t.palette} onChange={(v) => setTweak('palette', v)} />

      <TweakSection label="Type personality" />
      <TweakRadio label="Headlines"
        value={t.typePersonality}
        options={[
          { value: 'clean', label: 'Clean' },
          { value: 'humanist', label: 'Humanist' },
          { value: 'editorial', label: 'Editorial' },
        ]}
        onChange={(v) => setTweak('typePersonality', v)} />

      <TweakSection label="Layout" />
      <TweakToggle label="Crisis ribbon" value={t.showCrisisRibbon} onChange={(v) => setTweak('showCrisisRibbon', v)} />
      <TweakSelect label="Open on start"
        value={t.openOnStart}
        options={[
          { value: 'home', label: 'Home' },
          { value: 'directory', label: 'Directory' },
          { value: 'quiz', label: 'Matching quiz' },
          { value: 'detail', label: 'A psychologist profile' },
          { value: 'learn', label: 'Learn' },
        ]}
        onChange={(v) => setTweak('openOnStart', v)} />
    </TweaksPanel>
  );
}

function PaletteTweak({ value, onChange }) {
  return (
    <div className="twk-row" style={{ flexDirection: 'column', alignItems: 'stretch' }}>
      <div className="twk-lbl" style={{ marginBottom: 8 }}><span>Palette</span></div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
        {Object.entries(PALETTES).map(([k, p]) => {
          const on = value === k;
          return (
            <button key={k}
              onClick={() => onChange(k)}
              style={{
                appearance: 'none',
                background: 'white',
                border: on ? '2px solid #111' : '1px solid #d9d9d9',
                borderRadius: 10,
                padding: '8px 10px',
                cursor: 'pointer',
                display: 'flex',
                flexDirection: 'column',
                gap: 6,
                textAlign: 'left',
              }}>
              <div style={{ display: 'flex', gap: 3, height: 18 }}>
                {p.swatch.map((c, i) => (
                  <span key={i} style={{ flex: 1, background: c, borderRadius: 4 }}></span>
                ))}
              </div>
              <div style={{ fontSize: 12, fontWeight: 600, color: '#222' }}>{p.label}</div>
            </button>
          );
        })}
      </div>
    </div>
  );
}

function StartQuizPrompt({ onStart, onLater }) {
  return (
    <div style={{
      position: 'fixed', inset: 0,
      background: 'rgba(31, 42, 47, 0.45)',
      backdropFilter: 'blur(4px)',
      display: 'grid', placeItems: 'center',
      zIndex: 40,
      animation: 'fadein 200ms ease',
    }}>
      <style>{`@keyframes fadein { from {opacity: 0;} to {opacity: 1;}}
      @keyframes pop { from {transform: scale(0.96); opacity: 0;} to {transform: scale(1); opacity: 1;}}`}</style>
      <div style={{
        background: 'white', borderRadius: 24, padding: '40px 44px',
        maxWidth: 540, width: 'calc(100% - 40px)',
        boxShadow: '0 20px 60px rgba(31,42,47,0.25)',
        animation: 'pop 220ms cubic-bezier(0.2,0,0,1)',
      }}>
        <div style={{ width: 56, height: 56, display: 'grid', placeItems: 'center', background: 'var(--psy-accent-soft)', borderRadius: 16 }}>
          <PsycheMark size={32} />
        </div>
        <h2 className="display" style={{ fontSize: 28, fontWeight: 600, marginTop: 20, letterSpacing: '-0.02em', textWrap: 'balance' }}>
          Two minutes can save you weeks of guessing.
        </h2>
        <p style={{ color: 'var(--fg2)', marginTop: 12, fontSize: 15, lineHeight: 1.55 }}>
          Answer a few questions about what you're bringing in, and we'll point you toward the kind of psychologist most likely to help. You can ignore the suggestion and browse everyone anyway.
        </p>
        <div style={{ display: 'flex', gap: 10, marginTop: 24 }}>
          <button className="btn accent" onClick={onStart}>
            Start the quiz <Icon name="arrow_forward" className="sm" />
          </button>
          <button className="btn ghost" onClick={onLater}>Maybe later, just let me look</button>
        </div>
        <div style={{ marginTop: 16, fontSize: 12, color: 'var(--fg3)' }}>
          <Icon name="lock" className="sm" style={{ verticalAlign: -2 }} /> Answers stay on your device until you book.
        </div>
      </div>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(
  <AppErrorBoundary>
    <LangProvider>
      <App />
    </LangProvider>
  </AppErrorBoundary>
);