feat(schools): label age range as "Ages 3–11" for clarity

The bare "3-11" range gave no unit. Add a display-only formatAgeRange
helper ("3-11" -> "Ages 3–11", en-dash) used in the primary/secondary
search rows and the secondary detail badge. The raw age_range field is
left untouched so sixth-form detection (.includes('18')) still works.

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

nextjs-app/components/SchoolRow.tsx

@@ -9,7 +9,7 @@
  */
 
 import type { School } from '@/lib/types';
-import { formatPercentage, calculateTrend, getPhaseStyle, schoolUrl, buildOfstedListBadge } from '@/lib/utils';
+import { formatPercentage, calculateTrend, getPhaseStyle, schoolUrl, buildOfstedListBadge, formatAgeRange } from '@/lib/utils';
 import styles from './SchoolRow.module.css';
 
 interface SchoolRowProps {
@@ -75,7 +75,7 @@ export function SchoolRow({
             </span>
           )}
           {school.school_type && <span>{school.school_type}</span>}
-          {school.age_range && <span>{school.age_range}</span>}
+          {school.age_range && <span>{formatAgeRange(school.age_range)}</span>}
           {showDenomination && <span>{school.religious_denomination}</span>}
           {showGender && <span>{school.gender}</span>}
         </div>

nextjs-app/components/SecondarySchoolDetailView.tsx

@@ -23,7 +23,7 @@ import type {
   SchoolAdmissions, SenDetail, Phonics,
   SchoolDeprivation, SchoolFinance, NationalAverages,
 } from '@/lib/types';
-import { formatPercentage, formatProgress, formatAcademicYear } from '@/lib/utils';
+import { formatPercentage, formatProgress, formatAcademicYear, formatAgeRange } from '@/lib/utils';
 import { DeltaChip } from './DeltaChip';
 import { track, getNavigationSource } from '@/lib/analytics';
 import styles from './SecondarySchoolDetailView.module.css';
@@ -228,7 +228,7 @@ export function SecondarySchoolDetailView({
                 <span className={styles.badge}>{schoolInfo.gender}&apos;s school</span>
               )}
               {schoolInfo.age_range && (
-                <span className={styles.badge}>{schoolInfo.age_range}</span>
+                <span className={styles.badge}>{formatAgeRange(schoolInfo.age_range)}</span>
               )}
               {hasSixthForm && (
                 <span className={styles.badge}>Sixth form</span>

nextjs-app/components/SecondarySchoolRow.tsx

@@ -11,7 +11,7 @@
 'use client';
 
 import type { School } from '@/lib/types';
-import { buildOfstedListBadge, getPhaseStyle, schoolUrl } from '@/lib/utils';
+import { buildOfstedListBadge, getPhaseStyle, schoolUrl, formatAgeRange } from '@/lib/utils';
 import styles from './SecondarySchoolRow.module.css';
 
 function detectAdmissionsTag(school: School): string | null {
@@ -84,7 +84,7 @@ export function SecondarySchoolRow({
             </span>
           )}
           {school.school_type && <span>{school.school_type}</span>}
-          {school.age_range && <span>{school.age_range}</span>}
+          {school.age_range && <span>{formatAgeRange(school.age_range)}</span>}
           {showGender && (
             <span className={styles.provisionTag}>{school.gender}</span>
           )}

nextjs-app/lib/utils.ts

@@ -59,6 +59,18 @@ export function truncate(text: string, maxLength: number): string {
   return text.slice(0, maxLength).trim() + '...';
 }
 
+/**
+ * Format a school's age range for display, e.g. "3-11" → "Ages 3–11".
+ * Display-only — leaves the raw `age_range` field (used for sixth-form
+ * detection) untouched. Falls back to the raw value if it's not a plain range.
+ */
+export function formatAgeRange(ageRange: string | null | undefined): string {
+  if (!ageRange) return '';
+  const match = ageRange.match(/^\s*(\d+)\s*[-–]\s*(\d+)\s*$/);
+  if (!match) return ageRange;
+  return `Ages ${match[1]}–${match[2]}`;
+}
+
 // ============================================================================
 // Number Formatting
 // ============================================================================