import { jsxs, Fragment, jsx } from "react/jsx-runtime";
import { Headphones, ShieldCheck, Truck, Phone, MessageCircle, Mail, MapPin, Clock, Send } from "lucide-react";
import { A as useSiteSettings, H as waLinkFor, B as Button } from "./router-D4ixsMHb.js";
import { I as Input } from "./input-Cu7YTZO_.js";
import { L as Label, T as Textarea } from "./label-GLGnKkqd.js";
import { toast } from "sonner";
import { T as ToothIcon } from "./ToothIcon-C3uToVex.js";
import "@tanstack/react-query";
import "@tanstack/react-router";
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 "@radix-ui/react-label";
function ContactPage() {
  const site = useSiteSettings();
  function handleSubmit(e) {
    e.preventDefault();
    toast.success("Message received!", {
      description: "We'll reply within one business day."
    });
    e.target.reset();
  }
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    /* @__PURE__ */ jsx("section", { className: "relative overflow-hidden bg-brand text-brand-foreground bg-tooth-pattern-light", children: /* @__PURE__ */ jsxs("div", { className: "container mx-auto px-4 py-14 md:px-6 md:py-20", children: [
      /* @__PURE__ */ jsxs("div", { className: "max-w-2xl", 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(ToothIcon, { className: "h-3.5 w-3.5" }),
          " We're here for your clinic"
        ] }),
        /* @__PURE__ */ jsx("h1", { className: "mt-4 font-display text-4xl font-extrabold leading-tight md:text-5xl", children: "Talk to a dental supplies specialist." }),
        /* @__PURE__ */ jsxs("p", { className: "mt-3 max-w-xl text-base text-white/85 md:text-lg", children: [
          "Pricing, availability, installation, training — pick the channel that suits you. We reply within ",
          /* @__PURE__ */ jsx("span", { className: "font-semibold text-white", children: "1 business hour" }),
          "."
        ] })
      ] }),
      /* @__PURE__ */ jsx("div", { className: "mt-8 grid gap-3 sm:grid-cols-3", children: [{
        Icon: Headphones,
        t: "1-hr reply",
        d: "On all channels, Mon–Sat"
      }, {
        Icon: ShieldCheck,
        t: "Authentic stock",
        d: "Traceable, manufacturer-backed"
      }, {
        Icon: Truck,
        t: "Nationwide delivery",
        d: "Eldoret HQ — 47 counties"
      }].map(({
        Icon,
        t,
        d
      }) => /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3 rounded border border-white/15 bg-white/10 p-4 backdrop-blur", children: [
        /* @__PURE__ */ jsx(Icon, { className: "h-5 w-5 flex-none text-white" }),
        /* @__PURE__ */ jsxs("div", { children: [
          /* @__PURE__ */ jsx("p", { className: "font-display text-sm font-bold", children: t }),
          /* @__PURE__ */ jsx("p", { className: "text-xs text-white/80", children: d })
        ] })
      ] }, t)) })
    ] }) }),
    /* @__PURE__ */ jsx("section", { className: "container mx-auto px-4 py-12 md:px-6 md:py-16", children: /* @__PURE__ */ jsxs("div", { className: "grid gap-8 lg:grid-cols-[1fr_520px]", children: [
      /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
        /* @__PURE__ */ jsx("div", { className: "grid gap-4 sm:grid-cols-2", children: [{
          Icon: Phone,
          t: "Call us",
          d: site.phoneDisplay,
          href: `tel:${site.phone}`
        }, {
          Icon: MessageCircle,
          t: "WhatsApp",
          d: "Chat with us instantly",
          href: waLinkFor(site.whatsapp, `Hello ${site.name}!`),
          external: true,
          accent: "#25D366"
        }, {
          Icon: Mail,
          t: "Email",
          d: site.email,
          href: `mailto:${site.email}`
        }, {
          Icon: MapPin,
          t: "Visit us",
          d: site.address
        }].map(({
          Icon,
          t,
          d,
          href,
          external,
          accent
        }) => {
          const content = /* @__PURE__ */ jsxs("div", { className: "flex h-full items-start gap-4 rounded border border-border bg-card p-5 shadow-[var(--shadow-card)] transition hover:-translate-y-0.5 hover:border-brand-bright hover:shadow-[var(--shadow-elevated)]", children: [
            /* @__PURE__ */ jsx("div", { className: "inline-flex h-11 w-11 flex-shrink-0 items-center justify-center rounded-sm text-white", style: {
              background: accent ?? "var(--gradient-brand)"
            }, children: /* @__PURE__ */ jsx(Icon, { className: "h-5 w-5" }) }),
            /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
              /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold uppercase tracking-wider text-muted-foreground", children: t }),
              /* @__PURE__ */ jsx("p", { className: "mt-1 truncate font-medium text-foreground", children: d })
            ] })
          ] });
          return href ? /* @__PURE__ */ jsx("a", { href, target: external ? "_blank" : void 0, rel: external ? "noopener noreferrer" : void 0, className: "block", children: content }, t) : /* @__PURE__ */ jsx("div", { children: content }, t);
        }) }),
        /* @__PURE__ */ jsxs("div", { className: "rounded border border-border bg-card p-5 shadow-[var(--shadow-card)]", children: [
          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
            /* @__PURE__ */ jsx(Clock, { className: "h-5 w-5 text-brand-bright" }),
            /* @__PURE__ */ jsx("h2", { className: "font-display text-base font-bold text-foreground", children: "Business hours" })
          ] }),
          /* @__PURE__ */ jsx("dl", { className: "mt-3 divide-y divide-border text-sm", children: [["Monday – Friday", "8:00 am – 6:00 pm"], ["Saturday", "9:00 am – 2:00 pm"], ["Sunday & public holidays", "Closed (WhatsApp monitored)"]].map(([k, v]) => /* @__PURE__ */ jsxs("div", { className: "flex justify-between gap-4 py-2", children: [
            /* @__PURE__ */ jsx("dt", { className: "text-muted-foreground", children: k }),
            /* @__PURE__ */ jsx("dd", { className: "font-medium text-foreground", children: v })
          ] }, k)) })
        ] }),
        /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded border border-border bg-card shadow-[var(--shadow-card)]", children: /* @__PURE__ */ jsx("iframe", { title: "Aquadent Supplies — Eldoret office", src: `https://www.google.com/maps?q=${encodeURIComponent(site.address)}&output=embed`, width: "100%", height: "280", loading: "lazy", referrerPolicy: "no-referrer-when-downgrade", className: "h-[280px] w-full border-0" }) })
      ] }),
      /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className: "h-fit space-y-4 rounded border border-border bg-card p-6 shadow-[var(--shadow-elevated)] md:p-7", children: [
        /* @__PURE__ */ jsxs("div", { children: [
          /* @__PURE__ */ jsx("h2", { className: "font-display text-2xl font-extrabold text-foreground", children: "Send a message" }),
          /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: "Tell us what your clinic needs — we'll reply within one business hour." })
        ] }),
        /* @__PURE__ */ jsxs("div", { className: "grid gap-3 sm:grid-cols-2", children: [
          /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
            /* @__PURE__ */ jsx(Label, { htmlFor: "name", children: "Name *" }),
            /* @__PURE__ */ jsx(Input, { id: "name", required: true })
          ] }),
          /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
            /* @__PURE__ */ jsx(Label, { htmlFor: "email", children: "Email *" }),
            /* @__PURE__ */ jsx(Input, { id: "email", type: "email", required: true })
          ] })
        ] }),
        /* @__PURE__ */ jsxs("div", { className: "grid gap-3 sm:grid-cols-2", children: [
          /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
            /* @__PURE__ */ jsx(Label, { htmlFor: "phone", children: "Phone" }),
            /* @__PURE__ */ jsx(Input, { id: "phone", type: "tel", placeholder: "+254…" })
          ] }),
          /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
            /* @__PURE__ */ jsx(Label, { htmlFor: "clinic", children: "Clinic / hospital" }),
            /* @__PURE__ */ jsx(Input, { id: "clinic", placeholder: "Optional" })
          ] })
        ] }),
        /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
          /* @__PURE__ */ jsx(Label, { htmlFor: "department", children: "How can we help?" }),
          /* @__PURE__ */ jsxs("select", { id: "department", className: "h-10 w-full rounded-md border border-input bg-background px-3 text-sm", defaultValue: "sales", children: [
            /* @__PURE__ */ jsx("option", { value: "sales", children: "Product enquiry / quote" }),
            /* @__PURE__ */ jsx("option", { value: "bulk", children: "Bulk / clinic setup" }),
            /* @__PURE__ */ jsx("option", { value: "service", children: "Service, installation, warranty" }),
            /* @__PURE__ */ jsx("option", { value: "accounts", children: "Accounts & invoicing" }),
            /* @__PURE__ */ jsx("option", { value: "other", children: "Other" })
          ] })
        ] }),
        /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
          /* @__PURE__ */ jsx(Label, { htmlFor: "message", children: "Message *" }),
          /* @__PURE__ */ jsx(Textarea, { id: "message", required: true, rows: 5, placeholder: "What products are you interested in?" })
        ] }),
        /* @__PURE__ */ jsxs(Button, { type: "submit", size: "lg", className: "h-12 w-full gap-2 bg-brand text-brand-foreground hover:bg-brand/90", children: [
          /* @__PURE__ */ jsx(Send, { className: "h-4 w-4" }),
          " Send message"
        ] }),
        /* @__PURE__ */ jsxs("p", { className: "text-center text-xs text-muted-foreground", children: [
          "Prefer to talk? Call ",
          /* @__PURE__ */ jsx("a", { href: `tel:${site.phone}`, className: "font-semibold text-brand-bright hover:underline", children: site.phoneDisplay })
        ] })
      ] })
    ] }) })
  ] });
}
export {
  ContactPage as component
};
