@thorprovider/blocks 2.0.0 → 3.0.0

package/dist/blocks/e-commerce/storefront-hero/storefront-hero.js

@@ -0,0 +1,810 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var storefront_hero_exports = {};
+__export(storefront_hero_exports, {
+  StorefrontHero: () => StorefrontHero,
+  default: () => storefront_hero_default
+});
+module.exports = __toCommonJS(storefront_hero_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_react2 = require("motion/react");
+var import_lucide_react = require("lucide-react");
+var import_badge = require("../../../ui/badge.js");
+var import_button = require("../../../ui/button.js");
+var import_card = require("../../../ui/card.js");
+var import_carousel = require("../../../ui/carousel.js");
+var import_input = require("../../../ui/input.js");
+var import_utils = require("../../../lib/utils.js");
+function hasRealDiscount(item) {
+  return typeof item.originalPrice === "number" && Number.isFinite(item.originalPrice) && item.originalPrice > item.price && item.price >= 0;
+}
+function discountPercent(price, originalPrice) {
+  return Math.round((originalPrice - price) / originalPrice * 100);
+}
+function formatAmount(amount, currency) {
+  if (currency) {
+    return new Intl.NumberFormat(void 0, { style: "currency", currency }).format(amount);
+  }
+  return new Intl.NumberFormat(void 0, { maximumFractionDigits: 2 }).format(amount);
+}
+function CtaButton({
+  cta,
+  variant,
+  className = "group relative cursor-pointer overflow-hidden px-8 py-6 text-base font-medium",
+  children
+}) {
+  if (cta.href) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_button.Button, { variant, size: "lg", className, asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { href: cta.href, children }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_button.Button, { variant, size: "lg", className, children });
+}
+function HeroHeading({
+  title,
+  titleAccent,
+  badge
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    badge && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "border-primary/20 bg-primary/5 text-primary inline-flex items-center rounded-full border px-4 py-1.5 text-sm font-medium backdrop-blur-sm", children: badge }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("h1", { className: "text-foreground mt-8 text-4xl font-bold tracking-tight sm:text-5xl md:text-7xl", children: [
+      title,
+      " ",
+      titleAccent && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "from-primary to-primary/70 bg-gradient-to-r bg-clip-text text-transparent", children: titleAccent })
+    ] })
+  ] });
+}
+function EditorialHeading({
+  title,
+  titleAccent,
+  badge
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    badge && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "border-primary/20 bg-primary/5 text-primary inline-flex items-center justify-center rounded-md border px-4 py-1.5 text-sm", children: badge }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("h1", { className: "mt-6 text-4xl font-bold tracking-tight text-balance sm:text-5xl md:text-6xl", children: [
+      title,
+      " ",
+      titleAccent && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-primary", children: titleAccent })
+    ] })
+  ] });
+}
+function CompactProductCard({
+  product,
+  currency,
+  labels,
+  onAddToCart,
+  onBuyNow,
+  onSelectColor,
+  hasCustomBuyNowLabel
+}) {
+  const outOfStock = product.inStock === false;
+  const onSale = hasRealDiscount(product);
+  const showBuyNow = Boolean(onBuyNow) || !hasCustomBuyNowLabel;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "bg-card relative h-full overflow-hidden rounded-lg border shadow-sm transition-shadow hover:shadow-md", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "absolute top-4 left-4 z-10 flex flex-col gap-2", children: [
+      product.isNew && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_badge.Badge, { variant: "secondary", className: "rounded-full", children: labels.newLabel }),
+      onSale && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_badge.Badge, { variant: "destructive", className: "rounded-full", children: [
+        discountPercent(product.price, product.originalPrice),
+        labels.discountSuffixLabel
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative aspect-square overflow-hidden", children: [
+      product.image && product.image.trim().length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "img",
+        {
+          src: product.image,
+          alt: product.imageAlt ?? product.name,
+          className: "size-full object-cover",
+          loading: "lazy"
+        }
+      ) : null,
+      outOfStock && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "absolute inset-0 flex items-center justify-center bg-black/50", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "rounded bg-white/90 px-3 py-1 text-sm font-medium", children: labels.outOfStockLabel }) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "p-4", children: [
+      product.brand && product.brand.trim().length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-muted-foreground mb-1 text-sm font-medium", children: product.brand }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: "mb-2 font-medium", children: product.name }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mb-3", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-lg font-bold", children: formatAmount(product.price, currency) }),
+        onSale && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-muted-foreground ms-2 text-sm line-through", children: formatAmount(product.originalPrice, currency) })
+      ] }),
+      product.colors && product.colors.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mb-4 flex items-center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-muted-foreground me-2 text-sm", children: labels.colorsLabel }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex gap-1", children: product.colors.map((color, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "button",
+          {
+            className: "size-5 rounded-full border",
+            style: { backgroundColor: color },
+            "aria-label": `Opci\xF3n de color ${i + 1}`,
+            onClick: onSelectColor ? () => onSelectColor(product, i, color) : void 0
+          },
+          i
+        )) })
+      ] }),
+      typeof product.rating === "number" && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mb-4 flex items-center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex", children: [...Array(5)].map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_lucide_react.Star,
+          {
+            className: `size-4 ${i < Math.floor(product.rating ?? 0) ? "fill-foreground text-foreground" : "text-muted-foreground"}`
+          },
+          i
+        )) }),
+        typeof product.reviewCount === "number" && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "text-muted-foreground ms-2 text-sm", children: [
+          "(",
+          product.reviewCount.toLocaleString(),
+          ")"
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-2", children: [
+        onAddToCart && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          import_button.Button,
+          {
+            variant: "outline",
+            className: "h-9 cursor-pointer px-4 py-2",
+            disabled: outOfStock,
+            onClick: () => onAddToCart(product),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ShoppingBag, {}),
+              labels.addToCartLabel
+            ]
+          }
+        ),
+        showBuyNow && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_button.Button,
+          {
+            className: "h-9 cursor-pointer px-4 py-2",
+            disabled: outOfStock,
+            onClick: onBuyNow ? () => onBuyNow(product) : void 0,
+            children: labels.buyNowLabel
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+function CompactPresentation({
+  title,
+  description,
+  products,
+  badge,
+  titleAccent,
+  primaryCta,
+  secondaryCta,
+  heroImage,
+  currency,
+  labels,
+  onAddToCart,
+  onBuyNow,
+  onSelectColor,
+  hasCustomBuyNowLabel
+}) {
+  const reduceMotion = (0, import_react2.useReducedMotion)();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "from-primary/5 to-background relative overflow-hidden bg-gradient-to-br", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative z-10 mx-auto w-full max-w-7xl flex flex-col items-center justify-between gap-12 px-4 sm:px-6 lg:px-8 py-16 lg:py-20 xl:flex-row xl:items-start", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        import_react2.motion.div,
+        {
+          initial: reduceMotion ? false : { opacity: 0, y: 24 },
+          animate: { opacity: 1, y: 0 },
+          transition: { duration: 0.5, ease: "easeOut" },
+          className: "mx-auto max-w-xl text-center lg:mx-0 xl:text-left",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HeroHeading, { title, titleAccent, badge }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-muted-foreground mt-8 text-lg", children: description }),
+            (primaryCta || secondaryCta) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mt-10 flex flex-col gap-4 sm:flex-row sm:justify-center xl:justify-start", children: [
+              primaryCta && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(CtaButton, { cta: primaryCta, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "relative z-10 flex items-center gap-2", children: [
+                  primaryCta.label,
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ArrowRight, { className: "transition-transform group-hover:translate-x-1" })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "bg-primary/5 absolute inset-0 -z-0 opacity-0 transition-opacity group-hover:opacity-100" })
+              ] }),
+              secondaryCta && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CtaButton, { cta: secondaryCta, variant: "outline", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "relative z-10 flex items-center gap-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ShoppingBag, {}),
+                secondaryCta.label
+              ] }) })
+            ] }),
+            heroImage && heroImage.src.trim().length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "img",
+              {
+                src: heroImage.src,
+                alt: heroImage.alt,
+                className: "mt-10 aspect-video w-full rounded-lg object-cover"
+              }
+            ) : null
+          ]
+        }
+      ),
+      products.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "w-full max-w-2xl lg:mt-0", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "grid gap-6 sm:grid-cols-2", children: products.map((product, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_react2.motion.div,
+        {
+          initial: reduceMotion ? false : { opacity: 0, y: 24 },
+          whileInView: { opacity: 1, y: 0 },
+          viewport: { once: true, margin: "-40px" },
+          transition: {
+            duration: 0.45,
+            delay: reduceMotion ? 0 : index * 0.1,
+            ease: "easeOut"
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            CompactProductCard,
+            {
+              product,
+              currency,
+              labels,
+              onAddToCart,
+              onBuyNow,
+              onSelectColor,
+              hasCustomBuyNowLabel
+            }
+          )
+        },
+        product.id
+      )) }) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "bg-primary/10 absolute -top-32 -right-32 size-96 rounded-full blur-3xl" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "bg-secondary/30 absolute -bottom-32 -left-32 size-96 rounded-full blur-3xl" })
+  ] });
+}
+function ShowcaseSlide({
+  product,
+  currency,
+  labels,
+  onBuyNow
+}) {
+  const outOfStock = product.inStock === false;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_card.Card, { className: "relative size-full overflow-hidden border-1 py-4", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_card.CardContent, { className: "px-4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "relative size-full overflow-hidden rounded-md", children: product.image && product.image.trim().length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "img",
+      {
+        src: product.image,
+        alt: product.imageAlt ?? product.name,
+        className: "h-[500px] w-full object-cover",
+        loading: "lazy"
+      }
+    ) : null }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "from-background/90 via-background/30 absolute inset-0 bg-linear-to-t to-transparent" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-background-foreground absolute inset-0 flex flex-col justify-end p-8", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative z-10 flex max-w-md flex-col gap-4", children: [
+      product.tag && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_badge.Badge, { className: "w-fit rounded-full px-2.5 py-0.5 font-semibold", children: product.tag }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { className: "text-4xl font-bold", children: product.name }),
+      labels.featuredDescription && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-background-foreground/80 text-lg", children: labels.featuredDescription }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-3xl font-bold", children: formatAmount(product.price, currency) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-4 pt-2", children: [
+        onBuyNow && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_button.Button,
+          {
+            size: "lg",
+            className: "h-10 cursor-pointer rounded-full px-8",
+            disabled: outOfStock,
+            onClick: () => onBuyNow(product),
+            children: labels.buyNowLabel
+          }
+        ),
+        typeof product.rating === "number" && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "text-foreground flex items-center gap-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Star, { className: "fill-foreground size-5" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "font-medium", children: product.rating }),
+          typeof product.reviewCount === "number" && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "text-foreground/80", children: [
+            "(",
+            product.reviewCount,
+            ")"
+          ] })
+        ] })
+      ] })
+    ] }) })
+  ] }) });
+}
+function ShowcasePresentation({
+  title,
+  description,
+  products,
+  badge,
+  primaryCta,
+  secondaryCta,
+  currency,
+  labels,
+  onSearch,
+  onBuyNow,
+  rotationInterval
+}) {
+  const reduceMotion = (0, import_react2.useReducedMotion)();
+  const [searchQuery, setSearchQuery] = (0, import_react.useState)("");
+  const [api, setApi] = (0, import_react.useState)();
+  const [currentSlide, setCurrentSlide] = (0, import_react.useState)(0);
+  (0, import_react.useEffect)(() => {
+    if (!api || products.length <= 1 || reduceMotion) return;
+    const interval = setInterval(() => {
+      const nextSlide = (currentSlide + 1) % products.length;
+      api.scrollTo(nextSlide);
+      setCurrentSlide(nextSlide);
+    }, rotationInterval);
+    return () => clearInterval(interval);
+  }, [api, currentSlide, products.length, reduceMotion, rotationInterval]);
+  const handleSearch = () => {
+    if (onSearch) onSearch(searchQuery);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("section", { className: "from-background to-accent/20 relative bg-linear-to-b", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "relative mx-auto w-full max-w-7xl px-4 py-16 sm:px-6 lg:px-8 lg:py-20", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "grid grid-cols-1 items-center gap-12 lg:grid-cols-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("header", { className: "flex flex-col gap-8", children: [
+      badge && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_badge.Badge, { variant: "outline", className: "flex h-auto w-fit items-center rounded-full px-4 py-2 font-semibold", children: badge }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h1", { className: "text-5xl leading-tight font-bold text-balance md:text-6xl lg:text-7xl", children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-muted-foreground max-w-lg text-xl text-balance", children: description }),
+      onSearch && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative max-w-md", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_input.Input,
+          {
+            type: "search",
+            placeholder: labels.searchPlaceholder,
+            value: searchQuery,
+            onChange: (e) => setSearchQuery(e.target.value),
+            onKeyDown: (e) => {
+              if (e.key === "Enter") handleSearch();
+            },
+            className: "h-14 rounded-full pe-4 pl-12 text-lg",
+            "aria-label": labels.searchPlaceholder
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Search, { className: "text-muted-foreground absolute top-1/2 start-4 size-5 -translate-y-1/2" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_button.Button,
+          {
+            size: "lg",
+            className: "absolute top-1/2 end-2 h-10 -translate-y-1/2 cursor-pointer rounded-full px-6",
+            onClick: handleSearch,
+            children: labels.searchLabel
+          }
+        )
+      ] }),
+      (primaryCta || secondaryCta) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-4", children: [
+        primaryCta && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CtaButton, { cta: primaryCta, className: "h-10 cursor-pointer rounded-full px-4", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "flex items-center gap-2", children: [
+          primaryCta.label,
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ArrowRight, {})
+        ] }) }),
+        secondaryCta && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CtaButton, { cta: secondaryCta, variant: "outline", className: "h-10 cursor-pointer rounded-full px-4", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ShoppingBag, {}),
+          secondaryCta.label
+        ] }) })
+      ] })
+    ] }),
+    products.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "relative h-[500px] w-full border-0", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_carousel.Carousel,
+        {
+          className: "group size-full",
+          setApi,
+          opts: {
+            align: "start",
+            loop: true,
+            duration: 20,
+            skipSnaps: true
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_carousel.CarouselContent, { className: "h-full", children: products.map((product) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_carousel.CarouselItem, { className: "h-full", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ShowcaseSlide, { product, currency, labels, onBuyNow }) }, product.id)) })
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "relative mt-8 flex justify-center gap-3", children: products.map((product, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            api?.scrollTo(index);
+            setCurrentSlide(index);
+          },
+          className: (0, import_utils.cn)(
+            "relative size-3 rounded-full transition-all",
+            currentSlide === index ? "bg-primary" : "bg-foreground/20 hover:bg-foreground/40"
+          ),
+          "aria-label": `Ir a la diapositiva ${index + 1}`,
+          "aria-current": currentSlide === index ? "step" : void 0
+        },
+        product.id
+      )) })
+    ] })
+  ] }) }) });
+}
+function EditorialPresentation({
+  title,
+  description,
+  badge,
+  titleAccent,
+  primaryCta,
+  secondaryCta,
+  shippingInfo,
+  departments,
+  featuredDeals,
+  storeLocator,
+  currency,
+  labels,
+  onDepartmentClick,
+  onShopNow,
+  onLocateStores
+}) {
+  const departmentChipClasses = (0, import_utils.cn)(
+    "flex flex-col items-center gap-4 rounded-lg p-2 text-center outline-none",
+    "transition-opacity hover:opacity-90 focus-visible:ring-2 focus-visible:ring-ring"
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "bg-background relative overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "relative z-10", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mx-auto w-full max-w-7xl px-4 py-16 sm:px-6 lg:px-8 lg:py-20", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mx-auto max-w-4xl text-center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EditorialHeading, { title, titleAccent, badge }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-muted-foreground mx-auto mt-6 max-w-2xl text-lg", children: description }),
+    (primaryCta || secondaryCta) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mt-8 flex flex-wrap justify-center gap-4", children: [
+      primaryCta && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(CtaButton, { cta: primaryCta, className: "group h-10 cursor-pointer px-4 text-base", children: [
+        primaryCta.label,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ArrowRight, { className: "transition-transform group-hover:translate-x-1" })
+      ] }),
+      secondaryCta && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CtaButton, { cta: secondaryCta, variant: "outline", className: "group h-10 cursor-pointer px-4 text-base", children: secondaryCta.label })
+    ] }),
+    shippingInfo && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-6", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "bg-background/80 text-muted-foreground inline-flex items-center gap-2 rounded-full px-4 py-1.5 text-sm backdrop-blur-sm", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.MapPin, { className: "text-primary size-4", "aria-hidden": "true" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: shippingInfo })
+    ] }) }),
+    departments.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-12 grid grid-cols-3 gap-8", children: departments.map((department) => {
+      const chip = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        department.image && department.image.trim().length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "img",
+          {
+            src: department.image,
+            alt: department.imageAlt ?? department.name,
+            className: "bg-card border-border size-16 rounded-full border object-cover",
+            loading: "lazy"
+          }
+        ) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-lg font-medium", children: department.name }),
+          department.count && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-muted-foreground mt-1 text-sm", children: department.count })
+        ] })
+      ] });
+      if (department.href) {
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "a",
+          {
+            href: department.href,
+            className: (0, import_utils.cn)(departmentChipClasses, "cursor-pointer"),
+            children: chip
+          },
+          department.id
+        );
+      }
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: onDepartmentClick ? () => onDepartmentClick(department) : void 0,
+          className: (0, import_utils.cn)(departmentChipClasses, "cursor-pointer"),
+          children: chip
+        },
+        department.id
+      );
+    }) }),
+    featuredDeals.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-16 grid gap-6 sm:grid-cols-2", children: featuredDeals.map((deal) => {
+      const onSale = hasRealDiscount(deal);
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_card.Card, { className: "mx-auto h-full w-full overflow-hidden border-0 py-0 shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_card.CardContent, { className: "p-0", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative aspect-[3/2] overflow-hidden", children: [
+        deal.image && deal.image.trim().length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "img",
+          {
+            src: deal.image,
+            alt: deal.imageAlt ?? deal.name,
+            className: "size-full object-cover object-center transition-transform duration-700 hover:scale-105",
+            loading: "lazy"
+          }
+        ) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "from-background/90 via-background/30 absolute inset-0 bg-gradient-to-t to-transparent" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "absolute inset-0 flex items-end p-8", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "w-full", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "bg-background/80 flex flex-col items-center justify-between gap-6 rounded-lg p-6 backdrop-blur-sm sm:flex-row sm:gap-8", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "text-center sm:text-left", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: "text-2xl font-bold tracking-tight sm:text-3xl", children: deal.name }),
+            deal.description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-muted-foreground mt-1", children: deal.description }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mt-2 flex items-baseline justify-center gap-2 sm:justify-start", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-lg font-bold", children: formatAmount(deal.price, currency) }),
+              onSale && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-muted-foreground text-sm line-through", children: formatAmount(deal.originalPrice, currency) })
+            ] })
+          ] }),
+          (deal.cta?.href || onShopNow) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex-shrink-0", children: deal.cta?.href ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_button.Button, { size: "lg", className: "group h-10 cursor-pointer px-4", asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("a", { href: deal.cta.href, children: [
+            deal.cta.label,
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ArrowRight, { className: "transition-transform group-hover:translate-x-1" })
+          ] }) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            import_button.Button,
+            {
+              size: "lg",
+              className: "group h-10 cursor-pointer px-4",
+              onClick: () => onShopNow?.(deal),
+              children: [
+                deal.cta?.label ?? labels.shopNowLabel,
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ArrowRight, { className: "transition-transform group-hover:translate-x-1" })
+              ]
+            }
+          ) })
+        ] }) }) })
+      ] }) }) }, deal.id);
+    }) }),
+    storeLocator && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "border-border/50 bg-background/50 mt-8 rounded-lg border p-6 backdrop-blur-sm", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col items-center gap-6 sm:flex-row sm:justify-between", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "bg-primary/10 text-primary flex size-12 items-center justify-center rounded-full", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.MapPin, { className: "size-6", "aria-hidden": "true" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "text-start", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h4", { className: "text-lg font-medium", children: storeLocator.title }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-muted-foreground", children: storeLocator.description })
+        ] })
+      ] }),
+      (storeLocator.ctaHref || onLocateStores) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: storeLocator.ctaHref ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_button.Button, { variant: "outline", className: "h-9 cursor-pointer px-4 py-2 whitespace-nowrap", asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { href: storeLocator.ctaHref, children: storeLocator.ctaLabel }) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_button.Button,
+        {
+          variant: "outline",
+          className: "h-9 cursor-pointer px-4 py-2 whitespace-nowrap",
+          onClick: onLocateStores,
+          children: storeLocator.ctaLabel
+        }
+      ) })
+    ] }) })
+  ] }) }) }) });
+}
+function PromotionalPresentation({
+  title,
+  description,
+  badge,
+  titleAccent,
+  deals,
+  categories,
+  rotationInterval,
+  labels,
+  onShopNow,
+  onCategoryClick
+}) {
+  const reduceMotion = (0, import_react2.useReducedMotion)();
+  const [currentDeal, setCurrentDeal] = (0, import_react.useState)(0);
+  (0, import_react.useEffect)(() => {
+    if (deals.length <= 1 || reduceMotion) return;
+    const interval = setInterval(() => {
+      setCurrentDeal((prev) => (prev + 1) % deals.length);
+    }, rotationInterval);
+    return () => clearInterval(interval);
+  }, [deals.length, reduceMotion, rotationInterval]);
+  const deal = deals[currentDeal];
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative", children: [
+    deal && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("header", { className: "bg-primary text-primary-foreground sticky top-0 z-50 shadow-md", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mx-auto w-full max-w-7xl px-4 py-2 sm:px-6 lg:px-8", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex w-full max-w-3xl items-center justify-center gap-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_badge.Badge,
+          {
+            variant: "secondary",
+            className: "bg-primary-foreground text-primary px-2.5 py-0.5 font-semibold",
+            children: deal.title
+          }
+        ),
+        deal.discount && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "font-semibold", children: deal.discount })
+      ] }),
+      deal.endTime && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "hidden sm:inline", children: [
+        labels.endsInLabel,
+        " ",
+        deal.endTime
+      ] }),
+      onShopNow && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        import_button.Button,
+        {
+          variant: "link",
+          size: "sm",
+          className: "text-primary-foreground hover:text-primary-foreground/80 ml-auto h-8 cursor-pointer px-3 text-xs",
+          onClick: () => onShopNow(deal),
+          children: [
+            labels.shopNowLabel,
+            " ",
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ArrowRight, {})
+          ]
+        }
+      )
+    ] }) }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("main", { className: "mx-auto w-full max-w-7xl px-4 py-8 sm:px-6 lg:px-8", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mb-12 text-center", children: [
+        badge && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "relative inline-block", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_badge.Badge,
+          {
+            variant: "outline",
+            className: "mb-4 flex h-auto items-center rounded-full px-3.5 py-1.5 text-sm font-normal",
+            children: badge
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("h1", { className: "text-4xl font-bold tracking-tight text-balance sm:text-5xl md:text-6xl", children: [
+          title,
+          titleAccent && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("br", {}),
+            titleAccent
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-muted-foreground mx-auto mt-4 max-w-2xl text-lg", children: description })
+      ] }),
+      categories.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "grid gap-4 sm:grid-cols-2 lg:grid-cols-4", children: categories.map((category) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_card.Card, { className: "group relative overflow-hidden py-0 transition-all duration-500", children: [
+        category.image && category.image.trim().length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "img",
+          {
+            src: category.image,
+            alt: category.imageAlt ?? category.name,
+            className: "aspect-4/5 size-full object-cover grayscale transition-all duration-500 hover:grayscale-0",
+            width: 400,
+            height: 500,
+            loading: "lazy"
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "bg-muted aspect-4/5 size-full" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_card.CardContent, { className: "absolute inset-x-0 bottom-0 p-4", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mt-1 flex items-center justify-between", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { className: "text-background dark:text-foreground text-lg font-medium", children: category.name }),
+            category.count && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "text-background/80 dark:text-foreground/80 text-sm", children: [
+              category.count,
+              " ",
+              labels.productsLabel
+            ] })
+          ] }),
+          category.href ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_button.Button,
+            {
+              variant: "secondary",
+              size: "icon",
+              className: "h-9 w-9 cursor-pointer rounded-full backdrop-blur-xs",
+              "aria-label": `${labels.viewLabel} ${category.name}`,
+              asChild: true,
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { href: category.href, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ArrowRight, {}) })
+            }
+          ) : onCategoryClick ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_button.Button,
+            {
+              variant: "secondary",
+              size: "icon",
+              className: "h-9 w-9 cursor-pointer rounded-full backdrop-blur-xs",
+              "aria-label": `${labels.viewLabel} ${category.name}`,
+              onClick: () => onCategoryClick(category),
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ArrowRight, {})
+            }
+          ) : null
+        ] }) })
+      ] }, category.id)) })
+    ] })
+  ] });
+}
+function StorefrontHero({
+  title,
+  description,
+  presentation = "compact",
+  currency,
+  products,
+  badge,
+  titleAccent,
+  primaryCta,
+  secondaryCta,
+  heroImage,
+  onSearch,
+  departments = [],
+  featuredDeals = [],
+  storeLocator,
+  shippingInfo,
+  deals = [],
+  categories = [],
+  rotationInterval = 3e3,
+  onAddToCart,
+  onBuyNow,
+  onSelectColor,
+  onDepartmentClick,
+  onShopNow,
+  onLocateStores,
+  onCategoryClick,
+  addToCartLabel = "Agregar al carrito",
+  buyNowLabel,
+  newLabel = "Nuevo",
+  outOfStockLabel = "Agotado",
+  colorsLabel = "Colores:",
+  discountSuffixLabel = "% OFF",
+  searchPlaceholder = "Buscar productos...",
+  searchLabel = "Buscar",
+  featuredDescription,
+  shopNowLabel = "Comprar ahora",
+  endsInLabel = "Termina en",
+  productsLabel = "productos",
+  viewLabel = "Ver"
+}) {
+  const resolvedBuyNowLabel = buyNowLabel ?? "Ver producto";
+  const hasCustomBuyNowLabel = buyNowLabel !== void 0;
+  const labels = {
+    addToCartLabel,
+    buyNowLabel: resolvedBuyNowLabel,
+    newLabel,
+    outOfStockLabel,
+    colorsLabel,
+    discountSuffixLabel,
+    searchPlaceholder,
+    searchLabel,
+    featuredDescription,
+    shopNowLabel,
+    endsInLabel,
+    productsLabel,
+    viewLabel
+  };
+  if (presentation === "showcase") {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      ShowcasePresentation,
+      {
+        title,
+        description,
+        products,
+        badge,
+        primaryCta,
+        secondaryCta,
+        currency,
+        labels,
+        onSearch,
+        onBuyNow,
+        rotationInterval
+      }
+    );
+  }
+  if (presentation === "editorial") {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      EditorialPresentation,
+      {
+        title,
+        description,
+        badge,
+        titleAccent,
+        primaryCta,
+        secondaryCta,
+        shippingInfo,
+        departments,
+        featuredDeals,
+        storeLocator,
+        currency,
+        labels,
+        onDepartmentClick,
+        onShopNow,
+        onLocateStores
+      }
+    );
+  }
+  if (presentation === "promotional") {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      PromotionalPresentation,
+      {
+        title,
+        description,
+        badge,
+        titleAccent,
+        deals,
+        categories,
+        rotationInterval,
+        labels,
+        onShopNow,
+        onCategoryClick
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    CompactPresentation,
+    {
+      title,
+      description,
+      products,
+      badge,
+      titleAccent,
+      primaryCta,
+      secondaryCta,
+      heroImage,
+      currency,
+      labels,
+      onAddToCart,
+      onBuyNow,
+      onSelectColor,
+      hasCustomBuyNowLabel
+    }
+  );
+}
+var storefront_hero_default = StorefrontHero;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  StorefrontHero
+});
+//# sourceMappingURL=storefront-hero.js.map