import { jsxs, jsx, Fragment } from "react/jsx-runtime";
import { R as Route, a as catQuery, c as categoryName, C as CATEGORIES } from "./router-CEaBCHfX.js";
import { Link } from "@tanstack/react-router";
import { useSuspenseQuery } from "@tanstack/react-query";
import { B as BreakingTicker, A as ArticleCard, N as Newsletter, a as AdSlot } from "./AdSlot-BPsWlpHM.js";
import { S as SiteHeader, a as SiteFooter } from "./SiteFooter-B6xyoPMr.js";
import "react";
import "sonner";
import "./client-CJCZGN4z.js";
import "@supabase/supabase-js";
import "lucide-react";
import "./use-auth-DoD1gvcu.js";
function CategoryPage() {
  const {
    slug
  } = Route.useParams();
  const {
    data
  } = useSuspenseQuery(catQuery(slug));
  const items = data.items;
  const [lead, ...rest] = items;
  return /* @__PURE__ */ jsxs("div", { className: "min-h-screen bg-background text-foreground", children: [
    /* @__PURE__ */ jsx(BreakingTicker, {}),
    /* @__PURE__ */ jsx(SiteHeader, {}),
    /* @__PURE__ */ jsxs("main", { className: "container mx-auto px-4 py-10", children: [
      /* @__PURE__ */ jsxs("div", { className: "border-b-4 border-brand pb-4 mb-10", children: [
        /* @__PURE__ */ jsx("p", { className: "text-[11px] uppercase tracking-widest text-brand-accent font-bold mb-2", children: "Section" }),
        /* @__PURE__ */ jsx("h1", { className: "font-serif text-4xl md:text-5xl font-black italic", children: categoryName(slug) })
      ] }),
      /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-3 gap-12", children: [
        /* @__PURE__ */ jsxs("div", { className: "lg:col-span-2 space-y-10", children: [
          items.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground py-12 text-center", children: "No stories in this section yet. Check back soon." }) : /* @__PURE__ */ jsxs(Fragment, { children: [
            lead && /* @__PURE__ */ jsx(ArticleCard, { article: lead }),
            /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-10", children: rest.map((a) => /* @__PURE__ */ jsx(ArticleCard, { article: a }, a.slug)) })
          ] }),
          /* @__PURE__ */ jsx("div", { className: "py-8", children: /* @__PURE__ */ jsx(Newsletter, {}) })
        ] }),
        /* @__PURE__ */ jsxs("aside", { className: "space-y-8", children: [
          /* @__PURE__ */ jsx(AdSlot, { height: "h-80" }),
          /* @__PURE__ */ jsxs("div", { children: [
            /* @__PURE__ */ jsx("h3", { className: "font-serif text-xl font-black italic mb-6", children: "More Sections" }),
            /* @__PURE__ */ jsx("ul", { className: "space-y-2", children: CATEGORIES.filter((c) => c.slug !== slug).map((c) => /* @__PURE__ */ jsx("li", { className: "border-b border-border pb-2 text-sm font-bold uppercase tracking-wide hover:text-brand-accent", children: /* @__PURE__ */ jsx(Link, { to: "/category/$slug", params: {
              slug: c.slug
            }, children: c.name }) }, c.slug)) })
          ] }),
          /* @__PURE__ */ jsx(AdSlot, { height: "h-64" })
        ] })
      ] })
    ] }),
    /* @__PURE__ */ jsx(SiteFooter, {})
  ] });
}
export {
  CategoryPage as component
};
