storefront-layouts-staging 1.0.0-staging.0

package/dist/layouts/electronics-grid/components/ElectronicsHomePageGrid.js

@@ -0,0 +1,111 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button } from '../../../components/ui/button.js';
+import { Sheet } from '../../../components/ui/sheet.js';
+import { CheckoutButton } from '../../../components/ui/checkout-button.js';
+import { CategoryTree } from '../../../components/ui/category-tree.js';
+import { useStore } from '../../../lib/store-context.js';
+import { ImageWithFallback } from '../../../components/ui/image-with-fallback.js';
+import { useToast } from '../../../components/ui/toast.js';
+import { ShoppingCart, Star, Heart, Menu, Search, User, Smartphone, ChevronRight, ChevronDown, CheckCircle2, Package, Tag, Filter, X } from 'lucide-react';
+import Link from 'next/link';
+import Image from 'next/image';
+import { useState } from 'react';
+import { usePathname } from 'next/navigation';
+import { richFieldPlainTextForDisplay } from '../../../lib/rich-html.js';
+import { useAuth } from '../../../lib/auth-context.js';
+import { formatCurrency, cn, filterActiveProducts, formatStoreDisplayName } from '../../../lib/utils/index.js';
+import { getLayoutText, getBannerImage, getLogoUrl } from '../../../lib/utils/asset-helpers.js';
+import { StoreLogo } from '../../../components/ui/store-logos.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 { ElectronicsGridProductCard } from './ElectronicsGridProductCard.js';
+const ElectronicsFilterContent = ({ categories, storeSlug }) => (_jsxs("div", { className: "space-y-6", children: [_jsxs("div", { className: "bg-white border-b border-gray-100 overflow-hidden", children: [_jsxs("div", { className: "bg-white px-4 py-3 border-b border-gray-100 font-normal text-sm text-gray-900 flex justify-between items-center", children: ["Browse by ", _jsx(ChevronDown, { className: "h-4 w-4 text-gray-400" })] }), _jsx("div", { className: "py-2", children: _jsx(CategoryTree, { categories: categories, mode: "link", storeSlug: storeSlug, linkBasePath: "" }) })] }), _jsxs("div", { className: "bg-white p-6 space-y-8", children: [_jsxs("div", { children: [_jsx("h3", { className: "font-medium text-sm text-gray-900 mb-4", children: "Availability" }), _jsxs("label", { className: "flex items-center gap-2 text-sm text-gray-600 cursor-pointer hover:text-gray-900 p-2 -ml-2 transition-colors", children: [_jsx("input", { type: "checkbox", className: "rounded border-gray-300 text-gray-900 focus:ring-gray-400", defaultChecked: true }), "In Stock"] }), _jsxs("label", { className: "flex items-center gap-2 text-sm text-gray-600 cursor-pointer hover:text-gray-900 p-2 -ml-2 transition-colors mt-2", children: [_jsx("input", { type: "checkbox", className: "rounded border-gray-300 text-gray-900 focus:ring-gray-400" }), "On Sale"] })] }), _jsxs("div", { className: "border-t border-gray-100 pt-6", children: [_jsx("h3", { className: "font-medium text-sm text-gray-900 mb-4", children: "Price" }), _jsxs("div", { className: "flex items-center gap-2 mb-3", children: [_jsxs("div", { className: "relative flex-1", children: [_jsx("span", { className: "absolute left-2 top-1.5 text-gray-400 text-xs", children: "$" }), _jsx("input", { type: "number", className: "w-full pl-5 pr-2 py-1.5 text-sm border border-gray-300 rounded focus:ring-1 focus:ring-gray-400 focus:border-gray-400", placeholder: "Min" })] }), _jsx("span", { className: "text-gray-400", children: "-" }), _jsxs("div", { className: "relative flex-1", children: [_jsx("span", { className: "absolute left-2 top-1.5 text-gray-400 text-xs", children: "$" }), _jsx("input", { type: "number", className: "w-full pl-5 pr-2 py-1.5 text-sm border border-gray-300 rounded focus:ring-1 focus:ring-gray-400 focus:border-gray-400", placeholder: "Max" })] })] }), _jsx(Button, { size: "sm", variant: "outline", className: "w-full text-xs font-normal border-gray-300 text-gray-700 hover:bg-gray-50", children: "Apply Price" })] }), _jsxs("div", { className: "border-t border-gray-100 pt-6", children: [_jsx("h3", { className: "font-medium text-sm text-gray-900 mb-4", children: "Brands" }), _jsx("div", { className: "space-y-2 max-h-48 overflow-y-auto pr-1 scrollbar-thin scrollbar-thumb-gray-200", children: ['Apple'].map(brand => (_jsxs("label", { className: "flex items-center gap-2 text-sm text-gray-600 cursor-pointer hover:text-gray-900 p-2 -ml-2 transition-colors", children: [_jsx("input", { type: "checkbox", className: "rounded border-gray-300 text-gray-900 focus:ring-gray-400", defaultChecked: true }), brand] }, brand))) })] }), _jsxs("div", { className: "border-t border-gray-100 pt-6", children: [_jsx("h3", { className: "font-medium text-sm text-gray-900 mb-4", children: "Rating" }), [4, 3, 2].map(stars => (_jsxs("label", { className: "flex items-center gap-2 text-sm text-gray-600 cursor-pointer hover:text-gray-900 p-2 -ml-2 transition-colors mb-1.5", children: [_jsx("input", { type: "radio", name: "rating", className: "border-gray-300 text-gray-900 focus:ring-gray-400" }), _jsx("div", { className: "flex text-yellow-400", children: [...Array(5)].map((_, i) => (_jsx(Star, { className: `h-3 w-3 ${i < stars ? 'fill-current' : 'text-gray-200 fill-gray-200'}` }, i))) }), _jsx("span", { className: "text-xs", children: "& Up" })] }, stars)))] })] })] }));
+export function ElectronicsHomePageGrid({ storeConfig: initialConfig }) {
+    const { store, cart, addToCart, updateCartQuantity, isCartOpen, setIsCartOpen, cartTotal, cartCount, wishlist } = useStore();
+    const { isAuthenticated, openLogin } = useAuth();
+    const pathname = usePathname();
+    const storeConfig = store || initialConfig;
+    const storeDisplayName = formatStoreDisplayName(storeConfig.name);
+    const layoutConfig = storeConfig.layoutConfig;
+    // 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)
+        ? storeConfig.categories
+        : (isPreview ? [
+            { id: 'cat1', name: 'iPhone', slug: 'iphone', image: 'https://images.unsplash.com/photo-1510557880182-3d4d3cba35a5?q=80&w=800' },
+            { id: 'cat2', name: 'MacBook', slug: 'macbook', image: 'https://images.unsplash.com/photo-1517336714731-489689fd1ca8?q=80&w=800' },
+            { id: 'cat3', name: 'iPad', slug: 'ipad', image: 'https://images.unsplash.com/photo-1544244015-0df4b3ffc6b0?q=80&w=800' },
+            { id: 'cat4', name: 'Accessories', slug: 'accessories', image: 'https://images.unsplash.com/photo-1523275335684-37898b6baf30?q=80&w=800' }
+        ] : []);
+    const rawProducts = storeConfig.products || [];
+    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
+    const products = activeProducts.length > 0
+        ? activeProducts
+        : (isPreview && rawProducts.length > 0
+            ? rawProducts
+            : (isPreview ? [
+                { id: 'p1', name: 'iPhone 15 Pro', price: 999, currency: 'USD', images: ['https://images.unsplash.com/photo-1510557880182-3d4d3cba35a5?q=80&w=800'], slug: 'iphone-15-pro', rating: 4.9, reviewCount: 1240, description: 'The ultimate iPhone.', categoryId: 'cat1', inStock: true },
+                { id: 'p2', name: 'MacBook Air M2', price: 1199, currency: 'USD', images: ['https://images.unsplash.com/photo-1517336714731-489689fd1ca8?q=80&w=800'], slug: 'macbook-air-m2', rating: 4.8, reviewCount: 850, description: 'Supercharged by M2.', categoryId: 'cat2', inStock: true },
+                { id: 'p3', name: 'iPad Pro 12.9"', price: 1099, currency: 'USD', images: ['https://images.unsplash.com/photo-1544244015-0df4b3ffc6b0?q=80&w=800'], slug: 'ipad-pro', rating: 4.9, reviewCount: 620, description: 'The ultimate iPad experience.', categoryId: 'cat3', inStock: true },
+                { id: 'p4', name: 'AirPods Pro 2', price: 249, currency: 'USD', images: ['https://images.unsplash.com/photo-1588423771073-b8903fbb85b5?q=80&w=800'], slug: 'airpods-pro', rating: 4.7, reviewCount: 2100, description: 'Magic like you’ve never heard.', categoryId: 'cat4', inStock: true }
+            ] : []));
+    const wishlistCount = wishlist.length;
+    const [searchQuery, setSearchQuery] = useState('');
+    const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+    const [isSearchOpen, setIsSearchOpen] = useState(false);
+    const { addToast } = useToast();
+    // Pagination / Load More state
+    const INITIAL_DISPLAY_COUNT = 12;
+    const LOAD_MORE_INCREMENT = 12;
+    const [visibleCount, setVisibleCount] = useState(INITIAL_DISPLAY_COUNT);
+    const handleAddToCart = (product) => {
+        addToCart(product);
+        addToast(`${product.name} added to cart`, 'success');
+    };
+    const filteredProducts = searchQuery
+        ? products.filter(p => p.name.toLowerCase().includes(searchQuery.toLowerCase()) || richFieldPlainTextForDisplay(p.description).toLowerCase().includes(searchQuery.toLowerCase()))
+        : products;
+    const [isFilterOpen, setIsFilterOpen] = useState(false);
+    return (_jsxs("div", { className: "min-h-screen font-sans text-gray-900 bg-white", children: [_jsx("div", { className: "bg-white text-gray-500 text-xs font-normal py-3 px-4 md:px-8 border-b border-gray-100/50", children: _jsxs("div", { className: "container mx-auto flex justify-between items-center", children: [_jsxs("div", { className: "hidden md:flex gap-8", children: [_jsxs("span", { className: "flex items-center gap-1.5", children: [_jsx(Package, { className: "h-3.5 w-3.5 text-gray-400" }), " Free Express Shipping Nationwide"] }), _jsxs("span", { className: "flex items-center gap-1.5", children: [_jsx(CheckCircle2, { className: "h-3.5 w-3.5 text-gray-400" }), " Authentic Apple Products"] })] }), _jsxs("div", { className: "flex gap-6 ml-auto", children: [_jsx(Link, { href: `/${storeConfig.slug}/track-order`, className: "hover:text-gray-900 transition-colors", children: "Track Order" }), _jsx(Link, { href: `/${storeConfig.slug}/contact`, className: "hover:text-gray-900 transition-colors", children: "Business Direct" }), _jsx(Link, { href: `/${storeConfig.slug}/help-center`, className: "hover:text-gray-900 transition-colors", children: "Support" })] })] }) }), _jsxs("header", { className: "sticky top-0 z-50 bg-white/95 backdrop-blur-md border-b border-gray-100", children: [_jsxs("div", { "data-section": "header", "data-payaza-section-key": "header", "data-payaza-page": "home", className: "container mx-auto px-4 md:px-6 h-16 flex items-center gap-8", style: getPayazaSectionInlineStyle(storeConfig, 'home', 'header'), children: [_jsx(Link, { href: `/${storeConfig.slug}`, className: "flex flex-col leading-none shrink-0 group", children: getLogoUrl(storeConfig) ? (_jsx(StoreLogo, { storeConfig: storeConfig, className: "h-10 w-10 transition-all duration-300 hover:opacity-90", alt: storeDisplayName })) : (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-xl font-medium tracking-tight text-gray-900 group-hover:text-gray-600 transition-colors", children: storeDisplayName }), _jsx("span", { className: "text-[9px] font-normal tracking-wide text-gray-400 mt-0.5", children: layoutConfig?.sections?.header?.subtitle || 'Premium Apple Products' })] })) }), _jsx("div", { className: "hidden md:flex flex-1 max-w-3xl relative", children: _jsxs("div", { className: "relative w-full flex", children: [_jsx("div", { className: "relative flex-1", children: _jsx("input", { type: "text", placeholder: "Search by keyword, model number, or SKU...", value: searchQuery, onChange: (e) => {
+                                                    setSearchQuery(e.target.value);
+                                                    setVisibleCount(INITIAL_DISPLAY_COUNT);
+                                                }, className: "w-full h-10 pl-4 pr-12 rounded-l-lg border border-gray-200 bg-white text-sm focus:outline-none focus:ring-1 focus:ring-gray-400 focus:border-gray-400 transition-all" }) }), _jsxs("button", { className: "h-10 px-6 bg-gray-900 hover:bg-gray-800 text-white font-normal text-sm rounded-r-lg border border-gray-900 border-l-0 transition-colors flex items-center gap-2", children: [_jsx(Search, { className: "h-4 w-4" }), " Search"] })] }) }), _jsxs("div", { className: "flex items-center gap-2 ml-auto", children: [_jsx(Button, { variant: "ghost", size: "icon", className: "md:hidden h-10 w-10 text-slate-600", onClick: () => setIsSearchOpen(!isSearchOpen), children: isSearchOpen ? _jsx(X, { className: "h-6 w-6" }) : _jsx(Search, { className: "h-6 w-6" }) }), isAuthenticated ? (_jsx(Link, { href: `/${storeConfig.slug}/account`, children: _jsxs(Button, { variant: "ghost", className: "hidden sm:flex flex-col items-center justify-center h-auto py-1 px-2 text-gray-500 hover:text-gray-900 hover:bg-transparent gap-0.5 transition-colors", children: [_jsx(User, { className: "h-5 w-5" }), _jsx("span", { className: "text-[10px] font-normal", children: "Account" })] }) })) : (_jsxs(Button, { variant: "ghost", className: "hidden sm:flex flex-col items-center justify-center h-auto py-1 px-2 text-gray-500 hover:text-gray-900 hover:bg-transparent gap-0.5 transition-colors", onClick: () => openLogin({
+                                            callbackUrl: pathname || `/${storeConfig.slug}/account`,
+                                        }), children: [_jsx(User, { className: "h-5 w-5" }), _jsx("span", { className: "text-[10px] font-normal", children: "Account" })] })), storeConfig.features.wishlist && (_jsx(Link, { href: `/${storeConfig.slug}/wishlist`, children: _jsxs(Button, { variant: "ghost", className: "hidden sm:flex flex-col items-center justify-center h-auto py-1 px-2 text-gray-500 hover:text-gray-900 hover:bg-transparent gap-0.5 relative", children: [_jsxs("div", { className: "relative", children: [_jsx(Heart, { className: cn("h-5 w-5 transition-all", wishlistCount > 0 && "fill-current text-red-500") }), wishlistCount > 0 && (_jsx("span", { className: "absolute -top-1 -right-1 h-3.5 w-3.5 text-[9px] font-bold text-white rounded-full flex items-center justify-center shadow-sm ring-1 ring-white", style: { backgroundColor: storeConfig.branding.primaryColor || '#ef4444' }, children: wishlistCount > 9 ? '9+' : wishlistCount }))] }), _jsx("span", { className: "text-[10px] font-normal", children: "Saved" })] }) })), _jsx("div", { className: "h-6 w-px bg-gray-200 mx-1 hidden sm:block" }), _jsxs(Button, { className: "relative bg-white hover:bg-gray-50 text-gray-900 border border-gray-200 font-normal h-10 px-4 rounded-lg flex items-center gap-2 transition-colors", onClick: () => setIsCartOpen(true), children: [_jsx(ShoppingCart, { className: "h-4 w-4 text-gray-600" }), _jsx("span", { className: "text-sm", children: cartCount })] }), _jsx(Button, { variant: "ghost", size: "icon", className: "md:hidden h-10 w-10", onClick: () => setIsMobileMenuOpen(true), children: _jsx(Menu, { className: "h-6 w-6" }) })] })] }), isSearchOpen && (_jsx("div", { className: "md:hidden p-4 bg-white border-b border-gray-200 animate-in slide-in-from-top-2 absolute w-full top-20 z-40 shadow-lg", children: _jsxs("div", { className: "relative", children: [_jsx("input", { type: "text", placeholder: "Search by keyword...", value: searchQuery, onChange: (e) => {
+                                        setSearchQuery(e.target.value);
+                                        setVisibleCount(INITIAL_DISPLAY_COUNT);
+                                    }, className: "w-full h-12 pl-12 pr-4 rounded-xl bg-gray-100 border-none focus:ring-2 focus:ring-blue-500 text-base", autoFocus: true }), _jsx(Search, { className: "absolute left-4 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-400" })] }) })), _jsx("div", { className: "hidden md:block bg-white border-b border-gray-100/50", children: _jsxs("div", { className: "container mx-auto px-6 h-12 flex items-center gap-8 text-sm font-normal text-gray-600", children: [categories.slice(0, 8).map(cat => (_jsx(Link, { href: `/${storeConfig.slug}/categories/${cat.slug}`, className: "hover:text-gray-900 transition-colors py-1", children: cat.name }, cat.id))), _jsxs(Link, { href: `/${storeConfig.slug}/products?sale=true`, className: "ml-auto flex items-center gap-1.5 text-gray-500 hover:text-gray-900 transition-colors", children: [_jsx(Tag, { className: "h-3.5 w-3.5" }), " Special Offers"] })] }) })] }), _jsxs("main", { className: "container mx-auto px-4 md:px-6 py-6", children: [_jsxs("div", { className: "flex items-center gap-2 text-xs text-gray-500 mb-6", children: [_jsx(Link, { href: `/${storeConfig.slug}`, className: "hover:text-black transition-colors", children: "Home" }), _jsx(ChevronRight, { className: "h-3 w-3" }), _jsx("span", { className: "font-semibold text-gray-900", children: "Apple Products" })] }), _jsxs("div", { className: "flex flex-col lg:flex-row gap-6", children: [_jsx("aside", { className: "hidden lg:block w-64 flex-shrink-0 space-y-6 sticky top-32 self-start h-fit z-30", children: _jsx(ElectronicsFilterContent, { categories: categories, storeSlug: storeConfig.slug }) }), _jsxs("div", { className: "flex-1", children: [(() => {
+                                        const bannerImage = getBannerImage(storeConfig, 'sale_banner', 'https://images.unsplash.com/photo-1526738549149-8e07eca6c147?w=1200&h=400&fit=crop&q=80');
+                                        // Get banner text from backend - check multiple sources
+                                        // Priority: 1. sections.marketing.promoBanner, 2. text.sections.marketing.promoBanner, 3. generic layout text, 4. layout requirements defaults
+                                        const promoBanner = storeConfig.layoutConfig?.sections?.marketing?.promoBanner;
+                                        const promoBannerText = storeConfig.layoutConfig?.text?.sections?.marketing?.promoBanner;
+                                        // Fallback values match layout config defaults
+                                        const defaultTitle = 'New Arrivals';
+                                        const defaultSubtitle = 'Discover the latest products. Authentic. Authorized. Exclusive.';
+                                        const defaultButtonText = 'Shop Now';
+                                        const bannerTitle = promoBanner?.title ||
+                                            promoBannerText?.title ||
+                                            getLayoutText(storeConfig, 'electronics.newArrivals', defaultTitle) ||
+                                            getLayoutText(storeConfig, 'sections.marketing.promoBanner.title', defaultTitle) ||
+                                            defaultTitle;
+                                        const bannerSubtitle = promoBanner?.subtitle ||
+                                            promoBannerText?.subtitle ||
+                                            getLayoutText(storeConfig, 'sections.featuredProducts.subtitle', defaultSubtitle) ||
+                                            getLayoutText(storeConfig, 'sections.marketing.promoBanner.subtitle', defaultSubtitle) ||
+                                            defaultSubtitle;
+                                        const bannerButtonText = promoBanner?.buttonText ||
+                                            promoBannerText?.button ||
+                                            getLayoutText(storeConfig, 'common.shopNow', defaultButtonText) ||
+                                            getLayoutText(storeConfig, 'sections.marketing.promoBanner.button', defaultButtonText) ||
+                                            defaultButtonText;
+                                        const bannerButtonLink = resolveStoreLink(promoBanner?.buttonLink || 'products', storeConfig.slug);
+                                        return (_jsxs("div", { "data-section": "marketing", "data-payaza-section-key": "marketing", "data-payaza-page": "home", className: "mb-8 rounded-lg bg-white text-gray-900 py-12 px-6 flex items-center justify-between relative overflow-hidden min-h-[200px]", style: getPayazaSectionInlineStyle(storeConfig, 'home', 'marketing'), children: [_jsxs("div", { className: "absolute inset-0 z-0", children: [_jsx(Image, { src: bannerImage, alt: bannerTitle, fill: true, className: "object-cover", unoptimized: true }), _jsx("div", { className: "absolute inset-0 bg-gradient-to-r from-black/70 via-black/50 to-black/40" })] }), _jsxs("div", { className: "relative z-10 max-w-2xl", children: [_jsx("h2", { className: "text-4xl font-light mb-4 text-white tracking-tight", children: bannerTitle }), _jsx("p", { className: "text-gray-200 text-lg mb-8 leading-relaxed font-light", children: bannerSubtitle }), _jsx(Link, { href: bannerButtonLink, children: _jsx(Button, { size: "sm", className: "bg-white hover:bg-gray-100 text-gray-900 font-normal border-none transition-colors px-6 py-2.5 text-sm shadow-lg", children: bannerButtonText }) })] })] }));
+                                    })(), _jsxs("div", { className: "bg-white py-4 mb-6 flex flex-wrap items-center gap-4 justify-between border-b border-gray-100", children: [_jsxs("div", { className: "flex items-center gap-6", children: [_jsxs("span", { className: "text-sm font-normal text-gray-600", children: [filteredProducts.length, " Items"] }), _jsx("div", { className: "h-4 w-px bg-gray-200" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-sm text-gray-500 font-normal", children: "Sort:" }), _jsxs("select", { className: "text-sm border-none bg-transparent font-normal text-gray-900 focus:ring-0 cursor-pointer p-0 pr-6 appearance-none", children: [_jsx("option", { children: "Best Match" }), _jsx("option", { children: "Price Low-High" }), _jsx("option", { children: "Price High-Low" }), _jsx("option", { children: "Highest Rated" })] })] })] }), _jsx("div", { className: "flex items-center gap-2", children: _jsxs(Button, { variant: "ghost", size: "sm", className: "lg:hidden flex items-center gap-2 text-gray-600 hover:text-gray-900", onClick: () => setIsFilterOpen(true), children: [_jsx(Filter, { className: "h-4 w-4" }), " Filters"] }) })] }), _jsx(Sheet, { isOpen: isFilterOpen, onClose: () => setIsFilterOpen(false), title: "Filters", side: "left", children: _jsx(ElectronicsFilterContent, { categories: categories, storeSlug: storeConfig.slug }) }), _jsx("div", { "data-section": "products", "data-payaza-section-key": "products", "data-payaza-page": "home", className: "grid gap-4 sm:gap-6 lg:gap-8 grid-cols-2 sm:grid-cols-2 lg:grid-cols-3", style: getPayazaSectionInlineStyle(storeConfig, 'home', 'products'), children: filteredProducts.slice(0, visibleCount).map((product, index) => (
+                                        // Grid View Card - High Density Info
+                                        _jsx(ElectronicsGridProductCard, { product: product, storeSlug: storeConfig.slug, onAddToCart: handleAddToCart, index: index }, product.id))) }), visibleCount < filteredProducts.length && (_jsx("div", { className: "mt-16 flex justify-center border-t border-gray-100 pt-12", children: _jsx(Button, { variant: "outline", onClick: () => setVisibleCount(prev => prev + LOAD_MORE_INCREMENT), className: "min-w-[200px] border-gray-300 text-gray-700 hover:bg-gray-50 hover:text-gray-900 font-normal transition-colors", children: "Load More Products" }) }))] })] })] }), _jsx("footer", { className: "bg-white border-t border-gray-100 pt-16 pb-12 mt-20", children: _jsxs("div", { className: "container mx-auto px-6", children: [_jsxs("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-8 mb-12", children: [_jsxs("div", { className: "lg:col-span-1", children: [_jsx("div", { className: "mb-6", children: _jsx("span", { className: "text-lg font-medium text-gray-900", children: storeConfig.name }) }), _jsx("p", { className: "text-sm text-gray-500 leading-relaxed mb-6 font-light", children: storeConfig.description || "Nigeria's premier destination for authentic Apple products. Authorized reseller with genuine warranty and exceptional service." }), _jsxs("div", { className: "flex gap-2", children: [_jsx("div", { className: "w-8 h-8 bg-gray-100 rounded flex items-center justify-center text-gray-400", children: _jsx(Smartphone, { className: "h-4 w-4" }) }), _jsx("div", { className: "w-8 h-8 bg-gray-100 rounded flex items-center justify-center text-gray-400", children: _jsx(Tag, { className: "h-4 w-4" }) })] })] }), _jsxs("div", { children: [_jsx("h4", { className: "font-medium text-gray-900 text-sm mb-4", children: "Shop" }), _jsxs("ul", { className: "space-y-3 text-sm text-gray-500", children: [_jsx("li", { children: _jsx(Link, { href: `/${storeConfig.slug}/products`, className: "hover:text-gray-900 transition-colors", children: "All Products" }) }), _jsx("li", { children: _jsx(Link, { href: `/${storeConfig.slug}/categories`, className: "hover:text-gray-900 transition-colors", children: "Categories" }) })] })] }), _jsxs("div", { children: [_jsx("h4", { className: "font-medium text-gray-900 text-sm mb-4", children: "Support" }), _jsxs("ul", { className: "space-y-3 text-sm text-gray-500", children: [_jsx("li", { children: _jsx(Link, { href: `/${storeConfig.slug}/help-center`, className: "hover:text-gray-900 transition-colors", children: "Help Center" }) }), _jsx("li", { children: _jsx(Link, { href: `/${storeConfig.slug}/track-order`, className: "hover:text-gray-900 transition-colors", children: "Track Order" }) })] })] }), _jsxs("div", { children: [_jsx("h4", { className: "font-medium text-gray-900 text-sm mb-4", children: "Account" }), _jsxs("ul", { className: "space-y-3 text-sm text-gray-500", children: [_jsx("li", { children: _jsx(Link, { href: `/${storeConfig.slug}/account`, className: "hover:text-gray-900 transition-colors", children: "My Account" }) }), _jsx("li", { children: _jsx(Link, { href: `/${storeConfig.slug}/track-order`, className: "hover:text-gray-900 transition-colors", children: "Track Order" }) })] })] })] }), _jsxs("div", { className: "border-t border-gray-100 pt-8 flex flex-col md:flex-row justify-between items-center gap-4 text-xs text-gray-400", children: [_jsxs("p", { children: ["\u00A9 2024 ", storeConfig.name, ". All rights reserved."] }), _jsxs("div", { className: "flex gap-6", children: [_jsx(Link, { href: `/${storeConfig.slug}/privacy`, className: "hover:text-gray-600 transition-colors", children: "Privacy Policy" }), _jsx(Link, { href: `/${storeConfig.slug}/terms`, className: "hover:text-gray-600 transition-colors", children: "Terms & Conditions" }), _jsx(Link, { href: `/${storeConfig.slug}/help-center`, className: "hover:text-gray-600 transition-colors", children: "Accessibility" })] })] })] }) }), _jsx(Sheet, { isOpen: isCartOpen, onClose: () => setIsCartOpen(false), title: `My Cart (${cartCount})`, side: "right", children: _jsx("div", { className: "flex flex-col h-full", children: cart.length === 0 ? (_jsxs("div", { className: "flex-1 flex flex-col items-center justify-center text-center p-8 text-gray-500", children: [_jsx(ShoppingCart, { className: "h-12 w-12 mb-4 text-gray-300" }), _jsx("p", { className: "font-medium mb-1", children: "Your cart is empty" }), _jsx(Button, { onClick: () => setIsCartOpen(false), className: "bg-blue-600 hover:bg-blue-700 text-white mt-4", children: "Start Shopping" })] })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "flex-1 overflow-y-auto py-4", children: cart.map(item => (_jsxs("div", { className: "flex gap-4 p-4 border-b border-gray-100", children: [_jsx("div", { className: "h-16 w-16 bg-white border border-gray-200 rounded flex-shrink-0 overflow-hidden", children: _jsx(ImageWithFallback, { src: item.product.images?.[0], alt: item.product.name, className: "w-full h-full object-cover", skeletonAspectRatio: "square" }) }), _jsxs("div", { className: "flex-1", children: [_jsx("h4", { className: "font-medium text-sm text-gray-900 line-clamp-2 mb-1", children: item.product.name }), _jsxs("div", { className: "flex justify-between items-center mt-2", children: [_jsx("p", { className: "text-blue-600 font-bold text-sm", children: formatCurrency(item.price, item.product?.currency || storeConfig.settings?.currency || 'USD') }), _jsxs("div", { className: "flex items-center border border-gray-200 rounded bg-white", children: [_jsx("button", { onClick: () => updateCartQuantity(item.id, item.quantity - 1), className: "px-2 py-0.5 hover:bg-gray-50 text-gray-500", children: "-" }), _jsx("span", { className: "px-2 text-xs font-medium", children: item.quantity }), _jsx("button", { onClick: () => updateCartQuantity(item.id, item.quantity + 1), className: "px-2 py-0.5 hover:bg-gray-50 text-gray-500", children: "+" })] })] })] })] }, item.id))) }), _jsxs("div", { className: "border-t border-gray-100 p-4 space-y-4 bg-gray-50", children: [_jsxs("div", { className: "flex justify-between items-center font-bold text-lg text-gray-900", children: [_jsx("span", { children: "Total" }), _jsx("span", { children: formatCurrency(cartTotal, storeConfig.settings?.currency || 'USD') })] }), _jsx(CheckoutButton, { storeConfig: storeConfig, className: "w-full bg-yellow-400 hover:bg-yellow-500 text-blue-900 font-bold" })] })] })) }) }), _jsx(Sheet, { isOpen: isMobileMenuOpen, onClose: () => setIsMobileMenuOpen(false), title: "Menu", side: "left", children: _jsx("div", { className: "py-2", children: categories.map(cat => (_jsx(Link, { href: `/${storeConfig.slug}/categories/${cat.slug}`, onClick: () => setIsMobileMenuOpen(false), className: "block px-4 py-3 text-sm font-medium text-gray-700 hover:bg-gray-50 hover:text-blue-600 border-b border-gray-100", children: cat.name }, cat.id))) }) }), _jsx(PromoBanner, { config: layoutConfig?.sections?.promoBanner, layoutStyle: "electronics" })] }));
+}

