import { lazy, StrictMode, Suspense, useEffect } from 'react'
import { createRoot } from 'react-dom/client'
import {
  BrowserRouter,
  Route,
  Routes,
  useLocation,
} from 'react-router-dom'

import './index.css'
import { StagingBadge } from './StagingBadge'
import { applyStagingSeoGuard } from './stagingSeoGuard'

// Run before React mounts so the noindex directive is in the DOM before
// any per-page `usePageMetadata` effect fires. No-op in production.
applyStagingSeoGuard()

/**
 * Every route component below is dynamically imported so that the initial
 * JS payload only contains the framework shell (React + Router + this file)
 * plus whatever single page chunk the visitor actually landed on. Without
 * this split, all 25+ page modules were transitively reachable from a
 * single static import graph and Vite emitted them into one `index-*.js`
 * file (≈472 kB raw / ≈120 kB gzip), forcing every first paint to download
 * code for pages the visitor will probably never see in that session.
 *
 * With lazy imports the dominant work on first paint becomes downloading
 * the page chunk that matches the URL (most landings are city or service
 * pages of ≈2–4 kB gzipped each, all of which share `ServicePageQuote` and
 * `ServicePageTemplate` chunks that Vite extracts automatically).
 */
const AccessControlAlexandriaVA = lazy(() => import('./AccessControlAlexandriaVA'))
const AccessControlAnnapolis = lazy(() => import('./AccessControlAnnapolis'))
const AccessControlDC = lazy(() => import('./AccessControlDC'))
const App = lazy(() => import('./App'))
const AxisCameraInstallationDC = lazy(() => import('./AxisCameraInstallationDC'))
const BrivoAccessControlDC = lazy(() => import('./BrivoAccessControlDC'))
const BusinessWifiBethesda = lazy(() => import('./BusinessWifiBethesda'))
const BusinessWiFiDC = lazy(() => import('./BusinessWiFiDC'))
const Cat6AInstallationDC = lazy(() => import('./Cat6AInstallationDC'))
const Cat6InstallationDC = lazy(() => import('./Cat6InstallationDC'))
const Cat8InstallationDC = lazy(() => import('./Cat8InstallationDC'))
const CCTVInstallationDC = lazy(() => import('./CCTVInstallationDC'))
const CoaxCablingDC = lazy(() => import('./CoaxCablingDC'))
const CommercialCctvDC = lazy(() => import('./CommercialCctvDC'))
const CommercialWifiBaltimore = lazy(() => import('./CommercialWifiBaltimore'))
const FiberOpticCablingDC = lazy(() => import('./FiberOpticCablingDC'))
const NetworkTroubleshootingDC = lazy(
  () => import('./NetworkTroubleshootingDC'),
)
const NetworkTroubleshootingITSupport = lazy(
  () => import('./NetworkTroubleshootingITSupport'),
)
const SecurityCameraInstallationBaltimore = lazy(
  () => import('./SecurityCameraInstallationBaltimore'),
)
const StructuredCablingAlexandriaVA = lazy(
  () => import('./StructuredCablingAlexandriaVA'),
)
const StructuredCablingAnnapolis = lazy(() => import('./StructuredCablingAnnapolis'))
const StructuredCablingBaltimore = lazy(() => import('./StructuredCablingBaltimore'))
const StructuredCablingBethesda = lazy(() => import('./StructuredCablingBethesda'))
const StructuredCablingDC = lazy(() => import('./StructuredCablingDC'))
const ThankYou = lazy(() => import('./ThankYou'))
const VerkadaAccessControlDC = lazy(() => import('./VerkadaAccessControlDC'))
const VoipSolutionsDC = lazy(() => import('./VoipSolutionsDC'))

function ScrollToTop() {
  const { pathname } = useLocation()

  useEffect(() => {
    window.scrollTo(0, 0)
  }, [pathname])

  return null
}

/**
 * Suspense fallback shown while a route's chunk downloads. Intentionally
 * a single full-viewport dark surface in the site's background color —
 * the chunks are small (sub-second on 4G) and a richer skeleton would
 * flicker more than it would reassure. `aria-hidden` so screen readers
 * stay quiet during the brief load.
 */
function RouteFallback() {
  return <div className="min-h-svh bg-[#0a0d12]" aria-hidden />
}

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <BrowserRouter>
      <ScrollToTop />
      <Suspense fallback={<RouteFallback />}>
        <Routes>
          <Route path="/" element={<App />} />
          <Route
            path="/structured-cabling-dc"
            element={<StructuredCablingDC />}
          />
          <Route path="/cctv-installation-dc" element={<CCTVInstallationDC />} />
          <Route path="/access-control-dc" element={<AccessControlDC />} />
          <Route path="/business-wifi-dc" element={<BusinessWiFiDC />} />
          <Route
            path="/fiber-optic-cabling-dc"
            element={<FiberOpticCablingDC />}
          />
          <Route path="/cat6-installation-dc" element={<Cat6InstallationDC />} />
          <Route
            path="/cat6a-installation-dc"
            element={<Cat6AInstallationDC />}
          />
          <Route path="/cat8-installation-dc" element={<Cat8InstallationDC />} />
          <Route path="/coax-cabling-dc" element={<CoaxCablingDC />} />
          <Route
            path="/axis-camera-installation-dc"
            element={<AxisCameraInstallationDC />}
          />
          <Route
            path="/verkada-access-control-dc"
            element={<VerkadaAccessControlDC />}
          />
          <Route
            path="/brivo-access-control-dc"
            element={<BrivoAccessControlDC />}
          />
          <Route path="/voip-solutions-dc" element={<VoipSolutionsDC />} />
          <Route
            path="/network-troubleshooting-dc"
            element={<NetworkTroubleshootingDC />}
          />
          <Route
            path="/network-troubleshooting-it-support"
            element={<NetworkTroubleshootingITSupport />}
          />
          <Route
            path="/structured-cabling-baltimore"
            element={<StructuredCablingBaltimore />}
          />
          <Route
            path="/structured-cabling-annapolis"
            element={<StructuredCablingAnnapolis />}
          />
          <Route
            path="/structured-cabling-bethesda"
            element={<StructuredCablingBethesda />}
          />
          <Route
            path="/structured-cabling-alexandria-va"
            element={<StructuredCablingAlexandriaVA />}
          />
          <Route
            path="/commercial-wifi-baltimore"
            element={<CommercialWifiBaltimore />}
          />
          <Route
            path="/business-wifi-bethesda"
            element={<BusinessWifiBethesda />}
          />
          <Route
            path="/access-control-annapolis"
            element={<AccessControlAnnapolis />}
          />
          <Route
            path="/access-control-alexandria-va"
            element={<AccessControlAlexandriaVA />}
          />
          <Route
            path="/security-camera-installation-baltimore"
            element={<SecurityCameraInstallationBaltimore />}
          />
          <Route path="/commercial-cctv-dc" element={<CommercialCctvDC />} />
          <Route path="/thank-you" element={<ThankYou />} />
        </Routes>
      </Suspense>
    </BrowserRouter>
    <StagingBadge />
  </StrictMode>,
)