import { jsxs, Fragment, jsx } from "react/jsx-runtime";
import { Link } from "@tanstack/react-router";
import { Check, FileText, MessageCircle, Phone, Mail, Truck, ShieldCheck, ChevronRight } from "lucide-react";
import { g as Route, p as getProductMeta, z as useQuote, S as SITE, o as formatKsh, B as Button, G as waLink, q as mailLink } from "./router-D4ixsMHb.js";
import { P as ProductCard } from "./ProductCard-Dsg5zzJ_.js";
import { toast } from "sonner";
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";
function ProductDetail() {
  const {
    product,
    category,
    related
  } = Route.useLoaderData();
  const meta = getProductMeta(product);
  const {
    add
  } = useQuote();
  const brochureMsg = `Hello ${SITE.name}, please send me the brochure / spec sheet for: ${product.name}${product.sku ? ` (SKU ${product.sku})` : ""}.`;
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    /* @__PURE__ */ jsx("nav", { "aria-label": "Breadcrumb", className: "container mx-auto px-4 pt-6 text-xs text-muted-foreground md:px-6", 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-brand-bright", children: "Home" }) }),
      /* @__PURE__ */ jsx("li", { "aria-hidden": true, children: "/" }),
      /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Link, { to: "/products", className: "hover:text-brand-bright", children: "Products" }) }),
      /* @__PURE__ */ jsx("li", { "aria-hidden": true, children: "/" }),
      /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Link, { to: "/categories/$slug", params: {
        slug: category.slug
      }, className: "hover:text-brand-bright", children: category.name }) }),
      /* @__PURE__ */ jsx("li", { "aria-hidden": true, children: "/" }),
      /* @__PURE__ */ jsx("li", { className: "font-medium text-foreground", children: product.name })
    ] }) }),
    /* @__PURE__ */ jsxs("section", { className: "container mx-auto grid gap-8 px-4 py-8 md:grid-cols-2 md:gap-12 md:px-6 md:py-12", children: [
      /* @__PURE__ */ jsxs("div", { className: "relative overflow-hidden rounded-sm border border-border bg-surface shadow-[var(--shadow-elevated)]", children: [
        /* @__PURE__ */ jsx("img", { src: product.image, alt: `${product.name} — ${category.name} in Kenya`, className: "aspect-square h-full w-full object-cover" }),
        product.badge && /* @__PURE__ */ jsx("span", { className: "absolute left-4 top-4 rounded-full bg-rose-500/95 px-3 py-1 text-xs font-semibold text-white shadow", children: product.badge })
      ] }),
      /* @__PURE__ */ jsxs("div", { children: [
        /* @__PURE__ */ jsx(Link, { to: "/categories/$slug", params: {
          slug: category.slug
        }, className: "inline-flex items-center gap-1.5 rounded-full bg-brand-bright/10 px-3 py-1 text-xs font-semibold text-brand-bright", children: category.name }),
        /* @__PURE__ */ jsx("h1", { className: "mt-3 font-display text-3xl font-extrabold text-foreground md:text-4xl", children: product.name }),
        /* @__PURE__ */ jsxs("p", { className: "mt-2 text-sm text-muted-foreground", children: [
          "By ",
          /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground", children: meta.brand }),
          product.sku ? /* @__PURE__ */ jsxs(Fragment, { children: [
            " · SKU ",
            product.sku
          ] }) : null,
          product.lot ? /* @__PURE__ */ jsxs(Fragment, { children: [
            " · Lot ",
            product.lot
          ] }) : null
        ] }),
        /* @__PURE__ */ jsx("p", { className: "mt-5 text-3xl font-bold text-brand", children: formatKsh(product.price) }),
        /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: "Prices exclude VAT · Bulk pricing available" }),
        /* @__PURE__ */ jsx("p", { className: "mt-5 text-base leading-relaxed text-foreground/85", children: product.description }),
        /* @__PURE__ */ jsx("ul", { className: "mt-6 grid gap-2 sm:grid-cols-2", children: product.features.map((f) => /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-2 text-sm text-foreground/85", children: [
          /* @__PURE__ */ jsx(Check, { className: "mt-0.5 h-4 w-4 flex-none text-brand-bright" }),
          f
        ] }, f)) }),
        /* @__PURE__ */ jsxs("div", { className: "mt-7 flex flex-wrap gap-2", children: [
          /* @__PURE__ */ jsxs(Button, { size: "lg", className: "gap-2 bg-brand text-brand-foreground hover:bg-brand/90", onClick: () => {
            add(product);
            toast.success("Added to quote", {
              description: product.name
            });
          }, children: [
            /* @__PURE__ */ jsx(FileText, { className: "h-4 w-4" }),
            " Add to quote"
          ] }),
          /* @__PURE__ */ jsx("a", { href: waLink(`Hello ${SITE.name}, I'm interested in: ${product.name} (${formatKsh(product.price)}).`), 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" }),
            " WhatsApp"
          ] }) })
        ] }),
        /* @__PURE__ */ jsxs("div", { className: "mt-3 flex flex-wrap gap-2 text-sm", children: [
          /* @__PURE__ */ jsxs("a", { href: waLink(brochureMsg), target: "_blank", rel: "noopener noreferrer", className: "inline-flex items-center gap-1.5 rounded-md border border-border bg-card px-3 py-2 font-medium text-foreground/80 transition hover:border-brand-bright hover:text-brand-bright", children: [
            /* @__PURE__ */ jsx(FileText, { className: "h-4 w-4" }),
            " Request brochure (PDF)"
          ] }),
          /* @__PURE__ */ jsxs("a", { href: `tel:${SITE.phone}`, className: "inline-flex items-center gap-1.5 rounded-md border border-border bg-card px-3 py-2 font-medium text-foreground/80 transition hover:border-brand-bright hover:text-brand-bright", children: [
            /* @__PURE__ */ jsx(Phone, { className: "h-4 w-4" }),
            " Call sales"
          ] }),
          /* @__PURE__ */ jsxs("a", { href: mailLink(`Inquiry: ${product.name}`, `Hi,

I'd like more information about ${product.name}.

Thanks.`), className: "inline-flex items-center gap-1.5 rounded-md border border-border bg-card px-3 py-2 font-medium text-foreground/80 transition hover:border-brand-bright hover:text-brand-bright", children: [
            /* @__PURE__ */ jsx(Mail, { className: "h-4 w-4" }),
            " Email us"
          ] })
        ] }),
        /* @__PURE__ */ jsxs("div", { className: "mt-6 grid gap-3 rounded border border-border bg-card p-4 sm:grid-cols-3", children: [
          /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
            /* @__PURE__ */ jsx(Truck, { className: "mt-0.5 h-5 w-5 text-brand-bright" }),
            /* @__PURE__ */ jsxs("div", { children: [
              /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-foreground", children: "Delivery" }),
              /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground", children: [
                "Nationwide · ",
                meta.leadTimeDays,
                "–",
                meta.leadTimeDays + 2,
                " days"
              ] })
            ] })
          ] }),
          /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
            /* @__PURE__ */ jsx(ShieldCheck, { className: "mt-0.5 h-5 w-5 text-brand-bright" }),
            /* @__PURE__ */ jsxs("div", { children: [
              /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-foreground", children: "Warranty" }),
              /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: meta.warranty })
            ] })
          ] }),
          /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
            /* @__PURE__ */ jsx(Check, { className: "mt-0.5 h-5 w-5 text-brand-bright" }),
            /* @__PURE__ */ jsxs("div", { children: [
              /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-foreground", children: "Authentic" }),
              /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Sourced from authorised channels" })
            ] })
          ] })
        ] })
      ] })
    ] }),
    /* @__PURE__ */ jsx("section", { className: "bg-surface py-12", children: /* @__PURE__ */ jsxs("div", { className: "container mx-auto px-4 md:px-6", children: [
      /* @__PURE__ */ jsx("h2", { className: "text-2xl font-bold text-foreground md:text-3xl", children: "Specifications" }),
      /* @__PURE__ */ jsx("div", { className: "mt-6 overflow-hidden rounded border border-border bg-card", children: /* @__PURE__ */ jsx("table", { className: "w-full text-sm", children: /* @__PURE__ */ jsx("tbody", { children: meta.specs.map((s, i) => /* @__PURE__ */ jsxs("tr", { className: "border-b border-border last:border-0", children: [
        /* @__PURE__ */ jsx("th", { scope: "row", className: "w-1/3 px-4 py-3 text-left font-semibold text-foreground/80", children: s.label }),
        /* @__PURE__ */ jsx("td", { className: "px-4 py-3 text-foreground", children: s.value })
      ] }, `${s.label}-${i}`)) }) }) })
    ] }) }),
    related.length > 0 && /* @__PURE__ */ jsxs("section", { className: "container mx-auto px-4 py-14 md:px-6", children: [
      /* @__PURE__ */ jsxs("div", { className: "flex items-end justify-between gap-4", children: [
        /* @__PURE__ */ jsx("h2", { className: "text-2xl font-bold text-foreground md:text-3xl", children: "Related products" }),
        /* @__PURE__ */ jsxs(Link, { to: "/categories/$slug", params: {
          slug: category.slug
        }, className: "inline-flex items-center gap-1 text-sm font-medium text-brand-bright hover:underline", children: [
          "All ",
          category.name,
          " ",
          /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" })
        ] })
      ] }),
      /* @__PURE__ */ jsx("div", { className: "mt-6 grid grid-cols-2 gap-4 md:grid-cols-3 md:gap-6 lg:grid-cols-4", children: related.map((p) => /* @__PURE__ */ jsx(ProductCard, { product: p }, p.id)) })
    ] })
  ] });
}
export {
  ProductDetail as component
};
