/* Mereka v2 — Main app: routing + sitemap */

const ROUTES = [
  /* Public web */
  { match: /^\/web$/, render: () => <WebHomePage /> },
  { match: /^\/web\/experiences$/, render: () => <WebExperiencesPage /> },
  { match: /^\/web\/experiences\/([^/]+)$/, render: (m) => <WebExperienceDetailPage slug={m[1]} /> },
  { match: /^\/web\/experts$/, render: () => <WebExpertsPage /> },
  { match: /^\/web\/experts\/([^/]+)$/, render: (m) => <WebExpertDetailPage id={m[1]} /> },
  { match: /^\/web\/expertise$/, render: () => <WebExpertisePage /> },
  { match: /^\/web\/expertise\/([^/]+)$/, render: (m) => <WebExpertiseDetailPage slug={m[1]} /> },
  { match: /^\/web\/jobs$/, render: () => <WebJobsPage /> },
  { match: /^\/web\/jobs\/([^/]+)$/, render: (m) => <WebJobDetailPage id={m[1]} /> },
  { match: /^\/web\/hubs$/, render: () => <WebHubsPage /> },
  { match: /^\/web\/hubs\/([^/]+)$/, render: (m) => <WebHubProfilePage id={m[1]} /> },
  { match: /^\/web\/programs$/, render: () => <WebProgramsPage /> },
  { match: /^\/web\/learning-paths$/, render: () => <WebLearningPathsPage /> },
  { match: /^\/web\/learning-paths\/([^/]+)$/, render: (m) => <WebProgrammeDetailPage slug={m[1]} /> },
  { match: /^\/web\/courses$/, render: () => <WebCoursesPage /> },
  { match: /^\/web\/courses\/([^/]+)$/, render: (m) => <WebCourseDetailPage slug={m[1]} /> },

  /* User dashboard */
  { match: /^\/app\/dashboard\/?$/, render: () => <UserOverviewPageV2 /> },
  { match: /^\/app\/dashboard\/overview$/, render: () => <UserOverviewPageV2 /> },
  { match: /^\/app\/dashboard\/bookings$/, render: () => <MyExperiencesDashPage /> },
  { match: /^\/app\/dashboard\/favorites$/, render: () => <UserFavoritesPage /> },
  { match: /^\/app\/dashboard\/courses$/, render: () => <MyCoursesDashPage /> },
  { match: /^\/app\/dashboard\/chats$/, render: () => <UserChatsPage /> },
  { match: /^\/app\/dashboard\/reviews$/, render: () => <MyExpertiseDashPage /> },
  { match: /^\/app\/dashboard\/transactions$/, render: () => <UserTransactionsPage /> },
  { match: /^\/app\/dashboard\/programmes$/, render: () => <MyProgrammesDashPage /> },
  { match: /^\/app\/dashboard\/gigs$/, render: () => <MyGigsDashPage /> },
  { match: /^\/app\/dashboard\/finance$/, render: () => <FinanceDashPage /> },
  { match: /^\/app\/dashboard\/billing$/, render: () => <MyPurchasesDashPage /> },
  { match: /^\/app\/dashboard\/notifications$/, render: () => <UserNotificationsPage /> },
  { match: /^\/app\/dashboard\/notification-settings$/, render: () => <UserNotifSettingsPage /> },
  { match: /^\/app\/dashboard\/interests$/, render: () => <UserInterestsPage /> },
  { match: /^\/app\/dashboard\/security$/, render: () => <UserSecurityPage /> },
  { match: /^\/app\/dashboard\/settings$/, render: () => <UserSettingsPage /> },
  { match: /^\/app\/dashboard\/communication-logs$/, render: () => <BroadcastPage /> },
  { match: /^\/app\/broadcast\/settings$/, render: () => <BroadcastPage /> },
  { match: /^\/app\/broadcast\/template\/new$/, render: () => <BcTemplateBuilderPage /> },
  { match: /^\/app\/broadcast\/message\/new$/, render: () => <CreateMessageWizardPage /> },

  /* Hub dashboard */
  { match: /^\/app\/hub\/?$/, render: () => <HubCalendarPage /> },
  { match: /^\/app\/hub\/calendar$/, render: () => <HubCalendarPage /> },
  { match: /^\/app\/hub\/bookings$/, render: () => <HubBookingsPage /> },
  { match: /^\/app\/hub\/chats$/, render: () => <HubChatsPage /> },
  { match: /^\/app\/hub\/analytics$/, render: () => <AnalyticsImpactOverviewPage /> },
  { match: /^\/app\/hub\/notifications$/, render: () => <HubNotificationsPage /> },
  { match: /^\/app\/hub\/services\/experiences$/, render: () => <ManageListingsDashPage /> },
  { match: /^\/app\/hub\/services\/expertise$/, render: () => <HubServicesExpertisePage /> },
  { match: /^\/app\/hub\/gigs$/, render: () => <ManageGigsDashPage /> },
  { match: /^\/app\/hub\/booking\/([^/]+)$/, render: (m) => <BookingDetailsPage id={m[1]} /> },
  { match: /^\/app\/hub\/jobs\/posts$/, render: () => <ManageGigsDashPage /> },
  { match: /^\/app\/hub\/jobs\/applications$/, render: () => <HubJobsApplicationsPage /> },
  { match: /^\/app\/hub\/settings\/account$/, render: () => <HubSettingsAccountPage /> },
  { match: /^\/app\/hub\/settings\/members$/, render: () => <HubSettingsMembersPage /> },
  { match: /^\/app\/hub\/settings\/transactions$/, render: () => <HubSettingsTransactionsPage /> },
  { match: /^\/app\/hub\/settings\/subscription$/, render: () => <HubSettingsSubscriptionPage /> },
  { match: /^\/app\/hub\/settings\/notifications$/, render: () => <HubSettingsNotifsPage /> },
  { match: /^\/app\/hub\/settings\/reviews$/, render: () => <HubSettingsReviewsPage /> },
  { match: /^\/app\/hub\/settings\/engagement$/, render: () => <HubSettingsEngagementPage /> },

  /* Onboarding */
  { match: /^\/app\/onboarding\/hub\/welcome$/, render: () => <OnboardingWelcomePage type="hub" /> },
  { match: /^\/app\/onboarding\/hub\/profile$/, render: () => <HubOnboardingProfilePage /> },
  { match: /^\/app\/onboarding\/expert\/welcome$/, render: () => <OnboardingWelcomePage type="expert" /> },
  { match: /^\/app\/onboarding\/expert\/profile$/, render: () => <ExpertOnboardingProfilePage /> },
  { match: /^\/app\/onboarding\/learner\/welcome$/, render: () => <OnboardingWelcomePage type="learner" /> },
  { match: /^\/app\/onboarding\/learner\/interests$/, render: () => <LearnerOnboardingInterestsPage /> },
  { match: /^\/app\/onboarding\/experience\/select-type$/, render: () => <ExperienceOnboardingTypePage /> },
  { match: /^\/app\/onboarding\/experience\/basics$/, render: () => <ExperienceOnboardingBasicsPage /> },
  { match: /^\/app\/onboarding\/expertise\/welcome$/, render: () => <OnboardingWelcomePage type="expert" /> },
  { match: /^\/app\/onboarding\/expertise\/brief$/, render: () => <ExpertiseOnboardingBriefPage /> },
  { match: /^\/app\/onboarding\/job\/details$/, render: () => <JobOnboardingDetailsPage /> },

  /* Welcome — shared */
  { match: /^\/app\/welcome\/hub$/, render: () => <OnboardingWelcomePage type="hub" /> },
  { match: /^\/app\/welcome\/expert$/, render: () => <OnboardingWelcomePage type="expert" /> },
  { match: /^\/app\/welcome\/learner$/, render: () => <OnboardingWelcomePage type="learner" /> },

  /* Program creation wizard */
  { match: /^\/app\/program\/create\/?$/, render: () => <ProgramCreateBasicPage /> },
  { match: /^\/app\/program\/create\/basic$/, render: () => <ProgramCreateBasicPage /> },
  { match: /^\/app\/program\/create\/timeline$/, render: () => <ProgramCreateTimelinePage /> },
  { match: /^\/app\/program\/create\/collaborators$/, render: () => <ProgramCreateCollaboratorsPage /> },
  { match: /^\/app\/program\/create\/structure$/, render: () => <ProgramCreateStructurePage /> },
  { match: /^\/app\/program\/create\/landing$/, render: () => <ProgramCreateLandingPage /> },
  { match: /^\/app\/program\/create\/publish$/, render: () => <ProgramCreatePublishPage /> },
  { match: /^\/app\/program\/manage$/, render: () => <YourProgramsPage /> },
  { match: /^\/app\/post-listing$/, render: () => <PostListingPage /> },

  /* Add service / listing wizard */
  { match: /^\/app\/service\/create\/?$/, render: () => <ServiceCreateTypePage /> },
  { match: /^\/app\/service\/create\/type$/, render: () => <ServiceCreateTypePage /> },
  { match: /^\/app\/service\/create\/basics$/, render: () => <ServiceCreateBasicsPage /> },
  { match: /^\/app\/service\/create\/details$/, render: () => <ServiceCreateDetailsPage /> },
  { match: /^\/app\/service\/create\/publish$/, render: () => <ServiceCreatePublishPage /> },

  { match: /^\/app\/hub\/settings$/, render: () => <HubSettingsPage /> },

  /* Analytics suite */
  { match: /^\/app\/analytics\/?$/, render: () => <AnalyticsImpactOverviewPage /> },
  { match: /^\/app\/analytics\/impact$/, render: () => <AnalyticsImpactOverviewPage /> },
  { match: /^\/app\/analytics\/programme$/, render: () => <ProgrammeAnalyticsPage /> },
  { match: /^\/app\/analytics\/programme\/all$/, render: () => <AllProgrammesPage /> },
  { match: /^\/app\/analytics\/programme\/([^/]+)$/, render: (m) => <ProgrammeDetailPage id={m[1]} /> },
  { match: /^\/app\/analytics\/experience$/, render: () => <ExperienceAnalyticsPage /> },
  { match: /^\/app\/analytics\/experience\/all$/, render: () => <AllExperiencesPage /> },
  { match: /^\/app\/analytics\/experience\/([^/]+)$/, render: (m) => <ExperienceDetailPage id={m[1]} /> },
  { match: /^\/app\/analytics\/expertise$/, render: () => <ExpertiseAnalyticsPage /> },
  { match: /^\/app\/analytics\/expertise\/all$/, render: () => <AllExpertsPage /> },
  { match: /^\/app\/analytics\/expertise\/([^/]+)$/, render: (m) => <ExpertDetailPage id={m[1]} /> },
  { match: /^\/app\/analytics\/courses$/, render: () => <CourseAnalyticsPage /> },
  { match: /^\/app\/analytics\/courses\/all$/, render: () => <AllCoursesPage /> },
  { match: /^\/app\/analytics\/courses\/([^/]+)$/, render: (m) => <CourseDetailPage id={m[1]} /> },
  { match: /^\/app\/analytics\/gig$/, render: () => <GigAnalyticsPage /> },
  { match: /^\/app\/analytics\/gig\/all$/, render: () => <AllGigsPage /> },
  { match: /^\/app\/analytics\/gig\/([^/]+)$/, render: (m) => <GigDetailPage id={m[1]} /> },
  { match: /^\/app\/program\/admin\/feed$/, render: () => <ProgramAdminFeedPage /> },
  { match: /^\/app\/program\/admin\/feed\/([^/]+)$/, render: (m) => <ProgramFeedPostPage id={m[1]} /> },
  { match: /^\/app\/community\/member\/([^/]+)$/, render: (m) => <ProgramMemberProfilePage slug={m[1]} /> },
  { match: /^\/app\/program\/admin\/overview$/, render: () => <ProgramOverviewPage /> },
  { match: /^\/app\/program\/admin\/overview\/learner$/, render: () => <ProgramOverviewLearnerPage /> },
  { match: /^\/app\/program\/admin\/overview\/preview$/, render: () => <ProgramOverviewPreviewPage /> },
  { match: /^\/app\/program\/admin\/dashboard$/, render: () => <ProgramDashboardPage /> },
  { match: /^\/app\/program\/admin\/settings$/, render: () => <ProgramSettingsPage /> },
  { match: /^\/app\/program\/admin\/feedback$/, render: () => <ProgramFeedbackPage /> },
  { match: /^\/app\/program\/admin\/members$/, render: () => <ManageMembersPage /> },
  { match: /^\/app\/program\/admin\/forms$/, render: () => <ProgramFormsPage /> },
  { match: /^\/app\/program\/admin\/curriculum$/, render: () => <CourseMaterialPage /> },
  { match: /^\/app\/program\/admin\/curriculum\/forum$/, render: () => <ForumPage /> },
  { match: /^\/app\/program\/admin\/curriculum\/forum\/([^/]+)$/, render: (m) => <ForumThreadPage id={m[1]} /> },
  { match: /^\/app\/program\/admin\/curriculum\/test$/, render: () => <TestPage /> },
  { match: /^\/app\/program\/admin\/curriculum\/submission$/, render: () => <SubmissionPage /> },
  { match: /^\/app\/program\/admin\/curriculum\/submission\/([^/]+)$/, render: (m) => <SubmissionDetailPage id={m[1]} /> },

  /* Forms */
  { match: /^\/app\/login\/?$/, render: () => <LoginPage /> },
  { match: /^\/app\/login\/email$/, render: () => <LoginEmailPage /> },
  { match: /^\/app\/hub\/settings$/, render: () => <HubSettingsPage /> },
  { match: /^\/app\/forms\/?$/, render: () => <ManageFormsPage /> },
  { match: /^\/app\/forms\/settings$/, render: () => <FormSettingsPage /> },
  { match: /^\/app\/forms\/builder\/([^/]+)\/content$/, render: (m) => <FormBuilderContentPage formId={m[1]} /> },
  { match: /^\/app\/forms\/builder\/([^/]+)\/connect$/, render: (m) => <FormBuilderConnectPage formId={m[1]} /> },
  { match: /^\/app\/forms\/builder\/([^/]+)\/share$/, render: (m) => <FormBuilderSharePage formId={m[1]} /> },
  { match: /^\/app\/forms\/builder\/([^/]+)\/results$/, render: (m) => <FormBuilderResultsPage formId={m[1]} /> },
  { match: /^\/app\/forms\/design$/, render: () => <DesignPanelPage /> },
  { match: /^\/app\/form\/user\/([^/]+)\/welcome$/, render: (m) => <UserFormViewPage slug={m[1]} page="welcome" /> },
  { match: /^\/app\/form\/user\/([^/]+)\/basic$/, render: (m) => <UserFormViewPage slug={m[1]} page="basic" /> },
  { match: /^\/app\/form\/user\/([^/]+)\/survey$/, render: (m) => <UserFormViewPage slug={m[1]} page="survey" /> },

  /* Sitemap */
  { match: /^\/sitemap$/, render: () => <SitemapPage /> },
];

