storefront-layouts 1.0.3 → 1.0.4

package/dist/layouts/booking-agenda/pages/ServicesPage.js

@@ -1,32 +1,17 @@
 'use client';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button } from '../../../components/ui/button.js';
+import { Button } from '../../../components/ui/button';
 import { Clock, ArrowRight, Filter } from 'lucide-react';
 import Link from 'next/link';
 import { useState } from 'react';
-import { cn, formatCurrency, filterCategoriesForServices, isEditorPreviewMode, resolveStoreServicesForDisplay } from '../../../lib/utils/index.js';
-import { useCatalogLoader } from '../../../hooks/use-catalog-loader.js';
+import { cn, formatCurrency, filterActiveServices } from '../../../lib/utils';
 import Image from 'next/image';
-import { RichTextExcerpt } from '../../../components/rich-text/RichTextExcerpt.js';
-import { useStore } from '../../../lib/store-context.js';
-import { showLayoutDecorativeBadges } from '../../../lib/layout-badges.js';
-import { encodePayazaFieldKey, payazaInlineBindingProps } from '../../../preview/canvas/field-key.js';
-export function BookingAgendaServicesPage({ storeConfig: initialConfig, initialCategory, titleOverride }) {
-    const { store } = useStore();
-    const storeConfig = store || initialConfig;
-    const isPreview = isEditorPreviewMode(storeConfig);
-    const { services: loadedServices, categories: loadedCategories } = useCatalogLoader(storeConfig, {
-        fetchProducts: false,
-    });
-    const services = resolveStoreServicesForDisplay(loadedServices, isPreview);
-    const categories = filterCategoriesForServices(loadedCategories, services);
+export function ServicesPage({ storeConfig, initialCategory, titleOverride }) {
+    const categories = storeConfig.categories || [];
+    const services = filterActiveServices(storeConfig.services || []);
     const [activeCategory, setActiveCategory] = useState(initialCategory || categories[0]?.slug || '');
     const primaryColor = storeConfig.branding.primaryColor;
     const servicesConfig = storeConfig.layoutConfig?.pages?.services;
-    const heroConfig = servicesConfig?.hero || servicesConfig?.servicesHeader;
-    const heroImage = typeof heroConfig?.backgroundImage === 'string' && heroConfig.backgroundImage.trim().length > 0
-        ? heroConfig.backgroundImage.trim()
-        : 'https://images.unsplash.com/photo-1512496015851-a90fb38ba796?q=80&w=2070&auto=format&fit=crop';
     // Booking-agenda (medical) specific labels
     const categoryLabel = 'Departments';
     const serviceLabel = 'Procedures';
@@ -39,8 +24,8 @@ export function BookingAgendaServicesPage({ storeConfig: initialConfig, initialC
     const getServiceLink = (slug) => {
         return `/${storeConfig.slug}/book?service=${slug}`;
     };
-    const pageTitle = titleOverride || heroConfig?.title || servicesConfig?.title || (_jsxs(_Fragment, { children: ["Signature ", _jsx("span", { className: "font-bold font-sans", style: { color: primaryColor }, children: serviceLabel })] }));
-    return (_jsxs("div", { className: "min-h-screen bg-white pb-20", children: [heroConfig?.show !== false && (_jsxs("div", { "data-section": "hero", "data-payaza-section-key": "hero", "data-payaza-page": "services", className: "relative bg-gray-900 py-32 px-4 text-center overflow-hidden", children: [_jsxs("div", { className: "absolute inset-0", "data-payaza-image": isPreview ? encodePayazaFieldKey('hero', ['backgroundImage']) : undefined, children: [_jsx(Image, { src: heroImage, alt: "Service Menu", fill: true, className: "w-full h-full object-cover opacity-60", unoptimized: true }, heroImage), _jsx("div", { className: "absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-black/30" })] }), _jsxs("div", { className: "container mx-auto max-w-4xl relative z-10", children: [showLayoutDecorativeBadges() && (_jsx("span", { className: "inline-block py-1 px-3 rounded-full bg-white/10 backdrop-blur-md border border-white/20 text-xs font-bold uppercase tracking-widest text-white mb-6 shadow-sm", children: storeConfig.name })), _jsx("h1", { className: "text-5xl md:text-7xl font-serif font-light mb-6 tracking-tight text-white leading-tight", ...payazaInlineBindingProps(isPreview, 'hero', ['title']), children: pageTitle }), _jsx("p", { className: "text-gray-200 max-w-2xl mx-auto text-lg font-light leading-relaxed", ...payazaInlineBindingProps(isPreview, 'hero', ['description']), children: heroConfig?.description || servicesConfig?.description || storeConfig.description || `Explore our curated selection of premium ${serviceLabel.toLowerCase()} designed for your success.` })] })] })), _jsx("div", { className: "sticky top-16 z-30 bg-white/80 backdrop-blur-xl border-b border-gray-100 transition-all", children: _jsx("div", { className: "container mx-auto px-4", children: _jsxs("div", { className: "flex items-center gap-3 overflow-x-auto py-4 scrollbar-hide no-scrollbar", children: [_jsxs("div", { className: "flex items-center gap-2 text-xs font-bold text-gray-400 uppercase tracking-wider px-4 border-r border-gray-100 hidden md:flex shrink-0", children: [_jsx(Filter, { className: "w-3.5 h-3.5" }), categoryLabel] }), categories.map((cat) => (_jsx("button", { onClick: () => setActiveCategory(cat.slug), className: cn("px-6 py-2.5 rounded-full text-sm font-bold whitespace-nowrap transition-all duration-300 border flex-shrink-0", activeCategory === cat.slug
+    const pageTitle = titleOverride || servicesConfig?.title || (_jsxs(_Fragment, { children: ["Signature ", _jsx("span", { className: "font-bold font-sans", style: { color: primaryColor }, children: serviceLabel })] }));
+    return (_jsxs("div", { className: "min-h-screen bg-white pb-20", children: [_jsxs("div", { "data-section": "hero", className: "relative bg-gray-900 py-32 px-4 text-center overflow-hidden", children: [_jsxs("div", { className: "absolute inset-0", children: [_jsx(Image, { src: "https://images.unsplash.com/photo-1512496015851-a90fb38ba796?q=80&w=2070&auto=format&fit=crop", alt: "Service Menu", fill: true, className: "w-full h-full object-cover opacity-60" }), _jsx("div", { className: "absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-black/30" })] }), _jsxs("div", { className: "container mx-auto max-w-4xl relative z-10", children: [_jsx("span", { className: "inline-block py-1 px-3 rounded-full bg-white/10 backdrop-blur-md border border-white/20 text-xs font-bold uppercase tracking-widest text-white mb-6 shadow-sm", children: storeConfig.name }), _jsx("h1", { className: "text-5xl md:text-7xl font-serif font-light mb-6 tracking-tight text-white leading-tight", children: pageTitle }), _jsx("p", { className: "text-gray-200 max-w-2xl mx-auto text-lg font-light leading-relaxed", children: servicesConfig?.description || storeConfig.description || `Explore our curated selection of premium ${serviceLabel.toLowerCase()} designed for your success.` })] })] }), _jsx("div", { className: "sticky top-16 z-30 bg-white/80 backdrop-blur-xl border-b border-gray-100 transition-all", children: _jsx("div", { className: "container mx-auto px-4", children: _jsxs("div", { className: "flex items-center gap-3 overflow-x-auto py-4 scrollbar-hide no-scrollbar", children: [_jsxs("div", { className: "flex items-center gap-2 text-xs font-bold text-gray-400 uppercase tracking-wider px-4 border-r border-gray-100 hidden md:flex shrink-0", children: [_jsx(Filter, { className: "w-3.5 h-3.5" }), categoryLabel] }), categories.map((cat) => (_jsx("button", { onClick: () => setActiveCategory(cat.slug), className: cn("px-6 py-2.5 rounded-full text-sm font-bold whitespace-nowrap transition-all duration-300 border flex-shrink-0", activeCategory === cat.slug
                                     ? "text-white shadow-lg scale-105 border-transparent"
-                                    : "bg-white text-gray-500 border-gray-100 hover:border-gray-300 hover:text-black"), style: activeCategory === cat.slug ? { backgroundColor: primaryColor } : {}, children: cat.name }, cat.id)))] }) }) }), _jsx("div", { "data-section": "services-list", "data-payaza-section-key": "services-list", "data-payaza-page": "services", className: "container mx-auto px-4 max-w-7xl py-16", children: _jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-x-10 gap-y-16", children: filteredServices.map((service) => (_jsxs("div", { className: "group flex flex-col h-full", children: [_jsxs(Link, { href: getServiceLink(service.slug), className: "block relative aspect-[4/3] rounded-3xl overflow-hidden bg-gray-100 mb-6 shadow-sm group-hover:shadow-xl transition-all duration-500", children: [_jsx(Image, { src: service.image || 'https://images.unsplash.com/photo-1629909613654-28e377c37b09?w=800&auto=format&fit=crop&q=60', alt: service.name, fill: true, className: "w-full h-full object-cover transition-transform duration-700 group-hover:scale-105", unoptimized: true }), _jsx("div", { className: "absolute bottom-4 left-4 bg-white/95 backdrop-blur px-4 py-2 rounded-full text-sm font-bold shadow-sm text-gray-900", children: service.price > 0 ? formatCurrency(service.price, service.currency || storeConfig.settings?.currency || 'USD') : 'Free' }), _jsx("div", { className: "absolute inset-0 bg-black/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center", children: _jsx(Button, { className: "rounded-full bg-white text-black hover:bg-gray-100 transform translate-y-4 group-hover:translate-y-0 transition-all duration-300 shadow-lg font-bold px-8", children: "Book Now" }) })] }), _jsxs("div", { className: "flex flex-col flex-1", children: [_jsx("div", { className: "flex justify-between items-start mb-3", children: _jsx(Link, { href: getServiceLink(service.slug), children: _jsx("h3", { className: "text-2xl font-bold text-gray-900 group-hover:text-gray-600 transition-colors", children: service.name }) }) }), _jsx(RichTextExcerpt, { value: service.description, as: "p", className: "text-gray-500 mb-6 line-clamp-2 leading-relaxed text-base flex-1" }), _jsxs("div", { className: "flex items-center justify-between pt-4 border-t border-gray-100 text-sm font-medium text-gray-500", children: [_jsxs("div", { className: "flex items-center gap-6", children: [service.duration > 0 && (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Clock, { className: "w-4 h-4 text-gray-400" }), service.duration, " mins"] })), service.contentType && (_jsx("div", { className: "flex items-center gap-2 uppercase tracking-widest text-[10px] font-black", children: service.contentType }))] }), _jsxs(Link, { href: getServiceLink(service.slug), className: "flex items-center gap-2 text-black font-bold group/link", children: ["Book ", _jsx(ArrowRight, { className: "w-4 h-4 transition-transform group-hover/link:translate-x-1" })] })] })] })] }, service.id))) }) })] }));
+                                    : "bg-white text-gray-500 border-gray-100 hover:border-gray-300 hover:text-black"), style: activeCategory === cat.slug ? { backgroundColor: primaryColor } : {}, children: cat.name }, cat.id)))] }) }) }), _jsx("div", { "data-section": "services-list", className: "container mx-auto px-4 max-w-7xl py-16", children: _jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-x-10 gap-y-16", children: filteredServices.map((service) => (_jsxs("div", { className: "group flex flex-col h-full", children: [_jsxs(Link, { href: getServiceLink(service.slug), className: "block relative aspect-[4/3] rounded-3xl overflow-hidden bg-gray-100 mb-6 shadow-sm group-hover:shadow-xl transition-all duration-500", children: [_jsx(Image, { src: service.image || 'https://images.unsplash.com/photo-1629909613654-28e377c37b09?w=800&auto=format&fit=crop&q=60', alt: service.name, fill: true, className: "w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" }), _jsx("div", { className: "absolute bottom-4 left-4 bg-white/95 backdrop-blur px-4 py-2 rounded-full text-sm font-bold shadow-sm text-gray-900", children: service.price > 0 ? formatCurrency(service.price, service.currency || storeConfig.settings?.currency || 'USD') : 'Free' }), _jsx("div", { className: "absolute inset-0 bg-black/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center", children: _jsx(Button, { className: "rounded-full bg-white text-black hover:bg-gray-100 transform translate-y-4 group-hover:translate-y-0 transition-all duration-300 shadow-lg font-bold px-8", children: "Book Now" }) })] }), _jsxs("div", { className: "flex flex-col flex-1", children: [_jsx("div", { className: "flex justify-between items-start mb-3", children: _jsx(Link, { href: getServiceLink(service.slug), children: _jsx("h3", { className: "text-2xl font-bold text-gray-900 group-hover:text-gray-600 transition-colors", children: service.name }) }) }), _jsx("p", { className: "text-gray-500 mb-6 line-clamp-2 leading-relaxed text-base flex-1", children: service.description }), _jsxs("div", { className: "flex items-center justify-between pt-4 border-t border-gray-100 text-sm font-medium text-gray-500", children: [_jsxs("div", { className: "flex items-center gap-6", children: [service.duration > 0 && (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Clock, { className: "w-4 h-4 text-gray-400" }), service.duration, " mins"] })), service.contentType && (_jsx("div", { className: "flex items-center gap-2 uppercase tracking-widest text-[10px] font-black", children: service.contentType }))] }), _jsxs(Link, { href: getServiceLink(service.slug), className: "flex items-center gap-2 text-black font-bold group/link", children: ["Book ", _jsx(ArrowRight, { className: "w-4 h-4 transition-transform group-hover/link:translate-x-1" })] })] })] })] }, service.id))) }) })] }));
 }

package/dist/layouts/clothing/components/ClothingHomePage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ClothingHomePage.d.ts","sourceRoot":"","sources":["../../../../src/layouts/clothing/components/ClothingHomePage.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAsBvD,UAAU,qBAAqB;IAC7B,WAAW,EAAE,WAAW,CAAC;CAC1B;AAaD,wBAAgB,gBAAgB,CAAC,EAAE,WAAW,EAAE,aAAa,EAAE,EAAE,qBAAqB,2CA8sBrF"}
+{"version":3,"file":"ClothingHomePage.d.ts","sourceRoot":"","sources":["../../../../src/layouts/clothing/components/ClothingHomePage.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAevD,UAAU,qBAAqB;IAC7B,WAAW,EAAE,WAAW,CAAC;CAC1B;AAaD,wBAAgB,gBAAgB,CAAC,EAAE,WAAW,EAAE,aAAa,EAAE,EAAE,qBAAqB,2CA6uBrF"}

package/dist/layouts/clothing/components/ClothingHomePage.js

@@ -1,25 +1,18 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Button } from '../../../components/ui/button.js';
-import { ProductRating } from '../../../components/ui/product-rating.js';
+import { useFeaturedProducts } from '../../../hooks/use-featured-products';
+import { Button } from '../../../components/ui/button';
+import { ProductRating } from '../../../components/ui/product-rating';
 import { ShoppingCart, Heart, ArrowRight, ChevronLeft, ChevronRight } from 'lucide-react';
 import Link from 'next/link';
-import { ImageWithFallback } from '../../../components/ui/image-with-fallback.js';
+import { ImageWithFallback } from '../../../components/ui/image-with-fallback';
 import { useState, useEffect } from 'react';
-import { formatCurrency, resolveStoreProductsForDisplay } from '../../../lib/utils/index.js';
-import { resolveProductImageUrls } from '../../../lib/utils/product-images.js';
-import { getLayoutText, getBannerImage, normalizeStoreImageUrl } from '../../../lib/utils/asset-helpers.js';
-import { shouldUseAPI } from '../../../lib/utils/demo-detection.js';
-import { useStore } from '../../../lib/store-context.js';
-import { DynamicIcon } from '../../../components/ui/dynamic-icon.js';
-import { PromoBanner } from '../../shared/components/PromoBanner.js';
-import { getPayazaSectionInlineStyle } from '../../../lib/payaza-section-styles.js';
-import { resolveStoreLink } from '../../../lib/layout-route-utils.js';
-import { useClothingPayaza } from '../payaza-bindings.js';
-import { showLayoutDecorativeBadges } from '../../../lib/layout-badges.js';
-import { compactArrayItems, readItemIconName } from '../../../lib/compact-array-items.js';
-import { usePreviewSlideSync } from '../../../hooks/usePreviewSlideSync.js';
-import { trackStorefrontEvent } from '../../../lib/mixpanel.js';
+import { formatCurrency, filterActiveProducts } from '../../../lib/utils';
+import { getLayoutText, getBannerImage } from '../../../lib/utils/asset-helpers';
+import { toStoreHref } from '../../../lib/utils/url-helpers';
+import { shouldUseAPI } from '../../../lib/utils/demo-detection';
+import { useStore } from '../../../lib/store-context';
+import { DynamicIcon } from '../../../components/ui/dynamic-icon';
 export function ClothingHomePage({ storeConfig: initialConfig }) {
     // Use the store from context which is updated in real-time by the editor
     const { store } = useStore();
@@ -27,7 +20,7 @@ export function ClothingHomePage({ storeConfig: initialConfig }) {
     const layoutConfig = storeConfig.layoutConfig;
     const categories = storeConfig.categories || [];
     // In preview mode, use mock products if none are available
-    const { isPreview, section, edit, image, inline, icon } = useClothingPayaza(storeConfig, 'home');
+    const isPreview = (typeof window !== 'undefined' && window.__IS_PREVIEW__) || storeConfig.layoutConfig?.isPreview;
     // Randomly select max 2 categories on every page load
     const [displayedCategories, setDisplayedCategories] = useState([]);
     useEffect(() => {
@@ -49,94 +42,133 @@ export function ClothingHomePage({ storeConfig: initialConfig }) {
     }, [categories, isPreview]); // Added categories and isPreview to deps
     // ... rest of the component logic ...
     // Deduplicate products to avoid key warnings and filter out inactive/deleted products
-    const rawProducts = storeConfig.products || [];
+    const initialProducts = storeConfig.products || [];
+    const rawProducts = useFeaturedProducts(storeConfig.id, initialProducts, !isPreview);
     const uniqueProducts = rawProducts.filter((product, index, self) => index === self.findIndex((t) => t.id === product.id));
-    const resolvedProducts = resolveStoreProductsForDisplay(uniqueProducts, isPreview);
-    // Use real products when available; in preview fall back to mock placeholders only when empty.
-    const products = resolvedProducts.length > 0
-        ? resolvedProducts
-        : (isPreview ? [
-            { id: 'p1', name: 'Premium Cotton Tee', price: 45, currency: 'USD', images: ['https://images.unsplash.com/photo-1521572267360-ee0c2909d518?q=80&w=800'], slug: 'premium-tee', rating: 4.8, reviewCount: 124 },
-            { id: 'p2', name: 'Slim Fit Denim', price: 89, currency: 'USD', images: ['https://images.unsplash.com/photo-1542272604-787c3835535d?q=80&w=800'], slug: 'slim-denim', rating: 4.6, reviewCount: 89 },
-            { id: 'p3', name: 'Classic Trench Coat', price: 199, currency: 'USD', images: ['https://images.unsplash.com/photo-1591047139829-d91aecb6caea?q=80&w=800'], slug: 'trench-coat', rating: 4.9, reviewCount: 56, compareAtPrice: 249 },
-            { id: 'p4', name: 'Leather Chelsea Boots', price: 159, currency: 'USD', images: ['https://images.unsplash.com/photo-1638247025967-b4e38f787b76?q=80&w=800'], slug: 'chelsea-boots', rating: 4.7, reviewCount: 112 }
-        ] : []);
+    const activeProducts = filterActiveProducts(uniqueProducts);
+    // Use real active products if available, otherwise if in preview, use all products (including drafts), 
+    // and if still none, use mock data
+    const products = activeProducts.length > 0
+        ? activeProducts
+        : (isPreview && rawProducts.length > 0
+            ? rawProducts
+            : (isPreview ? [
+                { id: 'p1', name: 'Premium Cotton Tee', price: 45, currency: 'USD', images: ['https://images.unsplash.com/photo-1521572267360-ee0c2909d518?q=80&w=800'], slug: 'premium-tee', rating: 4.8, reviewCount: 124 },
+                { id: 'p2', name: 'Slim Fit Denim', price: 89, currency: 'USD', images: ['https://images.unsplash.com/photo-1542272604-787c3835535d?q=80&w=800'], slug: 'slim-denim', rating: 4.6, reviewCount: 89 },
+                { id: 'p3', name: 'Classic Trench Coat', price: 199, currency: 'USD', images: ['https://images.unsplash.com/photo-1591047139829-d91aecb6caea?q=80&w=800'], slug: 'trench-coat', rating: 4.9, reviewCount: 56, compareAtPrice: 249 },
+                { id: 'p4', name: 'Leather Chelsea Boots', price: 159, currency: 'USD', images: ['https://images.unsplash.com/photo-1638247025967-b4e38f787b76?q=80&w=800'], slug: 'chelsea-boots', rating: 4.7, reviewCount: 112 }
+            ] : []));
     // Hero slides data - use new slider structure with fallback to old format
     // For demo stores, helpers will return fallbacks; for real stores, try layoutConfig first, then helpers
     const isRealStore = shouldUseAPI(storeConfig.slug);
-    const DEFAULT_HERO_IMAGES = [
-        'https://images.unsplash.com/photo-1523381210434-271e8be1f52b?q=80&w=2000&auto=format&fit=crop',
-        'https://images.unsplash.com/photo-1441986300917-64674bd600d8?q=80&w=2000&auto=format&fit=crop',
-        'https://images.unsplash.com/photo-1558769132-cb1aea458c5e?q=80&w=2000&auto=format&fit=crop',
-    ];
-    const mapConfigSlidersToHeroSlides = (sliders, heroSection) => {
-        const showBadges = heroSection?.showBadges !== false &&
-            (layoutConfig?.hero?.showBadges !== false || heroSection?.showBadges === undefined);
-        return sliders
-            .filter((slider) => slider)
-            .map((slider, index) => {
+    // Debug logging for slider configuration
+    if (process.env.NODE_ENV === 'development') {
+        console.log('[ClothingHomePage] LayoutConfig sections.hero:', layoutConfig?.sections?.hero);
+        console.log('[ClothingHomePage] LayoutConfig hero (top-level):', layoutConfig?.hero);
+        console.log('[ClothingHomePage] Sliders found:', layoutConfig?.sections?.hero?.sliders?.length || 0);
+    }
+    // Try new structure first (sections.hero.sliders)
+    let heroSlides = [];
+    if (layoutConfig?.sections?.hero?.sliders && Array.isArray(layoutConfig.sections.hero.sliders) && layoutConfig.sections.hero.sliders.length > 0) {
+        if (process.env.NODE_ENV === 'development') {
+            console.log('[ClothingHomePage] Using sections.hero.sliders structure');
+        }
+        heroSlides = layoutConfig.sections.hero.sliders
+            .filter((slider) => slider && slider.image) // Filter out invalid sliders
+            .map((slider) => {
+            // Extract button text - only use if not empty
             const primaryButtonText = slider.primaryButton?.text?.trim() || '';
             const secondaryButtonText = slider.secondaryButton?.text?.trim() || '';
-            const defaultImage = DEFAULT_HERO_IMAGES[index % DEFAULT_HERO_IMAGES.length];
+            if (process.env.NODE_ENV === 'development') {
+                console.log('[ClothingHomePage] Slider:', {
+                    id: slider.id,
+                    image: slider.image ? 'present' : 'missing',
+                    title: slider.title,
+                    primaryButtonText,
+                    secondaryButtonText,
+                });
+            }
+            // Check badge visibility - use sections.hero.showBadges first, fallback to top-level hero.showBadges
+            const showBadges = layoutConfig?.sections?.hero?.showBadges !== false &&
+                (layoutConfig?.hero?.showBadges !== false || layoutConfig?.sections?.hero?.showBadges === undefined);
             return {
-                image: normalizeStoreImageUrl(slider.image) || defaultImage,
+                image: slider.image || '',
                 badge: (showBadges && slider.badge && slider.badge.trim() !== '') ? slider.badge : undefined,
-                title: slider.title?.trim() || storeConfig.name,
-                description: slider.description?.trim() || storeConfig.description || '',
+                title: slider.title || storeConfig.name,
+                description: slider.description || storeConfig.description || '',
+                // Only set button text if it's not empty - this allows button visibility logic to work
                 primaryButtonText: primaryButtonText || getLayoutText(storeConfig, 'common.shopNow', 'Shop Now'),
-                primaryButtonLink: slider.primaryButton?.link || `/${storeConfig.slug}/products`,
-                secondaryButtonText: secondaryButtonText || undefined,
-                secondaryButtonLink: slider.secondaryButton?.link || `/${storeConfig.slug}/categories`,
+                primaryButtonLink: toStoreHref(storeConfig.slug, slider.primaryButton?.link, '/products'),
+                secondaryButtonText: secondaryButtonText || undefined, // Don't provide fallback for secondary
+                secondaryButtonLink: toStoreHref(storeConfig.slug, slider.secondaryButton?.link, '/categories'),
             };
         });
-    };
-    const buildLegacyFallbackHeroSlides = () => [
-        {
-            image: getBannerImage(storeConfig, 'hero_slide_1', 'https://images.unsplash.com/photo-1523381210434-271e8be1f52b?q=80&w=2000&auto=format&fit=crop'),
-            badge: layoutConfig?.hero?.showBadges
-                ? (isRealStore && layoutConfig?.text?.hero?.slides?.[0]?.badge ? layoutConfig.text.hero.slides[0].badge : getLayoutText(storeConfig, 'hero.badge', 'New Season'))
-                : undefined,
-            title: isRealStore && layoutConfig?.text?.hero?.slides?.[0]?.title ? layoutConfig.text.hero.slides[0].title : (getLayoutText(storeConfig, 'hero.slide1.title', storeConfig.name) || storeConfig.name),
-            description: isRealStore && layoutConfig?.text?.hero?.slides?.[0]?.description ? layoutConfig.text.hero.slides[0].description : (getLayoutText(storeConfig, 'hero.slide1.description', storeConfig.description) || storeConfig.description),
-            primaryButtonText: isRealStore && layoutConfig?.text?.hero?.slides?.[0]?.primaryButton ? layoutConfig.text.hero.slides[0].primaryButton : getLayoutText(storeConfig, 'common.shopNow', 'Shop Now'),
-            primaryButtonLink: `/${storeConfig.slug}/products`,
-            secondaryButtonText: isRealStore && layoutConfig?.text?.hero?.slides?.[0]?.secondaryButton ? layoutConfig.text.hero.slides[0].secondaryButton : getLayoutText(storeConfig, 'common.explore', 'Explore'),
-            secondaryButtonLink: `/${storeConfig.slug}/categories`,
-        },
-        {
-            image: getBannerImage(storeConfig, 'hero_slide_2', 'https://images.unsplash.com/photo-1441986300917-64674bd600d8?q=80&w=2000&auto=format&fit=crop'),
-            badge: layoutConfig?.hero?.showBadges
-                ? (isRealStore && layoutConfig?.text?.hero?.slides?.[1]?.badge ? layoutConfig.text.hero.slides[1].badge : getLayoutText(storeConfig, 'common.trending', 'Trending Now'))
-                : undefined,
-            title: isRealStore && layoutConfig?.text?.hero?.slides?.[1]?.title ? layoutConfig.text.hero.slides[1].title : getLayoutText(storeConfig, 'hero.slide2.title', 'Discover Your Style'),
-            description: isRealStore && layoutConfig?.text?.hero?.slides?.[1]?.description ? layoutConfig.text.hero.slides[1].description : getLayoutText(storeConfig, 'hero.slide2.description', 'Explore our curated collection of timeless pieces and contemporary designs.'),
-            primaryButtonText: isRealStore && layoutConfig?.text?.hero?.slides?.[1]?.primaryButton ? layoutConfig.text.hero.slides[1].primaryButton : getLayoutText(storeConfig, 'common.viewAll', 'View Collection'),
-            primaryButtonLink: `/${storeConfig.slug}/products`,
-            secondaryButtonText: isRealStore && layoutConfig?.text?.hero?.slides?.[1]?.secondaryButton ? layoutConfig.text.hero.slides[1].secondaryButton : undefined,
-            secondaryButtonLink: `/${storeConfig.slug}/categories/men`,
-        },
-        {
-            image: getBannerImage(storeConfig, 'hero_slide_3', 'https://images.unsplash.com/photo-1558769132-cb1aea458c5e?q=80&w=2000&auto=format&fit=crop'),
-            badge: layoutConfig?.hero?.showBadges
-                ? (isRealStore && layoutConfig?.text?.hero?.slides?.[2]?.badge ? layoutConfig.text.hero.slides[2].badge : getLayoutText(storeConfig, 'common.limited', 'Limited Edition'))
-                : undefined,
-            title: isRealStore && layoutConfig?.text?.hero?.slides?.[2]?.title ? layoutConfig.text.hero.slides[2].title : getLayoutText(storeConfig, 'hero.slide3.title', 'Premium Quality'),
-            description: isRealStore && layoutConfig?.text?.hero?.slides?.[2]?.description ? layoutConfig.text.hero.slides[2].description : getLayoutText(storeConfig, 'hero.slide3.description', 'Crafted with attention to detail and premium materials for lasting elegance.'),
-            primaryButtonText: isRealStore && layoutConfig?.text?.hero?.slides?.[2]?.primaryButton ? layoutConfig.text.hero.slides[2].primaryButton : getLayoutText(storeConfig, 'common.shopNow', 'Shop Now'),
-            primaryButtonLink: `/${storeConfig.slug}/products`,
-            secondaryButtonText: isRealStore && layoutConfig?.text?.hero?.slides?.[2]?.secondaryButton ? layoutConfig.text.hero.slides[2].secondaryButton : undefined,
-            secondaryButtonLink: `/${storeConfig.slug}/categories/men`,
-        },
-    ];
-    let heroSlides = buildLegacyFallbackHeroSlides();
-    if (layoutConfig?.sections?.hero?.sliders && Array.isArray(layoutConfig.sections.hero.sliders) && layoutConfig.sections.hero.sliders.length > 0) {
-        heroSlides = mapConfigSlidersToHeroSlides(layoutConfig.sections.hero.sliders, layoutConfig.sections.hero);
     }
     else if (layoutConfig?.hero?.sliders && Array.isArray(layoutConfig.hero.sliders) && layoutConfig.hero.sliders.length > 0) {
-        heroSlides = mapConfigSlidersToHeroSlides(layoutConfig.hero.sliders, layoutConfig.sections?.hero);
+        // Fallback to top-level hero.sliders
+        if (process.env.NODE_ENV === 'development') {
+            console.log('[ClothingHomePage] Using top-level hero.sliders structure');
+        }
+        heroSlides = layoutConfig.hero.sliders
+            .filter((slider) => slider && slider.image) // Filter out invalid sliders
+            .map((slider) => {
+            const primaryButtonText = slider.primaryButton?.text?.trim() || '';
+            const secondaryButtonText = slider.secondaryButton?.text?.trim() || '';
+            // Check badge visibility - use sections.hero.showBadges first, fallback to top-level hero.showBadges
+            const showBadges = layoutConfig?.sections?.hero?.showBadges !== false &&
+                (layoutConfig?.hero?.showBadges !== false || layoutConfig?.sections?.hero?.showBadges === undefined);
+            return {
+                image: slider.image || '',
+                badge: (showBadges && slider.badge && slider.badge.trim() !== '') ? slider.badge : undefined,
+                title: slider.title || storeConfig.name,
+                description: slider.description || storeConfig.description || '',
+                primaryButtonText: primaryButtonText || getLayoutText(storeConfig, 'common.shopNow', 'Shop Now'),
+                primaryButtonLink: toStoreHref(storeConfig.slug, slider.primaryButton?.link, '/products'),
+                secondaryButtonText: secondaryButtonText || undefined,
+                secondaryButtonLink: toStoreHref(storeConfig.slug, slider.secondaryButton?.link, '/categories'),
+            };
+        });
     }
-    if (heroSlides.length === 0) {
-        heroSlides = buildLegacyFallbackHeroSlides();
+    else {
+        // Fallback to old format (backward compatibility)
+        heroSlides = [
+            {
+                image: getBannerImage(storeConfig, 'hero_slide_1', 'https://images.unsplash.com/photo-1523381210434-271e8be1f52b?q=80&w=2000&auto=format&fit=crop'),
+                badge: layoutConfig?.hero?.showBadges
+                    ? (isRealStore && layoutConfig?.text?.hero?.slides?.[0]?.badge ? layoutConfig.text.hero.slides[0].badge : getLayoutText(storeConfig, 'hero.badge', 'New Season'))
+                    : undefined,
+                title: isRealStore && layoutConfig?.text?.hero?.slides?.[0]?.title ? layoutConfig.text.hero.slides[0].title : (getLayoutText(storeConfig, 'hero.slide1.title', storeConfig.name) || storeConfig.name),
+                description: isRealStore && layoutConfig?.text?.hero?.slides?.[0]?.description ? layoutConfig.text.hero.slides[0].description : (getLayoutText(storeConfig, 'hero.slide1.description', storeConfig.description) || storeConfig.description),
+                primaryButtonText: isRealStore && layoutConfig?.text?.hero?.slides?.[0]?.primaryButton ? layoutConfig.text.hero.slides[0].primaryButton : getLayoutText(storeConfig, 'common.shopNow', 'Shop Now'),
+                primaryButtonLink: `/${storeConfig.slug}/products`,
+                secondaryButtonText: isRealStore && layoutConfig?.text?.hero?.slides?.[0]?.secondaryButton ? layoutConfig.text.hero.slides[0].secondaryButton : getLayoutText(storeConfig, 'common.explore', 'Explore'),
+                secondaryButtonLink: `/${storeConfig.slug}/categories`,
+            },
+            {
+                image: getBannerImage(storeConfig, 'hero_slide_2', 'https://images.unsplash.com/photo-1617059063772-34532796ddb5?q=80&w=2000&auto=format&fit=crop'),
+                badge: layoutConfig?.hero?.showBadges
+                    ? (isRealStore && layoutConfig?.text?.hero?.slides?.[1]?.badge ? layoutConfig.text.hero.slides[1].badge : getLayoutText(storeConfig, 'common.trending', 'Trending Now'))
+                    : undefined,
+                title: isRealStore && layoutConfig?.text?.hero?.slides?.[1]?.title ? layoutConfig.text.hero.slides[1].title : getLayoutText(storeConfig, 'hero.slide2.title', 'Discover Your Style'),
+                description: isRealStore && layoutConfig?.text?.hero?.slides?.[1]?.description ? layoutConfig.text.hero.slides[1].description : getLayoutText(storeConfig, 'hero.slide2.description', 'Explore our curated collection of timeless pieces and contemporary designs.'),
+                primaryButtonText: isRealStore && layoutConfig?.text?.hero?.slides?.[1]?.primaryButton ? layoutConfig.text.hero.slides[1].primaryButton : getLayoutText(storeConfig, 'common.viewAll', 'View Collection'),
+                primaryButtonLink: `/${storeConfig.slug}/products`,
+                secondaryButtonText: isRealStore && layoutConfig?.text?.hero?.slides?.[1]?.secondaryButton ? layoutConfig.text.hero.slides[1].secondaryButton : undefined,
+                secondaryButtonLink: `/${storeConfig.slug}/categories/men`,
+            },
+            {
+                image: getBannerImage(storeConfig, 'hero_slide_3', 'https://images.unsplash.com/photo-1558769132-cb1aea458c5e?q=80&w=2000&auto=format&fit=crop'),
+                badge: layoutConfig?.hero?.showBadges
+                    ? (isRealStore && layoutConfig?.text?.hero?.slides?.[2]?.badge ? layoutConfig.text.hero.slides[2].badge : getLayoutText(storeConfig, 'common.limited', 'Limited Edition'))
+                    : undefined,
+                title: isRealStore && layoutConfig?.text?.hero?.slides?.[2]?.title ? layoutConfig.text.hero.slides[2].title : getLayoutText(storeConfig, 'hero.slide3.title', 'Premium Quality'),
+                description: isRealStore && layoutConfig?.text?.hero?.slides?.[2]?.description ? layoutConfig.text.hero.slides[2].description : getLayoutText(storeConfig, 'hero.slide3.description', 'Crafted with attention to detail and premium materials for lasting elegance.'),
+                primaryButtonText: isRealStore && layoutConfig?.text?.hero?.slides?.[2]?.primaryButton ? layoutConfig.text.hero.slides[2].primaryButton : getLayoutText(storeConfig, 'common.shopNow', 'Shop Now'),
+                primaryButtonLink: `/${storeConfig.slug}/products`,
+                secondaryButtonText: isRealStore && layoutConfig?.text?.hero?.slides?.[2]?.secondaryButton ? layoutConfig.text.hero.slides[2].secondaryButton : undefined,
+                secondaryButtonLink: `/${storeConfig.slug}/categories/men`,
+            },
+        ];
     }
     const [currentSlide, setCurrentSlide] = useState(0);
     const [isAutoPlaying, setIsAutoPlaying] = useState(layoutConfig?.hero?.autoPlay !== false);
@@ -170,7 +202,6 @@ export function ClothingHomePage({ storeConfig: initialConfig }) {
             setAutoPlayResumeTime(10000);
         }
     };
-    usePreviewSlideSync('hero', goToSlide, () => setIsAutoPlaying(false));
     const nextSlide = () => {
         if (heroSlides.length === 0)
             return;
@@ -193,29 +224,23 @@ export function ClothingHomePage({ storeConfig: initialConfig }) {
     const getCategoryGridClass = () => {
         return 'grid-cols-1 md:grid-cols-2';
     };
-    return (_jsxs("div", { className: "min-h-screen bg-white", children: [(layoutConfig?.sections?.hero?.show !== false || layoutConfig?.hero?.show !== false) && heroSlides.length > 0 && (_jsxs("section", { ...section('hero'), style: getPayazaSectionInlineStyle(storeConfig, 'home', 'hero'), className: `relative min-h-[360px] w-full overflow-hidden ${isPreview
-                    ? 'h-[min(70dvh,28rem)] sm:h-[min(75dvh,32rem)] lg:h-[85vh]'
-                    : 'h-[70dvh] sm:h-[75dvh] lg:h-[85vh]'}`, onMouseEnter: () => setIsAutoPlaying(false), onMouseLeave: () => layoutConfig?.hero?.autoPlay !== false && setIsAutoPlaying(true), children: [_jsx("div", { className: "relative h-full w-full", children: heroSlides.map((slide, index) => (_jsxs("div", { className: `absolute inset-0 transition-opacity duration-1000 ease-in-out ${index === currentSlide ? 'opacity-100 z-10' : 'opacity-0 z-0'}`, children: [_jsxs("div", { className: "absolute inset-0", ...image('hero', ['sliders', String(index), 'image']), children: [_jsx(ImageWithFallback, { src: slide.image, alt: slide.title, className: "absolute inset-0 h-full w-full object-cover", skeletonAspectRatio: "16/9" }), _jsx("div", { className: "absolute inset-0 bg-gradient-to-r from-black/50 via-black/20 to-transparent" })] }), _jsx("div", { className: "absolute inset-0 flex items-center z-20", children: _jsx("div", { className: "container mx-auto px-4 sm:px-6 lg:px-8", children: _jsxs("div", { className: `max-w-3xl text-white space-y-8 transition-all duration-1000 ${index === currentSlide
+    return (_jsxs("div", { className: "min-h-screen bg-white", children: [(layoutConfig?.sections?.hero?.show !== false || layoutConfig?.hero?.show !== false) && heroSlides.length > 0 && (_jsxs("section", { "data-section": "hero", className: "relative h-[85vh] w-full overflow-hidden", onMouseEnter: () => setIsAutoPlaying(false), onMouseLeave: () => layoutConfig?.hero?.autoPlay !== false && setIsAutoPlaying(true), children: [_jsx("div", { className: "relative h-full w-full", children: heroSlides.map((slide, index) => (_jsxs("div", { className: `absolute inset-0 transition-opacity duration-1000 ease-in-out ${index === currentSlide ? 'opacity-100 z-10' : 'opacity-0 z-0'}`, children: [_jsxs("div", { className: "absolute inset-0", children: [_jsx(ImageWithFallback, { src: slide.image, alt: slide.title, className: "absolute inset-0 h-full w-full object-cover", skeletonAspectRatio: "16/9", priority: index === currentSlide }), _jsx("div", { className: "absolute inset-0 bg-gradient-to-r from-black/50 via-black/20 to-transparent" })] }), _jsx("div", { className: "absolute inset-0 flex items-center z-20", children: _jsx("div", { className: "container mx-auto px-4 sm:px-6 lg:px-8", children: _jsxs("div", { className: `max-w-3xl text-white space-y-8 transition-all duration-1000 ${index === currentSlide
                                                 ? 'opacity-100 translate-y-0'
-                                                : 'opacity-0 translate-y-8'}`, children: [_jsxs("div", { children: [showLayoutDecorativeBadges() && slide.badge && (_jsx("span", { className: "inline-block px-4 py-1.5 bg-white/20 backdrop-blur-md rounded-full text-sm font-medium border border-white/30 uppercase tracking-wider mb-4", ...edit('hero', ['sliders', String(index), 'badge']), children: slide.badge })), _jsx("h1", { className: "text-4xl sm:text-6xl lg:text-7xl font-bold leading-tight tracking-tight mb-4", ...edit('hero', ['sliders', String(index), 'title']), children: slide.title }), _jsx("div", { className: "h-1 w-24 bg-white/80 rounded-full" })] }), _jsx("p", { className: "text-xl sm:text-2xl text-gray-100 font-light leading-relaxed max-w-lg", ...edit('hero', ['sliders', String(index), 'description']), children: slide.description }), _jsxs("div", { className: "flex flex-wrap gap-4 pt-4", children: [layoutConfig?.sections?.hero?.showCTA !== false &&
+                                                : 'opacity-0 translate-y-8'}`, children: [_jsxs("div", { children: [slide.badge && (_jsx("span", { className: "inline-block px-4 py-1.5 bg-white/20 backdrop-blur-md rounded-full text-sm font-medium border border-white/30 uppercase tracking-wider mb-4", children: slide.badge })), _jsx("h1", { className: "text-4xl sm:text-6xl lg:text-7xl font-bold leading-tight tracking-tight mb-4", children: slide.title }), _jsx("div", { className: "h-1 w-24 bg-white/80 rounded-full" })] }), _jsx("p", { className: "text-xl sm:text-2xl text-gray-100 font-light leading-relaxed max-w-lg", children: slide.description }), _jsxs("div", { className: "flex flex-wrap gap-4 pt-4", children: [layoutConfig?.sections?.hero?.showCTA !== false &&
                                                             layoutConfig?.hero?.showCTA !== false &&
                                                             slide.primaryButtonText &&
-                                                            slide.primaryButtonText.trim() !== '' && (_jsx(Link, { href: resolveStoreLink(slide.primaryButtonLink || 'products', storeConfig.slug), children: _jsx(Button, { size: "lg", className: "h-14 px-10 text-base rounded-full bg-white text-black hover:bg-gray-100 transition-all duration-300 hover:scale-105 font-semibold", ...edit('hero', ['sliders', String(index), 'primaryButton', 'text']), children: slide.primaryButtonText }) })), (layoutConfig?.sections?.hero?.showSecondaryCTA !== false || layoutConfig?.hero?.showSecondaryCTA !== false) &&
+                                                            slide.primaryButtonText.trim() !== '' && (_jsx(Link, { href: slide.primaryButtonLink, children: _jsx(Button, { size: "lg", className: "h-14 px-10 text-base rounded-full bg-white text-black hover:bg-gray-100 transition-all duration-300 hover:scale-105 font-semibold", children: slide.primaryButtonText }) })), (layoutConfig?.sections?.hero?.showSecondaryCTA !== false || layoutConfig?.hero?.showSecondaryCTA !== false) &&
                                                             slide.secondaryButtonText &&
                                                             slide.secondaryButtonText.trim() !== '' &&
-                                                            slide.secondaryButtonLink && (_jsx(Link, { href: resolveStoreLink(slide.secondaryButtonLink, storeConfig.slug), children: _jsx(Button, { size: "lg", variant: "outline", className: "h-14 px-10 text-base rounded-full border-white bg-transparent text-white hover:bg-white/20 hover:text-white backdrop-blur-sm transition-all duration-300", style: { color: 'white' }, ...edit('hero', ['sliders', String(index), 'secondaryButton', 'text']), children: slide.secondaryButtonText }) }))] })] }) }) })] }, index))) }), _jsx("button", { onClick: prevSlide, className: "absolute left-4 top-1/2 -translate-y-1/2 z-30 bg-white/10 hover:bg-white/20 backdrop-blur-md rounded-full p-3 transition-all duration-300 hover:scale-110 group", "aria-label": "Previous slide", children: _jsx(ChevronLeft, { className: "h-6 w-6 text-white group-hover:text-white" }) }), _jsx("button", { onClick: nextSlide, className: "absolute right-4 top-1/2 -translate-y-1/2 z-30 bg-white/10 hover:bg-white/20 backdrop-blur-md rounded-full p-3 transition-all duration-300 hover:scale-110 group", "aria-label": "Next slide", children: _jsx(ChevronRight, { className: "h-6 w-6 text-white group-hover:text-white" }) }), _jsx("div", { className: "absolute bottom-8 left-1/2 -translate-x-1/2 z-30 flex gap-2", children: heroSlides.map((_, index) => (_jsx("button", { onClick: () => goToSlide(index), className: `transition-all duration-300 rounded-full ${index === currentSlide
+                                                            slide.secondaryButtonLink && (_jsx(Link, { href: slide.secondaryButtonLink, children: _jsx(Button, { size: "lg", variant: "outline", className: "h-14 px-10 text-base rounded-full border-white bg-transparent text-white hover:bg-white/20 hover:text-white backdrop-blur-sm transition-all duration-300", style: { color: 'white' }, children: slide.secondaryButtonText }) }))] })] }) }) })] }, index))) }), _jsx("button", { onClick: prevSlide, className: "absolute left-4 top-1/2 -translate-y-1/2 z-30 bg-white/10 hover:bg-white/20 backdrop-blur-md rounded-full p-3 transition-all duration-300 hover:scale-110 group", "aria-label": "Previous slide", children: _jsx(ChevronLeft, { className: "h-6 w-6 text-white group-hover:text-white" }) }), _jsx("button", { onClick: nextSlide, className: "absolute right-4 top-1/2 -translate-y-1/2 z-30 bg-white/10 hover:bg-white/20 backdrop-blur-md rounded-full p-3 transition-all duration-300 hover:scale-110 group", "aria-label": "Next slide", children: _jsx(ChevronRight, { className: "h-6 w-6 text-white group-hover:text-white" }) }), _jsx("div", { className: "absolute bottom-8 left-1/2 -translate-x-1/2 z-30 flex gap-2", children: heroSlides.map((_, index) => (_jsx("button", { onClick: () => goToSlide(index), className: `transition-all duration-300 rounded-full ${index === currentSlide
                                 ? 'w-12 h-2 bg-white'
-                                : 'w-2 h-2 bg-white/50 hover:bg-white/75'}`, "aria-label": `Go to slide ${index + 1}` }, index))) })] })), layoutConfig?.sections?.features?.show !== false && (_jsx("section", { ...section('benefitsStrip'), style: getPayazaSectionInlineStyle(storeConfig, 'home', 'benefitsStrip'), className: "py-8 bg-gray-50 border-b border-gray-100", children: _jsx("div", { className: "container mx-auto px-4 sm:px-6 lg:px-8", children: _jsx("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-8 text-center divide-y md:divide-y-0 md:divide-x divide-gray-200", children: compactArrayItems(layoutConfig?.sections?.features?.items?.length
-                            ? layoutConfig.sections.features.items
-                            : isPreview
-                                ? [
-                                    { icon: 'Truck', title: 'Free Shipping', description: `On all orders over $${storeConfig.settings.freeShippingThreshold}` },
-                                    { icon: 'RefreshCw', title: 'Free Returns', description: '30-day money back guarantee' },
-                                    { icon: 'ShieldCheck', title: 'Secure Payment', description: '100% secure checkout process' },
-                                ]
-                                : []).map((item, idx) => {
-                            return (_jsxs("div", { className: "flex flex-col items-center justify-center gap-2 p-4", children: [_jsx("div", { ...icon('benefitsStrip', ['items', String(idx), 'icon']), children: _jsx(DynamicIcon, { name: readItemIconName(item, 'Truck'), className: "h-6 w-6 text-gray-900" }) }), _jsx("h3", { className: "font-semibold text-gray-900", ...inline('benefitsStrip', ['items', String(idx), 'title']), children: item.title }), _jsx("p", { className: "text-sm text-gray-500", ...inline('benefitsStrip', ['items', String(idx), 'description']), children: item.description })] }, idx));
-                        }) }) }) })), layoutConfig?.sections?.categories?.show !== false && (_jsx("section", { ...section('categories'), style: getPayazaSectionInlineStyle(storeConfig, 'home', 'categories'), className: "py-12 md:py-20 px-4 sm:px-6 lg:px-8", children: _jsxs("div", { className: "container mx-auto max-w-7xl", children: [_jsxs("div", { className: "flex flex-col md:flex-row justify-between items-end mb-8 md:mb-12 gap-4", children: [_jsxs("div", { children: [_jsx("h2", { className: "text-3xl md:text-4xl font-bold mb-3 tracking-tight", ...inline('categories', ['title']), children: layoutConfig?.sections?.categories?.title || getLayoutText(storeConfig, 'sections.categories.title', isPreview ? 'Shop by Category' : '') }), _jsx("p", { className: "text-gray-500 text-lg", ...inline('categories', ['subtitle']), children: layoutConfig?.sections?.categories?.subtitle || getLayoutText(storeConfig, 'sections.categories.subtitle', isPreview ? 'Curated collections for every style' : '') })] }), layoutConfig?.sections?.categories?.showViewAll !== false && (_jsxs(Link, { href: `/${storeConfig.slug}/categories`, className: "group flex items-center gap-2 text-sm font-medium hover:text-gray-600 transition-colors pb-1 border-b border-transparent hover:border-gray-300", ...inline('categories', ['viewAll']), children: [getLayoutText(storeConfig, 'sections.categories.viewAll', 'View All Categories'), " ", _jsx(ArrowRight, { className: "h-4 w-4 transition-transform group-hover:translate-x-1" })] }))] }), _jsx("div", { className: `grid ${getCategoryGridClass()} gap-6`, children: displayedCategories.map((category) => {
+                                : 'w-2 h-2 bg-white/50 hover:bg-white/75'}`, "aria-label": `Go to slide ${index + 1}` }, index))) })] })), layoutConfig?.sections?.features?.show !== false && (_jsx("section", { "data-section": "about", className: "py-8 bg-gray-50 border-b border-gray-100", children: _jsx("div", { className: "container mx-auto px-4 sm:px-6 lg:px-8", children: _jsx("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-8 text-center divide-y md:divide-y-0 md:divide-x divide-gray-200", children: (layoutConfig?.sections?.features?.items || [
+                            { icon: 'Truck', title: 'Free Shipping', description: `On all orders over $${storeConfig.settings.freeShippingThreshold}` },
+                            { icon: 'RefreshCw', title: 'Free Returns', description: '30-day money back guarantee' },
+                            { icon: 'ShieldCheck', title: 'Secure Payment', description: '100% secure checkout process' }
+                        ]).filter(Boolean).map((item, idx) => {
+                            return (_jsxs("div", { className: "flex flex-col items-center justify-center gap-2 p-4", children: [_jsx(DynamicIcon, { name: item.icon, className: "h-6 w-6 text-gray-900" }), _jsx("h3", { className: "font-semibold text-gray-900", children: item.title }), _jsx("p", { className: "text-sm text-gray-500", children: item.description })] }, idx));
+                        }) }) }) })), layoutConfig?.sections?.categories?.show !== false && (_jsx("section", { "data-section": "categories", className: "py-12 md:py-20 px-4 sm:px-6 lg:px-8", children: _jsxs("div", { className: "container mx-auto max-w-7xl", children: [_jsxs("div", { className: "flex flex-col md:flex-row justify-between items-end mb-8 md:mb-12 gap-4", children: [_jsxs("div", { children: [_jsx("h2", { className: "text-3xl md:text-4xl font-bold mb-3 tracking-tight", children: getLayoutText(storeConfig, 'sections.categories.title', 'Shop by Category') }), _jsx("p", { className: "text-gray-500 text-lg", children: getLayoutText(storeConfig, 'sections.categories.subtitle', 'Curated collections for every style') })] }), layoutConfig?.sections?.categories?.showViewAll !== false && (_jsxs(Link, { href: `/${storeConfig.slug}/categories`, className: "group flex items-center gap-2 text-sm font-medium hover:text-gray-600 transition-colors pb-1 border-b border-transparent hover:border-gray-300", children: [getLayoutText(storeConfig, 'sections.categories.viewAll', 'View All Categories'), " ", _jsx(ArrowRight, { className: "h-4 w-4 transition-transform group-hover:translate-x-1" })] }))] }), _jsx("div", { className: `grid ${getCategoryGridClass()} gap-6`, children: displayedCategories.map((category) => {
                                 // Validate category image - handle all formats
                                 const extractCategoryImage = (image) => {
                                     if (!image)
@@ -239,30 +264,68 @@ export function ClothingHomePage({ storeConfig: initialConfig }) {
                                     return undefined;
                                 };
                                 const categoryImage = extractCategoryImage(category.image);
-                                return (_jsxs(Link, { href: `/${storeConfig.slug}/categories/${category.slug}`, className: `group relative overflow-hidden rounded-2xl aspect-[3/4]`, children: [_jsxs("div", { className: "absolute inset-0 bg-gray-200", children: [_jsx(ImageWithFallback, { src: categoryImage, alt: category.name, className: "w-full h-full object-cover transition-transform duration-700 group-hover:scale-110", skeletonAspectRatio: "auto" }), _jsx("div", { className: "absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent opacity-80 group-hover:opacity-70 transition-opacity" })] }), _jsxs("div", { className: "absolute inset-0 flex flex-col justify-end p-8", children: [_jsx("h3", { className: "text-2xl font-bold text-white mb-2 transform translate-y-0 transition-transform duration-300", children: category.name }), _jsx("div", { className: "h-0.5 w-12 bg-white/0 group-hover:bg-white/100 transition-all duration-500 mb-4" }), _jsxs("span", { className: "inline-flex items-center text-white text-sm font-medium opacity-0 group-hover:opacity-100 transform translate-y-4 group-hover:translate-y-0 transition-all duration-300", children: [getLayoutText(storeConfig, 'common.shopNow', 'Shop Now'), " ", _jsx(ArrowRight, { className: "ml-2 h-4 w-4" })] })] })] }, category.id));
-                            }) })] }) })), layoutConfig?.sections?.marketing?.editorial?.show !== false && (_jsx("section", { ...section('lookbook'), style: getPayazaSectionInlineStyle(storeConfig, 'home', 'lookbook'), className: "py-16 md:py-24 px-4 sm:px-6 lg:px-8 bg-stone-50", children: _jsx("div", { className: "container mx-auto max-w-7xl", children: _jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-10 md:gap-12 lg:gap-20 items-center", children: [_jsxs("div", { className: "relative pb-8 md:pb-0", children: [_jsx("div", { className: "aspect-[4/5] rounded-lg overflow-hidden relative", ...image('lookbook', ['image']), children: _jsx(ImageWithFallback, { src: layoutConfig?.sections?.marketing?.editorial?.image || 'https://images.unsplash.com/photo-1490481651871-ab68de25d43d?q=80&w=2000&auto=format&fit=crop', alt: "Editorial Lookbook", className: "w-full h-full object-cover", skeletonAspectRatio: "4/5" }) }), (layoutConfig?.sections?.marketing?.editorial?.detailImage) && (_jsx("div", { className: "z-20 mx-auto mt-6 h-40 w-40 rounded-lg bg-white p-4 shadow-xl animate-fade-in-up md:absolute md:bottom-[-2rem] md:right-[-2rem] md:mx-0 md:mt-0 md:h-48 md:w-48", style: { animationDelay: '0.2s' }, ...image('lookbook', ['detailImage']), children: _jsx("div", { className: "relative h-full w-full", children: _jsx(ImageWithFallback, { src: layoutConfig.sections.marketing.editorial.detailImage, alt: "Detail Shot", className: "h-full w-full rounded object-cover", skeletonAspectRatio: "square" }) }) }))] }), _jsxs("div", { className: "space-y-8", children: [_jsx("div", { className: "flex flex-col gap-2", children: _jsx("span", { className: "text-sm font-bold tracking-widest text-gray-500 uppercase", ...inline('lookbook', ['badgeText']), children: layoutConfig?.sections?.marketing?.editorial?.badgeText || "Lookbook" }) }), _jsx("h2", { className: "text-4xl md:text-5xl font-bold tracking-tight leading-tight text-gray-900", ...edit('lookbook', ['title']), children: layoutConfig?.sections?.marketing?.editorial?.title ? (layoutConfig.sections.marketing.editorial.title.split('\n').map((line, idx, arr) => (_jsxs("span", { children: [line, idx < arr.length - 1 && _jsx("br", {})] }, idx)))) : (_jsxs(_Fragment, { children: ["Redefining Modern ", _jsx("br", {}), _jsx("span", { className: "italic font-serif", children: "Elegance" })] })) }), _jsx("p", { className: "text-lg text-gray-600 leading-relaxed", ...edit('lookbook', ['description']), children: layoutConfig?.sections?.marketing?.editorial?.description || "Explore our latest editorial featuring timeless pieces crafted for the contemporary wardrobe. From essential basics to statement outwear, find your signature look." }), _jsxs("div", { className: "flex flex-col sm:flex-row gap-4 pt-4", children: [layoutConfig?.sections?.marketing?.editorial?.primaryButton?.text && (_jsx(Link, { href: layoutConfig.sections.marketing.editorial.primaryButton.link?.startsWith('/')
-                                                    ? `/${storeConfig.slug}${layoutConfig.sections.marketing.editorial.primaryButton.link}`
-                                                    : (layoutConfig.sections.marketing.editorial.primaryButton.link || `/${storeConfig.slug}/style-guide`), children: _jsx(Button, { className: "rounded-full px-8 py-6 bg-gray-900 hover:bg-black text-white transition-all", ...edit('lookbook', ['primaryButton', 'text']), children: layoutConfig.sections.marketing.editorial.primaryButton.text }) })), layoutConfig?.sections?.marketing?.editorial?.secondaryButton?.text && (_jsx(Link, { href: layoutConfig.sections.marketing.editorial.secondaryButton.link?.startsWith('/')
-                                                    ? `/${storeConfig.slug}${layoutConfig.sections.marketing.editorial.secondaryButton.link}`
-                                                    : (layoutConfig.sections.marketing.editorial.secondaryButton.link || `/${storeConfig.slug}/about`), children: _jsx(Button, { variant: "outline", className: "rounded-full px-8 py-6 border-gray-300 hover:bg-white hover:border-gray-900 transition-all", ...edit('lookbook', ['secondaryButton', 'text']), children: layoutConfig.sections.marketing.editorial.secondaryButton.text }) }))] })] })] }) }) })), layoutConfig?.sections?.featuredProducts?.show !== false && (_jsx("section", { ...section('featuredProducts'), style: getPayazaSectionInlineStyle(storeConfig, 'home', 'featuredProducts'), className: "py-16 md:py-24 px-4 sm:px-6 lg:px-8 bg-white", children: _jsxs("div", { className: "container mx-auto max-w-7xl", children: [_jsxs("div", { className: "text-center max-w-2xl mx-auto mb-10 md:mb-16", children: [_jsx("span", { className: "text-sm font-bold tracking-widest text-gray-500 uppercase mb-3 block", ...inline('featuredProducts', ['eyebrow']), children: layoutConfig?.sections?.featuredProducts?.eyebrow || "Curated For You" }), _jsx("h2", { className: "text-3xl md:text-4xl font-bold mb-4 tracking-tight", ...inline('featuredProducts', ['title']), children: layoutConfig?.sections?.featuredProducts?.title || getLayoutText(storeConfig, 'sections.featuredProducts.title', 'Trending Now') }), _jsx("div", { className: "h-1 w-20 bg-gray-900 mx-auto mb-6" }), _jsx("p", { className: "text-gray-600 text-lg", ...inline('featuredProducts', ['subtitle']), children: getLayoutText(storeConfig, 'sections.featuredProducts.subtitle', 'Discover the latest trends and essential pieces that define this season\'s style.') })] }), _jsx("div", { className: "grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-8", children: products.slice(0, 4).map((product) => {
-                                const validImages = resolveProductImageUrls(product.images);
-                                const firstImage = validImages[0];
-                                return (_jsx("div", { className: "group", children: _jsxs(Link, { href: `/${storeConfig.slug}/products/${product.slug}`, onClick: () => trackStorefrontEvent('Product_clicked', {
-                                            storeId: storeConfig.id,
-                                            storeSlug: storeConfig.slug,
-                                            productId: product.id,
-                                            productName: product.name,
-                                            categoryId: product.categoryId,
-                                            price: product.price,
-                                        }), children: [_jsxs("div", { className: "relative aspect-[3/4] bg-gray-50 rounded-xl overflow-hidden mb-4", children: [_jsx(ImageWithFallback, { src: firstImage, alt: product.name, className: "w-full h-full object-cover transition-transform duration-700 group-hover:scale-105", skeletonAspectRatio: "3/4" }), validImages[1] && (_jsx(ImageWithFallback, { src: validImages[1], alt: product.name, className: "absolute inset-0 w-full h-full object-cover opacity-0 group-hover:opacity-100 transition-opacity duration-500", skeletonAspectRatio: "3/4" })), _jsxs("div", { className: "hidden lg:flex absolute bottom-4 right-4 flex-col gap-2 opacity-0 transform translate-x-4 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-300", children: [storeConfig.features.wishlist && (_jsx(Button, { variant: "secondary", size: "icon", className: "bg-white hover:bg-black hover:text-white shadow-md rounded-full transition-colors", children: _jsx(Heart, { className: "h-4 w-4" }) })), _jsx(Button, { variant: "secondary", size: "icon", className: "bg-white hover:bg-black hover:text-white shadow-md rounded-full transition-colors", children: _jsx(ShoppingCart, { className: "h-4 w-4" }) })] }), _jsx(Button, { variant: "secondary", size: "icon", className: "lg:hidden absolute bottom-3 right-3 bg-white text-black h-10 w-10 rounded-full shadow-lg z-10 active:scale-95 transition-transform", children: _jsx(ShoppingCart, { className: "h-4 w-4" }) }), product.compareAtPrice && (_jsx("span", { className: "absolute top-3 left-3 bg-black text-white text-xs font-bold px-3 py-1 rounded-full uppercase tracking-wide", children: getLayoutText(storeConfig, 'common.sale', 'Sale') }))] }), _jsxs("div", { className: "space-y-1", children: [_jsx("h3", { className: "font-semibold text-gray-900 group-hover:text-gray-600 transition-colors text-lg", children: product.name }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "font-medium text-gray-900", children: formatCurrency(product.price, product.currency || 'USD') }), product.compareAtPrice && (_jsx("span", { className: "text-sm text-gray-400 line-through", children: formatCurrency(product.compareAtPrice, product.currency || 'USD') }))] }), _jsx(ProductRating, { rating: product.rating, reviewCount: product.reviewCount, size: "sm", showReviewCount: false, className: "shrink-0" })] })] }) }, product.id));
-                            }) }), layoutConfig?.sections?.featuredProducts?.showViewAll !== false && (_jsx("div", { className: "mt-16 text-center", children: _jsx(Link, { href: `/${storeConfig.slug}/products`, children: _jsx(Button, { variant: "outline", className: "rounded-full px-10 py-6 border-gray-200 hover:border-black hover:bg-black hover:text-white transition-all text-base font-medium", ...inline('featuredProducts', ['viewAll']), children: getLayoutText(storeConfig, 'sections.featuredProducts.viewAll', 'View All Products') }) }) }))] }) })), _jsx(PromoBanner, { config: layoutConfig?.sections?.marketing?.promoBanner
-                    ? {
-                        show: layoutConfig.sections.marketing.promoBanner.show ?? false,
-                        image: layoutConfig.sections.marketing.promoBanner.image,
-                        title: layoutConfig.sections.marketing.promoBanner.title,
-                        subtitle: layoutConfig.sections.marketing.promoBanner.subtitle,
-                        buttonText: layoutConfig.sections.marketing.promoBanner.buttonText,
-                        buttonLink: layoutConfig.sections.marketing.promoBanner.buttonLink,
-                    }
-                    : undefined, storeSlug: storeConfig.slug, layoutStyle: "clothing", sectionKey: "promoBanner", page: "home", className: "container mx-auto max-w-7xl" })] }));
+                                return (_jsxs(Link, { href: `/${storeConfig.slug}/categories/${category.slug}`, className: `group relative overflow-hidden rounded-2xl aspect-[3/4]`, children: [_jsxs("div", { className: "absolute inset-0 bg-gray-200", children: [_jsx(ImageWithFallback, { src: categoryImage, alt: category.name, className: "w-full h-full object-cover transition-transform duration-700 group-hover:scale-110", skeletonAspectRatio: "auto", lazy: true }), _jsx("div", { className: "absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent opacity-80 group-hover:opacity-70 transition-opacity" })] }), _jsxs("div", { className: "absolute inset-0 flex flex-col justify-end p-8", children: [_jsx("h3", { className: "text-2xl font-bold text-white mb-2 transform translate-y-0 transition-transform duration-300", children: category.name }), _jsx("div", { className: "h-0.5 w-12 bg-white/0 group-hover:bg-white/100 transition-all duration-500 mb-4" }), _jsxs("span", { className: "inline-flex items-center text-white text-sm font-medium opacity-0 group-hover:opacity-100 transform translate-y-4 group-hover:translate-y-0 transition-all duration-300", children: [getLayoutText(storeConfig, 'common.shopNow', 'Shop Now'), " ", _jsx(ArrowRight, { className: "ml-2 h-4 w-4" })] })] })] }, category.id));
+                            }) })] }) })), layoutConfig?.sections?.marketing?.editorial?.show !== false && (_jsx("section", { "data-section": "editorial", className: "py-16 md:py-24 px-4 sm:px-6 lg:px-8 bg-stone-50", children: _jsx("div", { className: "container mx-auto max-w-7xl", children: _jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-10 md:gap-12 lg:gap-20 items-center", children: [_jsxs("div", { className: "relative", children: [_jsx("div", { className: "aspect-[4/5] rounded-lg overflow-hidden relative", children: _jsx(ImageWithFallback, { src: layoutConfig?.sections?.marketing?.editorial?.image || 'https://images.unsplash.com/photo-1490481651871-ab68de25d43d?q=80&w=2000&auto=format&fit=crop', alt: "Editorial Lookbook", className: "w-full h-full object-cover", skeletonAspectRatio: "4/5", lazy: true }) }), (layoutConfig?.sections?.marketing?.editorial?.detailImage) && (_jsx("div", { className: "absolute w-48 h-48 bg-white p-4 shadow-xl rounded-lg hidden md:block z-20 animate-fade-in-up", style: { bottom: '-2rem', right: '-2rem', animationDelay: '0.2s' }, children: _jsx("div", { className: "w-full h-full relative", children: _jsx(ImageWithFallback, { src: layoutConfig.sections.marketing.editorial.detailImage, alt: "Detail Shot", className: "w-full h-full object-cover rounded", skeletonAspectRatio: "square", lazy: true }) }) }))] }), _jsxs("div", { className: "space-y-8", children: [_jsx("div", { className: "flex flex-col gap-2", children: _jsx("span", { className: "text-sm font-bold tracking-widest text-gray-500 uppercase", children: layoutConfig?.sections?.marketing?.editorial?.badgeText || "Lookbook" }) }), _jsx("h2", { className: "text-4xl md:text-5xl font-bold tracking-tight leading-tight text-gray-900", children: layoutConfig?.sections?.marketing?.editorial?.title ? (layoutConfig.sections.marketing.editorial.title.split('\n').map((line, idx, arr) => (_jsxs("span", { children: [line, idx < arr.length - 1 && _jsx("br", {})] }, idx)))) : (_jsxs(_Fragment, { children: ["Redefining Modern ", _jsx("br", {}), _jsx("span", { className: "italic font-serif", children: "Elegance" })] })) }), _jsx("p", { className: "text-lg text-gray-600 leading-relaxed", children: layoutConfig?.sections?.marketing?.editorial?.description || "Explore our latest editorial featuring timeless pieces crafted for the contemporary wardrobe. From essential basics to statement outwear, find your signature look." }), _jsxs("div", { className: "flex flex-col sm:flex-row gap-4 pt-4", children: [layoutConfig?.sections?.marketing?.editorial?.primaryButton?.text && (_jsx(Link, { href: toStoreHref(storeConfig.slug, layoutConfig.sections.marketing.editorial.primaryButton.link, '/style-guide'), children: _jsx(Button, { className: "rounded-full px-8 py-6 bg-gray-900 hover:bg-black text-white transition-all", children: layoutConfig.sections.marketing.editorial.primaryButton.text }) })), layoutConfig?.sections?.marketing?.editorial?.secondaryButton?.text && (_jsx(Link, { href: toStoreHref(storeConfig.slug, layoutConfig.sections.marketing.editorial.secondaryButton.link, '/about'), children: _jsx(Button, { variant: "outline", className: "rounded-full px-8 py-6 border-gray-300 hover:bg-white hover:border-gray-900 transition-all", children: layoutConfig.sections.marketing.editorial.secondaryButton.text }) }))] })] })] }) }) })), layoutConfig?.sections?.featuredProducts?.show !== false && (_jsx("section", { "data-section": "featuredProducts", className: "py-16 md:py-24 px-4 sm:px-6 lg:px-8 bg-white", children: _jsxs("div", { className: "container mx-auto max-w-7xl", children: [_jsxs("div", { className: "text-center max-w-2xl mx-auto mb-10 md:mb-16", children: [_jsx("span", { className: "text-sm font-bold tracking-widest text-gray-500 uppercase mb-3 block", children: layoutConfig?.sections?.featuredProducts?.eyebrow || "Curated For You" }), _jsx("h2", { className: "text-3xl md:text-4xl font-bold mb-4 tracking-tight", children: layoutConfig?.sections?.featuredProducts?.title || getLayoutText(storeConfig, 'sections.featuredProducts.title', 'Trending Now') }), _jsx("div", { className: "h-1 w-20 bg-gray-900 mx-auto mb-6" }), _jsx("p", { className: "text-gray-600 text-lg", children: getLayoutText(storeConfig, 'sections.featuredProducts.subtitle', 'Discover the latest trends and essential pieces that define this season\'s style.') })] }), _jsx("div", { className: "grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-8", children: products.slice(0, 4).map((product) => {
+                                // Comprehensive image extraction - handles all formats
+                                const extractProductImages = (images) => {
+                                    if (!images)
+                                        return [];
+                                    // If already an array of strings, validate and return
+                                    if (Array.isArray(images)) {
+                                        const firstItem = images[0];
+                                        if (typeof firstItem === 'string') {
+                                            return images
+                                                .filter((img) => typeof img === 'string' && img.trim().length > 0)
+                                                .map((img) => img.trim());
+                                        }
+                                        // If array of objects, extract URLs
+                                        if (firstItem && typeof firstItem === 'object' && firstItem !== null) {
+                                            const result = [];
+                                            for (const item of images) {
+                                                if (!item)
+                                                    continue;
+                                                if (typeof item === 'object' && item !== null) {
+                                                    // Check for url property
+                                                    if ('url' in item && item.url) {
+                                                        const url = typeof item.url === 'string' ? item.url.trim() : String(item.url).trim();
+                                                        if (url.length > 0) {
+                                                            result.push(url);
+                                                        }
+                                                    }
+                                                    // Check for nested url
+                                                    else if (item.url && typeof item.url === 'object' && 'url' in item.url) {
+                                                        const url = typeof item.url.url === 'string' ? item.url.url.trim() : String(item.url.url).trim();
+                                                        if (url.length > 0) {
+                                                            result.push(url);
+                                                        }
+                                                    }
+                                                }
+                                                else if (typeof item === 'string') {
+                                                    const trimmed = item.trim();
+                                                    if (trimmed.length > 0) {
+                                                        result.push(trimmed);
+                                                    }
+                                                }
+                                            }
+                                            return result;
+                                        }
+                                    }
+                                    // Handle single object
+                                    if (typeof images === 'object' && images !== null && !Array.isArray(images)) {
+                                        if ('url' in images && images.url) {
+                                            const url = typeof images.url === 'string' ? images.url.trim() : String(images.url).trim();
+                                            return url.length > 0 ? [url] : [];
+                                        }
+                                    }
+                                    // Handle single string
+                                    if (typeof images === 'string') {
+                                        const trimmed = images.trim();
+                                        return trimmed.length > 0 ? [trimmed] : [];
+                                    }
+                                    return [];
+                                };
+                                const validImages = extractProductImages(product.images);
+                                const firstImage = validImages.length > 0 ? validImages[0] : undefined;
+                                return (_jsx("div", { className: "group", children: _jsxs(Link, { href: `/${storeConfig.slug}/products/${product.slug}`, children: [_jsxs("div", { className: "relative aspect-[3/4] bg-gray-50 rounded-xl overflow-hidden mb-4", children: [_jsx(ImageWithFallback, { src: firstImage, alt: product.name, className: "w-full h-full object-cover transition-transform duration-700 group-hover:scale-105", skeletonAspectRatio: "3/4", lazy: true }), validImages[1] && (_jsx(ImageWithFallback, { src: validImages[1], alt: product.name, className: "absolute inset-0 w-full h-full object-cover opacity-0 group-hover:opacity-100 transition-opacity duration-500", skeletonAspectRatio: "3/4", lazy: true })), _jsxs("div", { className: "hidden lg:flex absolute bottom-4 right-4 flex-col gap-2 opacity-0 transform translate-x-4 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-300", children: [storeConfig.features.wishlist && (_jsx(Button, { variant: "secondary", size: "icon", className: "bg-white hover:bg-black hover:text-white shadow-md rounded-full transition-colors", children: _jsx(Heart, { className: "h-4 w-4" }) })), _jsx(Button, { variant: "secondary", size: "icon", className: "bg-white hover:bg-black hover:text-white shadow-md rounded-full transition-colors", children: _jsx(ShoppingCart, { className: "h-4 w-4" }) })] }), _jsx(Button, { variant: "secondary", size: "icon", className: "lg:hidden absolute bottom-3 right-3 bg-white text-black h-10 w-10 rounded-full shadow-lg z-10 active:scale-95 transition-transform", children: _jsx(ShoppingCart, { className: "h-4 w-4" }) }), product.compareAtPrice && (_jsx("span", { className: "absolute top-3 left-3 bg-black text-white text-xs font-bold px-3 py-1 rounded-full uppercase tracking-wide", children: getLayoutText(storeConfig, 'common.sale', 'Sale') }))] }), _jsxs("div", { className: "space-y-1", children: [_jsx("h3", { className: "font-semibold text-gray-900 group-hover:text-gray-600 transition-colors text-lg", children: product.name }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "font-medium text-gray-900", children: formatCurrency(product.price, product.currency || 'USD') }), product.compareAtPrice && (_jsx("span", { className: "text-sm text-gray-400 line-through", children: formatCurrency(product.compareAtPrice, product.currency || 'USD') }))] }), _jsx(ProductRating, { rating: product.rating, reviewCount: product.reviewCount, size: "sm", showReviewCount: false, className: "shrink-0" })] })] }) }, product.id));
+                            }) }), layoutConfig?.sections?.featuredProducts?.showViewAll !== false && (_jsx("div", { className: "mt-16 text-center", children: _jsx(Link, { href: `/${storeConfig.slug}/products`, children: _jsx(Button, { variant: "outline", className: "rounded-full px-10 py-6 border-gray-200 hover:border-black hover:bg-black hover:text-white transition-all text-base font-medium", children: getLayoutText(storeConfig, 'sections.featuredProducts.viewAll', 'View All Products') }) }) }))] }) }))] }));
 }

package/dist/layouts/clothing/index.js

@@ -1,8 +1,8 @@
 // Fashion Hub (clothing) layout — fully sandboxed exports (see ClothingLayout + styles/clothing.css)
-export { ClothingHomePage } from './components/ClothingHomePage.js';
-export { ClothingProductsPage } from './pages/ProductsPage.js';
-export { ClothingProductDetailPage } from './pages/ProductDetailPage.js';
-export { ClothingCategoryPage } from './pages/CategoryPage.js';
-export { ClothingCategoriesPage } from './pages/CategoriesPage.js';
-export { ClothingAboutPage } from './pages/AboutPage.js';
-export { ClothingContactPage } from './pages/ContactPage.js';
+export { ClothingHomePage } from './components/ClothingHomePage';
+export { ClothingProductsPage } from './pages/ProductsPage';
+export { ClothingProductDetailPage } from './pages/ProductDetailPage';
+export { ClothingCategoryPage } from './pages/CategoryPage';
+export { ClothingCategoriesPage } from './pages/CategoriesPage';
+export { ClothingAboutPage } from './pages/AboutPage';
+export { ClothingContactPage } from './pages/ContactPage';