package/dist/layouts/electronics-grid/index.d.ts

@@ -0,0 +1,15 @@
+export { ElectronicsHomePageGrid } from './components/ElectronicsHomePageGrid';
+export { ElectronicsGridProductCard } from './components/ElectronicsGridProductCard';
+export { ElectronicsGridCategoriesPage } from './pages/ElectronicsGridCategoriesPage';
+export { ElectronicsGridProductsListingPage } from './pages/ProductsPage';
+export { ElectronicsGridProductDetailPage } from './pages/ProductDetailPage';
+export { ElectronicsGridCategoryPage } from './pages/CategoryPage';
+export { ElectronicsGridCategoriesListingPage } from './pages/CategoriesPage';
+export { ElectronicsGridAboutPage } from './pages/AboutPage';
+export { ElectronicsGridContactPage } from './pages/ContactPage';
+export { ElectronicsGridHelpCenterPage } from './pages/HelpCenterPage';
+export { ElectronicsGridPrivacyPolicyPage } from './pages/PrivacyPolicyPage';
+export { ElectronicsGridShippingReturnsPage } from './pages/ShippingReturnsPage';
+export { ElectronicsGridTermsPage } from './pages/TermsPage';
+export { ElectronicsGridTrackOrderPage } from './pages/TrackOrderPage';
+//# sourceMappingURL=index.d.ts.map