const SITEMAP_GROUPS = [
  {
    title: 'Public web (mereka.io)',
    icon: 'globe',
    routes: [
      { p: '/web', l: 'Home' },
      { p: '/web/experiences', l: 'Experiences — list' },
      { p: '/web/experiences/kuala-lumpur-batik-workshop', l: 'Experience — detail' },
      { p: '/web/experts', l: 'Experts — list' },
      { p: '/web/experts/x1', l: 'Expert — detail' },
      { p: '/web/expertise', l: 'Expertise — list' },
      { p: '/web/expertise/brand-identity-sprint', l: 'Expertise — detail' },
      { p: '/web/jobs', l: 'Jobs — list' },
      { p: '/web/jobs/j1', l: 'Job — detail' },
      { p: '/web/hubs', l: 'Hubs — list' },
      { p: '/web/hubs/h1', l: 'Hub — detail' },
      { p: '/web/programs', l: 'Programs (AI Fundamentals)' },
      { p: '/web/learning-paths', l: 'Upskill › Program (Learning Paths)' },
      { p: '/web/courses', l: 'Explore courses (Mereka Academy)' },
      { p: '/web/courses/strategic-thinking', l: 'Course detail — Strategic Thinking' },
      { p: '/web/learning-paths/ai4u', l: 'Program landing — AI4U' },
      { p: '/web/hubs/biji-biji', l: 'Hub profile — Biji-Biji' },
    ],
  },
  {
    title: 'User dashboard (app.mereka.io/dashboard)',
    icon: 'user',
    routes: [
      { p: '/app/dashboard/overview', l: 'Overview' },
      { p: '/app/dashboard/bookings', l: 'Bookings' },
      { p: '/app/dashboard/favorites', l: 'Favorites' },
      { p: '/app/dashboard/courses', l: 'Courses' },
      { p: '/app/dashboard/chats', l: 'Chats' },
      { p: '/app/dashboard/reviews', l: 'Reviews' },
      { p: '/app/dashboard/transactions', l: 'Transactions' },
      { p: '/app/dashboard/programmes', l: 'My Programmes' },
      { p: '/app/dashboard/gigs', l: 'My Gigs' },
      { p: '/app/dashboard/finance', l: 'Finance' },
      { p: '/app/dashboard/billing', l: 'Billing' },
      { p: '/app/dashboard/notifications', l: 'Notifications' },
      { p: '/app/dashboard/notification-settings', l: 'Notification settings' },
      { p: '/app/dashboard/interests', l: 'My interests' },
      { p: '/app/dashboard/security', l: 'Security' },
      { p: '/app/dashboard/settings', l: 'Settings' },
      { p: '/app/dashboard/communication-logs', l: 'Broadcast (Templates + history)' },
      { p: '/app/broadcast/template/new', l: 'Broadcast · Create template' },
      { p: '/app/broadcast/message/new', l: 'Broadcast · Create message wizard' },
    ],
  },
  {
    title: 'Hub dashboard (app.mereka.io/hub)',
    icon: 'building',
    routes: [
      { p: '/app/hub/calendar', l: 'Calendar' },
      { p: '/app/hub/bookings', l: 'Bookings' },
      { p: '/app/hub/chats', l: 'Chats' },
      { p: '/app/hub/analytics', l: 'Analytics' },
      { p: '/app/hub/notifications', l: 'Notifications' },
      { p: '/app/hub/services/experiences', l: 'Services · Experiences' },
      { p: '/app/hub/services/expertise', l: 'Services · Expertise' },
      { p: '/app/hub/jobs/posts', l: 'Jobs · Posts' },
      { p: '/app/hub/jobs/applications', l: 'Jobs · Applications' },
      { p: '/app/hub/settings/account', l: 'Settings · Account' },
      { p: '/app/hub/settings/members', l: 'Settings · Team' },
      { p: '/app/hub/settings/transactions', l: 'Settings · Transactions' },
      { p: '/app/hub/settings/subscription', l: 'Settings · Subscription' },
      { p: '/app/hub/settings/notifications', l: 'Settings · Notifications' },
      { p: '/app/hub/settings/reviews', l: 'Settings · Reviews' },
      { p: '/app/hub/settings/engagement', l: 'Settings · Engagement' },
    ],
  },
  {
    title: 'Forms suite',
    icon: 'edit',
    routes: [
      { p: '/app/forms', l: 'Manage forms (+ all popups)' },
      { p: '/app/forms/settings', l: 'Form settings' },
      { p: '/app/forms/builder/new/content', l: 'Form builder · Content' },
      { p: '/app/forms/builder/new/connect', l: 'Form builder · Connect' },
      { p: '/app/forms/builder/new/share', l: 'Form builder · Share' },
      { p: '/app/forms/builder/new/results', l: 'Form builder · Results' },
      { p: '/app/forms/design', l: 'Design panel (Logo / Button / Background)' },
      { p: '/app/form/user/my-new-form/welcome', l: 'User form · Welcome' },
      { p: '/app/form/user/my-new-form/basic', l: 'User form · Basic info' },
      { p: '/app/form/user/my-new-form/survey', l: 'User form · Survey question' },
    ],
  },
  {
    title: 'Program creation wizard',
    icon: 'spark',
    routes: [
      { p: '/app/program/create/basic', l: '1 · Basic info' },
      { p: '/app/program/create/timeline', l: '2 · Timeline' },
      { p: '/app/program/create/collaborators', l: '3 · Collaborators' },
      { p: '/app/program/create/structure', l: '4 · Structure (+ Add curriculum modal)' },
      { p: '/app/program/create/landing', l: '5 · Landing page' },
      { p: '/app/program/create/publish', l: '6 · Publish review' },
      { p: '/app/program/admin/feed', l: 'Program admin · Community feed' },
      { p: '/app/program/admin/overview', l: 'Program admin · Overview' },
      { p: '/app/program/admin/dashboard', l: 'Program admin · Dashboard' },
      { p: '/app/program/admin/members', l: 'Program admin · Manage members' },
      { p: '/app/program/admin/forms', l: 'Program admin · Manage forms' },
      { p: '/app/program/admin/feedback', l: 'Program admin · Feedback' },
      { p: '/app/program/admin/curriculum', l: 'Curriculum · Course material' },
      { p: '/app/program/admin/curriculum/forum', l: 'Curriculum · Forum' },
      { p: '/app/program/admin/curriculum/test', l: 'Curriculum · Test' },
      { p: '/app/program/admin/curriculum/submission', l: 'Curriculum · Submission' },
    ],
  },
  {
    title: 'Onboarding flows',
    icon: 'spark',
    routes: [
      { p: '/app/onboarding/hub/welcome', l: 'Hub · Welcome' },
      { p: '/app/onboarding/hub/profile', l: 'Hub · Profile (step 1)' },
      { p: '/app/onboarding/expert/welcome', l: 'Expert · Welcome' },
      { p: '/app/onboarding/expert/profile', l: 'Expert · Profile (step 1)' },
      { p: '/app/onboarding/learner/welcome', l: 'Learner · Welcome' },
      { p: '/app/onboarding/learner/interests', l: 'Learner · Interests' },
      { p: '/app/onboarding/experience/select-type', l: 'Experience · Type' },
      { p: '/app/onboarding/experience/basics', l: 'Experience · Basics' },
      { p: '/app/onboarding/expertise/brief', l: 'Expertise · Brief' },
      { p: '/app/onboarding/job/details', l: 'Job · Details' },
    ],
  },
];

