feat(admissions): add sticky left-rail in-page nav, primary first

Rail pins alongside the content with scroll-spy highlighting the current
section (Primary, Secondary, Tips). Collapses to a sticky top pill bar
on narrow screens. Primary section now precedes Secondary.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

nextjs-app/components/AdmissionsView.tsx

@@ -144,15 +144,79 @@ const TIPS: Tip[] = [
 
 /* ─── Component ────────────────────────────────────────── */
 
+const NAV_ITEMS = [
+  { id: 'primary',   label: 'Primary' },
+  { id: 'secondary', label: 'Secondary' },
+  { id: 'tips',      label: 'Tips' },
+] as const;
+
+type NavId = typeof NAV_ITEMS[number]['id'];
+
 export function AdmissionsView() {
   const [chipDays, setChipDays] = useState<(number | null)[]>(CHIPS.map(() => null));
+  const [activeId, setActiveId] = useState<NavId>('primary');
 
   useEffect(() => {
     setChipDays(CHIPS.map(c => daysUntil(c.month, c.day)));
   }, []);
 
+  useEffect(() => {
+    const sections = NAV_ITEMS
+      .map(item => document.getElementById(item.id))
+      .filter((el): el is HTMLElement => el !== null);
+
+    if (sections.length === 0) return;
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const visible = entries
+          .filter(e => e.isIntersecting)
+          .sort((a, b) => b.intersectionRatio - a.intersectionRatio);
+        if (visible[0]) setActiveId(visible[0].target.id as NavId);
+      },
+      { rootMargin: '-30% 0px -55% 0px', threshold: [0, 0.25, 0.5, 0.75, 1] },
+    );
+
+    sections.forEach(s => observer.observe(s));
+    return () => observer.disconnect();
+  }, []);
+
+  const handleNavClick = (e: React.MouseEvent<HTMLAnchorElement>, id: NavId) => {
+    e.preventDefault();
+    const el = document.getElementById(id);
+    if (!el) return;
+    const top = el.getBoundingClientRect().top + window.scrollY - 16;
+    window.scrollTo({ top, behavior: 'smooth' });
+    setActiveId(id);
+  };
+
   return (
-    <div className={styles.page}>
+    <div className={styles.shell}>
+
+      {/* In-page nav — sticky left rail on desktop, sticky top pills on mobile */}
+      <aside className={styles.nav} aria-label="On this page">
+        <div className={styles.navLabel}>On this page</div>
+        <ul className={styles.navList}>
+          {NAV_ITEMS.map(item => {
+            const isActive = activeId === item.id;
+            return (
+              <li key={item.id}>
+                <a
+                  href={`#${item.id}`}
+                  onClick={(e) => handleNavClick(e, item.id)}
+                  className={[styles.navLink, isActive ? styles.navLinkActive : ''].filter(Boolean).join(' ')}
+                  aria-current={isActive ? 'true' : undefined}
+                >
+                  <span className={styles.navDot} aria-hidden="true" />
+                  <span>{item.label}</span>
+                </a>
+              </li>
+            );
+          })}
+        </ul>
+      </aside>
+
+      <div className={styles.page}>
 
       {/* Hero */}
       <section className={styles.hero}>
@@ -198,45 +262,8 @@ export function AdmissionsView() {
         </div>
       </section>
 
-      {/* Secondary track */}
-      <section className={styles.track}>
-        <div className={styles.trackHeader}>
-          <div className={styles.trackHeaderLeft}>
-            <span className={styles.trackKicker}>Year 7 entry</span>
-            <h2 className={styles.trackTitle}>Secondary school admissions</h2>
-            <p className={styles.trackSub}>For children starting secondary school (Year 7) in September. Applications are submitted in the autumn of Year 6.</p>
-          </div>
-          <div className={styles.trackDates}>
-            <div className={styles.trackDateRow}>
-              <span className={styles.trackDateLabel}>Deadline</span>
-              <span className={styles.trackDateVal}>{fmtDate(10, 31)}</span>
-            </div>
-            <div className={styles.trackDateRow}>
-              <span className={styles.trackDateLabel}>Offer Day</span>
-              <span className={styles.trackDateVal}>{fmtDate(3, 1)}</span>
-            </div>
-          </div>
-        </div>
-
-        <ol className={styles.timeline}>
-          {SECONDARY_STEPS.map((step, i) => (
-            <li key={i} className={[styles.step, step.highlight === 'deadline' ? styles.stepDeadline : step.highlight === 'offer' ? styles.stepOffer : ''].filter(Boolean).join(' ')}>
-              <div className={styles.stepDotCol}>
-                <div className={styles.stepDot} />
-                {i < SECONDARY_STEPS.length - 1 && <div className={styles.stepLine} />}
-              </div>
-              <div className={styles.stepContent}>
-                {step.date && <div className={styles.stepDate}>{step.date}</div>}
-                <div className={styles.stepTitle}>{step.title}</div>
-                <p className={styles.stepBody}>{step.body}</p>
-              </div>
-            </li>
-          ))}
-        </ol>
-      </section>
-
       {/* Primary track */}
-      <section className={styles.track}>
+      <section id="primary" className={styles.track} style={{ scrollMarginTop: '1rem' }}>
         <div className={styles.trackHeader}>
           <div className={styles.trackHeaderLeft}>
             <span className={styles.trackKicker}>Reception entry</span>
@@ -272,8 +299,45 @@ export function AdmissionsView() {
         </ol>
       </section>
 
+      {/* Secondary track */}
+      <section id="secondary" className={styles.track} style={{ scrollMarginTop: '1rem' }}>
+        <div className={styles.trackHeader}>
+          <div className={styles.trackHeaderLeft}>
+            <span className={styles.trackKicker}>Year 7 entry</span>
+            <h2 className={styles.trackTitle}>Secondary school admissions</h2>
+            <p className={styles.trackSub}>For children starting secondary school (Year 7) in September. Applications are submitted in the autumn of Year 6.</p>
+          </div>
+          <div className={styles.trackDates}>
+            <div className={styles.trackDateRow}>
+              <span className={styles.trackDateLabel}>Deadline</span>
+              <span className={styles.trackDateVal}>{fmtDate(10, 31)}</span>
+            </div>
+            <div className={styles.trackDateRow}>
+              <span className={styles.trackDateLabel}>Offer Day</span>
+              <span className={styles.trackDateVal}>{fmtDate(3, 1)}</span>
+            </div>
+          </div>
+        </div>
+
+        <ol className={styles.timeline}>
+          {SECONDARY_STEPS.map((step, i) => (
+            <li key={i} className={[styles.step, step.highlight === 'deadline' ? styles.stepDeadline : step.highlight === 'offer' ? styles.stepOffer : ''].filter(Boolean).join(' ')}>
+              <div className={styles.stepDotCol}>
+                <div className={styles.stepDot} />
+                {i < SECONDARY_STEPS.length - 1 && <div className={styles.stepLine} />}
+              </div>
+              <div className={styles.stepContent}>
+                {step.date && <div className={styles.stepDate}>{step.date}</div>}
+                <div className={styles.stepTitle}>{step.title}</div>
+                <p className={styles.stepBody}>{step.body}</p>
+              </div>
+            </li>
+          ))}
+        </ol>
+      </section>
+
       {/* Tips */}
-      <section className={styles.tips}>
+      <section id="tips" className={styles.tips} style={{ scrollMarginTop: '1rem' }}>
         <h2 className={styles.tipsHeading}>Three things most parents get wrong</h2>
         <div className={styles.tipsGrid}>
           {TIPS.map((tip, i) => (
@@ -286,6 +350,7 @@ export function AdmissionsView() {
         </div>
       </section>
 
+      </div>
     </div>
   );
 }