import { jsx, jsxs, Fragment } from "react/jsx-runtime";
import { Link } from "@tanstack/react-router";
import { Calendar, Clock, ArrowRight } from "lucide-react";
import { useQuery } from "@tanstack/react-query";
import { n as fetchPublishedPosts } from "./router-D4ixsMHb.js";
import "react";
import "@radix-ui/react-slot";
import "class-variance-authority";
import "clsx";
import "tailwind-merge";
import "cmdk";
import "@radix-ui/react-dialog";
import "@supabase/supabase-js";
import "sonner";
function BlogIndex() {
  const {
    data: posts = [],
    isLoading
  } = useQuery({
    queryKey: ["blog_posts_public"],
    queryFn: fetchPublishedPosts
  });
  if (isLoading) {
    return /* @__PURE__ */ jsx("div", { className: "container mx-auto px-4 py-20 text-center text-sm text-muted-foreground", children: "Loading articles…" });
  }
  if (posts.length === 0) {
    return /* @__PURE__ */ jsxs("section", { className: "container mx-auto px-4 py-20 text-center md:px-6", children: [
      /* @__PURE__ */ jsx("h1", { className: "text-2xl font-bold text-foreground", children: "No articles yet" }),
      /* @__PURE__ */ jsx("p", { className: "mt-2 text-muted-foreground", children: "Check back soon for buying guides and clinical tips." })
    ] });
  }
  const [featured, ...rest] = posts;
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    /* @__PURE__ */ jsx("section", { className: "border-b border-border bg-surface", children: /* @__PURE__ */ jsxs("div", { className: "container mx-auto px-4 py-12 md:px-6 md:py-16", children: [
      /* @__PURE__ */ jsx("h1", { className: "text-3xl font-bold text-foreground md:text-4xl", children: "Insights for Kenyan dental practitioners" }),
      /* @__PURE__ */ jsx("p", { className: "mt-2 max-w-2xl text-muted-foreground", children: "Buying guides, clinical protocols and practical tips from the Aquadent team." })
    ] }) }),
    /* @__PURE__ */ jsxs("section", { className: "container mx-auto px-4 py-12 md:px-6", children: [
      /* @__PURE__ */ jsxs(Link, { to: "/blog/$slug", params: {
        slug: featured.slug
      }, className: "group grid overflow-hidden rounded border border-border bg-card shadow-[var(--shadow-card)] transition hover:shadow-[var(--shadow-elevated)] md:grid-cols-2", children: [
        /* @__PURE__ */ jsx("div", { className: "aspect-[4/3] overflow-hidden md:aspect-auto", children: /* @__PURE__ */ jsx("img", { src: featured.cover, alt: featured.title, loading: "lazy", width: 1280, height: 768, className: "h-full w-full object-cover transition duration-500 group-hover:scale-105" }) }),
        /* @__PURE__ */ jsxs("div", { className: "flex flex-col justify-center p-8 md:p-10", children: [
          /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold uppercase tracking-wider text-brand-bright", children: "Featured article" }),
          /* @__PURE__ */ jsx("h2", { className: "mt-3 text-2xl font-bold text-foreground md:text-3xl", children: featured.title }),
          /* @__PURE__ */ jsx("p", { className: "mt-3 text-foreground/80", children: featured.excerpt }),
          /* @__PURE__ */ jsxs("div", { className: "mt-5 flex items-center gap-4 text-xs text-muted-foreground", children: [
            /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1", children: [
              /* @__PURE__ */ jsx(Calendar, { className: "h-3.5 w-3.5" }),
              " ",
              new Date(featured.date).toLocaleDateString()
            ] }),
            /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1", children: [
              /* @__PURE__ */ jsx(Clock, { className: "h-3.5 w-3.5" }),
              " ",
              featured.readMin,
              " min read"
            ] })
          ] }),
          /* @__PURE__ */ jsxs("span", { className: "mt-6 inline-flex items-center gap-1.5 text-sm font-semibold text-brand-bright", children: [
            "Read article ",
            /* @__PURE__ */ jsx(ArrowRight, { className: "h-4 w-4 transition group-hover:translate-x-1" })
          ] })
        ] })
      ] }),
      /* @__PURE__ */ jsx("div", { className: "mt-12 grid gap-6 sm:grid-cols-2 lg:grid-cols-3", children: rest.map((p) => /* @__PURE__ */ jsxs(Link, { to: "/blog/$slug", params: {
        slug: p.slug
      }, className: "group overflow-hidden rounded border border-border bg-card shadow-[var(--shadow-card)] transition hover:-translate-y-0.5 hover:shadow-[var(--shadow-elevated)]", children: [
        /* @__PURE__ */ jsx("div", { className: "aspect-[4/3] overflow-hidden", children: /* @__PURE__ */ jsx("img", { src: p.cover, alt: p.title, loading: "lazy", width: 1024, height: 768, className: "h-full w-full object-cover transition duration-500 group-hover:scale-105" }) }),
        /* @__PURE__ */ jsxs("div", { className: "p-5", children: [
          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 text-xs text-muted-foreground", children: [
            /* @__PURE__ */ jsx("span", { children: new Date(p.date).toLocaleDateString() }),
            /* @__PURE__ */ jsx("span", { children: "·" }),
            /* @__PURE__ */ jsxs("span", { children: [
              p.readMin,
              " min"
            ] })
          ] }),
          /* @__PURE__ */ jsx("h3", { className: "mt-2 line-clamp-2 text-lg font-bold text-foreground transition group-hover:text-brand-bright", children: p.title }),
          /* @__PURE__ */ jsx("p", { className: "mt-2 line-clamp-3 text-sm text-muted-foreground", children: p.excerpt })
        ] })
      ] }, p.slug)) })
    ] })
  ] });
}
export {
  BlogIndex as component
};