function SitemapPage() {
  return (
    <div className="min-h-screen bg-neutral-50">
      <header className="bg-white border-b border-neutral-200 sticky top-0 z-10">
        <div className="max-w-[min(1800px,90vw)] mx-auto px-6 h-16 flex items-center justify-between">
          <Link to="/web" aria-label="Mereka"><div style={{ height: 32 }}><MerekaLogo /></div></Link>
          <div className="flex items-center gap-2">
            <Link to="/web"><Button variant="ghost" size="sm">Public site</Button></Link>
            <Link to="/app/dashboard/overview"><Button variant="ghost" size="sm">User dashboard</Button></Link>
            <Link to="/app/hub/settings"><Button variant="primary" size="sm">Hub settings</Button></Link>
          </div>
        </div>
      </header>

      <main className="max-w-[min(1800px,90vw)] mx-auto px-6 py-12">
        <Badge tone="purple" className="mb-4">Prototype index</Badge>
        <h1 className="text-3xl md:text-4xl font-bold mb-3">Mereka v2 — Frontend pages</h1>
        <p className="text-neutral-600 max-w-2xl">
          A clickable prototype of every page in the Angular workspace (<span className="font-mono text-sm">projects/web</span> &amp; <span className="font-mono text-sm">projects/app</span>),
          mirrored as static React with hash-based navigation. Use this index to jump between flows.
        </p>

        <div className="mt-10 grid lg:grid-cols-2 gap-6">
          {SITEMAP_GROUPS.map(g => (
            <Card key={g.title}>
              <div className="flex items-center gap-3 mb-4 pb-3 border-b border-neutral-100">
                <div className="w-10 h-10 rounded-lg bg-primary text-white flex items-center justify-center">
                  <Icon name={g.icon} size={18} />
                </div>
                <div>
                  <h2 className="font-semibold">{g.title}</h2>
                  <p className="text-xs text-neutral-500">{g.routes.length} pages</p>
                </div>
              </div>
              <ul className="space-y-0.5">
                {g.routes.map(r => (
                  <li key={r.p}>
                    <Link to={r.p} className="flex items-center justify-between px-3 py-2 rounded-lg hover:bg-neutral-50 group">
                      <span className="text-sm">{r.l}</span>
                      <span className="text-xs font-mono text-neutral-400 group-hover:text-primary">{r.p}</span>
                    </Link>
                  </li>
                ))}
              </ul>
            </Card>
          ))}
        </div>

        <div className="mt-10 p-6 rounded-2xl bg-primary text-white">
          <h2 className="text-xl font-bold mb-2">About this prototype</h2>
          <p className="text-white/80 max-w-3xl">
            Recreated from the <span className="font-mono text-sm">mereka-frontend-workspace-v2</span> Angular workspace as a single-file React prototype with
            hash routing. Visuals are hi-fi and follow the workspace's Tailwind tokens (primary <span className="font-mono text-sm">#1a1623</span>, Inter, rounded-xl, neutral scale).
            All data is mocked; auth, real bookings and live state are out of scope.
          </p>
        </div>
      </main>
    </div>
  );
}

