refactor(detail): render sections on the server behind a client shell

page.tsx now composes the sections and passes them through SchoolDetailShell
as children, so ~1,300 lines of static markup stop shipping as client
JavaScript. The shell keeps what is genuinely interactive: back link, header
reveal, hero map, compare CTA, sticky nav and scroll-spy.

The scroll-spy already located sections via document.getElementById, so it
works unchanged against server-rendered children.

Charts needed a client wrapper: next/dynamic with ssr:false is illegal in a
Server Component, so components/school/charts.tsx is the boundary that keeps
Chart.js (64 KB gz) lazy and browser-only.

Measured on this build:
- school route client chunk: 8 KB gz (33 KB raw)
- total static JS across all chunks: 380.6 -> 350.7 KB gz
- section markup is absent from every client chunk ("Got their first choice",
  "Ofsted reports", "Most deprived" etc. all return 0 hits); shell strings
  still present, as expected
- shared baseline unchanged at 172 KB gz -- out of scope, as designed

The 14 characterization tests pass byte-identical to the commit that
introduced them. Only the render helper changed.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

nextjs-app/app/school/[slug]/page.tsx

@@ -6,8 +6,13 @@
 
 import { fetchSchoolDetails, fetchSchools, fetchNationalAverages } from '@/lib/api';
 import { notFound, redirect } from 'next/navigation';
-import { SchoolDetailView } from '@/components/SchoolDetailView';
-import { SecondarySchoolDetailView } from '@/components/SecondarySchoolDetailView';
+import { SchoolDetailShell } from '@/components/school/SchoolDetailShell';
+import { PrimarySchoolSections } from '@/components/school/PrimarySchoolSections';
+import { SecondarySchoolSections } from '@/components/school/SecondarySchoolSections';
+import {
+  computeSchoolFlags, buildNavItems,
+  computeSecondaryFlags, buildSecondaryNavItems,
+} from '@/lib/schoolSections';
 import { parseSchoolSlug, schoolUrl } from '@/lib/utils';
 import type { NationalAverages } from '@/lib/types';
 import type { Metadata } from 'next';
@@ -152,13 +157,30 @@ export default async function SchoolPage({ params }: SchoolPageProps) {
 
   const phaseStr = (school_info.phase ?? '').toLowerCase();
   const isAllThrough = phaseStr === 'all-through';
-  // All-through schools go to SchoolDetailView (renders both KS2 + KS4 sections).
-  // SecondarySchoolDetailView is KS4-only, so all-through schools would lose SATs data.
+  // All-through schools go to PrimarySchoolSections (renders both KS2 + KS4).
+  // SecondarySchoolSections is KS4-only, so all-through schools would lose SATs data.
   const isSecondary = !isAllThrough && (
     phaseStr.includes('secondary')
     || yearly_data.some((d: any) => d.attainment_8_score != null)
   );
 
+  // Section list is computed on the server so the client shell never needs to
+  // derive it -- and so it can never disagree with what the sections render.
+  const sectionInput = {
+    schoolInfo: school_info, yearlyData: yearly_data,
+    absenceData: absence_data, census: census ?? null,
+    deprivation: deprivation ?? null, finance: finance ?? null,
+  };
+  const primaryFlags = computeSchoolFlags(sectionInput);
+  const secondaryFlags = computeSecondaryFlags(sectionInput);
+  const navInput = {
+    ofsted: ofsted ?? null,
+    admissions: admissions ?? null,
+    yearlyDataLength: yearly_data.length,
+  };
+  const primaryNavItems = buildNavItems(primaryFlags, navInput);
+  const secondaryNavItems = buildSecondaryNavItems(secondaryFlags, navInput);
+
   // Generate JSON-LD structured data for SEO
   const structuredData = {
     '@context': 'https://schema.org',
@@ -193,19 +215,7 @@ export default async function SchoolPage({ params }: SchoolPageProps) {
         dangerouslySetInnerHTML={{ __html: JSON.stringify(structuredData) }}
       />
       {isSecondary ? (
-        <SecondarySchoolDetailView
-          schoolInfo={school_info}
-          yearlyData={yearly_data}
-          absenceData={absence_data}
-          ofsted={ofsted ?? null}
-          census={census ?? null}
-          admissions={admissions ?? null}
-          deprivation={deprivation ?? null}
-          finance={finance ?? null}
-          nationalAvg={nationalAvg}
-        />
-      ) : (
-        <SchoolDetailView
+        <SchoolDetailShell
           schoolInfo={school_info}
           yearlyData={yearly_data}
           absenceData={absence_data}
@@ -216,7 +226,49 @@ export default async function SchoolPage({ params }: SchoolPageProps) {
           deprivation={deprivation ?? null}
           finance={finance ?? null}
           nationalAvg={nationalAvg}
-        />
+          navItems={secondaryNavItems}
+        >
+          <SecondarySchoolSections
+            schoolInfo={school_info}
+            yearlyData={yearly_data}
+            absenceData={absence_data}
+            ofsted={ofsted ?? null}
+            census={census ?? null}
+            admissions={admissions ?? null}
+            deprivation={deprivation ?? null}
+            finance={finance ?? null}
+            nationalAvg={nationalAvg}
+            flags={secondaryFlags}
+          />
+        </SchoolDetailShell>
+      ) : (
+        <SchoolDetailShell
+          schoolInfo={school_info}
+          yearlyData={yearly_data}
+          absenceData={absence_data}
+          ofsted={ofsted ?? null}
+          census={census ?? null}
+          admissions={admissions ?? null}
+          admissionsHistory={admissions_history ?? []}
+          deprivation={deprivation ?? null}
+          finance={finance ?? null}
+          nationalAvg={nationalAvg}
+          navItems={primaryNavItems}
+        >
+          <PrimarySchoolSections
+            schoolInfo={school_info}
+            yearlyData={yearly_data}
+            absenceData={absence_data}
+            ofsted={ofsted ?? null}
+            census={census ?? null}
+            admissions={admissions ?? null}
+            admissionsHistory={admissions_history ?? []}
+            deprivation={deprivation ?? null}
+            finance={finance ?? null}
+            nationalAvg={nationalAvg}
+            flags={primaryFlags}
+          />
+        </SchoolDetailShell>
       )}
     </>
   );