import { useParams } from "react-router-dom";
import { PageTransition } from "@/components/PageTransition";
import {
  GradeHeroBlock,
  SteeringCommitteesGridBlock,
} from "@/components/page-blocks";

const gradeLabels: Record<string, string> = {
  kg: "Kindergarten", "1": "Grade 1", "2": "Grade 2", "3": "Grade 3", "4": "Grade 4", "5": "Grade 5",
};

const SteeringCommitteesPage = () => {
  const { grade } = useParams<{ grade: string }>();
  const gradeKey = grade || "kg";
  const gradeLabel = gradeLabels[gradeKey] || `Grade ${gradeKey}`;

  return (
    <PageTransition>
      <div className="min-h-full bg-background">
        <GradeHeroBlock
          content={{
            layout: "detail",
            showLogo: false,
            backLabel: "Back to Kaleidoscope",
            backHref: `/grade/${gradeKey}`,
            mainIcon: "🧭",
            title: "Steering Committees",
            subtitle: gradeLabel,
            description: "Nine committees that empower student voice, foster leadership, and drive meaningful change across Orion.",
            backgroundPattern: "radial",
            accentColor: "mist",
            patternPosition: "60% 30%",
          }}
        />

        <SteeringCommitteesGridBlock />

      </div>
    </PageTransition>
  );
};

export default SteeringCommitteesPage;