feat: add secondary school support with KS4 data and metric tooltips

- Backend: replace INNER JOIN ks2 with UNION ALL (ks2 + ks4) so primary
  and secondary schools both appear in the main DataFrame
- Backend: add /api/national-averages endpoint computing means from live
  data, replacing the hardcoded NATIONAL_AVG constant on the frontend
- Backend: add phase filter param to /api/schools; return phases from
  /api/filters; fix hardcoded "phase": "Primary" in school detail endpoint
- Backend: add KS4 metric definitions (Attainment 8, Progress 8, EBacc,
  English & Maths pass rates) to METRIC_DEFINITIONS and RANKING_COLUMNS
- Frontend: SchoolDetailView is now phase-aware — secondary schools show
  a GCSE Results section (Att8, P8, E&M, EBacc) instead of SATs; phonics
  tab hidden for secondary; admissions says Year 7 instead of Year 3;
  history table shows KS4 columns; chart datasets switch for secondary
- Frontend: new MetricTooltip component (CSS-only ⓘ icon) backed by
  METRIC_EXPLANATIONS — added to RWM, GPS, SEN, EAL, IDACI, progress
  scores and all KS4 metrics throughout SchoolDetailView and SchoolCard
- Frontend: METRIC_EXPLANATIONS extended with KS4 terms (Attainment 8,
  Progress 8, EBacc) and previously missing terms (SEN, EHCP, EAL, IDACI)
- Frontend: SchoolCard expands "RWM" to "Reading, Writing & Maths" and
  shows Attainment 8 / English & Maths Grade 4+ for secondary schools
- Frontend: FilterBar adds Phase dropdown (Primary / Secondary / All-through)
- Frontend: HomeView hero copy updated; compact list shows phase-aware metric
- Global metadata updated to remove "primary only" framing

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

nextjs-app/components/FilterBar.tsx

@@ -27,6 +27,7 @@ export function FilterBar({ filters, isHero }: FilterBarProps) {
 
   const currentLA = searchParams.get('local_authority') || '';
   const currentType = searchParams.get('school_type') || '';
+  const currentPhase = searchParams.get('phase') || '';
 
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
@@ -86,7 +87,7 @@ export function FilterBar({ filters, isHero }: FilterBarProps) {
     });
   };
 
-  const hasActiveFilters = currentSearch || currentLA || currentType || currentPostcode;
+  const hasActiveFilters = currentSearch || currentLA || currentType || currentPhase || currentPostcode;
 
   return (
     <div className={`${styles.filterBar} ${isPending ? styles.isLoading : ''} ${isHero ? styles.heroMode : ''}`}>
@@ -152,6 +153,22 @@ export function FilterBar({ filters, isHero }: FilterBarProps) {
           ))}
         </select>
 
