school_compare/nextjs-app/components/HowItWorksSection.tsx

// Server component: pure markup, no client state.
// Rendered into HomeView via a slot prop so its JSX doesn't bloat the
// HomeView client bundle.

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

export function HowItWorksSection() {
  // "exc" is the school's above-expected result. DfE names this differently
  // by subject: "higher standard" for the reading and maths tests, "greater
  // depth" for teacher-assessed writing. "nat" is the national expected %.
  const miniCascade = [
    { subj: 'Reading', exp: 96, exc: 44, nat: 75, excLabel: 'Higher std' },
    { subj: 'Writing', exp: 81, exc: 26, nat: 72, excLabel: 'Greater depth' },
    { subj: 'Maths', exp: 85, exc: 41, nat: 74, excLabel: 'Higher std' },
  ];
  const compareRows = [
    { label: 'Reading, Writing & Maths', a: '70%', b: '64%', aHi: true },
    { label: 'Higher standard (RWM)', a: '13%', b: '6%', aHi: true },
    { label: 'Ofsted', a: 'Outstanding', b: 'Good', aHi: true },
  ];
  // Report card (Ofsted's framework from Nov 2025): one rating per area of
  // school life on a five-point scale, plus a stand-alone safeguarding outcome.
  const reportCard: Array<{ area: string; grade: string; good: boolean }> = [
    { area: 'Achievement', grade: 'Strong', good: true },
    { area: 'Curriculum & teaching', grade: 'Expected standard', good: false },
    { area: 'Attendance & behaviour', grade: 'Strong', good: true },
    { area: 'Safeguarding', grade: 'Met', good: true },
  ];

  return (
    <section className={styles.howItWorks}>
      <div className={styles.hiwHeader}>
        <h2 className={styles.hiwHeading}>What you&apos;ll see on every school</h2>
        <span className={styles.hiwSub}>Primary or secondary — the page adapts to the phase</span>
      </div>
      <div className={styles.hiwGrid}>
        {/* Card 1 — Performance */}
        <div className={styles.hiwCard}>
          <div className={styles.hiwVisual}>
            <div className={styles.hiwPhaseBlock}>
              <div className={styles.hiwPhaseLabel}>Primary · Year 6 · <strong>Key Stage 2 SATs</strong></div>
              <div className={styles.miniCascade}>
                {miniCascade.map(({ subj, exp, exc, nat, excLabel }) => (
                  <div key={subj} className={styles.miniCascadeCol}>
                    <div className={styles.miniSubj}>{subj}</div>
                    <div className={styles.miniRowHead}><span>Expected</span><strong>{exp}%</strong></div>
                    <div className={styles.miniTrack}>
                      <div className={styles.miniNatPill} style={{ left: `${nat}%` }}>{nat}%</div>
                      <div className={styles.miniBarExp} style={{ width: `${exp}%` }} />
                    </div>
                    <div className={styles.miniRowHead}><span>{excLabel}</span><strong>{exc}%</strong></div>
                    <div className={styles.miniTrack}>
                      <div className={styles.miniBarExc} style={{ width: `${exc}%` }} />
                    </div>
                  </div>
                ))}
              </div>
            </div>
            <div className={styles.hiwPhaseBlock}>
              <div className={styles.hiwPhaseLabel}>Secondary · Year 11 · <strong>GCSE Attainment 8</strong></div>
              <div className={styles.att8Row}>
                <div className={styles.att8BarWrap}>
                  <div className={styles.att8BarHead}><span>This school</span><span>National avg 45.9</span></div>
                  <div className={styles.att8Track}>
                    <div className={styles.att8Fill} style={{ width: '68%' }} />
                    <div className={styles.att8NatLine} style={{ left: '57%' }} />
                  </div>
                </div>
                <div className={styles.att8Score}>
                  <div className={styles.att8Value}>54.8</div>
                  <div className={styles.att8Delta}>+8.9 vs national</div>
                </div>
              </div>
            </div>
          </div>
          <div className={styles.hiwCardBody}>
            <div className={styles.hiwStep}>Performance</div>
            <div className={styles.hiwTitle}>Results against the national average</div>
            <p className={styles.hiwDesc}>For primary schools, each subject&apos;s Expected and Exceeding percentages side by side. For secondary schools, GCSE Attainment 8 with the national benchmark overlaid.</p>
          </div>
        </div>

        {/* Card 2 — Ofsted */}
        <div className={styles.hiwCard}>
          <div className={styles.hiwVisual}>
            <div className={styles.ofstedPreview}>
              <div className={styles.ofstedHead}>
                <span className={styles.ofstedBullet} />
                <span className={styles.ofstedTitle}>Latest Ofsted inspection</span>
              </div>
              <span className={styles.ofstedFramework}>Report card · five-point scale</span>
              <div className={styles.rcList}>
                {reportCard.map(({ area, grade, good }) => (
                  <div key={area} className={styles.rcRow}>
                    <span className={styles.rcArea}>{area}</span>
                    <span className={`${styles.rcChip} ${good ? styles.rcChipGood : styles.rcChipNeutral}`}>{grade}</span>
                  </div>
                ))}
              </div>
              <div className={styles.ofstedMeta}>Full inspection · March 2026</div>
            </div>
          </div>
          <div className={styles.hiwCardBody}>
            <div className={styles.hiwStep}>Judgement</div>
            <div className={styles.hiwTitle}>Ofsted at a glance</div>
            <p className={styles.hiwDesc}>Since November 2025, Ofsted rates each area of school life on a five-point scale rather than one overall word. We show every area and the inspection date — and, for schools not yet reinspected, the older overall grade they still carry.</p>
          </div>
        </div>

        {/* Card 3 — Compare */}
        <div className={styles.hiwCard}>
          <div className={styles.hiwVisual}>
            <div className={styles.comparePreview}>
              <div className={styles.compareHead}>
                <div className={`${styles.compareHeadCell} ${styles.compareHeadLabel}`}>Metric</div>
                <div className={styles.compareHeadCell}>Our Lady<br />Queen of Heaven</div>
                <div className={styles.compareHeadCell}>St Mary&apos;s<br />Catholic Primary</div>
              </div>
              {compareRows.map(({ label, a, b, aHi }) => (
                <div key={label} className={styles.compareRow}>
                  <span className={styles.compareRowLabel}>{label}</span>
                  <span className={`${styles.compareRowVal} ${aHi ? styles.compareRowValHi : ''}`}>{a}</span>
                  <span className={styles.compareRowVal}>{b}</span>
                </div>
              ))}
              <div className={styles.compareFoot}>+ pin up to 5 schools</div>
            </div>
          </div>
          <div className={styles.hiwCardBody}>
            <div className={styles.hiwStep}>Compare</div>
            <div className={styles.hiwTitle}>Side-by-side shortlists</div>
            <p className={styles.hiwDesc}>Pin up to five schools and every metric aligns in the same columns — works for primary and secondary alike.</p>
          </div>
        </div>
      </div>
    </section>
  );
}