// 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 UK school performance data actually readable</h2>
          <p>
            School performance data in England is rich but fragmented. The Department for Education publishes
            Key Stage 2 SATs, GCSE attainment, Ofsted 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
            40-page 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>
  );
}