// ============================================================
// Bubbzii V2 — Main App with Routing
// ============================================================

import { useEffect, lazy, Suspense, useRef } from 'react';
import { BrowserRouter, Routes, Route, useLocation, Navigate, Link } from 'react-router-dom';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { api, ApiError } from './api/client';
import { normalizeUser } from './api/auth';
import { useAuthStore } from './stores/authStore';
import { Navbar } from './components/layout/Navbar';
import { Footer } from './components/layout/Footer';
import { ProtectedRoute } from './components/layout/ProtectedRoute';
import { GuestOnlyRoute } from './components/auth/GuestOnlyRoute';
import { ToastProvider } from './components/ui/Toast';
import { MaintenanceBanner } from './components/ui/MaintenanceBanner';
import { SeoRouteSync } from './components/seo/SeoRouteSync';
import './pages/v4.css';
import './pages/manager-inner-theme.css';
import './pages/host-dashboard-theme.css';
import './pages/dashboard-content-theme.css';
import { loadManagerPreferences, type ManagerChromeTheme } from './lib/managerPreferences';
import { getAuthScope, type AuthScope } from './lib/authStorage';
import { loadAdminPreferences } from './lib/adminPreferences';
import { getSettingsRoute } from './lib/rolePermissions';

// Pages
import { AccountPage } from './pages/AccountPage';
import { OnboardingPage } from './pages/OnboardingPage';
import { ProfilePage } from './pages/ProfilePage';
import { SubscriptionPage } from './pages/SubscriptionPage';
import { BubbziipediaPage } from './pages/BubbziipediaPage';
import { GoogleAuthCallbackPage } from './pages/GoogleAuthCallbackPage';
import { InviteAcceptPage } from './pages/InviteAcceptPage';
import { WaitlistPage } from './pages/WaitlistPage';
import { ShowcaseDemo } from './pages/ShowcaseDemo';
import {
  V4AboutPage,
  V4ContactPage,
  V4FaqPage,
  V4FaviconLabPage,
  V4GetStartedPage,
  V4HomePage,
  V4IntegrationsPage,
  V4LoginPage,
  V4PricingPage,
  V4PrivacyPage,
  V4Shell,
  V4TermsPage,
} from './pages/V4Pages';

// Dashboards — lazy loaded for code-splitting (ensures each dashboard is in its own chunk)
const CleanerDashboard = lazy(() => import('./dashboard/CleanerDashboard').then(m => ({ default: m.CleanerDashboard })));
const HostDashboard = lazy(() => import('./dashboard/HostDashboard').then(m => ({ default: m.HostDashboard })));
const ManagerDashboard = lazy(() => import('./dashboard/ManagerDashboard').then(m => ({ default: m.ManagerDashboard })));
const JobDetailPage = lazy(() => import('./dashboard/JobDetailPage').then(m => ({ default: m.JobDetailPage })));
const PropertyDetailPage = lazy(() => import('./pages/PropertyDetailPage').then(m => ({ default: m.PropertyDetailPage })));

// Admin
const AdminLogin = lazy(() => import('./admin/AdminLogin').then(m => ({ default: m.AdminLogin })));
const AdminDashboard = lazy(() => import('./admin/AdminDashboard').then(m => ({ default: m.AdminDashboard })));

// Portals
import { HostPortalPage } from './pages/HostPortalPage';
import { PhotoPortalPage } from './pages/PhotoPortalPage';

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 5 * 60 * 1000, // 5 minutes
      retry: 1,
      refetchOnWindowFocus: false,
    },
  },
});

type AuthBootstrapProps = {
  children: React.ReactNode;
};

const AUTH_BOOTSTRAP_RETRY_DELAYS_MS = [0, 250, 1000] as const;

function isUnauthorizedError(error: unknown): boolean {
  return error instanceof ApiError && error.status === 401;
}

function waitForAuthBootstrapRetry(delayMs: number): Promise<void> {
  return new Promise(resolve => window.setTimeout(resolve, delayMs));
}

