import { jsxs, Fragment, jsx } from "react/jsx-runtime";
import { Link } from "@tanstack/react-router";
import { Layers, ShieldCheck, Truck, ArrowRight } from "lucide-react";
import { v as useCategories, x as useProducts } from "./router-D4ixsMHb.js";
import { h as heroImg } from "./hero-TkSUT3Ve.js";
import "@tanstack/react-query";
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 CategoriesPage() {
  const {
    data: categories
  } = useCategories();
  const {
    data: products
  } = useProducts();
  const counts = {};
  for (const p of products ?? []) counts[p.categoryId] = (counts[p.categoryId] ?? 0) + 1;
  const totalProducts = products?.length ?? 0;
  const totalCategories = categories?.length ?? 0;
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    /* @__PURE__ */ jsxs("section", { className: "relative overflow-hidden", children: [
      /* @__PURE__ */ jsxs("div", { className: "absolute inset-0", children: [
        /* @__PURE__ */ jsx("img", { src: heroImg, alt: "", className: "h-full w-full object-cover", width: 1600, height: 600 }),
        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-gradient-to-r from-brand/95 via-brand/80 to-brand/30" }),
        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-tooth-pattern-light opacity-60" })
      ] }),
      /* @__PURE__ */ jsx("div", { className: "relative container mx-auto px-4 py-14 md:px-6 md:py-20", children: /* @__PURE__ */ jsxs("div", { className: "max-w-2xl text-brand-foreground", children: [
        /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-2 rounded-full border border-white/20 bg-white/10 px-3 py-1 text-xs font-medium backdrop-blur", children: [
          /* @__PURE__ */ jsx(Layers, { className: "h-3.5 w-3.5" }),
          "Shop by Speciality"
        ] }),
        /* @__PURE__ */ jsx("h1", { className: "mt-4 font-display text-3xl font-extrabold leading-tight md:text-4xl lg:text-5xl", children: "Browse by Category" }),
        /* @__PURE__ */ jsxs("p", { className: "mt-3 max-w-lg text-sm text-white/85 md:text-base", children: [
          totalCategories,
          " categories, ",
          totalProducts,
          " products — everything your practice needs, organised by speciality and delivered nationwide."
        ] }),
        /* @__PURE__ */ jsxs("div", { className: "mt-5 flex flex-wrap items-center gap-x-5 gap-y-2 text-xs text-white/80", children: [
          /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5", children: [
            /* @__PURE__ */ jsx(ShieldCheck, { className: "h-3.5 w-3.5" }),
            " Authentic stock"
          ] }),
          /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5", children: [
            /* @__PURE__ */ jsx(Truck, { className: "h-3.5 w-3.5" }),
            " Nationwide delivery"
          ] })
        ] })
      ] }) })
    ] }),
    /* @__PURE__ */ jsxs("section", { className: "container mx-auto px-4 py-12 md:px-6 md:py-16", children: [
      /* @__PURE__ */ jsx("header", { className: "max-w-2xl", children: /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: "Everything your practice needs — organised by speciality." }) }),
      /* @__PURE__ */ jsx("div", { className: "mt-10 grid gap-4 sm:grid-cols-2 md:gap-6 lg:grid-cols-3", children: (categories ?? []).map((c, i) => {
        const count = counts[c.id] ?? 0;
        return /* @__PURE__ */ jsxs(Link, { to: "/categories/$slug", params: {
          slug: c.slug
        }, className: "group relative 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__ */ jsxs("div", { className: "relative aspect-[4/3] overflow-hidden", children: [
            /* @__PURE__ */ jsx("img", { src: c.image, alt: c.name, loading: "lazy", width: 1024, height: 768, className: "h-full w-full object-cover transition duration-500 group-hover:scale-105" }),
            /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-gradient-to-t from-brand/85 via-brand/20 to-transparent" }),
            /* @__PURE__ */ jsx("p", { className: "absolute left-5 top-5 text-xs font-semibold uppercase tracking-wider text-white/80", children: String(i + 1).padStart(2, "0") }),
            /* @__PURE__ */ jsxs("div", { className: "absolute inset-x-0 bottom-0 p-5 text-white", children: [
              /* @__PURE__ */ jsx("h2", { className: "text-xl font-bold", children: c.name }),
              /* @__PURE__ */ jsxs("p", { className: "mt-1 line-clamp-2 text-sm text-white/85", children: [
                c.metaDescription.split(".")[0],
                "."
              ] }),
              /* @__PURE__ */ jsxs("p", { className: "mt-1 text-xs text-white/70", children: [
                count,
                " ",
                count === 1 ? "product" : "products"
              ] })
            ] })
          ] }),
          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-5 py-4", children: [
            /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: "Explore range" }),
            /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5 text-sm font-semibold text-brand-bright transition group-hover:gap-2", children: [
              "Browse ",
              /* @__PURE__ */ jsx(ArrowRight, { className: "h-4 w-4" })
            ] })
          ] })
        ] }, c.id);
      }) })
    ] })
  ] });
}
export {
  CategoriesPage as component
};
