payaza-storefront-layouts 1.0.0

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

@@ -0,0 +1,89 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button } from '../../../components/ui/button';
+import { Sheet } from '../../../components/ui/sheet';
+import { CheckoutButton } from '../../../components/ui/checkout-button';
+import { CategoryTree } from '../../../components/ui/category-tree';
+import { useStore } from '../../../lib/store-context';
+import { ImageWithFallback } from '../../../components/ui/image-with-fallback';
+import { useToast } from '../../../components/ui/toast';
+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 { formatCurrency, cn, filterActiveProducts } from '../../../lib/utils';
+import { getLayoutText, getBannerImage, getLogoUrl } from '../../../lib/utils/asset-helpers';
+import { StoreLogo } from '../../../components/ui/store-logos';
+import { PromoBanner } from '../../../layouts/shared/components/PromoBanner';
+import { ElectronicsGridProductCard } from './ElectronicsGridProductCard';
+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 }) {
+    const layoutConfig = storeConfig.layoutConfig;
+    const categories = storeConfig.categories || [];
+    const products = filterActiveProducts(storeConfig.products || []);
+    const { cart, addToCart, updateCartQuantity, isCartOpen, setIsCartOpen, cartTotal, cartCount, wishlist } = useStore();
+    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()) || 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", { className: "container mx-auto px-4 md:px-6 h-16 flex items-center gap-8", 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: storeConfig.name })) : (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-xl font-medium tracking-tight text-gray-900 group-hover:text-gray-600 transition-colors", children: storeConfig.name }), _jsx("span", { className: "text-[9px] font-normal tracking-wide text-gray-400 mt-0.5", children: "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" }) }), _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" })] }) }), 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 = promoBanner?.buttonLink ||
+                                            `/${storeConfig.slug}/products`;
+                                        return (_jsxs("div", { 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]", 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", { className: "grid gap-4 sm:gap-6 lg:gap-8 grid-cols-2 sm:grid-cols-2 lg:grid-cols-3", 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 lg:grid-cols-5 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}/shipping-returns`, className: "hover:text-gray-900 transition-colors", children: "Shipping & Returns" }) }), _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", { children: [_jsx("h4", { className: "font-medium text-gray-900 text-sm mb-4", children: "Stay Connected" }), _jsxs("form", { onSubmit: async (e) => {
+                                                e.preventDefault();
+                                                const form = e.target;
+                                                const emailInput = form.querySelector('input[type="email"]');
+                                                if (emailInput && emailInput.value) {
+                                                    // Simulate newsletter subscription
+                                                    await new Promise(resolve => setTimeout(resolve, 500));
+                                                    addToast('Thank you for subscribing!', 'success');
+                                                    emailInput.value = '';
+                                                }
+                                            }, className: "flex flex-col gap-3", children: [_jsx("input", { type: "email", placeholder: "Enter email for deals", required: true, className: "rounded border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:border-gray-500 transition-colors bg-white" }), _jsx(Button, { type: "submit", size: "sm", className: "bg-gray-900 hover:bg-gray-800 text-white w-full font-normal", children: "Subscribe" })] })] })] }), _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 { ProductsPage } from './pages/ProductsPage';
+export { ProductDetailPage } from './pages/ProductDetailPage';
+export { CategoryPage } from './pages/CategoryPage';
+export { CategoriesPage } from './pages/CategoriesPage';
+export { ElectronicsGridCategoriesPage } from './pages/ElectronicsGridCategoriesPage';
+export { AboutPage } from './pages/AboutPage';
+export { ContactPage } from './pages/ContactPage';
+export { HelpCenterPage } from './pages/HelpCenterPage';
+export { PrivacyPolicyPage } from './pages/PrivacyPolicyPage';
+export { ShippingReturnsPage } from './pages/ShippingReturnsPage';
+export { TermsPage } from './pages/TermsPage';
+export { TrackOrderPage } 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,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,EAAE,6BAA6B,EAAE,MAAM,uCAAuC,CAAC;AACtF,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC9C,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAClE,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC9C,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC"}

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

@@ -0,0 +1,15 @@
+// Electronics-grid layout exports
+export { ElectronicsHomePageGrid } from './components/ElectronicsHomePageGrid';
+export { ElectronicsGridProductCard } from './components/ElectronicsGridProductCard';
+export { ProductsPage } from './pages/ProductsPage';
+export { ProductDetailPage } from './pages/ProductDetailPage';
+export { CategoryPage } from './pages/CategoryPage';
+export { CategoriesPage } from './pages/CategoriesPage';
+export { ElectronicsGridCategoriesPage } from './pages/ElectronicsGridCategoriesPage';
+export { AboutPage } from './pages/AboutPage';
+export { ContactPage } from './pages/ContactPage';
+export { HelpCenterPage } from './pages/HelpCenterPage';
+export { PrivacyPolicyPage } from './pages/PrivacyPolicyPage';
+export { ShippingReturnsPage } from './pages/ShippingReturnsPage';
+export { TermsPage } from './pages/TermsPage';
+export { TrackOrderPage } from './pages/TrackOrderPage';

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 AboutPage({ storeConfig }: 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;AAMhD,UAAU,cAAc;IACtB,WAAW,EAAE,WAAW,CAAC;CAC1B;AAED,wBAAgB,SAAS,CAAC,EAAE,WAAW,EAAE,EAAE,cAAc,2CAsOxD"}

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

@@ -0,0 +1,45 @@
+'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';
+import { DotPattern } from '../../../components/ui/background-patterns';
+import Image from 'next/image';
+export function AboutPage({ storeConfig }) {
+    const primaryColor = storeConfig.branding.primaryColor;
+    const secondaryColor = storeConfig.branding.secondaryColor || primaryColor;
+    const aboutConfig = storeConfig.layoutConfig?.pages?.about;
+    // Electronics-grid-specific hero image
+    const heroImage = aboutConfig?.heroImage || 'https://images.unsplash.com/photo-1498049381960-da565139a979?q=80&w=2071&auto=format&fit=crop';
+    const pageTitle = aboutConfig?.title || "Crafting Experiences, Delivering Joy.";
+    const pageContent = aboutConfig?.content || storeConfig.description;
+    const missionStatement = aboutConfig?.missionStatement;
+    const galleryImages = aboutConfig?.gallerySection;
+    const values = [
+        {
+            icon: Award,
+            title: "Quality First",
+            description: "We never compromise on the quality of our products and services."
+        },
+        {
+            icon: Users,
+            title: "Customer Focused",
+            description: "Your satisfaction is our top priority. We're here to help."
+        },
+        {
+            icon: Heart,
+            title: "Passion",
+            description: "We love what we do and it shows in every detail of our work."
+        },
+        {
+            icon: Leaf,
+            title: "Sustainability",
+            description: "Committed to eco-friendly practices and responsible sourcing."
+        }
+    ];
+    return (_jsxs("div", { className: "min-h-screen bg-white pb-20 overflow-hidden", children: [_jsxs("section", { className: "relative h-[60vh] min-h-[500px] w-full overflow-hidden", children: [_jsxs("div", { className: "absolute inset-0", 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: [_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", children: pageTitle }), _jsx("p", { className: "text-xl md:text-2xl text-gray-200 max-w-2xl leading-relaxed font-light", children: missionStatement || storeConfig.description })] }) }) })] }), _jsxs("section", { 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", 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", { 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: "Happy Customers", value: "10k+" },
+                                { label: "Products", value: storeConfig.products?.length ? `${storeConfig.products.length * 10}+` : "50+" },
+                                { label: "Years Active", value: "5+" },
+                                { label: "Team Members", value: "25+" }
+                            ].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", { 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: ["123 Store Street", _jsx("br", {}), "Commerce City, ST 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: ["hello@", storeConfig.slug, ".com", _jsx("br", {}), "support@", storeConfig.slug, ".com"] }), _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" }), _jsxs("p", { className: "text-gray-600 leading-relaxed", 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 CategoriesPage({ 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,cAAc,CAAC,EAAE,WAAW,EAAE,EAAE,mBAAmB,2CAElE"}

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 '../../../layouts/electronics-grid/pages/ElectronicsGridCategoriesPage';
+export function CategoriesPage({ 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 CategoryPage({ storeConfig, 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;AAc5E,UAAU,iBAAiB;IACzB,WAAW,EAAE,WAAW,CAAC;IACzB,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,wBAAgB,YAAY,CAAC,EAAE,WAAW,EAAE,YAAY,EAAE,EAAE,iBAAiB,2CA+N5E"}

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

@@ -0,0 +1,67 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '../../../components/ui/button';
+import { ImageWithFallback } from '../../../components/ui/image-with-fallback';
+import { useStore } from '../../../lib/store-context';
+import { ArrowLeft, Filter, Clock, Star, ArrowRight } from 'lucide-react';
+import Link from 'next/link';
+import { useToast } from '../../../components/ui/toast';
+import { useAnalytics } from '../../../hooks/use-analytics';
+import { useEffect } from 'react';
+import { ProductCard } from '../../../components/ui/product-card';
+import { getLayoutText, getTextContent } from '../../../lib/utils/asset-helpers';
+import { formatCurrency, filterActiveProducts, filterActiveServices } from '../../../lib/utils';
+import Image from 'next/image';
+export function CategoryPage({ storeConfig, categorySlug }) {
+    const categories = storeConfig.categories || [];
+    const category = categories.find(c => c.slug === categorySlug);
+    const products = filterActiveProducts(storeConfig.products?.filter(p => p.categoryId === category?.id) || []);
+    const services = filterActiveServices(storeConfig.services?.filter(s => s.categoryId === category?.id) || []);
+    const { addToCart } = useStore();
+    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]);
+    // Determine if this is a service-based store
+    const isServiceStore = storeConfig.type === 'booking' ||
+        storeConfig.layout === 'booking' ||
+        storeConfig.layout === 'booking-agenda' ||
+        (storeConfig.services && storeConfig.services.length > 0);
+    // Show services if it's a service store, or if there are services for this category
+    const shouldShowServices = isServiceStore || services.length > 0;
+    const shouldShowProducts = !isServiceStore || products.length > 0;
+    const hasItems = (shouldShowServices && services.length > 0) || (shouldShowProducts && 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 ${bgColor} ${textColor} 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 ${isDarkTheme ? 'bg-black/60' : '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 }), category.description && (_jsx("p", { className: "text-lg md:text-xl max-w-2xl opacity-90 font-light", children: 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 ${isDarkTheme ? 'text-gray-400 hover:text-white' : '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: `${isDarkTheme ? 'border-white/20 text-white hover:bg-white/10' : '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: (() => {
+                                    const itemType = isServiceStore ? 'services' : 'products';
+                                    const defaultMessage = isServiceStore
+                                        ? 'No services found in this category.'
+                                        : 'No products found in this category.';
+                                    // Try to get from layout config, fallback to default
+                                    return getLayoutText(storeConfig, `sections.categories.emptyState.${itemType}`, getTextContent(storeConfig, `category_empty_${itemType}`, defaultMessage));
+                                })() }), _jsx(Button, { className: "mt-4", onClick: () => window.history.back(), children: "Go Back" })] })) : (_jsxs("div", { className: "space-y-12", children: [shouldShowServices && services.length > 0 && (_jsxs("div", { children: [_jsx("h2", { className: "text-2xl font-bold mb-6", children: isServiceStore ? 'Services' : 'Services in this Category' }), _jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8", children: services.map((service) => (_jsxs("div", { className: "group flex flex-col h-full", children: [_jsxs(Link, { href: `/${storeConfig.slug}/book?service=${service.slug}`, className: "block relative aspect-[4/3] rounded-2xl overflow-hidden bg-gray-100 mb-4 shadow-sm group-hover:shadow-xl transition-all duration-500", children: [_jsx(Image, { src: service.image || 'https://images.unsplash.com/photo-1629909613654-28e377c37b09?w=800&auto=format&fit=crop&q=60', alt: service.name, fill: true, className: "w-full h-full object-cover transition-transform duration-700 group-hover:scale-105", unoptimized: true }), _jsx("div", { className: "absolute bottom-4 left-4 bg-white/95 backdrop-blur px-4 py-2 rounded-full text-sm font-bold shadow-sm text-gray-900", children: formatCurrency(service.price, service.currency || storeConfig.settings?.currency || 'USD') }), _jsx("div", { className: "absolute inset-0 bg-black/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center", children: _jsx(Button, { className: "rounded-full bg-white text-black hover:bg-gray-100 transform translate-y-4 group-hover:translate-y-0 transition-all duration-300 shadow-lg font-bold px-8", children: "Book Now" }) })] }), _jsxs("div", { className: "flex flex-col flex-1", children: [_jsx(Link, { href: `/${storeConfig.slug}/book?service=${service.slug}`, children: _jsx("h3", { className: "text-xl font-bold text-gray-900 mb-2 group-hover:text-gray-600 transition-colors", children: service.name }) }), _jsx("p", { className: "text-gray-500 mb-4 line-clamp-2 leading-relaxed text-sm flex-1", children: service.description }), _jsxs("div", { className: "flex items-center justify-between pt-4 border-t border-gray-100 text-sm font-medium text-gray-500", children: [_jsxs("div", { className: "flex items-center gap-4", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Clock, { className: "w-4 h-4 text-gray-400" }), service.duration, " mins"] }), service.provider && service.provider.rating && (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Star, { className: "w-4 h-4 fill-gray-200 text-gray-200" }), service.provider.rating] }))] }), _jsxs(Link, { href: `/${storeConfig.slug}/book?service=${service.slug}`, className: "flex items-center gap-2 text-black font-bold group/link", children: ["Book ", _jsx(ArrowRight, { className: "w-4 h-4 transition-transform group-hover/link:translate-x-1" })] })] })] })] }, service.id))) })] })), shouldShowProducts && products.length > 0 && (_jsxs("div", { children: [shouldShowServices && services.length > 0 && (_jsx("h2", { className: "text-2xl font-bold mb-6", children: "Products in this Category" })), _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 ContactPage({ storeConfig }: 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;AAKhD,UAAU,gBAAgB;IACxB,WAAW,EAAE,WAAW,CAAC;CAC1B;AAED,wBAAgB,WAAW,CAAC,EAAE,WAAW,EAAE,EAAE,gBAAgB,2CA6P5D"}

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

@@ -0,0 +1,20 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Button } from '../../../components/ui/button';
+import { Mail, Phone, MapPin, Clock, Send, MessageSquare, CheckCircle } from 'lucide-react';
+import Image from 'next/image';
+export function ContactPage({ storeConfig }) {
+    // We use CSS variables for theming to inherit from parent layout
+    // const primaryColor = storeConfig.branding.primaryColor;
+    // const secondaryColor = storeConfig.branding.secondaryColor || primaryColor;
+    const [formState, setFormState] = useState('idle');
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        setFormState('submitting');
+        // Simulate API call
+        await new Promise(resolve => setTimeout(resolve, 1500));
+        setFormState('success');
+    };
+    return (_jsxs("div", { className: "min-h-screen bg-white pb-20", children: [_jsxs("section", { className: "relative bg-gray-900 text-white py-20 overflow-hidden", children: [_jsxs("div", { className: "absolute inset-0 opacity-20", children: [_jsx(Image, { src: "https://images.unsplash.com/photo-1596524430615-b46475ddff6e?q=80&w=2070&auto=format&fit=crop", 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", children: "Get in Touch" }), _jsx("p", { className: "text-xl text-gray-300 max-w-2xl mx-auto font-light", children: "We'd love to hear from you. Here's how you can reach us." })] })] }), _jsx("div", { 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: "+1 (555) 123-4567" }), _jsx("p", { className: "text-white/80", children: "+1 (555) 987-6543" })] })] }), _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" }), _jsxs("p", { className: "text-white/80", children: ["hello@", storeConfig.slug, ".com"] }), _jsxs("p", { className: "text-white/80", children: ["support@", 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: ["123 Commerce Blvd,", _jsx("br", {}), "Suite 100,", _jsx("br", {}), "Business City, ST 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: "Mon - Fri: 9am - 6pm" }), _jsx("p", { className: "text-white/80", children: "Sat: 10am - 4pm" })] })] })] }), _jsx("div", { className: "mt-12 relative z-10", children: _jsx("div", { className: "flex gap-4", children: [1, 2, 3, 4].map((i) => (_jsx("div", { className: "w-8 h-8 rounded-full bg-white/20 hover:bg-white/30 cursor-pointer transition-colors" }, i))) }) })] }), _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: [_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", { 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 }: 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;AAOhD,UAAU,kCAAkC;IAC1C,WAAW,EAAE,WAAW,CAAC;CAC1B;AAED,wBAAgB,6BAA6B,CAAC,EAAE,WAAW,EAAE,EAAE,kCAAkC,2CAsGhG"}

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

@@ -0,0 +1,15 @@
+'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';
+import { motion } from 'framer-motion';
+import { ArrowRight, Layers } from 'lucide-react';
+import { Breadcrumbs } from '../../../components/ui/breadcrumbs';
+export function ElectronicsGridCategoriesPage({ storeConfig }) {
+    const categories = storeConfig.categories || [];
+    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 }), category.description && (_jsx("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", children: category.description })), _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 HelpCenterPage({ 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,cAAc,CAAC,EAAE,WAAW,EAAE,EAAE,mBAAmB,2CA+IlE"}

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

@@ -0,0 +1,55 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Search, ChevronDown, ChevronUp, Mail, Phone, MessageCircle } from 'lucide-react';
+import { useState } from 'react';
+import { Button } from '../../../components/ui/button';
+export function HelpCenterPage({ storeConfig }) {
+    const primaryColor = storeConfig.branding.primaryColor;
+    const faqConfig = storeConfig.layoutConfig?.pages?.faq;
+    // Convert flat list of FAQs from config to categorized structure if needed,
+    // or just use a default category if the structure doesn't match perfectly.
+    // For simplicity, if config items exist, we'll put them in a "General Questions" category.
+    const faqs = faqConfig?.items ? [
+        {
+            category: "Frequently Asked Questions",
+            questions: faqConfig.items.map(item => ({ q: item.question, a: item.answer }))
+        }
+    ] : [
+        {
+            category: "Ordering & Payment",
+            questions: [
+                { q: "What payment methods do you accept?", a: "We accept all major credit cards (Visa, Mastercard, American Express), PayPal, and various local payment methods depending on your region." },
+                { q: "Can I modify my order after placing it?", a: "Orders can be modified within 30 minutes of placement. Please contact our support team immediately if you need to make changes." },
+                { q: "How do I use a promo code?", a: "You can enter your promo code at checkout in the designated box. The discount will be applied to your total immediately." }
+            ]
+        },
+        {
+            category: "Shipping & Delivery",
+            questions: [
+                { q: "Do you ship internationally?", a: "Yes, we ship to most countries worldwide. Shipping costs and delivery times vary by location." },
+                { q: "How long will my order take to arrive?", a: "Standard shipping typically takes 3-5 business days domestically. Express shipping options are available at checkout." },
+                { q: "How can I track my order?", a: "Once your order ships, you'll receive a confirmation email with a tracking number and link to track your package." }
+            ]
+        },
+        {
+            category: "Returns & Refunds",
+            questions: [
+                { q: "What is your return policy?", a: "We offer a 30-day return policy for unused items in original packaging. Some exclusions apply to final sale items." },
+                { q: "How long do refunds take to process?", a: "Refunds are typically processed within 5-7 business days after we receive your return." }
+            ]
+        }
+    ];
+    const [openIndex, setOpenIndex] = useState(null);
+    const toggleAccordion = (id) => {
+        setOpenIndex(openIndex === id ? null : id);
+    };
+    return (_jsxs("div", { className: "min-h-screen bg-gray-50 pb-20", children: [_jsx("div", { className: "bg-white border-b", children: _jsxs("div", { className: "container mx-auto px-4 py-16 sm:py-24 text-center max-w-3xl", children: [_jsx("h1", { className: "text-4xl font-bold tracking-tight text-gray-900 mb-6", children: faqConfig?.title || "How can we help you?" }), _jsxs("div", { className: "relative max-w-xl mx-auto", children: [_jsx(Search, { className: "absolute left-4 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-400" }), _jsx("input", { type: "text", placeholder: "Search for answers...", className: "w-full pl-12 pr-4 py-4 rounded-xl border border-gray-200 shadow-sm focus:outline-none focus:ring-2 focus:border-transparent text-lg", style: { '--tw-ring-color': primaryColor } })] })] }) }), _jsxs("div", { className: "container mx-auto px-4 py-12 max-w-4xl", children: [_jsx("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-6 mb-16", children: [
+                            { title: "Track Order", icon: MessageCircle, desc: "Check your order status" },
+                            { title: "Shipping Info", icon: Mail, desc: "Delivery times & costs" },
+                            { title: "Returns", icon: Phone, desc: "Start a return or exchange" }
+                        ].map((item, i) => (_jsxs("div", { className: "bg-white p-6 rounded-xl border border-gray-100 shadow-sm hover:shadow-md transition-shadow cursor-pointer", children: [_jsx(item.icon, { className: "h-8 w-8 mb-4", style: { color: primaryColor } }), _jsx("h3", { className: "font-semibold text-lg text-gray-900 mb-2", children: item.title }), _jsx("p", { className: "text-gray-500", children: item.desc })] }, i))) }), _jsx("div", { className: "space-y-12", children: faqs.map((section, sectionIdx) => (_jsxs("div", { children: [_jsx("h2", { className: "text-2xl font-bold text-gray-900 mb-6", children: section.category }), _jsx("div", { className: "space-y-4", children: section.questions.map((faq, faqIdx) => {
+                                        const id = `${sectionIdx}-${faqIdx}`;
+                                        const isOpen = openIndex === id;
+                                        return (_jsxs("div", { className: "bg-white border border-gray-200 rounded-lg overflow-hidden transition-all duration-200", children: [_jsxs("button", { onClick: () => toggleAccordion(id), className: "w-full flex items-center justify-between p-5 text-left bg-white hover:bg-gray-50 transition-colors", children: [_jsx("span", { className: "font-medium text-gray-900", children: faq.q }), isOpen ? (_jsx(ChevronUp, { className: "h-5 w-5 text-gray-500" })) : (_jsx(ChevronDown, { className: "h-5 w-5 text-gray-500" }))] }), _jsx("div", { className: `overflow-hidden transition-all duration-300 ease-in-out ${isOpen ? 'max-h-48 opacity-100' : 'max-h-0 opacity-0'}`, children: _jsx("div", { className: "p-5 pt-0 text-gray-600 border-t border-gray-100 bg-gray-50/50", children: faq.a }) })] }, faqIdx));
+                                    }) })] }, sectionIdx))) }), _jsxs("div", { className: "mt-20 bg-white rounded-2xl p-8 md:p-12 border border-gray-100 shadow-lg text-center", children: [_jsx("h2", { className: "text-2xl font-bold text-gray-900 mb-4", children: "Still need help?" }), _jsx("p", { className: "text-gray-500 mb-8 max-w-lg mx-auto", children: "Our support team is available Monday through Friday, 9am to 6pm EST. We usually respond within 24 hours." }), _jsxs("div", { className: "flex flex-col sm:flex-row gap-4 justify-center", children: [_jsx(Button, { className: "px-8 py-6 text-base", style: { backgroundColor: primaryColor }, children: "Contact Support" }), _jsx(Button, { variant: "outline", className: "px-8 py-6 text-base", children: "Email Us" })] })] })] })] }));
+}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"PrivacyPolicyPage.d.ts","sourceRoot":"","sources":["../../../../src/layouts/electronics-grid/pages/PrivacyPolicyPage.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAIhD,UAAU,sBAAsB;IAC9B,WAAW,EAAE,WAAW,CAAC;CAC1B;AAED,wBAAgB,iBAAiB,CAAC,EAAE,WAAW,EAAE,EAAE,sBAAsB,2CA2GxE"}

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

@@ -0,0 +1,8 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ShieldCheck, ArrowLeft } from 'lucide-react';
+import Link from 'next/link';
+export function PrivacyPolicyPage({ storeConfig }) {
+    const primaryColor = storeConfig.branding.primaryColor;
+    return (_jsxs("div", { className: "min-h-screen bg-gray-50 pb-20", children: [_jsx("div", { className: "bg-white border-b", children: _jsxs("div", { className: "container mx-auto px-4 py-8", children: [_jsxs(Link, { href: `/${storeConfig.slug}`, className: "inline-flex items-center gap-2 text-gray-500 hover:text-gray-900 transition-colors mb-6", children: [_jsx(ArrowLeft, { className: "w-4 h-4" }), "Back to Home"] }), _jsxs("div", { className: "flex items-center gap-4", children: [_jsx("div", { className: "w-12 h-12 rounded-xl flex items-center justify-center", style: { backgroundColor: `${primaryColor}15` }, children: _jsx(ShieldCheck, { className: "w-6 h-6", style: { color: primaryColor } }) }), _jsx("h1", { className: "text-3xl font-bold text-gray-900", children: "Privacy Policy" })] })] }) }), _jsx("div", { className: "container mx-auto px-4 py-12 max-w-4xl", children: _jsxs("div", { className: "bg-white rounded-2xl p-8 md:p-12 shadow-sm border border-gray-100 prose prose-lg max-w-none", children: [_jsxs("p", { className: "text-gray-500 lead", children: ["Last updated: ", new Date().toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' })] }), _jsxs("p", { children: ["At ", storeConfig.name, ", accessible from ", typeof window !== 'undefined' ? window.location.origin : 'our website', ", one of our main priorities is the privacy of our visitors. This Privacy Policy document contains types of information that is collected and recorded by ", storeConfig.name, " and how we use it."] }), _jsx("p", { children: "If you have additional questions or require more information about our Privacy Policy, do not hesitate to contact us." }), _jsx("h3", { children: "Log Files" }), _jsxs("p", { children: [storeConfig.name, " follows a standard procedure of using log files. These files log visitors when they visit websites. All hosting companies do this and a part of hosting services' analytics. The information collected by log files include internet protocol (IP) addresses, browser type, Internet Service Provider (ISP), date and time stamp, referring/exit pages, and possibly the number of clicks. These are not linked to any information that is personally identifiable. The purpose of the information is for analyzing trends, administering the site, tracking users' movement on the website, and gathering demographic information."] }), _jsx("h3", { children: "Cookies and Web Beacons" }), _jsxs("p", { children: ["Like any other website, ", storeConfig.name, " uses \"cookies\". These cookies are used to store information including visitors' preferences, and the pages on the website that the visitor accessed or visited. The information is used to optimize the users' experience by customizing our web page content based on visitors' browser type and/or other information."] }), _jsx("h3", { children: "Privacy Policies" }), _jsxs("p", { children: ["You may consult this list to find the Privacy Policy for each of the advertising partners of ", storeConfig.name, "."] }), _jsxs("p", { children: ["Third-party ad servers or ad networks uses technologies like cookies, JavaScript, or Web Beacons that are used in their respective advertisements and links that appear on ", storeConfig.name, ", which are sent directly to users' browser. They automatically receive your IP address when this occurs. These technologies are used to measure the effectiveness of their advertising campaigns and/or to personalize the advertising content that you see on websites that you visit."] }), _jsxs("p", { children: ["Note that ", storeConfig.name, " has no access to or control over these cookies that are used by third-party advertisers."] }), _jsx("h3", { children: "Third Party Privacy Policies" }), _jsxs("p", { children: [storeConfig.name, "'s Privacy Policy does not apply to other advertisers or websites. Thus, we are advising you to consult the respective Privacy Policies of these third-party ad servers for more detailed information. It may include their practices and instructions about how to opt-out of certain options."] }), _jsx("p", { children: "You can choose to disable cookies through your individual browser options. To know more detailed information about cookie management with specific web browsers, it can be found at the browsers' respective websites." }), _jsx("h3", { children: "Children's Information" }), _jsx("p", { children: "Another part of our priority is adding protection for children while using the internet. We encourage parents and guardians to observe, participate in, and/or monitor and guide their online activity." }), _jsxs("p", { children: [storeConfig.name, " does not knowingly collect any Personal Identifiable Information from children under the age of 13. If you think that your child provided this kind of information on our website, we strongly encourage you to contact us immediately and we will do our best efforts to promptly remove such information from our records."] }), _jsx("h3", { children: "Online Privacy Policy Only" }), _jsxs("p", { children: ["This Privacy Policy applies only to our online activities and is valid for visitors to our website with regards to the information that they shared and/or collect in ", storeConfig.name, ". This policy is not applicable to any information collected offline or via channels other than this website."] }), _jsx("h3", { children: "Consent" }), _jsx("p", { children: "By using our website, you hereby consent to our Privacy Policy and agree to its Terms and Conditions." })] }) })] }));
+}

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

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