function AuthBootstrap({ children }: AuthBootstrapProps) {
  const { initializeAuth, restoreAuth, logout, authChecked, user, setAuthChecked } = useAuthStore();
  const location = useLocation();
  const scope = getAuthScope(location.pathname);
  const lastScopeRef = useRef<AuthScope | null>(null);
  const isAdminPath = scope === 'admin';

  useEffect(() => {
    let cancelled = false;
    const scopeChanged = lastScopeRef.current !== scope;
    lastScopeRef.current = scope;

    const bootstrap = async () => {
      const isAdminPath = scope === 'admin';

      // Reuse the last verified local profile while the canonical profile
      // request is retried. The server-side HttpOnly cookie remains the
      // authentication source of truth.
      restoreAuth(scope);

      const profileEndpoints = isAdminPath
        ? ['/api/v1/admin/me']
        : ['/api/v1/profiles/me'];

      for (const endpoint of profileEndpoints) {
        for (const delayMs of AUTH_BOOTSTRAP_RETRY_DELAYS_MS) {
          if (delayMs > 0) {
            await waitForAuthBootstrapRetry(delayMs);
          }
          if (cancelled) return;

          try {
            const response = await api.get<{ ok?: boolean; success?: boolean; user?: unknown; profile?: unknown; data?: unknown; message?: string }>(endpoint);
            const rawUser = response.profile || response.user || response.data;

            if (!cancelled && rawUser) {
              const normalized = normalizeUser(rawUser as never);
              const user = endpoint === '/api/v1/admin/me'
                ? normalizeUser({ ...(normalized as object), role: 'admin' } as never)
                : normalized;
              initializeAuth(user, scope);
              return;
            }
          } catch (err) {
            // ApiClient clears the scoped session only for an actual HTTP 401.
            // Network/server failures are transient and must not destroy a valid token.
            if (isUnauthorizedError(err)) {
              return;
            }
            // Retry the profile request before completing bootstrap softly.
          }
        }
      }

      if (!cancelled) {
        // Keep the token/session intact when the profile request is unavailable.
        // A later navigation or reload can retry without forcing a login.
        setAuthChecked(true);
      }
    };

    if (scopeChanged && authChecked) {
      setAuthChecked(false);
    }

    if (!authChecked || scopeChanged) {
      void bootstrap();
    }

    return () => {
      cancelled = true;
    };
  }, [authChecked, initializeAuth, location.pathname, logout, restoreAuth, scope, setAuthChecked]);

  // A previously verified local profile can render immediately while the
  // HttpOnly-cookie profile check revalidates the session in the background.
  const showChildren = authChecked || Boolean(user);

  if (!showChildren) {
    return (
      <div className={`flex min-h-screen items-center justify-center ${isAdminPath ? 'bg-[#eff4ef] text-[#35594f]' : 'bg-gray-50'}`}>
        <div className="text-center">
          <div className={`mx-auto mb-3 h-8 w-8 animate-spin rounded-full border-2 border-t-transparent ${isAdminPath ? 'border-[#4a7d6f]' : 'border-bubbzii-blue'}`} />
          <p className={`text-sm ${isAdminPath ? 'text-[#5f746d]' : 'text-gray-500'}`}>Checking session...</p>
        </div>
      </div>
    );
  }

  return <>{children}</>;
}

function ScrollToHash() {
  const { hash, pathname } = useLocation();

  useEffect(() => {
    if (hash) {
      const id = hash.replace('#', '');
      const el = document.getElementById(id);
      if (el) {
        const raf = window.requestAnimationFrame(() => {
          const top = el.getBoundingClientRect().top + window.scrollY - 72;
          window.scrollTo({ top, behavior: 'auto' });
        });
        return () => window.cancelAnimationFrame(raf);
      }
      return;
    }

    // No hash — scroll to top on route change
    window.scrollTo(0, 0);
  }, [hash, pathname]);

  return null;
}