package/dist/layouts/electronics-grid/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/layouts/electronics-grid/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,uBAAuB,EAAE,MAAM,sCAAsC,CAAC;AAC/E,OAAO,EAAE,0BAA0B,EAAE,MAAM,yCAAyC,CAAC;AACrF,OAAO,EAAE,6BAA6B,EAAE,MAAM,uCAAuC,CAAC;AACtF,OAAO,EAAE,kCAAkC,EAAE,MAAM,sBAAsB,CAAC;AAC1E,OAAO,EAAE,gCAAgC,EAAE,MAAM,2BAA2B,CAAC;AAC7E,OAAO,EAAE,2BAA2B,EAAE,MAAM,sBAAsB,CAAC;AACnE,OAAO,EAAE,oCAAoC,EAAE,MAAM,wBAAwB,CAAC;AAC9E,OAAO,EAAE,wBAAwB,EAAE,MAAM,mBAAmB,CAAC;AAC7D,OAAO,EAAE,0BAA0B,EAAE,MAAM,qBAAqB,CAAC;AACjE,OAAO,EAAE,6BAA6B,EAAE,MAAM,wBAAwB,CAAC;AACvE,OAAO,EAAE,gCAAgC,EAAE,MAAM,2BAA2B,CAAC;AAC7E,OAAO,EAAE,kCAAkC,EAAE,MAAM,6BAA6B,CAAC;AACjF,OAAO,EAAE,wBAAwB,EAAE,MAAM,mBAAmB,CAAC;AAC7D,OAAO,EAAE,6BAA6B,EAAE,MAAM,wBAAwB,CAAC"}

