import { jsxs, Fragment, jsx } from "react/jsx-runtime";
import { Link } from "@tanstack/react-router";
import { Globe, BadgeCheck, ArrowRight, MessageCircle, Package, ArrowUpRight } from "lucide-react";
import { A as useSiteSettings, t as useBrands, x as useProducts, B as Button, H as waLinkFor } from "./router-D4ixsMHb.js";
import { h as heroImg } from "./hero-TkSUT3Ve.js";
import { T as ToothIcon } from "./ToothIcon-C3uToVex.js";
import * as React from "react";
import "@tanstack/react-query";
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";
const FALLBACK_BRANDS = [{
  name: "3M ESPE",
  country: "USA",
  note: "Restoratives, glass ionomers (Ketac Molar), bonding agents."
}, {
  name: "Prevest DenPro",
  country: "India",
  note: "Aesthetic restoratives, Micron Superior glass ionomer."
}, {
  name: "GC Corporation",
  country: "Japan",
  note: "Dental materials, cements and impression materials."
}, {
  name: "Dentsply Sirona",
  country: "USA / Germany",
  note: "Endodontic instruments, prosthetic and implant systems."
}, {
  name: "Ivoclar Vivadent",
  country: "Liechtenstein",
  note: "Composites, ceramics and lab materials."
}, {
  name: "Coltene",
  country: "Switzerland",
  note: "Endodontics, restoratives and disinfection products."
}, {
  name: "VOCO",
  country: "Germany",
  note: "Composites, glass ionomers and preventive materials."
}, {
  name: "NSK",
  country: "Japan",
  note: "High-speed and low-speed handpieces, micromotors."
}, {
  name: "W&H",
  country: "Austria",
  note: "Surgical handpieces and sterilisation equipment."
}, {
  name: "Hu-Friedy",
  country: "USA",
  note: "Premium hand instruments and scalers."
}, {
  name: "Gnatus",
  country: "Brazil",
  note: "Dental chairs, X-ray units and clinic equipment."
}, {
  name: "Woson",
  country: "China",
  note: "Autoclaves and sterilisation equipment."
}];
function BrandsPage() {
  const site = useSiteSettings();
  const {
    data: dbBrands,
    isLoading: brandsLoading
  } = useBrands();
  const {
    data: products
  } = useProducts();
  const brandCounts = React.useMemo(() => {
    if (!products) return {};
    const counts = {};
    for (const p of products) {
      if (p.brandId) {
        counts[p.brandId] = (counts[p.brandId] ?? 0) + 1;
      }
    }
    return counts;
  }, [products]);
  const hasDbBrands = dbBrands && dbBrands.length > 0;
  const brands = hasDbBrands ? dbBrands.map((b) => ({
    id: b.id,
    slug: b.slug,
    name: b.name,
    description: b.description ?? "",
    logo: b.logo_url,
    country: "",
    count: brandCounts[b.id] ?? 0
  })) : brandsLoading ? [] : FALLBACK_BRANDS.map((b) => ({
    id: b.name,
    slug: null,
    name: b.name,
    description: b.note,
    logo: null,
    country: b.country,
    count: 0
  }));
  const totalProducts = products?.length ?? 0;
  const totalBrands = brands.length || (hasDbBrands ? dbBrands.length : FALLBACK_BRANDS.length);
  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: 900 }),
        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-gradient-to-r from-brand/95 via-brand/85 to-brand/40" }),
        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-tooth-pattern-light opacity-80" })
      ] }),
      /* @__PURE__ */ jsx(ToothIcon, { className: "pointer-events-none absolute right-1/3 top-16 hidden h-12 w-12 text-white/20 md:block" }),
      /* @__PURE__ */ jsx(Globe, { className: "pointer-events-none absolute bottom-12 right-12 hidden h-24 w-24 text-white/10 lg:block" }),
      /* @__PURE__ */ jsx("div", { className: "relative container mx-auto px-4 py-20 md:px-6 md:py-28 lg:py-32", 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(BadgeCheck, { className: "h-3.5 w-3.5" }),
          "Authorised distributor"
        ] }),
        /* @__PURE__ */ jsx("h1", { className: "mt-5 font-display text-4xl font-extrabold leading-tight md:text-5xl lg:text-6xl", children: "Trusted brands, authentic products." }),
        /* @__PURE__ */ jsx("p", { className: "mt-5 max-w-xl text-base text-white/85 md:text-lg", children: "We source directly from the world's leading dental manufacturers so Kenyan clinics get genuine, traceable equipment every time." }),
        /* @__PURE__ */ jsxs("div", { className: "mt-8 flex flex-wrap items-center gap-3", children: [
          /* @__PURE__ */ jsx(Link, { to: "/products", children: /* @__PURE__ */ jsxs(Button, { size: "lg", variant: "secondary", className: "gap-2", children: [
            "Browse catalog ",
            /* @__PURE__ */ jsx(ArrowRight, { className: "h-4 w-4" })
          ] }) }),
          /* @__PURE__ */ jsx("a", { href: waLinkFor(site.whatsapp, `Hello ${site.name}, I'd like to know more about the brands you stock.`), target: "_blank", rel: "noopener noreferrer", children: /* @__PURE__ */ jsxs(Button, { size: "lg", className: "gap-2 text-white hover:opacity-90", style: {
            background: "#25D366"
          }, children: [
            /* @__PURE__ */ jsx(MessageCircle, { className: "h-4 w-4" }),
            " Chat on WhatsApp"
          ] }) })
        ] }),
        /* @__PURE__ */ jsx("div", { className: "mt-10 grid max-w-xl grid-cols-3 gap-4 text-white", children: [{
          n: `${totalBrands}+`,
          l: "Global brands"
        }, {
          n: "6",
          l: "Continents sourced"
        }, {
          n: totalProducts > 0 ? totalProducts.toString() : "100%",
          l: totalProducts > 0 ? "Products in stock" : "Authentic guarantee"
        }].map((s) => /* @__PURE__ */ jsxs("div", { className: "rounded-sm border border-white/15 bg-white/10 p-3 backdrop-blur", children: [
          /* @__PURE__ */ jsx("div", { className: "font-display text-2xl font-extrabold", children: s.n }),
          /* @__PURE__ */ jsx("div", { className: "text-xs text-white/80", children: s.l })
        ] }, s.l)) })
      ] }) })
    ] }),
    /* @__PURE__ */ jsxs("section", { className: "container mx-auto px-4 py-12 md:px-6", children: [
      brandsLoading && !hasDbBrands ? /* @__PURE__ */ jsx("div", { className: "grid gap-4 sm:grid-cols-2 md:gap-6 lg:grid-cols-3", children: Array.from({
        length: 6
      }).map((_, i) => /* @__PURE__ */ jsxs("div", { className: "animate-pulse rounded border border-border bg-card p-6 shadow-[var(--shadow-card)]", children: [
        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
          /* @__PURE__ */ jsx("div", { className: "h-11 w-11 rounded-sm bg-muted" }),
          /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-2", children: [
            /* @__PURE__ */ jsx("div", { className: "h-4 w-1/2 rounded bg-muted" }),
            /* @__PURE__ */ jsx("div", { className: "h-3 w-1/3 rounded bg-muted" })
          ] })
        ] }),
        /* @__PURE__ */ jsxs("div", { className: "mt-4 space-y-2", children: [
          /* @__PURE__ */ jsx("div", { className: "h-3 w-full rounded bg-muted" }),
          /* @__PURE__ */ jsx("div", { className: "h-3 w-5/6 rounded bg-muted" })
        ] })
      ] }, i)) }) : /* @__PURE__ */ jsx("div", { className: "grid gap-4 sm:grid-cols-2 md:gap-6 lg:grid-cols-3", children: brands.map((b) => {
        const CardInner = /* @__PURE__ */ jsxs(Fragment, { children: [
          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
            b.logo ? /* @__PURE__ */ jsx("img", { src: b.logo, alt: b.name, className: "h-11 w-11 rounded-sm object-contain bg-white p-1", loading: "lazy" }) : /* @__PURE__ */ jsx("div", { className: "inline-flex h-11 w-11 items-center justify-center rounded-sm bg-brand-bright/10 text-brand-bright", children: /* @__PURE__ */ jsx(BadgeCheck, { className: "h-5 w-5" }) }),
            /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
              /* @__PURE__ */ jsx("h2", { className: "text-base font-bold text-foreground truncate", children: b.name }),
              b.country && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: b.country })
            ] }),
            b.slug && /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-brand-bright/10 px-2 py-0.5 text-xs font-medium text-brand-bright", children: [
              /* @__PURE__ */ jsx(Package, { className: "h-3 w-3" }),
              b.count
            ] })
          ] }),
          /* @__PURE__ */ jsx("p", { className: "mt-4 text-sm text-foreground/80 line-clamp-3", children: b.description }),
          b.slug && /* @__PURE__ */ jsxs("div", { className: "mt-4 flex items-center gap-1 text-sm font-medium text-brand-bright", children: [
            "View products ",
            /* @__PURE__ */ jsx(ArrowUpRight, { className: "h-3.5 w-3.5 transition group-hover:translate-x-0.5 group-hover:-translate-y-0.5" })
          ] })
        ] });
        if (b.slug) {
          return /* @__PURE__ */ jsx(Link, { to: "/products", search: {
            brand: b.slug
          }, className: "group block rounded border border-border bg-card p-6 shadow-[var(--shadow-card)] transition hover:-translate-y-0.5 hover:shadow-[var(--shadow-elevated)]", children: CardInner }, b.id);
        }
        return /* @__PURE__ */ jsx("div", { className: "group rounded border border-border bg-card p-6 shadow-[var(--shadow-card)] transition hover:-translate-y-0.5 hover:shadow-[var(--shadow-elevated)]", children: CardInner }, b.id);
      }) }),
      /* @__PURE__ */ jsxs("div", { className: "mt-12 rounded border border-border bg-card p-8 text-center shadow-[var(--shadow-card)]", children: [
        /* @__PURE__ */ jsx("h2", { className: "text-xl font-bold text-foreground", children: "Looking for a specific brand?" }),
        /* @__PURE__ */ jsx("p", { className: "mt-2 text-muted-foreground", children: "If you need a product or brand not listed here, contact us — we'll source it for you." }),
        /* @__PURE__ */ jsxs("div", { className: "mt-5 flex flex-wrap justify-center gap-3", children: [
          /* @__PURE__ */ jsx(Link, { to: "/contact", children: /* @__PURE__ */ jsx(Button, { children: "Contact us" }) }),
          /* @__PURE__ */ jsx(Link, { to: "/products", children: /* @__PURE__ */ jsx(Button, { variant: "outline", children: "Browse catalog" }) })
        ] })
      ] })
    ] })
  ] });
}
export {
  BrandsPage as component
};
