school_compare/nextjs-app/components/EditorialSection.tsx

// Server component: pure markup, no client state.

import styles from './HomeView.module.css';

interface EditorialSectionProps {
  totalSchools: number | null;
  localAuthorityCount: number;
}

export function EditorialSection({ totalSchools, localAuthorityCount }: EditorialSectionProps) {
  return (
    <section className={styles.editorial}>
      <div className={styles.editorialGrid}>
        <div className={styles.editorialText}>
          <div className={styles.editorialKicker}>About school data</div>
          <h2 className={styles.editorialHeading}>Making England&apos;s school performance data actually readable</h2>
          <p>
            School performance data in England is rich but fragmented. The Department for Education and Ofsted
            publish Key Stage 2 SATs, GCSE attainment, inspection outcomes, progress scores, admissions figures
            and demographics — each in its own table, each with its own jargon.
          </p>
          <p>
            SchoolCompare brings it all into one place. Every school page shows performance against the national
            average, explains what the numbers mean, and lets you shortlist schools side by side. Built for
            parents, governors, journalists, and anyone who wants to understand a school without reading a
            full inspection report.
          </p>
        </div>
        <div className={styles.factbox}>
          <h3 className={styles.factboxHeading}>Coverage at a glance</h3>
          <div className={styles.factRow}>
            <span className={styles.factKey}>Schools covered</span>
            <span className={styles.factVal}>{totalSchools ? `${totalSchools.toLocaleString()}` : '24,000+'}</span>
          </div>
          <div className={styles.factRow}>
            <span className={styles.factKey}>Local authorities</span>
            <span className={styles.factVal}>{localAuthorityCount > 0 ? localAuthorityCount : 152}</span>
          </div>
          <div className={styles.factRow}>
            <span className={styles.factKey}>Phases</span>
            <span className={styles.factVal}>Primary &amp; Secondary</span>
          </div>
          <div className={styles.factRow}>
            <span className={styles.factKey}>Latest results year</span>
            <span className={styles.factVal}>2024/25</span>
          </div>
          <div className={styles.factRow}>
            <span className={styles.factKey}>Historical data</span>
            <span className={styles.factVal}>2016–2025</span>
          </div>
          <div className={styles.factRow}>
            <span className={styles.factKey}>Metrics per school</span>
            <span className={styles.factVal}>40+</span>
          </div>
        </div>
      </div>
    </section>
  );
}