package/dist/layouts/electronics-grid/index.js

@@ -0,0 +1,15 @@
+// Tech Grid (electronics-grid) layout — fully sandboxed exports
+export { ElectronicsHomePageGrid } from './components/ElectronicsHomePageGrid.js';
+export { ElectronicsGridProductCard } from './components/ElectronicsGridProductCard.js';
+export { ElectronicsGridCategoriesPage } from './pages/ElectronicsGridCategoriesPage.js';
+export { ElectronicsGridProductsListingPage } from './pages/ProductsPage.js';
+export { ElectronicsGridProductDetailPage } from './pages/ProductDetailPage.js';
+export { ElectronicsGridCategoryPage } from './pages/CategoryPage.js';
+export { ElectronicsGridCategoriesListingPage } from './pages/CategoriesPage.js';
+export { ElectronicsGridAboutPage } from './pages/AboutPage.js';
+export { ElectronicsGridContactPage } from './pages/ContactPage.js';
+export { ElectronicsGridHelpCenterPage } from './pages/HelpCenterPage.js';
+export { ElectronicsGridPrivacyPolicyPage } from './pages/PrivacyPolicyPage.js';
+export { ElectronicsGridShippingReturnsPage } from './pages/ShippingReturnsPage.js';
+export { ElectronicsGridTermsPage } from './pages/TermsPage.js';
+export { ElectronicsGridTrackOrderPage } from './pages/TrackOrderPage.js';

package/dist/layouts/electronics-grid/pages/AboutPage.d.ts

