storefront-layouts 1.0.3 → 1.0.4

package/dist/layouts/clothing-minimal/pages/ProductsPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProductsPage.d.ts","sourceRoot":"","sources":["../../../../src/layouts/clothing-minimal/pages/ProductsPage.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAgB,MAAM,0BAA0B,CAAC;AAyBrE,UAAU,iBAAiB;IACzB,WAAW,EAAE,WAAW,CAAC;CAC1B;AA8uBD,wBAAgB,2BAA2B,CAAC,KAAK,EAAE,iBAAiB,2CAMnE"}
+{"version":3,"file":"ProductsPage.d.ts","sourceRoot":"","sources":["../../../../src/layouts/clothing-minimal/pages/ProductsPage.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAgB,MAAM,0BAA0B,CAAC;AAyBrE,UAAU,iBAAiB;IACzB,WAAW,EAAE,WAAW,CAAC;CAC1B;AA6wBD,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,2CAMpD"}

package/dist/layouts/clothing-minimal/pages/ProductsPage.js

@@ -1,42 +1,37 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Button } from '../../../components/ui/button.js';
-import { Breadcrumbs } from '../../../components/ui/breadcrumbs.js';
-import { Sheet } from '../../../components/ui/sheet.js';
-import { ImageWithFallback } from '../../../components/ui/image-with-fallback.js';
-import { ProductCard } from '../../../components/ui/product-card.js';
-import { ProductGridSkeleton } from '../../../components/ui/skeletons/index.js';
-import { CategoryTree } from '../../../components/ui/category-tree.js';
-import { useStore } from '../../../lib/store-context.js';
-import { useToast } from '../../../components/ui/toast.js';
-import { useLoading } from '../../../lib/loading-context.js';
-import { useAnalytics } from '../../../hooks/use-analytics.js';
+import { Button } from '../../../components/ui/button';
+import { Breadcrumbs } from '../../../components/ui/breadcrumbs';
+import { Sheet } from '../../../components/ui/sheet';
+import { ImageWithFallback } from '../../../components/ui/image-with-fallback';
+import { ProductCard } from '../../../components/ui/product-card';
+import { ProductGridSkeleton } from '../../../components/ui/skeletons';
+import { CategoryTree } from '../../../components/ui/category-tree';
+import { useStore } from '../../../lib/store-context';
+import { useToast } from '../../../components/ui/toast';
+import { useLoading } from '../../../lib/loading-context';
+import { useAnalytics } from '../../../hooks/use-analytics';
 import { ChevronDown, ChevronUp, Star, Check, Search, RotateCcw, SlidersHorizontal } from 'lucide-react';
-import Link from 'next/link';
 import { useSearchParams } from 'next/navigation';