+        {filters.phases && filters.phases.length > 0 && (
+          <select
+            value={currentPhase}
+            onChange={(e) => handleFilterChange('phase', e.target.value)}
+            className={styles.filterSelect}
+            disabled={isPending}
+          >
+            <option value="">All Phases</option>
+            {filters.phases.map((p) => (
+              <option key={p} value={p.toLowerCase()}>
+                {p}
+              </option>
+            ))}
+          </select>
+        )}
+
         {hasActiveFilters && (
           <button onClick={handleClearFilters} className={`btn btn-tertiary ${styles.clearButton}`} type="button" disabled={isPending}>
             Clear Filters

nextjs-app/components/Footer.tsx

@@ -15,7 +15,7 @@ export function Footer() {
           <div className={styles.section}>
             <h3 className={styles.title}>SchoolCompare</h3>
             <p className={styles.description}>
-              Compare primary schools across England.
+              Compare primary and secondary schools across England.
             </p>
           </div>
 

nextjs-app/components/HomeView.tsx

@@ -51,8 +51,8 @@ export function HomeView({ initialSchools, filters, totalSchools }: HomeViewProp
       {/* Combined Hero + Search and Filters */}
       {!isSearchActive && (
         <div className={styles.heroSection}>
-          <h1 className={styles.heroTitle}>Compare Primary School Performance</h1>
-          <p className={styles.heroDescription}>Search and compare KS2 results for thousands of schools across England</p>
+          <h1 className={styles.heroTitle}>Compare School Performance</h1>
+          <p className={styles.heroDescription}>Search and compare SATs and GCSE results for thousands of schools across England</p>
         </div>
       )}
 
@@ -64,7 +64,7 @@ export function HomeView({ initialSchools, filters, totalSchools }: HomeViewProp
       {/* Discovery section shown on landing page before any search */}
       {!isSearchActive && initialSchools.schools.length === 0 && (
         <div className={styles.discoverySection}>
-          {totalSchools && <p className={styles.discoveryCount}><strong>{totalSchools.toLocaleString()}+</strong> primary schools across England</p>}
+          {totalSchools && <p className={styles.discoveryCount}><strong>{totalSchools.toLocaleString()}+</strong> primary and secondary schools across England</p>}
           <p className={styles.discoveryHints}>Try searching for a school name, or enter a postcode to find schools near you.</p>
           <div className={styles.quickSearches}>
             <span className={styles.quickSearchLabel}>Quick searches:</span>
@@ -258,7 +258,14 @@ function CompactSchoolItem({ school, onAddToCompare, isInCompare }: CompactSchoo
         </div>
         <div className={styles.compactItemStats}>
           <span className={styles.compactStat}>
-            <strong>{school.rwm_expected_pct !== null ? `${school.rwm_expected_pct}%` : '-'}</strong> RWM
+            <strong>
+              {school.attainment_8_score != null
+                ? school.attainment_8_score.toFixed(1)
+                : school.rwm_expected_pct !== null
+                  ? `${school.rwm_expected_pct}%`
+                  : '-'}
+            </strong>{' '}
+            {school.attainment_8_score != null ? 'Att 8' : 'RWM'}
           </span>
           <span className={styles.compactStat}>
             <strong>{school.total_pupils || '-'}</strong> pupils

nextjs-app/components/MetricTooltip.module.css

@@ -0,0 +1,83 @@
+.wrapper {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  margin-left: 0.3em;
+}
+
+.icon {
+  font-size: 0.85em;
+  color: var(--text-muted, #8a7a72);
+  cursor: help;
+  line-height: 1;
+  user-select: none;
+  transition: color 0.15s ease;
+}
+
+.wrapper:hover .icon {
+  color: var(--accent-coral, #e07256);
+}
+
+.tooltip {
+  visibility: hidden;
+  opacity: 0;
+  position: absolute;
+  bottom: calc(100% + 6px);
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 9999;
+  width: 220px;
+  background: var(--bg-primary, #faf7f2);
+  border: 1px solid var(--border-color, #e8ddd4);
+  border-radius: 10px;
+  box-shadow: 0 4px 16px rgba(44, 36, 32, 0.15);
+  padding: 0.6rem 0.75rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.3rem;
+  pointer-events: none;
+  transition: opacity 0.15s ease, visibility 0.15s ease;
+}
+
+/* Keep tooltip visible when hovering over it */
+.wrapper:hover .tooltip {
+  visibility: visible;
+  opacity: 1;
+}
+
+/* Small arrow pointing down */
+.tooltip::after {
+  content: '';
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border: 5px solid transparent;
+  border-top-color: var(--border-color, #e8ddd4);
+}
+
+.tooltipLabel {
+  font-weight: 600;
+  font-size: 0.75rem;
+  color: var(--text-primary, #2c2420);
+}
+
+.tooltipPlain {
+  font-size: 0.75rem;
+  color: var(--text-secondary, #5a4a44);
+  line-height: 1.4;
+}
+
+.tooltipDetail {
+  font-size: 0.7rem;
+  color: var(--text-muted, #8a7a72);
+  line-height: 1.4;
+  margin-top: 0.1rem;
+}
+
+/* Flip tooltip below when near top of screen */
+@media (max-width: 480px) {
+  .tooltip {
+    width: 180px;
+  }
+}

nextjs-app/components/MetricTooltip.tsx

@@ -0,0 +1,31 @@
+'use client';
+
+import { METRIC_EXPLANATIONS } from '@/lib/metrics';
+import styles from './MetricTooltip.module.css';
+
+interface MetricTooltipProps {
+  metricKey?: string;
+  label?: string;
+  plain?: string;
+  detail?: string;
+}
+
+export function MetricTooltip({ metricKey, label, plain, detail }: MetricTooltipProps) {
+  const explanation = metricKey ? METRIC_EXPLANATIONS[metricKey] : undefined;
+  const tooltipLabel = label ?? explanation?.label;
+  const tooltipPlain = plain ?? explanation?.plain;
+  const tooltipDetail = detail ?? explanation?.detail;
+
+  if (!tooltipPlain) return null;
+
+  return (
+    <span className={styles.wrapper}>
+      <span className={styles.icon} aria-label={tooltipLabel ?? 'More information'} role="img">ⓘ</span>
+      <span className={styles.tooltip} role="tooltip">
+        {tooltipLabel && <span className={styles.tooltipLabel}>{tooltipLabel}</span>}
+        <span className={styles.tooltipPlain}>{tooltipPlain}</span>
+        {tooltipDetail && <span className={styles.tooltipDetail}>{tooltipDetail}</span>}
+      </span>
+    </span>
+  );
+}

nextjs-app/components/PerformanceChart.tsx

@@ -34,24 +34,50 @@ ChartJS.register(
 interface PerformanceChartProps {
   data: SchoolResult[];
   schoolName: string;
+  isSecondary?: boolean;
 }
 
-export function PerformanceChart({ data, schoolName }: PerformanceChartProps) {
+export function PerformanceChart({ data, schoolName, isSecondary = false }: PerformanceChartProps) {
   // Sort data by year
   const sortedData = [...data].sort((a, b) => a.year - b.year);
   const years = sortedData.map(d => d.year.toString());
 
-  // Prepare datasets
-  const datasets = [
+  // Prepare datasets — phase-aware
+  const datasets = isSecondary ? [
     {
-      label: 'RWM Expected %',
+      label: 'Attainment 8',
+      data: sortedData.map(d => d.attainment_8_score),
+      borderColor: 'rgb(59, 130, 246)',
+      backgroundColor: 'rgba(59, 130, 246, 0.1)',
+      tension: 0.3,
+      yAxisID: 'y',
+    },
+    {
+      label: 'English & Maths Grade 4+',
+      data: sortedData.map(d => d.english_maths_standard_pass_pct),
+      borderColor: 'rgb(16, 185, 129)',
+      backgroundColor: 'rgba(16, 185, 129, 0.1)',
+      tension: 0.3,
+      yAxisID: 'y',
+    },
+    {
+      label: 'Progress 8',
+      data: sortedData.map(d => d.progress_8_score),
+      borderColor: 'rgb(245, 158, 11)',
+      backgroundColor: 'rgba(245, 158, 11, 0.1)',
+      tension: 0.3,
+      yAxisID: 'y1',
+    },
+  ] : [
+    {
+      label: 'Reading, Writing & Maths Expected %',
       data: sortedData.map(d => d.rwm_expected_pct),
       borderColor: 'rgb(59, 130, 246)',
       backgroundColor: 'rgba(59, 130, 246, 0.1)',
       tension: 0.3,
     },
     {
-      label: 'RWM Higher %',
+      label: 'Reading, Writing & Maths Higher %',
       data: sortedData.map(d => d.rwm_high_pct),
       borderColor: 'rgb(16, 185, 129)',
       backgroundColor: 'rgba(16, 185, 129, 0.1)',
@@ -153,14 +179,14 @@ export function PerformanceChart({ data, schoolName }: PerformanceChartProps) {
         position: 'left' as const,
         title: {
           display: true,
-          text: 'Percentage (%)',
+          text: isSecondary ? 'Score / Percentage (%)' : 'Percentage (%)',
           font: {
             size: 12,
             weight: 'bold',
           },
         },
         min: 0,
-        max: 100,
+        max: isSecondary ? undefined : 100,
         grid: {
           color: 'rgba(0, 0, 0, 0.05)',
         },
@@ -171,7 +197,7 @@ export function PerformanceChart({ data, schoolName }: PerformanceChartProps) {
         position: 'right' as const,
         title: {
           display: true,
-          text: 'Progress Score',
+          text: isSecondary ? 'Progress 8 Score' : 'Progress Score',
           font: {
             size: 12,
             weight: 'bold',

nextjs-app/components/SchoolCard.tsx

@@ -48,12 +48,35 @@ export function SchoolCard({ school, onAddToCompare, onRemoveFromCompare, showDi
         )}
       </div>
 
-      {(school.rwm_expected_pct !== null || school.reading_progress !== null) && (
+      {(school.rwm_expected_pct != null || school.attainment_8_score != null || school.reading_progress !== null) && (
         <div className={styles.metrics}>
+          {/* KS4 card metrics for secondary schools */}
+          {school.attainment_8_score != null && (
+            <div className={styles.metric}>
+              <span className={styles.metricLabel}>
+                Attainment 8
+                <span className={styles.metricHint}>avg grade across best 8 GCSEs</span>
+              </span>
+              <div className={styles.metricValue}>
+                <strong>{school.attainment_8_score.toFixed(1)}</strong>
+              </div>
+            </div>
+          )}
+          {school.english_maths_standard_pass_pct != null && (
+            <div className={styles.metric}>
+              <span className={styles.metricLabel}>
+                English &amp; Maths Grade 4+
+                <span className={styles.metricHint}>% standard pass in both</span>
+              </span>
+              <div className={styles.metricValue}>
+                <strong>{formatPercentage(school.english_maths_standard_pass_pct)}</strong>
+              </div>
+            </div>
+          )}
           {school.rwm_expected_pct !== null && (
             <div className={styles.metric}>
               <span className={styles.metricLabel}>
-                RWM Expected
+                Reading, Writing &amp; Maths
                 <span className={styles.metricHint}>% meeting expected standard</span>
               </span>
               <div className={styles.metricValue}>

nextjs-app/components/SchoolDetailView.tsx

@@ -5,15 +5,17 @@
 
 'use client';
 
+import { useEffect, useState } from 'react';
 import { useRouter } from 'next/navigation';
 import { useComparison } from '@/hooks/useComparison';
 import { PerformanceChart } from './PerformanceChart';
 import { SchoolMap } from './SchoolMap';
+import { MetricTooltip } from './MetricTooltip';
 import type {
   School, SchoolResult, AbsenceData,
   OfstedInspection, OfstedParentView, SchoolCensus,
   SchoolAdmissions, SenDetail, Phonics,
-  SchoolDeprivation, SchoolFinance,
+  SchoolDeprivation, SchoolFinance, NationalAverages,
 } from '@/lib/types';
 import { formatPercentage, formatProgress, formatAcademicYear } from '@/lib/utils';
 import styles from './SchoolDetailView.module.css';
@@ -37,19 +39,6 @@ const RC_CATEGORIES = [
   { key: 'rc_sixth_form' as const,            label: 'Sixth Form' },
 ];
 
-// 2023 national averages for context
-const NATIONAL_AVG = {
-  rwm_expected: 60,
-  rwm_high: 8,
-  reading_expected: 73,
-  writing_expected: 71,
-  maths_expected: 73,
-  phonics_yr1: 79,
-  overall_absence: 6.7,
-  persistent_absence: 22,
-  class_size: 27,
-  per_pupil_spend: 6000,
-};
 
 function progressClass(val: number | null | undefined): string {
   if (val == null) return '';
@@ -82,6 +71,23 @@ export function SchoolDetailView({
 
   const latestResults = yearlyData.length > 0 ? yearlyData[yearlyData.length - 1] : null;
 
+  // Phase detection
+  const phase = schoolInfo.phase ?? '';
+  const isSecondary = phase.toLowerCase().includes('secondary') || phase.toLowerCase() === 'all-through';
+  const isPrimary = !isSecondary;
+
+  // National averages (fetched dynamically so they stay current)
+  const [nationalAvg, setNationalAvg] = useState<NationalAverages | null>(null);
+  useEffect(() => {
+    fetch('/api/national-averages')
+      .then(r => r.ok ? r.json() : null)
+      .then(data => { if (data) setNationalAvg(data); })
+      .catch(() => {});
+  }, []);
+
+  const primaryAvg = nationalAvg?.primary ?? {};
+  const secondaryAvg = nationalAvg?.secondary ?? {};
+
   const handleComparisonToggle = () => {
     if (isInComparison) {
       removeSchool(schoolInfo.urn);
@@ -108,13 +114,18 @@ export function SchoolDetailView({
   const hasFinance = finance != null && finance.per_pupil_spend != null;
   const hasLocation = schoolInfo.latitude != null && schoolInfo.longitude != null;
 
+  // Determine whether this school has KS2 or KS4 results to show
+  const hasKS2Results = latestResults != null && latestResults.rwm_expected_pct != null;
+  const hasKS4Results = latestResults != null && latestResults.attainment_8_score != null;
+  const hasAnyResults = hasKS2Results || hasKS4Results;
+
   // Build section nav items dynamically — only sections with data
   const navItems: { id: string; label: string }[] = [];
   if (ofsted) navItems.push({ id: 'ofsted', label: 'Ofsted' });
   if (parentView && parentView.total_responses != null && parentView.total_responses > 0)
     navItems.push({ id: 'parents', label: 'Parents' });
-  if (latestResults) navItems.push({ id: 'sats', label: 'SATs' });
-  if (hasPhonics) navItems.push({ id: 'phonics', label: 'Phonics' });
+  if (hasAnyResults) navItems.push({ id: 'results', label: isSecondary ? 'GCSEs' : 'SATs' });
+  if (hasPhonics && isPrimary) navItems.push({ id: 'phonics', label: 'Phonics' });
   if (hasSchoolLife) navItems.push({ id: 'school-life', label: 'School Life' });
   if (admissions) navItems.push({ id: 'admissions', label: 'Admissions' });
   if (hasInclusionData) navItems.push({ id: 'inclusion', label: 'Pupils' });
@@ -328,135 +339,259 @@ export function SchoolDetailView({
         </section>
       )}
 
-      {/* SATs Results (merged with Subject Breakdown) */}
-      {latestResults && (
-        <section id="sats" className={styles.card}>
-          <h2 className={styles.sectionTitle}>SATs Results ({formatAcademicYear(latestResults.year)})</h2>
+      {/* Results Section (SATs for primary, GCSEs for secondary) */}
+      {hasAnyResults && latestResults && (
+        <section id="results" className={styles.card}>
+          <h2 className={styles.sectionTitle}>
+            {isSecondary ? 'GCSE Results' : 'SATs Results'} ({formatAcademicYear(latestResults.year)})
+          </h2>
           <p className={styles.sectionSubtitle}>
-            End-of-primary-school tests taken by Year 6 pupils. National averages shown for comparison.
+            {isSecondary
+              ? 'GCSE results for Year 11 pupils. National averages shown for comparison.'
+              : 'End-of-primary-school tests taken by Year 6 pupils. National averages shown for comparison.'}
           </p>
 
-          {/* Headline numbers: RWM combined */}
-          <div className={styles.metricsGrid}>
-            {latestResults.rwm_expected_pct !== null && (
-              <div className={styles.metricCard}>
-                <div className={styles.metricLabel}>Reading, Writing & Maths combined</div>
-                <div className={styles.metricValue}>{formatPercentage(latestResults.rwm_expected_pct)}</div>
-                <div className={styles.metricHint}>National avg: {NATIONAL_AVG.rwm_expected}%</div>
+          {/* ── Primary / KS2 content ── */}
+          {hasKS2Results && (
+            <>
+              <div className={styles.metricsGrid}>
+                {latestResults.rwm_expected_pct !== null && (
+                  <div className={styles.metricCard}>
+                    <div className={styles.metricLabel}>
+                      Reading, Writing &amp; Maths combined
+                      <MetricTooltip metricKey="rwm_expected_pct" />
+                    </div>
+                    <div className={styles.metricValue}>{formatPercentage(latestResults.rwm_expected_pct)}</div>
+                    {primaryAvg.rwm_expected_pct != null && (
+                      <div className={styles.metricHint}>National avg: {primaryAvg.rwm_expected_pct.toFixed(0)}%</div>
+                    )}
+                  </div>
+                )}
+                {latestResults.rwm_high_pct !== null && (
+                  <div className={styles.metricCard}>
+                    <div className={styles.metricLabel}>
+                      Exceeding expected level (Reading, Writing &amp; Maths)
+                      <MetricTooltip metricKey="rwm_high_pct" />
+                    </div>
+                    <div className={styles.metricValue}>{formatPercentage(latestResults.rwm_high_pct)}</div>
+                    {primaryAvg.rwm_high_pct != null && (
+                      <div className={styles.metricHint}>National avg: {primaryAvg.rwm_high_pct.toFixed(0)}%</div>
+                    )}
+                  </div>
+                )}
               </div>
-            )}
-            {latestResults.rwm_high_pct !== null && (
-              <div className={styles.metricCard}>
-                <div className={styles.metricLabel}>Exceeding expected level (RWM)</div>
-                <div className={styles.metricValue}>{formatPercentage(latestResults.rwm_high_pct)}</div>
-                <div className={styles.metricHint}>National avg: {NATIONAL_AVG.rwm_high}%</div>
-              </div>
-            )}
-          </div>
 
-          {/* Per-subject detail table */}
-          <div className={styles.metricGroupsGrid} style={{ marginTop: '1rem' }}>
-            <div className={styles.metricGroup}>
-              <h3 className={styles.metricGroupTitle}>Reading</h3>
-              <div className={styles.metricTable}>
-                {latestResults.reading_expected_pct !== null && (
-                  <div className={styles.metricRow}>
-                    <span className={styles.metricName}>Expected level</span>
-                    <span className={styles.metricValue}>{formatPercentage(latestResults.reading_expected_pct)}</span>
+              <div className={styles.metricGroupsGrid} style={{ marginTop: '1rem' }}>
+                <div className={styles.metricGroup}>
+                  <h3 className={styles.metricGroupTitle}>Reading</h3>
+                  <div className={styles.metricTable}>
+                    {latestResults.reading_expected_pct !== null && (
+                      <div className={styles.metricRow}>
+                        <span className={styles.metricName}>Expected level</span>
+                        <span className={styles.metricValue}>{formatPercentage(latestResults.reading_expected_pct)}</span>
+                      </div>
+                    )}
+                    {latestResults.reading_high_pct !== null && (
+                      <div className={styles.metricRow}>
+                        <span className={styles.metricName}>Exceeding</span>
+                        <span className={styles.metricValue}>{formatPercentage(latestResults.reading_high_pct)}</span>
+                      </div>
+                    )}
+                    {latestResults.reading_progress !== null && (
+                      <div className={styles.metricRow}>
+                        <span className={styles.metricName}>
+                          Progress score
+                          <MetricTooltip metricKey="reading_progress" />
+                        </span>
+                        <span className={`${styles.metricValue} ${progressClass(latestResults.reading_progress)}`}>
+                          {formatProgress(latestResults.reading_progress)}
+                        </span>
+                      </div>
+                    )}
+                    {latestResults.reading_avg_score !== null && (
+                      <div className={styles.metricRow}>
+                        <span className={styles.metricName}>
+                          Average score
+                          <MetricTooltip metricKey="reading_avg_score" />
+                        </span>
+                        <span className={styles.metricValue}>{latestResults.reading_avg_score.toFixed(1)}</span>
+                      </div>
+                    )}
+                  </div>
+                </div>
+
+                <div className={styles.metricGroup}>
+                  <h3 className={styles.metricGroupTitle}>Writing</h3>
+                  <div className={styles.metricTable}>
+                    {latestResults.writing_expected_pct !== null && (
+                      <div className={styles.metricRow}>
+                        <span className={styles.metricName}>Expected level</span>
+                        <span className={styles.metricValue}>{formatPercentage(latestResults.writing_expected_pct)}</span>
+                      </div>
+                    )}
+                    {latestResults.writing_high_pct !== null && (
+                      <div className={styles.metricRow}>
+                        <span className={styles.metricName}>Exceeding</span>
+                        <span className={styles.metricValue}>{formatPercentage(latestResults.writing_high_pct)}</span>
+                      </div>
+                    )}
+                    {latestResults.writing_progress !== null && (
+                      <div className={styles.metricRow}>
+                        <span className={styles.metricName}>
+                          Progress score
+                          <MetricTooltip metricKey="writing_progress" />
+                        </span>
+                        <span className={`${styles.metricValue} ${progressClass(latestResults.writing_progress)}`}>
+                          {formatProgress(latestResults.writing_progress)}
+                        </span>
+                      </div>
+                    )}
+                  </div>
+                </div>
+
+                <div className={styles.metricGroup}>
+                  <h3 className={styles.metricGroupTitle}>Maths</h3>
+                  <div className={styles.metricTable}>
+                    {latestResults.maths_expected_pct !== null && (
+                      <div className={styles.metricRow}>
+                        <span className={styles.metricName}>Expected level</span>
+                        <span className={styles.metricValue}>{formatPercentage(latestResults.maths_expected_pct)}</span>
+                      </div>
+                    )}
+                    {latestResults.maths_high_pct !== null && (
+                      <div className={styles.metricRow}>
+                        <span className={styles.metricName}>Exceeding</span>
+                        <span className={styles.metricValue}>{formatPercentage(latestResults.maths_high_pct)}</span>
+                      </div>
+                    )}
+                    {latestResults.maths_progress !== null && (
+                      <div className={styles.metricRow}>
+                        <span className={styles.metricName}>
+                          Progress score
+                          <MetricTooltip metricKey="maths_progress" />
+                        </span>
+                        <span className={`${styles.metricValue} ${progressClass(latestResults.maths_progress)}`}>
+                          {formatProgress(latestResults.maths_progress)}
+                        </span>
+                      </div>
+                    )}
+                    {latestResults.maths_avg_score !== null && (
+                      <div className={styles.metricRow}>
+                        <span className={styles.metricName}>
+                          Average score
+                          <MetricTooltip metricKey="maths_avg_score" />
+                        </span>
+                        <span className={styles.metricValue}>{latestResults.maths_avg_score.toFixed(1)}</span>
+                      </div>
+                    )}
+                  </div>
+                </div>
+              </div>
+
+              {(latestResults.reading_progress !== null || latestResults.writing_progress !== null || latestResults.maths_progress !== null) && (
+                <p className={styles.progressNote}>
+                  Progress scores measure how much pupils improved compared to similar schools nationally. Above 0 = better than average, below 0 = below average.
+                </p>
+              )}
+            </>
+          )}
+
+          {/* ── Secondary / KS4 content ── */}
+          {hasKS4Results && (
+            <>
+              <div className={styles.metricsGrid}>
+                {latestResults.attainment_8_score !== null && (
+                  <div className={styles.metricCard}>
+                    <div className={styles.metricLabel}>
+                      Attainment 8
+                      <MetricTooltip metricKey="attainment_8_score" />
+                    </div>
+                    <div className={styles.metricValue}>{latestResults.attainment_8_score.toFixed(1)}</div>
+                    {secondaryAvg.attainment_8_score != null && (
+                      <div className={styles.metricHint}>National avg: {secondaryAvg.attainment_8_score.toFixed(1)}</div>
+                    )}
                   </div>
                 )}
-                {latestResults.reading_high_pct !== null && (
-                  <div className={styles.metricRow}>
-                    <span className={styles.metricName}>Exceeding</span>
-                    <span className={styles.metricValue}>{formatPercentage(latestResults.reading_high_pct)}</span>
+                {latestResults.progress_8_score !== null && (
+                  <div className={styles.metricCard}>
+                    <div className={styles.metricLabel}>
+                      Progress 8
+                      <MetricTooltip metricKey="progress_8_score" />
+                    </div>
+                    <div className={`${styles.metricValue} ${progressClass(latestResults.progress_8_score)}`}>
+                      {formatProgress(latestResults.progress_8_score)}
+                    </div>
+                    <div className={styles.metricHint}>0 = national average</div>
                   </div>
                 )}
-                {latestResults.reading_progress !== null && (
-                  <div className={styles.metricRow}>
-                    <span className={styles.metricName}>Progress score</span>
-                    <span className={`${styles.metricValue} ${progressClass(latestResults.reading_progress)}`}>
-                      {formatProgress(latestResults.reading_progress)}
-                    </span>
+                {latestResults.english_maths_standard_pass_pct !== null && (
+                  <div className={styles.metricCard}>
+                    <div className={styles.metricLabel}>
+                      English &amp; Maths Grade 4+
+                      <MetricTooltip metricKey="english_maths_standard_pass_pct" />
+                    </div>
+                    <div className={styles.metricValue}>{formatPercentage(latestResults.english_maths_standard_pass_pct)}</div>
+                    {secondaryAvg.english_maths_standard_pass_pct != null && (
+                      <div className={styles.metricHint}>National avg: {secondaryAvg.english_maths_standard_pass_pct.toFixed(0)}%</div>
+                    )}
                   </div>
                 )}
-                {latestResults.reading_avg_score !== null && (
-                  <div className={styles.metricRow}>
-                    <span className={styles.metricName}>Average score</span>
-                    <span className={styles.metricValue}>{latestResults.reading_avg_score.toFixed(1)}</span>
+                {latestResults.english_maths_strong_pass_pct !== null && (
+                  <div className={styles.metricCard}>
+                    <div className={styles.metricLabel}>
+                      English &amp; Maths Grade 5+
+                      <MetricTooltip metricKey="english_maths_strong_pass_pct" />
+                    </div>
+                    <div className={styles.metricValue}>{formatPercentage(latestResults.english_maths_strong_pass_pct)}</div>
+                    {secondaryAvg.english_maths_strong_pass_pct != null && (
+                      <div className={styles.metricHint}>National avg: {secondaryAvg.english_maths_strong_pass_pct.toFixed(0)}%</div>
+                    )}
                   </div>
                 )}
               </div>
-            </div>
 
-            <div className={styles.metricGroup}>
-              <h3 className={styles.metricGroupTitle}>Writing</h3>
-              <div className={styles.metricTable}>
-                {latestResults.writing_expected_pct !== null && (
-                  <div className={styles.metricRow}>
-                    <span className={styles.metricName}>Expected level</span>
-                    <span className={styles.metricValue}>{formatPercentage(latestResults.writing_expected_pct)}</span>
+              {/* EBacc */}
+              {(latestResults.ebacc_entry_pct !== null || latestResults.ebacc_standard_pass_pct !== null) && (
+                <>
+                  <h3 className={styles.subSectionTitle} style={{ marginTop: '1rem' }}>
+                    English Baccalaureate (EBacc)
+                    <MetricTooltip metricKey="ebacc_entry_pct" />
+                  </h3>
+                  <div className={styles.metricTable}>
+                    {latestResults.ebacc_entry_pct !== null && (
+                      <div className={styles.metricRow}>
+                        <span className={styles.metricName}>Pupils entered for EBacc</span>
+                        <span className={styles.metricValue}>{formatPercentage(latestResults.ebacc_entry_pct)}</span>
+                      </div>
+                    )}
+                    {latestResults.ebacc_standard_pass_pct !== null && (
+                      <div className={styles.metricRow}>
+                        <span className={styles.metricName}>
+                          EBacc Grade 4+
+                          <MetricTooltip metricKey="ebacc_standard_pass_pct" />
+                        </span>
+                        <span className={styles.metricValue}>{formatPercentage(latestResults.ebacc_standard_pass_pct)}</span>
+                      </div>
+                    )}
+                    {latestResults.ebacc_strong_pass_pct !== null && (
+                      <div className={styles.metricRow}>
+                        <span className={styles.metricName}>
+                          EBacc Grade 5+
+                          <MetricTooltip metricKey="ebacc_strong_pass_pct" />
+                        </span>
+                        <span className={styles.metricValue}>{formatPercentage(latestResults.ebacc_strong_pass_pct)}</span>
+                      </div>
+                    )}
                   </div>
-                )}
-                {latestResults.writing_high_pct !== null && (
-                  <div className={styles.metricRow}>
-                    <span className={styles.metricName}>Exceeding</span>
-                    <span className={styles.metricValue}>{formatPercentage(latestResults.writing_high_pct)}</span>
-                  </div>
-                )}
-                {latestResults.writing_progress !== null && (
-                  <div className={styles.metricRow}>
-                    <span className={styles.metricName}>Progress score</span>
-                    <span className={`${styles.metricValue} ${progressClass(latestResults.writing_progress)}`}>
-                      {formatProgress(latestResults.writing_progress)}
-                    </span>
-                  </div>
-                )}
-              </div>
-            </div>
-
-            <div className={styles.metricGroup}>
-              <h3 className={styles.metricGroupTitle}>Maths</h3>
-              <div className={styles.metricTable}>
-                {latestResults.maths_expected_pct !== null && (
-                  <div className={styles.metricRow}>
-                    <span className={styles.metricName}>Expected level</span>
-                    <span className={styles.metricValue}>{formatPercentage(latestResults.maths_expected_pct)}</span>
-                  </div>
-                )}
-                {latestResults.maths_high_pct !== null && (
-                  <div className={styles.metricRow}>
-                    <span className={styles.metricName}>Exceeding</span>
-                    <span className={styles.metricValue}>{formatPercentage(latestResults.maths_high_pct)}</span>
-                  </div>
-                )}
-                {latestResults.maths_progress !== null && (
-                  <div className={styles.metricRow}>
-                    <span className={styles.metricName}>Progress score</span>
-                    <span className={`${styles.metricValue} ${progressClass(latestResults.maths_progress)}`}>
-                      {formatProgress(latestResults.maths_progress)}
-                    </span>
-                  </div>
-                )}
-                {latestResults.maths_avg_score !== null && (
-                  <div className={styles.metricRow}>
-                    <span className={styles.metricName}>Average score</span>
-                    <span className={styles.metricValue}>{latestResults.maths_avg_score.toFixed(1)}</span>
-                  </div>
-                )}
-              </div>
-            </div>
-          </div>
-
-          {(latestResults.reading_progress !== null || latestResults.writing_progress !== null || latestResults.maths_progress !== null) && (
-            <p className={styles.progressNote}>
-              Progress scores measure how much pupils improved compared to similar schools nationally. Above 0 = better than average, below 0 = below average.
-            </p>
+                </>
+              )}
+            </>
           )}
         </section>
       )}
 
-      {/* Year 1 Phonics */}
-      {hasPhonics && phonics && (
+      {/* Year 1 Phonics — primary only */}
+      {hasPhonics && isPrimary && phonics && (
         <section id="phonics" className={styles.card}>
           <h2 className={styles.sectionTitle}>Year 1 Phonics ({formatAcademicYear(phonics.year)})</h2>
           <p className={styles.sectionSubtitle}>
@@ -466,7 +601,7 @@ export function SchoolDetailView({
             <div className={styles.metricCard}>
               <div className={styles.metricLabel}>Passed the phonics check</div>
               <div className={styles.metricValue}>{formatPercentage(phonics.year1_phonics_pct)}</div>
-              <div className={styles.metricHint}>National avg: ~{NATIONAL_AVG.phonics_yr1}%</div>
+              <div className={styles.metricHint}>Phonics is a key early reading skill tested at end of Year 1</div>
             </div>
             {phonics.year2_phonics_pct != null && (
               <div className={styles.metricCard}>
@@ -487,21 +622,31 @@ export function SchoolDetailView({
               <div className={styles.metricCard}>
                 <div className={styles.metricLabel}>Average class size</div>
                 <div className={styles.metricValue}>{census.class_size_avg.toFixed(1)}</div>
-                <div className={styles.metricHint}>National avg: ~{NATIONAL_AVG.class_size} pupils</div>
+                <div className={styles.metricHint}>Average number of pupils per class</div>
               </div>
             )}
             {absenceData?.overall_absence_rate != null && (
               <div className={styles.metricCard}>
-                <div className={styles.metricLabel}>Days missed (overall absence)</div>
+                <div className={styles.metricLabel}>
+                  Days missed (overall absence)
+                  <MetricTooltip metricKey="overall_absence_pct" />
+                </div>
                 <div className={styles.metricValue}>{formatPercentage(absenceData.overall_absence_rate)}</div>
-                <div className={styles.metricHint}>National avg: ~{NATIONAL_AVG.overall_absence}%</div>
+                {primaryAvg.overall_absence_pct != null && (
+                  <div className={styles.metricHint}>National avg: ~{primaryAvg.overall_absence_pct.toFixed(1)}%</div>
+                )}
               </div>
             )}
             {absenceData?.persistent_absence_rate != null && (
               <div className={styles.metricCard}>
-                <div className={styles.metricLabel}>Regularly missing school</div>
+                <div className={styles.metricLabel}>
+                  Regularly missing school
+                  <MetricTooltip metricKey="persistent_absence_pct" />
+                </div>
                 <div className={styles.metricValue}>{formatPercentage(absenceData.persistent_absence_rate)}</div>
-                <div className={styles.metricHint}>National avg: ~{NATIONAL_AVG.persistent_absence}%. Missing 10%+ of sessions.</div>
+                {primaryAvg.persistent_absence_pct != null && (
+                  <div className={styles.metricHint}>National avg: ~{primaryAvg.persistent_absence_pct.toFixed(0)}%</div>
+                )}
               </div>
             )}
           </div>
@@ -515,7 +660,7 @@ export function SchoolDetailView({
           <div className={styles.metricsGrid}>
             {admissions.published_admission_number != null && (
               <div className={styles.metricCard}>
-                <div className={styles.metricLabel}>Year 3 places per year</div>
+                <div className={styles.metricLabel}>{isSecondary ? 'Year 7' : 'Year 3'} places per year</div>
                 <div className={styles.metricValue}>{admissions.published_admission_number}</div>
               </div>
             )}
@@ -556,13 +701,19 @@ export function SchoolDetailView({
             )}
             {latestResults?.eal_pct != null && (
               <div className={styles.metricCard}>
-                <div className={styles.metricLabel}>English as an additional language</div>
+                <div className={styles.metricLabel}>
+                  English as an additional language
+                  <MetricTooltip metricKey="eal_pct" />
+                </div>
                 <div className={styles.metricValue}>{formatPercentage(latestResults.eal_pct)}</div>
               </div>
             )}
             {latestResults?.sen_support_pct != null && (
               <div className={styles.metricCard}>
-                <div className={styles.metricLabel}>Pupils with additional needs (SEN support)</div>
+                <div className={styles.metricLabel}>
+                  Pupils receiving SEN support
+                  <MetricTooltip metricKey="sen_support_pct" />
+                </div>
                 <div className={styles.metricValue}>{formatPercentage(latestResults.sen_support_pct)}</div>
               </div>
             )}
@@ -610,7 +761,10 @@ export function SchoolDetailView({
       {/* Local Area Context */}
       {hasDeprivation && deprivation && (
         <section id="local-area" className={styles.card}>
-          <h2 className={styles.sectionTitle}>Local Area Context</h2>
+          <h2 className={styles.sectionTitle}>
+          Local Area Context
+          <MetricTooltip metricKey="idaci_decile" />
+        </h2>
           <div className={styles.deprivationDots}>
             {Array.from({ length: 10 }, (_, i) => (
               <div
@@ -639,7 +793,7 @@ export function SchoolDetailView({
             <div className={styles.metricCard}>
               <div className={styles.metricLabel}>Total spend per pupil per year</div>
               <div className={styles.metricValue}>£{Math.round(finance.per_pupil_spend!).toLocaleString()}</div>
-              <div className={styles.metricHint}>National avg: ~£{NATIONAL_AVG.per_pupil_spend.toLocaleString()}</div>
+              <div className={styles.metricHint}>How much the school has to spend on each pupil annually</div>
             </div>
             {finance.teacher_cost_pct != null && (
               <div className={styles.metricCard}>
@@ -665,6 +819,7 @@ export function SchoolDetailView({
             <PerformanceChart
               data={yearlyData}
               schoolName={schoolInfo.school_name}
+              isSecondary={isSecondary}
             />
           </div>
           {yearlyData.length > 1 && (
@@ -675,22 +830,44 @@ export function SchoolDetailView({
                   <thead>
                     <tr>
                       <th>Year</th>
-                      <th>Reading, Writing & Maths (expected %)</th>
-                      <th>Exceeding expected (%)</th>
-                      <th>Reading Progress</th>
-                      <th>Writing Progress</th>
-                      <th>Maths Progress</th>
+                      {isSecondary ? (
+                        <>
+                          <th>Attainment 8</th>
+                          <th>Progress 8</th>
+                          <th>English &amp; Maths Grade 4+</th>
+                          <th>English &amp; Maths Grade 5+</th>
+                        </>
+                      ) : (
+                        <>
+                          <th>Reading, Writing &amp; Maths (expected %)</th>
+                          <th>Exceeding expected (%)</th>
+                          <th>Reading Progress</th>
+                          <th>Writing Progress</th>
+                          <th>Maths Progress</th>
+                        </>
+                      )}
                     </tr>
                   </thead>
                   <tbody>
                     {yearlyData.map((result) => (
                       <tr key={result.year}>
                         <td className={styles.yearCell}>{formatAcademicYear(result.year)}</td>
-                        <td>{result.rwm_expected_pct !== null ? formatPercentage(result.rwm_expected_pct) : '-'}</td>
-                        <td>{result.rwm_high_pct !== null ? formatPercentage(result.rwm_high_pct) : '-'}</td>
-                        <td>{result.reading_progress !== null ? formatProgress(result.reading_progress) : '-'}</td>
-                        <td>{result.writing_progress !== null ? formatProgress(result.writing_progress) : '-'}</td>
-                        <td>{result.maths_progress !== null ? formatProgress(result.maths_progress) : '-'}</td>
+                        {isSecondary ? (
+                          <>
+                            <td>{result.attainment_8_score !== null ? result.attainment_8_score.toFixed(1) : '-'}</td>
+                            <td>{result.progress_8_score !== null ? formatProgress(result.progress_8_score) : '-'}</td>
+                            <td>{result.english_maths_standard_pass_pct !== null ? formatPercentage(result.english_maths_standard_pass_pct) : '-'}</td>
+                            <td>{result.english_maths_strong_pass_pct !== null ? formatPercentage(result.english_maths_strong_pass_pct) : '-'}</td>
+                          </>
+                        ) : (
+                          <>
+                            <td>{result.rwm_expected_pct !== null ? formatPercentage(result.rwm_expected_pct) : '-'}</td>
+                            <td>{result.rwm_high_pct !== null ? formatPercentage(result.rwm_high_pct) : '-'}</td>
+                            <td>{result.reading_progress !== null ? formatProgress(result.reading_progress) : '-'}</td>
+                            <td>{result.writing_progress !== null ? formatProgress(result.writing_progress) : '-'}</td>
+                            <td>{result.maths_progress !== null ? formatProgress(result.maths_progress) : '-'}</td>
+                          </>
+                        )}
                       </tr>
                     ))}
                   </tbody>