function AppChrome() {
  const { pathname } = useLocation();
  const { user } = useAuthStore();
  const v4RootPaths = new Set([
    '/',
    '/login',
    '/signup',
    '/get-started',
    '/about',
    '/contact',
    '/faq',
    '/pricing',
    '/integrations',
    '/privacy',
    '/terms',
    '/features',
    '/waitlist',
    '/demo',
    '/host-portal',
    '/photo-portal',
  ]);
  const isInvitationFlow = pathname.startsWith('/invite/');
  const isAppManagedPath =
    pathname.startsWith('/dashboard') ||
    pathname.startsWith('/admin') ||
    pathname.startsWith('/onboarding') ||
    pathname.startsWith('/settings') ||
    pathname.startsWith('/v4') ||
    pathname.startsWith('/photo-portal') ||
    pathname.startsWith('/host-portal') ||
    pathname.startsWith('/invite/') ||
    pathname.startsWith('/account') ||
    pathname.startsWith('/profile') ||
    pathname.startsWith('/subscription') ||
    pathname === '/bubbziipedia' ||
    pathname === '/favicon-lab' ||
    pathname === '/auth/google/callback';
  const isPublicNotFound = !isAppManagedPath && !v4RootPaths.has(pathname);
  const isV4PublicPath = pathname.startsWith('/v4') || v4RootPaths.has(pathname) || isInvitationFlow || isPublicNotFound;
  const managerChromeTheme: ManagerChromeTheme = pathname.startsWith('/dashboard/manager')
    ? loadManagerPreferences(user?.id).managerChromeTheme
    : 'green';
  const adminChromeTheme: ManagerChromeTheme = pathname.startsWith('/admin')
    ? loadAdminPreferences(user?.id).chromeTheme
    : 'green';
  const adminShellClass = adminChromeTheme === 'pink'
    ? 'flex flex-col min-h-screen bg-[#f6eeea] text-[#3a312c] font-sans'
    : 'flex flex-col min-h-screen bg-[#eff4ef] text-[#27352f] font-sans';
  const appShellClass = pathname.startsWith('/dashboard/manager')
    ? managerChromeTheme === 'pink'
      ? 'flex flex-col min-h-screen bg-[#f6eeea] text-[#3a312c] font-sans'
      : 'flex flex-col min-h-screen bg-[#eff4ef] text-[#27352f] font-sans'
    : pathname.startsWith('/dashboard/cleaner')
      ? 'flex flex-col min-h-screen bg-[#f6f1ea] text-[#2f2724] font-sans'
    : pathname.startsWith('/dashboard/host')
      ? 'flex flex-col min-h-screen bg-[#f6f1ea] text-[#2f2724] font-sans'
    : pathname.startsWith('/admin')
      ? adminShellClass
    : isV4PublicPath
      ? 'flex flex-col min-h-screen bg-[#deebe2] text-[#38302a] font-sans'
      : 'flex flex-col min-h-screen bg-bubbzii-navy text-white font-sans';

  const hideChrome =
    pathname.startsWith('/dashboard') ||
    pathname.startsWith('/admin') ||
    pathname.startsWith('/onboarding') ||
    pathname.startsWith('/settings') ||
    pathname.startsWith('/v4') ||
    pathname.startsWith('/photo-portal') ||
    pathname.startsWith('/host-portal') ||
    pathname === '/demo' ||
    isPublicNotFound ||
    v4RootPaths.has(pathname) ||
    isInvitationFlow;

  return (
    <div className={appShellClass}>
      <SeoRouteSync />
      <MaintenanceBanner />
      {!hideChrome && <Navbar />}
      <main className="flex-1">
        <Suspense fallback={
          <div className={`flex min-h-[60vh] items-center justify-center ${pathname.startsWith('/admin') ? 'bg-transparent' : ''}`}>
            <div className={`w-8 h-8 rounded-full animate-spin border-4 border-t-transparent ${pathname.startsWith('/admin') ? 'border-[#4a7d6f]' : 'border-bubbzii-blue'}`} />
          </div>
        }>
        <Routes>
          {/* Public Routes */}
          <Route path="/" element={<V4HomePage />} />
          <Route path="/login" element={<GuestOnlyRoute><V4LoginPage /></GuestOnlyRoute>} />
          <Route path="/signup" element={<Navigate to="/get-started" replace />} />
          <Route path="/about" element={<V4AboutPage />} />
          <Route path="/contact" element={<V4ContactPage />} />
          <Route path="/faq" element={<V4FaqPage />} />
          <Route path="/features" element={<Navigate to="/" replace />} />
          <Route path="/pricing" element={<V4PricingPage />} />
          <Route path="/terms" element={<V4TermsPage />} />
          <Route path="/privacy" element={<V4PrivacyPage />} />
          <Route path="/integrations" element={<V4IntegrationsPage />} />
          <Route path="/get-started" element={<V4GetStartedPage />} />
          <Route path="/bubbziipedia" element={<BubbziipediaPage />} />
          <Route path="/onboarding" element={<OnboardingPage />} />
          <Route path="/waitlist" element={<WaitlistPage />} />
          <Route path="/demo" element={<ShowcaseDemo />} />
          <Route path="/favicon-lab" element={<V4FaviconLabPage />} />
          <Route path="/invite/:token" element={<InviteAcceptPage />} />
          <Route path="/auth/google/callback" element={<GoogleAuthCallbackPage />} />
          <Route
            path="/settings"
            element={
              <ProtectedRoute>
                <SettingsRouteRedirect />
              </ProtectedRoute>
            }
          />
          <Route
            path="/profile"
            element={
              <ProtectedRoute>
                <ProfilePage />
              </ProtectedRoute>
            }
          />
          <Route
            path="/subscription"
            element={
              <ProtectedRoute>
                <SubscriptionPage />
              </ProtectedRoute>
            }
          />

          {/* Protected Routes — Authenticated Users */}
          <Route
            path="/account"
            element={
              <ProtectedRoute>
                <AccountPage />
              </ProtectedRoute>
            }
          />

          {/* Cleaner Dashboard — section routes */}
          <Route
            path="/dashboard/cleaner"
            element={
              <ProtectedRoute requiredRole="cleaner">
                <CleanerDashboard activeSection="dashboard" />
              </ProtectedRoute>
            }
          />
          <Route
            path="/dashboard/cleaner/calendar"
            element={
              <ProtectedRoute requiredRole="cleaner">
                <CleanerDashboard activeSection="calendar" />
              </ProtectedRoute>
            }
          />
          <Route
            path="/dashboard/cleaner/jobs"
            element={
              <ProtectedRoute requiredRole="cleaner">
                <CleanerDashboard activeSection="jobs" />
              </ProtectedRoute>
            }
          />
          <Route
            path="/dashboard/cleaner/properties"
            element={
              <ProtectedRoute requiredRole="cleaner">
                <CleanerDashboard activeSection="properties" />
              </ProtectedRoute>
            }
          />
          <Route
            path="/dashboard/cleaner/payments"
            element={
              <ProtectedRoute requiredRole="cleaner">
                <CleanerDashboard activeSection="payments" />
              </ProtectedRoute>
            }
          />
          <Route
            path="/dashboard/cleaner/settings"
            element={
              <ProtectedRoute requiredRole="cleaner">
                <CleanerDashboard activeSection="settings" />
              </ProtectedRoute>
            }
          />

          {/* Manager Dashboard — tab routes */}
          <Route
            path="/dashboard/manager"
            element={
              <ProtectedRoute requiredRole="manager">
                <ManagerDashboard />
              </ProtectedRoute>
            }
          />
          <Route
            path="/dashboard/manager/analytics"
            element={
              <ProtectedRoute requiredRole="manager">
                <ManagerDashboard />
              </ProtectedRoute>
            }
          />
          <Route
            path="/dashboard/manager/pending-proofs"
            element={
              <ProtectedRoute requiredRole="manager">
                <ManagerDashboard />
              </ProtectedRoute>
            }
          />
          <Route
            path="/dashboard/manager/schedule"
            element={
              <ProtectedRoute requiredRole="manager">
                <ManagerDashboard />
              </ProtectedRoute>
            }
          />
          <Route
            path="/dashboard/manager/messaging"
            element={
              <ProtectedRoute requiredRole="manager">
                <ManagerDashboard />
              </ProtectedRoute>
            }
          />
          <Route
            path="/dashboard/manager/my-properties"
            element={
              <ProtectedRoute requiredRole="manager">
                <ManagerDashboard />
              </ProtectedRoute>
            }
          />
          <Route
            path="/dashboard/manager/my-crew"
            element={
              <ProtectedRoute requiredRole="manager">
                <ManagerDashboard />
              </ProtectedRoute>
            }
          />
          <Route
            path="/dashboard/manager/my-hosts"
            element={
              <ProtectedRoute requiredRole="manager">
                <ManagerDashboard />
              </ProtectedRoute>
            }
          />
          <Route
            path="/dashboard/manager/invites"
            element={
              <ProtectedRoute requiredRole="manager">
                <ManagerDashboard />
              </ProtectedRoute>
            }
          />
          <Route
            path="/dashboard/manager/invoices"
            element={
              <ProtectedRoute requiredRole="manager">
                <ManagerDashboard />
              </ProtectedRoute>
            }
          />
          <Route
            path="/dashboard/manager/payouts"
            element={
              <ProtectedRoute requiredRole="manager">
                <ManagerDashboard />
              </ProtectedRoute>
            }
          />
          <Route
            path="/dashboard/manager/settings"
            element={
              <ProtectedRoute requiredRole="manager">
                <ManagerDashboard />
              </ProtectedRoute>
            }
          />
          <Route
            path="/dashboard/manager/subscription"
            element={
              <ProtectedRoute requiredRole="manager">
                <ManagerDashboard />
              </ProtectedRoute>
            }
          />
          <Route
            path="/dashboard/manager/job/:jobId"
            element={
              <ProtectedRoute requiredRole="manager">
                <JobDetailPage />
              </ProtectedRoute>
            }
          />

          {/* Property Detail — All Roles */}
          <Route
            path="/dashboard/manager/property/:propertyId"
            element={
              <ProtectedRoute requiredRole="manager">
                <PropertyDetailPage role="manager" />
              </ProtectedRoute>
            }
          />
          <Route
            path="/dashboard/cleaner/property/:propertyId"
            element={
              <ProtectedRoute requiredRole="cleaner">
                <PropertyDetailPage role="cleaner" />
              </ProtectedRoute>
            }
          />
          <Route
            path="/dashboard/host/property/:propertyId"
            element={
              <ProtectedRoute requiredRole="host">
                <PropertyDetailPage role="host" />
              </ProtectedRoute>
            }
          />

          <Route
            path="/dashboard/cleaner/messaging"
            element={
              <ProtectedRoute requiredRole="cleaner">
                <CleanerDashboard activeSection="messaging" />
              </ProtectedRoute>
            }
          />

          <Route
            path="/dashboard/host/messaging"
            element={
              <ProtectedRoute requiredRole="host">
                <HostDashboard activeTab="messaging" />
              </ProtectedRoute>
            }
          />

          {/* Host Dashboard — view routes */}
          <Route
            path="/dashboard/host"
            element={
              <ProtectedRoute requiredRole="host">
                <HostDashboard activeTab="dashboard" />
              </ProtectedRoute>
            }
          />
          <Route
            path="/dashboard/host/properties"
            element={
              <ProtectedRoute requiredRole="host">
                <HostDashboard activeTab="properties" />
              </ProtectedRoute>
            }
          />
          <Route
            path="/dashboard/host/cleaners"
            element={
              <ProtectedRoute requiredRole="host">
                <Navigate to="/dashboard/host/properties" replace />
              </ProtectedRoute>
            }
          />
          <Route
            path="/dashboard/host/bookings"
            element={
              <ProtectedRoute requiredRole="host">
                <Navigate to="/dashboard/host/schedule" replace />
              </ProtectedRoute>
            }
          />
          <Route
            path="/dashboard/host/schedule"
            element={
              <ProtectedRoute requiredRole="host">
                <HostDashboard activeTab="schedule" />
              </ProtectedRoute>
            }
          />
          <Route
            path="/dashboard/host/turnover-jobs"
            element={
              <ProtectedRoute requiredRole="host">
                <HostDashboard activeTab="turnover-jobs" />
              </ProtectedRoute>
            }
          />
          <Route
            path="/dashboard/host/inbox"
            element={
              <ProtectedRoute requiredRole="host">
                <Navigate to="/dashboard/host/messaging" replace />
              </ProtectedRoute>
            }
          />
          <Route
            path="/dashboard/host/spend"
            element={
              <ProtectedRoute requiredRole="host">
                <Navigate to="/dashboard/host/subscription" replace />
              </ProtectedRoute>
            }
          />
          <Route
            path="/dashboard/host/performance"
            element={
              <ProtectedRoute requiredRole="host">
                <Navigate to="/dashboard/host" replace />
              </ProtectedRoute>
            }
          />
          <Route
            path="/dashboard/host/reports"
            element={
              <ProtectedRoute requiredRole="host">
                <Navigate to="/dashboard/host" replace />
              </ProtectedRoute>
            }
          />
          <Route
            path="/dashboard/host/settings"
            element={
              <ProtectedRoute requiredRole="host">
                <HostDashboard activeTab="settings" />
              </ProtectedRoute>
            }
          />
          <Route
            path="/dashboard/host/subscription"
            element={
              <ProtectedRoute requiredRole="host">
                <HostDashboard activeTab="subscription" />
              </ProtectedRoute>
            }
          />

          {/* Admin */}
          <Route path="/admin/login" element={<AdminLogin />} />
          <Route
            path="/admin"
            element={
              <ProtectedRoute requiredRole="admin">
                <AdminDashboard activeTab="overview" />
              </ProtectedRoute>
            }
          />
          <Route
            path="/admin/subscribers"
            element={
              <ProtectedRoute requiredRole="admin">
                <AdminDashboard activeTab="subscribers" />
              </ProtectedRoute>
            }
          />
          <Route
            path="/admin/waitlist"
            element={
              <ProtectedRoute requiredRole="admin">
                <AdminDashboard activeTab="waitlist" />
              </ProtectedRoute>
            }
          />
          <Route
            path="/admin/revenue"
            element={
              <ProtectedRoute requiredRole="admin">
                <AdminDashboard activeTab="revenue" />
              </ProtectedRoute>
            }
          />
          <Route
            path="/admin/activity"
            element={
              <ProtectedRoute requiredRole="admin">
                <AdminDashboard activeTab="activity" />
              </ProtectedRoute>
            }
          />
          <Route
            path="/admin/tickets"
            element={
              <ProtectedRoute requiredRole="admin">
                <AdminDashboard activeTab="tickets" />
              </ProtectedRoute>
            }
          />
          <Route
            path="/admin/issues"
            element={
              <ProtectedRoute requiredRole="admin">
                <AdminDashboard activeTab="issues" />
              </ProtectedRoute>
            }
          />
          <Route
            path="/admin/users"
            element={
              <ProtectedRoute requiredRole="admin">
                <AdminDashboard activeTab="users" />
              </ProtectedRoute>
            }
          />
          <Route
            path="/admin/properties"
            element={
              <ProtectedRoute requiredRole="admin">
                <AdminDashboard activeTab="properties" />
              </ProtectedRoute>
            }
          />
          <Route
            path="/admin/billing"
            element={
              <ProtectedRoute requiredRole="admin">
                <AdminDashboard activeTab="billing" />
              </ProtectedRoute>
            }
          />
          <Route
            path="/admin/audit"
            element={
              <ProtectedRoute requiredRole="admin">
                <AdminDashboard activeTab="audit" />
              </ProtectedRoute>
            }
          />
          <Route
            path="/admin/system"
            element={
              <ProtectedRoute requiredRole="admin">
                <AdminDashboard activeTab="system" />
              </ProtectedRoute>
            }
          />
          <Route
            path="/admin/preferences"
            element={
              <ProtectedRoute requiredRole="admin">
                <AdminDashboard activeTab="preferences" />
              </ProtectedRoute>
            }
          />
          <Route
            path="/admin/settings"
            element={
              <ProtectedRoute requiredRole="admin">
                <AdminDashboard activeTab="admin-settings" />
              </ProtectedRoute>
            }
          />

          {/* Portals */}
          <Route path="/host-portal" element={<HostPortalPage />} />
          <Route path="/photo-portal" element={<PhotoPortalPage />} />

          {/* 404 */}
          <Route path="*" element={<NotFound />} />
        </Routes>
        </Suspense>
      </main>
      {!hideChrome && <Footer />}
    </div>
  );
}

function SettingsRouteRedirect() {
  const { user } = useAuthStore();
  return <Navigate to={getSettingsRoute(user?.role ?? 'manager')} replace />;
}

export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <ToastProvider>
        <BrowserRouter>
          <AuthBootstrap>
            <ScrollToHash />
            <AppChrome />
          </AuthBootstrap>
        </BrowserRouter>
      </ToastProvider>
    </QueryClientProvider>
  );
}

function NotFound() {
  return (
    <V4Shell>
      <main className="v4-not-found-page" aria-labelledby="not-found-title">
        <section className="v4-not-found-card">
          <div className="v4-not-found-mark" aria-hidden="true">404</div>
          <span className="v4-script v4-not-found-script">Well, that took a wrong turn.</span>
          <h1 id="not-found-title">Page not found</h1>
          <p>
            This route is off the map. Let&apos;s get you back to the clean side.
          </p>
          <Link to="/" className="v4-btn">Go Home</Link>
        </section>
      </main>
    </V4Shell>
  );
}