-import { useState, useMemo, useEffect, Suspense } from 'react';
-import { formatCurrency, isEditorPreviewMode, resolveStoreProductsForDisplay } from '../../../lib/utils/index.js';
-import { useCatalogLoader } from '../../../hooks/use-catalog-loader.js';
-import { useCatalogPriceRange } from '../../../hooks/use-catalog-price-range.js';
-import { getAllCategoryIds, flattenCategoryTree, buildCategoryTree } from '../../../lib/utils/category-tree.js';
-import { getBannerImage, getLayoutText } from '../../../lib/utils/asset-helpers.js';
-import { shouldUseAPI } from '../../../lib/utils/demo-detection.js';
-import { getStoreUrl } from '../../../lib/utils/url-helpers.js';
-import { encodePayazaFieldKey } from '../../../preview/canvas/field-key.js';
+import { useState, useMemo, useEffect, useRef, Suspense } from 'react';
+import { useProductBrands } from '../../../hooks/use-product-brands';
+import { filterActiveProducts } from '../../../lib/utils';
+import { getAllCategoryIds, flattenCategoryTree, buildCategoryTree } from '../../../lib/utils/category-tree';
+import { getBannerImage, getLayoutText } from '../../../lib/utils/asset-helpers';
+import { shouldUseAPI } from '../../../lib/utils/demo-detection';
+import { useCatalogPriceRange } from '../../../hooks/use-catalog-price-range';
+import { isWithinActivePriceRange } from '../../../lib/utils/catalog-price-bounds';
+import { ProductPriceFilterSection } from '../../shared/components/ProductPriceFilterSection';
 function ProductsPageContent({ storeConfig: initialConfig }) {
     const { store, addToCart } = useStore();
     const storeConfig = store || initialConfig;
-    const isPreview = isEditorPreviewMode(storeConfig);
-    const payaza = (sectionKey, segments) => isPreview ? encodePayazaFieldKey(sectionKey, segments) : undefined;
-    const { products: loadedProducts, categories: loadedCategories, isLoading: isLoadingProducts } = useCatalogLoader(storeConfig, { fetchServices: false });
     const searchParams = useSearchParams();
     const categoryParam = searchParams.get('category');
     const [products, setProducts] = useState(() => {
-        let initialProducts = resolveStoreProductsForDisplay(loadedProducts, isPreview);
-        // Ensure all products have unique IDs just in case mock data has duplicates
-        // or if we are artificially duplicating for grid demo
-        if (initialProducts.length > 0) {
-            // If very few products, duplicate them to show grid structure
+        // Filter out inactive/deleted products first
+        let initialProducts = filterActiveProducts(storeConfig.products || []);
+        // Template demos only: pad thin catalogs so the grid has structure.
+        if (initialProducts.length > 0 && !shouldUseAPI(storeConfig.slug)) {
             if (initialProducts.length < 4) {
                 initialProducts = [...initialProducts, ...initialProducts].map((p, i) => ({
                     ...p,
@@ -45,8 +40,6 @@ function ProductsPageContent({ storeConfig: initialConfig }) {
                 }));
             }
             else {
-                // Even if enough products, ensure IDs are unique strings
-                // (Mock data usually is fine, but this is a safeguard)
                 const seenIds = new Set();
                 initialProducts = initialProducts.map((p, i) => {
                     if (seenIds.has(p.id)) {
@@ -59,19 +52,18 @@ function ProductsPageContent({ storeConfig: initialConfig }) {
         }
         return initialProducts;
     });
-    const categories = loadedCategories;
-    useEffect(() => {
-        if (loadedProducts.length > 0) {
-            setProducts(resolveStoreProductsForDisplay(loadedProducts, isPreview));
-        }
-    }, [loadedProducts, isPreview]);
+    const [isLoadingProducts, setIsLoadingProducts] = useState(false);
+    const [currentPage, setCurrentPage] = useState(1);
+    const [totalProducts, setTotalProducts] = useState(storeConfig.productsTotal || storeConfig.products?.length || 0);
+    const categories = storeConfig.categories || [];
     const { addToast } = useToast();
     const { startBackendLoading, stopBackendLoading } = useLoading();
     const { trackEvent } = useAnalytics();
     // State for filters & sort
-    const { priceRange, setPriceRange, catalogBounds, sliderMax, resetPriceRange, hasActivePriceFilter, } = useCatalogPriceRange(products);
     const [selectedBrands, setSelectedBrands] = useState([]);
     const [selectedCategories, setSelectedCategories] = useState([]);
+    const storeCurrency = storeConfig.settings?.currency || 'NGN';
+    const { priceRange, setPriceRange, catalogBounds, resetPriceRange, hasActivePriceFilter, } = useCatalogPriceRange(products);
     const [selectedCategoryFilter, setSelectedCategoryFilter] = useState(null);
     // Initialize filters from URL
     useEffect(() => {
@@ -86,24 +78,20 @@ function ProductsPageContent({ storeConfig: initialConfig }) {
     const [sortBy, setSortBy] = useState('featured');
     const [visibleProducts, setVisibleProducts] = useState(12);
     const [isFiltering, setIsFiltering] = useState(false);
-    // Extract unique brands
-    const brands = useMemo(() => {
+    // Fallback brands from the loaded page; full catalog brands come from the brands API.
+    const fallbackBrands = useMemo(() => {
         const brandSet = new Set();
         products.forEach(product => {
-            // First check specifications for Brand
             if (product.specifications?.Brand) {
                 brandSet.add(product.specifications.Brand);
             }
-            else {
-                // Fallback to regex matching common brand names
-                const brandMatch = product.name.match(/\b(Reebok|Nike|Adidas|Puma|Zara|Dickies|Vans|Uniqlo|New Balance|Converse|Sony|Samsung|Apple|Dell|HP|Gucci|Prada|Versace|Armani|Calvin Klein|Tommy Hilfiger|Levi's|Gap|H&M|Forever 21|ASOS|Shein|Amazon|Microsoft|LG|Canon|Nikon|Bose|JBL|Beats|Ray-Ban|Oakley)\b/i);
-                if (brandMatch) {
-                    brandSet.add(brandMatch[1]);
-                }
+            else if (product.brand) {
+                brandSet.add(product.brand);
             }
         });
         return Array.from(brandSet).sort();
     }, [products]);
+    const brands = useProductBrands(storeConfig.id, fallbackBrands);
     // Track filter changes and show loading
     useEffect(() => {
         setIsFiltering(true);
@@ -147,7 +135,7 @@ function ProductsPageContent({ storeConfig: initialConfig }) {
                 }
             }
             // Price filter
-            if (product.price < priceRange[0] || product.price > priceRange[1]) {
+            if (!isWithinActivePriceRange(product.price, priceRange, catalogBounds)) {
                 return false;
             }
             // Category Filter (Top Buttons)
@@ -193,8 +181,87 @@ function ProductsPageContent({ storeConfig: initialConfig }) {
         }
         return result;
     }, [products, selectedBrands, effectiveCategoryIds, priceRange, selectedCategoryFilter, minRating, showInStockOnly, sortBy, categories]);
+    const productQuery = useMemo(() => {
+        const categoryIds = new Set(effectiveCategoryIds);
+        const selectedCategory = categories.find((category) => category.slug === selectedCategoryFilter);
+        if (selectedCategory)
+            getAllCategoryIds(selectedCategory).forEach((id) => categoryIds.add(id));
+        return {
+            storeId: storeConfig.id,
+            categoryIds: categoryIds.size ? Array.from(categoryIds).join(',') : undefined,
+            brands: selectedBrands.length ? selectedBrands.join(',') : undefined,
+            minPrice: priceRange[0] || undefined,
+            maxPrice: priceRange[1] < catalogBounds.max ? priceRange[1] : undefined,
+            rating: minRating || undefined,
+            inStock: showInStockOnly || undefined,
+            sortBy,
+        };
+    }, [catalogBounds.max, categories, effectiveCategoryIds, minRating, priceRange, selectedBrands, selectedCategoryFilter, showInStockOnly, sortBy, storeConfig.id]);
+    const skipBootstrapRefetch = useRef(true);
+    useEffect(() => {
+        let cancelled = false;
+        const isDefaultQuery = !productQuery.categoryIds &&
+            !productQuery.brands &&
+            !productQuery.minPrice &&
+            productQuery.maxPrice === undefined &&
+            !productQuery.rating &&
+            !productQuery.inStock &&
+            productQuery.sortBy === 'featured';
+        const fetchFilteredProducts = async () => {
+            // Keep SSR bootstrap first paint; only refetch when filters/sort change.
+            if (skipBootstrapRefetch.current && isDefaultQuery && products.length > 0) {
+                skipBootstrapRefetch.current = false;
+                setTotalProducts(storeConfig.productsTotal || products.length);
+                return;
+            }
+            skipBootstrapRefetch.current = false;
+            setIsLoadingProducts(true);
+            try {
+                const { productService } = await import('../../../lib/services/product.service');
+                const { transformProductToStoreProduct } = await import('../../../lib/store-config-utils');
+                const response = await productService.getProducts({ ...productQuery, page: 1, limit: 12 });
+                if (cancelled)
+                    return;
+                setProducts(response.data.map(transformProductToStoreProduct));
+                setCurrentPage(1);
+                setTotalProducts(response.meta.total);
+                setVisibleProducts(12);
+            }
+            catch (error) {
+                if (!cancelled)
+                    console.error('Failed to fetch products:', error);
+            }
+            finally {
+                if (!cancelled)
+                    setIsLoadingProducts(false);
+            }
+        };
+        fetchFilteredProducts();
+        return () => { cancelled = true; };
+    }, [productQuery]);
     const displayedProducts = filteredAndSortedProducts.slice(0, visibleProducts);
-    const hasMore = visibleProducts < filteredAndSortedProducts.length;
+    const hasMore = currentPage * 12 < totalProducts;
+    const handleLoadMore = async () => {
+        if (isLoadingProducts || !hasMore)
+            return;
+        setIsLoadingProducts(true);
+        try {
+            const { productService } = await import('../../../lib/services/product.service');
+            const { transformProductToStoreProduct } = await import('../../../lib/store-config-utils');
+            const nextPage = currentPage + 1;
+            const response = await productService.getProducts({ ...productQuery, page: nextPage, limit: 12 });
+            setProducts((current) => [...current, ...response.data.map(transformProductToStoreProduct)]);
+            setCurrentPage(nextPage);
+            setTotalProducts(response.meta.total);
+            setVisibleProducts((current) => current + 12);
+        }
+        catch (error) {
+            console.error('Failed to load more products:', error);
+        }
+        finally {
+            setIsLoadingProducts(false);
+        }
+    };
     const handleAddToCart = (product) => {
         addToCart(product);
         addToast(`${product.name} added to cart`, 'success');
@@ -217,8 +284,8 @@ function ProductsPageContent({ storeConfig: initialConfig }) {
         showInStockOnly;
     // Breadcrumbs
     const breadcrumbItems = [
-        { label: storeConfig.name, href: getStoreUrl(storeConfig.slug, '/') },
-        { label: 'Products', href: getStoreUrl(storeConfig.slug, '/products') },
+        { label: storeConfig.name, href: `/${storeConfig.slug}` },
+        { label: 'Products', href: `/${storeConfig.slug}/products` },
     ];
     // Get layout config and category header image
     const layoutConfig = storeConfig.layoutConfig;
@@ -231,9 +298,9 @@ function ProductsPageContent({ storeConfig: initialConfig }) {
         hasAssignedText: !!layoutConfig?.assignedText,
         categoryHeaderTitle: layoutConfig?.assignedText?.['category_header:title'],
     });
-    // Get category header image from assignedAssets; fall back to a minimal fashion default
+    // Get category header image from assignedAssets
     const categoryHeaderImage = layoutConfig?.assignedAssets?.category_header ||
-        getBannerImage(storeConfig, 'category_header', 'https://images.unsplash.com/photo-1490481651871-ab68de25d43d?q=80&w=2070&auto=format&fit=crop');
+        getBannerImage(storeConfig, 'category_header', '');
     console.log('[ProductsPage] Category header image:', categoryHeaderImage ? 'found' : 'not found', categoryHeaderImage);
     // Get category header title from assignedText
     const categoryHeaderTitle = layoutConfig?.assignedText?.['category_header:title'] ||
@@ -252,10 +319,12 @@ function ProductsPageContent({ storeConfig: initialConfig }) {
     const secondaryButtonText = hasSecondaryButtonFromConfig
         ? (categoryHeaderSecondaryButton && categoryHeaderSecondaryButton.trim() !== '' ? categoryHeaderSecondaryButton.trim() : null)
         : getLayoutText(storeConfig, 'sections.categories.viewAll', 'View Categories');
-    return (_jsxs("div", { className: "min-h-screen bg-white font-sans text-slate-900", children: [layoutConfig?.sections?.productsHeader?.show !== false && (_jsxs("div", { "data-section": "productsHeader", "data-payaza-section-key": "productsHeader", "data-payaza-page": "products", className: "relative overflow-hidden bg-white", children: [(layoutConfig?.sections?.productsHeader?.image || categoryHeaderImage) && (_jsxs("div", { className: "absolute inset-0 z-0", "data-payaza-image": payaza('productsHeader', ['image']), children: [_jsx(ImageWithFallback, { src: layoutConfig?.sections?.productsHeader?.image || categoryHeaderImage, alt: layoutConfig?.sections?.productsHeader?.title || categoryHeaderTitle || storeConfig.name, className: "w-full h-full object-cover", skeletonAspectRatio: "16/9" }), _jsx("div", { className: "absolute inset-0 bg-gradient-to-r from-black/60 via-black/40 to-black/60" })] })), !(layoutConfig?.sections?.productsHeader?.image || categoryHeaderImage) && (_jsxs("div", { className: "absolute top-0 left-0 w-full h-full overflow-hidden z-0 pointer-events-none", children: [_jsx("div", { className: "absolute top-[-10%] right-[-5%] w-[500px] h-[500px] bg-gray-100 rounded-full mix-blend-multiply filter blur-3xl opacity-70 animate-pulse-slow" }), _jsx("div", { className: "absolute bottom-[-10%] left-[-10%] w-[400px] h-[400px] bg-gray-50 rounded-full mix-blend-multiply filter blur-3xl opacity-70 animate-pulse-slow", style: { animationDelay: '2s' } })] })), _jsx("div", { className: `container mx-auto px-4 sm:px-6 lg:px-8 relative z-10 pt-12 pb-16 lg:pt-20 lg:pb-24 ${(layoutConfig?.sections?.productsHeader?.image || categoryHeaderImage) ? 'min-h-[500px] flex items-center' : ''}`, children: _jsx("div", { className: "flex flex-col items-center w-full max-w-4xl mx-auto", children: _jsxs("div", { className: `w-full text-center lg:text-left animate-fade-in-up ${(layoutConfig?.sections?.productsHeader?.image || categoryHeaderImage) ? 'text-white' : ''}`, children: [_jsx("div", { className: "flex justify-center lg:justify-start mb-6", children: _jsx(Breadcrumbs, { items: breadcrumbItems, variant: (layoutConfig?.sections?.productsHeader?.image || categoryHeaderImage) ? 'light' : 'default' }) }), _jsx("h1", { className: `text-4xl sm:text-5xl lg:text-6xl font-bold tracking-tight mb-6 leading-[1.1] ${(layoutConfig?.sections?.productsHeader?.image || categoryHeaderImage) ? 'text-white' : 'text-gray-900'}`, "data-payaza-edit": payaza('productsHeader', ['title']), children: layoutConfig?.sections?.productsHeader?.title || categoryHeaderTitle || (_jsxs(_Fragment, { children: ["Explore The Collections of ", _jsx("br", {}), _jsx("span", { className: "text-transparent bg-clip-text bg-gradient-to-r from-gray-900 via-gray-700 to-gray-900", children: storeConfig.name })] })) }), _jsx("p", { className: `text-lg mb-8 leading-relaxed max-w-lg mx-auto lg:mx-0 ${(layoutConfig?.sections?.productsHeader?.image || categoryHeaderImage) ? 'text-white/90' : 'text-gray-600'}`, "data-payaza-edit": payaza('productsHeader', ['description']), children: layoutConfig?.sections?.productsHeader?.description || getLayoutText(storeConfig, 'category_header:description', "Don't miss out on shopping our latest collection! curated for quality and style. Experience the perfect blend of modern aesthetics and premium craftsmanship.") }), _jsxs("div", { className: "flex flex-col sm:flex-row gap-4 justify-center lg:justify-start", children: [(layoutConfig?.sections?.productsHeader?.primaryButtonText || primaryButtonText) && (layoutConfig?.sections?.productsHeader?.primaryButtonText || primaryButtonText).trim() !== '' && (_jsx(Button, { className: `h-12 px-8 rounded-full text-base font-medium shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 ${(layoutConfig?.sections?.productsHeader?.image || categoryHeaderImage) ? 'bg-white text-gray-900 hover:bg-gray-100' : ''}`, onClick: () => {
+    return (_jsxs("div", { className: "min-h-screen bg-white font-sans text-slate-900", children: [layoutConfig?.sections?.productsHeader?.show !== false && (_jsxs("div", { className: "relative overflow-hidden bg-white", children: [(layoutConfig?.sections?.productsHeader?.image || categoryHeaderImage) && (_jsxs("div", { className: "absolute inset-0 z-0", children: [_jsx(ImageWithFallback, { src: layoutConfig?.sections?.productsHeader?.image || categoryHeaderImage, alt: layoutConfig?.sections?.productsHeader?.title || categoryHeaderTitle || storeConfig.name, className: "w-full h-full object-cover", skeletonAspectRatio: "16/9" }), _jsx("div", { className: "absolute inset-0 bg-gradient-to-r from-black/60 via-black/40 to-black/60" })] })), !(layoutConfig?.sections?.productsHeader?.image || categoryHeaderImage) && (_jsxs("div", { className: "absolute top-0 left-0 w-full h-full overflow-hidden z-0 pointer-events-none", children: [_jsx("div", { className: "absolute top-[-10%] right-[-5%] w-[500px] h-[500px] bg-gray-100 rounded-full mix-blend-multiply filter blur-3xl opacity-70 animate-pulse-slow" }), _jsx("div", { className: "absolute bottom-[-10%] left-[-10%] w-[400px] h-[400px] bg-gray-50 rounded-full mix-blend-multiply filter blur-3xl opacity-70 animate-pulse-slow", style: { animationDelay: '2s' } })] })), _jsx("div", { className: `container mx-auto px-4 sm:px-6 lg:px-8 relative z-10 pt-12 pb-16 lg:pt-20 lg:pb-24 ${(layoutConfig?.sections?.productsHeader?.image || categoryHeaderImage) ? 'min-h-[500px] flex items-center' : ''}`, children: _jsx("div", { className: "flex flex-col items-center w-full max-w-4xl mx-auto", children: _jsxs("div", { className: `w-full text-center lg:text-left animate-fade-in-up ${(layoutConfig?.sections?.productsHeader?.image || categoryHeaderImage) ? 'text-white' : ''}`, children: [_jsx("div", { className: "flex justify-center lg:justify-start mb-6", children: _jsx("div", { className: (layoutConfig?.sections?.productsHeader?.image || categoryHeaderImage) ? 'bg-white/10 backdrop-blur-md px-4 py-2 rounded-full border border-white/20' : '', children: _jsx(Breadcrumbs, { items: breadcrumbItems, variant: (layoutConfig?.sections?.productsHeader?.image || categoryHeaderImage) ? 'light' : 'default' }) }) }), _jsxs("div", { className: `inline-flex items-center gap-2 px-3 py-1 rounded-full text-xs font-bold tracking-wider uppercase mb-6 ${(layoutConfig?.sections?.productsHeader?.image || categoryHeaderImage) ? 'bg-white/20 backdrop-blur-md text-white border border-white/30' : 'bg-black/5 text-gray-900'}`, children: [_jsx("span", { className: `w-2 h-2 rounded-full animate-pulse ${(layoutConfig?.sections?.productsHeader?.image || categoryHeaderImage) ? 'bg-white' : 'bg-black'}` }), layoutConfig?.sections?.productsHeader?.badge || getLayoutText(storeConfig, 'common.newArrivals', 'New Arrivals 2024')] }), _jsx("h1", { className: `text-4xl sm:text-5xl lg:text-6xl font-bold tracking-tight mb-6 leading-[1.1] ${(layoutConfig?.sections?.productsHeader?.image || categoryHeaderImage) ? 'text-white' : 'text-gray-900'}`, children: layoutConfig?.sections?.productsHeader?.title || categoryHeaderTitle || (_jsxs(_Fragment, { children: ["Explore The Collections of ", _jsx("br", {}), _jsx("span", { className: "text-transparent bg-clip-text bg-gradient-to-r from-gray-900 via-gray-700 to-gray-900", children: storeConfig.name })] })) }), _jsx("p", { className: `text-lg mb-8 leading-relaxed max-w-lg mx-auto lg:mx-0 ${(layoutConfig?.sections?.productsHeader?.image || categoryHeaderImage) ? 'text-white/90' : 'text-gray-600'}`, children: layoutConfig?.sections?.productsHeader?.description || getLayoutText(storeConfig, 'category_header:description', "Don't miss out on shopping our latest collection! curated for quality and style. Experience the perfect blend of modern aesthetics and premium craftsmanship.") }), _jsxs("div", { className: "flex flex-col sm:flex-row gap-4 justify-center lg:justify-start", children: [(layoutConfig?.sections?.productsHeader?.primaryButtonText || primaryButtonText) && (layoutConfig?.sections?.productsHeader?.primaryButtonText || primaryButtonText).trim() !== '' && (_jsx(Button, { className: `h-12 px-8 rounded-full text-base font-medium shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 ${(layoutConfig?.sections?.productsHeader?.image || categoryHeaderImage) ? 'bg-white text-gray-900 hover:bg-gray-100' : ''}`, onClick: () => {
                                                     const element = document.getElementById('product-grid');
                                                     element?.scrollIntoView({ behavior: 'smooth' });
-                                                }, children: _jsx("span", { "data-payaza-edit": payaza('productsHeader', ['primaryButtonText']), children: layoutConfig?.sections?.productsHeader?.primaryButtonText || primaryButtonText }) })), (layoutConfig?.sections?.productsHeader?.secondaryButtonText || secondaryButtonText) && (layoutConfig?.sections?.productsHeader?.secondaryButtonText || secondaryButtonText).trim() !== '' && (_jsx(Link, { href: getStoreUrl(storeConfig.slug, layoutConfig?.sections?.productsHeader?.secondaryButtonLink || '/categories'), children: _jsx(Button, { className: `h-12 px-8 rounded-full text-base font-medium shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 ${(layoutConfig?.sections?.productsHeader?.image || categoryHeaderImage) ? 'bg-white/10 backdrop-blur-md text-white border border-white/30 hover:bg-white/20' : 'bg-gray-100 text-gray-900 hover:bg-gray-200 border border-gray-200'}`, children: _jsx("span", { "data-payaza-edit": payaza('productsHeader', ['secondaryButtonText']), children: layoutConfig?.sections?.productsHeader?.secondaryButtonText || secondaryButtonText }) }) }))] })] }) }) })] })), _jsxs("div", { "data-content-ready": true, "data-section": "productsGrid", "data-payaza-section-key": "productsGrid", "data-payaza-page": "products", className: "container mx-auto px-4 sm:px-6 lg:px-8 py-8", children: [_jsxs("div", { className: "flex gap-3 mb-8 overflow-x-auto pb-2 scrollbar-hide", children: [_jsx("button", { onClick: () => setSelectedCategoryFilter(null), className: `px-6 py-2.5 rounded-lg text-sm font-semibold whitespace-nowrap transition-all ${!selectedCategoryFilter
+                                                }, children: layoutConfig?.sections?.productsHeader?.primaryButtonText || primaryButtonText })), (layoutConfig?.sections?.productsHeader?.secondaryButtonText || secondaryButtonText) && (layoutConfig?.sections?.productsHeader?.secondaryButtonText || secondaryButtonText).trim() !== '' && (_jsx(Button, { className: `h-12 px-8 rounded-full text-base font-medium shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 ${(layoutConfig?.sections?.productsHeader?.image || categoryHeaderImage) ? 'bg-white/10 backdrop-blur-md text-white border border-white/30 hover:bg-white/20' : 'bg-gray-100 text-gray-900 hover:bg-gray-200 border border-gray-200'}`, onClick: () => {
+                                                    window.location.href = `/${storeConfig.slug}/categories`;
+                                                }, children: layoutConfig?.sections?.productsHeader?.secondaryButtonText || secondaryButtonText }))] })] }) }) })] })), _jsxs("div", { "data-content-ready": true, className: "container mx-auto px-4 sm:px-6 lg:px-8 py-8", children: [_jsxs("div", { className: "flex gap-3 mb-8 overflow-x-auto pb-2 scrollbar-hide", children: [_jsx("button", { onClick: () => setSelectedCategoryFilter(null), className: `px-6 py-2.5 rounded-lg text-sm font-semibold whitespace-nowrap transition-all ${!selectedCategoryFilter
                                     ? 'bg-gray-900 text-white hover:bg-blue-600'
                                     : 'bg-gray-100 text-gray-700 hover:bg-blue-50 hover:text-blue-600'}`, children: "All" }), categories.map((category) => (_jsx("button", { onClick: () => setSelectedCategoryFilter(selectedCategoryFilter === category.slug ? null : category.slug), className: `px-6 py-2.5 rounded-lg text-sm font-semibold whitespace-nowrap transition-all ${selectedCategoryFilter === category.slug
                                     ? 'bg-gray-900 text-white hover:bg-blue-600'
@@ -263,12 +332,12 @@ function ProductsPageContent({ storeConfig: initialConfig }) {
                                                     setSelectedCategories(prev => isSelected
                                                         ? [...prev, categoryId]
                                                         : prev.filter(id => id !== categoryId));
-                                                }, mode: "checkbox" })] }), _jsxs("div", { children: [_jsxs("div", { className: "flex items-center justify-between mb-4", children: [_jsx("h3", { className: "text-sm font-semibold text-gray-900 uppercase tracking-wide", children: "Price Range" }), (priceRange[0] > 0 || hasActivePriceFilter) && (_jsx("button", { onClick: () => resetPriceRange(), className: "text-xs text-gray-600 hover:text-blue-600 font-medium transition-colors", children: "Reset" }))] }), _jsxs("div", { className: "space-y-4", children: [_jsx("div", { className: "flex items-center gap-2", children: _jsx("input", { type: "range", min: "0", max: sliderMax, step: "50", value: priceRange[1], onChange: (e) => setPriceRange([priceRange[0], parseInt(e.target.value)]), className: "flex-1 h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-gray-900" }) }), _jsxs("div", { className: "flex items-center justify-between text-sm font-medium", children: [_jsx("span", { className: "text-gray-900", children: formatCurrency(priceRange[0], storeConfig.settings?.currency || 'USD', { minimumFractionDigits: 0, maximumFractionDigits: 0 }) }), _jsx("span", { className: "text-gray-900", children: formatCurrency(priceRange[1], storeConfig.settings?.currency || 'USD', { minimumFractionDigits: 0, maximumFractionDigits: 0 }) })] }), _jsxs("div", { className: "grid grid-cols-2 gap-2", children: [_jsxs("button", { onClick: () => setPriceRange([0, 100]), className: "px-3 py-2 text-xs font-semibold rounded-lg bg-gray-100 text-gray-700 hover:bg-blue-50 hover:text-blue-600 transition-colors", children: [formatCurrency(0, storeConfig.settings?.currency || 'USD', { minimumFractionDigits: 0, maximumFractionDigits: 0 }), " - ", formatCurrency(100, storeConfig.settings?.currency || 'USD', { minimumFractionDigits: 0, maximumFractionDigits: 0 })] }), _jsxs("button", { onClick: () => setPriceRange([0, 500]), className: "px-3 py-2 text-xs font-semibold rounded-lg bg-gray-100 text-gray-700 hover:bg-blue-50 hover:text-blue-600 transition-colors", children: [formatCurrency(0, storeConfig.settings?.currency || 'USD', { minimumFractionDigits: 0, maximumFractionDigits: 0 }), " - ", formatCurrency(500, storeConfig.settings?.currency || 'USD', { minimumFractionDigits: 0, maximumFractionDigits: 0 })] })] })] })] }), _jsxs("div", { children: [_jsx("h3", { className: "text-sm font-semibold text-gray-900 uppercase tracking-wide mb-4", children: "Rating" }), _jsx("div", { className: "space-y-2", children: [4, 3, 2, 1].map((rating) => (_jsxs("label", { className: "flex items-center gap-3 cursor-pointer group p-2 -ml-2 rounded-lg hover:bg-blue-50 hover:text-blue-600 transition-colors", children: [_jsx("div", { className: `w-5 h-5 rounded-full border flex items-center justify-center transition-colors ${minRating === rating ? 'border-blue-600 bg-blue-600' : 'border-gray-300 group-hover:border-blue-400'}`, children: minRating === rating && _jsx("div", { className: "w-2.5 h-2.5 bg-white rounded-full" }) }), _jsx("input", { type: "radio", name: "rating", checked: minRating === rating, onChange: () => setMinRating(minRating === rating ? null : rating), className: "hidden" }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx("div", { className: "flex text-yellow-400", children: Array.from({ length: 5 }).map((_, i) => (_jsx(Star, { className: `h-3.5 w-3.5 ${i < rating ? 'fill-current' : 'text-gray-200 fill-gray-200'}` }, i))) }), _jsx("span", { className: "text-sm text-gray-600", children: "& Up" })] })] }, rating))) })] })] }), _jsxs("div", { className: "lg:col-span-3", children: [_jsxs("div", { className: "lg:hidden mb-6 flex items-center justify-between", children: [_jsxs(Button, { onClick: () => setIsFilterOpen(true), variant: "outline", className: "flex items-center gap-2", children: [_jsx(SlidersHorizontal, { className: "h-4 w-4" }), " Filters"] }), _jsxs("select", { value: sortBy, onChange: (e) => setSortBy(e.target.value), className: "bg-transparent text-sm font-medium text-gray-700 focus:outline-none", children: [_jsx("option", { value: "featured", children: "Sort by: Featured" }), _jsx("option", { value: "newest", children: "Sort by: Newest" }), _jsx("option", { value: "price-asc", children: "Sort by: Price Low-High" }), _jsx("option", { value: "price-desc", children: "Sort by: Price High-Low" })] })] }), _jsxs("div", { className: "hidden lg:flex items-center justify-between mb-6", children: [_jsxs("p", { className: "text-sm text-gray-600", children: ["Showing ", _jsx("span", { className: "font-semibold text-gray-900", children: filteredAndSortedProducts.length }), " products"] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-sm text-gray-500", children: "Sort by:" }), _jsxs("select", { value: sortBy, onChange: (e) => setSortBy(e.target.value), className: "bg-transparent text-sm font-medium text-gray-900 focus:outline-none cursor-pointer hover:text-blue-600 transition-colors", children: [_jsx("option", { value: "featured", children: "Featured" }), _jsx("option", { value: "newest", children: "Newest Arrivals" }), _jsx("option", { value: "price-asc", children: "Price: Low to High" }), _jsx("option", { value: "price-desc", children: "Price: High to Low" }), _jsx("option", { value: "rating", children: "Top Rated" })] })] })] }), isLoadingProducts || isFiltering ? (_jsx(ProductGridSkeleton, { count: 12, columns: 3 })) : displayedProducts.length > 0 ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6", children: displayedProducts.map((product) => (_jsx(ProductCard, { product: product, storeSlug: storeConfig.slug, onAddToCart: handleAddToCart, onQuickView: handleQuickView }, product.id))) }), hasMore && (_jsx("div", { className: "mt-12 text-center", children: _jsx(Button, { onClick: () => setVisibleProducts(prev => prev + 12), variant: "outline", className: "min-w-[200px]", children: "Load More" }) }))] })) : (_jsxs("div", { className: "flex flex-col items-center justify-center py-20 bg-white rounded-lg border border-dashed border-gray-200 text-center", children: [_jsx("div", { className: "w-12 h-12 bg-gray-50 rounded-full flex items-center justify-center mb-4 text-gray-400", children: _jsx(Search, { className: "h-6 w-6" }) }), _jsx("h3", { className: "text-lg font-semibold text-gray-900 mb-1", children: "No products found" }), _jsx("p", { className: "text-sm text-gray-500 mb-6", children: "Try adjusting your filters or search criteria." }), _jsx(Button, { onClick: clearAllFilters, variant: "outline", children: "Clear All Filters" })] }))] })] })] }), _jsxs(Sheet, { isOpen: isFilterOpen, onClose: () => setIsFilterOpen(false), title: "Filters", side: "right", children: [_jsxs("div", { className: "flex flex-col h-full overflow-y-auto pb-20 space-y-8 p-1", children: [_jsxs("div", { className: "pb-6 border-b border-gray-100", children: [_jsx("h3", { className: "font-bold text-sm uppercase tracking-widest mb-4", children: "Availability" }), _jsxs("label", { className: "flex items-center gap-3", children: [_jsx("input", { type: "checkbox", checked: showInStockOnly, onChange: () => setShowInStockOnly(!showInStockOnly), className: "rounded border-gray-300 text-black focus:ring-black" }), _jsx("span", { className: "text-sm text-gray-700", children: "In Stock Only" })] })] }), _jsxs("div", { children: [_jsx("h3", { className: "font-bold text-sm uppercase tracking-widest mb-4", children: "Price Range" }), _jsx("input", { type: "range", min: "0", max: sliderMax, step: "50", value: priceRange[1], onChange: (e) => setPriceRange([priceRange[0], parseInt(e.target.value)]), className: "w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-black mb-4" }), _jsxs("div", { className: "flex justify-between font-bold text-sm", children: [_jsx("span", { children: formatCurrency(0, storeConfig.settings?.currency || 'USD', { minimumFractionDigits: 0, maximumFractionDigits: 0 }) }), _jsxs("span", { children: [formatCurrency(priceRange[1], storeConfig.settings?.currency || 'USD', { minimumFractionDigits: 0, maximumFractionDigits: 0 }), "+"] })] })] }), _jsxs("div", { children: [_jsx("h3", { className: "font-bold text-sm uppercase tracking-widest mb-4", children: "Categories" }), _jsx(CategoryTree, { categories: categories, selectedCategoryIds: selectedCategories, onCategoryToggle: (categoryId, isSelected) => {
+                                                }, mode: "checkbox" })] }), _jsx(ProductPriceFilterSection, { currency: storeCurrency, priceRange: priceRange, onPriceRangeChange: setPriceRange, bounds: catalogBounds, isFilterActive: hasActivePriceFilter, onReset: resetPriceRange }), _jsxs("div", { children: [_jsx("h3", { className: "text-sm font-semibold text-gray-900 uppercase tracking-wide mb-4", children: "Rating" }), _jsx("div", { className: "space-y-2", children: [4, 3, 2, 1].map((rating) => (_jsxs("label", { className: "flex items-center gap-3 cursor-pointer group p-2 -ml-2 rounded-lg hover:bg-blue-50 hover:text-blue-600 transition-colors", children: [_jsx("div", { className: `w-5 h-5 rounded-full border flex items-center justify-center transition-colors ${minRating === rating ? 'border-blue-600 bg-blue-600' : 'border-gray-300 group-hover:border-blue-400'}`, children: minRating === rating && _jsx("div", { className: "w-2.5 h-2.5 bg-white rounded-full" }) }), _jsx("input", { type: "radio", name: "rating", checked: minRating === rating, onChange: () => setMinRating(minRating === rating ? null : rating), className: "hidden" }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx("div", { className: "flex text-yellow-400", children: Array.from({ length: 5 }).map((_, i) => (_jsx(Star, { className: `h-3.5 w-3.5 ${i < rating ? 'fill-current' : 'text-gray-200 fill-gray-200'}` }, i))) }), _jsx("span", { className: "text-sm text-gray-600", children: "& Up" })] })] }, rating))) })] })] }), _jsxs("div", { className: "lg:col-span-3", children: [_jsxs("div", { className: "lg:hidden mb-6 flex items-center justify-between", children: [_jsxs(Button, { onClick: () => setIsFilterOpen(true), variant: "outline", className: "flex items-center gap-2", children: [_jsx(SlidersHorizontal, { className: "h-4 w-4" }), " Filters"] }), _jsxs("select", { value: sortBy, onChange: (e) => setSortBy(e.target.value), className: "bg-transparent text-sm font-medium text-gray-700 focus:outline-none", children: [_jsx("option", { value: "featured", children: "Sort by: Featured" }), _jsx("option", { value: "newest", children: "Sort by: Newest" }), _jsx("option", { value: "price-asc", children: "Sort by: Price Low-High" }), _jsx("option", { value: "price-desc", children: "Sort by: Price High-Low" })] })] }), _jsxs("div", { className: "hidden lg:flex items-center justify-between mb-6", children: [_jsxs("p", { className: "text-sm text-gray-600", children: ["Showing ", _jsx("span", { className: "font-semibold text-gray-900", children: filteredAndSortedProducts.length }), " products"] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-sm text-gray-500", children: "Sort by:" }), _jsxs("select", { value: sortBy, onChange: (e) => setSortBy(e.target.value), className: "bg-transparent text-sm font-medium text-gray-900 focus:outline-none cursor-pointer hover:text-blue-600 transition-colors", children: [_jsx("option", { value: "featured", children: "Featured" }), _jsx("option", { value: "newest", children: "Newest Arrivals" }), _jsx("option", { value: "price-asc", children: "Price: Low to High" }), _jsx("option", { value: "price-desc", children: "Price: High to Low" }), _jsx("option", { value: "rating", children: "Top Rated" })] })] })] }), isLoadingProducts || isFiltering ? (_jsx(ProductGridSkeleton, { count: 12, columns: 3 })) : displayedProducts.length > 0 ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6", children: displayedProducts.map((product) => (_jsx(ProductCard, { product: product, storeSlug: storeConfig.slug, onAddToCart: handleAddToCart, onQuickView: handleQuickView }, product.id))) }), hasMore && (_jsx("div", { className: "mt-12 text-center", children: _jsx(Button, { onClick: handleLoadMore, variant: "outline", className: "min-w-[200px]", children: "Load More" }) }))] })) : (_jsxs("div", { className: "flex flex-col items-center justify-center py-20 bg-white rounded-lg border border-dashed border-gray-200 text-center", children: [_jsx("div", { className: "w-12 h-12 bg-gray-50 rounded-full flex items-center justify-center mb-4 text-gray-400", children: _jsx(Search, { className: "h-6 w-6" }) }), _jsx("h3", { className: "text-lg font-semibold text-gray-900 mb-1", children: "No products found" }), _jsx("p", { className: "text-sm text-gray-500 mb-6", children: "Try adjusting your filters or search criteria." }), _jsx(Button, { onClick: clearAllFilters, variant: "outline", children: "Clear All Filters" })] }))] })] })] }), _jsxs(Sheet, { isOpen: isFilterOpen, onClose: () => setIsFilterOpen(false), title: "Filters", side: "right", children: [_jsxs("div", { className: "flex flex-col h-full overflow-y-auto pb-20 space-y-8 p-1", children: [_jsxs("div", { className: "pb-6 border-b border-gray-100", children: [_jsx("h3", { className: "font-bold text-sm uppercase tracking-widest mb-4", children: "Availability" }), _jsxs("label", { className: "flex items-center gap-3", children: [_jsx("input", { type: "checkbox", checked: showInStockOnly, onChange: () => setShowInStockOnly(!showInStockOnly), className: "rounded border-gray-300 text-black focus:ring-black" }), _jsx("span", { className: "text-sm text-gray-700", children: "In Stock Only" })] })] }), _jsx(ProductPriceFilterSection, { currency: storeCurrency, priceRange: priceRange, onPriceRangeChange: setPriceRange, bounds: catalogBounds, isFilterActive: hasActivePriceFilter, onReset: resetPriceRange }), _jsxs("div", { children: [_jsx("h3", { className: "font-bold text-sm uppercase tracking-widest mb-4", children: "Categories" }), _jsx(CategoryTree, { categories: categories, selectedCategoryIds: selectedCategories, onCategoryToggle: (categoryId, isSelected) => {
                                             setSelectedCategories(prev => isSelected
                                                 ? [...prev, categoryId]
                                                 : prev.filter(id => id !== categoryId));
                                         }, mode: "checkbox" })] }), _jsxs("div", { children: [_jsx("h3", { className: "font-bold text-sm uppercase tracking-widest mb-4", children: "Brand" }), brands.length > 0 ? (_jsx("div", { className: "space-y-3", children: brands.map(brand => (_jsxs("label", { className: "flex items-center gap-3", children: [_jsx("input", { type: "checkbox", checked: selectedBrands.includes(brand), onChange: () => setSelectedBrands(prev => prev.includes(brand) ? prev.filter(b => b !== brand) : [...prev, brand]), className: "rounded border-gray-300 text-black focus:ring-black" }), _jsx("span", { className: "text-sm text-gray-700", children: brand })] }, brand))) })) : (_jsx("p", { className: "text-xs text-gray-500 italic", children: "No brands available" }))] }), _jsxs("div", { children: [_jsx("h3", { className: "font-bold text-sm uppercase tracking-widest mb-4", children: "Rating" }), _jsx("div", { className: "space-y-3", children: [4, 3, 2, 1].map(rating => (_jsxs("label", { className: "flex items-center gap-3", children: [_jsx("input", { type: "radio", name: "mobile-rating", checked: minRating === rating, onChange: () => setMinRating(minRating === rating ? null : rating), className: "rounded-full border-gray-300 text-black focus:ring-black" }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx("div", { className: "flex text-yellow-400", children: Array.from({ length: 5 }).map((_, i) => (_jsx(Star, { className: `h-3 w-3 ${i < rating ? 'fill-current' : 'text-gray-200 fill-gray-200'}` }, i))) }), _jsx("span", { className: "text-sm text-gray-600", children: "& Up" })] })] }, rating))) })] })] }), _jsxs("div", { className: "absolute bottom-0 left-0 right-0 p-4 bg-white border-t border-gray-100 flex gap-3", children: [_jsx(Button, { onClick: clearAllFilters, variant: "outline", className: "flex-1 h-12 font-bold rounded-lg border-gray-300", children: "Reset" }), _jsx(Button, { onClick: () => setIsFilterOpen(false), className: "flex-[2] bg-black text-white hover:bg-blue-600 h-12 font-bold rounded-lg transition-colors", children: "View Results" })] })] })] }));
 }
-export function ClothingMinimalProductsPage(props) {
+export function ProductsPage(props) {
     return (_jsx(Suspense, { fallback: _jsx("div", { className: "min-h-screen flex items-center justify-center", children: _jsx("div", { className: "w-8 h-8 border-2 border-black border-t-transparent rounded-full animate-spin" }) }), children: _jsx(ProductsPageContent, { ...props }) }));
 }

package/dist/layouts/electronics/components/ElectronicsCategoriesPage.js

@@ -1,14 +1,14 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Zap, Smartphone, Laptop, Headphones, Watch, Camera } from 'lucide-react';
-import { Breadcrumbs } from '../../../components/ui/breadcrumbs.js';
-import { useStore } from '../../../lib/store-context.js';
-import { useCatalogLoader } from '../../../hooks/use-catalog-loader.js';
-import { isEditorPreviewMode, resolveStoreCategoriesForDisplay } from '../../../lib/utils/index.js';
-import { ElectronicsStoreHeader } from './ElectronicsStoreHeader.js';
-import { ElectronicsStoreFooter } from './ElectronicsStoreFooter.js';
+import { Breadcrumbs } from '../../../components/ui/breadcrumbs';
+import { useStore } from '../../../lib/store-context';
+import { useCatalogLoader } from '../../../hooks/use-catalog-loader';
+import { isEditorPreviewMode, resolveStoreCategoriesForDisplay } from '../../../lib/utils';
+import { ElectronicsStoreHeader } from './ElectronicsStoreHeader';
+import { ElectronicsStoreFooter } from './ElectronicsStoreFooter';
 import { motion } from 'framer-motion';
-import { CategoryMasonryGrid } from '../../../components/categories/category-masonry-grid.js';
+import { CategoryMasonryGrid } from '../../../components/categories/category-masonry-grid';
 function getCategoryIcon(slug) {
     if (slug.includes('phone'))
         return _jsx(Smartphone, { className: "h-6 w-6" });

package/dist/layouts/electronics/components/ElectronicsGridProductCard.js

@@ -1,19 +1,19 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button } from '../../../components/ui/button.js';
-import { ImageWithFallback } from '../../../components/ui/image-with-fallback.js';
-import { ProductRating } from '../../../components/ui/product-rating.js';
+import { Button } from '../../../components/ui/button';
+import { ImageWithFallback } from '../../../components/ui/image-with-fallback';
+import { ProductRating } from '../../../components/ui/product-rating';
 import { Heart, Plus } from 'lucide-react';
 import Link from 'next/link';
 import { motion } from 'framer-motion';
 import { useState } from 'react';
-import { useStore } from '../../../lib/store-context.js';
-import { useToast } from '../../../components/ui/toast.js';
-import { ButtonLoader } from '../../../components/ui/page-loader.js';
-import { useLoading } from '../../../lib/loading-context.js';
-import { cn, formatCurrency } from '../../../lib/utils/index.js';
-import { OutOfStockOverlay } from '../../../components/ui/out-of-stock-overlay.js';
-import { trackStorefrontEvent } from '../../../lib/mixpanel.js';
+import { useStore } from '../../../lib/store-context';
+import { useToast } from '../../../components/ui/toast';
+import { ButtonLoader } from '../../../components/ui/page-loader';
+import { useLoading } from '../../../lib/loading-context';
+import { cn, formatCurrency } from '../../../lib/utils';
+import { OutOfStockOverlay } from '../../../components/ui/out-of-stock-overlay';
+import { trackStorefrontEvent } from '../../../lib/mixpanel';
 export function ElectronicsGridProductCard({ product, storeSlug, onAddToCart, index }) {
     const [isHovered, setIsHovered] = useState(false);
     const { toggleWishlist, isInWishlist, isWishlistLoading, store } = useStore();

package/dist/layouts/electronics/components/ElectronicsHomePage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ElectronicsHomePage.d.ts","sourceRoot":"","sources":["../../../../src/layouts/electronics/components/ElectronicsHomePage.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAgB,MAAM,mBAAmB,CAAC;AAoB9D,UAAU,wBAAwB;IAC/B,WAAW,EAAE,WAAW,CAAC;CAC3B;AAED,wBAAgB,mBAAmB,CAAC,EAAE,WAAW,EAAE,aAAa,EAAE,EAAE,wBAAwB,2CAmb3F"}
+{"version":3,"file":"ElectronicsHomePage.d.ts","sourceRoot":"","sources":["../../../../src/layouts/electronics/components/ElectronicsHomePage.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,WAAW,EAAgB,MAAM,mBAAmB,CAAC;AAe9D,UAAU,wBAAwB;IAC/B,WAAW,EAAE,WAAW,CAAC;CAC3B;AAED,wBAAgB,mBAAmB,CAAC,EAAE,WAAW,EAAE,aAAa,EAAE,EAAE,wBAAwB,2CA8c3F"}

package/dist/layouts/electronics/components/ElectronicsHomePage.js

@@ -1,29 +1,26 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button } from '../../../components/ui/button.js';
-import { ImageWithFallback } from '../../../components/ui/image-with-fallback.js';
-import { ArrowRight, ShoppingCart, Zap, Smartphone, Laptop, Headphones, Watch, Camera, Battery, Wifi } from 'lucide-react';
-import { DynamicIcon } from '../../../components/ui/dynamic-icon.js';
+import { useFeaturedProducts } from '../../../hooks/use-featured-products';
+import { Button } from '../../../components/ui/button';
+import { ImageWithFallback } from '../../../components/ui/image-with-fallback';
+import { ArrowRight, ShoppingCart, Zap, Shield, Smartphone, Laptop, Headphones, Watch, Camera, Cpu, Battery, Wifi } from 'lucide-react';
 import Link from 'next/link';
-import { ElectronicsStoreHeader } from './ElectronicsStoreHeader.js';
-import { ElectronicsStoreFooter } from './ElectronicsStoreFooter.js';
+import { ElectronicsStoreHeader } from './ElectronicsStoreHeader';
+import { ElectronicsStoreFooter } from './ElectronicsStoreFooter';
 import { motion, useScroll, useTransform } from 'framer-motion';
-import { useRef } from 'react';
-import { useStore } from '../../../lib/store-context.js';
-import { useToast } from '../../../components/ui/toast.js';
-import { formatCurrency, filterActiveProducts } from '../../../lib/utils/index.js';
-import { getLayoutText } from '../../../lib/utils/asset-helpers.js';
-import { PromoBanner } from '../../shared/components/PromoBanner.js';
-import { getPayazaSectionInlineStyle } from '../../../lib/payaza-section-styles.js';
-import { showLayoutDecorativeBadges } from '../../../lib/layout-badges.js';
-import { CategoryMasonryGrid } from '../../../components/categories/category-masonry-grid.js';
-import { trackStorefrontEvent } from '../../../lib/mixpanel.js';
+import { useRef, useState } from 'react';
+import { useStore } from '../../../lib/store-context';
+import { useToast } from '../../../components/ui/toast';
+import { formatCurrency, filterActiveProducts } from '../../../lib/utils';
+import { getLayoutText } from '../../../lib/utils/asset-helpers';
+import { PromoBanner } from '../../shared/components/PromoBanner';
 export function ElectronicsHomePage({ storeConfig: initialConfig }) {
     const { store, addToCart } = useStore();
     const storeConfig = store || initialConfig;
     const MotionDiv = motion.div;
     const { addToast } = useToast();
     const scrollContainerRef = useRef(null);
+    const [email, setEmail] = useState('');
     // Layout Visibility
     const layout = storeConfig.layoutConfig;
     const scrollLeft = () => {
@@ -42,6 +39,12 @@ export function ElectronicsHomePage({ storeConfig: initialConfig }) {
         addToCart(product);
         addToast(`${product.name} added to cart`, 'success');
     };
+    const handleSubscribe = () => {
+        if (email) {
+            addToast('Thank you for subscribing!', 'success');
+            setEmail('');
+        }
+    };
     // In preview mode, use mock data if none are available
     const isPreview = (typeof window !== 'undefined' && window.__IS_PREVIEW__) || storeConfig.layoutConfig?.isPreview;
     const categories = (storeConfig.categories && storeConfig.categories.length > 0)
@@ -52,7 +55,8 @@ export function ElectronicsHomePage({ storeConfig: initialConfig }) {
             { id: 'cat3', name: 'Audio', slug: 'audio', image: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?q=80&w=800' },
             { id: 'cat4', name: 'Wearables', slug: 'wearables', image: 'https://images.unsplash.com/photo-1523275335684-37898b6baf30?q=80&w=800' }
         ] : []);
-    const rawProducts = storeConfig.products || [];
+    const initialProducts = storeConfig.products || [];
+    const rawProducts = useFeaturedProducts(storeConfig.id, initialProducts, !isPreview);
     const activeProducts = filterActiveProducts(rawProducts);
     // Use real active products if available, otherwise if in preview, use all products (including drafts), 
     // and if still none, use mock data
@@ -87,18 +91,12 @@ export function ElectronicsHomePage({ storeConfig: initialConfig }) {
             return _jsx(Camera, { className: "h-6 w-6" });
         return _jsx(Zap, { className: "h-6 w-6" });
     };
-    return (_jsxs("div", { className: "min-h-screen bg-slate-50 text-slate-900 font-sans selection:bg-blue-600 selection:text-white", children: [_jsx(ElectronicsStoreHeader, { storeConfig: storeConfig }), (layout?.sections?.hero?.show ?? layout?.hero?.show) !== false && (_jsxs("section", { "data-section": "hero", "data-payaza-section-key": "hero", "data-payaza-page": "home", ref: targetRef, className: "relative min-h-screen flex items-center pt-20 overflow-hidden bg-slate-950", style: getPayazaSectionInlineStyle(storeConfig, 'home', 'hero'), children: [_jsxs("div", { className: "absolute inset-0 overflow-hidden pointer-events-none", children: [_jsx("div", { className: "absolute top-[-10%] right-[-5%] w-[600px] h-[600px] bg-blue-600/20 rounded-full blur-[120px]" }), _jsx("div", { className: "absolute bottom-[-10%] left-[-5%] w-[500px] h-[500px] bg-indigo-600/20 rounded-full blur-[100px]" }), _jsx("div", { className: "absolute top-[20%] left-[20%] w-[300px] h-[300px] bg-cyan-500/10 rounded-full blur-[80px]" })] }), _jsx("div", { className: "container mx-auto px-6 relative z-10 py-20", children: _jsxs("div", { className: "grid lg:grid-cols-2 gap-16 items-center", children: [_jsxs(MotionDiv, { style: { opacity, scale }, className: "space-y-8 relative z-20", children: [showLayoutDecorativeBadges() && (layout?.sections?.hero?.showBadges ?? layout?.hero?.showBadges) === true && (_jsxs("div", { className: "inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-slate-900/50 border border-slate-800 text-blue-400 text-xs font-bold uppercase tracking-wider backdrop-blur-md", children: [_jsx("span", { className: "w-2 h-2 rounded-full bg-blue-500 animate-pulse" }), layout?.sections?.hero?.badge || getLayoutText(storeConfig, 'electronics.newArrivals', 'Next Gen • 2025 Series')] })), _jsxs("h1", { className: "text-4xl sm:text-6xl md:text-7xl lg:text-8xl font-black tracking-tighter leading-[0.9] text-white", children: [layout?.sections?.hero?.title || getLayoutText(storeConfig, 'hero.title', 'Future Realized'), " ", _jsx("br", {}), _jsx("span", { className: "text-transparent bg-clip-text bg-gradient-to-r from-blue-400 via-indigo-400 to-cyan-400", children: "Realized." })] }), _jsx("div", { className: "lg:hidden w-full max-w-[300px] mx-auto py-8", children: _jsx("div", { className: "relative aspect-square bg-gradient-to-br from-slate-800/50 to-slate-900/50 rounded-3xl p-6 border border-slate-700/30", children: _jsx(ImageWithFallback, { src: products[0]?.images?.[0], alt: "Hero Product", className: "w-full h-full object-contain drop-shadow-2xl", skeletonAspectRatio: "square" }) }) }), _jsx("p", { className: "text-lg text-slate-400 max-w-xl leading-relaxed font-medium", children: layout?.sections?.hero?.subtitle || `${storeConfig.description} Experience the pinnacle of engineering with our curated collection of premium electronics.` }), _jsxs("div", { className: "flex flex-wrap items-center gap-4 pt-4", children: [(layout?.sections?.hero?.showCTA ?? layout?.hero?.showCTA) !== false && (_jsx(Link, { href: `/${storeConfig.slug}/products`, children: _jsxs(Button, { className: "h-14 px-10 rounded-full bg-blue-600 hover:bg-blue-500 text-white font-bold text-lg transition-all hover:scale-105 shadow-[0_0_40px_-10px_rgba(59,130,246,0.5)] border-0 ring-0", children: [layout?.sections?.hero?.primaryCTA || getLayoutText(storeConfig, 'common.shopNow', 'Shop Now'), " ", _jsx(ArrowRight, { className: "ml-2 h-5 w-5" })] }) })), layout?.sections?.featuredProducts?.show !== false && (_jsxs("div", { className: "flex items-center gap-4 text-slate-400 text-sm font-medium ml-4", children: [_jsx("div", { className: "flex -space-x-3", children: [1, 2, 3].map(i => (_jsx("div", { className: "w-10 h-10 rounded-full border-2 border-slate-950 bg-slate-800 flex items-center justify-center text-xs text-white", children: _jsx("span", { className: "sr-only", children: "User" }) }, i))) }), _jsxs("div", { children: [_jsx("p", { className: "text-white font-bold", children: getLayoutText(storeConfig, 'common.account', '10k+ Happy') }), _jsx("p", { children: getLayoutText(storeConfig, 'common.account', 'Customers') })] })] }))] })] }), _jsx("div", { className: "relative h-[600px] hidden lg:block perspective-1000", children: _jsxs(MotionDiv, { initial: { opacity: 0, x: 100, rotateY: -20 }, animate: { opacity: 1, x: 0, rotateY: 0 }, transition: { duration: 1, ease: "easeOut" }, className: "relative z-10 w-full h-full", children: [_jsxs("div", { className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[400px] h-[500px] bg-gradient-to-br from-slate-800/80 to-slate-900/80 backdrop-blur-xl rounded-[3rem] border border-slate-700/50 p-8 shadow-2xl shadow-blue-900/20 transform rotate-[-6deg] hover:rotate-0 transition-transform duration-700", children: [_jsx("div", { className: "absolute top-8 right-8", children: _jsx(Zap, { className: "text-blue-500 w-8 h-8" }) }), _jsx(ImageWithFallback, { src: products[0]?.images?.[0], alt: "Hero Product", className: "w-full h-3/4 object-contain drop-shadow-[0_20px_50px_rgba(0,0,0,0.5)]", skeletonAspectRatio: "square" }), _jsx("div", { className: "absolute bottom-8 left-8 right-8", children: _jsxs("div", { className: "flex justify-between items-end", children: [_jsxs("div", { children: [_jsx("p", { className: "text-blue-400 font-bold text-sm mb-1", children: "New Arrival" }), _jsx("h3", { className: "text-white text-2xl font-bold", children: products[0]?.name })] }), _jsx("div", { className: "text-right", children: _jsx("p", { className: "text-white text-2xl font-bold", children: formatCurrency(products[0]?.price || 0, products[0]?.currency || storeConfig?.settings?.currency || 'USD') }) })] }) })] }), _jsx(MotionDiv, { animate: { y: [0, -20, 0] }, transition: { repeat: Infinity, duration: 6, ease: "easeInOut" }, className: "absolute top-20 right-10 bg-white/10 backdrop-blur-md p-4 rounded-2xl border border-white/10", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "bg-green-500/20 p-2 rounded-lg", children: _jsx(Battery, { className: "text-green-400 w-5 h-5" }) }), _jsxs("div", { children: [_jsx("p", { className: "text-xs text-slate-400", children: "Battery Life" }), _jsx("p", { className: "text-sm font-bold text-white", children: "24 Hours" })] })] }) }), _jsx(MotionDiv, { animate: { y: [0, 20, 0] }, transition: { repeat: Infinity, duration: 5, ease: "easeInOut", delay: 1 }, className: "absolute bottom-40 left-0 bg-white/10 backdrop-blur-md p-4 rounded-2xl border border-white/10", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "bg-blue-500/20 p-2 rounded-lg", children: _jsx(Wifi, { className: "text-blue-400 w-5 h-5" }) }), _jsxs("div", { children: [_jsx("p", { className: "text-xs text-slate-400", children: "Connectivity" }), _jsx("p", { className: "text-sm font-bold text-white", children: "5G Ultra" })] })] }) })] }) })] }) })] })), layout?.sections?.brands?.show !== false && (_jsx("div", { "data-section": "brands", "data-payaza-section-key": "brands", "data-payaza-page": "home", className: "bg-slate-950 border-y border-slate-900 overflow-hidden py-10", style: getPayazaSectionInlineStyle(storeConfig, 'home', 'brands'), children: _jsx("div", { className: "flex gap-16 items-center animate-scroll whitespace-nowrap opacity-50 hover:opacity-100 transition-opacity duration-300", children: [...Array(2)].map((_, i) => (_jsx("div", { className: "flex gap-16 items-center", children: ['SONY', 'SAMSUNG', 'APPLE', 'DELL', 'LG', 'ASUS', 'HP', 'BOSE', 'CANON', 'NIKON'].map((brand) => (_jsx("span", { className: "text-3xl font-black text-slate-800 tracking-tight hover:text-slate-600 transition-colors cursor-default select-none", children: brand }, brand))) }, i))) }) })), layout?.sections?.categories?.show !== false && (_jsx("section", { "data-section": "categories", "data-payaza-section-key": "categories", "data-payaza-page": "home", className: "py-16 md:py-32 bg-slate-50", style: getPayazaSectionInlineStyle(storeConfig, 'home', 'categories'), children: _jsxs("div", { className: "container mx-auto px-6", children: [_jsxs("div", { className: "flex justify-between items-end mb-10 md:mb-16", children: [_jsxs("div", { children: [_jsx("h2", { className: "text-4xl font-bold mb-4 text-slate-900 tracking-tight", children: layout?.sections?.categories?.title || (isPreview ? 'Ecosystems' : '') }), _jsx("p", { className: "text-lg text-slate-500", children: layout?.sections?.categories?.subtitle || (isPreview ? 'Curated collections for every aspect of your digital life.' : '') })] }), layout?.sections?.categories?.showViewAll !== false && (_jsxs(Link, { href: `/${storeConfig.slug}/categories`, className: "flex items-center gap-2 text-blue-600 font-bold hover:gap-3 transition-all", children: ["View All ", _jsx(ArrowRight, { className: "h-5 w-5" })] }))] }), categories.length === 0 ? (_jsxs("div", { className: "text-center py-20 bg-white rounded-2xl border border-slate-200", children: [_jsx("h3", { className: "text-xl font-semibold text-slate-900 mb-2", children: "No categories available" }), _jsx("p", { className: "text-slate-500", children: "Categories will appear here once they are added to the store." })] })) : (_jsx(CategoryMasonryGrid, { categories: categories, mode: "compact", columns: 4, limit: layout?.sections?.categories?.limit || 5, showDescriptions: false, getHref: (category) => `/${storeConfig.slug}/categories/${category.slug}`, exploreLabel: "View Products", variant: "electronics", renderCardOverlay: (category) => (_jsx("div", { className: "mb-3 text-white/80 group-hover:text-blue-400 transition-colors", children: getCategoryIcon(category.slug) })) }))] }) })), layout?.sections?.featuredProducts?.show !== false && (_jsx("section", { "data-section": "featuredProducts", "data-payaza-section-key": "featuredProducts", "data-payaza-page": "home", className: "py-16 md:py-32 bg-white relative overflow-hidden", style: getPayazaSectionInlineStyle(storeConfig, 'home', 'featuredProducts'), children: _jsxs("div", { className: "container mx-auto px-6 relative z-10", children: [_jsxs("div", { className: "flex flex-col md:flex-row justify-between items-end mb-8 md:mb-12 gap-6", children: [_jsxs("div", { className: "max-w-2xl", children: [_jsx("span", { className: "text-blue-600 font-bold tracking-widest text-xs uppercase mb-3 block", children: "Latest Drops" }), _jsx("h2", { className: "text-4xl md:text-5xl font-bold text-slate-900 tracking-tight", children: layout?.sections?.featuredProducts?.title || "Performance Redefined" })] }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { variant: "outline", size: "icon", onClick: scrollLeft, className: "rounded-full border-slate-200 hover:bg-slate-100 hover:text-slate-900", children: _jsx(ArrowRight, { className: "h-5 w-5 rotate-180" }) }), _jsx(Button, { variant: "outline", size: "icon", onClick: scrollRight, className: "rounded-full border-slate-200 hover:bg-slate-100 hover:text-slate-900", children: _jsx(ArrowRight, { className: "h-5 w-5" }) })] })] }), _jsx("div", { ref: scrollContainerRef, className: "flex overflow-x-auto snap-x snap-mandatory gap-8 pb-12 -mx-6 px-6 scrollbar-hide", children: products.map((product) => (_jsxs("div", { className: "min-w-[280px] md:min-w-[320px] snap-center group", children: [_jsxs("div", { className: "relative aspect-[4/5] bg-slate-50 rounded-[2.5rem] overflow-hidden mb-6 border border-slate-100", children: [_jsx("div", { className: "absolute top-4 left-4 z-20", children: product.compareAtPrice && (_jsx("span", { className: "bg-slate-900 text-white text-[10px] font-bold px-3 py-1.5 rounded-full", children: "SALE" })) }), layout?.sections?.featuredProducts?.showAddToCart !== false && (_jsx("div", { className: "absolute top-4 right-4 z-20 opacity-0 group-hover:opacity-100 transition-opacity", children: _jsx(Button, { size: "icon", onClick: (e) => handleAddToCart(e, product), className: "rounded-full bg-white text-slate-900 hover:bg-blue-600 hover:text-white shadow-lg", children: _jsx(ShoppingCart, { className: "h-4 w-4" }) }) })), _jsx("div", { className: "absolute inset-0 flex items-center justify-center p-8 bg-gradient-to-br from-white to-slate-50", children: _jsx(ImageWithFallback, { src: product.images?.[0], alt: product.name, className: "w-full h-full object-contain group-hover:scale-110 transition-transform duration-500", skeletonAspectRatio: "square" }) })] }), _jsxs("div", { className: "space-y-1 px-2", children: [_jsx("h3", { className: "font-bold text-lg text-slate-900 truncate group-hover:text-blue-600 transition-colors", children: product.name }), _jsxs("div", { className: "flex items-baseline gap-2", children: [_jsx("span", { className: "text-slate-900 font-bold", children: formatCurrency(product.price, product.currency || 'USD') }), product.compareAtPrice && _jsx("span", { className: "text-slate-400 text-sm line-through", children: formatCurrency(product.compareAtPrice, product.currency || 'USD') })] })] }), _jsx(Link, { href: `/${storeConfig.slug}/products/${product.slug}`, className: "absolute inset-0 z-10", onClick: () => trackStorefrontEvent('Product_clicked', {
-                                            storeId: storeConfig.id,
-                                            storeSlug: storeConfig.slug,
-                                            productId: product.id,
-                                            productName: product.name,
-                                            categoryId: product.categoryId,
-                                            price: product.price,
-                                        }) })] }, product.id))) })] }) })), layout?.features?.show !== false && (_jsxs("section", { "data-section": "features", "data-payaza-section-key": "features", "data-payaza-page": "home", className: "py-16 md:py-32 bg-slate-950 text-white relative overflow-hidden", style: getPayazaSectionInlineStyle(storeConfig, 'home', 'features'), children: [_jsx("div", { className: "absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.03)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.03)_1px,transparent_1px)] bg-[size:64px_64px] [mask-image:radial-gradient(ellipse_60%_60%_at_50%_50%,#000_70%,transparent_100%)]" }), _jsx("div", { className: "container mx-auto px-6 relative z-10", children: _jsx("div", { className: "grid md:grid-cols-3 gap-8 md:gap-12", children: (layout?.sections?.features?.items?.length
-                                ? layout.sections.features.items
-                                : (isPreview ? [
-                                    { icon: 'Cpu', title: "Neural Processing", description: "Advanced AI capabilities built into every device for smarter performance." },
-                                    { icon: 'Shield', title: "Military Grade", description: "Tested against rigorous standards to ensure durability in any environment." },
-                                    { icon: 'Zap', title: "Hyper Charge", description: "Next-generation battery technology for all-day power in minutes." }
-                                ] : [])).map((feature, i) => (_jsxs("div", { className: "bg-slate-900/50 backdrop-blur-sm border border-slate-800 p-8 rounded-[2rem] hover:bg-slate-800/50 transition-colors", children: [_jsx("div", { className: "w-14 h-14 rounded-2xl bg-blue-600/20 flex items-center justify-center mb-6 text-blue-400", children: layout?.features?.showIcons !== false && (_jsx(DynamicIcon, { name: feature.icon || 'Cpu', className: "h-7 w-7" })) }), _jsx("h3", { className: "text-xl font-bold mb-3", children: feature.title }), _jsx("p", { className: "text-slate-400 leading-relaxed", children: feature.description || feature.desc })] }, i))) }) })] })), _jsx(PromoBanner, { config: layout?.sections?.promoBanner, storeSlug: storeConfig.slug, layoutStyle: "electronics" }), _jsx(ElectronicsStoreFooter, { storeConfig: storeConfig })] }));
+    return (_jsxs("div", { className: "min-h-screen bg-slate-50 text-slate-900 font-sans selection:bg-blue-600 selection:text-white", children: [_jsx(ElectronicsStoreHeader, { storeConfig: storeConfig }), layout?.hero?.show !== false && (_jsxs("section", { "data-section": "hero", ref: targetRef, className: "relative min-h-screen flex items-center pt-20 overflow-hidden bg-slate-950", children: [_jsxs("div", { className: "absolute inset-0 overflow-hidden pointer-events-none", children: [_jsx("div", { className: "absolute top-[-10%] right-[-5%] w-[600px] h-[600px] bg-blue-600/20 rounded-full blur-[120px]" }), _jsx("div", { className: "absolute bottom-[-10%] left-[-5%] w-[500px] h-[500px] bg-indigo-600/20 rounded-full blur-[100px]" }), _jsx("div", { className: "absolute top-[20%] left-[20%] w-[300px] h-[300px] bg-cyan-500/10 rounded-full blur-[80px]" })] }), _jsx("div", { className: "container mx-auto px-6 relative z-10 py-20", children: _jsxs("div", { className: "grid lg:grid-cols-2 gap-16 items-center", children: [_jsxs(MotionDiv, { style: { opacity, scale }, className: "space-y-8 relative z-20", children: [layout?.hero?.showBadges !== false && (_jsxs("div", { className: "inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-slate-900/50 border border-slate-800 text-blue-400 text-xs font-bold uppercase tracking-wider backdrop-blur-md", children: [_jsx("span", { className: "w-2 h-2 rounded-full bg-blue-500 animate-pulse" }), layout?.sections?.hero?.badge || getLayoutText(storeConfig, 'electronics.newArrivals', 'Next Gen • 2025 Series')] })), _jsxs("h1", { className: "text-4xl sm:text-6xl md:text-7xl lg:text-8xl font-black tracking-tighter leading-[0.9] text-white", children: [layout?.sections?.hero?.title || getLayoutText(storeConfig, 'hero.title', 'Future Realized'), " ", _jsx("br", {}), _jsx("span", { className: "text-transparent bg-clip-text bg-gradient-to-r from-blue-400 via-indigo-400 to-cyan-400", children: "Realized." })] }), _jsx("div", { className: "lg:hidden w-full max-w-[300px] mx-auto py-8", children: _jsx("div", { className: "relative aspect-square bg-gradient-to-br from-slate-800/50 to-slate-900/50 rounded-3xl p-6 border border-slate-700/30", children: _jsx(ImageWithFallback, { src: products[0]?.images?.[0], alt: "Hero Product", className: "w-full h-full object-contain drop-shadow-2xl", skeletonAspectRatio: "square" }) }) }), _jsx("p", { className: "text-lg text-slate-400 max-w-xl leading-relaxed font-medium", children: layout?.sections?.hero?.subtitle || `${storeConfig.description} Experience the pinnacle of engineering with our curated collection of premium electronics.` }), _jsxs("div", { className: "flex flex-wrap items-center gap-4 pt-4", children: [layout?.hero?.showCTA !== false && (_jsx(Link, { href: `/${storeConfig.slug}/products`, children: _jsxs(Button, { className: "h-14 px-10 rounded-full bg-blue-600 hover:bg-blue-500 text-white font-bold text-lg transition-all hover:scale-105 shadow-[0_0_40px_-10px_rgba(59,130,246,0.5)] border-0 ring-0", children: [layout?.sections?.hero?.primaryCTA || getLayoutText(storeConfig, 'common.shopNow', 'Shop Now'), " ", _jsx(ArrowRight, { className: "ml-2 h-5 w-5" })] }) })), layout?.sections?.featuredProducts?.show !== false && (_jsxs("div", { className: "flex items-center gap-4 text-slate-400 text-sm font-medium ml-4", children: [_jsx("div", { className: "flex -space-x-3", children: [1, 2, 3].map(i => (_jsx("div", { className: "w-10 h-10 rounded-full border-2 border-slate-950 bg-slate-800 flex items-center justify-center text-xs text-white", children: _jsx("span", { className: "sr-only", children: "User" }) }, i))) }), _jsxs("div", { children: [_jsx("p", { className: "text-white font-bold", children: getLayoutText(storeConfig, 'common.account', '10k+ Happy') }), _jsx("p", { children: getLayoutText(storeConfig, 'common.account', 'Customers') })] })] }))] })] }), _jsx("div", { className: "relative h-[600px] hidden lg:block perspective-1000", children: _jsxs(MotionDiv, { initial: { opacity: 0, x: 100, rotateY: -20 }, animate: { opacity: 1, x: 0, rotateY: 0 }, transition: { duration: 1, ease: "easeOut" }, className: "relative z-10 w-full h-full", children: [_jsxs("div", { className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[400px] h-[500px] bg-gradient-to-br from-slate-800/80 to-slate-900/80 backdrop-blur-xl rounded-[3rem] border border-slate-700/50 p-8 shadow-2xl shadow-blue-900/20 transform rotate-[-6deg] hover:rotate-0 transition-transform duration-700", children: [_jsx("div", { className: "absolute top-8 right-8", children: _jsx(Zap, { className: "text-blue-500 w-8 h-8" }) }), _jsx(ImageWithFallback, { src: products[0]?.images?.[0], alt: "Hero Product", className: "w-full h-3/4 object-contain drop-shadow-[0_20px_50px_rgba(0,0,0,0.5)]", skeletonAspectRatio: "square" }), _jsx("div", { className: "absolute bottom-8 left-8 right-8", children: _jsxs("div", { className: "flex justify-between items-end", children: [_jsxs("div", { children: [_jsx("p", { className: "text-blue-400 font-bold text-sm mb-1", children: "New Arrival" }), _jsx("h3", { className: "text-white text-2xl font-bold", children: products[0]?.name })] }), _jsx("div", { className: "text-right", children: _jsx("p", { className: "text-white text-2xl font-bold", children: formatCurrency(products[0]?.price || 0, products[0]?.currency || storeConfig?.settings?.currency || 'USD') }) })] }) })] }), _jsx(MotionDiv, { animate: { y: [0, -20, 0] }, transition: { repeat: Infinity, duration: 6, ease: "easeInOut" }, className: "absolute top-20 right-10 bg-white/10 backdrop-blur-md p-4 rounded-2xl border border-white/10", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "bg-green-500/20 p-2 rounded-lg", children: _jsx(Battery, { className: "text-green-400 w-5 h-5" }) }), _jsxs("div", { children: [_jsx("p", { className: "text-xs text-slate-400", children: "Battery Life" }), _jsx("p", { className: "text-sm font-bold text-white", children: "24 Hours" })] })] }) }), _jsx(MotionDiv, { animate: { y: [0, 20, 0] }, transition: { repeat: Infinity, duration: 5, ease: "easeInOut", delay: 1 }, className: "absolute bottom-40 left-0 bg-white/10 backdrop-blur-md p-4 rounded-2xl border border-white/10", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "bg-blue-500/20 p-2 rounded-lg", children: _jsx(Wifi, { className: "text-blue-400 w-5 h-5" }) }), _jsxs("div", { children: [_jsx("p", { className: "text-xs text-slate-400", children: "Connectivity" }), _jsx("p", { className: "text-sm font-bold text-white", children: "5G Ultra" })] })] }) })] }) })] }) })] })), layout?.sections?.brands?.show !== false && (_jsx("div", { "data-section": "brands", className: "bg-slate-950 border-y border-slate-900 overflow-hidden py-10", children: _jsx("div", { className: "flex gap-16 items-center animate-scroll whitespace-nowrap opacity-50 hover:opacity-100 transition-opacity duration-300", children: [...Array(2)].map((_, i) => (_jsx("div", { className: "flex gap-16 items-center", children: ['SONY', 'SAMSUNG', 'APPLE', 'DELL', 'LG', 'ASUS', 'HP', 'BOSE', 'CANON', 'NIKON'].map((brand) => (_jsx("span", { className: "text-3xl font-black text-slate-800 tracking-tight hover:text-slate-600 transition-colors cursor-default select-none", children: brand }, brand))) }, i))) }) })), layout?.sections?.categories?.show !== false && (_jsx("section", { "data-section": "categories", className: "py-16 md:py-32 bg-slate-50", children: _jsxs("div", { className: "container mx-auto px-6", children: [_jsxs("div", { className: "flex justify-between items-end mb-10 md:mb-16", children: [_jsxs("div", { children: [_jsx("h2", { className: "text-4xl font-bold mb-4 text-slate-900 tracking-tight", children: "Ecosystems" }), _jsx("p", { className: "text-lg text-slate-500", children: "Curated collections for every aspect of your digital life." })] }), layout?.sections?.categories?.showViewAll !== false && (_jsxs(Link, { href: `/${storeConfig.slug}/categories`, className: "flex items-center gap-2 text-blue-600 font-bold hover:gap-3 transition-all", children: ["View All ", _jsx(ArrowRight, { className: "h-5 w-5" })] }))] }), categories.length === 0 ? (_jsxs("div", { className: "text-center py-20 bg-white rounded-2xl border border-slate-200", children: [_jsx("h3", { className: "text-xl font-semibold text-slate-900 mb-2", children: "No categories available" }), _jsx("p", { className: "text-slate-500", children: "Categories will appear here once they are added to the store." })] })) : (_jsx("div", { className: "grid grid-cols-1 md:grid-cols-4 gap-6 auto-rows-[300px]", children: categories.slice(0, layout?.sections?.categories?.limit || 5).map((category, idx) => {
+                                const isLarge = idx === 0 || idx === 3;
+                                return (_jsxs(Link, { href: `/${storeConfig.slug}/categories/${category.slug}`, className: `group relative overflow-hidden rounded-[2.5rem] bg-white shadow-sm border border-slate-100 hover:shadow-2xl hover:shadow-blue-500/10 transition-all duration-500 ${isLarge ? 'md:col-span-2' : 'md:col-span-1'}`, children: [_jsx(ImageWithFallback, { src: category.image, alt: category.name, className: "absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-105", skeletonAspectRatio: "auto" }), _jsx("div", { className: "absolute inset-0 bg-gradient-to-t from-slate-950/80 via-slate-950/20 to-transparent opacity-80 group-hover:opacity-90 transition-opacity" }), _jsxs("div", { className: "absolute bottom-0 left-0 p-8 w-full", children: [_jsx("div", { className: "mb-3 text-white/80 group-hover:text-blue-400 transition-colors", children: getCategoryIcon(category.slug) }), _jsx("h3", { className: `font-bold text-white mb-2 ${isLarge ? 'text-3xl' : 'text-xl'}`, children: category.name }), _jsx("div", { className: "w-10 h-1 bg-blue-500 rounded-full transform scale-x-0 group-hover:scale-x-100 transition-transform origin-left duration-300" })] })] }, idx));
+                            }) }))] }) })), layout?.sections?.featuredProducts?.show !== false && (_jsx("section", { "data-section": "featuredProducts", className: "py-16 md:py-32 bg-white relative overflow-hidden", children: _jsxs("div", { className: "container mx-auto px-6 relative z-10", children: [_jsxs("div", { className: "flex flex-col md:flex-row justify-between items-end mb-8 md:mb-12 gap-6", children: [_jsxs("div", { className: "max-w-2xl", children: [_jsx("span", { className: "text-blue-600 font-bold tracking-widest text-xs uppercase mb-3 block", children: "Latest Drops" }), _jsx("h2", { className: "text-4xl md:text-5xl font-bold text-slate-900 tracking-tight", children: layout?.sections?.featuredProducts?.title || "Performance Redefined" })] }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { variant: "outline", size: "icon", onClick: scrollLeft, className: "rounded-full border-slate-200 hover:bg-slate-100 hover:text-slate-900", children: _jsx(ArrowRight, { className: "h-5 w-5 rotate-180" }) }), _jsx(Button, { variant: "outline", size: "icon", onClick: scrollRight, className: "rounded-full border-slate-200 hover:bg-slate-100 hover:text-slate-900", children: _jsx(ArrowRight, { className: "h-5 w-5" }) })] })] }), _jsx("div", { ref: scrollContainerRef, className: "flex overflow-x-auto snap-x snap-mandatory gap-8 pb-12 -mx-6 px-6 scrollbar-hide", children: products.map((product) => (_jsxs("div", { className: "min-w-[280px] md:min-w-[320px] snap-center group", children: [_jsxs("div", { className: "relative aspect-[4/5] bg-slate-50 rounded-[2.5rem] overflow-hidden mb-6 border border-slate-100", children: [_jsx("div", { className: "absolute top-4 left-4 z-20", children: product.compareAtPrice && (_jsx("span", { className: "bg-slate-900 text-white text-[10px] font-bold px-3 py-1.5 rounded-full", children: "SALE" })) }), layout?.sections?.featuredProducts?.showAddToCart !== false && (_jsx("div", { className: "absolute top-4 right-4 z-20 opacity-0 group-hover:opacity-100 transition-opacity", children: _jsx(Button, { size: "icon", onClick: (e) => handleAddToCart(e, product), className: "rounded-full bg-white text-slate-900 hover:bg-blue-600 hover:text-white shadow-lg", children: _jsx(ShoppingCart, { className: "h-4 w-4" }) }) })), _jsx("div", { className: "absolute inset-0 flex items-center justify-center p-8 bg-gradient-to-br from-white to-slate-50", children: _jsx(ImageWithFallback, { src: product.images?.[0], alt: product.name, className: "w-full h-full object-contain group-hover:scale-110 transition-transform duration-500", skeletonAspectRatio: "square" }) })] }), _jsxs("div", { className: "space-y-1 px-2", children: [_jsx("h3", { className: "font-bold text-lg text-slate-900 truncate group-hover:text-blue-600 transition-colors", children: product.name }), _jsxs("div", { className: "flex items-baseline gap-2", children: [_jsx("span", { className: "text-slate-900 font-bold", children: formatCurrency(product.price, product.currency || 'USD') }), product.compareAtPrice && _jsx("span", { className: "text-slate-400 text-sm line-through", children: formatCurrency(product.compareAtPrice, product.currency || 'USD') })] })] }), _jsx(Link, { href: `/${storeConfig.slug}/products/${product.slug}`, className: "absolute inset-0 z-10" })] }, product.id))) })] }) })), layout?.features?.show !== false && (_jsxs("section", { "data-section": "features", className: "py-16 md:py-32 bg-slate-950 text-white relative overflow-hidden", children: [_jsx("div", { className: "absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.03)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.03)_1px,transparent_1px)] bg-[size:64px_64px] [mask-image:radial-gradient(ellipse_60%_60%_at_50%_50%,#000_70%,transparent_100%)]" }), _jsx("div", { className: "container mx-auto px-6 relative z-10", children: _jsx("div", { className: "grid md:grid-cols-3 gap-8 md:gap-12", children: [
+                                { icon: Cpu, title: "Neural Processing", desc: "Advanced AI capabilities built into every device for smarter performance." },
+                                { icon: Shield, title: "Military Grade", desc: "Tested against rigorous standards to ensure durability in any environment." },
+                                { icon: Zap, title: "Hyper Charge", desc: "Next-generation battery technology for all-day power in minutes." }
+                            ].map((feature, i) => (_jsxs("div", { className: "bg-slate-900/50 backdrop-blur-sm border border-slate-800 p-8 rounded-[2rem] hover:bg-slate-800/50 transition-colors", children: [_jsx("div", { className: "w-14 h-14 rounded-2xl bg-blue-600/20 flex items-center justify-center mb-6 text-blue-400", children: layout?.features?.showIcons !== false && _jsx(feature.icon, { className: "h-7 w-7" }) }), _jsx("h3", { className: "text-xl font-bold mb-3", children: feature.title }), _jsx("p", { className: "text-slate-400 leading-relaxed", children: feature.desc })] }, i))) }) })] })), layout?.sections?.marketing?.showNewsletter !== false && (_jsx("section", { "data-section": "marketing", className: "py-16 md:py-32 bg-white", children: _jsx("div", { className: "container mx-auto px-6", children: _jsxs("div", { className: "bg-blue-600 rounded-[3rem] p-10 md:p-24 text-center relative overflow-hidden", children: [_jsx("div", { className: "absolute inset-0 bg-gradient-to-br from-blue-500 to-indigo-600" }), _jsx("div", { className: "absolute inset-0 opacity-20 bg-[url('https://grainy-gradients.vercel.app/noise.svg')]" }), _jsxs("div", { className: "relative z-10 max-w-2xl mx-auto space-y-8", children: [_jsx("h2", { className: "text-4xl md:text-5xl font-black text-white tracking-tight", children: layout?.sections?.marketing?.newsletterTitle || 'Stay Ahead of the Curve' }), _jsx("p", { className: "text-blue-100 text-lg", children: layout?.sections?.marketing?.newsletterSubtitle || 'Join our exclusive community for early access to drops and special offers.' }), _jsxs("div", { className: "flex flex-col sm:flex-row gap-4 max-w-md mx-auto", children: [_jsx("input", { type: "email", placeholder: layout?.sections?.marketing?.newsletterPlaceholder || 'Enter your email', value: email, onChange: (e) => setEmail(e.target.value), className: "flex-1 h-14 px-6 rounded-full bg-white/10 border border-white/20 text-white placeholder:text-blue-200 focus:outline-none focus:bg-white/20 focus:border-white transition-all backdrop-blur-md" }), _jsx(Button, { onClick: handleSubscribe, className: "h-14 px-8 rounded-full bg-white text-blue-600 hover:bg-blue-50 font-bold text-lg shadow-xl", children: layout?.sections?.marketing?.newsletterButton || 'Subscribe' })] })] })] }) }) })), _jsx(PromoBanner, { config: layout?.sections?.promoBanner, layoutStyle: "electronics" }), _jsx(ElectronicsStoreFooter, { storeConfig: storeConfig })] }));
 }