---
/**
 * `/progress`: the live campaign dashboard — five LeetCode-style React cards
 * over GET /api/stats (lib/stats.ts), hydrated on load. A custom page like
 * `/changelog` and `/appendix`, linked from the header's `navigation.tabs`,
 * so it enters neither the sidebar tree nor prev/next. The cards live in
 * components/progress/, not islands/: they are imported here, never used from
 * MDX, so Blume has no reason to register them as global MDX components.
 */
import PageLayout from "blume/components/layout/PageLayout.astro";
import data from "blume:data";
import RecentSolves from "../components/progress/RecentSolves";
import SolvedRing from "../components/progress/SolvedRing";
import SubmissionChart from "../components/progress/SubmissionChart";
import SubmissionHeatmap from "../components/progress/SubmissionHeatmap";
import TopicBubbles from "../components/progress/TopicBubbles";

const { config } = data;
const description =
  "Live campaign progress — solved by difficulty, recent attempts, the year by difficulty, topic coverage, and the most recently solved problems, fetched from the SRS Worker.";
---

<PageLayout
  site={{ title: config.title, description: config.description }}
  logo={config.logo}
  favicon={config.favicon}
  banner={config.banner}
  analytics={config.analytics}
  navigation={data.navigation}
  fontCssVars={data.fontCssVars}
  themeMode={config.theme.mode}
  searchEnabled={config.search.enabled}
  siteUrl={config.site}
  ogEnabled={config.og.enabled}
  structuredDataEnabled={config.structuredData}
  page={{ title: `Progress - ${config.title}`, description, route: "/progress" }}
>
  <section class="mx-auto w-full max-w-5xl px-6 py-16">
    <h1 class="m-0 text-4xl font-semibold tracking-tight text-foreground">Progress</h1>
    <p class="mt-3 max-w-3xl text-lg text-muted-foreground">{description}</p>

    <div class="mt-10 flex flex-col gap-6">
      <SolvedRing client:load />
      <div class="grid gap-6 md:grid-cols-2">
        <SubmissionHeatmap client:load />
        <SubmissionChart client:load />
      </div>
      <TopicBubbles client:load />
      <RecentSolves client:load />
    </div>
  </section>
</PageLayout>