/**
 * SchoolDetailView Component
 * Displays comprehensive school information with performance charts
 */

'use client';

import { useEffect, useRef, useState } from 'react';
import { useRouter } from 'next/navigation';
import dynamic from 'next/dynamic';
import { useComparison } from '@/hooks/useComparison';
import { SchoolHeroMap, type SchoolHeroMapHandle } from './SchoolHeroMap';
import { MetricTooltip } from './MetricTooltip';
import type {
  School, SchoolResult, AbsenceData,
  OfstedInspection, SchoolCensus,
  SchoolAdmissions, SenDetail, Phonics,
  SchoolDeprivation, SchoolFinance, NationalAverages,
} from '@/lib/types';
import {
  formatPercentage, formatProgress, formatAcademicYear,
} from '@/lib/utils';
import { DeltaChip } from './DeltaChip';

const PerformanceChart = dynamic(
  () => import('./PerformanceChart').then((m) => m.PerformanceChart),
  { ssr: false },
);
const SatsChart = dynamic(() => import('./SatsChart'), { ssr: false });
const AdmissionsTrendChart = dynamic(() => import('./AdmissionsTrendChart'), { ssr: false });
import { track, getNavigationSource } from '@/lib/analytics';
import styles from './SchoolDetailView.module.css';

const OFSTED_LABELS: Record<number, string> = {
  1: 'Outstanding', 2: 'Good', 3: 'Requires Improvement', 4: 'Inadequate',
};

const RC_LABELS: Record<number, string> = {
  1: 'Exceptional', 2: 'Strong', 3: 'Expected standard', 4: 'Needs attention', 5: 'Urgent improvement',
};

const RC_CATEGORIES = [
  { key: 'rc_inclusion' as const,             label: 'Inclusion' },
  { key: 'rc_curriculum_teaching' as const,   label: 'Curriculum & Teaching' },
  { key: 'rc_achievement' as const,           label: 'Achievement' },
  { key: 'rc_attendance_behaviour' as const,  label: 'Attendance & Behaviour' },
  { key: 'rc_personal_development' as const,  label: 'Personal Development' },
  { key: 'rc_leadership_governance' as const, label: 'Leadership & Governance' },
  { key: 'rc_early_years' as const,           label: 'Early Years' },
  { key: 'rc_sixth_form' as const,            label: 'Sixth Form' },
];


function progressClass(val: number | null | undefined): string {
  if (val == null) return '';
  if (val > 0) return styles.progressPositive;
  if (val < 0) return styles.progressNegative;
  return '';
}

interface SchoolDetailViewProps {
  schoolInfo: School;
  yearlyData: SchoolResult[];
  absenceData: AbsenceData | null;
  ofsted: OfstedInspection | null;
  census: SchoolCensus | null;
  admissions: SchoolAdmissions | null;
  admissionsHistory: SchoolAdmissions[];
  senDetail: SenDetail | null;
  phonics: Phonics | null;
  deprivation: SchoolDeprivation | null;
  finance: SchoolFinance | null;
}

