@ecomiq/storefront 2.1.3 → 3.0.0

package/src/storefront-definition/renderer.tsx

@@ -1,1481 +0,0 @@
-import { Fragment, type CSSProperties, type ReactNode } from 'react'
-import type { Collection, ProductSummary } from '@ecomiq/core'
-import { buttonVariants } from '../ui/button'
-import { cn } from '../ui/cn'
-import {
-  resolveStorefrontSectionStyle,
-  scopeStorefrontCss,
-  storefrontSectionCssScope,
-  STOREFRONT_SITE_CSS_SCOPE,
-} from '@ecomiq/storefront-definition'
-import type {
-  StorefrontPage,
-  CollectionGridStorefrontSection,
-  HeroStorefrontSection,
-  ImageTextStorefrontSection,
-  NewsletterStorefrontSection,
-  ProductGridStorefrontSection,
-  PromoBannerStorefrontSection,
-  RichTextStorefrontSection,
-  StorefrontAction,
-  StorefrontDefinition,
-  StorefrontFontFamily,
-  StorefrontImage,
-  StorefrontNavigationItem,
-  StorefrontContentWidth,
-  StorefrontNamedStyle,
-  StorefrontSection,
-  StorefrontSectionStyle,
-  StorefrontSpace,
-  StorefrontThemeTokens,
-  TestimonialsStorefrontSection,
-  FeatureGridStorefrontSection,
-  FaqStorefrontSection,
-  StatsStorefrontSection,
-  LogoWallStorefrontSection,
-  GalleryStorefrontSection,
-  ColumnsStorefrontSection,
-  VideoStorefrontSection,
-} from '@ecomiq/storefront-definition'
-
-export interface DefinitionData {
-  productsBySectionId?: Readonly<
-    Record<string, readonly ProductSummary[] | undefined>
-  >
-  collectionsBySectionId?: Readonly<
-    Record<string, readonly Collection[] | undefined>
-  >
-}
-
-export interface SectionContext {
-  data: DefinitionData
-  locale: string
-  currency: string
-  assets: AssetManifest
-  styles: readonly StorefrontNamedStyle[]
-}
-
-export type AssetManifest = Readonly<Record<string, string>>
-
-export function storefrontImageSrc(
-  image: StorefrontImage | undefined,
-  assets: AssetManifest,
-): string | undefined {
-  if (image === undefined) return undefined
-  if (typeof image === 'string') return image
-  return assets[image.assetId]
-}
-
-export function storefrontImageAlt(
-  image: StorefrontImage | undefined,
-  fallback: string,
-): string {
-  return typeof image === 'object' && image.alt ? image.alt : fallback
-}
-
-export interface SectionProps<
-  TSection extends StorefrontSection,
-> {
-  section: TSection
-  context: SectionContext
-}
-
-export interface SectionRegistry {
-  hero: (
-    props: SectionProps<HeroStorefrontSection>,
-  ) => ReactNode
-  'product-grid': (
-    props: SectionProps<ProductGridStorefrontSection>,
-  ) => ReactNode
-  'collection-grid': (
-    props: SectionProps<CollectionGridStorefrontSection>,
-  ) => ReactNode
-  'promo-banner': (
-    props: SectionProps<PromoBannerStorefrontSection>,
-  ) => ReactNode
-  'image-text': (
-    props: SectionProps<ImageTextStorefrontSection>,
-  ) => ReactNode
-  'feature-grid': (
-    props: SectionProps<FeatureGridStorefrontSection>,
-  ) => ReactNode
-  faq: (props: SectionProps<FaqStorefrontSection>) => ReactNode
-  stats: (props: SectionProps<StatsStorefrontSection>) => ReactNode
-  'logo-wall': (
-    props: SectionProps<LogoWallStorefrontSection>,
-  ) => ReactNode
-  gallery: (props: SectionProps<GalleryStorefrontSection>) => ReactNode
-  columns: (props: SectionProps<ColumnsStorefrontSection>) => ReactNode
-  video: (props: SectionProps<VideoStorefrontSection>) => ReactNode
-  'rich-text': (
-    props: SectionProps<RichTextStorefrontSection>,
-  ) => ReactNode
-  testimonials: (
-    props: SectionProps<TestimonialsStorefrontSection>,
-  ) => ReactNode
-  newsletter: (
-    props: SectionProps<NewsletterStorefrontSection>,
-  ) => ReactNode
-}
-
-export interface DefinitionSectionsProps {
-  definition: StorefrontDefinition
-  pageId?: string
-  data?: DefinitionData
-  locale?: string
-  currency?: string
-  registry?: SectionRegistry
-  assets?: AssetManifest
-}
-
-export function storefrontPageFor(
-  definition: StorefrontDefinition,
-  pageId?: string,
-): StorefrontPage | null {
-  if (pageId === undefined) {
-    return definition.pages.find((page) => page.kind === 'home') ?? null
-  }
-  return definition.pages.find((page) => page.id === pageId) ?? null
-}
-
-export interface DefinitionShellProps {
-  definition: StorefrontDefinition
-  children: ReactNode
-  showChrome?: boolean
-  className?: string
-}
-
-export interface DefinitionRendererProps extends DefinitionSectionsProps {
-  showChrome?: boolean
-  className?: string
-}
-
-type StorefrontThemeStyle = CSSProperties & {
-  '--background': string
-  '--foreground': string
-  '--card': string
-  '--card-foreground': string
-  '--primary': string
-  '--primary-foreground': string
-  '--secondary': string
-  '--secondary-foreground': string
-  '--muted': string
-  '--muted-foreground': string
-  '--accent': string
-  '--accent-foreground': string
-  '--border': string
-  '--input': string
-  '--ring': string
-  '--radius': string
-  '--storefront-font-body': string
-  '--storefront-font-heading': string
-  '--storefront-section-padding': string
-}
-
-function fontStack(font: StorefrontFontFamily): string {
-  if (font === 'editorial-serif') {
-    return 'Iowan Old Style, Baskerville, Times New Roman, serif'
-  }
-  if (font === 'humanist-sans') {
-    return 'Avenir Next, Avenir, Segoe UI, sans-serif'
-  }
-  return 'ui-sans-serif, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif'
-}
-
-function radiusValue(radius: StorefrontThemeTokens['radius']): string {
-  if (radius === 'none') return '0rem'
-  if (radius === 'small') return '0.375rem'
-  if (radius === 'large') return '1rem'
-  return '0.625rem'
-}
-
-function sectionPaddingValue(
-  density: StorefrontThemeTokens['density'],
-): string {
-  if (density === 'compact') return '2.5rem'
-  if (density === 'airy') return '5rem'
-  return '4rem'
-}
-
-function themeStyle(theme: StorefrontThemeTokens): StorefrontThemeStyle {
-  return {
-    '--background': theme.colors.background,
-    '--foreground': theme.colors.foreground,
-    '--card': theme.colors.card,
-    '--card-foreground': theme.colors.cardForeground,
-    '--primary': theme.colors.primary,
-    '--primary-foreground': theme.colors.primaryForeground,
-    '--secondary': theme.colors.secondary,
-    '--secondary-foreground': theme.colors.secondaryForeground,
-    '--muted': theme.colors.muted,
-    '--muted-foreground': theme.colors.mutedForeground,
-    '--accent': theme.colors.accent,
-    '--accent-foreground': theme.colors.accentForeground,
-    '--border': theme.colors.border,
-    '--input': theme.colors.border,
-    '--ring': theme.colors.primary,
-    '--radius': radiusValue(theme.radius),
-    '--storefront-font-body': fontStack(theme.typography.body),
-    '--storefront-font-heading': fontStack(theme.typography.heading),
-    '--storefront-section-padding': sectionPaddingValue(theme.density),
-  }
-}
-
-function sectionSurfaceClass(section: StorefrontSection): string {
-  if (section.surface === 'muted') return 'bg-muted'
-  if (section.surface === 'accent') {
-    return 'bg-accent text-accent-foreground'
-  }
-  return 'bg-background'
-}
-
-const SPACE_VALUES: Record<StorefrontSpace, string> = {
-  none: '0rem',
-  xs: '1rem',
-  sm: '2rem',
-  md: '3.5rem',
-  lg: '5.5rem',
-  xl: '8rem',
-}
-
-const CONTENT_WIDTH_VALUES: Record<StorefrontContentWidth, string> = {
-  narrow: '48rem',
-  contained: '72rem',
-  wide: '90rem',
-  full: '100%',
-}
-
-const TEXT_STEPS: ReadonlyArray<readonly [string, number]> = [
-  ['--text-sm', 0.875],
-  ['--text-base', 1],
-  ['--text-lg', 1.125],
-  ['--text-xl', 1.25],
-  ['--text-2xl', 1.5],
-  ['--text-3xl', 1.875],
-  ['--text-4xl', 2.25],
-  ['--text-5xl', 3],
-  ['--text-6xl', 3.75],
-]
-
-const FONT_SCALE_VALUES = { sm: 0.875, md: 1, lg: 1.125, xl: 1.25 }
-
-/**
- * Superficie derivada del fondo de la seccion: en vez de dejar las tarjetas y
- * los bordes con el token del tema (blanco sobre un fondo oscuro), se acercan
- * al color del texto lo justo para seguir leyendose como una capa aparte.
- */
-function lift(background: string, amount = '8%'): string {
-  return `color-mix(in oklab, ${background}, var(--foreground) ${amount})`
-}
-
-function readableOn(background: string): string {
-  const value = background.slice(1)
-  const channels = [0, 2, 4].map((offset) => {
-    const channel = Number.parseInt(value.slice(offset, offset + 2), 16) / 255
-    return channel <= 0.04045
-      ? channel / 12.92
-      : ((channel + 0.055) / 1.055) ** 2.4
-  })
-  const luminance =
-    0.2126 * (channels[0] ?? 0) +
-    0.7152 * (channels[1] ?? 0) +
-    0.0722 * (channels[2] ?? 0)
-  return luminance > 0.36 ? '#0b0b0c' : '#ffffff'
-}
-
-function sectionFrameStyle(
-  style: StorefrontSectionStyle,
-  assets: AssetManifest,
-): CSSProperties {
-  const variables: Record<string, string> = {}
-
-  const backgroundImageSrc = storefrontImageSrc(style.backgroundImage, assets)
-  if (style.background) {
-    variables['--background'] = style.background
-    variables['--muted'] = style.background
-    variables['--accent'] = style.background
-    variables['--card'] = lift(style.background)
-    variables['--secondary'] = lift(style.background)
-    variables['--card-foreground'] = 'var(--foreground)'
-    variables['--secondary-foreground'] = 'var(--foreground)'
-    if (!style.border) variables['--border'] = lift(style.background, '18%')
-  }
-  if (backgroundImageSrc) {
-    variables['--background'] = 'transparent'
-    variables['--muted'] = 'transparent'
-    variables['--accent'] = 'transparent'
-  }
-  if (style.text) {
-    variables['--foreground'] = style.text
-    variables['--accent-foreground'] = style.text
-    variables['--muted-foreground'] =
-      `color-mix(in oklab, ${style.text} 68%, transparent)`
-  }
-  if (style.accent) {
-    variables['--primary'] = style.accent
-    variables['--primary-foreground'] = readableOn(style.accent)
-    variables['--ring'] = style.accent
-  }
-  if (style.border) {
-    variables['--border'] = style.border
-    variables['--input'] = style.border
-  }
-  if (style.radius) variables['--radius'] = radiusValue(style.radius)
-  if (style.paddingTop) {
-    variables['--storefront-section-padding-top'] = SPACE_VALUES[style.paddingTop]
-  }
-  if (style.paddingBottom) {
-    variables['--storefront-section-padding-bottom'] =
-      SPACE_VALUES[style.paddingBottom]
-  }
-  if (style.width) {
-    variables['--storefront-content-width'] = CONTENT_WIDTH_VALUES[style.width]
-  }
-  if (style.fontScale && style.fontScale !== 'md') {
-    const factor = FONT_SCALE_VALUES[style.fontScale]
-    for (const [token, rem] of TEXT_STEPS) {
-      variables[token] = `${(rem * factor).toFixed(4)}rem`
-    }
-  }
-  if (backgroundImageSrc) {
-    variables.backgroundImage = `url("${backgroundImageSrc}")`
-    variables.backgroundSize = 'cover'
-    variables.backgroundPosition = 'center'
-  }
-
-  return variables as CSSProperties
-}
-
-function sectionFrameClass(
-  style: StorefrontSectionStyle,
-): string | undefined {
-  if (style.visibility === 'desktop') return 'hidden md:block'
-  if (style.visibility === 'mobile') return 'md:hidden'
-  return undefined
-}
-
-export function storefrontPageCss(
-  page: StorefrontPage,
-  styles: readonly StorefrontNamedStyle[],
-): string {
-  return page.sections
-    .filter((section) => section.enabled)
-    .map((section) => {
-      const css = resolveStorefrontSectionStyle(section, styles).css
-      return css
-        ? scopeStorefrontCss(css, storefrontSectionCssScope(section.id))
-        : ''
-    })
-    .filter((css) => css.length > 0)
-    .join('\n')
-}
-
-function StorefrontCustomStyle({ css }: { css: string }) {
-  if (css.length === 0) return null
-  return <style dangerouslySetInnerHTML={{ __html: css }} />
-}
-
-function StorefrontActionLink({
-  action,
-  variant = 'default',
-}: {
-  action: StorefrontAction
-  variant?: 'default' | 'secondary' | 'outline'
-}) {
-  const className = buttonVariants({ variant, size: 'lg' })
-  const isExternal =
-    action.href.startsWith('https://') ||
-    action.href.startsWith('mailto:') ||
-    action.href.startsWith('tel:')
-
-  const opensNewWindow = action.href.startsWith('https://')
-  return (
-    <a
-      href={action.href}
-      className={className}
-      rel={isExternal && opensNewWindow ? 'noreferrer' : undefined}
-      target={isExternal && opensNewWindow ? '_blank' : undefined}
-    >
-      {action.label}
-    </a>
-  )
-}
-
-function StorefrontNavigationLink({
-  item,
-}: {
-  item: StorefrontNavigationItem
-}) {
-  const className =
-    'flex min-h-10 items-center px-2 text-sm text-muted-foreground transition-colors [@media(hover:hover)]:hover:text-foreground'
-  const opensNewWindow = item.external || item.href.startsWith('https://')
-  const isExternal =
-    opensNewWindow ||
-    item.href.startsWith('mailto:') ||
-    item.href.startsWith('tel:')
-
-  return (
-    <a
-      href={item.href}
-      className={className}
-      rel={isExternal && opensNewWindow ? 'noreferrer' : undefined}
-      target={isExternal && opensNewWindow ? '_blank' : undefined}
-    >
-      {item.label}
-    </a>
-  )
-}
-
-function HeroSectionRenderer({
-  section,
-  context,
-}: SectionProps<HeroStorefrontSection>) {
-  const isCentered = section.align === 'center'
-  const heroImageSrc = storefrontImageSrc(section.image, context.assets)
-  return (
-    <section
-      className={cn(
-        'storefront-definition-section relative isolate min-h-[min(72vh,680px)] overflow-hidden',
-        sectionSurfaceClass(section),
-      )}
-      aria-labelledby={`${section.id}-title`}
-      data-storefront-section={section.id}
-    >
-      {heroImageSrc ? (
-        <>
-          <img
-            src={heroImageSrc}
-            alt={storefrontImageAlt(section.image, section.imageAlt)}
-            width={1600}
-            height={900}
-            fetchPriority="high"
-            className="absolute inset-0 -z-20 h-full w-full object-cover"
-          />
-          <div className="absolute inset-0 -z-10 bg-black/55" aria-hidden />
-        </>
-      ) : null}
-      <div
-        className={cn(
-          'mx-auto flex min-h-[inherit] w-full max-w-(--storefront-content-width) items-center px-4',
-          isCentered && 'justify-center text-center',
-        )}
-      >
-        <div
-          className={cn(
-            'max-w-2xl',
-            section.image && 'text-white',
-            isCentered && 'flex flex-col items-center',
-          )}
-        >
-          {section.eyebrow ? (
-            <p className="mb-4 text-xs font-semibold uppercase tracking-[0.16em] opacity-75" data-storefront-text="eyebrow">
-              {section.eyebrow}
-            </p>
-          ) : null}
-          <h1
-            id={`${section.id}-title`}
-            data-storefront-text="title"
-            className="text-balance text-4xl font-semibold leading-[1.02] tracking-[-0.022em] sm:text-5xl lg:text-6xl"
-          >
-            {section.title}
-          </h1>
-          {section.description ? (
-            <p className="mt-5 max-w-[65ch] text-pretty text-base leading-relaxed opacity-80 sm:text-lg" data-storefront-text="description">
-              {section.description}
-            </p>
-          ) : null}
-          {section.primaryAction || section.secondaryAction ? (
-            <div className="mt-8 flex flex-wrap gap-3">
-              {section.primaryAction ? (
-                <StorefrontActionLink action={section.primaryAction} />
-              ) : null}
-              {section.secondaryAction ? (
-                <StorefrontActionLink
-                  action={section.secondaryAction}
-                  variant="outline"
-                />
-              ) : null}
-            </div>
-          ) : null}
-        </div>
-      </div>
-    </section>
-  )
-}
-
-function gridColumnsClass(columns: 2 | 3 | 4): string {
-  if (columns === 2) return 'sm:grid-cols-2'
-  if (columns === 3) return 'sm:grid-cols-2 lg:grid-cols-3'
-  return 'sm:grid-cols-2 lg:grid-cols-4'
-}
-
-function SectionHeading({
-  id,
-  title,
-  description,
-}: {
-  id: string
-  title: string
-  description?: string
-}) {
-  return (
-    <header className="mb-8 max-w-2xl">
-      <h2
-        id={id}
-        data-storefront-text="title"
-        className="text-balance text-3xl font-semibold tracking-[-0.022em]"
-      >
-        {title}
-      </h2>
-      {description ? (
-        <p className="mt-3 text-pretty leading-relaxed text-muted-foreground" data-storefront-text="description">
-          {description}
-        </p>
-      ) : null}
-    </header>
-  )
-}
-
-function ProductGridSectionRenderer({
-  section,
-  context,
-}: SectionProps<ProductGridStorefrontSection>) {
-  const products = (context.data.productsBySectionId?.[section.id] ?? []).slice(
-    0,
-    section.limit,
-  )
-  const formatter = new Intl.NumberFormat(context.locale, {
-    style: 'currency',
-    currency: context.currency,
-  })
-
-  return (
-    <section
-      className={cn(
-        'storefront-definition-section',
-        sectionSurfaceClass(section),
-      )}
-      aria-labelledby={`${section.id}-title`}
-      data-storefront-section={section.id}
-    >
-      <div className="mx-auto w-full max-w-(--storefront-content-width) px-4">
-        <SectionHeading
-          id={`${section.id}-title`}
-          title={section.title}
-          description={section.description}
-        />
-        {products.length > 0 ? (
-          <div
-            className={cn(
-              'grid grid-cols-2 gap-x-4 gap-y-8',
-              gridColumnsClass(section.columns),
-            )}
-          >
-            {products.map((product) => (
-              <a
-                key={product.id}
-                href={`/products/${product.slug}`}
-                className="group rounded-lg focus-visible:ring-2 focus-visible:ring-ring"
-              >
-                <div className="aspect-square overflow-hidden rounded-lg bg-muted outline outline-1 -outline-offset-1 outline-black/10">
-                  {product.imageUrl ? (
-                    <img
-                      src={product.imageUrl}
-                      alt={product.name}
-                      width={640}
-                      height={640}
-                      loading="lazy"
-                      className="h-full w-full object-cover transition-transform duration-300 ease-out [@media(hover:hover)]:group-hover:scale-[1.025] motion-reduce:transition-none"
-                    />
-                  ) : (
-                    <div className="flex h-full items-center justify-center px-4 text-center text-xs text-muted-foreground">
-                      Imagen no disponible
-                    </div>
-                  )}
-                </div>
-                <div className="pt-3">
-                  {product.brand ? (
-                    <p className="text-xs text-muted-foreground">
-                      {product.brand}
-                    </p>
-                  ) : null}
-                  <h3 className="mt-1 line-clamp-2 text-pretty text-sm font-medium leading-snug">
-                    {product.name}
-                  </h3>
-                  <p className="mt-1 text-sm font-semibold tabular-nums">
-                    {formatter.format(product.price)}
-                  </p>
-                </div>
-              </a>
-            ))}
-          </div>
-        ) : (
-          <p className="border-t py-6 text-sm text-muted-foreground">
-            Aún no hay productos para mostrar.
-          </p>
-        )}
-      </div>
-    </section>
-  )
-}
-
-function CollectionGridSectionRenderer({
-  section,
-  context,
-}: SectionProps<CollectionGridStorefrontSection>) {
-  const collections = (
-    context.data.collectionsBySectionId?.[section.id] ?? []
-  ).slice(0, section.limit)
-
-  return (
-    <section
-      className={cn(
-        'storefront-definition-section',
-        sectionSurfaceClass(section),
-      )}
-      aria-labelledby={`${section.id}-title`}
-      data-storefront-section={section.id}
-    >
-      <div className="mx-auto w-full max-w-(--storefront-content-width) px-4">
-        <SectionHeading
-          id={`${section.id}-title`}
-          title={section.title}
-          description={section.description}
-        />
-        {collections.length > 0 ? (
-          <div className={cn('grid gap-4', gridColumnsClass(section.columns))}>
-            {collections.map((collection) => (
-              <a
-                key={collection.id}
-                href={`/collections/${collection.slug}`}
-                className="group relative min-h-72 overflow-hidden rounded-lg bg-muted focus-visible:ring-2 focus-visible:ring-ring"
-              >
-                {collection.imageUrl ? (
-                  <img
-                    src={collection.imageUrl}
-                    alt={collection.name}
-                    width={960}
-                    height={720}
-                    loading="lazy"
-                    className="absolute inset-0 h-full w-full object-cover transition-transform duration-500 ease-out [@media(hover:hover)]:group-hover:scale-105 motion-reduce:transition-none"
-                  />
-                ) : null}
-                <div className="absolute inset-0 bg-black/55" aria-hidden />
-                <div className="absolute inset-x-0 bottom-0 p-5 text-white">
-                  <h3 className="text-balance text-xl font-semibold tracking-[-0.012em]">
-                    {collection.name}
-                  </h3>
-                  {collection.description ? (
-                    <p className="mt-1 line-clamp-2 text-pretty text-sm text-white/80">
-                      {collection.description}
-                    </p>
-                  ) : null}
-                </div>
-              </a>
-            ))}
-          </div>
-        ) : (
-          <p className="border-t py-6 text-sm text-muted-foreground">
-            Aún no hay colecciones para mostrar.
-          </p>
-        )}
-      </div>
-    </section>
-  )
-}
-
-function PromoBannerSectionRenderer({
-  section,
-}: SectionProps<PromoBannerStorefrontSection>) {
-  const isPrimary = section.tone === 'primary'
-  return (
-    <section
-      className={cn(
-        'storefront-definition-section',
-        isPrimary
-          ? 'bg-primary text-primary-foreground'
-          : sectionSurfaceClass(section),
-      )}
-      aria-labelledby={`${section.id}-title`}
-      data-storefront-section={section.id}
-    >
-      <div className="mx-auto flex w-full max-w-(--storefront-content-width) flex-col gap-6 px-4 sm:flex-row sm:items-end sm:justify-between">
-        <div className="max-w-3xl">
-          {section.eyebrow ? (
-            <p className="mb-3 text-xs font-semibold uppercase tracking-[0.16em] opacity-75" data-storefront-text="eyebrow">
-              {section.eyebrow}
-            </p>
-          ) : null}
-          <h2
-            id={`${section.id}-title`}
-            data-storefront-text="title"
-            className="text-balance text-3xl font-semibold tracking-[-0.022em]"
-          >
-            {section.title}
-          </h2>
-          {section.description ? (
-            <p className="mt-3 max-w-[65ch] text-pretty leading-relaxed opacity-80" data-storefront-text="description">
-              {section.description}
-            </p>
-          ) : null}
-        </div>
-        {section.action ? (
-          <StorefrontActionLink
-            action={section.action}
-            variant={isPrimary ? 'secondary' : 'default'}
-          />
-        ) : null}
-      </div>
-    </section>
-  )
-}
-
-function ImageTextSectionRenderer({
-  section,
-  context,
-}: SectionProps<ImageTextStorefrontSection>) {
-  const imageFirst = section.imagePosition === 'left'
-  const imageSrc = storefrontImageSrc(section.image, context.assets)
-  return (
-    <section
-      className={cn(
-        'storefront-definition-section',
-        sectionSurfaceClass(section),
-      )}
-      aria-labelledby={`${section.id}-title`}
-      data-storefront-section={section.id}
-    >
-      <div className="mx-auto grid w-full max-w-(--storefront-content-width) items-center gap-8 px-4 md:grid-cols-2 md:gap-12">
-        <img
-          src={imageSrc}
-          alt={storefrontImageAlt(section.image, section.imageAlt)}
-          width={960}
-          height={720}
-          loading="lazy"
-          className={cn(
-            'aspect-[4/3] h-full w-full rounded-lg object-cover outline outline-1 -outline-offset-1 outline-black/10',
-            !imageFirst && 'md:order-2',
-          )}
-        />
-        <div className={cn(!imageFirst && 'md:order-1')}>
-          {section.eyebrow ? (
-            <p className="mb-3 text-xs font-semibold uppercase tracking-[0.16em] text-muted-foreground" data-storefront-text="eyebrow">
-              {section.eyebrow}
-            </p>
-          ) : null}
-          <h2
-            id={`${section.id}-title`}
-            data-storefront-text="title"
-            className="text-balance text-3xl font-semibold tracking-[-0.022em]"
-          >
-            {section.title}
-          </h2>
-          <p className="mt-4 max-w-[65ch] whitespace-pre-line text-pretty leading-relaxed text-muted-foreground" data-storefront-text="body">
-            {section.body}
-          </p>
-          {section.action ? (
-            <div className="mt-7">
-              <StorefrontActionLink action={section.action} />
-            </div>
-          ) : null}
-        </div>
-      </div>
-    </section>
-  )
-}
-
-function RichTextSectionRenderer({
-  section,
-}: SectionProps<RichTextStorefrontSection>) {
-  const isCentered = section.align === 'center'
-  return (
-    <section
-      className={cn(
-        'storefront-definition-section',
-        sectionSurfaceClass(section),
-      )}
-      aria-labelledby={section.title ? `${section.id}-title` : undefined}
-      data-storefront-section={section.id}
-    >
-      <div
-        className={cn(
-          'mx-auto w-full max-w-3xl px-4',
-          isCentered && 'text-center',
-        )}
-      >
-        {section.title ? (
-          <h2
-            id={`${section.id}-title`}
-            data-storefront-text="title"
-            className="text-balance text-3xl font-semibold tracking-[-0.022em]"
-          >
-            {section.title}
-          </h2>
-        ) : null}
-        <div className={cn('space-y-4', section.title && 'mt-5')}>
-          {section.paragraphs.map((paragraph, index) => (
-            <p
-              key={`${section.id}-paragraph-${index}`}
-              className="whitespace-pre-line text-pretty leading-7 text-muted-foreground"
-            >
-              {paragraph}
-            </p>
-          ))}
-        </div>
-      </div>
-    </section>
-  )
-}
-
-function testimonialColumnsClass(columns: 1 | 2 | 3): string {
-  if (columns === 1) return 'grid-cols-1'
-  if (columns === 2) return 'md:grid-cols-2'
-  return 'md:grid-cols-2 lg:grid-cols-3'
-}
-
-function TestimonialsSectionRenderer({
-  section,
-}: SectionProps<TestimonialsStorefrontSection>) {
-  return (
-    <section
-      className={cn(
-        'storefront-definition-section',
-        sectionSurfaceClass(section),
-      )}
-      aria-labelledby={`${section.id}-title`}
-      data-storefront-section={section.id}
-    >
-      <div className="mx-auto w-full max-w-(--storefront-content-width) px-4">
-        <SectionHeading
-          id={`${section.id}-title`}
-          title={section.title}
-          description={section.description}
-        />
-        <div
-          className={cn('grid gap-5', testimonialColumnsClass(section.columns))}
-        >
-          {section.blocks.map((item) => (
-            <figure
-              key={item.id}
-              className="flex h-full flex-col justify-between border-t pt-6 text-foreground"
-            >
-              <blockquote className="text-pretty text-lg leading-relaxed">
-                “{item.quote}”
-              </blockquote>
-              <figcaption className="mt-8 text-sm">
-                <span className="font-semibold">{item.author}</span>
-                {item.role ? (
-                  <span className="mt-1 block text-muted-foreground">
-                    {item.role}
-                  </span>
-                ) : null}
-              </figcaption>
-            </figure>
-          ))}
-        </div>
-      </div>
-    </section>
-  )
-}
-
-function NewsletterSectionRenderer({
-  section,
-}: SectionProps<NewsletterStorefrontSection>) {
-  return (
-    <section
-      className={cn(
-        'storefront-definition-section',
-        sectionSurfaceClass(section),
-      )}
-      aria-labelledby={`${section.id}-title`}
-      data-storefront-section={section.id}
-    >
-      <div className="mx-auto grid w-full max-w-(--storefront-content-width) gap-7 px-4 md:grid-cols-[1fr_minmax(280px,440px)] md:items-end">
-        <div className="max-w-2xl">
-          {section.eyebrow ? (
-            <p className="mb-3 text-xs font-semibold uppercase tracking-[0.16em] text-muted-foreground" data-storefront-text="eyebrow">
-              {section.eyebrow}
-            </p>
-          ) : null}
-          <h2
-            id={`${section.id}-title`}
-            data-storefront-text="title"
-            className="text-balance text-3xl font-semibold tracking-[-0.022em]"
-          >
-            {section.title}
-          </h2>
-          {section.description ? (
-            <p className="mt-3 text-pretty leading-relaxed text-muted-foreground" data-storefront-text="description">
-              {section.description}
-            </p>
-          ) : null}
-        </div>
-        <form action={section.formAction} method="post" className="flex gap-2">
-          <label htmlFor={`${section.id}-email`} className="sr-only">
-            Correo electrónico
-          </label>
-          <input
-            id={`${section.id}-email`}
-            name="email"
-            type="email"
-            autoComplete="email"
-            required
-            placeholder={section.emailPlaceholder}
-            className="min-h-10 min-w-0 flex-1 rounded-md border border-input bg-background px-3 text-sm text-foreground shadow-sm placeholder:text-muted-foreground"
-          />
-          <button
-            type="submit"
-            className={buttonVariants({ variant: 'default', size: 'lg' })}
-          >
-            {section.buttonLabel}
-          </button>
-        </form>
-      </div>
-    </section>
-  )
-}
-
-
-function FeatureGridSectionRenderer({
-  section,
-}: SectionProps<FeatureGridStorefrontSection>) {
-  return (
-    <section
-      className={cn(
-        'storefront-definition-section',
-        sectionSurfaceClass(section),
-      )}
-      data-storefront-section={section.id}
-    >
-      <div className="mx-auto w-full max-w-(--storefront-content-width) px-4">
-        {section.title ? (
-          <SectionHeading
-            id={`${section.id}-title`}
-            title={section.title}
-            description={section.description}
-          />
-        ) : null}
-        <div className={cn('grid gap-6', gridColumnsClass(section.columns))}>
-          {section.blocks.map((block) => (
-            <div key={block.id}>
-              <h3
-                className="text-base font-semibold"
-                data-storefront-text="title"
-              >
-                {block.title}
-              </h3>
-              {block.description ? (
-                <p
-                  className="mt-2 text-pretty text-sm leading-relaxed text-muted-foreground"
-                  data-storefront-text="description"
-                >
-                  {block.description}
-                </p>
-              ) : null}
-            </div>
-          ))}
-        </div>
-      </div>
-    </section>
-  )
-}
-
-function FaqSectionRenderer({ section }: SectionProps<FaqStorefrontSection>) {
-  return (
-    <section
-      className={cn(
-        'storefront-definition-section',
-        sectionSurfaceClass(section),
-      )}
-      aria-labelledby={`${section.id}-title`}
-      data-storefront-section={section.id}
-    >
-      <div className="mx-auto w-full max-w-3xl px-4">
-        <SectionHeading
-          id={`${section.id}-title`}
-          title={section.title}
-          description={section.description}
-        />
-        <dl className="divide-y border-t">
-          {section.blocks.map((block) => (
-            <div key={block.id} className="py-5">
-              <dt className="text-base font-semibold">{block.question}</dt>
-              <dd className="mt-2 whitespace-pre-line text-pretty leading-relaxed text-muted-foreground">
-                {block.answer}
-              </dd>
-            </div>
-          ))}
-        </dl>
-      </div>
-    </section>
-  )
-}
-
-function StatsSectionRenderer({
-  section,
-}: SectionProps<StatsStorefrontSection>) {
-  return (
-    <section
-      className={cn(
-        'storefront-definition-section',
-        sectionSurfaceClass(section),
-      )}
-      data-storefront-section={section.id}
-    >
-      <div className="mx-auto w-full max-w-(--storefront-content-width) px-4">
-        {section.title ? (
-          <SectionHeading id={`${section.id}-title`} title={section.title} />
-        ) : null}
-        <dl className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
-          {section.blocks.map((block) => (
-            <div key={block.id}>
-              <dt className="text-3xl font-semibold tracking-[-0.02em]">
-                {block.value}
-              </dt>
-              <dd className="mt-1 text-sm text-muted-foreground">
-                {block.label}
-              </dd>
-            </div>
-          ))}
-        </dl>
-      </div>
-    </section>
-  )
-}
-
-function LogoWallSectionRenderer({
-  section,
-  context,
-}: SectionProps<LogoWallStorefrontSection>) {
-  return (
-    <section
-      className={cn(
-        'storefront-definition-section',
-        sectionSurfaceClass(section),
-      )}
-      data-storefront-section={section.id}
-    >
-      <div className="mx-auto w-full max-w-(--storefront-content-width) px-4">
-        {section.title ? (
-          <SectionHeading id={`${section.id}-title`} title={section.title} />
-        ) : null}
-        <ul className="flex flex-wrap items-center justify-center gap-x-10 gap-y-6">
-          {section.blocks.map((block) => {
-            const src = storefrontImageSrc(block.image, context.assets)
-            if (!src) return null
-            return (
-              <li key={block.id}>
-                <img
-                  alt={block.alt}
-                  className="h-8 w-auto opacity-70 transition-opacity hover:opacity-100"
-                  loading="lazy"
-                  src={src}
-                />
-              </li>
-            )
-          })}
-        </ul>
-      </div>
-    </section>
-  )
-}
-
-function GallerySectionRenderer({
-  section,
-  context,
-}: SectionProps<GalleryStorefrontSection>) {
-  return (
-    <section
-      className={cn(
-        'storefront-definition-section',
-        sectionSurfaceClass(section),
-      )}
-      data-storefront-section={section.id}
-    >
-      <div className="mx-auto w-full max-w-(--storefront-content-width) px-4">
-        {section.title ? (
-          <SectionHeading
-            id={`${section.id}-title`}
-            title={section.title}
-            description={section.description}
-          />
-        ) : null}
-        <div className={cn('grid gap-3', gridColumnsClass(section.columns))}>
-          {section.blocks.map((block) => {
-            const src = storefrontImageSrc(block.image, context.assets)
-            if (!src) return null
-            return (
-              <figure key={block.id}>
-                <img
-                  alt={block.alt}
-                  className="aspect-[4/3] w-full rounded-md object-cover"
-                  loading="lazy"
-                  src={src}
-                />
-                {block.caption ? (
-                  <figcaption className="mt-2 text-xs text-muted-foreground">
-                    {block.caption}
-                  </figcaption>
-                ) : null}
-              </figure>
-            )
-          })}
-        </div>
-      </div>
-    </section>
-  )
-}
-
-function ColumnsSectionRenderer({
-  section,
-  context,
-}: SectionProps<ColumnsStorefrontSection>) {
-  const columns = Math.min(Math.max(section.blocks.length, 2), 4) as 2 | 3 | 4
-  return (
-    <section
-      className={cn(
-        'storefront-definition-section',
-        sectionSurfaceClass(section),
-      )}
-      data-storefront-section={section.id}
-    >
-      <div className="mx-auto w-full max-w-(--storefront-content-width) px-4">
-        {section.title ? (
-          <SectionHeading
-            id={`${section.id}-title`}
-            title={section.title}
-            description={section.description}
-          />
-        ) : null}
-        <div className={cn('grid gap-8', gridColumnsClass(columns))}>
-          {section.blocks.map((block) => {
-            const src = storefrontImageSrc(block.image, context.assets)
-            return (
-              <div key={block.id}>
-                {src ? (
-                  <img
-                    alt={block.imageAlt ?? ''}
-                    className="mb-4 aspect-[4/3] w-full rounded-md object-cover"
-                    loading="lazy"
-                    src={src}
-                  />
-                ) : null}
-                <h3
-                  className="text-lg font-semibold"
-                  data-storefront-text="title"
-                >
-                  {block.title}
-                </h3>
-                {block.body ? (
-                  <p className="mt-2 text-pretty leading-relaxed text-muted-foreground">
-                    {block.body}
-                  </p>
-                ) : null}
-                {block.action ? (
-                  <div className="mt-4">
-                    <StorefrontActionLink action={block.action} />
-                  </div>
-                ) : null}
-              </div>
-            )
-          })}
-        </div>
-      </div>
-    </section>
-  )
-}
-
-function VideoSectionRenderer({
-  section,
-  context,
-}: SectionProps<VideoStorefrontSection>) {
-  const poster = storefrontImageSrc(section.poster, context.assets)
-  return (
-    <section
-      className={cn(
-        'storefront-definition-section',
-        sectionSurfaceClass(section),
-      )}
-      data-storefront-section={section.id}
-    >
-      <div className="mx-auto w-full max-w-4xl px-4">
-        {section.title ? (
-          <SectionHeading
-            id={`${section.id}-title`}
-            title={section.title}
-            description={section.description}
-          />
-        ) : null}
-        <div className="overflow-hidden rounded-lg border bg-muted">
-          <video
-            className="aspect-video w-full"
-            controls
-            preload="none"
-            {...(poster ? { poster } : {})}
-            src={section.url}
-          >
-            {section.posterAlt ?? ''}
-          </video>
-        </div>
-      </div>
-    </section>
-  )
-}
-
-export const defaultStorefrontSectionRegistry: SectionRegistry = {
-  hero: HeroSectionRenderer,
-  'product-grid': ProductGridSectionRenderer,
-  'collection-grid': CollectionGridSectionRenderer,
-  'promo-banner': PromoBannerSectionRenderer,
-  'image-text': ImageTextSectionRenderer,
-  'rich-text': RichTextSectionRenderer,
-  testimonials: TestimonialsSectionRenderer,
-  newsletter: NewsletterSectionRenderer,
-  'feature-grid': FeatureGridSectionRenderer,
-  faq: FaqSectionRenderer,
-  stats: StatsSectionRenderer,
-  'logo-wall': LogoWallSectionRenderer,
-  gallery: GallerySectionRenderer,
-  columns: ColumnsSectionRenderer,
-  video: VideoSectionRenderer,
-}
-
-function StorefrontSectionFrame({
-  section,
-  context,
-  children,
-}: {
-  section: StorefrontSection
-  context: SectionContext
-  children: ReactNode
-}) {
-  const resolved = resolveStorefrontSectionStyle(section, context.styles)
-  const style = sectionFrameStyle(resolved, context.assets)
-  const className = sectionFrameClass(resolved)
-  const overlay = resolved.backgroundOverlay
-  const hasFrame =
-    Object.keys(style).length > 0 || className !== undefined || Boolean(overlay)
-  if (!hasFrame) return children
-
-  return (
-    <div
-      className={cn(
-        'storefront-definition-frame text-foreground',
-        Boolean(resolved.backgroundImage) && 'relative isolate',
-        className,
-      )}
-      style={style}
-      data-storefront-section-frame={section.id}
-    >
-      {overlay ? (
-        <div
-          aria-hidden
-          className="absolute inset-0 -z-10 bg-black"
-          style={{ opacity: overlay }}
-        />
-      ) : null}
-      {children}
-    </div>
-  )
-}
-
-export function renderStorefrontSection(
-  section: StorefrontSection,
-  registry: SectionRegistry,
-  context: SectionContext,
-): ReactNode {
-  return (
-    <StorefrontSectionFrame section={section} context={context}>
-      {renderStorefrontSectionBody(section, registry, context)}
-    </StorefrontSectionFrame>
-  )
-}
-
-function renderStorefrontSectionBody(
-  section: StorefrontSection,
-  registry: SectionRegistry,
-  context: SectionContext,
-): ReactNode {
-  if (section.type === 'hero') return registry.hero({ section, context })
-  if (section.type === 'product-grid') {
-    return registry['product-grid']({ section, context })
-  }
-  if (section.type === 'collection-grid') {
-    return registry['collection-grid']({ section, context })
-  }
-  if (section.type === 'promo-banner') {
-    return registry['promo-banner']({ section, context })
-  }
-  if (section.type === 'image-text') {
-    return registry['image-text']({ section, context })
-  }
-  if (section.type === 'rich-text') {
-    return registry['rich-text']({ section, context })
-  }
-  if (section.type === 'testimonials') {
-    return registry.testimonials({ section, context })
-  }
-  if (section.type === 'feature-grid') {
-    return registry['feature-grid']({ section, context })
-  }
-  if (section.type === 'faq') {
-    return registry.faq({ section, context })
-  }
-  if (section.type === 'stats') {
-    return registry.stats({ section, context })
-  }
-  if (section.type === 'logo-wall') {
-    return registry['logo-wall']({ section, context })
-  }
-  if (section.type === 'gallery') {
-    return registry.gallery({ section, context })
-  }
-  if (section.type === 'columns') {
-    return registry.columns({ section, context })
-  }
-  if (section.type === 'video') {
-    return registry.video({ section, context })
-  }
-  return registry.newsletter({ section, context })
-}
-
-function StorefrontChrome({
-  definition,
-  children,
-}: {
-  definition: StorefrontDefinition
-  children: ReactNode
-}) {
-  return (
-    <>
-      <a
-        href="#storefront-definition-main"
-        className="sr-only z-100 rounded-md bg-background px-3 py-2 text-sm focus:not-sr-only focus:fixed focus:left-3 focus:top-3"
-      >
-        Ir al contenido
-      </a>
-      {definition.site.navigation.items.length > 0 ? (
-        <header className="border-b bg-background" data-storefront-chrome="navigation">
-          <nav
-            className="mx-auto flex min-h-14 w-full max-w-(--storefront-content-width) flex-wrap items-center gap-x-4 px-4"
-            aria-label="Navegación principal"
-          >
-            {definition.site.navigation.items.map((item) => (
-              <StorefrontNavigationLink key={item.id} item={item} />
-            ))}
-          </nav>
-        </header>
-      ) : null}
-      <main id="storefront-definition-main">{children}</main>
-      <footer className="border-t bg-muted/40" data-storefront-chrome="footer">
-        <div className="mx-auto flex w-full max-w-(--storefront-content-width) flex-col gap-4 px-4 py-8 text-sm text-muted-foreground sm:flex-row sm:items-center sm:justify-between">
-          {definition.site.footer.text ? <p>{definition.site.footer.text}</p> : null}
-          {definition.site.footer.items.length > 0 ? (
-            <nav
-              className="flex flex-wrap gap-x-3"
-              aria-label="Navegación del pie"
-            >
-              {definition.site.footer.items.map((item) => (
-                <StorefrontNavigationLink key={item.id} item={item} />
-              ))}
-            </nav>
-          ) : null}
-        </div>
-      </footer>
-    </>
-  )
-}
-
-export function DefinitionSections({
-  definition,
-  pageId,
-  data = {},
-  locale = 'es-PE',
-  currency = 'PEN',
-  registry = defaultStorefrontSectionRegistry,
-  assets = {},
-}: DefinitionSectionsProps) {
-  const context: SectionContext = {
-    data,
-    locale,
-    currency,
-    assets,
-    styles: definition.site.styles,
-  }
-
-  const page = storefrontPageFor(definition, pageId)
-  if (!page) return null
-
-  return (
-    <>
-      <StorefrontCustomStyle
-        css={storefrontPageCss(page, definition.site.styles)}
-      />
-      {page.sections
-        .filter((section) => section.enabled)
-        .map((section) => (
-          <Fragment key={section.id}>
-            {renderStorefrontSection(section, registry, context)}
-          </Fragment>
-        ))}
-    </>
-  )
-}
-
-export function DefinitionShell({
-  definition,
-  children,
-  showChrome = true,
-  className,
-}: DefinitionShellProps) {
-  const content = showChrome ? (
-    <StorefrontChrome definition={definition}>{children}</StorefrontChrome>
-  ) : (
-    children
-  )
-
-  return (
-    <div
-      className={cn(
-        'storefront-definition min-h-full bg-background text-foreground antialiased',
-        className,
-      )}
-      style={themeStyle(definition.site.theme)}
-      data-storefront-definition-version={definition.version}
-      data-storefront-definition-revision={definition.revision}
-    >
-      <StorefrontCustomStyle
-        css={scopeStorefrontCss(definition.site.css, STOREFRONT_SITE_CSS_SCOPE)}
-      />
-      {content}
-    </div>
-  )
-}
-
-export function DefinitionRenderer({
-  definition,
-  pageId,
-  data,
-  locale,
-  currency,
-  registry,
-  showChrome = true,
-  className,
-}: DefinitionRendererProps) {
-  return (
-    <DefinitionShell
-      definition={definition}
-      showChrome={showChrome}
-      className={className}
-    >
-      <DefinitionSections
-        definition={definition}
-        pageId={pageId}
-        data={data}
-        locale={locale}
-        currency={currency}
-        registry={registry}
-      />
-    </DefinitionShell>
-  )
-}