feat(compare): limit the basket to five per phase, not five overall

A parent choosing a primary and a secondary school at once hit the old
cap of five total. The basket now holds up to five primary and five
secondary schools (ten in all), matching the compare page's phase tabs.

Schools that could land in either tab (all-through, special schools with
phase "Not applicable", unknown phase) count against both groups, so no
tab ever exceeds the five-slot chart palette and point styles.

- lib/compareLogic: compareGroups, fullGroupFor, fitToGroupLimits
- search modal disables only the full group and says which one
- rankings rows carry the phase of the tab they are ranked under
- shared ?urns= links are trimmed per group
- copy: compare metadata, homepage value prop, How it works card now
  name primary and secondary schools (also better for search intent)

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

nextjs-app/components/SchoolSearchModal.tsx

@@ -11,6 +11,7 @@ import { useComparison } from "@/hooks/useComparison";
 import { debounce } from "@/lib/utils";
 import { fetchSchools } from "@/lib/api";
 import { track } from "@/lib/analytics";
+import { MAX_PER_GROUP } from "@/lib/compareLogic";
 import type { School } from "@/lib/types";
 import styles from "./SchoolSearchModal.module.css";
 
@@ -20,7 +21,7 @@ interface SchoolSearchModalProps {
 }
 
 export function SchoolSearchModal({ isOpen, onClose }: SchoolSearchModalProps) {
-  const { addSchool, selectedSchools, canAddMore } = useComparison();
+  const { addSchool, selectedSchools, fullGroupFor } = useComparison();
   const [searchTerm, setSearchTerm] = useState("");
   const [results, setResults] = useState<School[]>([]);
   const [isSearching, setIsSearching] = useState(false);
@@ -73,6 +74,19 @@ export function SchoolSearchModal({ isOpen, onClose }: SchoolSearchModalProps) {
     return selectedSchools.some((s) => s.urn === urn);
   };
 
+  // Limits apply per phase group, so a full primary list must not stop a
+  // parent adding secondary schools.
+  const primaryFull = fullGroupFor({ phase: "Primary" }) !== null;
+  const secondaryFull = fullGroupFor({ phase: "Secondary" }) !== null;
+  const limitWarning =
+    primaryFull && secondaryFull
+      ? `You're comparing ${MAX_PER_GROUP} primary and ${MAX_PER_GROUP} secondary schools, the most at once. Remove a school to add another.`
+      : primaryFull
+        ? `You're comparing ${MAX_PER_GROUP} primary schools, the most at once. You can still add secondary schools.`
+        : secondaryFull
+          ? `You're comparing ${MAX_PER_GROUP} secondary schools, the most at once. You can still add primary schools.`
+          : null;
+
   const handleClose = () => {
     setSearchTerm("");
     setResults([]);
@@ -83,10 +97,8 @@ export function SchoolSearchModal({ isOpen, onClose }: SchoolSearchModalProps) {
   return (
     <Modal isOpen={isOpen} onClose={handleClose} title="Add School to Comparison">
       <div className={styles.modalContent}>
-        {!canAddMore && (
-          <div className={styles.warning}>
-            Maximum 5 schools can be compared. Remove a school to add another.
-          </div>
+        {limitWarning && (
+          <div className={styles.warning}>{limitWarning}</div>
         )}
 
         {/* Search Input */}
@@ -112,6 +124,7 @@ export function SchoolSearchModal({ isOpen, onClose }: SchoolSearchModalProps) {
 
           {results.map((school) => {
             const alreadySelected = isSchoolSelected(school.urn);
+            const fullGroup = alreadySelected ? null : fullGroupFor(school);
 
             return (
               <div key={school.urn} className={styles.resultItem}>
@@ -126,12 +139,16 @@ export function SchoolSearchModal({ isOpen, onClose }: SchoolSearchModalProps) {
                 </div>
                 <button
                   onClick={() => handleAddSchool(school)}
-                  disabled={alreadySelected || !canAddMore}
+                  disabled={alreadySelected || fullGroup !== null}
                   className={`${styles.resultButton} ${
                     alreadySelected ? "btn btn-active" : "btn btn-secondary"
                   }`}
                 >
-                  {alreadySelected ? "✓ Comparing" : "+ Compare"}
+                  {alreadySelected
+                    ? "✓ Comparing"
+                    : fullGroup
+                      ? `${fullGroup === "primary" ? "Primary" : "Secondary"} full`
+                      : "+ Compare"}
                 </button>
               </div>
             );