import { jsx, jsxs, Fragment } from "react/jsx-runtime";
import { m as cn, A as useSiteSettings, F as FAQS, B as Button, H as waLinkFor } from "./router-D4ixsMHb.js";
import { Link } from "@tanstack/react-router";
import * as React from "react";
import * as AccordionPrimitive from "@radix-ui/react-accordion";
import { ChevronDown, HelpCircle, Sparkles, Search, Truck, CreditCard, Wrench, ShieldCheck, MessageCircle, Phone, Mail } from "lucide-react";
import { I as Input } from "./input-Cu7YTZO_.js";
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 Accordion = AccordionPrimitive.Root;
const AccordionItem = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(AccordionPrimitive.Item, { ref, className: cn("border-b", className), ...props }));
AccordionItem.displayName = "AccordionItem";
const AccordionTrigger = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(AccordionPrimitive.Header, { className: "flex", children: /* @__PURE__ */ jsxs(
  AccordionPrimitive.Trigger,
  {
    ref,
    className: cn(
      "flex flex-1 items-center justify-between py-4 text-sm font-medium cursor-pointer transition-all hover:underline text-left [&[data-state=open]>svg]:rotate-180",
      className
    ),
    ...props,
    children: [
      children,
      /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" })
    ]
  }
) }));
AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
const AccordionContent = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
  AccordionPrimitive.Content,
  {
    ref,
    className: "overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
    ...props,
    children: /* @__PURE__ */ jsx("div", { className: cn("pb-4 pt-0", className), children })
  }
));
AccordionContent.displayName = AccordionPrimitive.Content.displayName;
const CATEGORIES = [{
  id: "all",
  label: "All questions",
  icon: HelpCircle
}, {
  id: "ordering",
  label: "Ordering",
  icon: Sparkles
}, {
  id: "delivery",
  label: "Delivery",
  icon: Truck
}, {
  id: "payment",
  label: "Payment",
  icon: CreditCard
}, {
  id: "warranty",
  label: "Warranty & Support",
  icon: Wrench
}, {
  id: "products",
  label: "Products",
  icon: ShieldCheck
}];
function FaqPage() {
  const site = useSiteSettings();
  const [active, setActive] = React.useState("all");
  const [q, setQ] = React.useState("");
  const filtered = FAQS.filter((f) => {
    if (active !== "all" && f.cat !== active) return false;
    if (q.trim()) {
      const needle = q.toLowerCase();
      if (!f.q.toLowerCase().includes(needle) && !f.a.toLowerCase().includes(needle)) return false;
    }
    return true;
  });
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    /* @__PURE__ */ jsxs("section", { className: "relative overflow-hidden border-b border-border", style: {
      background: "var(--gradient-brand)"
    }, children: [
      /* @__PURE__ */ jsx(HelpCircle, { className: "pointer-events-none absolute -right-10 -top-10 h-64 w-64 text-white/10" }),
      /* @__PURE__ */ jsx(Sparkles, { className: "pointer-events-none absolute bottom-6 left-1/3 h-8 w-8 text-white/20" }),
      /* @__PURE__ */ jsx("div", { className: "container relative mx-auto px-4 py-16 md:px-6 md:py-20", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-3xl text-center text-brand-foreground", children: [
        /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-2 rounded-full bg-white/15 px-3 py-1 text-xs font-semibold text-white backdrop-blur", children: [
          /* @__PURE__ */ jsx(HelpCircle, { className: "h-3.5 w-3.5" }),
          " Help center"
        ] }),
        /* @__PURE__ */ jsx("h1", { className: "mt-4 font-display text-3xl font-bold md:text-5xl", children: "How can we help?" }),
        /* @__PURE__ */ jsx("p", { className: "mt-3 text-white/85 md:text-lg", children: "Delivery, payment, warranty and ordering — everything Kenyan dental professionals ask us, answered." }),
        /* @__PURE__ */ jsx("div", { className: "mx-auto mt-7 max-w-xl", children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
          /* @__PURE__ */ jsx(Search, { className: "pointer-events-none absolute left-4 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }),
          /* @__PURE__ */ jsx(Input, { value: q, onChange: (e) => setQ(e.target.value), placeholder: "Search questions, e.g. M-Pesa, delivery, warranty…", className: "h-12 rounded-full border-0 bg-white pl-11 pr-4 text-foreground shadow-lg" })
        ] }) })
      ] }) })
    ] }),
    /* @__PURE__ */ jsx("section", { className: "border-b border-border bg-surface", children: /* @__PURE__ */ jsx("div", { className: "container mx-auto px-4 py-5 md:px-6", children: /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: CATEGORIES.map((c) => {
      const Icon = c.icon;
      const isActive = active === c.id;
      const count = c.id === "all" ? FAQS.length : FAQS.filter((f) => f.cat === c.id).length;
      return /* @__PURE__ */ jsxs("button", { onClick: () => setActive(c.id), className: "inline-flex items-center gap-2 rounded-full border px-4 py-2 text-sm font-medium transition-colors " + (isActive ? "border-primary bg-primary text-primary-foreground shadow-sm" : "border-border bg-background text-muted-foreground hover:border-primary/40 hover:text-foreground"), children: [
        /* @__PURE__ */ jsx(Icon, { className: "h-3.5 w-3.5" }),
        c.label,
        /* @__PURE__ */ jsx("span", { className: "rounded-full px-1.5 text-[10px] font-bold " + (isActive ? "bg-white/20" : "bg-muted text-muted-foreground"), children: count })
      ] }, c.id);
    }) }) }) }),
    /* @__PURE__ */ jsxs("section", { className: "container mx-auto max-w-3xl px-4 py-12 md:px-6", children: [
      filtered.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "rounded border border-dashed border-border bg-card p-10 text-center", children: [
        /* @__PURE__ */ jsx(HelpCircle, { className: "mx-auto h-10 w-10 text-muted-foreground" }),
        /* @__PURE__ */ jsx("h3", { className: "mt-3 text-lg font-semibold", children: "No matching questions" }),
        /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: "Try a different search term — or message us directly and we'll get back to you within a business day." })
      ] }) : /* @__PURE__ */ jsx(Accordion, { type: "single", collapsible: true, className: "w-full space-y-3", children: filtered.map((f, i) => /* @__PURE__ */ jsxs(AccordionItem, { value: `item-${f.cat}-${i}`, className: "overflow-hidden rounded-sm border border-border bg-card shadow-[var(--shadow-card)] data-[state=open]:border-primary/40", children: [
        /* @__PURE__ */ jsx(AccordionTrigger, { className: "px-5 py-4 text-left text-base font-semibold hover:no-underline", children: /* @__PURE__ */ jsxs("span", { className: "flex items-start gap-3", children: [
          /* @__PURE__ */ jsx("span", { className: "mt-0.5 inline-flex h-7 w-7 flex-none items-center justify-center rounded-full bg-primary/10 text-primary", children: /* @__PURE__ */ jsx(HelpCircle, { className: "h-3.5 w-3.5" }) }),
          /* @__PURE__ */ jsx("span", { children: f.q })
        ] }) }),
        /* @__PURE__ */ jsx(AccordionContent, { className: "px-5 pb-5 pl-[60px] text-foreground/80 leading-relaxed", children: f.a })
      ] }, `${f.cat}-${i}`)) }),
      /* @__PURE__ */ jsx("div", { className: "mt-14 overflow-hidden rounded border border-border bg-card shadow-[var(--shadow-card)]", children: /* @__PURE__ */ jsxs("div", { className: "grid gap-0 md:grid-cols-[1.2fr_1fr]", children: [
        /* @__PURE__ */ jsxs("div", { className: "p-8 md:p-10", 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(MessageCircle, { className: "h-3.5 w-3.5" }),
            " Still stuck?"
          ] }),
          /* @__PURE__ */ jsx("h2", { className: "mt-3 font-display text-2xl font-bold text-foreground md:text-3xl", children: "Talk to a real person" }),
          /* @__PURE__ */ jsx("p", { className: "mt-2 text-muted-foreground", children: "Our Eldoret-based team responds to every enquiry within one business day. WhatsApp is fastest." }),
          /* @__PURE__ */ jsxs("div", { className: "mt-5 flex flex-wrap gap-3", children: [
            /* @__PURE__ */ jsx("a", { href: waLinkFor(site.whatsapp, `Hello ${site.name}, I have a question.`), target: "_blank", rel: "noopener noreferrer", children: /* @__PURE__ */ jsxs(Button, { className: "gap-2 text-white", style: {
              background: "#25D366"
            }, children: [
              /* @__PURE__ */ jsx(MessageCircle, { className: "h-4 w-4" }),
              " WhatsApp us"
            ] }) }),
            /* @__PURE__ */ jsx(Link, { to: "/quote", children: /* @__PURE__ */ jsx(Button, { variant: "outline", children: "Request a quote" }) }),
            /* @__PURE__ */ jsx(Link, { to: "/contact", children: /* @__PURE__ */ jsx(Button, { variant: "ghost", children: "Contact form" }) })
          ] })
        ] }),
        /* @__PURE__ */ jsx("div", { className: "border-t border-border bg-surface p-8 md:border-l md:border-t-0 md:p-10", children: /* @__PURE__ */ jsxs("ul", { className: "space-y-4 text-sm", children: [
          site.phoneDisplay && /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-3", children: [
            /* @__PURE__ */ jsx("span", { className: "inline-flex h-9 w-9 items-center justify-center rounded-full bg-primary/10 text-primary", children: /* @__PURE__ */ jsx(Phone, { className: "h-4 w-4" }) }),
            /* @__PURE__ */ jsxs("div", { children: [
              /* @__PURE__ */ jsx("div", { className: "text-xs uppercase tracking-wider text-muted-foreground", children: "Call us" }),
              /* @__PURE__ */ jsx("a", { href: `tel:${site.phone}`, className: "font-semibold text-foreground hover:text-primary", children: site.phoneDisplay })
            ] })
          ] }),
          site.email && /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-3", children: [
            /* @__PURE__ */ jsx("span", { className: "inline-flex h-9 w-9 items-center justify-center rounded-full bg-primary/10 text-primary", children: /* @__PURE__ */ jsx(Mail, { className: "h-4 w-4" }) }),
            /* @__PURE__ */ jsxs("div", { children: [
              /* @__PURE__ */ jsx("div", { className: "text-xs uppercase tracking-wider text-muted-foreground", children: "Email" }),
              /* @__PURE__ */ jsx("a", { href: `mailto:${site.email}`, className: "font-semibold text-foreground hover:text-primary break-all", children: site.email })
            ] })
          ] }),
          /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-3", children: [
            /* @__PURE__ */ jsx("span", { className: "inline-flex h-9 w-9 items-center justify-center rounded-full bg-primary/10 text-primary", children: /* @__PURE__ */ jsx(Truck, { className: "h-4 w-4" }) }),
            /* @__PURE__ */ jsxs("div", { children: [
              /* @__PURE__ */ jsx("div", { className: "text-xs uppercase tracking-wider text-muted-foreground", children: "Hours" }),
              /* @__PURE__ */ jsx("div", { className: "font-semibold text-foreground", children: "Mon–Sat · 8am–6pm EAT" })
            ] })
          ] })
        ] }) })
      ] }) })
    ] })
  ] });
}
export {
  FaqPage as component
};
