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() {
  const miniCascade = [
    { subj: 'Reading', exp: 96, exc: 73, nat: 75 },
    { subj: 'Writing', exp: 81, exc: 15, nat: 72 },
    { subj: 'Maths', exp: 85, exc: 47, nat: 74 },
  ];
  const compareRows = [
    { label: 'Reading, Writing & Maths', a: '70%', b: '64%', aHi: true },
    { label: 'Ofsted', a: 'Outstanding', b: 'Good', aHi: true },
    { label: 'Reading progress', a: '+2.1', b: '+0.4', aHi: 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 }) => (
                  <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>Exceeding</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 50.2</span></div>
                  <div className={styles.att8Track}>
                    <div className={styles.att8Fill} style={{ width: '62%' }} />
                    <div className={styles.att8NatLine} style={{ left: '50%' }} />
                  </div>
                </div>
                <div className={styles.att8Score}>
                  <div className={styles.att8Value}>62.4</div>
                  <div className={styles.att8Delta}>+12.2 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.ofstedBadge}>OUTSTANDING</span>
              <div className={styles.ofstedVerdict}>Rated <em>Outstanding</em> at last inspection.</div>
              <div className={styles.ofstedMeta}>Full inspection · March 2024</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}>Current grade, inspection date, and a plain-English headline — without opening a 40-page report.</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>
  );
}