feat(compare): parent-first compare screen assembly

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0146VHeLAWjDVE2B5uU67jCB

nextjs-app/components/ComparisonView.tsx

@@ -1,47 +1,38 @@
 /**
- * ComparisonView Component
- * Client-side comparison interface with phase tabs, charts, and tables
+ * ComparisonView — the parent-first compare screen: a sticky school bar and
+ * six sections (At a glance / Ofsted / Academics / Getting a place / Who
+ * goes there / Explore trends), every number anchored against the England
+ * average or the computed state-school benchmark with provenance-correct
+ * labels. Layout and copy follow the reviewed mockups
+ * (docs/superpowers/specs/mockups/).
  */
 
 'use client';
 
 import { useEffect, useRef, useState } from 'react';
 import { useRouter, usePathname, useSearchParams } from 'next/navigation';
-import dynamic from 'next/dynamic';
 import { useComparison } from '@/hooks/useComparison';
 
-const ComparisonChart = dynamic(
-  () => import('./ComparisonChart').then((m) => m.ComparisonChart),
-  { ssr: false },
-);
 import { SchoolSearchModal } from './SchoolSearchModal';
 import { EmptyState } from './EmptyState';
-import { LoadingSkeleton } from './LoadingSkeleton';
-import type { ComparisonData, MetricDefinition, School } from '@/lib/types';
-import { formatPercentage, formatProgress, formatAcademicYear, CHART_COLORS, CHART_TEXT_COLORS, schoolUrl } from '@/lib/utils';
+import { CompareAtAGlance } from './compare/CompareAtAGlance';
+import { CompareOfsted } from './compare/CompareOfsted';
+import { CompareAcademics } from './compare/CompareAcademics';
+import { CompareAdmissions } from './compare/CompareAdmissions';
+import { CompareCommunity } from './compare/CompareCommunity';
+import { TrendsExplorer, PRIMARY_CATEGORIES, SECONDARY_CATEGORIES } from './compare/TrendsExplorer';
+import type {
+  Benchmarks,
+  ComparisonData,
+  MetricDefinition,
+  NationalAverages,
+  School,
+} from '@/lib/types';
+import { CHART_COLORS, schoolUrl } from '@/lib/utils';
 import { fetchComparison } from '@/lib/api';
 import { track } from '@/lib/analytics';
 import styles from './ComparisonView.module.css';
 
