school_compare/nextjs-app/components/places/PlaceView.tsx

/**
 * One place page, shared by all four families.
 *
 * They differ in what fills the registry, not in what the page shows, so a
 * second component would be a second place to forget the same change.
 *
 * The local-versus-England comparison is the reason this page is not a list:
 * it is the one number a parent cannot get by reading the schools one by one,
 * and it is what keeps the page from reading as a name dropped into a
 * template.
 */
import Link from 'next/link';
import type { PlaceDetail, PlaceSummary } from '@/lib/places';
import { placeUrl, authoritySlug } from '@/lib/places';
import { schoolUrl } from '@/lib/utils';
import { absoluteUrl } from '@/lib/site';
import styles from './PlaceView.module.css';

interface Props {
  detail: PlaceDetail;
  phase?: 'primary' | 'secondary';
  englandAverage: number | null;
  /** Nearby places, so the page links onward instead of dead-ending. */
  neighbours: PlaceSummary[];
}

// Ofsted grades in the order they are reported.
const OFSTED_LABELS: Array<[number, string]> = [
  [1, 'Outstanding'], [2, 'Good'],
  [3, 'Requires improvement'], [4, 'Inadequate'],
];

export function PlaceView({ detail, phase, englandAverage, neighbours }: Props) {
  const { place, schools, averages } = detail;
  const metric = phase === 'secondary' ? 'attainment_8_score' : 'rwm_expected_pct';
  const local = averages[metric];
  const phaseWord = phase === 'secondary' ? 'Secondary schools'
    : phase === 'primary' ? 'Primary schools' : 'Schools';
  const graded = OFSTED_LABELS
    .map(([grade, label]) => [label, schools.filter((s) => s.ofsted_grade === grade).length] as const)
    .filter(([, n]) => n > 0);

  // ItemList tells Google this page is a ranked set rather than prose;
  // BreadcrumbList puts the place in a hierarchy. Capped at 20 because that
  // is what the page shows above the fold and what the markup should mirror.
  const jsonLd = {
    '@context': 'https://schema.org',
    '@graph': [
      {
        '@type': 'ItemList',
        name: `${phaseWord} in ${place.name}`,
        numberOfItems: schools.length,
        itemListElement: schools.slice(0, 20).map((s, i) => ({
          '@type': 'ListItem',
          position: i + 1,
          url: absoluteUrl(schoolUrl(s.urn, s.school_name)),
          name: s.school_name,
        })),
      },
      {
        '@type': 'BreadcrumbList',
        itemListElement: [
          { '@type': 'ListItem', position: 1, name: 'Schools',
            item: absoluteUrl('/') },
          { '@type': 'ListItem', position: 2, name: place.name },
        ],
      },
    ],
  };

  return (
    <div className={styles.container}>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
      />
      <header className={styles.header}>
        <h1>{phaseWord} in {place.name}</h1>
        <p className={styles.summary}>
          {place.count} schools
          {place.parent_authority && (
            <>
              {' · '}
              <Link href={`/schools/authority/${authoritySlug(place.parent_authority)}`}>
                {place.parent_authority}
              </Link>
            </>
          )}
        </p>
      </header>

      {local != null && englandAverage != null && (
        <p className={styles.compare} data-testid="local-vs-england">
          {place.name} averages <strong>{Math.round(local)}</strong> against{' '}
          <strong>{Math.round(englandAverage)}</strong> across England.
        </p>
      )}

      {graded.length > 0 && (
        <ul className={styles.ofsted} data-testid="ofsted-distribution">
          {graded.map(([label, n]) => (
            <li key={label}>{label}: <strong>{n}</strong></li>
          ))}
        </ul>
      )}

      <div className={styles.tableWrap}>
        <table className={styles.table}>
          <thead>
            <tr>
              <th>School</th>
              <th>{phase === 'secondary' ? 'Attainment 8' : 'RWM expected'}</th>
            </tr>
          </thead>
          <tbody>
            {schools.map((s) => (
              <tr key={s.urn}>
                <td>
                  <Link href={schoolUrl(s.urn, s.school_name)}>{s.school_name}</Link>
                </td>
                <td className={styles.num}>
                  {s[metric] == null ? '—' : Math.round(Number(s[metric]))}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      {neighbours.length > 0 && (
        <nav className={styles.neighbours} aria-label="Nearby places">
          <h2>Nearby</h2>
          <ul>
            {neighbours.map((n) => (
              <li key={n.kind + n.slug}>
                <Link href={placeUrl(n.kind, n.slug)}>{n.name}</Link>
              </li>
            ))}
          </ul>
        </nav>
      )}
    </div>
  );
}