export function SchoolDetailView({
  schoolInfo, yearlyData, absenceData,
  ofsted, census, admissions, admissionsHistory, senDetail, phonics, deprivation, finance,
}: SchoolDetailViewProps) {
  const router = useRouter();
  const { addSchool, removeSchool, isSelected } = useComparison();
  const isInComparison = isSelected(schoolInfo.urn);

  const [activeSection, setActiveSection] = useState<string>('');
  const [admissionsView, setAdmissionsView] = useState<'year' | 'trend'>('year');
  // Trend toggle only appears with ≥2 years carrying an offer rate.
  const admissionsOfferYears = admissionsHistory.filter((h) => h.first_preference_offer_pct != null).length;
  const showAdmissionsTrend = admissionsOfferYears >= 2;
  // Only the section links scroll horizontally; Back and "All" stay pinned.
  const sectionLinksRef = useRef<HTMLDivElement | null>(null);
  const [sectionNavAtEnd, setSectionNavAtEnd] = useState(false);
  // Carry the "Add to Compare" CTA into the sticky bar once the hero's button leaves.
  const heroActionsRef = useRef<HTMLDivElement | null>(null);
  const [heroCtaVisible, setHeroCtaVisible] = useState(true);
  // Hero map — the "View on map" link opens its fullscreen view.
  const heroMapRef = useRef<SchoolHeroMapHandle>(null);
  // "All ▾" jump menu listing every section.
  const [sectionsOpen, setSectionsOpen] = useState(false);

  // Back returns to wherever the user came from; deep-links (no in-app history)
  // fall back to search so the button never dead-ends or leaves the site.
  const handleBack = () => {
    if (typeof window !== 'undefined' && window.history.length > 1) {
      router.back();
    } else {
      router.push('/search');
    }
  };

  const scrollToTop = () => {
    if (typeof window !== 'undefined') window.scrollTo({ top: 0, behavior: 'smooth' });
  };

  useEffect(() => {
    const el = sectionLinksRef.current;
    if (!el) return;
    const update = () => {
      const overflow = el.scrollWidth - el.clientWidth;
      // No overflow → treat as "at end" so the fade is hidden.
      if (overflow <= 1) {
        setSectionNavAtEnd(true);
        return;
      }
      setSectionNavAtEnd(el.scrollLeft >= overflow - 2);
    };
    update();
    el.addEventListener('scroll', update, { passive: true });
    window.addEventListener('resize', update);
    return () => {
      el.removeEventListener('scroll', update);
      window.removeEventListener('resize', update);
    };
  }, []);

  // Track whether the hero's "Add to Compare" button is still on screen.
  useEffect(() => {
    const el = heroActionsRef.current;
    if (!el) return;
    const obs = new IntersectionObserver(
      ([entry]) => setHeroCtaVisible(entry.isIntersecting),
      { rootMargin: '-64px 0px 0px 0px' },
    );
    obs.observe(el);
    return () => obs.disconnect();
  }, []);

  // Close the "All ▾" menu on Escape.
  useEffect(() => {
    if (!sectionsOpen) return;
    const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') setSectionsOpen(false); };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [sectionsOpen]);

  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);
      track('compare_school_removed', { urn: schoolInfo.urn, from: 'detail' });
    } else {
      addSchool(schoolInfo);
      track('compare_school_added', { urn: schoolInfo.urn, from: 'detail' });
    }
  };

  // Page-view event with funnel attribution. Fires once per mount.
  useEffect(() => {
    track('school_viewed', {
      urn: schoolInfo.urn,
      phase: phase || 'unknown',
      local_authority: schoolInfo.local_authority || 'unknown',
      from: getNavigationSource(),
    });
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [schoolInfo.urn]);

  const deprivationDesc = (decile: number) => {
    if (decile <= 3) return `This school is in one of England's most deprived areas (decile ${decile}/10). Many pupils may face additional challenges at home.`;
    if (decile <= 7) return `This school is in an area with average levels of deprivation (decile ${decile}/10).`;
    return `This school is in one of England's less deprived areas (decile ${decile}/10).`;
  };

  // Gender split availability (only meaningful for Mixed schools with census data)
  const isMixedSchool = schoolInfo.gender === 'Mixed' || schoolInfo.gender == null;
  const hasGenderSplit = isMixedSchool
    && census?.female_pupils != null
    && census?.male_pupils != null
    && (census.female_pupils + census.male_pupils) > 0;

  // Guard for Pupils & Inclusion — only show if at least one metric is available
  const hasInclusionData = (latestResults?.disadvantaged_pct != null)
    || (latestResults?.eal_pct != null)
    || (latestResults?.sen_support_pct != null)
    || senDetail != null
    || hasGenderSplit;

  const hasSchoolLife = absenceData != null || census?.class_size_avg != null;
  const hasPhonics = phonics != null && phonics.year1_phonics_pct != null;
  const hasDeprivation = deprivation != null && deprivation.idaci_decile != null;
  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.
  // Order is engagement-led (from section_nav_used analytics): the most-sought
  // sections — results, admissions, inclusion, history — sit near the top,
  // after the recognised Ofsted badge; low-demand context sections stay last.
  const navItems: { id: string; label: string }[] = [];
  if (ofsted) navItems.push({ id: 'ofsted', label: 'Ofsted' });
  if (hasAnyResults) navItems.push({ id: 'results', label: isSecondary ? 'GCSEs' : 'SATs' });
  if (admissions) navItems.push({ id: 'admissions', label: 'Admissions' });
  if (hasInclusionData) navItems.push({ id: 'inclusion', label: 'Pupils' });
  if (yearlyData.length > 0) navItems.push({ id: 'history', label: 'History' });
  if (hasPhonics && isPrimary) navItems.push({ id: 'phonics', label: 'Phonics' });
  if (hasSchoolLife) navItems.push({ id: 'school-life', label: 'School Life' });
  if (hasDeprivation) navItems.push({ id: 'local-area', label: 'Local Area' });
  if (hasFinance) navItems.push({ id: 'finances', label: 'Finances' });

  // Track active section as user scrolls
  useEffect(() => {
    const ids = navItems.map(n => n.id);
    if (!ids.length) return;

    const observers: IntersectionObserver[] = [];
    const ratioMap: Record<string, number> = {};

    const pickActive = () => {
      const top = Object.entries(ratioMap).sort((a, b) => b[1] - a[1])[0];
      setActiveSection(top?.[1] > 0 ? top[0] : '');
    };

    ids.forEach(id => {
      const el = document.getElementById(id);
      if (!el) return;
      ratioMap[id] = 0;
      const obs = new IntersectionObserver(
        ([entry]) => {
          ratioMap[id] = entry.intersectionRatio;
          pickActive();
        },
        { threshold: [0, 0.1, 0.25, 0.5, 0.75, 1.0], rootMargin: '-56px 0px 0px 0px' },
      );
      obs.observe(el);
      observers.push(obs);
    });

    return () => observers.forEach(o => o.disconnect());
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [navItems.map(n => n.id).join(',')]);

  // ── Ofsted: detect if all OEIF sub-grades match the overall ───────────
  const oeifAllSameGrade = (() => {
    if (!ofsted || ofsted.framework === 'ReportCard') return false;
    const subs = [
      ofsted.quality_of_education,
      ofsted.behaviour_attitudes,
      ofsted.personal_development,
      ofsted.leadership_management,
      ...(ofsted.early_years_provision != null ? [ofsted.early_years_provision] : []),
    ].filter((v): v is number => v != null);
    return subs.length >= 3 && subs.every(v => v === ofsted.overall_effectiveness);
  })();

  // Label shown in the mobile "section" menu button — the section in view.
  const activeNavLabel = (navItems.find((n) => n.id === activeSection) ?? navItems[0])?.label ?? '';

  return (
    <div className={styles.container}>
      {/* Standalone back link, above the header — returns to wherever the
          user came from. Scrolls away with the page (the sticky bar keeps a
          "back to top" control in its place). */}
      <button type="button" onClick={handleBack} className={styles.topBack}>
        <span aria-hidden="true">←</span> Back
      </button>

      {/* Header — the location map band blends down into the school title. */}
      <header className={`${styles.header}${hasLocation ? ` ${styles.headerHasMap}` : ''}`}>
        {hasLocation && (
          <SchoolHeroMap ref={heroMapRef} lat={schoolInfo.latitude!} lng={schoolInfo.longitude!} />
        )}
        <div className={styles.headerContent}>
          <div className={styles.titleSection}>
            <h1 className={styles.schoolName}>{schoolInfo.school_name}</h1>
            <div className={styles.meta}>
              {schoolInfo.local_authority && (
                <span className={styles.metaItem}>{schoolInfo.local_authority}</span>
              )}
              {schoolInfo.school_type && (
                <span className={styles.metaItem}>{schoolInfo.school_type}</span>
              )}
              {schoolInfo.gender && schoolInfo.gender !== 'Mixed' && (
                <span className={styles.metaItem}>{schoolInfo.gender}&apos;s school</span>
              )}
            </div>
            {schoolInfo.address && (
              <p className={styles.address}>
                {schoolInfo.address}{schoolInfo.postcode && `, ${schoolInfo.postcode}`}
                {hasLocation && (
                  <>
                    {' · '}
                    <button
                      type="button"
                      className={styles.mapLink}
                      onClick={() => { heroMapRef.current?.open(); track('section_nav_used', { section: 'location', via: 'hero_link' }); }}
                    >
                      View on map ↗
                    </button>
                  </>
                )}
              </p>
            )}
            <div className={styles.headerDetails}>
              {schoolInfo.headteacher_name && (
                <span className={styles.headerDetail}>
                  <strong>Headteacher:</strong> {schoolInfo.headteacher_name}
                </span>
              )}
              {schoolInfo.website && (
                <span className={styles.headerDetail}>
                  <a
                    href={/^https?:\/\//i.test(schoolInfo.website) ? schoolInfo.website : `https://${schoolInfo.website}`}
                    target="_blank"
                    rel="noopener noreferrer"
                    data-umami-event="external_link_clicked"
                    data-umami-event-target="school_website"
                  >
                    School website ↗
                  </a>
                </span>
              )}
              {(() => {
                const total = census?.total_pupils ?? latestResults?.total_pupils ?? null;
                if (total == null) return null;
                return (
                  <span className={styles.headerDetail}>
                    <strong>Pupils:</strong> {total.toLocaleString()}
                    {schoolInfo.capacity != null && ` (capacity: ${schoolInfo.capacity})`}
                  </span>
                );
              })()}
              {schoolInfo.trust_name && (
                <span className={styles.headerDetail}>
                  Part of <strong>{schoolInfo.trust_name}</strong>
                </span>
              )}
            </div>
          </div>
          <div className={styles.actions} ref={heroActionsRef}>
            <button
              onClick={handleComparisonToggle}
              className={isInComparison ? styles.btnRemove : styles.btnAdd}
              aria-label={isInComparison ? 'In comparison' : 'Add to compare'}
            >
              {/* On phones the map hero shows only the glyph (nav-bar style). */}
              <span className={styles.btnCompareLabel}>
                {isInComparison ? '✓ In Comparison' : '+ Add to Compare'}
              </span>
              <span className={styles.btnCompareGlyph} aria-hidden="true">
                {isInComparison ? '✓' : '+'}
              </span>
            </button>
          </div>
        </div>
      </header>

      {/* Sticky Section Navigation — docks under the global header */}
      <nav className={styles.sectionNav} aria-label="Page sections">
        <button onClick={scrollToTop} className={styles.sectionNavBack} aria-label="Back to top">
          <span aria-hidden="true">↑</span>
          <span className={styles.sectionNavBackLabel}>Top</span>
        </button>

        {/* Desktop: scrolling section links */}
        <div
          ref={sectionLinksRef}
          className={`${styles.sectionNavLinks}${sectionNavAtEnd ? ` ${styles.atEnd}` : ''}`}
        >
          {navItems.map(({ id, label }) => (
            <a
              key={id}
              href={`#${id}`}
              className={`${styles.sectionNavLink}${activeSection === id ? ` ${styles.sectionNavLinkActive}` : ''}`}
              onClick={() => track('section_nav_used', { section: id })}
            >
              {label}
            </a>
          ))}
        </div>

        {/* Mobile: a single "section" menu button that opens the jump sheet */}
        {navItems.length > 0 && (
          <button
            type="button"
            className={styles.sectionNavMenu}
            aria-haspopup="menu"
            aria-expanded={sectionsOpen}
            onClick={() => setSectionsOpen((o) => !o)}
          >
            <span className={styles.sectionNavMenuCur}>
              <span className={styles.sectionNavMenuEyebrow}>Section</span>
              <span className={styles.sectionNavMenuNow}>{activeNavLabel}</span>
            </span>
            <span className={styles.sectionNavMenuChev} aria-hidden="true">▾</span>
          </button>
        )}

        {/* The hero's Compare CTA, carried in once it scrolls out of view.
            Desktop shows a labelled pill; mobile a compact icon. */}
        {!heroCtaVisible && (
          <>
            <button
              onClick={handleComparisonToggle}
              className={`${styles.sectionNavCompare}${isInComparison ? ` ${styles.sectionNavCompareIn}` : ''}`}
            >
              {isInComparison ? '✓ Comparing' : '+ Compare'}
            </button>
            <button
              onClick={handleComparisonToggle}
              className={`${styles.sectionNavCompareIcon}${isInComparison ? ` ${styles.sectionNavCompareIconIn}` : ''}`}
              aria-label={isInComparison ? 'In comparison' : 'Add to compare'}
              title={isInComparison ? 'In comparison' : 'Add to compare'}
            >
              {isInComparison ? (
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                  <path d="m5 12 5 5 9-11" />
                </svg>
              ) : (
                <>
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden="true">
                    <path d="M4 7h13l-3-3" />
                    <path d="M20 17H7l3 3" />
                  </svg>
                  <span className={styles.sectionNavCompareBadge} aria-hidden="true">+</span>
                </>
              )}
            </button>
          </>
        )}

        {/* Desktop: "All ▾" trigger (same sheet as the mobile section menu) */}
        {navItems.length > 0 && (
          <button
            type="button"
            className={styles.sectionNavAll}
            aria-haspopup="menu"
            aria-expanded={sectionsOpen}
            onClick={() => setSectionsOpen((o) => !o)}
          >
            All <span aria-hidden="true">▾</span>
          </button>
        )}

        {/* Shared jump-to-section sheet (dropdown on desktop, bottom sheet on mobile) */}
        {sectionsOpen && (
          <>
            <div className={styles.sectionsBackdrop} onClick={() => setSectionsOpen(false)} />
            <div className={styles.sectionsPanel} role="menu" aria-label="Jump to section">
              <div className={styles.sectionsPanelHead}>Jump to section</div>
              {navItems.map(({ id, label }) => (
                <a
                  key={id}
                  href={`#${id}`}
                  role="menuitem"
                  className={`${styles.sectionsItem}${activeSection === id ? ` ${styles.sectionsItemActive}` : ''}`}
                  onClick={() => {
                    setSectionsOpen(false);
                    track('section_nav_used', { section: id, via: 'all_menu' });
                  }}
                >
                  <span>{label}</span>
                  {activeSection === id && <span className={styles.sectionsTick} aria-hidden="true">✓</span>}
                </a>
              ))}
            </div>
          </>
        )}
      </nav>

      {/* Ofsted Rating / Report Card */}
      {ofsted && (
        <section id="ofsted" className={styles.card}>
          <h2 className={styles.sectionTitle}>
            {ofsted.framework === 'ReportCard' ? 'Ofsted Report Card' : 'Ofsted Rating'}
            {ofsted.inspection_date && (
              <span className={styles.ofstedDate}>
                Inspected {new Date(ofsted.inspection_date).toLocaleDateString('en-GB', { day: 'numeric', month: 'long', year: 'numeric' })}
              </span>
            )}
            <a
              href={`https://reports.ofsted.gov.uk/inspection-reports/find-inspection-report/provider/ELS/${schoolInfo.urn}`}
              target="_blank"
              rel="noopener noreferrer"
              className={styles.ofstedReportLink}
              data-umami-event="external_link_clicked"
              data-umami-event-target="ofsted"
            >
              Ofsted reports ↗
            </a>
          </h2>

          {ofsted.framework === 'ReportCard' ? (
            /* ── New Report Card layout ── */
            <>
              <p className={styles.ofstedDisclaimer}>
                From November 2025, Ofsted replaced single overall grades with Report Cards rating schools across several areas.
              </p>
              <div className={styles.metricsGrid}>
                {ofsted.rc_safeguarding_met != null && (
                  <div className={styles.metricCard}>
                    <div className={styles.metricLabel}>Safeguarding</div>
                    <div className={`${styles.metricValue} ${ofsted.rc_safeguarding_met ? styles.safeguardingMet : styles.safeguardingNotMet}`}>
                      {ofsted.rc_safeguarding_met ? 'Met' : 'Not met'}
                    </div>
                  </div>
                )}
                {RC_CATEGORIES.map(({ key, label }) => {
                  const value = ofsted[key] as number | null;
                  return value != null ? (
                    <div key={key} className={styles.metricCard}>
                      <div className={styles.metricLabel}>{label}</div>
                      <div className={`${styles.metricValue} ${styles[`rcGrade${value}`]}`}>
                        {RC_LABELS[value]}
                      </div>
                    </div>
                  ) : null;
                })}
              </div>
            </>
          ) : (
            /* ── Old OEIF layout ── */
            <>
              <div className={styles.ofstedHeader}>
                <span className={`${styles.ofstedGrade} ${styles[`ofstedGrade${ofsted.overall_effectiveness}`]}`}>
                  {ofsted.overall_effectiveness ? OFSTED_LABELS[ofsted.overall_effectiveness] : 'Not rated'}
                </span>
                {ofsted.previous_overall != null &&
                  ofsted.previous_overall !== ofsted.overall_effectiveness && (
                  <span className={styles.ofstedPrevious}>
                    Previously: {OFSTED_LABELS[ofsted.previous_overall]}
                  </span>
                )}
              </div>
              <p className={styles.ofstedDisclaimer}>
                From September 2024, Ofsted no longer makes an overall effectiveness judgement in inspections of state-funded schools.
              </p>
              {oeifAllSameGrade ? (
                <p className={styles.ofstedAllSame}>
                  Rated <strong>{OFSTED_LABELS[ofsted.overall_effectiveness!]}</strong> across all inspected areas — Quality of Teaching, Behaviour, Pupils&apos; Development and Leadership.
                </p>
              ) : (
                <div className={styles.metricsGrid}>
                  {[
                    { label: 'Quality of Teaching', value: ofsted.quality_of_education },
                    { label: 'Behaviour in School', value: ofsted.behaviour_attitudes },
                    { label: 'Pupils\' Wider Development', value: ofsted.personal_development },
                    { label: 'School Leadership', value: ofsted.leadership_management },
                    ...(ofsted.early_years_provision != null
                      ? [{ label: 'Early Years (Reception)', value: ofsted.early_years_provision }]
                      : []),
                  ].map(({ label, value }) => value != null && (
                    <div key={label} className={styles.metricCard}>
                      <div className={styles.metricLabel}>{label}</div>
                      <div className={`${styles.metricValue} ${styles[`ofstedGrade${value}`]}`}>
                        {OFSTED_LABELS[value]}
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </>
          )}
        </section>
      )}

      {/* 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}>
            {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>

          {/* ── Primary / KS2 content ── */}
          {hasKS2Results && (
            <>
              <div className={styles.heroStatGrid}>
                {latestResults.rwm_expected_pct !== null && (
                  <div className={styles.heroStatCard}>
                    <div className={styles.heroStatLabel}>
                      Reading, Writing &amp; Maths combined
                      <MetricTooltip metricKey="rwm_expected_pct" />
                    </div>
                    <div className={styles.heroStatValue}>
                      {formatPercentage(latestResults.rwm_expected_pct)}
                      {primaryAvg.rwm_expected_pct != null && (
                        <DeltaChip
                          value={latestResults.rwm_expected_pct}
                          baseline={primaryAvg.rwm_expected_pct}
                          unit="pts"
                          size="sm"
                        />
                      )}
                    </div>
                    {primaryAvg.rwm_expected_pct != null && (
                      <div className={styles.heroStatHint}>National avg: {primaryAvg.rwm_expected_pct.toFixed(0)}%</div>
                    )}
                  </div>
                )}
                {latestResults.rwm_high_pct !== null && (
                  <div className={styles.heroStatCard}>
                    <div className={styles.heroStatLabel}>
                      Exceeding expected level (Reading, Writing &amp; Maths)
                      <MetricTooltip metricKey="rwm_high_pct" />
                    </div>
                    <div className={styles.heroStatValue}>
                      {formatPercentage(latestResults.rwm_high_pct)}
                      {primaryAvg.rwm_high_pct != null && (
                        <DeltaChip
                          value={latestResults.rwm_high_pct}
                          baseline={primaryAvg.rwm_high_pct}
                          unit="pts"
                          size="sm"
                        />
                      )}
                    </div>
                    {primaryAvg.rwm_high_pct != null && (
                      <div className={styles.heroStatHint}>National avg: {primaryAvg.rwm_high_pct.toFixed(0)}%</div>
                    )}
                  </div>
                )}
              </div>

              {latestResults.rwm_expected_pct != null &&
                latestResults.reading_expected_pct != null &&
                latestResults.writing_expected_pct != null &&
                latestResults.maths_expected_pct != null && (
                  <div className={styles.rwmBridge}>
                    <span className={styles.rwmBridgeIcon} aria-hidden="true">?</span>
                    <div className={styles.rwmBridgeBody}>
                      <div className={styles.rwmBridgeText}>
                        Why is combined lower? A pupil is only counted if they met the bar in{' '}
                        <strong>all three</strong> subjects. Some passed reading but not writing; some passed writing but not maths.
                      </div>
                      <div className={styles.rwmBridgeMath}>
                        <span>Reading <strong>{latestResults.reading_expected_pct.toFixed(0)}%</strong></span>
                        <span className={styles.rwmBridgeMathSep}>·</span>
                        <span>Writing <strong>{latestResults.writing_expected_pct.toFixed(0)}%</strong></span>
                        <span className={styles.rwmBridgeMathSep}>·</span>
                        <span>Maths <strong>{latestResults.maths_expected_pct.toFixed(0)}%</strong></span>
                        <span className={styles.rwmBridgeMathSep}>→</span>
                        <span>All three <strong>{latestResults.rwm_expected_pct.toFixed(0)}%</strong></span>
                      </div>
                    </div>
                  </div>
                )}

              <SatsChart
                subjects={[
                  {
                    name: 'Reading',
                    expectedPct: latestResults.reading_expected_pct,
                    exceedingPct: latestResults.reading_high_pct,
                    nationalExpectedPct: primaryAvg.reading_expected_pct,
                  },
                  {
                    name: 'Writing',
                    expectedPct: latestResults.writing_expected_pct,
                    exceedingPct: latestResults.writing_high_pct,
                    nationalExpectedPct: primaryAvg.writing_expected_pct,
                  },
                  {
                    name: 'Maths',
                    expectedPct: latestResults.maths_expected_pct,
                    exceedingPct: latestResults.maths_high_pct,
                    nationalExpectedPct: primaryAvg.maths_expected_pct,
                  },
                ]}
              />

              {/* Progress scores row */}
              {(latestResults.reading_progress != null || latestResults.writing_progress != null || latestResults.maths_progress != null) && (
                <div className={styles.progressScoresRow}>
                  <h3 className={styles.subSectionTitle}>Progress Scores</h3>
                  <div className={styles.progressScoresGrid}>
                    {latestResults.reading_progress != null && (
                      <div className={styles.progressScoreItem}>
                        <span className={styles.progressScoreLabel}>Reading</span>
                        <span className={`${styles.progressScoreValue} ${progressClass(latestResults.reading_progress)}`}>
                          {formatProgress(latestResults.reading_progress)}
                        </span>
                      </div>
                    )}
                    {latestResults.writing_progress != null && (
                      <div className={styles.progressScoreItem}>
                        <span className={styles.progressScoreLabel}>Writing</span>
                        <span className={`${styles.progressScoreValue} ${progressClass(latestResults.writing_progress)}`}>
                          {formatProgress(latestResults.writing_progress)}
                        </span>
                      </div>
                    )}
                    {latestResults.maths_progress != null && (
                      <div className={styles.progressScoreItem}>
                        <span className={styles.progressScoreLabel}>Maths</span>
                        <span className={`${styles.progressScoreValue} ${progressClass(latestResults.maths_progress)}`}>
                          {formatProgress(latestResults.maths_progress)}
                        </span>
                      </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.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.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.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>

              {/* 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>
                </>
              )}
            </>
          )}
        </section>
      )}

      {/* Admissions */}
      {admissions && (
        <section id="admissions" className={styles.card}>
          <div className={styles.admissionsHeader}>
            <h2 className={styles.sectionTitle}>
              Admissions{!showAdmissionsTrend && ` (${formatAcademicYear(admissions.year)})`}
            </h2>
            {showAdmissionsTrend && (
              <div className={styles.admissionsSeg} role="group" aria-label="Admissions view">
                <button type="button" aria-pressed={admissionsView === 'year'} onClick={() => setAdmissionsView('year')}>
                  This year
                </button>
                <button type="button" aria-pressed={admissionsView === 'trend'} onClick={() => setAdmissionsView('trend')}>
                  {admissionsHistory.length}-year trend
                </button>
              </div>
            )}
          </div>

          <div className={styles.admissionsViewport}>
            {/* This-year Q&A */}
            <div className={styles.admissionsViewYear} hidden={showAdmissionsTrend && admissionsView !== 'year'}>
              <dl className={styles.admissionsTiles}>
                {admissions.places_offered != null && (
                  <div className={styles.admissionsTile}>
                    <dd className={styles.admissionsTileNum}>{admissions.places_offered}</dd>
                    <dt className={styles.admissionsTileLabel}>Places offered</dt>
                  </div>
                )}
                {admissions.first_preference_applications != null && (
                  <div className={styles.admissionsTile}>
                    <dd className={styles.admissionsTileNum}>{admissions.first_preference_applications}</dd>
                    <dt className={styles.admissionsTileLabel}>Wanted it first</dt>
                  </div>
                )}
                {admissions.first_preference_offer_pct != null && (
                  <div className={`${styles.admissionsTile} ${styles.admissionsTileAccent}`}>
                    <dd className={styles.admissionsTileNum}>
                      {admissions.first_preference_offers != null && admissions.first_preference_applications != null ? (
                        <>
                          {admissions.first_preference_offers}
                          <span className={styles.admissionsTileSub}>
                            of {admissions.first_preference_applications} · {formatPercentage(admissions.first_preference_offer_pct)}
                          </span>
                        </>
                      ) : (
                        formatPercentage(admissions.first_preference_offer_pct)
                      )}
                    </dd>
                    <dt className={styles.admissionsTileLabel}>Got their first choice</dt>
                  </div>
                )}
                {admissions.total_applications != null && (
                  <div className={styles.admissionsTile}>
                    <dd className={styles.admissionsTileNum}>{admissions.total_applications.toLocaleString()}</dd>
                    <dt className={styles.admissionsTileLabel}>Applied in total</dt>
                  </div>
                )}
              </dl>
            </div>

            {/* Multi-year trend */}
            {showAdmissionsTrend && (
              <div className={styles.admissionsViewTrend} hidden={admissionsView !== 'trend'}>
                <div className={styles.admissionsChartCap}>First-choice offer rate</div>
                <AdmissionsTrendChart history={admissionsHistory} />
                <p className={styles.admissionsTrendSummary}>
                  This year ({formatAcademicYear(admissions.year)}),{' '}
                  {admissions.first_preference_applications != null && (
                    <><strong>{admissions.first_preference_applications}</strong> families put it first for </>
                  )}
                  {admissions.places_offered != null && <><strong>{admissions.places_offered}</strong> places</>}
                  {admissions.total_applications != null && ` — ${admissions.total_applications.toLocaleString()} applications in total`}.
                </p>
              </div>
            )}
          </div>
        </section>
      )}

      {/* Pupils & Inclusion */}
      {hasInclusionData && (
        <section id="inclusion" className={styles.card}>
          <h2 className={styles.sectionTitle}>Pupils &amp; Inclusion</h2>
          <div className={styles.heroStatGrid}>
            {latestResults?.disadvantaged_pct != null && (
              <div className={styles.heroStatCard}>
                <div className={styles.heroStatLabel}>Eligible for pupil premium</div>
                <div className={styles.heroStatValue}>
                  {formatPercentage(latestResults.disadvantaged_pct)}
                  {primaryAvg.disadvantaged_pct != null && (
                    <DeltaChip value={latestResults.disadvantaged_pct} baseline={primaryAvg.disadvantaged_pct} unit="pts" size="sm" />
                  )}
                </div>
                <div className={styles.heroStatHint}>Pupils from disadvantaged backgrounds{primaryAvg.disadvantaged_pct != null ? ` · national avg: ${primaryAvg.disadvantaged_pct.toFixed(0)}%` : ''}</div>
              </div>
            )}
            {latestResults?.eal_pct != null && (
              <div className={styles.heroStatCard}>
                <div className={styles.heroStatLabel}>
                  English as an additional language
                  <MetricTooltip metricKey="eal_pct" />
                </div>
                <div className={styles.heroStatValue}>
                  {formatPercentage(latestResults.eal_pct)}
                  {primaryAvg.eal_pct != null && (
                    <DeltaChip value={latestResults.eal_pct} baseline={primaryAvg.eal_pct} unit="pts" size="sm" />
                  )}
                </div>
                {primaryAvg.eal_pct != null && (
                  <div className={styles.heroStatHint}>National avg: {primaryAvg.eal_pct.toFixed(0)}%</div>
                )}
              </div>
            )}
            {latestResults?.sen_support_pct != null && (
              <div className={styles.heroStatCard}>
                <div className={styles.heroStatLabel}>
                  Pupils receiving SEN support
                  <MetricTooltip metricKey="sen_support_pct" />
                </div>
                <div className={styles.heroStatValue}>
                  {formatPercentage(latestResults.sen_support_pct)}
                  {primaryAvg.sen_support_pct != null && (
                    <DeltaChip value={latestResults.sen_support_pct} baseline={primaryAvg.sen_support_pct} unit="pts" size="sm" />
                  )}
                </div>
                {primaryAvg.sen_support_pct != null && (
                  <div className={styles.heroStatHint}>National avg: {primaryAvg.sen_support_pct.toFixed(0)}%</div>
                )}
              </div>
            )}
            {hasGenderSplit && (() => {
              const female = census!.female_pupils!;
              const male = census!.male_pupils!;
              const girlsPct = Math.round((female / (female + male)) * 100);
              const boysPct = 100 - girlsPct;
              return (
                <div className={styles.heroStatCard}>
                  <div className={styles.heroStatLabel}>Boys and girls</div>
                  <div className={styles.genderSplitValue}>
                    <span className={styles.genderSplitGirls}>{girlsPct}%</span>
                    <span className={styles.genderSplitLabel}>girls</span>
                    <span className={styles.genderSplitSep}>·</span>
                    <span className={styles.genderSplitBoys}>{boysPct}%</span>
                    <span className={styles.genderSplitLabel}>boys</span>
                  </div>
                  <div
                    className={styles.genderBar}
                    role="img"
                    aria-label={`Gender split: ${girlsPct}% girls, ${boysPct}% boys`}
                  >
                    <span className={styles.genderBarGirls} style={{ width: `${girlsPct}%` }} />
                    <span className={styles.genderBarBoys} style={{ width: `${boysPct}%` }} />
                  </div>
                  <div className={styles.heroStatHint}>
                    {female.toLocaleString()} girls, {male.toLocaleString()} boys
                  </div>
                </div>
              );
            })()}
          </div>
          {senDetail && (
            <>
              <h3 className={styles.subSectionTitle}>Types of additional needs supported</h3>
              <p className={styles.sectionSubtitle}>
                What proportion of pupils with additional needs have each type of support need.
              </p>
              <div className={styles.metricsGrid}>
                {[
                  { label: 'Speech & Language', pct: senDetail.primary_need_speech_pct },
                  { label: 'Autism (ASD)', pct: senDetail.primary_need_autism_pct },
                  { label: 'Learning Difficulties', pct: senDetail.primary_need_mld_pct },
                  { label: 'Specific Learning (e.g. Dyslexia)', pct: senDetail.primary_need_spld_pct },
                  { label: 'Social, Emotional & Mental Health', pct: senDetail.primary_need_semh_pct },
                  { label: 'Physical / Sensory', pct: senDetail.primary_need_physical_pct },
                ].filter(n => n.pct != null).map(({ label, pct }) => (
                  <div key={label} className={styles.metricCard}>
                    <div className={styles.metricLabel}>{label}</div>
                    <div className={styles.metricValue}>{pct}%</div>
                  </div>
                ))}
              </div>
            </>
          )}
        </section>
      )}

      {/* Results Over Time (merged: chart + historical table) */}
      {yearlyData.length > 0 && (
        <section id="history" className={styles.card}>
          <h2 className={styles.sectionTitle}>Results Over Time</h2>
          <div className={styles.chartContainer}>
            <PerformanceChart
              data={yearlyData}
              schoolName={schoolInfo.school_name}
              isSecondary={isSecondary}
              nationalRwmAvg={isPrimary ? (primaryAvg.rwm_expected_pct ?? null) : null}
              nationalAtt8Avg={isSecondary ? (secondaryAvg.attainment_8_score ?? null) : null}
              nationalByYear={nationalAvg?.by_year}
            />
          </div>
          {yearlyData.length > 1 && (
            <details className={styles.historyDisclosure}>
              <summary className={styles.historyToggle}>View raw year-by-year data</summary>
              <div className={styles.tableWrapper}>
                <table className={styles.dataTable}>
                  <thead>
                    <tr>
                      <th>Year</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>
                        {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>
                </table>
              </div>
            </details>
          )}
        </section>
      )}
      {/* 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}>
            Phonics is a key early reading skill. Children are tested at the end of Year 1.
          </p>
          <div className={styles.metricsGrid}>
            <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}>Phonics is a key early reading skill tested at end of Year 1</div>
            </div>
            {phonics.year2_phonics_pct != null && (
              <div className={styles.metricCard}>
                <div className={styles.metricLabel}>Year 2 pupils who retook and passed</div>
                <div className={styles.metricValue}>{formatPercentage(phonics.year2_phonics_pct)}</div>
              </div>
            )}
          </div>
        </section>
      )}

      {/* School Life */}
      {hasSchoolLife && (
        <section id="school-life" className={styles.card}>
          <h2 className={styles.sectionTitle}>School Life</h2>
          <div className={styles.metricsGrid}>
            {census?.class_size_avg != null && (
              <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}>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)
                  <MetricTooltip metricKey="overall_absence_pct" />
                </div>
                <div className={styles.metricValue}>{formatPercentage(absenceData.overall_absence_rate)}</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
                  <MetricTooltip metricKey="persistent_absence_pct" />
                </div>
                <div className={styles.metricValue}>{formatPercentage(absenceData.persistent_absence_rate)}</div>
                {primaryAvg.persistent_absence_pct != null && (
                  <div className={styles.metricHint}>National avg: ~{primaryAvg.persistent_absence_pct.toFixed(0)}%</div>
                )}
              </div>
            )}
          </div>
        </section>
      )}

      {/* Local Area Context */}
      {hasDeprivation && deprivation && (
        <section id="local-area" className={styles.card}>
          <h2 className={styles.sectionTitle}>
          Local Area Context
          <MetricTooltip metricKey="idaci_decile" />
        </h2>
          <div className={styles.deprivationDots}>
            {Array.from({ length: 10 }, (_, i) => (
              <div
                key={i}
                className={`${styles.deprivationDot} ${i < deprivation.idaci_decile! ? styles.deprivationDotFilled : ''}`}
                title={`Decile ${i + 1}`}
              />
            ))}
          </div>
          <div className={styles.deprivationScaleLabel}>
            <span>Most deprived</span>
            <span>Least deprived</span>
          </div>
          <p className={styles.deprivationDesc}>{deprivationDesc(deprivation.idaci_decile!)}</p>
        </section>
      )}

      {/* Finances */}
      {hasFinance && finance && (
        <section id="finances" className={styles.card}>
          <h2 className={styles.sectionTitle}>School Finances ({formatAcademicYear(finance.year)})</h2>
          <p className={styles.sectionSubtitle}>
            Per-pupil spending shows how much the school has to spend on each child&apos;s education.
          </p>
          <div className={styles.metricsGrid}>
            <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}>How much the school has to spend on each pupil annually</div>
            </div>
            {finance.teacher_cost_pct != null && (
              <div className={styles.metricCard}>
                <div className={styles.metricLabel}>Share of budget spent on teachers</div>
                <div className={styles.metricValue}>{finance.teacher_cost_pct.toFixed(1)}%</div>
              </div>
            )}
            {finance.staff_cost_pct != null && (
              <div className={styles.metricCard}>
                <div className={styles.metricLabel}>Share of budget spent on all staff</div>
                <div className={styles.metricValue}>{finance.staff_cost_pct.toFixed(1)}%</div>
              </div>
            )}
          </div>
        </section>
      )}

    </div>
  );
}