import { jsxs, jsx } from "react/jsx-runtime";
import { h as homeQuery, r as resolveImage, c as categoryName, t as timeAgo } from "./router-CEaBCHfX.js";
import { Link } from "@tanstack/react-router";
import { useSuspenseQuery } from "@tanstack/react-query";
import { B as BreakingTicker, A as ArticleCard, a as AdSlot, N as Newsletter } from "./AdSlot-BPsWlpHM.js";
import { S as SiteHeader, a as SiteFooter } from "./SiteFooter-B6xyoPMr.js";
import { Eye, Share2, PlayCircle, Upload } from "lucide-react";
import "react";
import "sonner";
import "./client-CJCZGN4z.js";
import "@supabase/supabase-js";
import "./use-auth-DoD1gvcu.js";
function HomePage() {
  const {
    data
  } = useSuspenseQuery(homeQuery);
  const {
    latest,
    trending,
    mostShared
  } = data;
  if (latest.length === 0) {
    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-24 text-center", children: [
        /* @__PURE__ */ jsx("h1", { className: "font-serif text-3xl font-black mb-2", children: "No stories yet" }),
        /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: "Publish an article in the newsroom to get started." })
      ] }),
      /* @__PURE__ */ jsx(SiteFooter, {})
    ] });
  }
  const lead = latest[0];
  const politics = latest.filter((a) => a.category === "politics").concat(latest.filter((a) => a.category !== "politics")).slice(0, 3);
  const recent = latest.slice(0, 6);
  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-8", children: [
      /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-12 gap-8 mb-12", children: [
        /* @__PURE__ */ jsx("div", { className: "col-span-12 lg:col-span-8", children: /* @__PURE__ */ jsxs(Link, { to: "/article/$slug", params: {
          slug: lead.slug
        }, className: "group block", children: [
          /* @__PURE__ */ jsx("img", { src: resolveImage(lead.image), alt: lead.imageAlt, width: 1600, height: 900, className: "w-full aspect-[16/9] object-cover rounded-sm bg-muted mb-6" }),
          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 mb-3", children: [
            /* @__PURE__ */ jsx("span", { className: "text-brand-accent font-bold text-xs uppercase tracking-widest", children: categoryName(lead.category) }),
            /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground text-xs", children: [
              "• ",
              lead.readMinutes,
              " min read"
            ] })
          ] }),
          /* @__PURE__ */ jsx("h1", { className: "font-serif text-3xl md:text-4xl lg:text-5xl font-black mb-4 leading-[1.1] group-hover:text-brand-accent transition-colors", children: lead.title }),
          lead.aiSummary && /* @__PURE__ */ jsxs("div", { className: "bg-muted p-4 border-l-4 border-brand-accent mb-4", 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-1", children: "AI Summary" }),
            /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: lead.aiSummary })
          ] }),
          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
            /* @__PURE__ */ jsx("div", { className: "w-8 h-8 rounded-full bg-secondary grid place-items-center text-xs font-bold", children: lead.author.charAt(0) }),
            /* @__PURE__ */ jsxs("span", { className: "text-xs font-bold", children: [
              "By ",
              lead.author
            ] })
          ] })
        ] }) }),
        /* @__PURE__ */ jsxs("div", { className: "col-span-12 lg:col-span-4 flex flex-col gap-8", children: [
          /* @__PURE__ */ jsxs("div", { className: "border-t-4 border-brand pt-4", children: [
            /* @__PURE__ */ jsx("h3", { className: "font-serif text-xl font-black mb-6", children: "Trending Stories" }),
            /* @__PURE__ */ jsx("div", { className: "space-y-6", children: trending.slice(0, 3).map((a, i) => /* @__PURE__ */ jsxs("div", { className: "flex gap-4", children: [
              /* @__PURE__ */ jsx("span", { className: "text-3xl font-serif font-black text-muted italic leading-none", children: String(i + 1).padStart(2, "0") }),
              /* @__PURE__ */ jsx(ArticleCard, { article: a, variant: "compact" })
            ] }, a.slug)) })
          ] }),
          /* @__PURE__ */ jsx(AdSlot, {})
        ] })
      ] }),
      /* @__PURE__ */ jsx("section", { className: "grid grid-cols-1 md:grid-cols-3 gap-8 py-12 border-t border-border", children: latest.slice(1, 4).map((a) => /* @__PURE__ */ jsx(ArticleCard, { article: a }, a.slug)) }),
      /* @__PURE__ */ jsxs("section", { className: "py-12 border-t border-border", children: [
        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-8", children: [
          /* @__PURE__ */ jsx("h2", { className: "font-serif text-2xl md:text-3xl font-black italic", children: "Politics & Governance" }),
          /* @__PURE__ */ jsx(Link, { to: "/category/$slug", params: {
            slug: "politics"
          }, className: "text-sm font-bold text-brand-accent hover:underline", children: "View all Politics →" })
        ] }),
        /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-8", children: politics.map((a) => /* @__PURE__ */ jsx(ArticleCard, { article: a }, a.slug)) })
      ] }),
      /* @__PURE__ */ jsxs("section", { className: "grid grid-cols-1 lg:grid-cols-3 gap-12 py-12 border-t border-border", children: [
        /* @__PURE__ */ jsxs("div", { className: "lg:col-span-2", children: [
          /* @__PURE__ */ jsx("h2", { className: "font-serif text-2xl font-black italic mb-8", children: "Latest Stories" }),
          /* @__PURE__ */ jsx("div", { className: "space-y-8", children: recent.map((a) => /* @__PURE__ */ jsx(ArticleCard, { article: a, variant: "horizontal" }, a.slug)) })
        ] }),
        /* @__PURE__ */ jsxs("aside", { className: "space-y-12", children: [
          /* @__PURE__ */ jsxs("div", { children: [
            /* @__PURE__ */ jsxs("h3", { className: "font-serif text-xl font-black italic mb-6 flex items-center gap-2", children: [
              /* @__PURE__ */ jsx(Eye, { className: "w-4 h-4 text-brand-accent" }),
              " Most Read"
            ] }),
            /* @__PURE__ */ jsx("ol", { className: "space-y-4", children: trending.slice(0, 5).map((a, i) => /* @__PURE__ */ jsxs("li", { className: "flex gap-3 border-b border-border pb-4 last:border-0", children: [
              /* @__PURE__ */ jsx("span", { className: "font-serif font-black text-2xl text-brand-accent leading-none", children: i + 1 }),
              /* @__PURE__ */ jsx(ArticleCard, { article: a, variant: "compact" })
            ] }, a.slug)) })
          ] }),
          /* @__PURE__ */ jsxs("div", { children: [
            /* @__PURE__ */ jsxs("h3", { className: "font-serif text-xl font-black italic mb-6 flex items-center gap-2", children: [
              /* @__PURE__ */ jsx(Share2, { className: "w-4 h-4 text-brand-accent" }),
              " Most Shared"
            ] }),
            /* @__PURE__ */ jsx("ol", { className: "space-y-4", children: mostShared.map((a) => /* @__PURE__ */ jsxs("li", { className: "border-b border-border pb-4 last:border-0", children: [
              /* @__PURE__ */ jsx(ArticleCard, { article: a, variant: "compact" }),
              /* @__PURE__ */ jsxs("span", { className: "text-[10px] text-muted-foreground font-bold uppercase", children: [
                a.shares.toLocaleString(),
                " shares"
              ] })
            ] }, a.slug)) })
          ] }),
          /* @__PURE__ */ jsx(AdSlot, { height: "h-80" })
        ] })
      ] }),
      /* @__PURE__ */ jsxs("section", { className: "py-12 border-t border-border", children: [
        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-8", children: [
          /* @__PURE__ */ jsx("h2", { className: "font-serif text-2xl md:text-3xl font-black italic", children: "Video Reports" }),
          /* @__PURE__ */ jsx("a", { href: "#", className: "text-sm font-bold text-brand-accent hover:underline", children: "Watch all →" })
        ] }),
        /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-6", children: latest.slice(2, 5).map((a) => /* @__PURE__ */ jsxs(Link, { to: "/article/$slug", params: {
          slug: a.slug
        }, className: "group", children: [
          /* @__PURE__ */ jsxs("div", { className: "relative aspect-video rounded-sm overflow-hidden bg-muted", children: [
            /* @__PURE__ */ jsx("img", { src: resolveImage(a.image), alt: a.imageAlt, loading: "lazy", width: 800, height: 450, className: "w-full h-full object-cover transition-transform group-hover:scale-105" }),
            /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/30 grid place-items-center", children: /* @__PURE__ */ jsx(PlayCircle, { className: "w-14 h-14 text-white/90", strokeWidth: 1.5 }) }),
            /* @__PURE__ */ jsx("span", { className: "absolute bottom-2 left-2 bg-brand-accent text-white text-[10px] font-bold uppercase tracking-widest px-2 py-0.5", children: timeAgo(a.publishedAt) })
          ] }),
          /* @__PURE__ */ jsx("p", { className: "text-sm font-bold mt-3 group-hover:text-brand-accent", children: a.title })
        ] }, a.slug)) })
      ] }),
      /* @__PURE__ */ jsx("div", { className: "py-12", children: /* @__PURE__ */ jsx(Newsletter, {}) }),
      /* @__PURE__ */ jsxs("section", { className: "grid grid-cols-1 md:grid-cols-2 gap-8 pb-12", children: [
        /* @__PURE__ */ jsxs("div", { className: "bg-surface border border-border p-8 flex flex-col items-start", children: [
          /* @__PURE__ */ jsxs("div", { className: "bg-brand-accent/10 text-brand-accent px-3 py-1 rounded-full text-[10px] font-black uppercase mb-4 inline-flex items-center gap-1", children: [
            /* @__PURE__ */ jsx(Upload, { className: "w-3 h-3" }),
            " Citizen Journalism"
          ] }),
          /* @__PURE__ */ jsx("h3", { className: "font-serif text-2xl font-black mb-3 italic", children: "Seen something worth sharing?" }),
          /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mb-6", children: "Be our eyes on the ground. Upload photos, videos or stories from your community for verification by our newsroom." }),
          /* @__PURE__ */ jsx(Link, { to: "/submit", className: "border-2 border-brand px-6 py-2 font-black text-sm hover:bg-brand hover:text-primary-foreground transition-all", children: "SUBMIT A STORY" })
        ] }),
        /* @__PURE__ */ jsxs("div", { className: "bg-surface border border-border p-8", children: [
          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-4", children: [
            /* @__PURE__ */ jsx("span", { className: "size-2 rounded-full bg-brand-accent animate-pulse" }),
            /* @__PURE__ */ jsx("span", { className: "text-[10px] font-black uppercase tracking-widest text-brand-accent", children: "Live Updates" })
          ] }),
          /* @__PURE__ */ jsx("h3", { className: "font-serif text-2xl font-black mb-6 italic", children: "National Exams Day 1" }),
          /* @__PURE__ */ jsx("div", { className: "space-y-4", children: [["10:45", "Reports of smooth conduct across Lilongwe urban centers."], ["09:30", "Security personnel deployed at 1,200 testing sites nationwide."], ["08:00", "MANEB officials open distribution centres in all 28 districts."]].map(([t, c], i) => /* @__PURE__ */ jsxs("div", { className: "flex gap-3", children: [
            /* @__PURE__ */ jsx("div", { className: `w-2 h-2 rounded-full mt-1.5 ${i === 0 ? "bg-brand-accent" : "bg-muted"}` }),
            /* @__PURE__ */ jsxs("div", { className: "text-sm", children: [
              /* @__PURE__ */ jsxs("span", { className: "font-bold", children: [
                t,
                " AM"
              ] }),
              /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: c })
            ] })
          ] }, t)) })
        ] })
      ] })
    ] }),
    /* @__PURE__ */ jsx(SiteFooter, {})
  ] });
}
export {
  HomePage as component
};
