feat(secondary): apply hero design language to secondary school detail view

- Bump school name to clamp(2rem,5vw,3.25rem) Playfair Display
- Add hero signal chips strip (framework-aware Ofsted + coral Oversubscribed)
- Add at-a-glance stats row: Att8 with delta vs national, Ofsted serif tile, first-choice rate
- Active section highlighting in sticky nav via IntersectionObserver
- Collapse OEIF Ofsted section to prose when all sub-grades match overall
- Pass nationalAtt8Avg reference line to PerformanceChart

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

nextjs-app/components/SecondarySchoolDetailView.tsx

@@ -18,7 +18,8 @@ import type {
   SchoolAdmissions, SenDetail, Phonics,
   SchoolDeprivation, SchoolFinance, NationalAverages,
 } from '@/lib/types';
-import { formatPercentage, formatProgress, formatAcademicYear } from '@/lib/utils';
+import { formatPercentage, formatProgress, formatAcademicYear, buildOfstedHeroChip } from '@/lib/utils';
+import { DeltaChip } from './DeltaChip';
 import styles from './SecondarySchoolDetailView.module.css';
 
 const OFSTED_LABELS: Record<number, string> = {
@@ -75,6 +76,8 @@ export function SecondarySchoolDetailView({
   const { addSchool, removeSchool, isSelected } = useComparison();
   const isInComparison = isSelected(schoolInfo.urn);
 
+  const [activeSection, setActiveSection] = useState<string>('');
+
   const latestResults = yearlyData.length > 0 ? yearlyData[yearlyData.length - 1] : null;
 
   const [nationalAvg, setNationalAvg] = useState<NationalAverages | null>(null);
@@ -124,6 +127,50 @@ export function SecondarySchoolDetailView({
   if (hasFinance) navItems.push({ id: 'finances', label: 'Finances' });
   if (yearlyData.length > 1) navItems.push({ id: 'history', label: 'History' });
 
+  // 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);
+  })();
+
+  // ── Hero signal chip & stats ─────────────────────────────────────────
+  const ofstedHeroChip = buildOfstedHeroChip(ofsted);
+  const heroAtt8 = latestResults?.attainment_8_score ?? null;
+  const heroAtt8Nat = secondaryAvg.attainment_8_score ?? null;
+  const heroAcademicYear = latestResults ? formatAcademicYear(latestResults.year) : '';
+
   return (
     <div className={styles.container}>
       {/* ── Header ─────────────────────────────────────── */}
@@ -190,6 +237,75 @@ export function SecondarySchoolDetailView({
             </button>
           </div>
         </div>
+
+        {/* Hero signal chips */}
+        <div className={styles.heroChips}>
+          <div className={`${styles.heroChip} ${styles[`tone-${ofstedHeroChip.tone}`]}`}>
+            <div className={styles.heroChipTitle}>{ofstedHeroChip.title}</div>
+            <div className={styles.heroChipSub}>{ofstedHeroChip.subtitle}</div>
+            {ofstedHeroChip.detail && (
+              <div className={styles.heroChipDetail}>{ofstedHeroChip.detail}</div>
+            )}
+          </div>
+
+          {admissions?.oversubscribed && (
+            <div className={`${styles.heroChip} ${styles['tone-coral']}`}>
+              <div className={styles.heroChipTitle}>Oversubscribed</div>
+              <div className={styles.heroChipSub}>
+                {admissions.first_preference_offer_pct != null
+                  ? `${Math.round(admissions.first_preference_offer_pct)}% of first-choice applicants offered a place`
+                  : 'More applicants than places'}
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* At-a-glance stats row */}
+        {latestResults && (
+          <div className={styles.heroStats}>
+            {heroAtt8 != null && (
+              <div className={styles.heroStat}>
+                <div className={styles.heroStatNumber}>{heroAtt8.toFixed(1)}</div>
+                <div className={styles.heroStatLabel}>Attainment 8 score</div>
+                {heroAtt8Nat != null && (
+                  <DeltaChip value={heroAtt8} baseline={heroAtt8Nat} unit="pts" suffix="vs national" />
+                )}
+              </div>
+            )}
+
+            {ofsted && (
+              <div className={styles.heroStat}>
+                <div className={`${styles.heroStatNumberSerif} ${styles[`tone-${ofstedHeroChip.tone}`]}`}>
+                  {ofstedHeroChip.state === 'oeif'
+                    ? ofstedHeroChip.title.replace(/^Ofsted\s+/, '')
+                    : ofstedHeroChip.state === 'reportCard'
+                      ? 'Report Card'
+                      : '—'}
+                </div>
+                <div className={styles.heroStatLabel}>{ofstedHeroChip.subtitle}</div>
+                {ofstedHeroChip.detail && (
+                  <div className={styles.heroStatFoot}>{ofstedHeroChip.detail}</div>
+                )}
+              </div>
+            )}
+
+            {admissions?.first_preference_offer_pct != null && (
+              <div className={styles.heroStat}>
+                <div className={styles.heroStatNumber}>
+                  {Math.round(admissions.first_preference_offer_pct)}%
+                </div>
+                <div className={styles.heroStatLabel}>First-choice offer rate</div>
+                {admissions.oversubscribed && (
+                  <div className={styles.heroStatFoot}>Oversubscribed</div>
+                )}
+              </div>
+            )}
+          </div>
+        )}
+
+        {heroAcademicYear && (
+          <p className={styles.heroDataNote}>Latest data: {heroAcademicYear}</p>
+        )}
       </header>
 
       {/* ── Sticky section navigation ─────────────────────── */}
@@ -198,7 +314,13 @@ export function SecondarySchoolDetailView({
           <button onClick={() => router.back()} className={styles.backBtn}>← Back</button>
           {navItems.length > 0 && <div className={styles.tabNavDivider} />}
           {navItems.map(({ id, label }) => (
-            <a key={id} href={`#${id}`} className={styles.tabBtn}>{label}</a>
+            <a
+              key={id}
+              href={`#${id}`}
+              className={`${styles.tabBtn}${activeSection === id ? ` ${styles.tabBtnActive}` : ''}`}
+            >
+              {label}
+            </a>
           ))}
         </div>
       </nav>
@@ -265,24 +387,30 @@ export function SecondarySchoolDetailView({
               <p className={styles.ofstedDisclaimer}>
                 From September 2024, Ofsted no longer makes an overall effectiveness judgement in inspections.
               </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]}
+              {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>
-                ))}
-              </div>
+                  ))}
+                </div>
+              )}
             </>
           ) : (
             <>
@@ -489,6 +617,7 @@ export function SecondarySchoolDetailView({
                   data={yearlyData}
                   schoolName={schoolInfo.school_name}
                   isSecondary={true}
+                  nationalAtt8Avg={heroAtt8Nat}
                 />
               </div>
             </>