Merge pull request 'feat: similar schools nearby on the detail page' (#150) from feat/similar-schools-nearby into main

Reviewed-on: #150

backend/app.py

@@ -40,20 +40,13 @@ from .data_loader import (
 from .data_loader import get_data_info as get_db_info
 from . import flags
 from .places import build_place_index, build_place_registry, places_for_urn
-from .schemas import METRIC_DEFINITIONS, RANKING_COLUMNS, SCHOOL_COLUMNS
+from .schemas import METRIC_DEFINITIONS, PHASE_GROUPS, RANKING_COLUMNS, SCHOOL_COLUMNS
+from .similar_schools import is_secondary_phase, select_similar
 from .utils import clean_for_json, convert_to_native
 
 # Values to exclude from filter dropdowns (empty strings, non-applicable labels)
 EXCLUDED_FILTER_VALUES = {"", "Not applicable", "Does not apply"}
 
-# Maps user-facing phase filter values to the GIAS PhaseOfEducation values they include.
-# All-through schools appear in both primary and secondary results.
-PHASE_GROUPS: dict[str, set[str]] = {
-    "primary": {"primary", "middle deemed primary", "all-through"},
-    "secondary": {"secondary", "middle deemed secondary", "all-through", "16 plus"},
-    "all-through": {"all-through"},
-}
-
 # Must match SITE_URL in nextjs-app/lib/site.ts. The apex 301s to www, and a
 # sitemap <loc> that redirects wastes a crawl on every URL it lists.
 BASE_URL = "https://www.schoolcompare.co.uk"
@@ -273,6 +266,29 @@ def _places_payload(urn: int) -> list[dict]:
     return payload
 
 
+def _similar_schools_payload(urn: int, phase: str | None) -> list[dict]:
+    """Nearby schools this page may offer as alternatives.
+
+    Wrapped: a failure in selection must never 500 a page that is otherwise
+    complete, which is the posture get_supplementary_data already takes. The
+    section simply does not render.
+    """
+    try:
+        # Decided in similar_schools, beside the PHASE_GROUPS bucket it selects
+        # from, so the two cannot drift. A substring test for "secondary" here
+        # would miss "16 plus" and hand a sixth-form college the primary bucket.
+        return select_similar(
+            load_latest_school_data(), int(urn), is_secondary_phase(phase)
+        )
+    except Exception:
+        import logging
+
+        logging.getLogger(__name__).exception(
+            "Similar schools selection failed for urn=%s", urn
+        )
+        return []
+
+
 def _place_sitemap_rows(kinds: tuple[str, ...], registry=None) -> list[str]:
     """A <url> per place, plus a phase variant wherever that phase clears the
     threshold on its own.
@@ -983,6 +999,11 @@ async def get_school_details(request: Request, urn: int):
         # and authority both fall below the publish threshold has nowhere to
         # point, and the page renders without the module.
         "places": _places_payload(urn),
+        # Nearby schools of the same phase and a comparable intake. Always
+        # present on a build with this code; the frontend treats absent and
+        # empty identically, which is what lets the two images deploy
+        # independently.
+        "similar_schools": _similar_schools_payload(urn, latest.get("phase")),
         "yearly_data": clean_for_json(school_data),
         # Supplementary data (null if not yet populated by Kestra)
         "ofsted": supplementary.get("ofsted"),

backend/schemas.py

@@ -532,6 +532,18 @@ RANKING_COLUMNS = [
     "gcse_grade_91_pct",
 ]
 
+# Maps user-facing phase filter values to the GIAS PhaseOfEducation values they
+# include. All-through schools appear in both primary and secondary results,
+# which is why this is a set per phase rather than a single string comparison.
+#
+# Lives here rather than in app.py because similar_schools.py needs it too, and
+# importing app from there would be a cycle.
+PHASE_GROUPS: dict[str, set[str]] = {
+    "primary": {"primary", "middle deemed primary", "all-through"},
+    "secondary": {"secondary", "middle deemed secondary", "all-through", "16 plus"},
+    "all-through": {"all-through"},
+}
+
 # School listing columns
 SCHOOL_COLUMNS = [
     "urn",

backend/similar_schools.py

@@ -0,0 +1,261 @@
+"""Which nearby schools a detail page may offer as alternatives.
+
+Two kinds of rule, and they are not interchangeable.
+
+HARD FILTERS encode claims the section is not allowed to make. A selective
+school is not an alternative to a non-selective one, a special school is not
+comparable to a mainstream one, and a Girls school is not an option for a Boys
+school's reader. These never relax, at any distance, even where that means the
+section does not render at all.
+
+SOFT PREFERENCES describe how closely an intake resembles this school's. They
+relax in tiers, and every card reports the tier that actually took it so the
+page can say what is shared rather than implying more. They relax only far
+enough to reach a usable set, never far enough to fill the last of the slots.
+
+Pure functions over a DataFrame: no I/O, no FastAPI, no database.
+"""
+
+from __future__ import annotations
+
+import re
+
+import numpy as np
+import pandas as pd
+
+from .schemas import PHASE_GROUPS
+
+# A cap, not a quota: the section shows everything that qualified at the tiers
+# it used, up to this many. Three fit the row; the rest are behind the arrows.
+MAX_SCHOOLS = 6
+# Tiers stop relaxing once this many have been found. Without it, a cap of six
+# would reliably drag in tier-3 schools ten miles away to fill a row that three
+# good matches had already earned.
+ENOUGH = 3
+MINIMUM = 2
+
+# (tier, radius in miles). Faith relaxes before gender: a faith mismatch
+# changes the character of a school, while a gender mismatch can mean the
+# school is not available to this reader's child at all.
+TIERS: tuple[tuple[int, float], ...] = ((1, 3.0), (2, 5.0), (3, 10.0))
+
+EARTH_RADIUS_MILES = 3958.8
+
+_SPECIAL = re.compile(r"\bspecial\b|pupil referral|alternative provision", re.I)
+
+# Values that mean "this school has no religious character".
+_NO_FAITH = {"", "none", "does not apply", "not applicable"}
+
+
+def is_special_provision(school_type: str | None) -> bool:
+    """Mirror of isSpecialSchool() in nextjs-app/lib/utils.ts.
+
+    Special schools carry a mainstream phase, so phase alone cannot identify
+    them. The two implementations must agree: a school the frontend treats as
+    special for benchmarking but this treats as mainstream would be dropped
+    from its own England comparison and then offered as a peer to a mainstream
+    school on the next page along.
+    """
+    return bool(_SPECIAL.search(school_type or ""))
+
+
+def is_selective(admissions_policy: str | None) -> bool:
+    """Strictly selective. Unknown counts as non-selective, which is the safe
+    direction: it can only ever exclude a pairing, never invent one."""
+    return (admissions_policy or "").strip().lower() == "selective"
+
+
+def faith_key(denomination: str | None) -> str:
+    value = (denomination or "").strip().lower()
+    return "" if value in _NO_FAITH else value
+
+
+def faith_label(denomination: str | None) -> str:
+    return denomination.strip() if faith_key(denomination) else "No religious character"
+
+
+def genders_compatible(a: str | None, b: str | None) -> bool:
+    single = {"boys", "girls"}
+    left, right = (a or "").strip().lower(), (b or "").strip().lower()
+    return not (left in single and right in single and left != right)
+
+
+def phase_label(phase: str | None) -> str:
+    text = (phase or "").strip()
+    if not text:
+        return "School"
+    if text.lower() == "all-through":
+        return "All-through school"
+    return f"{text.capitalize()} school"
+
+
+def is_secondary_phase(phase: str | None) -> bool:
+    """Whether this phase takes the secondary side: secondary group membership,
+    minus all-through.
+
+    Membership is read from PHASE_GROUPS rather than tested with `"secondary" in
+    phase`, because that substring misses "16 plus" — GIAS phase 6, which
+    PHASE_GROUPS deliberately files as secondary. The substring version fails
+    silently rather than loudly: a sixth-form college is simply handed the
+    primary bucket and offered infant schools as peers.
+
+    All-through is the exception. PHASE_GROUPS lists it on both sides because it
+    belongs on both phases' place pages, but the detail page renders it with the
+    primary template, and the metric follows the template.
+    """
+    text = (phase or "").strip().lower()
+    return text != "all-through" and text in PHASE_GROUPS["secondary"]
+
+
+def _phase_group(is_secondary: bool) -> set[str]:
+    return PHASE_GROUPS["secondary" if is_secondary else "primary"]
+
+
+def _haversine_miles(lat1: float, lon1: float, lat2, lon2):
+    """Vectorised, matching the postcode search in app.py."""
+    lat1_r, lon1_r = np.radians(lat1), np.radians(lon1)
+    lat2_r, lon2_r = np.radians(lat2.astype(float)), np.radians(lon2.astype(float))
+    dlat, dlon = lat2_r - lat1_r, lon2_r - lon1_r
+    a = np.sin(dlat / 2) ** 2 + np.cos(lat1_r) * np.cos(lat2_r) * np.sin(dlon / 2) ** 2
+    return 2 * EARTH_RADIUS_MILES * np.arcsin(np.sqrt(a))
+
+
+def _native(value):
+    """NaN and numpy scalars both reach JSONResponse badly; normalise here so
+    the caller never has to remember to."""
+    if value is None:
+        return None
+    if isinstance(value, np.generic):
+        value = value.item()
+    if isinstance(value, float) and np.isnan(value):
+        return None
+    return value
+
+
+def _mask(series: pd.Series, predicate) -> pd.Series:
+    """A boolean mask that survives an empty frame.
+
+    `Series.apply` on an empty Series returns an empty *DataFrame*, and using
+    that as a mask silently drops every column — so the next column lookup
+    raises KeyError rather than yielding no rows. This is not hypothetical: a
+    special school with no special school near it empties the frame at the
+    provision filter, which is the ordinary case for most special schools.
+    """
+    return pd.Series([predicate(value) for value in series], index=series.index, dtype=bool)
+
+
+def _chips(subject: pd.Series, candidate: pd.Series, tier: int, is_secondary: bool) -> list[str]:
+    if tier >= 3:
+        return [phase_label(candidate.get("phase"))]
+
+    chips = [str(subject.get("gender") or "").strip()]
+    if is_secondary:
+        policy = (candidate.get("admissions_policy") or "").strip()
+        if policy and policy.lower() not in {"not applicable", "unknown"}:
+            chips.append(policy)
+    if tier == 1:
+        chips.append(faith_label(candidate.get("religious_denomination")))
+    return [chip for chip in chips if chip]
+
+
+def select_similar(frame: pd.DataFrame, urn: int, is_secondary: bool) -> list[dict]:
+    """Up to MAX_SCHOOLS nearby schools this page may offer, or [] below MINIMUM.
+
+    Selected by tier, displayed by distance: the tier decides which schools
+    earn a slot, and the render order is then closest-first, because "nearby"
+    is the promise in the heading.
+    """
+    subject_rows = frame[frame["urn"] == urn]
+    if subject_rows.empty:
+        return []
+    subject = subject_rows.iloc[0]
+
+    lat, lon = _native(subject.get("latitude")), _native(subject.get("longitude"))
+    if lat is None or lon is None:
+        return []
+
+    metric_key = "attainment_8_score" if is_secondary else "rwm_expected_pct"
+
+    candidates = frame[frame["urn"] != urn].copy()
+    for column in ("latitude", "longitude"):
+        candidates = candidates[candidates[column].notna()]
+    if candidates.empty:
+        return []
+
+    # ── Hard filters ────────────────────────────────────────────────────
+    allowed_phases = _phase_group(is_secondary)
+    candidates = candidates[
+        candidates["phase"].fillna("").str.lower().isin(allowed_phases)
+    ]
+    candidates = candidates[candidates["status"].fillna("").str.lower().str.startswith("open")]
+
+    subject_special = is_special_provision(subject.get("school_type"))
+    special = _mask(candidates["school_type"], is_special_provision)
+    candidates = candidates[special if subject_special else ~special]
+
+    subject_selective = is_selective(subject.get("admissions_policy"))
+    selective = _mask(candidates["admissions_policy"], is_selective)
+    candidates = candidates[selective if subject_selective else ~selective]
+
+    subject_gender = subject.get("gender")
+    candidates = candidates[
+        _mask(candidates["gender"], lambda g: genders_compatible(subject_gender, g))
+    ]
+    if candidates.empty:
+        return []
+
+    candidates["distance_miles"] = _haversine_miles(
+        lat, lon, candidates["latitude"].values, candidates["longitude"].values
+    ).round(1)
+
+    # ── Soft preferences, in tiers ──────────────────────────────────────
+    subject_faith = faith_key(subject.get("religious_denomination"))
+    subject_gender_key = (subject_gender or "").strip().lower()
+    same_gender = candidates["gender"].fillna("").str.strip().str.lower() == subject_gender_key
+    same_faith = _mask(
+        candidates["religious_denomination"], lambda d: faith_key(d) == subject_faith
+    )
+
+    tier_masks = {
+        1: same_gender & same_faith,
+        2: same_gender,
+        3: pd.Series(True, index=candidates.index),
+    }
+
+    # Descend the tiers only until the set reaches ENOUGH. The tier that gets
+    # there is the last one opened, and the remaining slots up to MAX_SCHOOLS
+    # are filled from the tiers already used — never by widening again.
+    picked: dict[int, tuple[int, pd.Series]] = {}
+    for tier, radius in TIERS:
+        within = candidates[tier_masks[tier] & (candidates["distance_miles"] <= radius)]
+        for _, row in within.sort_values("distance_miles").iterrows():
+            candidate_urn = int(row["urn"])
+            if candidate_urn in picked:
+                continue
+            picked[candidate_urn] = (tier, row)
+            if len(picked) >= MAX_SCHOOLS:
+                break
+        if len(picked) >= ENOUGH:
+            break
+
+    if len(picked) < MINIMUM:
+        return []
+
+    selected = sorted(
+        picked.values(), key=lambda pair: float(pair[1]["distance_miles"])
+    )[:MAX_SCHOOLS]
+    return [
+        {
+            "urn": int(row["urn"]),
+            "school_name": str(row.get("school_name") or ""),
+            "distance_miles": float(row["distance_miles"]),
+            "school_type": _native(row.get("school_type")),
+            "age_range": _native(row.get("age_range")),
+            "shared": _chips(subject, row, tier, is_secondary),
+            "tier": tier,
+            "metric_value": _native(row.get(metric_key)),
+            "metric_key": metric_key,
+            "metric_year": _native(row.get("year")),
+        }
+        for tier, row in selected
+    ]

backend/tests/test_similar_schools.py

@@ -0,0 +1,330 @@
+"""Selection rules for the "similar schools nearby" section.
+
+The hard filters encode claims the section is not allowed to make — that a
+selective school is an alternative to a non-selective one, that a special
+school is comparable to a mainstream one, or that a Girls school is an option
+for a Boys school's reader. They never relax. The soft preferences describe
+how close the intake is, and they do — but only far enough to reach a usable
+set, never far enough to fill the last of the six slots.
+"""
+
+import numpy as np
+import pandas as pd
+
+from backend.similar_schools import is_secondary_phase, select_similar
+
+# Roughly 0.7 miles apart in latitude at this longitude.
+BASE_LAT, BASE_LON = 51.5000, -0.1000
+
+
+def _row(urn, name, **overrides):
+    base = {
+        "urn": urn,
+        "school_name": name,
+        "local_authority": "Testshire",
+        "school_type": "Community school",
+        "phase": "Primary",
+        "age_range": "4-11",
+        "status": "Open",
+        "gender": "Mixed",
+        "religious_denomination": "None",
+        "admissions_policy": "Not applicable",
+        "latitude": BASE_LAT,
+        "longitude": BASE_LON,
+        "year": 202425,
+        "rwm_expected_pct": 70.0,
+        "attainment_8_score": np.nan,
+    }
+    base.update(overrides)
+    return base
+
+
+def _frame(*rows):
+    return pd.DataFrame(list(rows))
+
+
+def _at(miles):
+    """A latitude `miles` north of BASE_LAT."""
+    return BASE_LAT + miles / 69.0
+
+
+def test_returns_nearest_same_phase_schools():
+    frame = _frame(
+        _row(100001, "Subject"),
+        _row(100002, "Near", latitude=_at(0.5)),
+        _row(100003, "Mid", latitude=_at(1.0)),
+        _row(100004, "Far", latitude=_at(2.0)),
+    )
+    result = select_similar(frame, 100001, is_secondary=False)
+    assert [s["urn"] for s in result] == [100002, 100003, 100004]
+    assert result[0]["distance_miles"] == 0.5
+
+
+def test_excludes_the_subject_school():
+    frame = _frame(
+        _row(100001, "Subject"),
+        _row(100002, "A", latitude=_at(0.5)),
+        _row(100003, "B", latitude=_at(0.6)),
+    )
+    assert 100001 not in {s["urn"] for s in select_similar(frame, 100001, is_secondary=False)}
+
+
+def test_selective_never_meets_non_selective():
+    frame = _frame(
+        _row(100001, "Grammar", phase="Secondary", admissions_policy="Selective"),
+        _row(100002, "Comp A", phase="Secondary", admissions_policy="Non-selective", latitude=_at(0.5)),
+        _row(100003, "Comp B", phase="Secondary", admissions_policy="Non-selective", latitude=_at(0.6)),
+    )
+    assert select_similar(frame, 100001, is_secondary=True) == []
+
+    reverse = select_similar(frame, 100002, is_secondary=True)
+    assert 100001 not in {s["urn"] for s in reverse}
+
+
+def test_special_schools_match_only_each_other():
+    frame = _frame(
+        _row(100001, "Special", school_type="Community special school"),
+        _row(100002, "Mainstream A", latitude=_at(0.5)),
+        _row(100003, "Mainstream B", latitude=_at(0.6)),
+    )
+    assert select_similar(frame, 100001, is_secondary=False) == []
+    assert select_similar(frame, 100002, is_secondary=False) == []
+
+
+def test_boys_never_meets_girls():
+    frame = _frame(
+        _row(100001, "Boys School", gender="Boys"),
+        _row(100002, "Girls School", gender="Girls", latitude=_at(0.5)),
+        _row(100003, "Mixed School", gender="Mixed", latitude=_at(0.6)),
+        _row(100004, "Another Mixed", gender="Mixed", latitude=_at(0.7)),
+    )
+    urns = {s["urn"] for s in select_similar(frame, 100001, is_secondary=False)}
+    assert 100002 not in urns
+    assert urns == {100003, 100004}
+
+
+def test_closed_schools_and_missing_coordinates_are_dropped():
+    frame = _frame(
+        _row(100001, "Subject"),
+        _row(100002, "Closed", status="Closed", latitude=_at(0.5)),
+        _row(100003, "No coords", latitude=np.nan, longitude=np.nan),
+        _row(100004, "Good A", latitude=_at(0.6)),
+        _row(100005, "Good B", latitude=_at(0.7)),
+    )
+    assert {s["urn"] for s in select_similar(frame, 100001, is_secondary=False)} == {100004, 100005}
+
+
+def test_tiers_relax_faith_before_gender():
+    frame = _frame(
+        _row(100001, "Subject", gender="Boys", religious_denomination="Roman Catholic"),
+        # Tier 1: same gender and same faith.
+        _row(100002, "Tier one", gender="Boys", religious_denomination="Roman Catholic", latitude=_at(2.0)),
+        # Tier 2: same gender, different faith — closer, but a weaker match.
+        _row(100003, "Tier two", gender="Boys", religious_denomination="None", latitude=_at(0.5)),
+        # Tier 3: mixed gender, different faith.
+        _row(100004, "Tier three", gender="Mixed", religious_denomination="None", latitude=_at(0.6)),
+    )
+    result = select_similar(frame, 100001, is_secondary=False)
+    tier_by_urn = {s["urn"]: s["tier"] for s in result}
+    assert tier_by_urn == {100002: 1, 100003: 2, 100004: 3}
+    # Selected by tier, displayed by distance.
+    assert [s["urn"] for s in result] == [100003, 100004, 100002]
+
+
+def test_caps_at_six_taking_the_nearest():
+    frame = _frame(
+        _row(100001, "Subject"),
+        *[_row(100010 + n, f"Peer {n}", latitude=_at(0.1 * (n + 1))) for n in range(7)],
+    )
+    result = select_similar(frame, 100001, is_secondary=False)
+    assert len(result) == 6
+    # The seventh-nearest is the one dropped, not an arbitrary one.
+    assert 100016 not in {s["urn"] for s in result}
+
+
+def test_tiers_stop_once_enough_are_found():
+    """Four tier-1 matches are a usable set, so tier 2 is never opened — even
+    though it holds a school that is closer than any of them."""
+    frame = _frame(
+        _row(100001, "Subject", religious_denomination="Roman Catholic"),
+        _row(100002, "RC one", religious_denomination="Roman Catholic", latitude=_at(0.5)),
+        _row(100003, "RC two", religious_denomination="Roman Catholic", latitude=_at(0.6)),
+        _row(100004, "RC three", religious_denomination="Roman Catholic", latitude=_at(0.7)),
+        _row(100005, "RC four", religious_denomination="Roman Catholic", latitude=_at(0.8)),
+        # Closer than every one of them, but only a tier-2 match.
+        _row(100006, "Secular and nearer", religious_denomination="None", latitude=_at(0.2)),
+    )
+    result = select_similar(frame, 100001, is_secondary=False)
+    assert 100006 not in {s["urn"] for s in result}
+    assert len(result) == 4
+    assert all(s["tier"] == 1 for s in result)
+
+
+def test_a_school_is_never_taken_twice():
+    frame = _frame(
+        _row(100001, "Subject"),
+        _row(100002, "A", latitude=_at(0.5)),
+        _row(100003, "B", latitude=_at(0.6)),
+    )
+    result = select_similar(frame, 100001, is_secondary=False)
+    assert len(result) == len({s["urn"] for s in result})
+
+
+def test_fewer_than_two_matches_returns_empty():
+    frame = _frame(
+        _row(100001, "Subject"),
+        _row(100002, "Only neighbour", latitude=_at(0.5)),
+    )
+    assert select_similar(frame, 100001, is_secondary=False) == []
+
+
+def test_beyond_the_widest_radius_is_not_offered():
+    frame = _frame(
+        _row(100001, "Subject"),
+        _row(100002, "A", latitude=_at(11.0)),
+        _row(100003, "B", latitude=_at(12.0)),
+    )
+    assert select_similar(frame, 100001, is_secondary=False) == []
+
+
+def test_all_through_is_offered_on_both_phase_sides():
+    frame = _frame(
+        _row(100001, "Primary subject", phase="Primary"),
+        _row(100002, "All through", phase="All-through", latitude=_at(0.5)),
+        _row(100003, "Primary peer", phase="Primary", latitude=_at(0.6)),
+    )
+    assert 100002 in {s["urn"] for s in select_similar(frame, 100001, is_secondary=False)}
+
+    secondary = _frame(
+        _row(100010, "Secondary subject", phase="Secondary"),
+        _row(100002, "All through", phase="All-through", latitude=_at(0.5)),
+        _row(100011, "Secondary peer", phase="Secondary", latitude=_at(0.6)),
+    )
+    assert 100002 in {s["urn"] for s in select_similar(secondary, 100010, is_secondary=True)}
+
+
+def test_sixteen_plus_is_matched_against_secondary_not_primary():
+    """GIAS phase 6 is "16 plus", and PHASE_GROUPS puts it in the secondary
+    group — a sixth-form college's peers are secondaries and other colleges,
+    never primary schools. A substring test for "secondary" misses it silently:
+    no crash, just a page offering infant schools to a sixth form."""
+    frame = _frame(
+        _row(100001, "Sixth Form College", phase="16 plus", age_range="16-19"),
+        _row(100002, "Nearby Secondary", phase="Secondary", latitude=_at(0.5),
+             attainment_8_score=52.0),
+        _row(100003, "Nearby College", phase="16 plus", latitude=_at(0.6),
+             attainment_8_score=np.nan),
+        _row(100004, "Nearby Primary", phase="Primary", latitude=_at(0.1)),
+    )
+    result = select_similar(frame, 100001, is_secondary=is_secondary_phase("16 plus"))
+    urns = {s["urn"] for s in result}
+    assert 100004 not in urns, "a primary school is not a peer for a sixth form"
+    assert urns == {100002, 100003}
+    assert all(s["metric_key"] == "attainment_8_score" for s in result)
+
+
+def test_is_secondary_phase_agrees_with_the_phase_groups_it_selects_from():
+    """The two must not drift: whatever this calls secondary decides which
+    PHASE_GROUPS bucket the candidates come from."""
+    for phase in ("Secondary", "Middle deemed secondary", "16 plus"):
+        assert is_secondary_phase(phase) is True, phase
+    for phase in ("Primary", "Middle deemed primary", "Nursery", "", None):
+        assert is_secondary_phase(phase) is False, phase
+    # In PHASE_GROUPS an all-through school is on both sides, but it renders
+    # with the primary template, and the metric follows the template.
+    assert is_secondary_phase("All-through") is False
+
+
+def test_chips_state_only_what_the_tier_earned():
+    frame = _frame(
+        _row(100001, "Subject", phase="Secondary", gender="Mixed",
+             religious_denomination="None", admissions_policy="Non-selective"),
+        _row(100002, "Full match", phase="Secondary", gender="Mixed",
+             religious_denomination="None", admissions_policy="Non-selective", latitude=_at(0.5)),
+        _row(100003, "Faith differs", phase="Secondary", gender="Mixed",
+             religious_denomination="Church of England", admissions_policy="Non-selective", latitude=_at(0.6)),
+    )
+    by_urn = {s["urn"]: s for s in select_similar(frame, 100001, is_secondary=True)}
+    assert by_urn[100002]["shared"] == ["Mixed", "Non-selective", "No religious character"]
+    assert by_urn[100003]["shared"] == ["Mixed", "Non-selective"]
+
+
+def test_tier_three_chip_is_the_plain_phase():
+    frame = _frame(
+        _row(100001, "Subject", gender="Boys"),
+        _row(100002, "A", gender="Mixed", latitude=_at(0.5)),
+        _row(100003, "B", gender="Mixed", latitude=_at(0.6)),
+    )
+    result = select_similar(frame, 100001, is_secondary=False)
+    assert all(s["shared"] == ["Primary school"] for s in result)
+
+
+def test_metric_follows_the_template_not_the_neighbour():
+    frame = _frame(
+        _row(100001, "Subject", phase="Secondary", attainment_8_score=50.0),
+        _row(100002, "A", phase="Secondary", attainment_8_score=52.8, latitude=_at(0.5)),
+        _row(100003, "B", phase="Secondary", attainment_8_score=np.nan, latitude=_at(0.6)),
+    )
+    by_urn = {s["urn"]: s for s in select_similar(frame, 100001, is_secondary=True)}
+    assert by_urn[100002]["metric_key"] == "attainment_8_score"
+    assert by_urn[100002]["metric_value"] == 52.8
+    assert by_urn[100002]["metric_year"] == 202425
+    assert by_urn[100003]["metric_value"] is None
+
+
+def test_values_are_json_safe_native_types():
+    frame = _frame(
+        _row(100001, "Subject"),
+        _row(100002, "A", latitude=_at(0.5)),
+        _row(100003, "B", latitude=_at(0.6)),
+    )
+    for school in select_similar(frame, 100001, is_secondary=False):
+        assert isinstance(school["urn"], int)
+        assert isinstance(school["distance_miles"], float)
+        assert not isinstance(school["metric_value"], np.generic)
+
+
+# ---------------------------------------------------------------------------
+# The endpoint
+# ---------------------------------------------------------------------------
+
+import pytest
+from fastapi.testclient import TestClient
+
+
+def _endpoint_frame():
+    return _frame(
+        _row(100001, "Subject Primary"),
+        _row(100002, "Neighbour A", latitude=_at(0.5)),
+        _row(100003, "Neighbour B", latitude=_at(0.6)),
+    )
+
+
+@pytest.fixture()
+def client(monkeypatch):
+    from backend import app as app_module
+
+    monkeypatch.setattr(app_module, "load_latest_school_data", _endpoint_frame)
+    monkeypatch.setattr(app_module, "load_school_data", _endpoint_frame)
+    monkeypatch.setattr(app_module, "get_supplementary_data", lambda db, urn: {})
+    return TestClient(app_module.app, raise_server_exceptions=False)
+
+
+def test_detail_payload_carries_similar_schools(client):
+    resp = client.get("/api/schools/100001")
+    assert resp.status_code == 200, resp.text
+    similar = resp.json()["similar_schools"]
+    assert [s["school_name"] for s in similar] == ["Neighbour A", "Neighbour B"]
+    assert similar[0]["metric_key"] == "rwm_expected_pct"
+
+
+def test_a_failure_in_selection_does_not_break_the_page(client, monkeypatch):
+    from backend import app as app_module
+
+    def _explode(*args, **kwargs):
+        raise ValueError("selection blew up")
+
+    monkeypatch.setattr(app_module, "select_similar", _explode)
+    resp = client.get("/api/schools/100001")
+    assert resp.status_code == 200, resp.text
+    assert resp.json()["similar_schools"] == []

docs/ARCHITECTURE.md

@@ -73,7 +73,12 @@ There is no SWR dependency. Leaflet maps are loaded through dynamic wrappers;
 Chart.js renders performance and comparison charts.
 
 `components/school/` contains detail sections, with section decisions and data
-preparation in `lib/schoolSections.ts`. `lib/types.ts` contains manually maintained
+preparation in `lib/schoolSections.ts`. The similar-schools section is selected
+in `backend/similar_schools.py` — hard filters that never relax (phase,
+provision, selectivity, gender) and soft preferences that do (religious
+character, then gender exactness) — and served on `/api/schools/{urn}`. Its
+rules are presentation logic, deliberately kept out of `marts.*` so they can be
+tuned by deploy rather than by pipeline run. `lib/types.ts` contains manually maintained
 API types. `payload-types.ts` and the Payload import map are generated artifacts.
 
 ## Publication and caching today

docs/superpowers/specs/2026-09-21-similar-schools-nearby-design.md

@@ -0,0 +1,417 @@
+# Similar Schools Nearby — Design
+
+**Date:** 2026-09-21
+**Status:** awaiting review
+**Scope:** school detail pages, both phase templates
+
+## Goal
+
+Give a school detail page an answer to the question every reader arrives with
+after the results tables: *and what else is around here?*
+
+Today a school page links outward to its place pages through
+`components/school/NearbyPlaces.tsx` and nowhere else. It never links to another
+school. This section adds that edge — up to six nearby schools of the same phase
+and a comparable intake, three at a time in a carousel, each a crawlable link and
+each addable to the comparison basket in one click.
+
+Mockup, with all three tier states live in both themes:
+<https://claude.ai/artifact/168KdUMcfkUeGWW2FGjuec>
+
+Source of the same page in the repo: `mockups/similar-schools-nearby.html`.
+
+## The constraint that shapes everything
+
+**A nearby school is not automatically a comparable school.**
+
+The section's whole value is that a reader treats what it shows as a shortlist.
+That makes every card an implicit claim that the school is a realistic
+alternative, and there are three ways that claim goes wrong:
+
+1. A **selective** school beside a non-selective one. Their intakes are
+   different by construction, so putting their Attainment 8 figures side by side
+   invites a conclusion the data cannot support.
+2. A **special school, PRU or AP** beside a mainstream school. This is the same
+   error PR #70 fixed for the England benchmark, where Greenmead (URN 101099)
+   rendered "0% — 62 below England".
+3. A **single-sex** school of the opposite sex. Not a weak match — not an option
+   at all.
+
+So the design separates two kinds of rule, and never confuses them:
+
+- **Hard filters** encode the claims above. They are never relaxed, at any
+  distance, even if that means the section does not render.
+- **Soft preferences** describe how closely the intake resembles this school's.
+  They relax in tiers, and the card's own text always states what survived.
+
+Everything below follows from that split.
+
+## Selection algorithm
+
+A backend helper, `_similar_schools_payload(urn)` in `backend/app.py`, modelled
+on the existing `_places_payload(urn)` and operating on the cached
+`load_latest_school_data()` frame — one row per URN, already carrying
+`latitude`, `longitude`, `phase`, `gender`, `religious_denomination`,
+`admissions_policy`, `school_type` and `status`.
+
+### Hard filters
+
+| Filter | Rule |
+|---|---|
+| Self | `urn` is excluded |
+| Status | GIAS status must be open |
+| Coordinates | both `latitude` and `longitude` present on both schools |
+| Phase | same phase group via the existing `PHASE_GROUPS` map |
+| Provision | special/PRU/AP match only each other |
+| Selectivity | selective matches selective; non-selective matches non-selective |
+| Gender | Boys never matches Girls; Mixed is compatible with both |
+
+`PHASE_GROUPS` is reused rather than re-derived so an all-through school is
+offered correctly on both the primary and secondary sides, exactly as it already
+behaves in search.
+
+The provision filter needs a backend counterpart to the frontend's
+`isSpecialSchool()` in `nextjs-app/lib/utils.ts:897`, reading the same GIAS
+establishment types through `backend/gias_codes.py`. The two must agree: a
+school the frontend treats as special for benchmarking but the backend treats as
+mainstream for matching would be dropped from its own England comparison and
+then offered as a peer to a mainstream school on the next page along.
+
+**Up to six cards, three visible.** Six is a cap, not a quota: the section shows
+every school that qualifies at the tiers it used, up to six. Three fit the row,
+and the rest are reached with the carousel arrows. Two is the minimum that
+renders at all.
+
+### Soft preferences, relaxed in tiers
+
+| Tier | Additionally requires | Radius |
+|---|---|---|
+| 1 | exact gender equality **and** same religious character | 3 miles |
+| 2 | exact gender equality | 5 miles |
+| 3 | nothing beyond the hard filters | 10 miles |
+
+**Tiers relax to reach a usable set, never to fill the last slots.**
+
+Work down the tiers until the schools found so far reach three. Call the tier
+that got there T. The section then shows up to six schools drawn from tiers 1
+to T, nearest first — and does not open tier T+1 merely because six slots are
+not yet full.
+
+Worked through:
+
+| Qualifying | T | Shown |
+|---|---|---|
+| 14 at tier 1 | 1 | the 6 nearest tier-1 schools |
+| 4 at tier 1 | 1 | all 4 — tier 2 is never opened |
+| 2 at tier 1, 7 more at tier 2 | 2 | the 6 nearest of those 9 |
+| 2 at tier 1, 1 at tier 2 | 2 | all 3 |
+| 2 across all three tiers | 3 | both, since 2 is the minimum |
+
+Without that stopping rule, a cap of six would reliably drag in tier-3 schools
+ten miles away to fill a row that three good matches had already earned. The old
+cap of three hid this; six exposes it, which is why the rule is stated rather
+than left to the loop.
+
+**Faith relaxes before gender.** A faith mismatch changes the character of a
+school; a gender mismatch can mean the school is not available to the reader's
+child at all. Ordering them the other way would fill the section with schools
+that cannot be applied to.
+
+### Two decisions that are easy to get wrong later
+
+**Selected by tier, displayed by distance.** Tier decides *which* three schools
+earn a slot. The rendered order is then distance ascending, because "nearby" is
+the promise in the heading and a reader scanning the row reads the first card as
+the closest. A tier-2 school at 0.4 miles therefore appears above a tier-1
+school at 2.9 miles, and the chips explain the difference in match quality.
+
+**Past the sixth school, the rest are dropped without a count.** In inner
+London dozens clear tier 1, and a parent there will notice three is not the
+neighbourhood — hence six. Beyond that the section does not try to be the list:
+`NearbyPlaces` sits directly beneath and already leads to the place pages, which
+are built for browsing a full set and which the school page exists to feed.
+
+**Fewer than two results renders nothing.** Not an empty state, not a single
+lonely card, not padding with schools that failed the hard filters. The section
+is absent, the nav item is absent, and the page is unchanged from today. A page
+with one weak match is better off without the section than with it.
+
+### Distance
+
+Straight-line, from the vectorised haversine already used for postcode search at
+`backend/app.py:831`, computed over the ~27k-row frame in numpy. Reported to one
+decimal place in miles, consistent with the rest of the site.
+
+Straight-line distance is not road distance and is not measured from the
+reader's home. The section says so in its disclosure rather than leaving the
+reader to assume otherwise.
+
+## API
+
+`/api/schools/{urn}` gains a `similar_schools` array. Each row:
+
+| Field | Notes |
+|---|---|
+| `urn` | for the link and the compare basket |
+| `school_name` | link text |
+| `distance_miles` | one decimal place |
+| `school_type` | GIAS type, translated, for the card's meta line |
+| `age_range` | for the meta line |
+| `shared` | the chip strings the tier actually justifies — see below |
+| `tier` | 1, 2 or 3 — drives the lede's wording and the chip styling |
+| `metric_value` | the phase-appropriate headline figure, or null |
+| `metric_key` | `rwm_expected_pct` or `attainment_8_score` — see below |
+| `metric_year` | the year the figure is from |
+
+The metric follows the phase side the school was *matched* on, not the
+neighbour's own phase, so a row of cards never mixes two scales. The secondary
+side uses `attainment_8_score`; the primary side uses `rwm_expected_pct`. Where
+the neighbour has no value for that key, the card reads "Not published" rather
+than falling back to the other key.
+
+Which side a school takes is decided once, in
+`similar_schools.is_secondary_phase`, by membership of `PHASE_GROUPS["secondary"]`
+minus all-through — never by testing for the substring "secondary", which misses
+`16 plus` (GIAS phase 6) and hands a sixth-form college the primary bucket.
+All-through is the exception in the other direction: `PHASE_GROUPS` lists it on
+both sides, but it takes the primary metric.
+
+This is usually the same thing as "the template the page renders", but not
+always. `computeSchoolFlags` decides the template with that same substring test,
+so a `16 plus` school renders `PrimarySchoolSections` while being matched — 
+correctly — against secondaries. The section therefore takes its lede noun from
+the school's own phase rather than from its template, or it would print "Other
+primary schools near <sixth form college>" above a row of secondaries.
+
+`tier` is carried explicitly rather than inferred from the contents of
+`shared`, because the frontend needs it for two separate decisions — whether the
+lede may claim a similar intake, and whether a chip renders as a brand-tinted
+fill or a muted outline — and inferring it from chip count would couple those
+decisions to the copy.
+
+Up to six rows of roughly 130 bytes each. It rides in the existing detail payload
+rather than a new endpoint because the page already makes exactly one server
+fetch for its data, and `/school/[slug]` regenerates at most weekly
+(`revalidate = 604800`), so the per-request cost is paid once per school per
+week.
+
+**The key is absent, not null, on a backend that does not have this code.** The
+frontend treats absent and empty identically, which is what allowed
+`NearbyPlaces` to ship without a lockstep deploy of the two images.
+
+`shared` is computed on the backend beside the tier that produced it, not
+re-derived on the frontend. Deriving it twice is how a card comes to claim a
+match the selection did not actually make.
+
+## Frontend
+
+### Components
+
+`components/school/SimilarSchoolsSection.tsx` — a server component wrapped in
+the shared `Section` shell from `sectionShared.tsx`. It renders the heading,
+the lede, the card grid, the footer CTA and one caption line. Every
+card's title is an `<a>` to the school's canonical slug URL via `schoolUrl()`.
+
+`components/school/AddToCompareButton.tsx` — calls `addSchool` from
+`ComparisonProvider` and reports the selection with a `from: 'similar_schools'`
+attribution, mirroring `addSchoolFromSearch` in `HomeView.tsx:442`.
+
+`components/school/SimilarSchoolsCarousel.tsx` — the scroller and its arrows. It
+takes the server-rendered cards as `children` and the server-rendered heading and
+lede as a `header` prop, so those stay server components while the client
+component owns only the ref, the scroll handler and the arrows' disabled state.
+
+The split matters: the links — the part with SEO value and the part that must
+work without JavaScript — are server-rendered into the initial HTML, and only
+the basket interaction and the arrows are hydrated.
+
+### The carousel
+
+**Every card is in the initial HTML.** The arrows scroll a list; they never swap
+a view. Six `<a>` elements are in the markup whether or not anything is
+hydrated, which is the whole reason the section exists — a paginated widget that
+mounts cards on click would put four of the six links beyond a crawler and
+beyond a reader with no JavaScript.
+
+So the scroller is a plain overflowing `<ul>` with `scroll-snap-type: x
+mandatory`, and the arrows call `scrollBy` on it. With no JavaScript it
+degrades to a horizontally scrollable row that still works by touch and by
+trackpad. Three cards are visible at desktop width and two below 820px.
+
+**Arrows appear only when there is somewhere to go** — that is, only when more
+than three schools were found. Each disables itself at its own end of the
+travel.
+
+#### Below 640px the arrows go away
+
+This follows [MOBILE.md](../../../MOBILE.md), which makes 360px the design
+floor and mobile the primary target at ≥55% of traffic.
+
+Kept in the heading's flex row at 360px, the two arrow buttons take 96px from a
+328px card and crush the lede into a four-line column — measured, not guessed.
+And swiping already does what they do. So below 640px the header becomes a
+single column, the arrows are not rendered, one card shows at 86% width so the
+next one peeks, and the affordance is carried by the right-edge scroll-fade that
+MOBILE.md documents for exactly this case:
+
+```css
+mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
+```
+
+The fade lifts at the end of the travel, where there is nothing left to hint
+at. That means the at-end state must be computed whether or not an arrow exists
+to consume it — on mobile it drives the mask alone.
+
+**Every interactive element clears 44×44px**, per MOBILE.md's iOS HIG check: the
+arrow buttons and the add-to-compare button are both 44px, up from the 40px they
+were first drawn at. A card title's own box is shorter than that, but its hit
+area is the whole card through the `::after` overlay, so it passes on the target
+that actually receives the tap.
+
+**The edge test needs a tolerance, and this is not fussiness.** The scroller
+carries 2px of padding so focus rings are not clipped, and scroll-snap treats
+that padding as the first card's snap position: a scroller sitting at its start
+reports `scrollLeft` of 2, not 0. Sub-pixel rounding moves it again at other
+zoom levels. Testing `scrollLeft === 0` therefore leaves the back arrow live and
+pointing nowhere on first paint — confirmed in the mockup before it was fixed.
+Both ends compare against an 8px tolerance.
+
+**Selecting a school must not move the row.** Adding to the basket re-renders
+the footer; the scroll offset lives in the DOM rather than in React state, so
+the carousel must not remount or reset on that render. A reader who ticks the
+fifth school and is thrown back to the first has been punished for using the
+feature.
+
+### Placement and navigation
+
+Rendered as the last section **inside** `SchoolDetailShell`, from both
+`PrimarySchoolSections` and `SecondarySchoolSections`. Inside, not after, because
+the sticky nav's scroll-spy locates sections with `document.getElementById` and
+can only reach a section that lives in the shell.
+
+`NearbyPlaces` stays where it is, outside the shell, immediately below. The
+resulting order — this school, then similar schools, then the places containing
+them — narrows before it widens, which is the order a reader leaves a page in.
+
+`buildNavItems` and `buildSecondaryNavItems` both gain
+`{ id: 'similar', label: 'Similar schools' }`, gated on the section rendering.
+The id must match the `Section` id or the scroll-spy silently breaks.
+
+### The comparison CTA
+
+A plain `<a href="/compare?urns=…">`, built from this school's URN plus the
+selected ones. `/compare` already parses `urns` from the query string
+(`app/(frontend)/compare/page.tsx:55`), so this needs no new compare plumbing.
+With nothing selected the CTA is disabled; the button also adds to the shared
+basket so the site-wide comparison state stays consistent with what the page
+shows.
+
+## Copy, and what the section is allowed to claim
+
+**The lede tracks the deepest tier shown.** At tiers 1–2 it reads "Other primary
+schools near X, with a similar intake." Where any card came from tier 3 it drops
+"with a similar intake", because for at least one of the cards that is not what
+was matched. Six cards make this more likely to fire than three did, which is
+correct: a wider net is exactly when the claim needs dropping.
+
+**Chips state only what is shared.** A tier-2 card carries fewer chips rather
+than a chip it has not earned; a tier-3 card falls back to the plain phase name,
+styled as a muted outline rather than a brand-tinted fill so the difference is
+visible at a glance.
+
+**The neighbour's metric carries no valence colour.** Green and terracotta are
+reserved site-wide for comparison against the England average. Colouring a
+neighbour's figure against this school's would read as ranking the neighbours
+against each other, which is precisely the endorsement this section must not
+make. The figure sits in neutral ink above a plain "72% at this school"
+reference line, and the reader draws their own conclusion.
+
+**A missing figure reads "Not published".** Never 0, never blank, never an
+em dash. This follows the same rule the rest of the detail page uses: a school
+with no published result has not scored zero.
+
+**There is no "how these are chosen" disclosure.** The method is visible in what
+the section already shows — the phase in the lede, the shared characteristics on
+each card, the distance above each name — and a collapsed panel restating it
+earns less than the space it costs.
+
+**One caption line survives, and only one:** that distances are straight-line
+from the school and not road distance. This is not a method note. A reader who
+sees "0.6 miles away" and takes it for the walk has been misled by us, and no
+other element on the card corrects that. The remaining notes — that listing is
+not a recommendation, that special schools only meet special schools — are
+statements the selection rules already keep true without being narrated.
+
+## Degradation
+
+| Condition | Behaviour |
+|---|---|
+| `similar_schools` absent (older backend image) | no section, no nav item |
+| fewer than 2 qualifying schools | no section, no nav item |
+| this school has no coordinates | no section |
+| the helper raises | returns `[]`; the page renders without the section |
+
+The helper is wrapped so a failure inside it never 500s a page that is otherwise
+complete — the posture `get_supplementary_data` already takes for its own
+queries.
+
+## Testing
+
+**Backend**, in a new `backend/tests/test_similar_schools.py`, against a
+synthetic frame rather than live marts:
+
+- a selective school never returns a non-selective one, and vice versa
+- a special school returns only special schools; a mainstream school returns none
+- a Boys school never returns a Girls school; Mixed matches both
+- closed schools and schools without coordinates are never returned
+- tier relaxation fills in order, and a school taken at tier 1 is not repeated
+- tiers stop relaxing once three are found: four tier-1 matches never open tier 2
+- more than six qualifying schools returns the six nearest
+- an all-through school is offered on both phase sides
+- a `16 plus` school is matched against secondaries and colleges, never primaries
+- `is_secondary_phase` and `PHASE_GROUPS` agree on every GIAS phase value
+- fewer than two qualifying schools returns `[]`
+- distances match a hand-computed haversine for a known pair
+
+**Frontend**, in `nextjs-app/__tests__`:
+
+- the section renders nothing for absent, empty and single-row inputs
+- the lede drops "with a similar intake" when any card is tier 3
+- a null metric renders "Not published"
+- the nav item appears only alongside the section
+- every card is in the DOM, including the ones scrolled out of view
+- arrows render only when more than three schools were found
+
+jsdom has no layout, so `scrollWidth` and `clientWidth` are both 0 there and the
+arrows' disabled state cannot be meaningfully asserted in Jest. That behaviour is
+covered in the journey instead, against a real engine, rather than by a unit test
+that would pass on a measurement that does not exist.
+
+**E2E**, added to the existing journeys in `e2e/tests` in the same PR, per the
+repository's rule on user-facing behaviour:
+
+- the section renders on a known staging URN, with resolving links
+- where arrows are present, the back arrow starts disabled and the forward arrow
+  moves the row
+- selecting a school does not reset the scroll position
+- add-to-compare reaches `/compare` with the expected `urns`
+- at 360, 390 and 430px: no horizontal overflow, every interactive element in the
+  section clears 44×44px, and no arrows are rendered
+
+The E2E gate runs after merge on this project, so these journeys are not
+provable in the PR checks; the PR is verified on the unit tests, and the
+journeys are confirmed on the post-merge staging run.
+
+## Out of scope
+
+- A map of the nearby schools. The section is a list; the page already has a map.
+- Autoplay, dots, or an infinite loop on the carousel. It is a short list a
+  reader scans deliberately, not a banner competing for attention, and a row
+  that moves on its own is a row that moves while someone is reading it.
+- Statistical neighbours on deprivation, size or cohort profile. If the tiers
+  prove too coarse, that is the trigger to move this computation into a dbt mart
+  — `_similar_schools_payload` is a deliberate seam for exactly that swap.
+- Precomputing neighbours in `marts.*`. Rejected for now: a new mart is inert
+  until Airflow runs, so the feature would ship dark, and every tuning change to
+  the tiers would become a pipeline round-trip instead of a deploy.
+- Any change to `/api/compare`, the compare page, or the comparison basket.

e2e/tests/journeys.spec.ts

@@ -2734,3 +2734,111 @@ test('the content sitemap lists the about page and is advertised in robots', asy
   expect(body).toContain('/sitemap.xml');
   expect(body).toContain('/content-sitemap.xml');
 });
+
+/**
+ * Similar schools nearby.
+ *
+ * The section is absent by design where fewer than two schools qualify, and the
+ * arrows are absent where three cards fit, so this asserts each part of the
+ * contract only where it applies.
+ *
+ * Two things here cannot be tested anywhere else: the arrows' disabled state,
+ * which jsdom cannot measure because it has no layout, and the scroll position
+ * surviving a selection, which is DOM state rather than React state.
+ */
+test('similar schools link on to other schools and into compare', async ({ page }) => {
+  await searchByName(page, 'Primary');
+  await schoolLinks(page).first().click();
+  await page.waitForURL(/\/school\//);
+
+  const section = page.locator('#similar');
+  if ((await section.count()) === 0) {
+    test.skip(true, 'No qualifying similar schools for this school');
+  }
+
+  // Every card is a real link to another school page — including the ones
+  // behind the arrows, which is the whole reason this is a scroller and not a
+  // paginated widget.
+  const links = section.locator('a[href^="/school/"]');
+  const linkCount = await links.count();
+  expect(linkCount).toBeGreaterThanOrEqual(2);
+  expect(linkCount).toBeLessThanOrEqual(6);
+  expect(await links.first().getAttribute('href')).toMatch(/^\/school\/\d{6}-/);
+
+  await expect(section.getByText(/miles away/).first()).toBeVisible();
+
+  const scroller = section.locator('ul').first();
+
+  // The carousel, where this school had more than three matches.
+  const forward = section.getByRole('button', { name: 'More schools' });
+  if (await forward.count()) {
+    const back = section.getByRole('button', { name: 'Previous schools' });
+    await expect(back).toBeDisabled();
+
+    await forward.click();
+    await expect
+      .poll(() => scroller.evaluate((node: HTMLElement) => node.scrollLeft))
+      .toBeGreaterThan(8);
+    await expect(back).toBeEnabled();
+  }
+
+  // The compare hand-off, and the row must not jump back to the start when the
+  // footer re-renders underneath it.
+  const offsetBefore = await scroller.evaluate((node: HTMLElement) => node.scrollLeft);
+  await section.getByRole('button', { name: /Add to compare/ }).first().click();
+  await expect(
+    section.getByRole('button', { name: /Added to compare/ }).first(),
+  ).toBeVisible();
+  expect(await scroller.evaluate((node: HTMLElement) => node.scrollLeft)).toBe(offsetBefore);
+});
+
+/**
+ * The section at MOBILE.md's three reference widths.
+ *
+ * MOBILE.md asks for exactly this check and records that it was not written
+ * because "Playwright isn't currently in the project dependency set". That is
+ * no longer true — this suite is Playwright — so the check exists now, scoped
+ * to the page this feature touches.
+ */
+for (const width of [360, 390, 430]) {
+  test(`similar schools survives a ${width}px viewport`, async ({ page }) => {
+    await page.setViewportSize({ width, height: 800 });
+    await searchByName(page, 'Primary');
+    await schoolLinks(page).first().click();
+    await page.waitForURL(/\/school\//);
+
+    const section = page.locator('#similar');
+    if ((await section.count()) === 0) {
+      test.skip(true, 'No qualifying similar schools for this school');
+    }
+
+    // 1. Nothing bleeds past the right edge.
+    expect(
+      await page.evaluate(() => document.documentElement.scrollWidth - window.innerWidth),
+    ).toBe(0);
+
+    // 2. No arrows on touch widths — swiping does the job, and they would take
+    //    96px from a 328px card.
+    await expect(section.getByRole('button', { name: 'More schools' })).toHaveCount(0);
+
+    // 3. Every tap target in the section clears 44px. A card title's own box is
+    //    shorter, but its hit area is the whole card via ::after.
+    const failing = await section.evaluate((root: HTMLElement) =>
+      Array.from(root.querySelectorAll('a, button'))
+        .filter((el) => (el as HTMLElement).offsetParent)
+        .map((el) => {
+          const card = el.closest('li');
+          const box = el.matches('h3 a') && card
+            ? card.getBoundingClientRect()
+            : el.getBoundingClientRect();
+          return {
+            text: (el as HTMLElement).innerText.trim().slice(0, 24),
+            w: box.width,
+            h: box.height,
+          };
+        })
+        .filter((o) => o.w < 44 || o.h < 44),
+    );
+    expect(failing).toEqual([]);
+  });
+}

mockups/similar-schools-nearby.html

@@ -0,0 +1,373 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Similar Schools Nearby</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Manrope:wght@500;600;700&display=swap" rel="stylesheet">
+<style>
+/* Tokens copied verbatim from nextjs-app/app/(frontend)/globals.css so this
+   mockup cannot drift from the shipped palette. Light values first, dark
+   under prefers-color-scheme, both overridable by the theme switch. */
+:root {
+  color-scheme: light;
+  --bg-primary:#FAFAF8; --bg-secondary:#F5EFE6; --bg-card:#FFFFFF;
+  --text-primary:#1C2731; --text-secondary:#4A5560; --text-muted:#5F6A75;
+  --border:#E5E7EB; --border-strong:#D3D7DD;
+  --brand:#0F766E; --brand-strong:#0C5F58; --brand-bg:rgba(15,118,110,.10); --brand-on:#FFFFFF;
+  --action:#BE3C27; --action-strong:#A33320; --action-on:#FFFFFF;
+  --sand:#F5EFE6;
+  --font-display:Manrope,-apple-system,BlinkMacSystemFont,sans-serif;
+  --font-ui:Inter,-apple-system,BlinkMacSystemFont,sans-serif;
+  --radius-md:8px; --radius-lg:16px;
+  --shadow:0 1px 2px rgba(28,39,49,.06),0 1px 3px rgba(28,39,49,.05);
+}
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    color-scheme: dark;
+    --bg-primary:#111A20; --bg-secondary:#16222A; --bg-card:#18242C;
+    --text-primary:#E9EEF0; --text-secondary:#B4C2C7; --text-muted:#8B9AA1;
+    --border:#26343D; --border-strong:#35454F;
+    --brand:#5FC7BB; --brand-strong:#7BD6CC; --brand-bg:rgba(95,199,187,.14); --brand-on:#0A1418;
+    --action:#F08A72; --action-strong:#F5A492; --action-on:#241009;
+    --sand:#1B2730;
+    --shadow:0 1px 2px rgba(0,0,0,.3),0 1px 3px rgba(0,0,0,.25);
+  }
+}
+:root[data-theme="dark"] {
+  color-scheme: dark;
+  --bg-primary:#111A20; --bg-secondary:#16222A; --bg-card:#18242C;
+  --text-primary:#E9EEF0; --text-secondary:#B4C2C7; --text-muted:#8B9AA1;
+  --border:#26343D; --border-strong:#35454F;
+  --brand:#5FC7BB; --brand-strong:#7BD6CC; --brand-bg:rgba(95,199,187,.14); --brand-on:#0A1418;
+  --action:#F08A72; --action-strong:#F5A492; --action-on:#241009;
+  --sand:#1B2730;
+  --shadow:0 1px 2px rgba(0,0,0,.3),0 1px 3px rgba(0,0,0,.25);
+}
+* { box-sizing:border-box; }
+body {
+  margin:0; padding:32px 16px 80px; background:var(--bg-primary);
+  color:var(--text-primary); font:15px/1.55 var(--font-ui);
+  -webkit-font-smoothing:antialiased;
+}
+.page { max-width:960px; margin:0 auto; }
+.page > header { margin-bottom:28px; display:flex; flex-wrap:wrap; gap:16px; align-items:flex-start; justify-content:space-between; }
+.page > header h1 { font:700 25px/1.25 var(--font-display); letter-spacing:-.6px; margin:0 0 6px; }
+.page > header p { margin:0; color:var(--text-muted); font-size:14px; max-width:60ch; }
+.theme-switch { border:1px solid var(--border-strong); background:var(--bg-card); color:var(--text-secondary); border-radius:999px; padding:8px 14px; font:500 13px var(--font-ui); cursor:pointer; min-height:44px; }
+.theme-switch:hover { border-color:var(--brand); color:var(--brand); }
+
+/* ── The page context each variant is shown inside ─────────────────── */
+.variant { margin-bottom:40px; }
+.variant > .context { padding:0 4px 12px; }
+.variant .eyebrow { margin:0 0 4px; font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--text-muted); }
+.variant .context h2 { font:600 18px/1.35 var(--font-display); margin:0; color:var(--text-secondary); }
+.variant .note { margin:10px 4px 0; font-size:12.5px; color:var(--text-muted); }
+.variant .note b { color:var(--text-secondary); font-weight:600; }
+
+/* ── The section itself — mirrors components/school/Section ────────── */
+.card {
+  background:var(--bg-card); border:1px solid var(--border);
+  border-radius:var(--radius-lg); padding:28px; box-shadow:var(--shadow);
+}
+.top { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
+.top h2 { font:700 22px/1.25 var(--font-display); letter-spacing:-.4px; margin:0; }
+.lede { margin:8px 0 20px; color:var(--text-secondary); font-size:14.5px; max-width:64ch; }
+
+/* ── Carousel ───────────────────────────────────────────────────────
+   Every card is in the DOM and in the initial HTML — the arrows scroll a
+   list, they do not swap a view. That keeps all six links crawlable and
+   keeps the section usable with no JavaScript, where it degrades to a
+   plain horizontally scrollable row. */
+.arrows { display:flex; gap:8px; flex:none; }
+.arrow {
+  width:44px; height:44px; display:grid; place-items:center; cursor:pointer;
+  border:1px solid var(--border-strong); border-radius:999px;
+  background:var(--bg-card); color:var(--brand);
+}
+.arrow:hover:not(:disabled) { border-color:var(--brand); background:var(--brand-bg); }
+.arrow:disabled { opacity:.35; cursor:default; }
+.arrow:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
+.arrow svg { width:17px; height:17px; }
+
+.scroller {
+  display:grid; grid-auto-flow:column;
+  grid-auto-columns:calc((100% - 28px) / 3);
+  gap:14px; overflow-x:auto; scroll-snap-type:x mandatory;
+  padding:2px; margin:-2px;                /* room for focus rings */
+  scrollbar-width:none; -ms-overflow-style:none;
+  list-style:none;
+}
+.scroller::-webkit-scrollbar { display:none; }
+.scroller:focus-visible { outline:2px solid var(--brand); outline-offset:4px; border-radius:var(--radius-md); }
+@media (max-width:820px) { .scroller { grid-auto-columns:calc((100% - 14px) / 2); } }
+/* Touch widths: the arrows would squeeze the lede into a four-line column for a
+   control that swiping already provides, so they go and the documented
+   right-edge fade carries the affordance instead (MOBILE.md). The fade lifts at
+   the end of the travel, where there is nothing more to hint at. */
+@media (max-width:640px) {
+  .top { display:block; }
+  .arrows { display:none; }
+  .scroller { grid-auto-columns:86%; mask-image:linear-gradient(to right, #000 calc(100% - 28px), transparent); }
+  .scroller[data-at-end=true] { mask-image:none; }
+  .card { padding:20px; }
+}
+
+.school {
+  position:relative; display:flex; flex-direction:column; scroll-snap-align:start;
+  border:1px solid var(--border); border-radius:var(--radius-md);
+  padding:16px; background:var(--bg-card);
+}
+.school:has(.add[aria-pressed=true]) { border-color:var(--brand); background:var(--brand-bg); }
+.distance { display:flex; align-items:center; gap:5px; font-size:12px; color:var(--text-muted); margin:0 0 10px; }
+.distance svg { width:13px; height:13px; flex:none; }
+.school h3 { font:600 16px/1.35 var(--font-display); margin:0 0 6px; }
+/* The whole card is the link target; the button sits above it on z-index so
+   it stays independently clickable. */
+.school h3 a { color:var(--text-primary); text-decoration:none; }
+.school h3 a::after { content:""; position:absolute; inset:0; border-radius:var(--radius-md); }
+.school:hover { border-color:var(--border-strong); }
+.school h3 a:hover { color:var(--brand); text-decoration:underline; }
+.school h3 a:focus-visible { outline:none; }
+.school:has(h3 a:focus-visible) { outline:2px solid var(--brand); outline-offset:2px; }
+.meta { margin:0 0 12px; font-size:12.5px; color:var(--text-muted); }
+.shared { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 14px; padding:0; list-style:none; }
+.shared li { font-size:11.5px; line-height:1.4; padding:4px 8px; border-radius:999px; background:var(--brand-bg); color:var(--brand); border:1px solid transparent; }
+.shared li.loose { background:transparent; color:var(--text-muted); border-color:var(--border); }
+.metric { margin-top:auto; padding-top:13px; border-top:1px solid var(--border); }
+.value { font:700 26px/1.1 var(--font-display); letter-spacing:-.6px; margin:0; }
+.value.absent { font-size:15px; font-weight:600; color:var(--text-muted); letter-spacing:0; }
+.metric .label { margin:4px 0 0; font-size:12px; color:var(--text-secondary); }
+.metric .ref { margin:2px 0 0; font-size:12px; color:var(--text-muted); }
+.add {
+  position:relative; z-index:1; margin-top:14px; width:100%; min-height:44px;
+  font:500 13px var(--font-ui); cursor:pointer; border-radius:var(--radius-md);
+  border:1px solid var(--border-strong); background:var(--bg-card); color:var(--brand);
+}
+.add:hover { border-color:var(--brand); background:var(--brand-bg); }
+.add[aria-pressed=true] { border-color:var(--brand); background:var(--brand-bg); font-weight:600; }
+.add:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
+
+.footer {
+  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
+  gap:14px; margin-top:20px; padding-top:18px; border-top:1px solid var(--border);
+}
+.footer p { margin:0; font-size:12.5px; color:var(--text-muted); }
+.footer strong { display:block; font:600 14px var(--font-ui); color:var(--text-primary); }
+/* Coral: the one decisive action in this section, and there is only one. */
+.compare {
+  min-height:44px; padding:0 20px; border-radius:var(--radius-md); cursor:pointer;
+  font:600 14px var(--font-ui); background:var(--action); color:var(--action-on);
+  border:1px solid var(--action); text-decoration:none; display:inline-flex; align-items:center; gap:8px;
+}
+.compare:hover { background:var(--action-strong); border-color:var(--action-strong); }
+.compare[aria-disabled=true] { opacity:.45; pointer-events:none; }
+.caption { margin:16px 0 0; font-size:11.5px; color:var(--text-muted); }
+.sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
+</style>
+</head>
+<body>
+<div class="page">
+<header>
+  <div>
+    <h1>Similar schools nearby</h1>
+    <p>A new section on the school detail page. Fictional schools and figures; shipped
+       colour, type and section shell taken from <code>globals.css</code>.</p>
+  </div>
+  <button class="theme-switch" type="button" id="theme">Dark theme</button>
+</header>
+<div id="variants"></div>
+</div>
+
+<script>
+const PIN = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"/><circle cx="12" cy="10" r="3"/></svg>';
+const CHEV = (dir) => `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="${dir === 'prev' ? 'M15 18l-6-6 6-6' : 'M9 18l6-6-6-6'}"/></svg>`;
+
+const variants = [
+  {
+    id: 'dense',
+    eyebrow: 'Variant 1 · Dense urban primary — six matches, carousel active',
+    context: 'Meadowbrook Primary School — Ages 4–11 · Mixed · No religious character · Community school',
+    lede: 'Other primary schools near Meadowbrook Primary School, with a similar intake.',
+    metric: 'Reading, writing & maths',
+    caption: 'Meeting the expected standard at key stage 2, 2025.',
+    thisValue: '72%',
+    note: 'Fourteen schools cleared <b>tier 1</b> within three miles, so the section takes the six nearest and stops there. The arrows scroll a list that is entirely in the HTML — all six links are crawlable, and with JavaScript off the row still scrolls.',
+    schools: [
+      { name:'Willow Lane Primary School', distance:'0.4', meta:'Community school · Ages 4–11', shared:['Mixed','No religious character'], value:'74%' },
+      { name:'Oakfield Primary School', distance:'0.6', meta:'Academy converter · Ages 3–11', shared:['Mixed','No religious character'], value:'69%' },
+      { name:'Brookside Primary School', distance:'0.9', meta:'Community school · Ages 4–11', shared:['Mixed','No religious character'], value:'Not published' },
+      { name:'Hollytree Primary School', distance:'1.3', meta:'Academy converter · Ages 4–11', shared:['Mixed','No religious character'], value:'81%' },
+      { name:'Marsh Green Primary School', distance:'1.8', meta:'Community school · Ages 3–11', shared:['Mixed','No religious character'], value:'64%' },
+      { name:'Kingsway Primary School', distance:'2.2', meta:'Foundation school · Ages 4–11', shared:['Mixed','No religious character'], value:'77%' },
+    ],
+  },
+  {
+    id: 'secondary',
+    eyebrow: 'Variant 2 · Secondary — four matches, mixed tiers',
+    context: 'Meadowbrook High School — Ages 11–18 · Mixed · Non-selective · Academy',
+    lede: 'Other secondary schools near Meadowbrook High School, with a similar intake.',
+    metric: 'Attainment 8',
+    caption: 'Average GCSE attainment score across eight qualifications, 2025.',
+    thisValue: '51.2',
+    note: 'Only two schools cleared tier 1, so the search widened to <b>tier 2</b> and found two more. It stops there rather than widening again to reach six — tiers relax to reach a usable set, never to fill the last slots. Selectivity never relaxes, so no grammar school can appear here.',
+    schools: [
+      { name:'Rivermead High School', distance:'0.9', meta:'Academy converter · Ages 11–18', shared:['Mixed','Non-selective','No religious character'], value:'52.8' },
+      { name:'Oakfield Academy', distance:'1.7', meta:'Academy sponsor led · Ages 11–16', shared:['Mixed','Non-selective','No religious character'], value:'49.6' },
+      { name:'St Aidan’s Catholic High School', distance:'2.4', meta:'Voluntary aided · Ages 11–18', shared:['Mixed','Non-selective'], value:'53.4' },
+      { name:'Parkside Community School', distance:'3.8', meta:'Community school · Ages 11–16', shared:['Mixed','Non-selective'], value:'50.9' },
+    ],
+  },
+  {
+    id: 'sparse',
+    eyebrow: 'Variant 3 · Rural — two matches, no arrows',
+    context: 'Little Ashby Church of England Primary School — Ages 4–11 · Mixed · Church of England · Voluntary controlled',
+    lede: 'Other primary schools near Little Ashby Church of England Primary School.',
+    metric: 'Reading, writing & maths',
+    caption: 'Meeting the expected standard at key stage 2, 2025.',
+    thisValue: '66%',
+    note: 'Nothing matched on religious character within range. At <b>tier 3</b> the lede drops the phrase “with a similar intake” and the chips fall back to the plain phase. Two cards fit the row, so the arrows are not rendered at all. One school fewer and the section would not render either.',
+    schools: [
+      { name:'Great Marden Primary School', distance:'4.2', meta:'Community school · Ages 4–11', shared:['Primary school'], loose:true, value:'71%' },
+      { name:'Ashby Vale Academy', distance:'7.8', meta:'Academy converter · Ages 4–11', shared:['Primary school'], loose:true, value:'58%' },
+    ],
+  },
+];
+
+const selected = Object.fromEntries(variants.map((v) => [v.id, new Set()]));
+
+function card(v, s, i) {
+  const on = selected[v.id].has(i);
+  const absent = s.value === 'Not published';
+  return `
+  <li class="school">
+    <p class="distance">${PIN}${s.distance} miles away</p>
+    <h3><a href="#">${s.name}</a></h3>
+    <p class="meta">${s.meta}</p>
+    <ul class="shared">${s.shared.map((c) => `<li class="${s.loose ? 'loose' : ''}">${c}</li>`).join('')}</ul>
+    <div class="metric">
+      <p class="value ${absent ? 'absent' : ''}">${s.value}</p>
+      <p class="label">${v.metric}</p>
+      <p class="ref">${v.thisValue} at this school</p>
+    </div>
+    <button class="add" type="button" data-variant="${v.id}" data-index="${i}" aria-pressed="${on}">
+      ${on ? '✓ Added to compare' : '+ Add to compare'}<span class="sr"> — ${s.name}</span>
+    </button>
+  </li>`;
+}
+
+function render() {
+  document.getElementById('variants').innerHTML = variants.map((v) => {
+    const count = selected[v.id].size;
+    // Three fit the row, so anything more is what the arrows are for.
+    const scrollable = v.schools.length > 3;
+    return `
+    <section class="variant">
+      <div class="context">
+        <p class="eyebrow">${v.eyebrow}</p>
+        <h2>${v.context}</h2>
+      </div>
+      <div class="card">
+        <div class="top">
+          <div>
+            <h2 id="h-${v.id}">Similar schools nearby</h2>
+            <p class="lede">${v.lede}</p>
+          </div>
+          ${scrollable ? `<div class="arrows">
+            <button class="arrow" type="button" data-scroll="prev" data-variant="${v.id}" aria-label="Previous schools" aria-controls="sc-${v.id}">${CHEV('prev')}</button>
+            <button class="arrow" type="button" data-scroll="next" data-variant="${v.id}" aria-label="More schools" aria-controls="sc-${v.id}">${CHEV('next')}</button>
+          </div>` : ''}
+        </div>
+
+        <ul class="scroller" id="sc-${v.id}" ${scrollable ? `tabindex="0" role="group" aria-labelledby="h-${v.id}"` : ''}>
+          ${v.schools.map((s, i) => card(v, s, i)).join('')}
+        </ul>
+
+        <div class="footer">
+          <p aria-live="polite">
+            <strong>${count ? `${count} school${count === 1 ? '' : 's'} selected` : 'Compare side by side'}</strong>
+            ${count ? 'This school is included automatically.' : 'Add a school to compare it with this one.'}
+          </p>
+          <a class="compare" href="#" aria-disabled="${count ? 'false' : 'true'}">
+            ${count ? `Compare ${count + 1} schools` : 'Compare'} →
+          </a>
+        </div>
+        <p class="caption">Distances are straight-line from this school, not road distance.
+           ${v.caption} Fictional schools and figures for this mockup.</p>
+      </div>
+      <p class="note">${v.note}</p>
+    </section>`;
+  }).join('');
+
+  variants.forEach((v) => {
+    const scroller = document.getElementById(`sc-${v.id}`);
+    if (scroller) syncArrows(v.id, scroller);
+  });
+}
+
+/** An arrow that scrolls nowhere is a dead control, so each end disables its own.
+ *
+ *  EDGE is not paranoia. The scroller carries 2px of padding so focus rings are
+ *  not clipped, and scroll-snap treats that padding as the first card's snap
+ *  position — so a scroller sitting at its start reports scrollLeft 2, not 0.
+ *  Sub-pixel rounding at other zoom levels moves it again. Testing against an
+ *  exact 0 leaves the back arrow live at the start, pointing nowhere. */
+const EDGE = 8;
+
+function syncArrows(id, scroller) {
+  const max = scroller.scrollWidth - scroller.clientWidth;
+  const atStart = scroller.scrollLeft <= EDGE;
+  const atEnd = scroller.scrollLeft >= max - EDGE;
+
+  // Drives the mobile scroll-fade, so it is computed even where no arrow is
+  // rendered to consume it.
+  scroller.dataset.atEnd = String(atEnd);
+
+  const prev = document.querySelector(`.arrow[data-scroll="prev"][data-variant="${id}"]`);
+  const next = document.querySelector(`.arrow[data-scroll="next"][data-variant="${id}"]`);
+  if (!prev || !next) return;
+  prev.disabled = atStart;
+  next.disabled = atEnd;
+}
+
+document.getElementById('variants').addEventListener('click', (event) => {
+  const arrow = event.target.closest('.arrow');
+  if (arrow) {
+    const scroller = document.getElementById(`sc-${arrow.dataset.variant}`);
+    // A page is what the reader can see, so the viewport is the step.
+    scroller.scrollBy({ left: (arrow.dataset.scroll === 'next' ? 1 : -1) * scroller.clientWidth, behavior: 'smooth' });
+    return;
+  }
+  const button = event.target.closest('.add');
+  if (!button) return;
+  const { variant, index } = button.dataset;
+  const set = selected[variant];
+  const i = Number(index);
+  // Scroll position is DOM state, not React state; keep it across the re-render.
+  const offset = document.getElementById(`sc-${variant}`).scrollLeft;
+  set.has(i) ? set.delete(i) : set.add(i);
+  render();
+  const scroller = document.getElementById(`sc-${variant}`);
+  scroller.scrollLeft = offset;
+  syncArrows(variant, scroller);
+  document.querySelector(`.add[data-variant="${variant}"][data-index="${index}"]`).focus();
+}, true);
+
+document.getElementById('variants').addEventListener('scroll', (event) => {
+  const scroller = event.target.closest('.scroller');
+  if (scroller) syncArrows(scroller.id.replace('sc-', ''), scroller);
+}, true);
+
+const themeButton = document.getElementById('theme');
+themeButton.addEventListener('click', () => {
+  const dark = document.documentElement.dataset.theme === 'dark';
+  document.documentElement.dataset.theme = dark ? 'light' : 'dark';
+  themeButton.textContent = dark ? 'Dark theme' : 'Light theme';
+});
+
+render();
+</script>
+</body>
+</html>

nextjs-app/__tests__/components/SimilarSchoolsSection.test.tsx

@@ -0,0 +1,172 @@
+/**
+ * The section's job is to be honest about what it matched. These tests pin the
+ * ways it could lie: rendering below the minimum, claiming a similar intake at
+ * tier 3, showing a missing figure as a number, or hiding a card behind an
+ * arrow where a crawler cannot reach it.
+ */
+
+import { render, screen } from '@testing-library/react';
+
+import {
+  nearbyNoun,
+  SimilarSchoolsSection,
+  shouldRenderSimilar,
+} from '@/components/school/SimilarSchoolsSection';
+import type { SimilarSchool } from '@/lib/types';
+
+jest.mock('@/components/school/AddToCompareButton', () => ({
+  AddToCompareButton: ({ school }: { school: SimilarSchool }) => (
+    <button type="button">Add {school.school_name} to compare</button>
+  ),
+}));
+
+jest.mock('@/components/school/SimilarSchoolsCompareBar', () => ({
+  SimilarSchoolsCompareBar: ({ thisUrn }: { thisUrn: number }) => (
+    <div data-testid="compare-bar">bar for {thisUrn}</div>
+  ),
+}));
+
+function school(overrides: Partial<SimilarSchool> = {}): SimilarSchool {
+  return {
+    urn: 100002,
+    school_name: 'Willow Lane Primary School',
+    distance_miles: 0.6,
+    school_type: 'Community school',
+    age_range: '4-11',
+    shared: ['Mixed', 'No religious character'],
+    tier: 1,
+    metric_value: 74,
+    metric_key: 'rwm_expected_pct',
+    metric_year: 202425,
+    ...overrides,
+  };
+}
+
+function renderSection(similar: SimilarSchool[]) {
+  return render(
+    <SimilarSchoolsSection
+      urn={100001}
+      schoolName="Meadowbrook Primary School"
+      phase="Primary"
+      thisMetricValue={72}
+      similar={similar}
+    />,
+  );
+}
+
+describe('render gates', () => {
+  it.each([
+    ['undefined', undefined],
+    ['null', null],
+    ['empty', []],
+    ['a single school', [school()]],
+  ])('renders nothing for %s', (_label, value) => {
+    expect(shouldRenderSimilar(value as SimilarSchool[] | null | undefined)).toBe(false);
+  });
+
+  it('renders for two or more schools', () => {
+    expect(shouldRenderSimilar([school(), school({ urn: 100003 })])).toBe(true);
+  });
+
+  it('returns null rather than an empty shell below the minimum', () => {
+    const { container } = renderSection([school()]);
+    expect(container).toBeEmptyDOMElement();
+  });
+});
+
+describe('the claim the lede makes', () => {
+  it('claims a similar intake when every card is tier 1 or 2', () => {
+    renderSection([school({ tier: 1 }), school({ urn: 100003, tier: 2 })]);
+    expect(screen.getByText(/with a similar intake/i)).toBeInTheDocument();
+  });
+
+  it('drops the claim when any card is tier 3', () => {
+    renderSection([school({ tier: 1 }), school({ urn: 100003, tier: 3, shared: ['Primary school'] })]);
+    expect(screen.queryByText(/with a similar intake/i)).not.toBeInTheDocument();
+  });
+});
+
+describe('what the lede calls the set', () => {
+  it.each([
+    ['Primary', 'primary schools'],
+    ['Middle deemed primary', 'primary schools'],
+    ['Secondary', 'secondary schools'],
+    ['Middle deemed secondary', 'secondary schools'],
+    ['All-through', 'all-through schools'],
+    // GIAS phase 6. Its candidates span the whole secondary group, so no
+    // single noun fits and it takes the honest general one.
+    ['16 plus', 'schools and colleges'],
+    ['', 'schools'],
+    [null, 'schools'],
+  ])('calls a %s school\'s neighbours "%s"', (phase, expected) => {
+    expect(nearbyNoun(phase)).toBe(expected);
+  });
+
+  it('never calls a sixth form college\'s neighbours primary schools', () => {
+    render(
+      <SimilarSchoolsSection
+        urn={100001}
+        schoolName="Barnet Sixth Form College"
+        phase="16 plus"
+        thisMetricValue={null}
+        similar={[school(), school({ urn: 100003 })]}
+      />,
+    );
+    expect(screen.getByText(/Other schools and colleges near Barnet Sixth Form College/)).toBeInTheDocument();
+    expect(screen.queryByText(/primary schools/)).not.toBeInTheDocument();
+  });
+});
+
+describe('cards', () => {
+  it('links each school to its canonical slug', () => {
+    renderSection([school(), school({ urn: 100003, school_name: 'Oakfield Primary School' })]);
+    const link = screen.getByRole('link', { name: /Willow Lane Primary School/ });
+    expect(link).toHaveAttribute('href', '/school/100002-willow-lane-primary-school');
+  });
+
+  it('shows the distance and the shared characteristics', () => {
+    renderSection([school(), school({ urn: 100003 })]);
+    expect(screen.getAllByText('0.6 miles away').length).toBeGreaterThan(0);
+    expect(screen.getAllByText('Mixed').length).toBeGreaterThan(0);
+  });
+
+  it('renders a missing figure as "Not published", never as a number', () => {
+    renderSection([school({ metric_value: null }), school({ urn: 100003 })]);
+    expect(screen.getByText('Not published')).toBeInTheDocument();
+  });
+
+  it('anchors each figure against this school', () => {
+    renderSection([school(), school({ urn: 100003 })]);
+    expect(screen.getAllByText('72% at this school').length).toBe(2);
+  });
+
+  it('offers the compare bar once, for this school', () => {
+    renderSection([school(), school({ urn: 100003 })]);
+    expect(screen.getByTestId('compare-bar')).toHaveTextContent('bar for 100001');
+  });
+
+  it('keeps every card in the DOM, including the ones scrolled out of view', () => {
+    const six = Array.from({ length: 6 }, (_, n) =>
+      school({ urn: 100002 + n, school_name: `Peer ${n} School` }),
+    );
+    renderSection(six);
+    expect(screen.getAllByRole('link', { name: /Peer \d School/ })).toHaveLength(6);
+  });
+
+  it('offers no arrows when three cards fit the row', () => {
+    renderSection([school(), school({ urn: 100003 }), school({ urn: 100004 })]);
+    expect(screen.queryByRole('button', { name: /More schools/ })).not.toBeInTheDocument();
+  });
+
+  it('offers arrows once there is a fourth school', () => {
+    renderSection(Array.from({ length: 4 }, (_, n) => school({ urn: 100002 + n })));
+    expect(screen.getByRole('button', { name: /More schools/ })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /Previous schools/ })).toBeInTheDocument();
+  });
+
+  it('says distances are straight-line, and offers no method panel', () => {
+    const { container } = renderSection([school(), school({ urn: 100003 })]);
+    expect(screen.getByText(/straight-line from this school/i)).toBeInTheDocument();
+    expect(container.querySelector('details')).toBeNull();
+  });
+});

nextjs-app/__tests__/lib/schoolSections.test.ts

@@ -172,3 +172,39 @@ describe('buildSecondaryNavItems', () => {
     expect(ids).not.toContain('history');
   });
 });
+
+describe('the similar-schools nav item', () => {
+  const navInput = {
+    ofsted: null, admissions: null, admissionDistance: null,
+    hasLocation: true, yearlyDataLength: 1,
+  };
+
+  it('appears on both templates when the section renders', () => {
+    const primary = computeSchoolFlags(primaryFixture);
+    const secondary = computeSecondaryFlags(secondaryFixture);
+    const input = { ...navInput, hasSimilarSchools: true };
+
+    expect(buildNavItems(primary, input).map((i) => i.id)).toContain('similar');
+    expect(buildSecondaryNavItems(secondary, input).map((i) => i.id)).toContain('similar');
+  });
+
+  it('is absent when the section does not render', () => {
+    const primary = computeSchoolFlags(primaryFixture);
+    const secondary = computeSecondaryFlags(secondaryFixture);
+    const input = { ...navInput, hasSimilarSchools: false };
+
+    expect(buildNavItems(primary, input).map((i) => i.id)).not.toContain('similar');
+    expect(buildSecondaryNavItems(secondary, input).map((i) => i.id)).not.toContain('similar');
+  });
+
+  it('is absent when nothing says either way', () => {
+    const primary = computeSchoolFlags(primaryFixture);
+    expect(buildNavItems(primary, navInput).map((i) => i.id)).not.toContain('similar');
+  });
+
+  it('comes last, because the section renders last', () => {
+    const primary = computeSchoolFlags(primaryFixture);
+    const ids = buildNavItems(primary, { ...navInput, hasSimilarSchools: true }).map((i) => i.id);
+    expect(ids[ids.length - 1]).toBe('similar');
+  });
+});

nextjs-app/app/(frontend)/school/[slug]/page.tsx

@@ -8,6 +8,7 @@ import { APIFetchError, fetchSchoolDetails, fetchSchools, fetchNationalAverages
 import { notFound, redirect } from 'next/navigation';
 import { SchoolDetailShell } from '@/components/school/SchoolDetailShell';
 import { NearbyPlaces } from '@/components/school/NearbyPlaces';
+import { shouldRenderSimilar } from '@/components/school/SimilarSchoolsSection';
 import { schoolBreadcrumbJsonLd, type SchoolPlace } from '@/lib/jsonld';
 import { PrimarySchoolSections } from '@/components/school/PrimarySchoolSections';
 import { SecondarySchoolSections } from '@/components/school/SecondarySchoolSections';
@@ -155,6 +156,8 @@ export default async function SchoolPage({ params }: SchoolPageProps) {
   // nothing rather than throwing, which is how this shipped without a
   // lockstep deploy of the two images.
   const places: SchoolPlace[] = data.places ?? [];
+  // Absent on an older API build, exactly like `places` above.
+  const similarSchools = data.similar_schools ?? [];
 
   // Redirect bare URN to canonical slug URL
   const canonicalSlug = schoolUrl(urn, school_info.school_name).replace('/school/', '');
@@ -186,6 +189,7 @@ export default async function SchoolPage({ params }: SchoolPageProps) {
     admissions: admissions ?? null,
     admissionDistance: admission_distance ?? null,
     hasLocation: school_info.latitude != null && school_info.longitude != null,
+    hasSimilarSchools: shouldRenderSimilar(similarSchools),
     yearlyDataLength: yearly_data.length,
   };
   const primaryNavItems = buildNavItems(primaryFlags, navInput);
@@ -262,6 +266,7 @@ export default async function SchoolPage({ params }: SchoolPageProps) {
             finance={finance ?? null}
             nationalAvg={nationalAvg}
             destinations={destinations ?? null}
+            similarSchools={similarSchools}
             flags={secondaryFlags}
           />
         </SchoolDetailShell>
@@ -284,6 +289,7 @@ export default async function SchoolPage({ params }: SchoolPageProps) {
             deprivation={deprivation ?? null}
             finance={finance ?? null}
             nationalAvg={nationalAvg}
+            similarSchools={similarSchools}
             flags={primaryFlags}
           />
         </SchoolDetailShell>

nextjs-app/components/school/AddToCompareButton.tsx

@@ -0,0 +1,45 @@
+'use client';
+
+/**
+ * The per-card basket toggle.
+ *
+ * The links around it are server-rendered, so the section works with JS off;
+ * this adds the basket interaction on top rather than being what makes the
+ * section function.
+ */
+
+import { useComparisonContext } from '@/context/ComparisonContext';
+import type { School, SimilarSchool } from '@/lib/types';
+import styles from './SimilarSchools.module.css';
+
+export function AddToCompareButton({ school }: { school: SimilarSchool }) {
+  const { addSchool, removeSchool, selectedSchools } = useComparisonContext();
+  const selected = selectedSchools.some((s) => s.urn === school.urn);
+
+  const toggle = () => {
+    if (selected) {
+      removeSchool(school.urn);
+      return;
+    }
+    // The basket only needs identity and display fields; the compare page
+    // fetches everything it renders by URN.
+    addSchool({
+      urn: school.urn,
+      school_name: school.school_name,
+      school_type: school.school_type,
+      age_range: school.age_range,
+    } as School);
+  };
+
+  return (
+    <button
+      type="button"
+      className={styles.add}
+      onClick={toggle}
+      aria-pressed={selected}
+    >
+      {selected ? '✓ Added to compare' : '+ Add to compare'}
+      <span className={styles.srOnly}> — {school.school_name}</span>
+    </button>
+  );
+}

nextjs-app/components/school/PrimarySchoolSections.tsx

@@ -14,6 +14,7 @@
 import type {
   School, SchoolResult, AbsenceData, OfstedInspection, SchoolCensus,
   SchoolAdmissions, SchoolAdmissionDistance, SchoolDeprivation, SchoolFinance, NationalAverages,
+  SimilarSchool,
 } from '@/lib/types';
 import { ofstedLegacyAreas } from '@/lib/utils';
 import type { SchoolFlags } from '@/lib/schoolSections';
@@ -26,6 +27,7 @@ import { HistorySection } from './HistorySection';
 import { SchoolLifeSection } from './SchoolLifeSection';
 import { LocalAreaSection } from './LocalAreaSection';
 import { FinancesSection } from './FinancesSection';
+import { SimilarSchoolsSection } from './SimilarSchoolsSection';
 
 export interface PrimarySchoolSectionsProps {
   schoolInfo: School;
@@ -39,13 +41,15 @@ export interface PrimarySchoolSectionsProps {
   deprivation: SchoolDeprivation | null;
   finance: SchoolFinance | null;
   nationalAvg: NationalAverages | null;
+  /** Nearby schools of a comparable intake. Absent on an older API build. */
+  similarSchools?: SimilarSchool[];
   flags: SchoolFlags;
 }
 
 export function PrimarySchoolSections({
   schoolInfo, yearlyData, absenceData, ofsted, census,
   admissions, admissionsHistory, admissionDistance,
-  deprivation, finance, nationalAvg, flags,
+  deprivation, finance, nationalAvg, similarSchools, flags,
 }: PrimarySchoolSectionsProps) {
   const primaryAvg = nationalAvg?.primary ?? {};
   const secondaryAvg = nationalAvg?.secondary ?? {};
@@ -146,6 +150,15 @@ export function PrimarySchoolSections({
       )}
 
       {flags.hasFinance && finance && <FinancesSection finance={finance} />}
+
+      {/* Last: it is where the reader goes next, not part of this school. */}
+      <SimilarSchoolsSection
+        urn={schoolInfo.urn}
+        schoolName={schoolInfo.school_name}
+        phase={schoolInfo.phase}
+        thisMetricValue={flags.latestResults?.rwm_expected_pct ?? null}
+        similar={similarSchools}
+      />
     </>
   );
 }

nextjs-app/components/school/SecondarySchoolSections.tsx

@@ -14,7 +14,7 @@
 import type {
   School, SchoolResult, AbsenceData, OfstedInspection, SchoolCensus,
   SchoolAdmissions, SchoolAdmissionDistance, SchoolDeprivation, SchoolFinance, NationalAverages,
-  SchoolDestinations,
+  SchoolDestinations, SimilarSchool,
 } from '@/lib/types';
 import { ofstedLegacyAreas } from '@/lib/utils';
 import type { SecondaryFlags } from '@/lib/schoolSections';
@@ -27,6 +27,7 @@ import { DistanceSection } from './DistanceSection';
 import { SecondaryHistorySection } from './SecondaryHistorySection';
 import { WellbeingSection } from './WellbeingSection';
 import { FinancesSection } from './FinancesSection';
+import { SimilarSchoolsSection } from './SimilarSchoolsSection';
 import styles from './schoolSections.module.css';
 
 export interface SecondarySchoolSectionsProps {
@@ -47,13 +48,15 @@ export interface SecondarySchoolSectionsProps {
   finance: SchoolFinance | null;
   nationalAvg: NationalAverages | null;
   destinations: SchoolDestinations | null;
+  /** Nearby schools of a comparable intake. Absent on an older API build. */
+  similarSchools?: SimilarSchool[];
   flags: SecondaryFlags;
 }
 
 export function SecondarySchoolSections({
   schoolInfo, yearlyData, ofsted, census,
   admissions, admissionsHistory, admissionDistance,
-  deprivation, finance, nationalAvg, destinations, flags,
+  deprivation, finance, nationalAvg, destinations, similarSchools, flags,
 }: SecondarySchoolSectionsProps) {
   const secondaryAvg = nationalAvg?.secondary ?? {};
 
@@ -141,6 +144,15 @@ export function SecondarySchoolSections({
       {flags.hasFinance && finance && (
         <FinancesSection finance={finance} showPremises />
       )}
+
+      {/* Last: it is where the reader goes next, not part of this school. */}
+      <SimilarSchoolsSection
+        urn={schoolInfo.urn}
+        schoolName={schoolInfo.school_name}
+        phase={schoolInfo.phase}
+        thisMetricValue={flags.latestResults?.attainment_8_score ?? null}
+        similar={similarSchools}
+      />
     </div>
   );
 }

nextjs-app/components/school/SimilarSchools.module.css

@@ -0,0 +1,65 @@
+.heading { font-family: var(--font-display); font-size: 1.4rem; letter-spacing: -0.4px; margin: 0; }
+.lede { margin: 0.5rem 0 1.25rem; color: var(--text-secondary); max-width: 64ch; }
+.caption { margin: 1rem 0 0; font-size: 0.72rem; color: var(--text-muted); }
+
+.top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
+.arrows { display: flex; gap: 0.5rem; flex: none; }
+.arrow { width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--bg-card); color: var(--brand); }
+.arrow:hover:not(:disabled) { border-color: var(--brand); background: var(--brand-bg); }
+.arrow:disabled { opacity: 0.35; cursor: default; }
+.arrow svg { width: 17px; height: 17px; }
+
+/* A scroller, not a paginated view: every card is in the DOM and the arrows
+   only move the viewport across them. The 2px padding keeps focus rings from
+   being clipped — and is why the arrows' edge test needs a tolerance. */
+.scroller { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 1.8rem) / 3); gap: 0.9rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px; margin: -2px; list-style: none; scrollbar-width: none; -ms-overflow-style: none; }
+.scroller::-webkit-scrollbar { display: none; }
+@media (max-width: 820px) { .scroller { grid-auto-columns: calc((100% - 0.9rem) / 2); } }
+/* Touch widths (MOBILE.md): the arrows would take 96px from a 328px card and
+   crush the lede into four lines, for a control swiping already provides. They
+   go, and the documented right-edge fade carries the affordance — lifting at
+   the end of the travel, where there is nothing more to hint at. */
+@media (max-width: 640px) {
+  .top { display: block; }
+  .arrows { display: none; }
+  .scroller { grid-auto-columns: 86%; mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
+  .scroller[data-at-end="true"] { mask-image: none; }
+}
+
+.school { position: relative; display: flex; flex-direction: column; scroll-snap-align: start; border: 1px solid var(--border); border-radius: 8px; padding: 1rem; background: var(--bg-card); }
+.school:hover { border-color: var(--border-strong); }
+
+.distance { margin: 0 0 0.6rem; font-size: 0.75rem; color: var(--text-muted); }
+.name { font-family: var(--font-display); font-size: 1rem; line-height: 1.35; margin: 0 0 0.35rem; }
+.name a { color: var(--text-primary); text-decoration: none; }
+/* The whole card is the link target; the button sits above it on z-index. */
+.name a::after { content: ""; position: absolute; inset: 0; border-radius: 8px; }
+.name a:hover { color: var(--brand); text-decoration: underline; }
+.meta { margin: 0 0 0.75rem; font-size: 0.78rem; color: var(--text-muted); }
+
+.shared { display: flex; flex-wrap: wrap; gap: 0.35rem; list-style: none; margin: 0 0 0.85rem; padding: 0; }
+.chip { font-size: 0.72rem; line-height: 1.4; padding: 0.25rem 0.5rem; border-radius: 999px; background: var(--brand-bg); color: var(--brand); border: 1px solid transparent; }
+.chipLoose { font-size: 0.72rem; line-height: 1.4; padding: 0.25rem 0.5rem; border-radius: 999px; background: transparent; color: var(--text-muted); border: 1px solid var(--border); }
+
+.metric { margin-top: auto; padding-top: 0.8rem; border-top: 1px solid var(--border); }
+/* No valence colour here, deliberately: green and terracotta mean "against the
+   England average" everywhere else on the site, and colouring a neighbour
+   against this school would read as ranking the neighbours. */
+.value { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; letter-spacing: -0.6px; margin: 0; color: var(--text-primary); }
+.valueAbsent { font-size: 0.95rem; font-weight: 600; margin: 0; color: var(--text-muted); }
+.metricLabel { margin: 0.25rem 0 0; font-size: 0.75rem; color: var(--text-secondary); }
+.metricRef { margin: 0.1rem 0 0; font-size: 0.75rem; color: var(--text-muted); }
+
+.add { position: relative; z-index: 1; margin-top: 0.85rem; width: 100%; min-height: 44px; font: inherit; font-size: 0.82rem; font-weight: 500; cursor: pointer; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--bg-card); color: var(--brand); }
+.add:hover { border-color: var(--brand); background: var(--brand-bg); }
+.add[aria-pressed="true"] { border-color: var(--brand); background: var(--brand-bg); font-weight: 600; }
+
+.footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.85rem; margin-top: 1.25rem; padding-top: 1.1rem; border-top: 1px solid var(--border); }
+.footer p { margin: 0; font-size: 0.78rem; color: var(--text-muted); }
+.footer strong { display: block; font-size: 0.88rem; font-weight: 600; color: var(--text-primary); }
+/* Coral is the one decisive action per screen, and in this section this is it. */
+.compare { min-height: 44px; padding: 0 1.25rem; border-radius: 8px; font-size: 0.88rem; font-weight: 600; background: var(--action); color: var(--action-on); border: 1px solid var(--action); text-decoration: none; display: inline-flex; align-items: center; }
+.compare:hover { background: var(--action-strong); border-color: var(--action-strong); }
+.compare[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }
+
+.srOnly { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

nextjs-app/components/school/SimilarSchoolsCarousel.tsx

@@ -0,0 +1,127 @@
+'use client';
+
+/**
+ * The scroller and its arrows.
+ *
+ * `children` are the server-rendered cards and `header` the server-rendered
+ * heading and lede: both stay server components, passed through, so this file
+ * owns a DOM ref and nothing else. That is what keeps all six links in the
+ * initial HTML — a carousel that mounted cards on click would put four of the
+ * six beyond a crawler and beyond a reader with no JavaScript.
+ *
+ * With JavaScript off this degrades to a horizontally scrollable row, which is
+ * still usable by touch and trackpad.
+ */
+
+import { useCallback, useEffect, useRef, useState, type ReactNode } from 'react';
+import styles from './SimilarSchools.module.css';
+
+/** Three cards fit the row, so fewer than four has nowhere to scroll to.
+ *  Below 640px the arrows are not rendered at all — see the stylesheet. */
+const VISIBLE = 3;
+
+/**
+ * Why a tolerance rather than `=== 0`.
+ *
+ * The scroller carries 2px of padding so focus rings are not clipped, and
+ * scroll-snap treats that padding as the first card's snap position — a row at
+ * rest reports scrollLeft 2, not 0. Sub-pixel rounding moves it again at other
+ * zoom levels. An exact test leaves the back arrow live on first paint,
+ * pointing nowhere.
+ */
+const EDGE = 8;
+
+export function SimilarSchoolsCarousel({
+  count,
+  labelledBy,
+  header,
+  children,
+}: {
+  count: number;
+  labelledBy: string;
+  header: ReactNode;
+  children: ReactNode;
+}) {
+  const scroller = useRef<HTMLUListElement>(null);
+  const [atStart, setAtStart] = useState(true);
+  const [atEnd, setAtEnd] = useState(false);
+  const scrollable = count > VISIBLE;
+
+  const sync = useCallback(() => {
+    const node = scroller.current;
+    if (!node) return;
+    const max = node.scrollWidth - node.clientWidth;
+    setAtStart(node.scrollLeft <= EDGE);
+    setAtEnd(node.scrollLeft >= max - EDGE);
+  }, []);
+  // `atEnd` is not only the forward arrow's disabled state: below 640px, where
+  // no arrow is rendered, it is the only thing driving the scroll-fade.
+
+  // Also on mount: the first measurement can only happen once there is layout.
+  useEffect(sync, [sync]);
+
+  const page = (direction: 1 | -1) => {
+    const node = scroller.current;
+    if (!node) return;
+    // A page is what the reader can see, so the viewport is the step.
+    node.scrollBy({ left: direction * node.clientWidth, behavior: 'smooth' });
+  };
+
+  return (
+    <>
+      <div className={styles.top}>
+        {header}
+        {scrollable && (
+          <div className={styles.arrows}>
+            <button
+              type="button"
+              className={styles.arrow}
+              onClick={() => page(-1)}
+              disabled={atStart}
+              aria-label="Previous schools"
+            >
+              <Chevron direction="prev" />
+            </button>
+            <button
+              type="button"
+              className={styles.arrow}
+              onClick={() => page(1)}
+              disabled={atEnd}
+              aria-label="More schools"
+            >
+              <Chevron direction="next" />
+            </button>
+          </div>
+        )}
+      </div>
+
+      <ul
+        ref={scroller}
+        className={styles.scroller}
+        onScroll={sync}
+        data-at-end={atEnd}
+        {...(scrollable
+          ? { tabIndex: 0, role: 'group', 'aria-labelledby': labelledBy }
+          : {})}
+      >
+        {children}
+      </ul>
+    </>
+  );
+}
+
+function Chevron({ direction }: { direction: 'prev' | 'next' }) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <path d={direction === 'prev' ? 'M15 18l-6-6 6-6' : 'M9 18l6-6-6-6'} />
+    </svg>
+  );
+}

nextjs-app/components/school/SimilarSchoolsCompareBar.tsx

@@ -0,0 +1,59 @@
+'use client';
+
+/**
+ * The selection count and the one decisive action in the section.
+ *
+ * The CTA is a real link, not a handler: /compare already parses `urns` from
+ * the query string, so the hand-off needs no new compare plumbing. It counts
+ * this school plus whatever the reader ticked, because comparing a shortlist
+ * without the school they are looking at is not what they asked for.
+ */
+
+import Link from 'next/link';
+import { useComparisonContext } from '@/context/ComparisonContext';
+import type { SimilarSchool } from '@/lib/types';
+import styles from './SimilarSchools.module.css';
+
+export function SimilarSchoolsCompareBar({
+  thisUrn,
+  candidates,
+}: {
+  thisUrn: number;
+  candidates: SimilarSchool[];
+}) {
+  const { selectedSchools } = useComparisonContext();
+
+  // Only the schools this section offers, in the order the cards show them —
+  // the basket may hold schools picked up elsewhere on the site, and this bar
+  // speaks for this section.
+  const offered = candidates
+    .map((c) => c.urn)
+    .filter((urn) => selectedSchools.some((s) => s.urn === urn));
+
+  const count = offered.length;
+  const href = `/compare?urns=${[thisUrn, ...offered].join(',')}`;
+
+  return (
+    <div className={styles.footer}>
+      <p aria-live="polite">
+        <strong>
+          {count
+            ? `${count} school${count === 1 ? '' : 's'} selected`
+            : 'Compare side by side'}
+        </strong>
+        {count
+          ? 'This school is included automatically.'
+          : 'Add a school to compare it with this one.'}
+      </p>
+      {count ? (
+        <Link className={styles.compare} href={href}>
+          Compare {count + 1} schools →
+        </Link>
+      ) : (
+        <span className={styles.compare} aria-disabled="true">
+          Compare →
+        </span>
+      )}
+    </div>
+  );
+}

nextjs-app/components/school/SimilarSchoolsSection.tsx

@@ -0,0 +1,153 @@
+/**
+ * SimilarSchoolsSection — nearby schools of the same phase and a comparable
+ * intake. Server component; only the carousel, the compare bar and the
+ * add-to-compare button are client-side.
+ *
+ * The section is allowed to say exactly what the backend matched and no more.
+ * The lede only claims a similar intake when no card came from tier 3, and a
+ * card's chips list what that school actually shares rather than a match it
+ * did not earn.
+ *
+ * There is deliberately no "how these are chosen" panel: the method is already
+ * visible in the lede, the chips and the distances. The single caption line is
+ * not a method note — it is the one thing a card cannot self-correct.
+ */
+
+import Link from 'next/link';
+import type { SimilarSchool } from '@/lib/types';
+import { schoolUrl } from '@/lib/utils';
+import { AddToCompareButton } from './AddToCompareButton';
+import { SimilarSchoolsCarousel } from './SimilarSchoolsCarousel';
+import { SimilarSchoolsCompareBar } from './SimilarSchoolsCompareBar';
+import { Section } from './sectionShared';
+import styles from './SimilarSchools.module.css';
+
+const MINIMUM = 2;
+
+export function shouldRenderSimilar(similar?: SimilarSchool[] | null): boolean {
+  return (similar?.length ?? 0) >= MINIMUM;
+}
+
+/**
+ * What the lede calls the set of schools it is showing.
+ *
+ * Derived from the school's own GIAS phase rather than the template it renders
+ * with, because those disagree for "16 plus" (GIAS phase 6): a sixth-form
+ * college renders the primary template — computeSchoolFlags tests for the
+ * substring "secondary" — while the backend correctly matches it against the
+ * secondary group. Taking the noun from the template would print "Other primary
+ * schools near <sixth form college>" above a row of secondaries.
+ *
+ * A 16-plus school's candidates span the whole secondary group, so no single
+ * noun fits and it gets the honest general one.
+ */
+export function nearbyNoun(phase: string | null | undefined): string {
+  const text = (phase ?? '').trim().toLowerCase();
+  if (text === 'all-through') return 'all-through schools';
+  if (text === '16 plus') return 'schools and colleges';
+  if (text.includes('secondary')) return 'secondary schools';
+  if (text.includes('primary')) return 'primary schools';
+  return 'schools';
+}
+
+function metricLabel(key: string): string {
+  return key === 'attainment_8_score' ? 'Attainment 8' : 'Reading, writing & maths';
+}
+
+function formatMetric(value: number | null, key: string): string {
+  if (value == null) return 'Not published';
+  return key === 'attainment_8_score' ? value.toFixed(1) : `${Math.round(value)}%`;
+}
+
+export function SimilarSchoolsSection({
+  urn,
+  schoolName,
+  phase,
+  thisMetricValue,
+  similar,
+}: {
+  urn: number;
+  schoolName: string;
+  /** The school's own GIAS phase, not the template it renders with. */
+  phase: string | null | undefined;
+  thisMetricValue: number | null;
+  similar?: SimilarSchool[] | null;
+}) {
+  if (!shouldRenderSimilar(similar)) return null;
+  const schools = similar as SimilarSchool[];
+
+  // One card matched on phase alone, so the section may not claim the set
+  // shares an intake with this school.
+  const loosest = Math.max(...schools.map((s) => s.tier));
+  const metricKey = schools[0].metric_key;
+  const noun = nearbyNoun(phase);
+
+  return (
+    <Section id="similar">
+      <SimilarSchoolsCarousel
+        count={schools.length}
+        labelledBy="similar-schools-heading"
+        header={
+          <div>
+            <h2 id="similar-schools-heading" className={styles.heading}>
+              Similar schools nearby
+            </h2>
+            <p className={styles.lede}>
+              {loosest >= 3
+                ? `Other ${noun} near ${schoolName}.`
+                : `Other ${noun} near ${schoolName}, with a similar intake.`}
+            </p>
+          </div>
+        }
+      >
+        {schools.map((school) => (
+          <li key={school.urn} className={styles.school}>
+            <p className={styles.distance}>{school.distance_miles} miles away</p>
+            <h3 className={styles.name}>
+              <Link href={schoolUrl(school.urn, school.school_name)}>
+                {school.school_name}
+              </Link>
+            </h3>
+            <p className={styles.meta}>
+              {[school.school_type, school.age_range && `Ages ${school.age_range}`]
+                .filter(Boolean)
+                .join(' · ')}
+            </p>
+            <ul className={styles.shared}>
+              {school.shared.map((label) => (
+                <li key={label} className={school.tier >= 3 ? styles.chipLoose : styles.chip}>
+                  {label}
+                </li>
+              ))}
+            </ul>
+            <div className={styles.metric}>
+              <p
+                className={
+                  school.metric_value == null ? styles.valueAbsent : styles.value
+                }
+              >
+                {formatMetric(school.metric_value, school.metric_key)}
+              </p>
+              <p className={styles.metricLabel}>{metricLabel(school.metric_key)}</p>
+              {thisMetricValue != null && (
+                <p className={styles.metricRef}>
+                  {formatMetric(thisMetricValue, metricKey)} at this school
+                </p>
+              )}
+            </div>
+            <AddToCompareButton school={school} />
+          </li>
+        ))}
+      </SimilarSchoolsCarousel>
+
+      <SimilarSchoolsCompareBar thisUrn={urn} candidates={schools} />
+
+      {/* The one caveat the cards cannot make on their own: a reader who takes
+          "0.6 miles away" for the walk has been misled, and nothing else here
+          corrects that. */}
+      <p className={styles.caption}>
+        Distances are straight-line from this school, not road distance.
+      </p>
+    </Section>
+  );
+}

nextjs-app/lib/schoolSections.ts

@@ -128,6 +128,10 @@ export interface NavItemsInput {
    *  measure a postcode, so the nav must gate on them too or it will link to an
    *  anchor that was never rendered. */
   hasLocation?: boolean;
+  /** Whether the similar-schools section will render. Optional for the same
+   *  reason hasLocation is: the nav must never link to an anchor that was not
+   *  rendered, and absent has to mean "no section". */
+  hasSimilarSchools?: boolean;
   yearlyDataLength: number;
 }
 
@@ -142,7 +146,10 @@ export interface NavItemsInput {
  */
 export function buildNavItems(
   flags: SchoolFlags,
-  { ofsted, admissions, admissionDistance, hasLocation, yearlyDataLength }: NavItemsInput,
+  {
+    ofsted, admissions, admissionDistance, hasLocation,
+    hasSimilarSchools, yearlyDataLength,
+  }: NavItemsInput,
 ): NavItem[] {
   const navItems: NavItem[] = [];
   if (ofsted) navItems.push({ id: 'ofsted', label: 'Ofsted' });
@@ -161,6 +168,8 @@ export function buildNavItems(
   if (flags.hasSchoolLife) navItems.push({ id: 'school-life', label: 'School Life' });
   if (flags.hasDeprivation) navItems.push({ id: 'local-area', label: 'Local Area' });
   if (flags.hasFinance) navItems.push({ id: 'finances', label: 'Finances' });
+  // Last, because the section renders last — the scroll-spy reads this order.
+  if (hasSimilarSchools) navItems.push({ id: 'similar', label: 'Similar schools' });
   return navItems;
 }
 
@@ -239,7 +248,10 @@ export function computeSecondaryFlags({
  */
 export function buildSecondaryNavItems(
   flags: SecondaryFlags,
-  { ofsted, admissions, admissionDistance, hasLocation, yearlyDataLength }: NavItemsInput,
+  {
+    ofsted, admissions, admissionDistance, hasLocation,
+    hasSimilarSchools, yearlyDataLength,
+  }: NavItemsInput,
 ): NavItem[] {
   const navItems: NavItem[] = [];
   if (ofsted) navItems.push({ id: 'ofsted', label: 'Ofsted' });
@@ -257,5 +269,7 @@ export function buildSecondaryNavItems(
   if (yearlyDataLength > 1) navItems.push({ id: 'history', label: 'History' });
   if (flags.hasWellbeing) navItems.push({ id: 'wellbeing', label: 'Wellbeing' });
   if (flags.hasFinance) navItems.push({ id: 'finances', label: 'Finances' });
+  // Last, because the section renders last — the scroll-spy reads this order.
+  if (hasSimilarSchools) navItems.push({ id: 'similar', label: 'Similar schools' });
   return navItems;
 }

nextjs-app/lib/types.ts

@@ -346,6 +346,27 @@ export interface SchoolsResponse {
   };
 }
 
+/**
+ * A nearby school of the same phase and a comparable intake.
+ *
+ * `tier` is carried explicitly rather than inferred from `shared`, because it
+ * drives two separate decisions — whether the lede may claim a similar intake,
+ * and whether a chip renders as a fill or a muted outline — and inferring it
+ * from chip count would couple those decisions to the copy.
+ */
+export interface SimilarSchool {
+  urn: number;
+  school_name: string;
+  distance_miles: number;
+  school_type: string | null;
+  age_range: string | null;
+  shared: string[];
+  tier: number;
+  metric_value: number | null;
+  metric_key: string;
+  metric_year: number | null;
+}
+
 export interface SchoolDetailsResponse {
   school_info: School;
   /**
@@ -357,6 +378,14 @@ export interface SchoolDetailsResponse {
    * authority both fall below the publish threshold has nowhere to link.
    */
   places?: SchoolPlace[];
+  /**
+   * Up to six nearby schools of a comparable intake, nearest first.
+   *
+   * Optional for the same reason as `places`: a frontend deployed ahead of the
+   * API that serves this must render without it. Absent and empty mean the
+   * same thing here — no section.
+   */
+  similar_schools?: SimilarSchool[];
   yearly_data: SchoolResult[];
   absence_data: AbsenceData | null;
   // Supplementary data (null until Kestra populates)