-const PRIMARY_CATEGORIES = ['expected', 'higher', 'progress', 'average', 'gender', 'equity', 'context', 'absence', 'trends'];
-const SECONDARY_CATEGORIES = ['gcse'];
-
-const PRIMARY_OPTGROUPS: { label: string; category: string }[] = [
-  { label: 'Expected Standard', category: 'expected' },
-  { label: 'Higher Standard', category: 'higher' },
-  { label: 'Progress Scores', category: 'progress' },
-  { label: 'Average Scores', category: 'average' },
-  { label: 'Gender Performance', category: 'gender' },
-  { label: 'Equity (Disadvantaged)', category: 'equity' },
-  { label: 'School Context', category: 'context' },
-  { label: 'Absence', category: 'absence' },
-  { label: '3-Year Trends', category: 'trends' },
-];
-
-const SECONDARY_OPTGROUPS: { label: string; category: string }[] = [
-  { label: 'GCSE Performance', category: 'gcse' },
-];
-
 interface ComparisonViewProps {
   initialData: Record<string, ComparisonData> | null;
   initialUrns: number[];
@@ -58,11 +49,13 @@ export function ComparisonView({
   const router = useRouter();
   const pathname = usePathname();
   const searchParams = useSearchParams();
-  const { selectedSchools, removeSchool, addSchool, replaceSchools, isInitialized } = useComparison();
+  const { selectedSchools, removeSchool, replaceSchools, isInitialized } = useComparison();
 
   const [selectedMetric, setSelectedMetric] = useState(initialMetric);
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [comparisonData, setComparisonData] = useState(initialData);
+  const [nationalAverages, setNationalAverages] = useState<NationalAverages | undefined>();
+  const [benchmarks, setBenchmarks] = useState<Benchmarks | undefined>();
   const [shareConfirm, setShareConfirm] = useState(false);
   const [comparePhase, setComparePhase] = useState<'primary' | 'secondary'>('primary');
   // Tracks whether the user has explicitly clicked a phase tab.
@@ -77,18 +70,18 @@ export function ComparisonView({
     if (!isInitialized) return;
     if (initialUrns.length > 0 && initialData) {
       const urlSchools = initialUrns
-        .map(urn => initialData[String(urn)]?.school_info)
+        .map((urn) => initialData[String(urn)]?.school_info)
         .filter((info): info is NonNullable<typeof info> => Boolean(info));
       const sameSet =
         urlSchools.length === selectedSchools.length &&
-        urlSchools.every(s => selectedSchools.some(sel => sel.urn === s.urn));
+        urlSchools.every((s) => selectedSchools.some((sel) => sel.urn === s.urn));
       if (urlSchools.length > 0 && !sameSet) {
         replaceSchools(urlSchools);
       }
     }
   }, [isInitialized]); // eslint-disable-line react-hooks/exhaustive-deps
 
-  // Sync URL with selected schools
+  // Sync URL with selected schools + metric, and (re)fetch the comparison.
   useEffect(() => {
     const urns = selectedSchools.map((s) => s.urn).join(',');
     const params = new URLSearchParams(searchParams);
@@ -104,20 +97,23 @@ export function ComparisonView({
     const newUrl = `${pathname}?${params.toString()}`;
     router.replace(newUrl, { scroll: false });
 
-    // Fetch comparison data
     if (selectedSchools.length > 0) {
       fetchComparison(urns, { cache: 'no-store' })
         .then((data) => {
           setComparisonData(data.comparison);
+          setNationalAverages(data.national_averages);
+          setBenchmarks(data.benchmarks);
         })
         .catch((err) => {
           // Keep whatever we already have (SSR data or a previous fetch) rather
-          // than blanking the chart — a transient refetch failure shouldn't
+          // than blanking the page — a transient refetch failure shouldn't
           // destroy a working comparison the user is looking at.
           console.error('Failed to fetch comparison:', err);
         });
     } else {
       setComparisonData(null);
+      setNationalAverages(undefined);
+      setBenchmarks(undefined);
     }
   }, [selectedSchools, selectedMetric, pathname, searchParams, router]);
 
@@ -128,27 +124,22 @@ export function ComparisonView({
     if (info?.rwm_expected_pct != null) return 'primary';
     // Fallback: check yearly data
     const yearlyData = comparisonData?.[school.urn]?.yearly_data;
-    if (yearlyData?.some((d: any) => d.attainment_8_score != null)) return 'secondary';
+    if (yearlyData?.some((d) => d.attainment_8_score != null)) return 'secondary';
     return 'primary';
   };
 
-  const primarySchools = selectedSchools.filter(s => classifySchool(s) === 'primary');
-  const secondarySchools = selectedSchools.filter(s => classifySchool(s) === 'secondary');
+  const primarySchools = selectedSchools.filter((s) => classifySchool(s) === 'primary');
+  const secondarySchools = selectedSchools.filter((s) => classifySchool(s) === 'secondary');
 
-  // Auto-select tab with more schools and sync the metric to match the detected phase.
-  // This fixes the case where the URL carries a primary metric (e.g. rwm_expected_pct)
-  // but the shortlisted schools are secondary — the phase tab switches but the metric
-  // needs to follow, otherwise all secondary cards show "–" for a primary-only field.
+  // Auto-select tab with more schools and sync the metric to match the phase.
   useEffect(() => {
     if (!comparisonData || selectedSchools.length === 0) return;
     if (phaseLockedByUser.current) return;
     const newPhase = secondarySchools.length > primarySchools.length ? 'secondary' : 'primary';
     setComparePhase(newPhase);
-    // Only reset the metric when it doesn't belong to the newly detected phase.
-    // This preserves a correct metric that came from the URL (e.g. metric=attainment_8_score).
     const phaseCategories = newPhase === 'secondary' ? SECONDARY_CATEGORIES : PRIMARY_CATEGORIES;
     const metricFitsPhase = metrics.some(
-      (m) => m.key === selectedMetric && phaseCategories.includes(m.category)
+      (m) => m.key === selectedMetric && phaseCategories.includes(m.category),
     );
     if (!metricFitsPhase) {
       setSelectedMetric(newPhase === 'secondary' ? 'attainment_8_score' : 'rwm_expected_pct');
@@ -158,29 +149,24 @@ export function ComparisonView({
   const handlePhaseChange = (phase: 'primary' | 'secondary') => {
     phaseLockedByUser.current = true;
     setComparePhase(phase);
-    const defaultMetric = phase === 'secondary' ? 'attainment_8_score' : 'rwm_expected_pct';
-    setSelectedMetric(defaultMetric);
+    setSelectedMetric(phase === 'secondary' ? 'attainment_8_score' : 'rwm_expected_pct');
   };
 
   // compare_viewed: fire once after the page has its first selection.
-  // We watch `selectedSchools.length` going from 0 → ≥1 so the event is
-  // sent only when there's actual content to view, not for empty arrivals.
   const compareViewedRef = useRef(false);
   useEffect(() => {
     if (compareViewedRef.current) return;
     if (selectedSchools.length === 0) return;
     compareViewedRef.current = true;
-    const primaryCount = selectedSchools.filter(s => s.phase?.toLowerCase().includes('primary')).length;
+    const primaryCount = selectedSchools.filter((s) =>
+      s.phase?.toLowerCase().includes('primary'),
+    ).length;
     const secondaryCount = selectedSchools.length - primaryCount;
-    const phaseMix = primaryCount === 0 ? 'all_secondary' : secondaryCount === 0 ? 'all_primary' : 'mixed';
+    const phaseMix =
+      primaryCount === 0 ? 'all_secondary' : secondaryCount === 0 ? 'all_primary' : 'mixed';
     track('compare_viewed', { school_count: selectedSchools.length, phase_mix: phaseMix });
   }, [selectedSchools]);
 
-  const handleMetricChange = (metric: string) => {
-    track('compare_metric_changed', { metric, phase: comparePhase });
-    setSelectedMetric(metric);
-  };
-
   const handleRemoveSchool = (urn: number) => {
     removeSchool(urn);
     track('compare_school_removed', { urn, from: 'compare' });
@@ -191,21 +177,22 @@ export function ComparisonView({
     const count = selectedSchools.length;
     const shareData = {
       title: 'School comparison · SchoolCompare',
-      text: count > 0
-        ? `Comparing ${count} school${count === 1 ? '' : 's'} on SchoolCompare`
-        : 'SchoolCompare',
+      text:
+        count > 0
+          ? `Comparing ${count} school${count === 1 ? '' : 's'} on SchoolCompare`
+          : 'SchoolCompare',
       url,
     };
-    // Prefer the native share sheet on platforms that support it (iOS / Android).
-    // canShare is feature-detected because Safari iOS exposes share() but
-    // some configurations refuse the payload.
-    if (typeof navigator !== 'undefined' && navigator.share && (!navigator.canShare || navigator.canShare(shareData))) {
+    if (
+      typeof navigator !== 'undefined' &&
+      navigator.share &&
+      (!navigator.canShare || navigator.canShare(shareData))
+    ) {
       try {
         await navigator.share(shareData);
         track('compare_shared', { method: 'native', school_count: count });
         return;
       } catch (err) {
-        // User cancelled — bail silently. Any other error falls through to clipboard.
         if ((err as DOMException)?.name === 'AbortError') return;
       }
     }
@@ -214,27 +201,22 @@ export function ComparisonView({
       track('compare_shared', { method: 'clipboard', school_count: count });
       setShareConfirm(true);
       setTimeout(() => setShareConfirm(false), 2000);
-    } catch { /* fallback: do nothing */ }
+    } catch {
+      /* fallback: do nothing */
+    }
   };
 
   const isPrimary = comparePhase === 'primary';
-  const allowedCategories = isPrimary ? PRIMARY_CATEGORIES : SECONDARY_CATEGORIES;
-  const optgroups = isPrimary ? PRIMARY_OPTGROUPS : SECONDARY_OPTGROUPS;
-  const filteredMetrics = metrics.filter(m => allowedCategories.includes(m.category));
   const activeSchools = isPrimary ? primarySchools : secondarySchools;
 
-  // Get metric definition
-  const currentMetricDef = metrics.find((m) => m.key === selectedMetric);
-  const metricLabel = currentMetricDef?.label || selectedMetric;
-
-  // No schools selected
   if (selectedSchools.length === 0) {
     return (
       <div className={styles.container}>
         <header className={styles.header}>
           <h1>Compare Schools</h1>
           <p className={styles.subtitle}>
-            Add schools to your comparison basket to see side-by-side performance data
+            Add schools to your comparison basket to see them side by side — inspection results,
+            academics, admissions and community.
           </p>
         </header>
 
@@ -252,39 +234,46 @@ export function ComparisonView({
     );
   }
 
-  // Build filtered comparison data for active phase
+  // Build filtered comparison data for the active phase
   const activeComparisonData: Record<string, ComparisonData> = {};
   if (comparisonData) {
-    activeSchools.forEach(s => {
+    activeSchools.forEach((s) => {
       if (comparisonData[s.urn]) {
         activeComparisonData[s.urn] = comparisonData[s.urn];
       }
     });
   }
-
-  // Get years for table
-  const years =
-    Object.keys(activeComparisonData).length > 0
-      ? activeComparisonData[Object.keys(activeComparisonData)[0]].yearly_data.map((d) => d.year)
-      : [];
+  const hasData = Object.keys(activeComparisonData).length > 0;
 
   return (
     <div className={styles.container}>
-      {/* Header */}
       <header className={styles.header}>
         <div className={styles.headerContent}>
           <div>
             <h1>Compare Schools</h1>
             <p className={styles.subtitle}>
-              Comparing {selectedSchools.length} school{selectedSchools.length !== 1 ? 's' : ''}
+              {selectedSchools.length} school{selectedSchools.length !== 1 ? 's' : ''} side by side
+              — each number anchored against the England average so you can tell at a glance
+              what&apos;s typical and what stands out.
             </p>
           </div>
-          <div style={{ display: 'flex', gap: '0.75rem', alignItems: 'center', flexWrap: 'wrap' }}>
+          <div className={styles.headerActions}>
             <button onClick={() => setIsModalOpen(true)} className="btn btn-primary">
               + Add School
             </button>
             <button onClick={handleShare} className="btn btn-tertiary" title="Copy comparison link">
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" width="16" height="16"><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/><polyline points="16 6 12 2 8 6"/><line x1="12" y1="2" x2="12" y2="15"/></svg>
+              <svg
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                width="16"
+                height="16"
+              >
+                <path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8" />
+                <polyline points="16 6 12 2 8 6" />
+                <line x1="12" y1="2" x2="12" y2="15" />
+              </svg>
               {shareConfirm ? 'Copied!' : 'Share'}
             </button>
           </div>
@@ -292,20 +281,22 @@ export function ComparisonView({
       </header>
 
       {/* Phase Tabs */}
-      <div className={styles.phaseTabs}>
-        <button
-          className={`${styles.phaseTab} ${isPrimary ? styles.phaseTabActive : ''}`}
-          onClick={() => handlePhaseChange('primary')}
-        >
-          Primary ({primarySchools.length})
-        </button>
-        <button
-          className={`${styles.phaseTab} ${!isPrimary ? styles.phaseTabActive : ''}`}
-          onClick={() => handlePhaseChange('secondary')}
-        >
-          Secondary ({secondarySchools.length})
-        </button>
-      </div>
+      {secondarySchools.length > 0 && primarySchools.length > 0 && (
+        <div className={styles.phaseTabs}>
+          <button
+            className={`${styles.phaseTab} ${isPrimary ? styles.phaseTabActive : ''}`}
+            onClick={() => handlePhaseChange('primary')}
+          >
+            Primary ({primarySchools.length})
+          </button>
+          <button
+            className={`${styles.phaseTab} ${!isPrimary ? styles.phaseTabActive : ''}`}
+            onClick={() => handlePhaseChange('secondary')}
+          >
+            Secondary ({secondarySchools.length})
+          </button>
+        </div>
+      )}
 
       {activeSchools.length === 0 ? (
         <EmptyState
@@ -318,184 +309,82 @@ export function ComparisonView({
         />
       ) : (
         <>
-          {/* Metric Selector */}
-          <section className={styles.metricSelector}>
-            <label htmlFor="metric-select" className={styles.metricLabel}>
-              Select Metric:
-            </label>
-            <select
-              id="metric-select"
-              value={selectedMetric}
-              onChange={(e) => handleMetricChange(e.target.value)}
-              className={styles.metricSelect}
-            >
-              {optgroups.map(({ label, category }) => {
-                const groupMetrics = filteredMetrics.filter(m => m.category === category);
-                if (groupMetrics.length === 0) return null;
-                return (
-                  <optgroup key={category} label={label}>
-                    {groupMetrics.map((metric) => (
-                      <option key={metric.key} value={metric.key}>{metric.label}</option>
-                    ))}
-                  </optgroup>
-                );
-              })}
-            </select>
-            {currentMetricDef?.description && (
-              <p className={styles.metricDescription}>{currentMetricDef.description}</p>
-            )}
-          </section>
-
-          {/* Progress score explanation */}
-          {selectedMetric.includes('progress') && (
-            <p className={styles.progressNote}>
-              Progress scores measure pupils&apos; progress from KS1 to KS2. A score of 0 equals the national average; positive scores are above average.
-            </p>
-          )}
-
-          {/* School Cards */}
-          <section className={styles.schoolsSection}>
-            <div className={styles.schoolsGrid}>
-              {activeSchools.map((school, index) => (
-                <div
-                  key={school.urn}
-                  className={styles.schoolCard}
-                  style={{ borderLeft: `3px solid ${CHART_COLORS[index % CHART_COLORS.length]}` }}
-                >
-                  <button
-                    onClick={() => handleRemoveSchool(school.urn)}
-                    className={styles.removeButton}
-                    aria-label={`Remove ${school.school_name}`}
-                    title="Remove from comparison"
-                  >
-                    ×
-                  </button>
-                  <h2 className={styles.schoolName}>
-                    <a href={schoolUrl(school.urn, school.school_name)}>{school.school_name}</a>
-                  </h2>
-                  <div className={styles.schoolMeta}>
-                    {school.local_authority && (
-                      <span className={styles.metaItem}>{school.local_authority}</span>
-                    )}
-                    {school.school_type && (
-                      <span className={styles.metaItem}>{school.school_type}</span>
-                    )}
-                  </div>
-
-                  {/* Latest metric value */}
-                  {activeComparisonData[school.urn] && (
-                    <div className={styles.latestValue}>
-                      <div className={styles.latestLabel}>{metricLabel}</div>
-                      {/* Text uses the AA-dark variant; the swatch dot keeps the true series colour */}
-                      <div className={styles.latestNumber} style={{ color: CHART_TEXT_COLORS[index % CHART_TEXT_COLORS.length] }}>
-                        <span
-                          style={{
-                            display: 'inline-block',
-                            width: '10px',
-                            height: '10px',
-                            borderRadius: '50%',
-                            background: CHART_COLORS[index % CHART_COLORS.length],
-                            marginRight: '0.4rem',
-                            verticalAlign: 'middle',
-                          }}
-                        />
-                        {(() => {
-                          const yearlyData = activeComparisonData[school.urn].yearly_data;
-                          if (yearlyData.length === 0) return '-';
-
-                          const latestData = yearlyData[yearlyData.length - 1];
-                          const value = latestData[selectedMetric as keyof typeof latestData];
-
-                          if (value === null || value === undefined) return '-';
-
-                          if (selectedMetric.includes('progress')) {
-                            return formatProgress(value as number);
-                          } else if (selectedMetric.includes('pct') || selectedMetric.includes('rate')) {
-                            return formatPercentage(value as number);
-                          } else {
-                            return typeof value === 'number' ? value.toFixed(1) : String(value);
-                          }
-                        })()}
-                      </div>
-                    </div>
-                  )}
-                </div>
-              ))}
-            </div>
-          </section>
-
-          {/* Comparison Chart */}
-          {Object.keys(activeComparisonData).length > 0 ? (
-            <section className={styles.chartSection}>
-              <h2 className={styles.sectionTitle}>Performance Over Time</h2>
-              <div className={styles.chartContainer}>
-                <ComparisonChart
-                  comparisonData={activeComparisonData}
-                  schools={activeSchools}
-                  metric={selectedMetric}
-                  metricLabel={metricLabel}
+          {/* Sticky school bar — column identity while scrolling */}
+          <div className={styles.schoolBar} aria-label="Schools in this comparison">
+            {activeSchools.map((school, index) => (
+              <div
+                key={school.urn}
+                className={styles.schoolChip}
+                style={{ borderTopColor: CHART_COLORS[index % CHART_COLORS.length] }}
+              >
+                <span
+                  className={styles.chipDot}
+                  style={{ background: CHART_COLORS[index % CHART_COLORS.length] }}
+                  aria-hidden="true"
                 />
+                <span className={styles.chipText}>
+                  <a className={styles.chipName} href={schoolUrl(school.urn, school.school_name)}>
+                    {school.school_name}
+                  </a>
+                  <span className={styles.chipMeta}>
+                    {[school.local_authority, school.school_type].filter(Boolean).join(' · ')}
+                  </span>
+                </span>
+                <button
+                  onClick={() => handleRemoveSchool(school.urn)}
+                  className={styles.chipRemove}
+                  aria-label={`Remove ${school.school_name}`}
+                  title="Remove from comparison"
+                >
+                  ×
+                </button>
               </div>
-            </section>
-          ) : activeSchools.length > 0 ? (
-            <section className={styles.chartSection}>
-              <LoadingSkeleton type="list" />
-            </section>
-          ) : null}
+            ))}
+          </div>
 
-          {/* Comparison Table */}
-          {Object.keys(activeComparisonData).length > 0 && years.length > 0 && (
-            <section className={styles.tableSection}>
-              <h2 className={styles.sectionTitle}>Detailed Comparison</h2>
-              <div className={styles.tableWrapper}>
-                <table className={styles.comparisonTable}>
-                  <thead>
-                    <tr>
-                      <th>Year</th>
-                      {activeSchools.map((school) => (
-                        <th key={school.urn}>{school.school_name}</th>
-                      ))}
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {years.map((year) => (
-                      <tr key={year}>
-                        <td className={styles.yearCell}>{formatAcademicYear(year)}</td>
-                        {activeSchools.map((school) => {
-                          const schoolData = activeComparisonData[school.urn];
-                          if (!schoolData) return <td key={school.urn}>-</td>;
+          {hasData && (
+            <>
+              <CompareAtAGlance
+                schools={activeSchools}
+                data={activeComparisonData}
+                nationalAverages={nationalAverages}
+                benchmarks={benchmarks}
+              />
+              <CompareOfsted schools={activeSchools} data={activeComparisonData} />
+              <CompareAcademics
+                schools={activeSchools}
+                data={activeComparisonData}
+                nationalAverages={nationalAverages}
+                benchmarks={benchmarks}
+              />
+              <CompareAdmissions schools={activeSchools} data={activeComparisonData} />
+              <CompareCommunity
+                schools={activeSchools}
+                data={activeComparisonData}
+                benchmarks={benchmarks}
+              />
+              <TrendsExplorer
+                schools={activeSchools}
+                data={activeComparisonData}
+                metrics={metrics}
+                metric={selectedMetric}
+                onMetricChange={setSelectedMetric}
+                isPrimaryPhase={isPrimary}
+                nationalAverages={nationalAverages}
+              />
 
-                          const yearData = schoolData.yearly_data.find((d) => d.year === year);
-                          if (!yearData) return <td key={school.urn}>-</td>;
-
-                          const value = yearData[selectedMetric as keyof typeof yearData];
-
-                          if (value === null || value === undefined) {
-                            return <td key={school.urn}>-</td>;
-                          }
-
-                          let displayValue: string;
-                          if (selectedMetric.includes('progress')) {
-                            displayValue = formatProgress(value as number);
-                          } else if (selectedMetric.includes('pct') || selectedMetric.includes('rate')) {
-                            displayValue = formatPercentage(value as number);
-                          } else {
-                            displayValue = typeof value === 'number' ? value.toFixed(1) : String(value);
-                          }
-
-                          return <td key={school.urn}>{displayValue}</td>;
-                        })}
-                      </tr>
-                    ))}
-                  </tbody>
-                </table>
-              </div>
-            </section>
+              <p className={styles.footnote}>
+                Sources: DfE Compare School Performance (KS2/KS4 results), Ofsted inspection
+                outcomes, DfE school admissions data, school census. England averages for test
+                results are official DfE figures; other benchmarks are state-school averages
+                computed from our dataset. Following DfE practice, figures based on 5 or fewer
+                pupils are suppressed and shown as &quot;no data&quot;.
+              </p>
+            </>
           )}
         </>
       )}
 
-      {/* School Search Modal */}
       <SchoolSearchModal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)} />
     </div>
   );