@fayz-ai/storefront 0.6.0 → 0.7.0

package/src/components/ProductEnquiryForm.tsx

@@ -0,0 +1,175 @@
+import React, { useState } from 'react'
+import { Mail, MessageCircle, Send } from 'lucide-react'
+import { getShopProvider } from '@fayz-ai/shop/runtime'
+import type { Product } from '@fayz-ai/shop/types'
+import { useStorefrontConfig } from '../config'
+import { storefrontComponentContracts } from '../component-selectors'
+import { TID } from '../testids'
+
+export interface ProductEnquiryFormProps {
+  product: Product
+  onSuccess?: () => void
+}
+
+function defaultSubject(prefix: string, product: Product): string {
+  return `${prefix}: ${product.name}`
+}
+
+function buildWhatsAppHref(url: string, product: Product): string {
+  const text = encodeURIComponent(`Hello, I would like more information about ${product.name}.`)
+  const sep = url.includes('?') ? '&' : '?'
+  return `${url}${sep}text=${text}`
+}
+
+export function ProductEnquiryForm({ product, onSuccess }: ProductEnquiryFormProps) {
+  const config = useStorefrontConfig()
+  const [customerName, setCustomerName] = useState('')
+  const [customerEmail, setCustomerEmail] = useState('')
+  const [customerPhone, setCustomerPhone] = useState('')
+  const [subject, setSubject] = useState(defaultSubject(config.enquiry.subjectPrefix, product))
+  const [message, setMessage] = useState(`I would like more information about ${product.name}.`)
+  const [status, setStatus] = useState<'idle' | 'submitting' | 'success' | 'error'>('idle')
+  const [error, setError] = useState<string | null>(null)
+
+  const submit = async (event: React.FormEvent) => {
+    event.preventDefault()
+    setStatus('submitting')
+    setError(null)
+    try {
+      const provider = getShopProvider()
+      if (provider.createProductEnquiry) {
+        await provider.createProductEnquiry({
+          productId: product.id,
+          productName: product.name,
+          productSlug: product.slug,
+          customerName,
+          customerEmail,
+          customerPhone: customerPhone || undefined,
+          subject,
+          message,
+          sourceUrl: typeof window === 'undefined' ? undefined : window.location.href,
+          metadata: { sku: product.sku, categoryName: product.categoryName },
+        })
+      } else if (config.enquiry.email) {
+        window.location.href = `mailto:${config.enquiry.email}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(message)}`
+      }
+      setStatus('success')
+      onSuccess?.()
+    } catch (e) {
+      setStatus('error')
+      setError(e instanceof Error ? e.message : String(e))
+    }
+  }
+
+  return (
+    <form
+      {...storefrontComponentContracts.productDetail.enquiryForm}
+      onSubmit={submit}
+      className="space-y-4"
+    >
+      <div className="grid gap-4 sm:grid-cols-2">
+        <label className="space-y-1.5 text-sm font-medium">
+          <span>Your name</span>
+          <input
+            data-testid={TID.enquiryName}
+            required
+            value={customerName}
+            onChange={(e) => setCustomerName(e.target.value)}
+            className="w-full border bg-background px-3 py-2 outline-none focus:border-primary"
+            style={{ borderRadius: 'var(--sf-radius-input)' }}
+          />
+        </label>
+        <label className="space-y-1.5 text-sm font-medium">
+          <span>Your email</span>
+          <input
+            data-testid={TID.enquiryEmail}
+            required
+            type="email"
+            value={customerEmail}
+            onChange={(e) => setCustomerEmail(e.target.value)}
+            className="w-full border bg-background px-3 py-2 outline-none focus:border-primary"
+            style={{ borderRadius: 'var(--sf-radius-input)' }}
+          />
+        </label>
+      </div>
+      <label className="block space-y-1.5 text-sm font-medium">
+        <span>Phone{config.enquiry.requirePhone ? '' : ' (optional)'}</span>
+        <input
+          data-testid={TID.enquiryPhone}
+          required={config.enquiry.requirePhone}
+          value={customerPhone}
+          onChange={(e) => setCustomerPhone(e.target.value)}
+          className="w-full border bg-background px-3 py-2 outline-none focus:border-primary"
+          style={{ borderRadius: 'var(--sf-radius-input)' }}
+        />
+      </label>
+      <label className="block space-y-1.5 text-sm font-medium">
+        <span>Subject</span>
+        <input
+          data-testid={TID.enquirySubject}
+          required
+          value={subject}
+          onChange={(e) => setSubject(e.target.value)}
+          className="w-full border bg-background px-3 py-2 outline-none focus:border-primary"
+          style={{ borderRadius: 'var(--sf-radius-input)' }}
+        />
+      </label>
+      <label className="block space-y-1.5 text-sm font-medium">
+        <span>Message</span>
+        <textarea
+          data-testid={TID.enquiryMessage}
+          required
+          rows={5}
+          value={message}
+          onChange={(e) => setMessage(e.target.value)}
+          className="w-full resize-none border bg-background px-3 py-2 outline-none focus:border-primary"
+          style={{ borderRadius: 'var(--sf-radius-input)' }}
+        />
+      </label>
+      <div className="flex flex-wrap items-center gap-3">
+        <button
+          data-testid={TID.enquirySubmit}
+          type="submit"
+          disabled={status === 'submitting'}
+          className="sf-cta inline-flex items-center gap-2 bg-primary px-5 py-3 font-semibold text-primary-foreground disabled:cursor-wait disabled:opacity-60"
+          style={{ borderRadius: 'var(--sf-radius-button)' }}
+        >
+          <Send className="h-4 w-4" />
+          {status === 'submitting' ? 'Sending...' : 'Send enquiry'}
+        </button>
+        {config.enquiry.whatsappUrl && (
+          <a
+            href={buildWhatsAppHref(config.enquiry.whatsappUrl, product)}
+            target="_blank"
+            rel="noreferrer"
+            className="inline-flex items-center gap-2 border px-5 py-3 text-sm font-semibold transition-colors hover:bg-muted"
+            style={{ borderRadius: 'var(--sf-radius-button)' }}
+          >
+            <MessageCircle className="h-4 w-4" />
+            WhatsApp
+          </a>
+        )}
+        {config.enquiry.email && (
+          <a
+            href={`mailto:${config.enquiry.email}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(message)}`}
+            className="inline-flex items-center gap-2 border px-5 py-3 text-sm font-semibold transition-colors hover:bg-muted"
+            style={{ borderRadius: 'var(--sf-radius-button)' }}
+          >
+            <Mail className="h-4 w-4" />
+            Email
+          </a>
+        )}
+      </div>
+      {status === 'success' && (
+        <p data-testid={TID.enquirySuccess} className="text-sm font-medium text-emerald-600">
+          {config.enquiry.successMessage}
+        </p>
+      )}
+      {error && (
+        <p data-testid={TID.enquiryError} className="text-sm font-medium text-red-600">
+          {error}
+        </p>
+      )}
+    </form>
+  )
+}

