import { jsx, Fragment, jsxs } from "react/jsx-runtime";
import { B as Button } from "./index-CY6fYws-.js";
import { u as useTranslations, L as Layout } from "./layout-toNsB0Jp.js";
import { Head } from "@inertiajs/react";
import { ClipboardList, Palette, Paintbrush, Truck } from "lucide-react";
import "@radix-ui/react-slot";
import "class-variance-authority";
import "clsx";
import "tailwind-merge";
import "./input-DfkIsvXR.js";
import "./label-DrpjkvJN.js";
import "@radix-ui/react-label";
import "@icons-pack/react-simple-icons";
import "./select-CsRyyQUa.js";
import "@radix-ui/react-select";
import "./sheet-Bq2cyJmx.js";
import "@radix-ui/react-dialog";
const bespokeHeader = "/build/assets/color%20swatches-Dl8_1uRD.jpg";
function Bespoke({
  product
}) {
  console.log(product);
  const { t } = useTranslations();
  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(Layout, { children: [
    /* @__PURE__ */ jsx(Head, { title: "Bespoke Design" }),
    /* @__PURE__ */ jsx("section", { className: "", children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
      /* @__PURE__ */ jsx("div", { className: "absolute h-full w-full bg-white/30" }),
      /* @__PURE__ */ jsx(
        "img",
        {
          src: bespokeHeader,
          alt: "Bespoke Design",
          className: "aspect-[16/4] object-cover object-center max-sm:aspect-[16/9]"
        }
      ),
      /* @__PURE__ */ jsxs("div", { className: "absolute top-1/2 left-1/2 flex -translate-x-1/2 -translate-y-1/2 flex-col gap-2", children: [
        /* @__PURE__ */ jsx("h1", { className: "text-center font-serif text-5xl font-medium tracking-tight max-md:text-4xl max-sm:text-2xl", children: t("pages.bespoke.sections.banner.title") }),
        /* @__PURE__ */ jsx("p", { className: "text-center text-lg text-gray-800 max-sm:text-sm", children: t("pages.bespoke.sections.banner.subTitle") })
      ] })
    ] }) }),
    /* @__PURE__ */ jsxs("section", { className: "mx-auto flex max-w-screen-2xl flex-col gap-12 px-12 py-18 max-sm:px-8", children: [
      /* @__PURE__ */ jsx("h2", { className: "text-center font-serif text-4xl font-medium max-md:text-2xl", children: t("pages.bespoke.sections.first.title") }),
      /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-4 gap-4 max-md:grid-cols-2 max-sm:grid-cols-1", children: [
        /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center gap-2", children: [
          /* @__PURE__ */ jsx(ClipboardList, { size: 40, color: "#5A1A1A" }),
          /* @__PURE__ */ jsx("p", { className: "text-center font-serif text-xl font-medium", children: t(
            "pages.bespoke.sections.first.card.first.title"
          ) }),
          /* @__PURE__ */ jsx("p", { className: "px-4 text-center text-sm", children: t(
            "pages.bespoke.sections.first.card.first.desc"
          ) })
        ] }),
        /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center gap-2", children: [
          /* @__PURE__ */ jsx(Palette, { size: 40, color: "#5A1A1A" }),
          /* @__PURE__ */ jsx("p", { className: "text-center font-serif text-xl font-medium", children: t(
            "pages.bespoke.sections.first.card.second.title"
          ) }),
          /* @__PURE__ */ jsx("p", { className: "px-4 text-center text-sm", children: t(
            "pages.bespoke.sections.first.card.second.desc"
          ) })
        ] }),
        /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center gap-2", children: [
          /* @__PURE__ */ jsx(Paintbrush, { size: 40, color: "#5A1A1A" }),
          /* @__PURE__ */ jsx("p", { className: "text-center font-serif text-xl font-medium", children: t(
            "pages.bespoke.sections.first.card.third.title"
          ) }),
          /* @__PURE__ */ jsx("p", { className: "px-4 text-center text-sm", children: t(
            "pages.bespoke.sections.first.card.third.desc"
          ) })
        ] }),
        /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center gap-2", children: [
          /* @__PURE__ */ jsx(Truck, { size: 40, color: "#5A1A1A" }),
          /* @__PURE__ */ jsx("p", { className: "text-center font-serif text-xl font-medium", children: t(
            "pages.bespoke.sections.first.card.fourth.title"
          ) }),
          /* @__PURE__ */ jsx("p", { className: "px-4 text-center text-sm", children: t(
            "pages.bespoke.sections.first.card.fourth.desc"
          ) })
        ] })
      ] })
    ] }),
    /* @__PURE__ */ jsxs("section", { className: "mx-auto flex max-w-screen-2xl flex-col gap-12 px-12 py-18 max-sm:px-8", children: [
      /* @__PURE__ */ jsx("h3", { className: "text-center font-serif text-4xl font-medium max-md:text-2xl", children: "Bespoke Product" }),
      /* @__PURE__ */ jsx("div", { className: "grid grid-cols-4 gap-4", children: product.map((item) => /* @__PURE__ */ jsx(
        "img",
        {
          src: item.image_url,
          alt: item.title,
          className: "aspect-[4/5] rounded-lg object-cover object-center"
        }
      )) })
    ] }),
    /* @__PURE__ */ jsxs("section", { className: "mx-auto flex max-w-screen-2xl flex-col items-center gap-8 px-12 py-18 max-sm:px-8", children: [
      /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
        /* @__PURE__ */ jsx("h4", { className: "text-center font-serif text-4xl font-medium max-md:text-2xl", children: t("pages.bespoke.sections.second.title") }),
        /* @__PURE__ */ jsxs("p", { className: "text-center max-md:text-sm", children: [
          t("pages.bespoke.sections.second.desc"),
          " ",
          /* @__PURE__ */ jsx("br", {}),
          " ",
          t("pages.bespoke.sections.second.desc2")
        ] })
      ] }),
      /* @__PURE__ */ jsx(Button, { className: "cursor-pointer", children: t("pages.bespoke.sections.second.button") })
    ] })
  ] }) });
}
export {
  Bespoke as default
};