@thorprovider/blocks 2.0.0 → 3.0.1

package/src/blocks/e-commerce/storefront-hero/storefront-hero.tsx

@@ -1,1283 +0,0 @@
-'use client'
-
-import { useEffect, useState } from 'react'
-import { motion, useReducedMotion } from 'motion/react'
-import { ArrowRight, MapPin, Search, ShoppingBag, Star } from 'lucide-react'
-import type { ComponentProps, ReactNode } from 'react'
-
-import { Badge } from '../../../ui/badge'
-import { Button } from '../../../ui/button'
-import { Card, CardContent } from '../../../ui/card'
-import { Carousel, CarouselContent, CarouselItem, type CarouselApi } from '../../../ui/carousel'
-import { Input } from '../../../ui/input'
-import { cn } from '../../../lib/utils'
-import type { CTA } from '../../../lib/types'
-
-/**
- * Display contract for products featured in the hero. Every popularity,
- * review, or availability field is host-supplied evidence: omitted fields
- * render nothing (honest omission) instead of fabricated defaults.
- */
-export interface FeaturedProduct {
-  id: string
-  name: string
-  /** Current selling price. */
-  price: number
-  /** Real compare-at price. Discount treatments render only from a real `originalPrice > price` pair. */
-  originalPrice?: number
-  /** Image URL or path; omitted entirely when absent or blank (never an empty `src`). */
-  image?: string
-  /** Accessible image description (falls back to `name`). */
-  imageAlt?: string
-  /** Host-supplied brand label; the row renders only when supplied. */
-  brand?: string
-  /** Host-supplied swatch colors; the row renders only when supplied. */
-  colors?: string[]
-  /** Host-supplied rating (0–5); rendered only when supplied. */
-  rating?: number
-  /** Host-supplied review count; rendered only when supplied. */
-  reviewCount?: number
-  /** Host-supplied availability. Absence makes no stock claim; an explicit `false` disables purchase. */
-  inStock?: boolean
-  /** Host-supplied "new" flag; the badge renders only when true. */
-  isNew?: boolean
-  /** Host-supplied badge label for showcase slides (e.g. a category); rendered only when supplied. */
-  tag?: string
-}
-
-export interface HeroImage {
-  src: string
-  alt: string
-}
-
-export interface HeroDepartment {
-  id: string
-  name: string
-  /** Image URL; omitted entirely when absent or blank. */
-  image?: string
-  /** Accessible image description (falls back to `name`). */
-  imageAlt?: string
-  /** Host-supplied count label; rendered only when supplied. */
-  count?: string
-  /** Link destination; renders the chip as a link when present. */
-  href?: string
-}
-
-export interface HeroFeaturedDeal {
-  id: string
-  name: string
-  /** Host-supplied supporting description; rendered only when supplied. */
-  description?: string
-  /** Image URL; omitted entirely when absent or blank. */
-  image?: string
-  /** Accessible image description (falls back to `name`). */
-  imageAlt?: string
-  price: number
-  /** Real compare-at price; rendered struck-through only when greater than `price`. */
-  originalPrice?: number
-  /** Optional call to action shown on the card. */
-  cta?: CTA
-}
-
-export interface HeroStoreLocator {
-  title: string
-  description: string
-  ctaLabel: string
-  /** Link destination for the locator button; falls back to `onLocateStores`. */
-  ctaHref?: string
-}
-
-export interface HeroDeal {
-  id: string
-  /** Deal name shown in the deals bar badge, e.g. a campaign name. */
-  title: string
-  /** Host-supplied discount label (from a real compare-at price); rendered only when supplied. */
-  discount?: string
-  /** Host-supplied countdown text; rendered only when supplied — the block never invents one. */
-  endTime?: string
-}
-
-export interface HeroCategory {
-  id: string
-  name: string
-  /** Image URL; omitted entirely when absent or blank. */
-  image?: string
-  /** Accessible image description (falls back to `name`). */
-  imageAlt?: string
-  /** Host-supplied count label; rendered only when supplied. */
-  count?: string
-  /** Link destination; renders the card arrow as a link when present. */
-  href?: string
-}
-
-/**
- * The bounded presentation surface, reusing the registry's archetype intent
- * vocabulary: `compact` (text-forward hero + product grid), `showcase`
- * (search affordance + rotating product carousel), `editorial` (department
- * navigation + optional deals/locator), `promotional` (deals bar + category
- * grid). The value changes structure, never the data contract.
- */
-export type StorefrontHeroPresentation = 'compact' | 'showcase' | 'editorial' | 'promotional'
-
-export interface StorefrontHeroProps {
-  title: string
-  description: string
-  /** Bounded presentation option; defaults to `compact`. */
-  presentation?: StorefrontHeroPresentation
-  /** ISO 4217 code used to format prices via `Intl.NumberFormat`; never hardcoded. */
-  currency?: string
-  /** Featured products. An empty list renders the hero text-forward with no empty grid chrome. */
-  products: FeaturedProduct[]
-  badge?: string
-  titleAccent?: string
-  primaryCta?: CTA
-  secondaryCta?: CTA
-  /**
-   * Optional editorial image. Rendered as a native `<img>` when `src` is a
-   * non-empty string; omitted entirely when absent or blank (never an empty
-   * `src`).
-   */
-  heroImage?: HeroImage
-  /** `showcase` only. The search input renders only when a handler is supplied. */
-  onSearch?: (query: string) => void
-  /** `editorial` only: department navigation grid. */
-  departments?: HeroDepartment[]
-  /** `editorial` only: featured deal cards. */
-  featuredDeals?: HeroFeaturedDeal[]
-  /** `editorial` only: store locator strip. */
-  storeLocator?: HeroStoreLocator
-  /** `editorial` only: shipping banner text under the CTAs. */
-  shippingInfo?: string
-  /** `promotional` only: rotating deals bar. */
-  deals?: HeroDeal[]
-  /** `promotional` only: category card grid. */
-  categories?: HeroCategory[]
-  /** Milliseconds between rotations (showcase carousel and promotional deals bar; default 3000). */
-  rotationInterval?: number
-  onAddToCart?: (product: FeaturedProduct) => void
-  onBuyNow?: (product: FeaturedProduct) => void
-  onSelectColor?: (product: FeaturedProduct, index: number, color: string) => void
-  onDepartmentClick?: (department: HeroDepartment) => void
-  onShopNow?: (item: HeroFeaturedDeal | HeroDeal) => void
-  onLocateStores?: () => void
-  onCategoryClick?: (category: HeroCategory) => void
-  /** Detail/purchase affordance on product cards and showcase slides. */
-  addToCartLabel?: string
-  buyNowLabel?: string
-  newLabel?: string
-  outOfStockLabel?: string
-  colorsLabel?: string
-  /** Suffix appended to the computed discount percentage (default `% OFF`). */
-  discountSuffixLabel?: string
-  /** `showcase` labels. */
-  searchPlaceholder?: string
-  searchLabel?: string
-  /** `showcase` copy under each slide's product name. */
-  featuredDescription?: string
-  /** `editorial`/`promotional` labels. */
-  shopNowLabel?: string
-  endsInLabel?: string
-  productsLabel?: string
-  viewLabel?: string
-}
-
-function hasRealDiscount(item: Pick<FeaturedProduct, 'price' | 'originalPrice'>): boolean {
-  return (
-    typeof item.originalPrice === 'number' &&
-    Number.isFinite(item.originalPrice) &&
-    item.originalPrice > item.price &&
-    item.price >= 0
-  )
-}
-
-function discountPercent(price: number, originalPrice: number): number {
-  return Math.round(((originalPrice - price) / originalPrice) * 100)
-}
-
-function formatAmount(amount: number, currency?: string): string {
-  if (currency) {
-    return new Intl.NumberFormat(undefined, { style: 'currency', currency }).format(amount)
-  }
-  return new Intl.NumberFormat(undefined, { maximumFractionDigits: 2 }).format(amount)
-}
-
-function CtaButton({
-  cta,
-  variant,
-  className = 'group relative cursor-pointer overflow-hidden px-8 py-6 text-base font-medium',
-  children,
-}: {
-  cta: CTA
-  variant?: ComponentProps<typeof Button>['variant']
-  className?: string
-  children: ReactNode
-}) {
-  if (cta.href) {
-    return (
-      <Button variant={variant} size='lg' className={className} asChild>
-        <a href={cta.href}>{children}</a>
-      </Button>
-    )
-  }
-
-  return (
-    <Button variant={variant} size='lg' className={className}>
-      {children}
-    </Button>
-  )
-}
-
-function HeroHeading({
-  title,
-  titleAccent,
-  badge,
-}: {
-  title: string
-  titleAccent?: string
-  badge?: string
-}) {
-  return (
-    <>
-      {badge && (
-        <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'>
-          {badge}
-        </div>
-      )}
-      <h1 className='text-foreground mt-8 text-4xl font-bold tracking-tight sm:text-5xl md:text-7xl'>
-        {title}{' '}
-        {titleAccent && (
-          <span className='from-primary to-primary/70 bg-gradient-to-r bg-clip-text text-transparent'>
-            {titleAccent}
-          </span>
-        )}
-      </h1>
-    </>
-  )
-}
-
-function EditorialHeading({
-  title,
-  titleAccent,
-  badge,
-}: {
-  title: string
-  titleAccent?: string
-  badge?: string
-}) {
-  return (
-    <>
-      {badge && (
-        <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'>
-          {badge}
-        </div>
-      )}
-      <h1 className='mt-6 text-4xl font-bold tracking-tight text-balance sm:text-5xl md:text-6xl'>
-        {title} {titleAccent && <span className='text-primary'>{titleAccent}</span>}
-      </h1>
-    </>
-  )
-}
-
-interface HeroLabels {
-  addToCartLabel: string
-  buyNowLabel: string
-  newLabel: string
-  outOfStockLabel: string
-  colorsLabel: string
-  discountSuffixLabel: string
-  searchPlaceholder: string
-  searchLabel: string
-  featuredDescription?: string
-  shopNowLabel: string
-  endsInLabel: string
-  productsLabel: string
-  viewLabel: string
-}
-
-function CompactProductCard({
-  product,
-  currency,
-  labels,
-  onAddToCart,
-  onBuyNow,
-  onSelectColor,
-  hasCustomBuyNowLabel,
-}: {
-  product: FeaturedProduct
-  currency?: string
-  labels: HeroLabels
-  onAddToCart?: (product: FeaturedProduct) => void
-  onBuyNow?: (product: FeaturedProduct) => void
-  onSelectColor?: (product: FeaturedProduct, index: number, color: string) => void
-  hasCustomBuyNowLabel: boolean
-}) {
-  const outOfStock = product.inStock === false
-  const onSale = hasRealDiscount(product)
-  // A host-supplied custom action label is a purchase affordance and requires
-  // its handler; the block's default label is a detail affordance that may
-  // render without one. Never infer this from the label's language.
-  const showBuyNow = Boolean(onBuyNow) || !hasCustomBuyNowLabel
-
-  return (
-    <div className='bg-card relative h-full overflow-hidden rounded-lg border shadow-sm transition-shadow hover:shadow-md'>
-      <div className='absolute top-4 left-4 z-10 flex flex-col gap-2'>
-        {product.isNew && (
-          <Badge variant='secondary' className='rounded-full'>{labels.newLabel}</Badge>
-        )}
-        {onSale && (
-          <Badge variant='destructive' className='rounded-full'>
-            {discountPercent(product.price, product.originalPrice as number)}
-            {labels.discountSuffixLabel}
-          </Badge>
-        )}
-      </div>
-
-      <div className='relative aspect-square overflow-hidden'>
-        {product.image && product.image.trim().length > 0 ? (
-          <img
-            src={product.image}
-            alt={product.imageAlt ?? product.name}
-            className='size-full object-cover'
-            loading='lazy'
-          />
-        ) : null}
-        {outOfStock && (
-          <div className='absolute inset-0 flex items-center justify-center bg-black/50'>
-            <span className='rounded bg-white/90 px-3 py-1 text-sm font-medium'>{labels.outOfStockLabel}</span>
-          </div>
-        )}
-      </div>
-
-      <div className='p-4'>
-        {product.brand && product.brand.trim().length > 0 && (
-          <div className='text-muted-foreground mb-1 text-sm font-medium'>{product.brand}</div>
-        )}
-        <h3 className='mb-2 font-medium'>{product.name}</h3>
-
-        <div className='mb-3'>
-          <span className='text-lg font-bold'>{formatAmount(product.price, currency)}</span>
-          {onSale && (
-            <span className='text-muted-foreground ms-2 text-sm line-through'>
-              {formatAmount(product.originalPrice as number, currency)}
-            </span>
-          )}
-        </div>
-
-        {product.colors && product.colors.length > 0 && (
-          <div className='mb-4 flex items-center'>
-            <span className='text-muted-foreground me-2 text-sm'>{labels.colorsLabel}</span>
-            <div className='flex gap-1'>
-              {product.colors.map((color, i) => (
-                <button
-                  key={i}
-                  className='size-5 rounded-full border'
-                  style={{ backgroundColor: color }}
-                  aria-label={`Opción de color ${i + 1}`}
-                  onClick={onSelectColor ? () => onSelectColor(product, i, color) : undefined}
-                />
-              ))}
-            </div>
-          </div>
-        )}
-
-        {typeof product.rating === 'number' && (
-          <div className='mb-4 flex items-center'>
-            <div className='flex'>
-              {[...Array(5)].map((_, i) => (
-                <Star
-                  key={i}
-                  className={`size-4 ${i < Math.floor(product.rating ?? 0) ? 'fill-foreground text-foreground' : 'text-muted-foreground'}`}
-                />
-              ))}
-            </div>
-            {typeof product.reviewCount === 'number' && (
-              <span className='text-muted-foreground ms-2 text-sm'>({product.reviewCount.toLocaleString()})</span>
-            )}
-          </div>
-        )}
-
-        <div className='flex flex-col gap-2'>
-          {onAddToCart && (
-            <Button
-              variant='outline'
-              className='h-9 cursor-pointer px-4 py-2'
-              disabled={outOfStock}
-              onClick={() => onAddToCart(product)}
-            >
-              <ShoppingBag />
-              {labels.addToCartLabel}
-            </Button>
-          )}
-          {showBuyNow && (
-            <Button
-              className='h-9 cursor-pointer px-4 py-2'
-              disabled={outOfStock}
-              onClick={onBuyNow ? () => onBuyNow(product) : undefined}
-            >
-              {labels.buyNowLabel}
-            </Button>
-          )}
-        </div>
-      </div>
-    </div>
-  )
-}
-
-function CompactPresentation({
-  title,
-  description,
-  products,
-  badge,
-  titleAccent,
-  primaryCta,
-  secondaryCta,
-  heroImage,
-  currency,
-  labels,
-  onAddToCart,
-  onBuyNow,
-  onSelectColor,
-  hasCustomBuyNowLabel,
-}: {
-  title: string
-  description: string
-  products: FeaturedProduct[]
-  badge?: string
-  titleAccent?: string
-  primaryCta?: CTA
-  secondaryCta?: CTA
-  heroImage?: HeroImage
-  currency?: string
-  labels: HeroLabels
-  onAddToCart?: (product: FeaturedProduct) => void
-  onBuyNow?: (product: FeaturedProduct) => void
-  onSelectColor?: (product: FeaturedProduct, index: number, color: string) => void
-  hasCustomBuyNowLabel: boolean
-}) {
-  const reduceMotion = useReducedMotion()
-
-  return (
-    <div className='from-primary/5 to-background relative overflow-hidden bg-gradient-to-br'>
-      <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'>
-        <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'
-        >
-          <HeroHeading title={title} titleAccent={titleAccent} badge={badge} />
-          <p className='text-muted-foreground mt-8 text-lg'>{description}</p>
-          {(primaryCta || secondaryCta) && (
-            <div className='mt-10 flex flex-col gap-4 sm:flex-row sm:justify-center xl:justify-start'>
-              {primaryCta && (
-                <CtaButton cta={primaryCta}>
-                  <span className='relative z-10 flex items-center gap-2'>
-                    {primaryCta.label}
-                    <ArrowRight className='transition-transform group-hover:translate-x-1' />
-                  </span>
-                  <span className='bg-primary/5 absolute inset-0 -z-0 opacity-0 transition-opacity group-hover:opacity-100'></span>
-                </CtaButton>
-              )}
-              {secondaryCta && (
-                <CtaButton cta={secondaryCta} variant='outline'>
-                  <span className='relative z-10 flex items-center gap-2'>
-                    <ShoppingBag />
-                    {secondaryCta.label}
-                  </span>
-                </CtaButton>
-              )}
-            </div>
-          )}
-          {heroImage && heroImage.src.trim().length > 0 ? (
-            <img
-              src={heroImage.src}
-              alt={heroImage.alt}
-              className='mt-10 aspect-video w-full rounded-lg object-cover'
-            />
-          ) : null}
-        </motion.div>
-
-        {products.length > 0 && (
-          <div className='w-full max-w-2xl lg:mt-0'>
-            <div className='grid gap-6 sm:grid-cols-2'>
-              {products.map((product, index) => (
-                <motion.div
-                  key={product.id}
-                  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',
-                  }}
-                >
-                  <CompactProductCard
-                    product={product}
-                    currency={currency}
-                    labels={labels}
-                    onAddToCart={onAddToCart}
-                    onBuyNow={onBuyNow}
-                    onSelectColor={onSelectColor}
-                    hasCustomBuyNowLabel={hasCustomBuyNowLabel}
-                  />
-                </motion.div>
-              ))}
-            </div>
-          </div>
-        )}
-      </div>
-
-      <div className='bg-primary/10 absolute -top-32 -right-32 size-96 rounded-full blur-3xl' />
-      <div className='bg-secondary/30 absolute -bottom-32 -left-32 size-96 rounded-full blur-3xl' />
-    </div>
-  )
-}
-
-function ShowcaseSlide({
-  product,
-  currency,
-  labels,
-  onBuyNow,
-}: {
-  product: FeaturedProduct
-  currency?: string
-  labels: HeroLabels
-  onBuyNow?: (product: FeaturedProduct) => void
-}) {
-  const outOfStock = product.inStock === false
-
-  return (
-    <Card className='relative size-full overflow-hidden border-1 py-4'>
-      <CardContent className='px-4'>
-        <div className='relative size-full overflow-hidden rounded-md'>
-          {product.image && product.image.trim().length > 0 ? (
-            <img
-              src={product.image}
-              alt={product.imageAlt ?? product.name}
-              className='h-[500px] w-full object-cover'
-              loading='lazy'
-            />
-          ) : null}
-        </div>
-        <div className='from-background/90 via-background/30 absolute inset-0 bg-linear-to-t to-transparent' />
-
-        <div className='text-background-foreground absolute inset-0 flex flex-col justify-end p-8'>
-          <div className='relative z-10 flex max-w-md flex-col gap-4'>
-            {product.tag && (
-              <Badge className='w-fit rounded-full px-2.5 py-0.5 font-semibold'>{product.tag}</Badge>
-            )}
-            <h2 className='text-4xl font-bold'>{product.name}</h2>
-            {labels.featuredDescription && (
-              <p className='text-background-foreground/80 text-lg'>{labels.featuredDescription}</p>
-            )}
-            <span className='text-3xl font-bold'>{formatAmount(product.price, currency)}</span>
-            <div className='flex items-center gap-4 pt-2'>
-              {onBuyNow && (
-                <Button
-                  size='lg'
-                  className='h-10 cursor-pointer rounded-full px-8'
-                  disabled={outOfStock}
-                  onClick={() => onBuyNow(product)}
-                >
-                  {labels.buyNowLabel}
-                </Button>
-              )}
-              {typeof product.rating === 'number' && (
-                <div className='text-foreground flex items-center gap-1'>
-                  <Star className='fill-foreground size-5' />
-                  <span className='font-medium'>{product.rating}</span>
-                  {typeof product.reviewCount === 'number' && (
-                    <span className='text-foreground/80'>({product.reviewCount})</span>
-                  )}
-                </div>
-              )}
-            </div>
-          </div>
-        </div>
-      </CardContent>
-    </Card>
-  )
-}
-
-function ShowcasePresentation({
-  title,
-  description,
-  products,
-  badge,
-  primaryCta,
-  secondaryCta,
-  currency,
-  labels,
-  onSearch,
-  onBuyNow,
-  rotationInterval,
-}: {
-  title: string
-  description: string
-  products: FeaturedProduct[]
-  badge?: string
-  primaryCta?: CTA
-  secondaryCta?: CTA
-  currency?: string
-  labels: HeroLabels
-  onSearch?: (query: string) => void
-  onBuyNow?: (product: FeaturedProduct) => void
-  rotationInterval: number
-}) {
-  const reduceMotion = useReducedMotion()
-  const [searchQuery, setSearchQuery] = useState('')
-  const [api, setApi] = useState<CarouselApi>()
-  const [currentSlide, setCurrentSlide] = useState(0)
-
-  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 (
-    <section className='from-background to-accent/20 relative bg-linear-to-b'>
-      <div className='relative mx-auto w-full max-w-7xl px-4 py-16 sm:px-6 lg:px-8 lg:py-20'>
-        <div className='grid grid-cols-1 items-center gap-12 lg:grid-cols-2'>
-          <header className='flex flex-col gap-8'>
-            {badge && (
-              <Badge variant='outline' className='flex h-auto w-fit items-center rounded-full px-4 py-2 font-semibold'>
-                {badge}
-              </Badge>
-            )}
-
-            <h1 className='text-5xl leading-tight font-bold text-balance md:text-6xl lg:text-7xl'>{title}</h1>
-
-            <p className='text-muted-foreground max-w-lg text-xl text-balance'>{description}</p>
-
-            {onSearch && (
-              <div className='relative max-w-md'>
-                <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}
-                />
-                <Search className='text-muted-foreground absolute top-1/2 start-4 size-5 -translate-y-1/2' />
-                <Button
-                  size='lg'
-                  className='absolute top-1/2 end-2 h-10 -translate-y-1/2 cursor-pointer rounded-full px-6'
-                  onClick={handleSearch}
-                >
-                  {labels.searchLabel}
-                </Button>
-              </div>
-            )}
-
-            {(primaryCta || secondaryCta) && (
-              <div className='flex items-center gap-4'>
-                {primaryCta && (
-                  <CtaButton cta={primaryCta} className='h-10 cursor-pointer rounded-full px-4'>
-                    <span className='flex items-center gap-2'>
-                      {primaryCta.label}
-                      <ArrowRight />
-                    </span>
-                  </CtaButton>
-                )}
-                {secondaryCta && (
-                  <CtaButton cta={secondaryCta} variant='outline' className='h-10 cursor-pointer rounded-full px-4'>
-                    <span className='flex items-center gap-2'>
-                      <ShoppingBag />
-                      {secondaryCta.label}
-                    </span>
-                  </CtaButton>
-                )}
-              </div>
-            )}
-          </header>
-
-          {products.length > 0 && (
-            <div className='flex flex-col gap-4'>
-              <div className='relative h-[500px] w-full border-0'>
-                <Carousel
-                  className='group size-full'
-                  setApi={setApi}
-                  opts={{
-                    align: 'start',
-                    loop: true,
-                    duration: 20,
-                    skipSnaps: true,
-                  }}
-                >
-                  <CarouselContent className='h-full'>
-                    {products.map(product => (
-                      <CarouselItem key={product.id} className='h-full'>
-                        <ShowcaseSlide product={product} currency={currency} labels={labels} onBuyNow={onBuyNow} />
-                      </CarouselItem>
-                    ))}
-                  </CarouselContent>
-                </Carousel>
-              </div>
-
-              <div className='relative mt-8 flex justify-center gap-3'>
-                {products.map((product, index) => (
-                  <button
-                    key={product.id}
-                    type='button'
-                    onClick={() => {
-                      api?.scrollTo(index)
-                      setCurrentSlide(index)
-                    }}
-                    className={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' : undefined}
-                  />
-                ))}
-              </div>
-            </div>
-          )}
-        </div>
-      </div>
-    </section>
-  )
-}
-
-function EditorialPresentation({
-  title,
-  description,
-  badge,
-  titleAccent,
-  primaryCta,
-  secondaryCta,
-  shippingInfo,
-  departments,
-  featuredDeals,
-  storeLocator,
-  currency,
-  labels,
-  onDepartmentClick,
-  onShopNow,
-  onLocateStores,
-}: {
-  title: string
-  description: string
-  badge?: string
-  titleAccent?: string
-  primaryCta?: CTA
-  secondaryCta?: CTA
-  shippingInfo?: string
-  departments: HeroDepartment[]
-  featuredDeals: HeroFeaturedDeal[]
-  storeLocator?: HeroStoreLocator
-  currency?: string
-  labels: HeroLabels
-  onDepartmentClick?: (department: HeroDepartment) => void
-  onShopNow?: (item: HeroFeaturedDeal | HeroDeal) => void
-  onLocateStores?: () => void
-}) {
-  const departmentChipClasses = 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 (
-    <div className='bg-background relative overflow-hidden'>
-      <div className='relative z-10'>
-        <div className='mx-auto w-full max-w-7xl px-4 py-16 sm:px-6 lg:px-8 lg:py-20'>
-          <div className='mx-auto max-w-4xl text-center'>
-            <EditorialHeading title={title} titleAccent={titleAccent} badge={badge} />
-
-            <p className='text-muted-foreground mx-auto mt-6 max-w-2xl text-lg'>{description}</p>
-
-            {(primaryCta || secondaryCta) && (
-              <div className='mt-8 flex flex-wrap justify-center gap-4'>
-                {primaryCta && (
-                  <CtaButton cta={primaryCta} className='group h-10 cursor-pointer px-4 text-base'>
-                    {primaryCta.label}
-                    <ArrowRight className='transition-transform group-hover:translate-x-1' />
-                  </CtaButton>
-                )}
-                {secondaryCta && (
-                  <CtaButton cta={secondaryCta} variant='outline' className='group h-10 cursor-pointer px-4 text-base'>
-                    {secondaryCta.label}
-                  </CtaButton>
-                )}
-              </div>
-            )}
-
-            {shippingInfo && (
-              <div className='mt-6'>
-                <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'>
-                  <MapPin className='text-primary size-4' aria-hidden='true' />
-                  <span>{shippingInfo}</span>
-                </div>
-              </div>
-            )}
-
-            {departments.length > 0 && (
-              <div className='mt-12 grid grid-cols-3 gap-8'>
-                {departments.map(department => {
-                  const chip = (
-                    <>
-                      {department.image && department.image.trim().length > 0 ? (
-                        <img
-                          src={department.image}
-                          alt={department.imageAlt ?? department.name}
-                          className='bg-card border-border size-16 rounded-full border object-cover'
-                          loading='lazy'
-                        />
-                      ) : null}
-                      <div>
-                        <div className='text-lg font-medium'>{department.name}</div>
-                        {department.count && (
-                          <div className='text-muted-foreground mt-1 text-sm'>{department.count}</div>
-                        )}
-                      </div>
-                    </>
-                  )
-
-                  if (department.href) {
-                    return (
-                      <a
-                        key={department.id}
-                        href={department.href}
-                        className={cn(departmentChipClasses, 'cursor-pointer')}
-                      >
-                        {chip}
-                      </a>
-                    )
-                  }
-
-                  return (
-                    <button
-                      key={department.id}
-                      type='button'
-                      onClick={onDepartmentClick ? () => onDepartmentClick(department) : undefined}
-                      className={cn(departmentChipClasses, 'cursor-pointer')}
-                    >
-                      {chip}
-                    </button>
-                  )
-                })}
-              </div>
-            )}
-
-            {featuredDeals.length > 0 && (
-              <div className='mt-16 grid gap-6 sm:grid-cols-2'>
-                {featuredDeals.map(deal => {
-                  const onSale = hasRealDiscount(deal)
-
-                  return (
-                    <Card key={deal.id} className='mx-auto h-full w-full overflow-hidden border-0 py-0 shadow-lg'>
-                      <CardContent className='p-0'>
-                        <div className='relative aspect-[3/2] overflow-hidden'>
-                          {deal.image && deal.image.trim().length > 0 ? (
-                            <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}
-                          <div className='from-background/90 via-background/30 absolute inset-0 bg-gradient-to-t to-transparent' />
-                          <div className='absolute inset-0 flex items-end p-8'>
-                            <div className='w-full'>
-                              <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'>
-                                <div className='text-center sm:text-left'>
-                                  <h3 className='text-2xl font-bold tracking-tight sm:text-3xl'>{deal.name}</h3>
-                                  {deal.description && (
-                                    <p className='text-muted-foreground mt-1'>{deal.description}</p>
-                                  )}
-                                  <div className='mt-2 flex items-baseline justify-center gap-2 sm:justify-start'>
-                                    <span className='text-lg font-bold'>{formatAmount(deal.price, currency)}</span>
-                                    {onSale && (
-                                      <span className='text-muted-foreground text-sm line-through'>
-                                        {formatAmount(deal.originalPrice as number, currency)}
-                                      </span>
-                                    )}
-                                  </div>
-                                </div>
-                                {(deal.cta?.href || onShopNow) && (
-                                  <div className='flex-shrink-0'>
-                                    {deal.cta?.href ? (
-                                      <Button size='lg' className='group h-10 cursor-pointer px-4' asChild>
-                                        <a href={deal.cta.href}>
-                                          {deal.cta.label}
-                                          <ArrowRight className='transition-transform group-hover:translate-x-1' />
-                                        </a>
-                                      </Button>
-                                    ) : (
-                                      <Button
-                                        size='lg'
-                                        className='group h-10 cursor-pointer px-4'
-                                        onClick={() => onShopNow?.(deal)}
-                                      >
-                                        {deal.cta?.label ?? labels.shopNowLabel}
-                                        <ArrowRight className='transition-transform group-hover:translate-x-1' />
-                                      </Button>
-                                    )}
-                                  </div>
-                                )}
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                      </CardContent>
-                    </Card>
-                  )
-                })}
-              </div>
-            )}
-
-            {storeLocator && (
-              <div className='border-border/50 bg-background/50 mt-8 rounded-lg border p-6 backdrop-blur-sm'>
-                <div className='flex flex-col items-center gap-6 sm:flex-row sm:justify-between'>
-                  <div className='flex items-center gap-4'>
-                    <div className='bg-primary/10 text-primary flex size-12 items-center justify-center rounded-full'>
-                      <MapPin className='size-6' aria-hidden='true' />
-                    </div>
-                    <div className='text-start'>
-                      <h4 className='text-lg font-medium'>{storeLocator.title}</h4>
-                      <p className='text-muted-foreground'>{storeLocator.description}</p>
-                    </div>
-                  </div>
-                  {(storeLocator.ctaHref || onLocateStores) && (
-                    <div>
-                      {storeLocator.ctaHref ? (
-                        <Button variant='outline' className='h-9 cursor-pointer px-4 py-2 whitespace-nowrap' asChild>
-                          <a href={storeLocator.ctaHref}>{storeLocator.ctaLabel}</a>
-                        </Button>
-                      ) : (
-                        <Button
-                          variant='outline'
-                          className='h-9 cursor-pointer px-4 py-2 whitespace-nowrap'
-                          onClick={onLocateStores}
-                        >
-                          {storeLocator.ctaLabel}
-                        </Button>
-                      )}
-                    </div>
-                  )}
-                </div>
-              </div>
-            )}
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-function PromotionalPresentation({
-  title,
-  description,
-  badge,
-  titleAccent,
-  deals,
-  categories,
-  rotationInterval,
-  labels,
-  onShopNow,
-  onCategoryClick,
-}: {
-  title: string
-  description: string
-  badge?: string
-  titleAccent?: string
-  deals: HeroDeal[]
-  categories: HeroCategory[]
-  rotationInterval: number
-  labels: HeroLabels
-  onShopNow?: (item: HeroFeaturedDeal | HeroDeal) => void
-  onCategoryClick?: (category: HeroCategory) => void
-}) {
-  const reduceMotion = useReducedMotion()
-  const [currentDeal, setCurrentDeal] = useState(0)
-
-  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 (
-    <div className='relative'>
-      {deal && (
-        <header className='bg-primary text-primary-foreground sticky top-0 z-50 shadow-md'>
-          <div className='mx-auto w-full max-w-7xl px-4 py-2 sm:px-6 lg:px-8'>
-            <div className='flex items-center justify-center'>
-              <div className='flex w-full max-w-3xl items-center justify-center gap-4'>
-                <div className='flex items-center gap-2'>
-                  <Badge
-                    variant='secondary'
-                    className='bg-primary-foreground text-primary px-2.5 py-0.5 font-semibold'
-                  >
-                    {deal.title}
-                  </Badge>
-                  {deal.discount && <span className='font-semibold'>{deal.discount}</span>}
-                </div>
-                {deal.endTime && (
-                  <span className='hidden sm:inline'>
-                    {labels.endsInLabel} {deal.endTime}
-                  </span>
-                )}
-                {onShopNow && (
-                  <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)}
-                  >
-                    {labels.shopNowLabel} <ArrowRight />
-                  </Button>
-                )}
-              </div>
-            </div>
-          </div>
-        </header>
-      )}
-
-      <main className='mx-auto w-full max-w-7xl px-4 py-8 sm:px-6 lg:px-8'>
-        <div className='mb-12 text-center'>
-          {badge && (
-            <div className='relative inline-block'>
-              <Badge
-                variant='outline'
-                className='mb-4 flex h-auto items-center rounded-full px-3.5 py-1.5 text-sm font-normal'
-              >
-                {badge}
-              </Badge>
-            </div>
-          )}
-          <h1 className='text-4xl font-bold tracking-tight text-balance sm:text-5xl md:text-6xl'>
-            {title}
-            {titleAccent && (
-              <>
-                <br />
-                {titleAccent}
-              </>
-            )}
-          </h1>
-          <p className='text-muted-foreground mx-auto mt-4 max-w-2xl text-lg'>{description}</p>
-        </div>
-
-        {categories.length > 0 && (
-          <div className='grid gap-4 sm:grid-cols-2 lg:grid-cols-4'>
-            {categories.map(category => (
-              <Card key={category.id} className='group relative overflow-hidden py-0 transition-all duration-500'>
-                {category.image && category.image.trim().length > 0 ? (
-                  <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'
-                  />
-                ) : (
-                  <div className='bg-muted aspect-4/5 size-full' />
-                )}
-                <CardContent className='absolute inset-x-0 bottom-0 p-4'>
-                  <div className='mt-1 flex items-center justify-between'>
-                    <div>
-                      <h2 className='text-background dark:text-foreground text-lg font-medium'>{category.name}</h2>
-                      {category.count && (
-                        <span className='text-background/80 dark:text-foreground/80 text-sm'>
-                          {category.count} {labels.productsLabel}
-                        </span>
-                      )}
-                    </div>
-                    {category.href ? (
-                      <Button
-                        variant='secondary'
-                        size='icon'
-                        className='h-9 w-9 cursor-pointer rounded-full backdrop-blur-xs'
-                        aria-label={`${labels.viewLabel} ${category.name}`}
-                        asChild
-                      >
-                        <a href={category.href}>
-                          <ArrowRight />
-                        </a>
-                      </Button>
-                    ) : onCategoryClick ? (
-                      <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)}
-                      >
-                        <ArrowRight />
-                      </Button>
-                    ) : null}
-                  </div>
-                </CardContent>
-              </Card>
-            ))}
-          </div>
-        )}
-      </main>
-    </div>
-  )
-}
-
-export function StorefrontHero({
-  title,
-  description,
-  presentation = 'compact',
-  currency,
-  products,
-  badge,
-  titleAccent,
-  primaryCta,
-  secondaryCta,
-  heroImage,
-  onSearch,
-  departments = [],
-  featuredDeals = [],
-  storeLocator,
-  shippingInfo,
-  deals = [],
-  categories = [],
-  rotationInterval = 3000,
-  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',
-}: StorefrontHeroProps) {
-  // Presence-based, never label-language based: a host-supplied custom action
-  // label is a purchase affordance that must be handler-gated, while the
-  // block's own default label is a non-purchase detail affordance that may
-  // render without a handler (preserving the accepted default detail).
-  const resolvedBuyNowLabel = buyNowLabel ?? 'Ver producto'
-  const hasCustomBuyNowLabel = buyNowLabel !== undefined
-  const labels: HeroLabels = {
-    addToCartLabel,
-    buyNowLabel: resolvedBuyNowLabel,
-    newLabel,
-    outOfStockLabel,
-    colorsLabel,
-    discountSuffixLabel,
-    searchPlaceholder,
-    searchLabel,
-    featuredDescription,
-    shopNowLabel,
-    endsInLabel,
-    productsLabel,
-    viewLabel,
-  }
-
-  if (presentation === 'showcase') {
-    return (
-      <ShowcasePresentation
-        title={title}
-        description={description}
-        products={products}
-        badge={badge}
-        primaryCta={primaryCta}
-        secondaryCta={secondaryCta}
-        currency={currency}
-        labels={labels}
-        onSearch={onSearch}
-        onBuyNow={onBuyNow}
-        rotationInterval={rotationInterval}
-      />
-    )
-  }
-
-  if (presentation === 'editorial') {
-    return (
-      <EditorialPresentation
-        title={title}
-        description={description}
-        badge={badge}
-        titleAccent={titleAccent}
-        primaryCta={primaryCta}
-        secondaryCta={secondaryCta}
-        shippingInfo={shippingInfo}
-        departments={departments}
-        featuredDeals={featuredDeals}
-        storeLocator={storeLocator}
-        currency={currency}
-        labels={labels}
-        onDepartmentClick={onDepartmentClick}
-        onShopNow={onShopNow}
-        onLocateStores={onLocateStores}
-      />
-    )
-  }
-
-  if (presentation === 'promotional') {
-    return (
-      <PromotionalPresentation
-        title={title}
-        description={description}
-        badge={badge}
-        titleAccent={titleAccent}
-        deals={deals}
-        categories={categories}
-        rotationInterval={rotationInterval}
-        labels={labels}
-        onShopNow={onShopNow}
-        onCategoryClick={onCategoryClick}
-      />
-    )
-  }
-
-  return (
-    <CompactPresentation
-      title={title}
-      description={description}
-      products={products}
-      badge={badge}
-      titleAccent={titleAccent}
-      primaryCta={primaryCta}
-      secondaryCta={secondaryCta}
-      heroImage={heroImage}
-      currency={currency}
-      labels={labels}
-      onAddToCart={onAddToCart}
-      onBuyNow={onBuyNow}
-      onSelectColor={onSelectColor}
-      hasCustomBuyNowLabel={hasCustomBuyNowLabel}
-    />
-  )
-}
-
-export default StorefrontHero