import { PageTransition } from "@/components/PageTransition";
import { TopNav } from "@/components/TopNav";
import {
  GradeHeroBlock,
  ImpactKaleidoscopeBlock,
  ThreeJourneyPhasesBlock,
  CrossCuttingMirrorsBlock,
  AnnualFlowQuartersBlock,
  DivergeConvergeVizBlock,
  SquadRolesBlock,
  GradeBandEntrepreneurshipBlock,
  DeliverablesEvidenceBlock,
  DesignImpactSummitBlock,
  ClosingVisionBlock,
} from "@/components/page-blocks";

/**
 * Design to Impact page — composed entirely from reusable CMS page-blocks
 * (same architecture as Quarter 1 / PBEL Water flyer conversions).
 */
const PbelDesignToImpact = () => {
  return (
    <PageTransition>
      <TopNav />
      <div className="min-h-screen bg-background flex flex-col">
        <GradeHeroBlock
          content={{
            backLabel: "SPARK Dashboard",
            backHref: "/",
            layout: "brand",
            titleSize: "compact",
            logoAlt: "Orion",
            title: "Design to Impact",
            subtitle: "The Orion PBEL Framework — A Kaleidoscope of Inquiry, Design, and Impact",
            featureHighlights: [
              "Empowered Learning",
              "Human-Centered Design",
              "Beloved Community",
              "Real-World Impact",
            ],
            backgroundPattern: "rays",
            rayCount: 9,
          }}
        />
        <ImpactKaleidoscopeBlock />
        <ThreeJourneyPhasesBlock />
        <CrossCuttingMirrorsBlock />
        <AnnualFlowQuartersBlock />
        <DivergeConvergeVizBlock />
        <SquadRolesBlock />
        <GradeBandEntrepreneurshipBlock />
        <DeliverablesEvidenceBlock />
        <DesignImpactSummitBlock />
        <ClosingVisionBlock />
      </div>
    </PageTransition>
  );
};

export default PbelDesignToImpact;