package/src/components/ProductGrid.tsx

@@ -1,12 +1,15 @@
 import React from 'react'
 import type { Product } from '@fayz-ai/shop/types'
 import { ProductCard } from './ProductCard'
-import { useStorefrontConfig } from '../config'
+import { getStorefrontComponents, useStorefrontConfig } from '../config'
+import { useStorefrontActions } from '../hooks/useStorefront'
 import { TID } from '../testids'
 
 export function ProductGrid({ products, loading }: { products: Product[]; loading: boolean }) {
   const config = useStorefrontConfig()
-  const ProductCardComponent = config.slots?.ProductCard ?? ProductCard
+  const actions = useStorefrontActions()
+  const components = getStorefrontComponents(config)
+  const ProductCardComponent = components.ProductCard ?? ProductCard
 
   if (loading) {
     return (
@@ -27,7 +30,13 @@ export function ProductGrid({ products, loading }: { products: Product[]; loadin
   return (
     <div data-testid={TID.productGrid} className="grid grid-cols-2 gap-5 md:grid-cols-3 xl:grid-cols-4">
       {products.map((p) => (
-        <ProductCardComponent key={p.id} product={p} />
+        <ProductCardComponent
+          key={p.id}
+          product={p}
+          config={config}
+          commerceMode={config.commerceMode}
+          actions={actions}
+        />
       ))}
     </div>
   )

package/src/components/RelatedProducts.tsx

@@ -1,15 +1,18 @@
 import React from 'react'
 import type { ListProductsOptions, Product } from '@fayz-ai/shop/types'
 import { useProducts } from '../hooks/useProducts'
-import { useStorefrontConfig } from '../config'
+import { getStorefrontComponents, useStorefrontConfig } from '../config'
+import { useStorefrontActions } from '../hooks/useStorefront'
 import { ProductCard } from './ProductCard'
 
 /** "Você também pode gostar" — products from the same category, excluding the
- *  current one. Renders through the store's configured card slot for visual
+ *  current one. Renders through the store's configured card component for visual
  *  consistency with the catalog. Hidden when there's nothing relevant. */
 export function RelatedProducts({ product }: { product: Product }) {
   const config = useStorefrontConfig()
-  const Card = config.slots?.ProductCard ?? ProductCard
+  const actions = useStorefrontActions()
+  const components = getStorefrontComponents(config)
+  const Card = components.ProductCard ?? ProductCard
   const opts: ListProductsOptions = product.categoryId
     ? { categoryId: product.categoryId, status: 'active', limit: 5 }
     : { status: 'active', limit: 5 }
@@ -23,7 +26,13 @@ export function RelatedProducts({ product }: { product: Product }) {
       <h2 className="sf-heading text-xl font-semibold tracking-tight">Você também pode gostar</h2>
       <div className="mt-6 grid grid-cols-2 gap-5 md:grid-cols-4">
         {related.map((p) => (
-          <Card key={p.id} product={p} />
+          <Card
+            key={p.id}
+            product={p}
+            config={config}
+            commerceMode={config.commerceMode}
+            actions={actions}
+          />
         ))}
       </div>
     </section>

package/src/components/SmoothImage.tsx

@@ -0,0 +1,59 @@
+import React from 'react'
+import { useStorefrontConfigOptional, type StorefrontImageLoadingConfig } from '../config'
+
+export interface SmoothImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+  imageLoading?: StorefrontImageLoadingConfig
+}
+
+export function SmoothImage({
+  imageLoading,
+  loading = 'lazy',
+  decoding = 'async',
+  onLoad,
+  style,
+  ...props
+}: SmoothImageProps) {
+  const config = useStorefrontConfigOptional()
+  const resolved = {
+    ...config?.imageLoading,
+    ...imageLoading,
+  }
+  const mode = resolved.mode ?? 'fade'
+  const durationMs = resolved.durationMs ?? 420
+  const easing = resolved.easing ?? 'cubic-bezier(0.22, 1, 0.36, 1)'
+  const blur = resolved.blur ?? true
+  const ref = React.useRef<HTMLImageElement | null>(null)
+  const [loaded, setLoaded] = React.useState(mode === 'none')
+
+  React.useEffect(() => {
+    if (mode === 'none') {
+      setLoaded(true)
+      return
+    }
+    if (ref.current?.complete && ref.current.naturalWidth > 0) setLoaded(true)
+  }, [mode, props.src])
+
+  const revealStyle: React.CSSProperties =
+    mode === 'none'
+      ? {}
+      : {
+          opacity: loaded ? 1 : 0,
+          filter: blur && !loaded ? 'blur(10px)' : 'blur(0px)',
+          transition: `opacity ${durationMs}ms ${easing}, filter ${durationMs}ms ${easing}, transform ${durationMs}ms ${easing}`,
+        }
+
+  return (
+    <img
+      {...props}
+      ref={ref}
+      loading={loading}
+      decoding={decoding}
+      data-sf-image-loaded={loaded ? 'true' : 'false'}
+      style={{ ...style, ...revealStyle }}
+      onLoad={(event) => {
+        setLoaded(true)
+        onLoad?.(event)
+      }}
+    />
+  )
+}

package/src/components/StorefrontFooter.tsx

@@ -9,6 +9,17 @@ export function StorefrontFooter() {
   const { categories } = useCategories()
   const visibleCategories = categories.slice(0, 8)
   const hiddenCategoryCount = Math.max(categories.length - visibleCategories.length, 0)
+  const labels = {
+    categories: 'Departamentos',
+    navigation: 'Navegação',
+    contact: 'Contato',
+    viewAll: 'Ver todos',
+    purchases: 'Minhas compras',
+    privacy: 'Privacidade',
+    terms: 'Termos',
+    returns: 'Trocas e devoluções',
+    ...config.footer?.labels,
+  }
 
   const goCategory = (categoryId: string) => {
     useCatalogStore.getState().reset()
@@ -27,7 +38,7 @@ export function StorefrontFooter() {
         </div>
 
         <div>
-          <h3 className="mb-3 text-sm font-semibold uppercase tracking-wide text-muted-foreground">Departamentos</h3>
+          <h3 className="mb-3 text-sm font-semibold uppercase tracking-wide text-muted-foreground">{labels.categories}</h3>
           <ul className="space-y-2 text-sm">
             {visibleCategories.map((c) => (
               <li key={c.id}>
@@ -43,7 +54,7 @@ export function StorefrontFooter() {
             {hiddenCategoryCount > 0 && (
               <li>
                 <Link to={config.catalogPath} className="font-medium underline-offset-2 transition-opacity hover:underline">
-                  Ver todos ({categories.length})
+                  {labels.viewAll} ({categories.length})
                 </Link>
               </li>
             )}
@@ -51,21 +62,23 @@ export function StorefrontFooter() {
         </div>
 
         <div>
-          <h3 className="mb-3 text-sm font-semibold uppercase tracking-wide text-muted-foreground">Navegação</h3>
+          <h3 className="mb-3 text-sm font-semibold uppercase tracking-wide text-muted-foreground">{labels.navigation}</h3>
           <ul className="space-y-2 text-sm">
             {config.nav.map((link) => (
               <li key={link.to}>
                 <Link to={link.to} className="transition-opacity hover:opacity-70">{link.label}</Link>
               </li>
             ))}
-            <li>
-              <Link to="/account" className="transition-opacity hover:opacity-70">Minhas compras</Link>
-            </li>
+            {config.features.accounts && (
+              <li>
+                <Link to="/account" className="transition-opacity hover:opacity-70">{labels.purchases}</Link>
+              </li>
+            )}
           </ul>
         </div>
 
         <div>
-          <h3 className="mb-3 text-sm font-semibold uppercase tracking-wide text-muted-foreground">Contato</h3>
+          <h3 className="mb-3 text-sm font-semibold uppercase tracking-wide text-muted-foreground">{labels.contact}</h3>
           <ul className="space-y-2 text-sm text-muted-foreground">
             {config.footer?.contact?.phone && <li>{config.footer.contact.phone}</li>}
             {config.footer?.contact?.email && <li>{config.footer.contact.email}</li>}
@@ -83,15 +96,12 @@ export function StorefrontFooter() {
       <div className="border-t">
         <div className="mx-auto flex max-w-7xl flex-col items-center gap-3 px-4 py-5 text-xs text-muted-foreground sm:flex-row sm:justify-between sm:px-6">
           <nav className="flex flex-wrap items-center justify-center gap-x-5 gap-y-2">
-            <Link to="/privacy" className="transition-colors hover:text-foreground">Privacidade</Link>
-            <Link to="/terms" className="transition-colors hover:text-foreground">Termos</Link>
-            <Link to="/refunds" className="transition-colors hover:text-foreground">Trocas e devoluções</Link>
+            <Link to="/privacy" className="transition-colors hover:text-foreground">{labels.privacy}</Link>
+            <Link to="/terms" className="transition-colors hover:text-foreground">{labels.terms}</Link>
+            <Link to="/refunds" className="transition-colors hover:text-foreground">{labels.returns}</Link>
           </nav>
           <p className="text-center">
-            © {config.name} — powered by Fayz · Fotos:{' '}
-            <a href="https://unsplash.com" target="_blank" rel="noreferrer" className="underline-offset-2 hover:underline">
-              Unsplash
-            </a>
+            {config.footer?.credit ?? <>© {config.name} — powered by Fayz</>}
           </p>
         </div>
       </div>

package/src/components/StorefrontHeader.tsx

@@ -206,25 +206,27 @@ function HeaderActions() {
           )}
         </div>
       )}
-      <button
-        type="button"
-        data-testid={TID.cartButton}
-        aria-label="Carrinho"
-        onClick={openDrawer}
-        className="relative rounded-full p-2.5 transition-opacity hover:opacity-70"
-      >
-        <ShoppingBag className="h-5 w-5" />
-        {count > 0 && (
-          <span
-            data-testid={TID.cartCount}
-            className={`absolute -right-0.5 -top-0.5 flex h-5 min-w-5 items-center justify-center rounded-full bg-primary px-1 text-xs font-semibold text-primary-foreground ${
-              pop ? 'animate-badge-pop' : ''
-            }`}
-          >
-            {count}
-          </span>
-        )}
-      </button>
+      {config.features.cart && (
+        <button
+          type="button"
+          data-testid={TID.cartButton}
+          aria-label="Carrinho"
+          onClick={openDrawer}
+          className="relative rounded-full p-2.5 transition-opacity hover:opacity-70"
+        >
+          <ShoppingBag className="h-5 w-5" />
+          {count > 0 && (
+            <span
+              data-testid={TID.cartCount}
+              className={`absolute -right-0.5 -top-0.5 flex h-5 min-w-5 items-center justify-center rounded-full bg-primary px-1 text-xs font-semibold text-primary-foreground ${
+                pop ? 'animate-badge-pop' : ''
+              }`}
+            >
+              {count}
+            </span>
+          )}
+        </button>
+      )}
     </nav>
   )
 }
@@ -233,6 +235,7 @@ function NavLinks({ className }: { className?: string }) {
   const config = useStorefrontConfig()
   const { categories } = useCategories()
   const setCategoryId = useCatalogStore((s) => s.setCategoryId)
+  const showCategories = config.theme?.header?.showCategories !== false
 
   const goCategory = (categoryId: string) => {
     useCatalogStore.getState().reset()
@@ -241,7 +244,7 @@ function NavLinks({ className }: { className?: string }) {
   }
 
   return (
-    <nav className={`flex items-center gap-6 ${className ?? ''}`}>
+    <nav className={`flex min-w-max items-center gap-6 ${className ?? ''}`}>
       {config.nav.map((link) => (
         <Link
           key={link.to}
@@ -252,18 +255,19 @@ function NavLinks({ className }: { className?: string }) {
           {link.label}
         </Link>
       ))}
-      {categories.slice(0, 6).map((c) => (
-        <button
-          key={c.id}
-          type="button"
-          data-testid={TID.navCategory(c.slug)}
-          onClick={() => goCategory(c.id)}
-          className="sf-nav-link group relative hidden text-sm font-medium transition-opacity hover:opacity-80 lg:inline"
-        >
-          {c.name}
-          <span className="absolute -bottom-1 left-0 h-0.5 w-0 bg-primary transition-all duration-300 group-hover:w-full" />
-        </button>
-      ))}
+      {showCategories &&
+        categories.slice(0, 6).map((c) => (
+          <button
+            key={c.id}
+            type="button"
+            data-testid={TID.navCategory(c.slug)}
+            onClick={() => goCategory(c.id)}
+            className="sf-nav-link group relative hidden text-sm font-medium transition-opacity hover:opacity-80 lg:inline"
+          >
+            {c.name}
+            <span className="absolute -bottom-1 left-0 h-0.5 w-0 bg-primary transition-all duration-300 group-hover:w-full" />
+          </button>
+        ))}
     </nav>
   )
 }
@@ -272,6 +276,7 @@ export function StorefrontHeader() {
   const config = useStorefrontConfig()
   const variant = config.theme?.header?.variant ?? 'classic'
   const scrolled = useScrolled()
+  const showSearch = config.theme?.header?.showSearch !== false
   const logo = (
     <Link to="/" className="sf-heading shrink-0 text-xl font-bold tracking-tight">
       {config.logo ?? config.name}
@@ -290,13 +295,13 @@ export function StorefrontHeader() {
         // Rio/Flex pattern: centered logo row, nav row below
         <>
           <div className="mx-auto grid h-16 max-w-7xl grid-cols-[1fr_auto_1fr] items-center px-4 sm:px-6">
-            <SearchInput className="hidden w-full max-w-xs sm:block" />
+            {showSearch ? <SearchInput className="hidden w-full max-w-xs sm:block" /> : <div />}
             <div className="text-center">{logo}</div>
             <div className="justify-self-end">
               <HeaderActions />
             </div>
           </div>
-          <div className="hidden justify-center border-t py-2.5 sm:flex" style={headerDivider}>
+          <div className="flex overflow-x-auto border-t py-2.5 sm:justify-center" style={headerDivider}>
             <NavLinks />
           </div>
         </>
@@ -304,13 +309,13 @@ export function StorefrontHeader() {
         // Brasília pattern: prominent search left, logo center, actions right; nav row below
         <>
           <div className="mx-auto grid h-16 max-w-7xl grid-cols-[1fr_auto_1fr] items-center gap-6 px-4 sm:px-6">
-            <SearchInput className="hidden w-full max-w-sm sm:block" />
+            {showSearch ? <SearchInput className="hidden w-full max-w-sm sm:block" /> : <div />}
             <div className="text-center">{logo}</div>
             <div className="justify-self-end">
               <HeaderActions />
             </div>
           </div>
-          <div className="hidden border-t sm:block" style={headerDivider}>
+          <div className="overflow-x-auto border-t" style={headerDivider}>
             <div className="mx-auto max-w-7xl px-4 py-2.5 sm:px-6">
               <NavLinks />
             </div>
@@ -324,7 +329,7 @@ export function StorefrontHeader() {
           </div>
           <div className="text-center">{logo}</div>
           <div className="flex items-center justify-end gap-3">
-            <SearchInput className="hidden w-44 lg:block" />
+            {showSearch && <SearchInput className="hidden w-44 lg:block" />}
             <HeaderActions />
           </div>
         </div>
@@ -333,7 +338,7 @@ export function StorefrontHeader() {
         <div className="mx-auto flex h-16 max-w-7xl items-center gap-6 px-4 sm:px-6">
           {logo}
           <NavLinks className="hidden md:flex" />
-          <SearchInput className="ml-auto hidden w-full max-w-sm sm:block" />
+          {showSearch && <SearchInput className="ml-auto hidden w-full max-w-sm sm:block" />}
           <HeaderActions />
         </div>
       )}

package/src/components/sections/CategoryShowcase.tsx

@@ -6,6 +6,7 @@ import { bannerPlaceholder } from '../../sections'
 import { Reveal } from '../../motion'
 import { navigateTo } from '../../router'
 import { TID } from '../../testids'
+import { SmoothImage } from '../SmoothImage'
 
 export function CategoryShowcase({ style, title }: { style: 'bubbles' | 'tiles'; title?: string }) {
   const { categories } = useCategories()
@@ -33,7 +34,7 @@ export function CategoryShowcase({ style, title }: { style: 'bubbles' | 'tiles';
             <Reveal key={c.id} delay={i * 80}>
               <button type="button" onClick={() => go(c.id)} className="group flex w-28 flex-col items-center gap-3">
                 <span className="block h-24 w-24 overflow-hidden rounded-full border-2 border-transparent shadow-sm transition-all duration-300 group-hover:scale-105 group-hover:border-primary group-hover:shadow-md">
-                  <img
+                  <SmoothImage
                     src={c.imageUrl ?? bannerPlaceholder(c.name, 30 + i * 70, 70 + i * 70, 200, 200)}
                     alt={c.name}
                     className="h-full w-full object-cover"
@@ -59,7 +60,7 @@ export function CategoryShowcase({ style, title }: { style: 'bubbles' | 'tiles';
         {categories.map((c, i) => (
           <Reveal key={c.id} delay={i * 90}>
             <button type="button" onClick={() => go(c.id)} className="group relative block aspect-[4/5] w-full overflow-hidden" style={{ borderRadius: 'var(--sf-radius-card)' }}>
-              <img
+              <SmoothImage
                 src={c.imageUrl ?? bannerPlaceholder(c.name, 30 + i * 70, 70 + i * 70, 480, 600)}
                 alt={c.name}
                 className="h-full w-full object-cover transition-transform duration-700 ease-out group-hover:scale-110"

package/src/components/sections/HeroSection.tsx

@@ -3,9 +3,11 @@ import { ChevronLeft, ChevronRight } from 'lucide-react'
 import type { HeroSlide } from '../../sections'
 import type { HeroVariant } from '../../theme'
 import { bannerPlaceholder } from '../../sections'
+import { useStorefrontConfig } from '../../config'
 import { prefersReducedMotion } from '../../motion'
 import { Link } from '../../router'
 import { TID } from '../../testids'
+import { SmoothImage } from '../SmoothImage'
 
 function slideImage(slide: HeroSlide, w = 1600, h = 700): string {
   return slide.image ?? bannerPlaceholder(slide.title, slide.hue ?? 200, (slide.hue ?? 200) + 40, w, h)
@@ -56,8 +58,18 @@ export function HeroSection({
   height?: 'tall' | 'medium'
 }) {
   const [index, setIndex] = useState(0)
+  const [loadedSlides, setLoadedSlides] = useState<Record<number, boolean>>({})
+  const config = useStorefrontConfig()
   const interacted = useRef(false)
   const hClass = height === 'tall' ? 'h-[72vh] min-h-[440px]' : 'h-[48vh] min-h-[340px]'
+  const revealImages = config.imageLoading.mode !== 'none'
+  const revealStyle = (loaded: boolean): React.CSSProperties | undefined =>
+    revealImages
+      ? {
+          filter: config.imageLoading.blur && !loaded ? 'blur(10px)' : 'blur(0px)',
+          transition: `opacity 700ms ease, filter ${config.imageLoading.durationMs}ms ${config.imageLoading.easing}`,
+        }
+      : undefined
 
   // Auto-advance until the visitor takes over; never under reduced motion.
   useEffect(() => {
@@ -84,7 +96,7 @@ export function HeroSection({
             to={slide.href ?? '/catalog'}
             className="group relative block h-[42vh] min-h-[320px] overflow-hidden"
           >
-            <img
+            <SmoothImage
               src={slideImage(slide, 900, 700)}
               alt={slide.title}
               className="h-full w-full object-cover transition-transform duration-700 ease-out group-hover:scale-105"
@@ -122,8 +134,12 @@ export function HeroSection({
           src={slideImage(slide)}
           alt={slide.title}
           aria-hidden={i !== index}
+          loading={i === 0 ? 'eager' : 'lazy'}
+          decoding="async"
+          onLoad={() => setLoadedSlides((current) => ({ ...current, [i]: true }))}
+          style={revealStyle(Boolean(loadedSlides[i]))}
           className={`absolute inset-0 h-full w-full object-cover transition-opacity duration-700 ${
-            i === index ? 'animate-kenburns opacity-100' : 'opacity-0'
+            i === index && (!revealImages || loadedSlides[i]) ? 'animate-kenburns opacity-100' : 'opacity-0'
           }`}
         />
       ))}