/* ============ Floating "Pages" launcher ============ */
function PagesLauncher() {
  const [open, setOpen] = useState(false);
  const [q, setQ] = useState('');
  useEffect(() => {
    const handler = (e) => {
      if ((e.metaKey || e.ctrlKey) && e.key === 'k') { e.preventDefault(); setOpen(o => !o); }
      if (e.key === 'Escape') setOpen(false);
    };
    window.addEventListener('keydown', handler);
    return () => window.removeEventListener('keydown', handler);
  }, []);

  const all = useMemo(() => SITEMAP_GROUPS.flatMap(g => g.routes.map(r => ({ ...r, g: g.title }))), []);
  const filtered = q ? all.filter(r => (r.l + ' ' + r.p + ' ' + r.g).toLowerCase().includes(q.toLowerCase())) : all;

  return (
    <>
      <button onClick={() => setOpen(true)}
              className="fixed bottom-5 right-5 z-50 inline-flex items-center gap-2 px-4 py-2.5 bg-primary text-white rounded-full shadow-lg hover:bg-primary/90 transition-all">
        <Icon name="layers" size={16} /> Pages
        <kbd className="hidden md:inline-flex items-center gap-1 ml-1 px-1.5 py-0.5 bg-white/10 rounded text-[11px] font-mono">⌘K</kbd>
      </button>

      {open && (
        <div className="fixed inset-0 z-[100] flex items-start justify-center pt-24 px-4 bg-black/50 backdrop-blur-sm" onClick={() => setOpen(false)}>
          <div className="w-full max-w-xl bg-white rounded-2xl shadow-2xl overflow-hidden" onClick={e => e.stopPropagation()}>
            <div className="flex items-center gap-3 px-4 py-3 border-b border-neutral-200">
              <Icon name="search" size={16} className="text-neutral-400" />
              <input autoFocus value={q} onChange={e => setQ(e.target.value)}
                placeholder="Jump to a page…"
                className="flex-1 text-sm focus:outline-none placeholder:text-neutral-400" />
              <button className="text-xs px-2 py-1 text-neutral-500 hover:bg-neutral-100 rounded" onClick={() => setOpen(false)}>Esc</button>
            </div>
            <div className="max-h-[60vh] overflow-y-auto scrollbar-thin">
              {filtered.length === 0 && <div className="p-8 text-center text-sm text-neutral-500">No matches.</div>}
              {filtered.slice(0, 40).map((r, i) => (
                <button key={r.p} onClick={() => { navigate(r.p); setOpen(false); }}
                  className="w-full text-left px-4 py-2.5 hover:bg-neutral-50 flex items-center justify-between border-b border-neutral-50 last:border-0">
                  <div>
                    <div className="text-sm font-medium">{r.l}</div>
                    <div className="text-[12px] text-neutral-500">{r.g}</div>
                  </div>
                  <span className="text-[11px] font-mono text-neutral-400">{r.p}</span>
                </button>
              ))}
            </div>
            <div className="px-4 py-2 text-xs text-neutral-500 bg-neutral-50 border-t border-neutral-100 flex items-center justify-between">
              <span>{all.length} pages total</span>
              <Link to="/sitemap" onClick={() => setOpen(false)} className="text-primary font-medium hover:underline">Open full sitemap →</Link>
            </div>
          </div>
        </div>
      )}
    </>
  );
}

/* ============ Top-level App ============ */
function App() {
  const path = useHashRoute();
  const match = useMemo(() => {
    for (const r of ROUTES) {
      const m = path.match(r.match);
      if (m) return { r, m };
    }
    return null;
  }, [path]);

  let view;
  if (!match) {
    view = <NotFoundPage path={path} />;
  } else {
    view = match.r.render(match.m);
  }

  return (
    <div data-route={path}>
      {view}
      <PagesLauncher />
    </div>
  );
}

function NotFoundPage({ path }) {
  return (
    <div className="min-h-screen bg-neutral-50 flex items-center justify-center px-6">
      <div className="text-center max-w-md">
        <div className="text-5xl font-mono text-neutral-300 mb-2">404</div>
        <h1 className="text-2xl font-bold mb-2">Page not found</h1>
        <p className="text-neutral-500 mb-4">No route registered for <span className="font-mono text-sm">{path}</span>.</p>
        <Link to="/sitemap"><Button variant="primary" rightIcon="arrowRight">Open sitemap</Button></Link>
      </div>
    </div>
  );
}

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