@@ -0,0 +1,7 @@
+import { StoreConfig } from '../../../lib/store-types';
+interface AboutPageProps {
+    storeConfig: StoreConfig;
+}
+export declare function ElectronicsGridAboutPage({ storeConfig: initialConfig }: AboutPageProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=AboutPage.d.ts.map

package/dist/layouts/electronics-grid/pages/AboutPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AboutPage.d.ts","sourceRoot":"","sources":["../../../../src/layouts/electronics-grid/pages/AboutPage.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAShD,UAAU,cAAc;IACtB,WAAW,EAAE,WAAW,CAAC;CAC1B;AAED,wBAAgB,wBAAwB,CAAC,EAAE,WAAW,EAAE,aAAa,EAAE,EAAE,cAAc,2CA4PtF"}

package/dist/layouts/electronics-grid/pages/AboutPage.js

@@ -0,0 +1,51 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Users, Award, Heart, Leaf, MapPin, Clock, Mail, ArrowRight } from 'lucide-react';
+import { Button } from '../../../components/ui/button.js';
+import { DotPattern } from '../../../components/ui/background-patterns.js';
+import { useStore } from '../../../lib/store-context.js';
+import Image from 'next/image';
+import { payazaInlineBindingProps, encodePayazaFieldKey } from '../../../preview/canvas/field-key.js';
+import { showLayoutDecorativeBadges } from '../../../lib/layout-badges.js';
+export function ElectronicsGridAboutPage({ storeConfig: initialConfig }) {
+    const { store } = useStore();
+    const storeConfig = store || initialConfig;
+    const primaryColor = storeConfig.branding.primaryColor;
+    const secondaryColor = storeConfig.branding.secondaryColor || primaryColor;
+    const aboutConfig = storeConfig.layoutConfig?.pages?.about;
+    const isPreview = !!storeConfig.isPreview;
+    // Electronics-grid hero — check schema path (hero) first, then flat paths for backward compat
+    const heroImage = aboutConfig?.hero?.heroImage || aboutConfig?.heroImage || 'https://images.unsplash.com/photo-1498049381960-da565139a979?q=80&w=2071&auto=format&fit=crop';
+    const pageTitle = aboutConfig?.hero?.title || aboutConfig?.title || "Crafting Experiences, Delivering Joy.";
+    const pageContent = aboutConfig?.story?.content || aboutConfig?.content || storeConfig.description;
+    const missionStatement = aboutConfig?.hero?.missionStatement || aboutConfig?.missionStatement;
+    const galleryImages = aboutConfig?.gallerySection;
+    const values = [
+        {
+            icon: Award,
+            title: "Tech Innovation",
+            description: "We lead the market with the latest and most advanced gadgets."
+        },
+        {
+            icon: Users,
+            title: "Global Support",
+            description: "24/7 technical assistance for all your smart home and device needs."
+        },
+        {
+            icon: Heart,
+            title: "Pure Performance",
+            description: "Reliability and high-speed performance guaranteed in every unit."
+        },
+        {
+            icon: Leaf,
+            title: "Sustainability",
+            description: "Commitment to reduced carbon footprint and energy-efficient tech."
+        }
+    ];
+    return (_jsxs("div", { className: "min-h-screen bg-white pb-20 overflow-hidden", children: [_jsxs("section", { "data-section": "hero", "data-payaza-section-key": "hero", "data-payaza-page": "about", className: "relative h-[60vh] min-h-[500px] w-full overflow-hidden", children: [_jsxs("div", { className: "absolute inset-0", "data-payaza-image": isPreview ? encodePayazaFieldKey('hero', ['heroImage']) : undefined, children: [_jsx(Image, { src: heroImage, alt: "About Us", fill: true, className: "w-full h-full object-cover transform scale-105 animate-pulse-slow", unoptimized: true }), _jsx("div", { className: "absolute inset-0 bg-gradient-to-r from-black/80 via-black/50 to-transparent" })] }), _jsx("div", { className: "absolute inset-0 flex items-center", children: _jsx("div", { className: "container mx-auto px-4 sm:px-6 lg:px-8", children: _jsxs("div", { className: "max-w-3xl animate-fade-in-up", children: [showLayoutDecorativeBadges() && (_jsxs("div", { className: "inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-white/10 backdrop-blur-md border border-white/20 text-white text-sm font-medium mb-6", children: [_jsx("span", { className: "w-2 h-2 rounded-full bg-white animate-pulse" }), "Est. 2024"] })), _jsx("h1", { className: "text-5xl md:text-7xl font-bold text-white mb-6 tracking-tight leading-tight", ...payazaInlineBindingProps(isPreview, 'hero', ['title']), children: pageTitle }), _jsx("p", { className: "text-xl md:text-2xl text-gray-200 max-w-2xl leading-relaxed font-light", ...payazaInlineBindingProps(isPreview, 'hero', ['missionStatement']), children: missionStatement || storeConfig.description })] }) }) })] }), _jsxs("section", { "data-section": "story", "data-payaza-section-key": "story", "data-payaza-page": "about", className: "py-24 px-4 sm:px-6 lg:px-8 relative", children: [_jsx("div", { className: "absolute top-0 right-0 -mt-24 -mr-24 w-96 h-96 bg-gray-50 rounded-full blur-3xl -z-10" }), _jsx("div", { className: "container mx-auto max-w-7xl", children: _jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-16 items-center", children: [_jsxs("div", { className: "relative", children: [galleryImages && galleryImages.length > 0 ? (_jsx("div", { className: "grid grid-cols-2 gap-4", children: galleryImages.slice(0, 4).map((img, i) => (_jsx("div", { className: `relative overflow-hidden rounded-2xl shadow-lg ${i === 0 ? 'col-span-2 aspect-[16/9]' : 'aspect-square'}`, children: _jsx(Image, { src: img.image, alt: img.caption || "Gallery Image", fill: true, className: "w-full h-full object-cover hover:scale-110 transition-transform duration-500", unoptimized: true }) }, i))) })) : (_jsxs("div", { className: "relative aspect-[4/5] rounded-[2rem] overflow-hidden shadow-2xl", children: [_jsx(Image, { src: "https://images.unsplash.com/photo-1522202176988-66273c2fd55f?q=80&w=2071&auto=format&fit=crop", alt: "Our Team", fill: true, className: "w-full h-full object-cover", unoptimized: true }), _jsx("div", { className: "absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-60" }), _jsxs("div", { className: "absolute bottom-8 left-8 text-white", children: [_jsx("p", { className: "font-bold text-lg", children: "The Dream Team" }), _jsx("p", { className: "text-white/80 text-sm", children: "Working together to serve you better" })] })] })), _jsx("div", { className: "absolute -bottom-6 -right-6 w-24 h-24 bg-white rounded-2xl shadow-xl flex items-center justify-center p-4 animate-bounce duration-[3000ms]", children: _jsx(Heart, { className: "w-10 h-10", style: { color: primaryColor, fill: primaryColor } }) })] }), _jsxs("div", { className: "space-y-10", children: [_jsxs("div", { children: [_jsx("span", { className: "text-sm font-bold uppercase tracking-widest mb-3 block", style: { color: primaryColor }, children: "Who We Are" }), _jsx("h2", { className: "text-4xl md:text-5xl font-black text-gray-900 mb-6 tracking-tight", children: "Our Journey" }), _jsxs("div", { className: "prose prose-lg text-gray-600 leading-relaxed space-y-6", ...payazaInlineBindingProps(isPreview, 'story', ['content'], { rich: 'inline' }), children: [pageContent?.split('\n').map((paragraph, idx) => (_jsx("p", { children: paragraph }, idx))), !pageContent && (_jsxs(_Fragment, { children: [_jsxs("p", { children: ["Founded with a bold vision to redefine excellence in the ", _jsx("span", { className: "font-semibold text-gray-900", children: storeConfig.type }), " industry, ", storeConfig.name, " has grown from a small passion project into a beloved brand. We believe in the power of quality, innovation, and community."] }), _jsx("p", { children: "Every day, we strive to bring you the best products, curated with care and delivered with a smile. Our team is dedicated to ensuring that your experience with us is nothing short of exceptional." })] }))] })] }), _jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-8", children: values.map((item, idx) => (_jsxs("div", { className: "flex gap-4 group", children: [_jsx("div", { className: "flex-shrink-0", children: _jsx("div", { className: "w-14 h-14 rounded-2xl flex items-center justify-center transition-colors group-hover:bg-gray-100", style: { backgroundColor: `${primaryColor}10` }, children: _jsx(item.icon, { className: "h-7 w-7 transition-transform group-hover:scale-110", style: { color: primaryColor } }) }) }), _jsxs("div", { children: [_jsx("h4", { className: "font-bold text-gray-900 mb-2 text-lg", children: item.title }), _jsx("p", { className: "text-gray-600 text-sm leading-relaxed", children: item.description })] })] }, idx))) })] })] }) })] }), _jsxs("section", { "data-section": "stats", "data-payaza-section-key": "stats", "data-payaza-page": "about", className: "py-20 relative overflow-hidden", children: [_jsx("div", { className: "absolute inset-0 opacity-10", children: _jsx(DotPattern, { color: primaryColor, cx: 2, cy: 2, cr: 2, width: 30, height: 30 }) }), _jsx("div", { className: "absolute inset-0", style: { backgroundColor: `${secondaryColor}15` } }), _jsx("div", { className: "container mx-auto px-4 relative z-10", children: _jsx("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-8 md:gap-12", children: [
+                                { label: "Global Users", value: "100k+" },
+                                { label: "Gadgets", value: storeConfig.products?.length ? `${storeConfig.products.length * 15}+` : "150+" },
+                                { label: "Tech Awards", value: "25+" },
+                                { label: "Innovation Hubs", value: "5+" }
+                            ].map((stat, idx) => (_jsxs("div", { className: "text-center group", children: [_jsx("div", { className: "text-5xl md:text-6xl font-black mb-2 tracking-tight transition-transform group-hover:scale-110 duration-300", style: { color: primaryColor }, children: stat.value }), _jsx("div", { className: "text-gray-600 font-bold uppercase tracking-widest text-xs md:text-sm", children: stat.label })] }, idx))) }) })] }), _jsx("section", { "data-section": "contact-info", "data-payaza-section-key": "contact-info", "data-payaza-page": "about", className: "py-24 px-4 sm:px-6 lg:px-8 bg-white", children: _jsxs("div", { className: "container mx-auto max-w-6xl", children: [_jsxs("div", { className: "text-center mb-16", children: [_jsx("h2", { className: "text-3xl md:text-4xl font-bold text-gray-900 mb-4", children: "Get in Touch" }), _jsx("p", { className: "text-gray-500 max-w-xl mx-auto", children: "Have questions? We'd love to hear from you. Reach out to our team via email, phone, or visit us at our store." })] }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-8", children: [_jsxs("div", { className: "group p-8 rounded-[2rem] bg-gray-50 border border-gray-100 hover:shadow-xl hover:-translate-y-2 transition-all duration-300 text-center", children: [_jsx("div", { className: "w-16 h-16 mx-auto mb-6 rounded-2xl bg-white shadow-sm flex items-center justify-center group-hover:scale-110 transition-transform", children: _jsx(MapPin, { className: "h-8 w-8 text-gray-400 group-hover:text-blue-500 transition-colors" }) }), _jsx("h3", { className: "font-bold text-xl text-gray-900 mb-3", children: "Visit Us" }), _jsxs("p", { className: "text-gray-600 leading-relaxed", children: [storeConfig.contactInfo?.address?.street || '123 Store Street', _jsx("br", {}), storeConfig.contactInfo?.address?.city || 'Commerce City', ", ", storeConfig.contactInfo?.address?.state || 'ST', " ", storeConfig.contactInfo?.address?.zipCode || '12345'] })] }), _jsxs("div", { className: "group p-8 rounded-[2rem] bg-gray-50 border border-gray-100 hover:shadow-xl hover:-translate-y-2 transition-all duration-300 text-center relative overflow-hidden", children: [_jsx("div", { className: "absolute inset-0 border-2 border-transparent group-hover:border-orange-100 rounded-[2rem] transition-colors pointer-events-none" }), _jsx("div", { className: "w-16 h-16 mx-auto mb-6 rounded-2xl bg-white shadow-sm flex items-center justify-center group-hover:scale-110 transition-transform", children: _jsx(Mail, { className: "h-8 w-8 text-gray-400 group-hover:text-orange-500 transition-colors" }) }), _jsx("h3", { className: "font-bold text-xl text-gray-900 mb-3", children: "Email Us" }), _jsxs("p", { className: "text-gray-600 leading-relaxed mb-4", children: [storeConfig.contactInfo?.email || `hello@${storeConfig.slug}.com`, _jsx("br", {}), storeConfig.contactInfo?.phone || '+1 (555) 123-4567'] }), _jsxs(Button, { variant: "link", className: "text-orange-600 font-bold p-0 h-auto hover:no-underline group-hover:translate-x-1 transition-transform", children: ["Send a message ", _jsx(ArrowRight, { className: "ml-1 h-4 w-4" })] })] }), _jsxs("div", { className: "group p-8 rounded-[2rem] bg-gray-50 border border-gray-100 hover:shadow-xl hover:-translate-y-2 transition-all duration-300 text-center", children: [_jsx("div", { className: "w-16 h-16 mx-auto mb-6 rounded-2xl bg-white shadow-sm flex items-center justify-center group-hover:scale-110 transition-transform", children: _jsx(Clock, { className: "h-8 w-8 text-gray-400 group-hover:text-green-500 transition-colors" }) }), _jsx("h3", { className: "font-bold text-xl text-gray-900 mb-3", children: "Opening Hours" }), _jsx("p", { className: "text-gray-600 leading-relaxed", children: storeConfig.locations?.[0]?.openingHours || (_jsxs(_Fragment, { children: ["Mon - Fri: 9am - 6pm", _jsx("br", {}), "Sat - Sun: 10am - 4pm"] })) })] })] })] }) })] }));
+}

package/dist/layouts/electronics-grid/pages/CategoriesPage.d.ts

@@ -0,0 +1,7 @@
+import { StoreConfig } from '../../../lib/store-types';
+interface CategoriesPageProps {
+    storeConfig: StoreConfig;
+}
+export declare function ElectronicsGridCategoriesListingPage({ storeConfig }: CategoriesPageProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=CategoriesPage.d.ts.map

package/dist/layouts/electronics-grid/pages/CategoriesPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CategoriesPage.d.ts","sourceRoot":"","sources":["../../../../src/layouts/electronics-grid/pages/CategoriesPage.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGhD,UAAU,mBAAmB;IAC3B,WAAW,EAAE,WAAW,CAAC;CAC1B;AAED,wBAAgB,oCAAoC,CAAC,EAAE,WAAW,EAAE,EAAE,mBAAmB,2CAExF"}

package/dist/layouts/electronics-grid/pages/CategoriesPage.js

@@ -0,0 +1,6 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ElectronicsGridCategoriesPage } from '../../electronics-grid/pages/ElectronicsGridCategoriesPage.js';
+export function ElectronicsGridCategoriesListingPage({ storeConfig }) {
+    return _jsx(ElectronicsGridCategoriesPage, { storeConfig: storeConfig });
+}

package/dist/layouts/electronics-grid/pages/CategoryPage.d.ts

@@ -0,0 +1,8 @@
+import { StoreConfig } from '../../../lib/store-types';
+interface CategoryPageProps {
+    storeConfig: StoreConfig;
+    categorySlug: string;
+}
+export declare function ElectronicsGridCategoryPage({ storeConfig: initialConfig, categorySlug }: CategoryPageProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=CategoryPage.d.ts.map

package/dist/layouts/electronics-grid/pages/CategoryPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CategoryPage.d.ts","sourceRoot":"","sources":["../../../../src/layouts/electronics-grid/pages/CategoryPage.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAA8B,MAAM,mBAAmB,CAAC;AAqB5E,UAAU,iBAAiB;IACzB,WAAW,EAAE,WAAW,CAAC;IACzB,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,wBAAgB,2BAA2B,CAAC,EAAE,WAAW,EAAE,aAAa,EAAE,YAAY,EAAE,EAAE,iBAAiB,2CAiH1G"}

package/dist/layouts/electronics-grid/pages/CategoryPage.js

@@ -0,0 +1,55 @@
+'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 { useStore } from '../../../lib/store-context.js';
+import { ArrowLeft, Filter } from 'lucide-react';
+import Link from 'next/link';
+import { useToast } from '../../../components/ui/toast.js';
+import { useAnalytics } from '../../../hooks/use-analytics.js';
+import { useEffect } from 'react';
+import { ProductCard } from '../../../components/ui/product-card.js';
+import { isEditorPreviewMode, resolveCategoryBySlugForDisplay, resolveCategoryProductsForDisplay, } from '../../../lib/utils/index.js';
+import { useCatalogLoader } from '../../../hooks/use-catalog-loader.js';
+import { CategoryDescription } from '../../../components/rich-text/CategoryDescription.js';
+export function ElectronicsGridCategoryPage({ storeConfig: initialConfig, categorySlug }) {
+    const { store, addToCart } = useStore();
+    const storeConfig = store || initialConfig;
+    const isPreview = isEditorPreviewMode(storeConfig);
+    const { categories: loadedCategories, products: loadedProducts } = useCatalogLoader(storeConfig, {
+        fetchServices: false,
+    });
+    const category = resolveCategoryBySlugForDisplay(loadedCategories, categorySlug, isPreview);
+    const products = resolveCategoryProductsForDisplay(loadedProducts, category?.id, isPreview);
+    const { addToast } = useToast();
+    const { trackEvent } = useAnalytics();
+    // Track category view
+    useEffect(() => {
+        if (category && storeConfig?.id) {
+            trackEvent({
+                eventType: 'category_view',
+                metadata: {
+                    categoryId: category.id,
+                    categoryName: category.name,
+                    categorySlug: category.slug,
+                },
+            });
+        }
+    }, [category?.id, storeConfig?.id, trackEvent]);
+    const hasItems = products.length > 0;
+    const handleAddToCart = (product) => {
+        addToCart(product);
+        addToast(`${product.name} added to cart`, 'success');
+    };
+    const handleQuickView = (product) => {
+        addToast(`Quick view for ${product.name}`, 'info');
+    };
+    if (!category) {
+        return (_jsx("div", { className: "min-h-screen bg-gray-50 flex items-center justify-center p-8", children: _jsxs("div", { className: "text-center", children: [_jsx("h1", { className: "text-2xl font-bold mb-2", children: "Category Not Found" }), _jsx("p", { className: "text-gray-600 mb-4", children: "The category you're looking for doesn't exist." }), _jsx(Link, { href: `/${storeConfig.slug}/categories`, children: _jsx(Button, { children: "Back to Categories" }) })] }) }));
+    }
+    // Modern / Dark Theme Logic (e.g. for Modern Eats)
+    const isDarkTheme = storeConfig.type === 'food-modern' || storeConfig.branding.theme === 'dark';
+    const bgColor = isDarkTheme ? 'bg-[#0F0F0F]' : 'bg-gray-50';
+    const textColor = isDarkTheme ? 'text-white' : 'text-gray-900';
+    return (_jsxs("div", { className: "min-h-screen bg-gray-50 text-gray-900 transition-colors duration-300", children: [_jsxs("div", { className: "relative h-[40vh] overflow-hidden", children: [_jsx(ImageWithFallback, { src: category.image, alt: category.name, className: "w-full h-full object-cover", skeletonAspectRatio: "16/9" }), _jsx("div", { className: "absolute inset-0 bg-black/40 backdrop-blur-[2px]" }), _jsxs("div", { className: "absolute inset-0 flex flex-col items-center justify-center text-center p-6 text-white", children: [_jsx("h1", { className: "text-5xl md:text-7xl font-bold tracking-tight mb-4", children: category.name }), _jsx(CategoryDescription, { description: category.description })] })] }), _jsxs("div", { className: "container mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-12", children: [_jsxs("div", { className: "flex flex-col md:flex-row justify-between items-center mb-10 gap-4", children: [_jsxs(Link, { href: `/${storeConfig.slug}/categories`, className: "inline-flex items-center text-sm font-medium text-gray-600 hover:text-gray-900", children: [_jsx(ArrowLeft, { className: "h-4 w-4 mr-2" }), "Back to All Categories"] }), _jsx("div", { className: "flex items-center gap-4", children: _jsxs(Button, { variant: "outline", className: "bg-white", children: [_jsx(Filter, { className: "h-4 w-4 mr-2" }), " Filter"] }) })] }), !hasItems ? (_jsxs("div", { className: "text-center py-20 border border-dashed border-gray-300 rounded-3xl", children: [_jsx("p", { className: "text-gray-500 text-lg", children: "No products found in this category." }), _jsx(Button, { className: "mt-4", onClick: () => window.history.back(), children: "Go Back" })] })) : (_jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8", children: products.map((product) => (_jsx(ProductCard, { product: product, storeSlug: storeConfig.slug, onAddToCart: handleAddToCart, onQuickView: handleQuickView }, product.id))) }))] })] }));
+}

package/dist/layouts/electronics-grid/pages/ContactPage.d.ts

@@ -0,0 +1,7 @@
+import { StoreConfig } from '../../../lib/store-types';
+interface ContactPageProps {
+    storeConfig: StoreConfig;
+}
+export declare function ElectronicsGridContactPage({ storeConfig: initialConfig }: ContactPageProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ContactPage.d.ts.map

package/dist/layouts/electronics-grid/pages/ContactPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContactPage.d.ts","sourceRoot":"","sources":["../../../../src/layouts/electronics-grid/pages/ContactPage.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAShD,UAAU,gBAAgB;IACtB,WAAW,EAAE,WAAW,CAAC;CAC5B;AAED,wBAAgB,0BAA0B,CAAC,EAAE,WAAW,EAAE,aAAa,EAAE,EAAE,gBAAgB,2CAqT1F"}

package/dist/layouts/electronics-grid/pages/ContactPage.js

@@ -0,0 +1,57 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Button } from '../../../components/ui/button.js';
+import { Mail, Phone, MapPin, Clock, Send, MessageSquare, CheckCircle } from 'lucide-react';
+import { useStore } from '../../../lib/store-context.js';
+import Image from 'next/image';
+import { submitContact } from '../../../lib/services/contact.service.js';
+import { isEditorPreviewMode } from '../../../lib/utils/editor-preview.js';
+import { encodePayazaFieldKey, payazaInlineBindingProps } from '../../../preview/canvas/field-key.js';
+export function ElectronicsGridContactPage({ storeConfig: initialConfig }) {
+    const { store } = useStore();
+    const storeConfig = store || initialConfig;
+    const isPreview = isEditorPreviewMode(storeConfig);
+    const contactConfig = storeConfig.layoutConfig?.pages?.contact;
+    const heroConfig = contactConfig?.hero;
+    const heroImage = typeof heroConfig?.backgroundImage === 'string' && heroConfig.backgroundImage.trim().length > 0
+        ? heroConfig.backgroundImage.trim()
+        : 'https://images.unsplash.com/photo-1596524430615-b46475ddff6e?q=80&w=2070&auto=format&fit=crop';
+    const [formState, setFormState] = useState('idle');
+    const [errorMessage, setErrorMessage] = useState(null);
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        setErrorMessage(null);
+        setFormState('submitting');
+        const form = e.currentTarget;
+        const get = (id) => form.querySelector(`#${id}`)?.value?.trim() || '';
+        const slug = storeConfig.slug;
+        if (!slug) {
+            setFormState('idle');
+            setErrorMessage('Store is not configured. Cannot send message.');
+            return;
+        }
+        try {
+            const result = await submitContact(slug, {
+                firstName: get('firstName'),
+                lastName: get('lastName'),
+                email: get('email'),
+                phone: get('phone') || undefined,
+                subject: get('subject') || undefined,
+                message: get('message'),
+            });
+            if (result.success) {
+                setFormState('success');
+            }
+            else {
+                setFormState('idle');
+                setErrorMessage(result.message || 'Failed to send message.');
+            }
+        }
+        catch {
+            setFormState('idle');
+            setErrorMessage('Failed to send message. Please try again.');
+        }
+    };
+    return (_jsxs("div", { className: "min-h-screen bg-white pb-20", children: [heroConfig?.show !== false && (_jsxs("section", { "data-section": "hero", "data-payaza-section-key": "hero", "data-payaza-page": "contact", className: "relative bg-gray-900 text-white py-20 overflow-hidden", children: [_jsxs("div", { className: "absolute inset-0 opacity-20", "data-payaza-image": isPreview ? encodePayazaFieldKey('hero', ['backgroundImage']) : undefined, children: [_jsx(Image, { src: heroImage, alt: "Contact Background", fill: true, className: "w-full h-full object-cover", unoptimized: true }), _jsx("div", { className: "absolute inset-0 bg-black/60" })] }), _jsxs("div", { className: "container mx-auto px-4 relative z-10 text-center", children: [_jsx("h1", { className: "text-4xl md:text-6xl font-bold mb-4 tracking-tight", ...payazaInlineBindingProps(isPreview, 'hero', ['title']), children: heroConfig?.title || 'Get in Touch' }), _jsx("p", { className: "text-xl text-gray-300 max-w-2xl mx-auto font-light", ...payazaInlineBindingProps(isPreview, 'hero', ['subtitle']), children: heroConfig?.subtitle || "We'd love to hear from you. Here's how you can reach us." })] })] })), _jsx("div", { "data-section": "form", "data-payaza-section-key": "form", "data-payaza-page": "contact", className: "container mx-auto px-4 -mt-10 relative z-20 max-w-6xl", children: _jsxs("div", { className: "bg-white rounded-3xl shadow-xl overflow-hidden border border-gray-100 flex flex-col lg:flex-row", children: [_jsxs("div", { className: "lg:w-2/5 p-8 md:p-12 text-white relative overflow-hidden", style: { backgroundColor: 'var(--store-primary)' }, children: [_jsx("div", { className: "absolute top-0 right-0 -mt-10 -mr-10 w-40 h-40 bg-white opacity-10 rounded-full blur-2xl" }), _jsx("div", { className: "absolute bottom-0 left-0 -mb-10 -ml-10 w-40 h-40 bg-black opacity-10 rounded-full blur-2xl" }), _jsx("h2", { className: "text-2xl font-bold mb-8 relative z-10", children: "Contact Information" }), _jsx("p", { className: "mb-10 text-white/90 leading-relaxed relative z-10", children: "Fill out the form and our team will get back to you within 24 hours." }), _jsxs("div", { className: "space-y-8 relative z-10", children: [_jsxs("div", { className: "flex items-start gap-4", children: [_jsx("div", { className: "w-10 h-10 rounded-full bg-white/20 flex items-center justify-center flex-shrink-0", children: _jsx(Phone, { className: "w-5 h-5 text-white" }) }), _jsxs("div", { children: [_jsx("h3", { className: "font-semibold text-white mb-1", children: "Call Us" }), _jsx("p", { className: "text-white/80", children: storeConfig.contactInfo?.phone || '+1 (555) 123-4567' })] })] }), _jsxs("div", { className: "flex items-start gap-4", children: [_jsx("div", { className: "w-10 h-10 rounded-full bg-white/20 flex items-center justify-center flex-shrink-0", children: _jsx(Mail, { className: "w-5 h-5 text-white" }) }), _jsxs("div", { children: [_jsx("h3", { className: "font-semibold text-white mb-1", children: "Email Us" }), _jsx("p", { className: "text-white/80", children: storeConfig.contactInfo?.email || `hello@${storeConfig.slug}.com` })] })] }), _jsxs("div", { className: "flex items-start gap-4", children: [_jsx("div", { className: "w-10 h-10 rounded-full bg-white/20 flex items-center justify-center flex-shrink-0", children: _jsx(MapPin, { className: "w-5 h-5 text-white" }) }), _jsxs("div", { children: [_jsx("h3", { className: "font-semibold text-white mb-1", children: "Visit Us" }), _jsxs("p", { className: "text-white/80", children: [storeConfig.contactInfo?.address?.street || '123 Commerce Blvd', ",", _jsx("br", {}), storeConfig.contactInfo?.address?.city || 'Business City', ", ", storeConfig.contactInfo?.address?.state || 'ST', " ", storeConfig.contactInfo?.address?.zipCode || '12345'] })] })] }), _jsxs("div", { className: "flex items-start gap-4", children: [_jsx("div", { className: "w-10 h-10 rounded-full bg-white/20 flex items-center justify-center flex-shrink-0", children: _jsx(Clock, { className: "w-5 h-5 text-white" }) }), _jsxs("div", { children: [_jsx("h3", { className: "font-semibold text-white mb-1", children: "Opening Hours" }), _jsx("p", { className: "text-white/80", children: storeConfig.locations?.[0]?.openingHours || 'Mon - Fri: 9am - 6pm' }), !storeConfig.locations?.[0]?.openingHours && _jsx("p", { className: "text-white/80", children: "Sat: 10am - 4pm" })] })] })] }), _jsx("div", { className: "mt-12 relative z-10", children: _jsxs("div", { className: "flex gap-4", children: [storeConfig.branding.socialMedia?.instagram && (_jsx("a", { href: storeConfig.branding.socialMedia.instagram, target: "_blank", rel: "noopener noreferrer", className: "w-10 h-10 rounded-full bg-white/20 hover:bg-white/30 flex items-center justify-center transition-colors", children: _jsx(Image, { src: "https://storefront-assets.s3.amazonaws.com/icons/instagram.svg", alt: "Instagram", width: 20, height: 20, className: "brightness-0 invert", unoptimized: true }) })), storeConfig.branding.socialMedia?.twitter && (_jsx("a", { href: storeConfig.branding.socialMedia.twitter, target: "_blank", rel: "noopener noreferrer", className: "w-10 h-10 rounded-full bg-white/20 hover:bg-white/30 flex items-center justify-center transition-colors", children: _jsx(Image, { src: "https://storefront-assets.s3.amazonaws.com/icons/twitter.svg", alt: "Twitter", width: 20, height: 20, className: "brightness-0 invert", unoptimized: true }) })), storeConfig.branding.socialMedia?.facebook && (_jsx("a", { href: storeConfig.branding.socialMedia.facebook, target: "_blank", rel: "noopener noreferrer", className: "w-10 h-10 rounded-full bg-white/20 hover:bg-white/30 flex items-center justify-center transition-colors", children: _jsx(Image, { src: "https://storefront-assets.s3.amazonaws.com/icons/facebook.svg", alt: "Facebook", width: 20, height: 20, className: "brightness-0 invert", unoptimized: true }) })), storeConfig.branding.socialMedia?.youtube && (_jsx("a", { href: storeConfig.branding.socialMedia.youtube, target: "_blank", rel: "noopener noreferrer", className: "w-10 h-10 rounded-full bg-white/20 hover:bg-white/30 flex items-center justify-center transition-colors", children: _jsx(Image, { src: "https://storefront-assets.s3.amazonaws.com/icons/youtube.svg", alt: "YouTube", width: 20, height: 20, className: "brightness-0 invert", unoptimized: true }) }))] }) })] }), _jsxs("div", { className: "lg:w-3/5 p-8 md:p-12 bg-white relative", children: [_jsx("div", { className: "absolute top-0 right-0 p-6 opacity-5", children: _jsx(MessageSquare, { className: "w-32 h-32" }) }), formState === 'success' ? (_jsxs("div", { className: "h-full flex flex-col items-center justify-center text-center py-10", children: [_jsx("div", { className: "w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mb-6", children: _jsx(CheckCircle, { className: "w-10 h-10 text-green-600" }) }), _jsx("h3", { className: "text-2xl font-bold text-gray-900 mb-2", children: "Message Sent!" }), _jsx("p", { className: "text-gray-600 max-w-sm mx-auto mb-8", children: "Thank you for contacting us. We have received your message and will respond as soon as possible." }), _jsx(Button, { onClick: () => setFormState('idle'), className: "bg-gray-900 hover:bg-gray-800", children: "Send Another Message" })] })) : (_jsxs("form", { onSubmit: handleSubmit, className: "relative z-10 space-y-6", children: [errorMessage && (_jsx("p", { className: "text-sm text-red-600 bg-red-50 p-3 rounded-xl", children: errorMessage })), _jsx("h2", { className: "text-2xl font-bold text-gray-900 mb-6", children: "Send us a Message" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsxs("div", { className: "space-y-2", children: [_jsx("label", { htmlFor: "firstName", className: "text-sm font-medium text-gray-700", children: "First Name" }), _jsx("input", { type: "text", id: "firstName", required: true, className: "w-full px-4 py-3 rounded-xl bg-gray-50 border border-gray-200 focus:border-gray-900 focus:ring-0 outline-none transition-all", placeholder: "John" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { htmlFor: "lastName", className: "text-sm font-medium text-gray-700", children: "Last Name" }), _jsx("input", { type: "text", id: "lastName", required: true, className: "w-full px-4 py-3 rounded-xl bg-gray-50 border border-gray-200 focus:border-gray-900 focus:ring-0 outline-none transition-all", placeholder: "Doe" })] })] }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsxs("div", { className: "space-y-2", children: [_jsx("label", { htmlFor: "email", className: "text-sm font-medium text-gray-700", children: "Email Address" }), _jsx("input", { type: "email", id: "email", required: true, className: "w-full px-4 py-3 rounded-xl bg-gray-50 border border-gray-200 focus:border-gray-900 focus:ring-0 outline-none transition-all", placeholder: "john@example.com" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { htmlFor: "phone", className: "text-sm font-medium text-gray-700", children: "Phone (Optional)" }), _jsx("input", { type: "tel", id: "phone", className: "w-full px-4 py-3 rounded-xl bg-gray-50 border border-gray-200 focus:border-gray-900 focus:ring-0 outline-none transition-all", placeholder: "+1 (555) 000-0000" })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { htmlFor: "subject", className: "text-sm font-medium text-gray-700", children: "Subject" }), _jsxs("select", { id: "subject", className: "w-full px-4 py-3 rounded-xl bg-gray-50 border border-gray-200 focus:border-gray-900 focus:ring-0 outline-none transition-all", children: [_jsx("option", { value: "general", children: "General Inquiry" }), _jsx("option", { value: "support", children: "Customer Support" }), _jsx("option", { value: "orders", children: "Orders & Returns" }), _jsx("option", { value: "wholesale", children: "Wholesale & Partnerships" })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { htmlFor: "message", className: "text-sm font-medium text-gray-700", children: "Message" }), _jsx("textarea", { id: "message", rows: 4, required: true, className: "w-full px-4 py-3 rounded-xl bg-gray-50 border border-gray-200 focus:border-gray-900 focus:ring-0 outline-none transition-all resize-none", placeholder: "How can we help you today?" })] }), _jsx("div", { className: "pt-2", children: _jsx(Button, { type: "submit", disabled: formState === 'submitting', className: "w-full py-6 text-lg font-semibold rounded-xl", style: { backgroundColor: 'var(--store-primary)' }, children: formState === 'submitting' ? (_jsxs("span", { className: "flex items-center gap-2", children: [_jsx("span", { className: "w-4 h-4 border-2 border-white/20 border-t-white rounded-full animate-spin" }), "Sending..."] })) : (_jsxs("span", { className: "flex items-center gap-2", children: ["Send Message", _jsx(Send, { className: "w-4 h-4" })] })) }) })] }))] })] }) }), _jsx("section", { "data-section": "map", "data-payaza-section-key": "map", "data-payaza-page": "contact", className: "container mx-auto px-4 mt-20 max-w-6xl", children: _jsxs("div", { className: "bg-gray-100 rounded-3xl overflow-hidden h-96 w-full relative grayscale hover:grayscale-0 transition-all duration-500", children: [_jsx("iframe", { src: "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3024.2219901290355!2d-74.00369368400567!3d40.71312937933185!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c25a23e28c1191%3A0x49f75d3281df052a!2s150%20Park%20Row%2C%20New%20York%2C%20NY%2010007!5e0!3m2!1sen!2sus!4v1620000000000!5m2!1sen!2sus", width: "100%", height: "100%", style: { border: 0 }, allowFullScreen: true, loading: "lazy", title: "Store Location" }), _jsxs("div", { className: "absolute top-4 right-4 bg-white p-4 rounded-xl shadow-lg z-10 hidden md:block", children: [_jsx("p", { className: "font-bold text-gray-900", children: storeConfig.name }), _jsx("p", { className: "text-sm text-gray-500", children: "123 Commerce Blvd" })] })] }) })] }));
+}

package/dist/layouts/electronics-grid/pages/ElectronicsGridCategoriesPage.d.ts

@@ -0,0 +1,7 @@
+import { StoreConfig } from '../../../lib/store-types';
+interface ElectronicsGridCategoriesPageProps {
+    storeConfig: StoreConfig;
+}
+export declare function ElectronicsGridCategoriesPage({ storeConfig: initialConfig }: ElectronicsGridCategoriesPageProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ElectronicsGridCategoriesPage.d.ts.map

package/dist/layouts/electronics-grid/pages/ElectronicsGridCategoriesPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ElectronicsGridCategoriesPage.d.ts","sourceRoot":"","sources":["../../../../src/layouts/electronics-grid/pages/ElectronicsGridCategoriesPage.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAWhD,UAAU,kCAAkC;IAC1C,WAAW,EAAE,WAAW,CAAC;CAC1B;AAED,wBAAgB,6BAA6B,CAAC,EAAE,WAAW,EAAE,aAAa,EAAE,EAAE,kCAAkC,2CA6G/G"}

package/dist/layouts/electronics-grid/pages/ElectronicsGridCategoriesPage.js

@@ -0,0 +1,26 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Link from 'next/link';
+import { ImageWithFallback } from '../../../components/ui/image-with-fallback.js';
+import { motion } from 'framer-motion';
+import { ArrowRight, Layers } from 'lucide-react';
+import { RichTextExcerpt } from '../../../components/rich-text/RichTextExcerpt.js';
+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';
+export function ElectronicsGridCategoriesPage({ storeConfig: initialConfig }) {
+    const { store } = useStore();
+    const storeConfig = store || initialConfig;
+    const isPreview = isEditorPreviewMode(storeConfig);
+    const { categories: loadedCategories } = useCatalogLoader(storeConfig, {
+        fetchProducts: false,
+        fetchServices: false,
+    });
+    const categories = resolveStoreCategoriesForDisplay(loadedCategories, isPreview);
+    const breadcrumbItems = [
+        { label: storeConfig.name, href: `/${storeConfig.slug}` },
+        { label: 'Categories', href: `/${storeConfig.slug}/categories` },
+    ];
+    return (_jsxs("div", { className: "min-h-screen bg-slate-50 font-sans text-slate-900", children: [_jsx("div", { className: "bg-white border-b border-slate-100", children: _jsxs("div", { className: "container mx-auto px-4 sm:px-6 lg:px-8 py-8 lg:py-12", children: [_jsx("div", { className: "mb-8", children: _jsx(Breadcrumbs, { items: breadcrumbItems }) }), _jsxs(motion.div, { initial: { opacity: 0, y: 20 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.5 }, className: "max-w-4xl", children: [_jsxs("h1", { className: "text-4xl lg:text-5xl font-extrabold tracking-tight text-slate-900 mb-4", children: ["Tech ", _jsx("span", { className: "text-blue-600", children: "Categories" })] }), _jsx("p", { className: "text-lg text-slate-500 max-w-2xl leading-relaxed", children: "Discover cutting-edge technology across our specialized departments. Engineered for performance, designed for you." })] })] }) }), _jsx("div", { className: "container mx-auto px-4 sm:px-6 lg:px-8 py-12 lg:py-16", children: _jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8", children: categories.map((category, index) => (_jsx(motion.div, { initial: { opacity: 0, y: 20 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.4, delay: index * 0.1 }, children: _jsxs(Link, { href: `/${storeConfig.slug}/categories/${category.slug}`, className: "group relative block h-[320px] rounded-2xl overflow-hidden bg-white shadow-sm hover:shadow-xl hover:shadow-blue-500/10 transition-all duration-500 border border-slate-100 hover:border-blue-200/60", children: [_jsxs("div", { className: "absolute inset-0 z-0", children: [_jsx(ImageWithFallback, { src: category.image, alt: category.name, className: "w-full h-full object-cover transition-transform duration-700 group-hover:scale-105 group-hover:blur-[2px]", skeletonAspectRatio: "auto" }), _jsx("div", { className: "absolute inset-0 bg-gradient-to-t from-slate-900/90 via-slate-900/40 to-transparent opacity-80 group-hover:opacity-90 transition-opacity duration-500" })] }), _jsxs("div", { className: "absolute inset-0 z-10 p-8 flex flex-col justify-end", children: [_jsx("div", { className: "mb-auto transform -translate-y-4 opacity-0 group-hover:translate-y-0 group-hover:opacity-100 transition-all duration-500 ease-out", children: _jsx("span", { className: "inline-flex items-center justify-center w-10 h-10 rounded-full bg-white/10 backdrop-blur-md border border-white/20 text-white", children: _jsx(Layers, { className: "w-5 h-5" }) }) }), _jsxs("div", { className: "transform translate-y-2 group-hover:translate-y-0 transition-transform duration-500", children: [_jsx("h2", { className: "text-2xl md:text-3xl font-bold text-white mb-3 tracking-tight", children: category.name }), _jsx(RichTextExcerpt, { value: category.description, as: "p", className: "text-slate-200 text-sm line-clamp-2 mb-6 opacity-0 group-hover:opacity-100 transition-all duration-500 delay-100 transform translate-y-4 group-hover:translate-y-0" }), _jsx("div", { className: "flex items-center gap-3", children: _jsxs("span", { className: "inline-flex items-center gap-2 px-4 py-2 rounded-full bg-blue-600/90 hover:bg-blue-600 text-white text-xs font-bold uppercase tracking-wider backdrop-blur-sm transition-all duration-300 group-hover:scale-105 group-hover:shadow-lg group-hover:shadow-blue-500/30", children: ["Browse ", _jsx(ArrowRight, { className: "w-3 h-3 group-hover:translate-x-1 transition-transform" })] }) })] })] }), _jsx("div", { className: "absolute top-0 right-0 p-6 opacity-30 group-hover:opacity-60 transition-opacity duration-500", children: _jsxs("div", { className: "flex gap-1", children: [_jsx("div", { className: "w-1 h-8 bg-blue-500/50 rounded-full transform rotate-12" }), _jsx("div", { className: "w-1 h-12 bg-blue-400/50 rounded-full transform rotate-12" }), _jsx("div", { className: "w-1 h-6 bg-blue-300/50 rounded-full transform rotate-12" })] }) })] }) }, category.id))) }) })] }));
+}

package/dist/layouts/electronics-grid/pages/HelpCenterPage.d.ts

@@ -0,0 +1,7 @@
+import { StoreConfig } from '../../../lib/store-types';
+interface HelpCenterPageProps {
+    storeConfig: StoreConfig;
+}
+export declare function ElectronicsGridHelpCenterPage({ storeConfig }: HelpCenterPageProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=HelpCenterPage.d.ts.map

package/dist/layouts/electronics-grid/pages/HelpCenterPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HelpCenterPage.d.ts","sourceRoot":"","sources":["../../../../src/layouts/electronics-grid/pages/HelpCenterPage.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAKhD,UAAU,mBAAmB;IAC3B,WAAW,EAAE,WAAW,CAAC;CAC1B;AAED,wBAAgB,6BAA6B,CAAC,EAAE,WAAW,EAAE,EAAE,mBAAmB,2CA+IjF"}