import { jsxs, jsx, Fragment } from "react/jsx-runtime";
import { b as Route, d as articleQuery, c as categoryName, t as timeAgo, r as resolveImage, C as CATEGORIES } from "./router-CEaBCHfX.js";
import { Link } from "@tanstack/react-router";
import { useSuspenseQuery } from "@tanstack/react-query";
import { B as BreakingTicker, N as Newsletter, A as ArticleCard, a as AdSlot } from "./AdSlot-BPsWlpHM.js";
import { S as SiteHeader, a as SiteFooter } from "./SiteFooter-B6xyoPMr.js";
import { Heart, MessageCircle } from "lucide-react";
import "react";
import "sonner";
import "./client-CJCZGN4z.js";
import "@supabase/supabase-js";
import "./use-auth-DoD1gvcu.js";
function ArticlePage() {
  const {
    slug
  } = Route.useParams();
  const {
    data
  } = useSuspenseQuery(articleQuery(slug));
  const article = data.article;
  const related = data.related;
  return /* @__PURE__ */ jsxs("div", { className: "min-h-screen bg-background text-foreground", children: [
    /* @__PURE__ */ jsx(BreakingTicker, {}),
    /* @__PURE__ */ jsx(SiteHeader, {}),
    /* @__PURE__ */ jsxs("article", { className: "container mx-auto px-4 py-10 grid grid-cols-1 lg:grid-cols-12 gap-12", children: [
      /* @__PURE__ */ jsxs("div", { className: "lg:col-span-8 lg:col-start-2 max-w-3xl", children: [
        /* @__PURE__ */ jsx(Link, { to: "/category/$slug", params: {
          slug: article.category
        }, className: "text-brand-accent font-bold text-xs uppercase tracking-widest", children: categoryName(article.category) }),
        /* @__PURE__ */ jsx("h1", { className: "font-serif text-3xl md:text-5xl font-black leading-[1.1] mt-3 mb-4", children: article.title }),
        /* @__PURE__ */ jsx("p", { className: "text-lg md:text-xl text-muted-foreground leading-relaxed mb-6", children: article.dek }),
        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-y border-border py-4 mb-8 flex-wrap gap-3", children: [
          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
            /* @__PURE__ */ jsx("div", { className: "w-10 h-10 rounded-full bg-secondary grid place-items-center font-bold", children: article.author.charAt(0) }),
            /* @__PURE__ */ jsxs("div", { className: "text-sm", children: [
              /* @__PURE__ */ jsxs("p", { className: "font-bold", children: [
                "By ",
                article.author
              ] }),
              /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground", children: [
                timeAgo(article.publishedAt),
                " • ",
                article.readMinutes,
                " min read"
              ] })
            ] })
          ] }),
          /* @__PURE__ */ jsx("div", { className: "flex gap-2", children: ["WhatsApp", "Facebook", "X"].map((s) => /* @__PURE__ */ jsx("button", { className: "border border-border px-3 py-1.5 text-[11px] font-bold uppercase tracking-widest hover:bg-brand hover:text-primary-foreground transition-colors", children: s }, s)) })
        ] }),
        article.image && /* @__PURE__ */ jsxs(Fragment, { children: [
          /* @__PURE__ */ jsx("img", { src: resolveImage(article.image), alt: article.imageAlt, width: 1600, height: 900, className: "w-full aspect-[16/9] object-cover rounded-sm bg-muted mb-3" }),
          /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mb-8 italic", children: article.imageAlt })
        ] }),
        article.aiSummary && /* @__PURE__ */ jsxs("div", { className: "bg-muted p-5 border-l-4 border-brand-accent mb-10", children: [
          /* @__PURE__ */ jsx("span", { className: "text-[10px] font-black uppercase text-brand-accent bg-brand-accent/10 px-1.5 py-0.5 inline-block mb-2", children: "AI Summary" }),
          /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: article.aiSummary })
        ] }),
        /* @__PURE__ */ jsx("div", { className: "prose-article space-y-6 text-lg leading-[1.75] text-foreground", children: article.body.map((p, i) => /* @__PURE__ */ jsx("p", { children: p }, i)) }),
        article.tags.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2 mt-10", children: article.tags.map((t) => /* @__PURE__ */ jsxs("span", { className: "text-xs font-bold uppercase tracking-widest border border-border px-3 py-1 hover:bg-muted cursor-pointer", children: [
          "#",
          t
        ] }, t)) }),
        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-6 mt-8 border-t border-border pt-6", children: [
          /* @__PURE__ */ jsxs("button", { className: "flex items-center gap-2 text-sm font-bold hover:text-brand-accent", children: [
            /* @__PURE__ */ jsx(Heart, { className: "w-4 h-4" }),
            " Reactions"
          ] }),
          /* @__PURE__ */ jsxs("button", { className: "flex items-center gap-2 text-sm font-bold hover:text-brand-accent", children: [
            /* @__PURE__ */ jsx(MessageCircle, { className: "w-4 h-4" }),
            " Comments"
          ] })
        ] }),
        /* @__PURE__ */ jsx("div", { className: "mt-12", children: /* @__PURE__ */ jsx(Newsletter, {}) }),
        related.length > 0 && /* @__PURE__ */ jsxs("section", { className: "mt-16", children: [
          /* @__PURE__ */ jsx("h2", { className: "font-serif text-2xl font-black italic mb-8", children: "Related Stories" }),
          /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-8", children: related.map((a) => /* @__PURE__ */ jsx(ArticleCard, { article: a }, a.slug)) })
        ] })
      ] }),
      /* @__PURE__ */ jsxs("aside", { className: "lg:col-span-3 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.slice(0, 8).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 {
  ArticlePage as component
};
