import type { Metadata } from "next";

import Link from "next/link";

import { Suspense } from "react";

import { PageHeader } from "@/components/ui";

import { CalendarBrowser } from "@/components/calendar-browser";

export const revalidate = 300;

export const metadata: Metadata = {

  title: "Calendar",

  description:

    "A month grid of when laws take effect, bills become law, and votes happen. Each day links to its official source.",

};

export default function CalendarPage() {

  return (

    <div

      className="mx-auto w-full max-w-[860px] px-6 sm:px-8"

      style={{

        paddingTop: "clamp(32px, 6vw, 56px)",

        paddingBottom: "clamp(48px, 8vw, 80px)",

      }}

    >

      <Link

        href="/"

        className="focus-ring tap no-underline hover:underline"

        style={{

          display: "inline-flex",

          alignItems: "center",

          gap: "8px",

          fontFamily: "var(--font-mono), ui-monospace, monospace",

          fontSize: "13px",

          letterSpacing: "0.08em",

          color: "var(--dk-signal)",

          marginBottom: "32px",

        }}

      >

        ← Home

      </Link>

      <PageHeader

        eyebrow="Calendar · when it happens"

        title="What takes effect when"

        lead="A month at a glance. Each day lists the laws that take effect, bills that became law, votes, and floor action. Pick a day to read its events, each sealed to its official source."

      />

      <Suspense fallback={<CalendarSkeleton />}>

        <CalendarBrowser />

      </Suspense>

      <div className="mt-12 border-t border-line pt-6">

        <p className="label text-ash-2">

          Dates parsed from congress.gov, federalregister.gov, clerk.house.gov,

          and senate.gov. Each event links to its source. No commentary appears here.

        </p>

      </div>

    </div>

  );

}

function CalendarSkeleton() {

  return (

    <div className="mt-8 space-y-6">

      <div className="h-12 w-full animate-pulse rounded-sm bg-graphite" />

      <div className="grid gap-6 lg:grid-cols-[1.5fr_1fr]">

        <div className="hidden h-[28rem] animate-pulse rounded-sm bg-graphite md:block" />

        <div className="h-[28rem] animate-pulse rounded-sm bg-graphite" />

      </div>

    </div>

  );

}