import { jsxs, Fragment, jsx } from "react/jsx-runtime";
import { Link } from "@tanstack/react-router";
import { MapPin, ClipboardList, MessageCircle, Phone, Truck, Clock, ShieldCheck, Wrench, Sparkles, Check, Building2, Quote, Star, ArrowRight } from "lucide-react";
import { h as Route, k as categoriesById, a as CATEGORY_IDS, B as Button, G as waLink, S as SITE, L as LOCATIONS } from "./router-D4ixsMHb.js";
import { h as heroImg } from "./people-consult-C2eYD4Uj.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 LocationPage() {
  const {
    loc
  } = Route.useLoaderData();
  const topSet = new Set(loc.topCategories);
  const ordered = [...loc.topCategories.filter((c) => c in categoriesById), ...CATEGORY_IDS.filter((c) => !topSet.has(c))];
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    /* @__PURE__ */ jsxs("section", { className: "relative overflow-hidden text-brand-foreground", style: {
      background: "var(--gradient-brand)"
    }, children: [
      /* @__PURE__ */ jsxs("div", { className: "absolute inset-0", children: [
        /* @__PURE__ */ jsx("img", { src: heroImg, alt: "", "aria-hidden": true, className: "h-full w-full object-cover opacity-20" }),
        /* @__PURE__ */ jsx("div", { className: "absolute inset-0", style: {
          background: "linear-gradient(120deg, rgba(11,44,107,0.95) 0%, rgba(11,44,107,0.75) 55%, rgba(30,144,255,0.55) 100%)"
        } })
      ] }),
      /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: "pointer-events-none absolute inset-0 opacity-25", style: {
        backgroundImage: "radial-gradient(rgba(255,255,255,0.5) 1px, transparent 1px)",
        backgroundSize: "24px 24px"
      } }),
      /* @__PURE__ */ jsx("div", { className: "container relative mx-auto px-4 pt-6 md:px-6", children: /* @__PURE__ */ jsx("nav", { "aria-label": "Breadcrumb", className: "text-xs text-white/75", children: /* @__PURE__ */ jsxs("ol", { className: "flex flex-wrap items-center gap-1.5", children: [
        /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Link, { to: "/", className: "hover:text-white", children: "Home" }) }),
        /* @__PURE__ */ jsx("li", { "aria-hidden": true, children: "/" }),
        /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Link, { to: "/locations", className: "hover:text-white", children: "Locations" }) }),
        /* @__PURE__ */ jsx("li", { "aria-hidden": true, children: "/" }),
        /* @__PURE__ */ jsx("li", { className: "font-medium text-white", children: loc.city })
      ] }) }) }),
      /* @__PURE__ */ jsxs("div", { className: "container relative mx-auto grid gap-10 px-4 py-12 md:grid-cols-[1.2fr_0.8fr] md:items-center md:px-6 md:py-20", children: [
        /* @__PURE__ */ jsxs("div", { children: [
          /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-2 rounded-full bg-white/10 px-3 py-1 text-xs font-semibold text-white backdrop-blur ring-1 ring-white/20", children: [
            /* @__PURE__ */ jsx(MapPin, { className: "h-3.5 w-3.5" }),
            " ",
            loc.region
          ] }),
          /* @__PURE__ */ jsx("h1", { className: "mt-4 font-display text-4xl font-extrabold leading-[1.05] md:text-6xl", children: loc.h1 }),
          /* @__PURE__ */ jsx("p", { className: "mt-5 max-w-xl text-base leading-relaxed text-white/85 md:text-lg", children: loc.intro }),
          /* @__PURE__ */ jsxs("div", { className: "mt-7 flex flex-wrap gap-3", children: [
            /* @__PURE__ */ jsx(Link, { to: "/quote", children: /* @__PURE__ */ jsxs(Button, { size: "lg", className: "gap-2 bg-white text-brand hover:bg-white/90", children: [
              /* @__PURE__ */ jsx(ClipboardList, { className: "h-4 w-4" }),
              " Request a quote"
            ] }) }),
            /* @__PURE__ */ jsx("a", { href: waLink(`Hello ${SITE.name}, I'm in ${loc.city} and need dental supplies.`), target: "_blank", rel: "noopener noreferrer", children: /* @__PURE__ */ jsxs(Button, { size: "lg", className: "gap-2 text-white", style: {
              background: "#25D366"
            }, children: [
              /* @__PURE__ */ jsx(MessageCircle, { className: "h-4 w-4" }),
              " WhatsApp"
            ] }) }),
            /* @__PURE__ */ jsx("a", { href: `tel:${SITE.phone}`, children: /* @__PURE__ */ jsxs(Button, { size: "lg", variant: "outline", className: "gap-2 border-white/30 bg-white/5 text-white hover:bg-white/15 hover:text-white", children: [
              /* @__PURE__ */ jsx(Phone, { className: "h-4 w-4" }),
              " ",
              SITE.phoneDisplay
            ] }) })
          ] })
        ] }),
        /* @__PURE__ */ jsxs("div", { className: "rounded border border-white/15 bg-white/10 p-6 shadow-2xl backdrop-blur-md", children: [
          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm font-semibold text-sky-300", children: [
            /* @__PURE__ */ jsx(Truck, { className: "h-4 w-4" }),
            " Delivery to ",
            loc.city
          ] }),
          /* @__PURE__ */ jsx("p", { className: "mt-3 text-sm leading-relaxed text-white/85", children: loc.delivery }),
          /* @__PURE__ */ jsxs("div", { className: "mt-4 border-t border-white/15 pt-4", children: [
            /* @__PURE__ */ jsx("p", { className: "text-xs uppercase tracking-wider text-white/65", children: "Neighbourhoods we serve" }),
            /* @__PURE__ */ jsx("div", { className: "mt-2 flex flex-wrap gap-1.5", children: loc.serving.map((n) => /* @__PURE__ */ jsx("span", { className: "rounded-full bg-white/10 px-2.5 py-1 text-xs text-white ring-1 ring-white/15", children: n }, n)) })
          ] })
        ] })
      ] }),
      /* @__PURE__ */ jsx("div", { className: "container relative mx-auto px-4 pb-14 md:px-6", children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-3 rounded border border-white/15 bg-white/5 p-4 backdrop-blur md:grid-cols-4", children: [{
        Icon: Clock,
        label: loc.shipping.split(" ")[0],
        sub: `delivery to ${loc.city}`
      }, {
        Icon: ShieldCheck,
        label: "Authentic",
        sub: "directly from manufacturers"
      }, {
        Icon: Wrench,
        label: "On-site",
        sub: "installation & training"
      }, {
        Icon: Sparkles,
        label: "1 hour",
        sub: "quote turnaround"
      }].map(({
        Icon,
        label,
        sub
      }) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 px-3 py-2", children: [
        /* @__PURE__ */ jsx("span", { className: "inline-flex h-10 w-10 flex-none items-center justify-center rounded-sm bg-sky-300/15 text-sky-300", children: /* @__PURE__ */ jsx(Icon, { className: "h-5 w-5" }) }),
        /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
          /* @__PURE__ */ jsx("p", { className: "font-display text-base font-extrabold leading-tight text-white", children: label }),
          /* @__PURE__ */ jsx("p", { className: "truncate text-[11px] uppercase tracking-wider text-white/65", children: sub })
        ] })
      ] }, label)) }) })
    ] }),
    /* @__PURE__ */ jsx("section", { className: "bg-surface py-14", children: /* @__PURE__ */ jsxs("div", { className: "container mx-auto px-4 md:px-6", children: [
      /* @__PURE__ */ jsxs("h2", { className: "text-2xl font-bold text-foreground md:text-3xl", children: [
        "Why ",
        loc.city,
        " dental clinics choose ",
        SITE.name
      ] }),
      /* @__PURE__ */ jsx("div", { className: "mt-6 grid gap-4 sm:grid-cols-2 lg:grid-cols-4", children: loc.highlights.map((h) => /* @__PURE__ */ jsxs("div", { className: "rounded border border-border bg-card p-6 shadow-[var(--shadow-card)]", children: [
        /* @__PURE__ */ jsx(Check, { className: "h-5 w-5 text-brand-bright" }),
        /* @__PURE__ */ jsx("h3", { className: "mt-3 font-display text-base font-bold text-foreground", children: h.t }),
        /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: h.d })
      ] }, h.t)) })
    ] }) }),
    /* @__PURE__ */ jsx("section", { className: "container mx-auto px-4 py-16 md:px-6 md:py-20", children: /* @__PURE__ */ jsxs("div", { className: "grid gap-10 md:grid-cols-[1.4fr_0.6fr]", children: [
      /* @__PURE__ */ jsxs("article", { className: "prose-base max-w-none", children: [
        /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-2 rounded-full bg-brand-bright/10 px-3 py-1 text-xs font-semibold text-brand-bright", children: [
          /* @__PURE__ */ jsx(Building2, { className: "h-3.5 w-3.5" }),
          " About our ",
          loc.city,
          " service"
        ] }),
        /* @__PURE__ */ jsxs("h2", { className: "mt-3 font-display text-3xl font-extrabold text-foreground md:text-4xl", children: [
          "Dental supplies built for ",
          loc.city,
          " clinics"
        ] }),
        /* @__PURE__ */ jsx("div", { className: "mt-6 space-y-5 text-base leading-relaxed text-foreground/85", children: loc.about.map((para, i) => /* @__PURE__ */ jsx("p", { children: para }, i)) })
      ] }),
      /* @__PURE__ */ jsxs("aside", { className: "space-y-4", children: [
        /* @__PURE__ */ jsxs("div", { className: "rounded border border-border bg-card p-6 shadow-[var(--shadow-card)]", children: [
          /* @__PURE__ */ jsxs("p", { className: "text-xs font-semibold uppercase tracking-wider text-brand-bright", children: [
            "Shipping to ",
            loc.city
          ] }),
          /* @__PURE__ */ jsx("p", { className: "mt-2 font-display text-xl font-extrabold text-foreground", children: loc.shipping }),
          /* @__PURE__ */ jsx("p", { className: "mt-3 text-sm leading-relaxed text-foreground/75", children: loc.delivery })
        ] }),
        /* @__PURE__ */ jsxs("div", { className: "rounded border border-border bg-card p-6 shadow-[var(--shadow-card)]", children: [
          /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold uppercase tracking-wider text-brand-bright", children: "Neighbourhoods we serve" }),
          /* @__PURE__ */ jsx("div", { className: "mt-3 flex flex-wrap gap-1.5", children: loc.serving.map((n) => /* @__PURE__ */ jsx("span", { className: "rounded-full bg-surface px-2.5 py-1 text-xs font-medium text-foreground/80", children: n }, n)) })
        ] }),
        /* @__PURE__ */ jsxs("div", { className: "rounded border border-border bg-card p-6 shadow-[var(--shadow-card)]", children: [
          /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold uppercase tracking-wider text-brand-bright", children: "Trusted near" }),
          /* @__PURE__ */ jsx("ul", { className: "mt-3 space-y-2 text-sm text-foreground/85", children: loc.landmarks.map((l) => /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-2", children: [
            /* @__PURE__ */ jsx(MapPin, { className: "mt-0.5 h-4 w-4 flex-none text-brand-bright" }),
            l
          ] }, l)) })
        ] })
      ] })
    ] }) }),
    /* @__PURE__ */ jsx("section", { className: "bg-surface py-14", children: /* @__PURE__ */ jsx("div", { className: "container mx-auto max-w-4xl px-4 md:px-6", children: /* @__PURE__ */ jsxs("div", { className: "relative overflow-hidden rounded border border-border bg-card p-8 shadow-[var(--shadow-elevated)] md:p-12", children: [
      /* @__PURE__ */ jsx(Quote, { className: "absolute -right-4 -top-4 h-32 w-32 text-brand-bright/10", "aria-hidden": true }),
      /* @__PURE__ */ jsxs("div", { className: "relative", children: [
        /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1 text-brand-bright", children: Array.from({
          length: 5
        }).map((_, i) => /* @__PURE__ */ jsx(Star, { className: "h-4 w-4 fill-current" }, i)) }),
        /* @__PURE__ */ jsxs("blockquote", { className: "mt-4 font-display text-xl font-semibold leading-snug text-foreground md:text-2xl", children: [
          "“",
          loc.testimonial.quote,
          "”"
        ] }),
        /* @__PURE__ */ jsxs("div", { className: "mt-5", children: [
          /* @__PURE__ */ jsx("p", { className: "font-bold text-foreground", children: loc.testimonial.name }),
          /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: loc.testimonial.clinic })
        ] })
      ] })
    ] }) }) }),
    /* @__PURE__ */ jsxs("section", { className: "container mx-auto px-4 py-16 md:px-6 md:py-20", children: [
      /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-2 rounded-full bg-brand-bright/10 px-3 py-1 text-xs font-semibold text-brand-bright", children: [
        /* @__PURE__ */ jsx(Sparkles, { className: "h-3.5 w-3.5" }),
        " Popular in ",
        loc.city
      ] }),
      /* @__PURE__ */ jsxs("h2", { className: "mt-3 font-display text-3xl font-extrabold text-foreground md:text-4xl", children: [
        "What ",
        loc.city,
        " dentists order from us"
      ] }),
      /* @__PURE__ */ jsxs("p", { className: "mt-2 max-w-2xl text-sm text-muted-foreground", children: [
        "The most-ordered dental categories in ",
        loc.city,
        " — chairs, instruments, implants and consumables, all delivered with ",
        loc.shipping.toLowerCase(),
        "."
      ] }),
      /* @__PURE__ */ jsx("div", { className: "mt-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-3", children: ordered.map((cat) => {
        const c = categoriesById[cat];
        const featured = topSet.has(cat);
        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-1 hover:border-brand-bright hover:shadow-[var(--shadow-elevated)]", children: [
          /* @__PURE__ */ jsxs("div", { className: "relative aspect-[16/9] overflow-hidden", children: [
            /* @__PURE__ */ jsx("img", { src: c.image, alt: `${c.name} delivered in ${loc.city}, Kenya`, 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/25 to-transparent" }),
            featured && /* @__PURE__ */ jsx("span", { className: "absolute right-3 top-3 rounded-full bg-brand-bright px-2.5 py-1 text-[10px] font-bold uppercase tracking-wider text-white shadow", children: "Popular" }),
            /* @__PURE__ */ jsxs("div", { className: "absolute bottom-3 left-3 right-3", children: [
              /* @__PURE__ */ jsx("h3", { className: "font-display text-lg font-extrabold text-white drop-shadow", children: c.name }),
              /* @__PURE__ */ jsxs("p", { className: "text-xs text-white/85", children: [
                "in ",
                loc.city
              ] })
            ] })
          ] }),
          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between p-5", children: [
            /* @__PURE__ */ jsxs("p", { className: "text-sm font-semibold text-brand-bright", children: [
              "Shop ",
              c.name.toLowerCase()
            ] }),
            /* @__PURE__ */ jsx(ArrowRight, { className: "h-4 w-4 flex-none text-brand-bright transition group-hover:translate-x-1" })
          ] })
        ] }, cat);
      }) })
    ] }),
    /* @__PURE__ */ jsx("section", { className: "bg-surface py-14", children: /* @__PURE__ */ jsxs("div", { className: "container mx-auto max-w-3xl px-4 md:px-6", children: [
      /* @__PURE__ */ jsx("span", { className: "inline-flex items-center gap-2 rounded-full bg-brand-bright/10 px-3 py-1 text-xs font-semibold text-brand-bright", children: "FAQs" }),
      /* @__PURE__ */ jsxs("h2", { className: "text-2xl font-bold text-foreground md:text-3xl", children: [
        loc.city,
        " dental supply — your questions answered"
      ] }),
      /* @__PURE__ */ jsx("div", { className: "mt-6 divide-y divide-border overflow-hidden rounded border border-border bg-card shadow-[var(--shadow-card)]", children: loc.faqs.map((f) => /* @__PURE__ */ jsxs("details", { className: "group p-5", children: [
        /* @__PURE__ */ jsx("summary", { className: "cursor-pointer list-none font-semibold text-foreground transition group-open:text-brand-bright", children: f.q }),
        /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-foreground/80", children: f.a })
      ] }, f.q)) })
    ] }) }),
    /* @__PURE__ */ jsxs("section", { className: "container mx-auto px-4 py-16 md:px-6", children: [
      /* @__PURE__ */ jsx("div", { className: "relative overflow-hidden rounded px-6 py-12 text-brand-foreground md:px-12 md:py-16", style: {
        background: "var(--gradient-brand)"
      }, children: /* @__PURE__ */ jsxs("div", { className: "relative flex flex-col items-start justify-between gap-6 md:flex-row md:items-center", children: [
        /* @__PURE__ */ jsxs("div", { children: [
          /* @__PURE__ */ jsxs("h2", { className: "font-display text-2xl font-extrabold md:text-3xl", children: [
            "Need dental supplies in ",
            loc.city,
            " this week?"
          ] }),
          /* @__PURE__ */ jsxs("p", { className: "mt-2 max-w-xl text-sm text-white/85 md:text-base", children: [
            "Send your list — we'll respond with a formal quote and ",
            loc.city,
            " delivery date within the hour."
          ] })
        ] }),
        /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-3", children: [
          /* @__PURE__ */ jsx(Link, { to: "/quote", children: /* @__PURE__ */ jsxs(Button, { size: "lg", className: "gap-2 bg-white text-brand hover:bg-white/90", children: [
            /* @__PURE__ */ jsx(ClipboardList, { className: "h-4 w-4" }),
            " Request a quote"
          ] }) }),
          /* @__PURE__ */ jsx("a", { href: waLink(`Hello ${SITE.name}, I'm a dentist in ${loc.city} and would like a quote.`), target: "_blank", rel: "noopener noreferrer", children: /* @__PURE__ */ jsxs(Button, { size: "lg", className: "gap-2 text-white", style: {
            background: "#25D366"
          }, children: [
            /* @__PURE__ */ jsx(MessageCircle, { className: "h-4 w-4" }),
            " WhatsApp now"
          ] }) })
        ] })
      ] }) }),
      /* @__PURE__ */ jsxs("p", { className: "mt-10 text-center text-xs text-muted-foreground", children: [
        "We also deliver to:",
        " ",
        LOCATIONS.filter((l) => l.slug !== loc.slug).map((l, i, arr) => /* @__PURE__ */ jsxs("span", { children: [
          /* @__PURE__ */ jsx(Link, { to: "/locations/$city", params: {
            city: l.slug
          }, className: "font-medium text-brand-bright hover:underline", children: l.city }),
          i < arr.length - 1 ? ", " : ""
        ] }, l.slug)),
        "."
      ] })
    ] })
  ] });
}
export {
  LocationPage as component
};
