storefront-layouts-staging 1.0.0-staging.0

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

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

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

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

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

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

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

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

package/dist/layouts/clothing/index.d.ts

@@ -0,0 +1,8 @@
+export { ClothingHomePage } from './components/ClothingHomePage';
+export { ClothingProductsPage } from './pages/ProductsPage';
+export { ClothingProductDetailPage } from './pages/ProductDetailPage';
+export { ClothingCategoryPage } from './pages/CategoryPage';
+export { ClothingCategoriesPage } from './pages/CategoriesPage';
+export { ClothingAboutPage } from './pages/AboutPage';
+export { ClothingContactPage } from './pages/ContactPage';
+//# sourceMappingURL=index.d.ts.map

package/dist/layouts/clothing/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/layouts/clothing/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACjE,OAAO,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAC5D,OAAO,EAAE,yBAAyB,EAAE,MAAM,2BAA2B,CAAC;AACtE,OAAO,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAC5D,OAAO,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAC;AAChE,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/layouts/clothing/index.js

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

package/dist/layouts/clothing/pages/AboutPage.d.ts

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

package/dist/layouts/clothing/pages/AboutPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AboutPage.d.ts","sourceRoot":"","sources":["../../../../src/layouts/clothing/pages/AboutPage.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAavD,UAAU,cAAc;IACtB,WAAW,EAAE,WAAW,CAAC;CAC1B;AAED,wBAAgB,iBAAiB,CAAC,EAAE,WAAW,EAAE,aAAa,EAAE,EAAE,cAAc,2CAgQ/E"}

package/dist/layouts/clothing/pages/AboutPage.js

@@ -0,0 +1,55 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Heart } 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 { DynamicIcon } from '../../../components/ui/dynamic-icon.js';
+import Image from 'next/image';
+import { getPayazaSectionInlineStyle } from '../../../lib/payaza-section-styles.js';
+import { useClothingPayaza } from '../payaza-bindings.js';
+import { showLayoutDecorativeBadges } from '../../../lib/layout-badges.js';
+import { compactArrayItems, readItemIconName } from '../../../lib/compact-array-items.js';
+import { ArrowRight } from 'lucide-react';
+export function ClothingAboutPage({ storeConfig: initialConfig }) {
+    const { store } = useStore();
+    const storeConfig = store || initialConfig;
+    const primaryColor = storeConfig.branding.primaryColor;
+    const secondaryColor = storeConfig.branding.secondaryColor || primaryColor;
+    const layoutConfig = storeConfig.layoutConfig;
+    const heroConfig = layoutConfig?.pages?.about?.hero || layoutConfig?.sections?.hero;
+    const storyConfig = layoutConfig?.pages?.about?.story || layoutConfig?.sections?.story;
+    const statsConfig = layoutConfig?.pages?.about?.stats || layoutConfig?.sections?.stats;
+    const contactInfoConfig = layoutConfig?.pages?.about?.['contact-info'] || layoutConfig?.sections?.['contact-info'];
+    const valuesConfig = layoutConfig?.pages?.about?.values || layoutConfig?.sections?.values;
+    const { section, edit, image, inline, icon } = useClothingPayaza(storeConfig, 'about');
+    const heroImage = heroConfig?.heroImage || 'https://images.unsplash.com/photo-1558769132-cb1aea458c5e?q=80&w=2074&auto=format&fit=crop';
+    const pageTitle = heroConfig?.title || "Crafting Experiences, Delivering Joy.";
+    const missionStatement = heroConfig?.missionStatement || storeConfig.description;
+    const pageContent = storyConfig?.content || storeConfig.description;
+    const gallerySection = storyConfig?.gallerySection || [];
+    const storyImage = storyConfig?.storyImage || 'https://images.unsplash.com/photo-1522202176988-66273c2fd55f?q=80&w=2071&auto=format&fit=crop';
+    const teamTitle = storyConfig?.teamTitle || 'The Dream Team';
+    const teamSubtitle = storyConfig?.teamSubtitle || 'Working together to serve you better';
+    const storySectionLabel = storyConfig?.sectionLabel || 'Who We Are';
+    const storyTitle = storyConfig?.title || 'Our Journey';
+    const valuesItems = compactArrayItems(valuesConfig?.items || [
+        { icon: 'Award', title: "Premium Fabrics", description: "We use only the highest quality materials for our collections." },
+        { icon: 'Users', title: "Style for All", description: "Incisive designs that celebrate every individual's unique style." },
+        { icon: 'Heart', title: "Ethical Fashion", description: "We believe in fair trade and ethical manufacturing processes." },
+        { icon: 'Leaf', title: "Sustainable Style", description: "Eco-friendly collections that look good and do good for the planet." },
+    ]);
+    const statsItems = statsConfig?.items || [
+        { label: "Style Lovers", value: "20k+" },
+        { label: "New Arrivals", value: storeConfig.products?.length ? `${storeConfig.products.length * 5}+` : "100+" },
+        { label: "Global Shipping", value: "50+" },
+        { label: "Design Experts", value: "15+" }
+    ];
+    const visitTitle = contactInfoConfig?.visitTitle || 'Visit Us';
+    const visitIcon = contactInfoConfig?.visitIcon || 'MapPin';
+    const emailTitle = contactInfoConfig?.emailTitle || 'Email Us';
+    const emailIcon = contactInfoConfig?.emailIcon || 'Mail';
+    const hoursTitle = contactInfoConfig?.hoursTitle || 'Opening Hours';
+    const hoursIcon = contactInfoConfig?.hoursIcon || 'Clock';
+    return (_jsxs("div", { className: "min-h-screen bg-white pb-20 overflow-hidden", children: [heroConfig?.show !== false && (_jsxs("section", { ...section('hero'), style: getPayazaSectionInlineStyle(storeConfig, 'about', 'hero'), className: "relative h-[60vh] min-h-[500px] w-full overflow-hidden", children: [_jsxs("div", { className: "absolute inset-0", ...image('hero', ['heroImage']), 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", ...edit('hero', ['title']), children: pageTitle }), _jsx("p", { className: "text-xl md:text-2xl text-gray-200 max-w-2xl leading-relaxed font-light", ...edit('hero', ['missionStatement']), children: missionStatement })] }) }) })] })), storyConfig?.show !== false && (_jsxs("section", { ...section('story'), style: getPayazaSectionInlineStyle(storeConfig, 'about', 'story'), 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: [gallerySection && gallerySection.length > 0 ? (_jsx("div", { className: "grid grid-cols-2 gap-4", children: gallerySection.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", ...image('story', ['storyImage']), children: [_jsx(Image, { src: storyImage, 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", ...inline('story', ['teamTitle']), children: teamTitle }), _jsx("p", { className: "text-white/80 text-sm", ...inline('story', ['teamSubtitle']), children: teamSubtitle })] })] })), _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 }, ...inline('story', ['sectionLabel']), children: storySectionLabel }), _jsx("h2", { className: "text-4xl md:text-5xl font-black text-gray-900 mb-6 tracking-tight", ...inline('story', ['title']), children: storyTitle }), _jsxs("div", { className: "prose prose-lg text-gray-600 leading-relaxed space-y-6", ...edit('story', ['content']), 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." })] }))] })] }), valuesConfig?.show !== false && valuesItems.length > 0 && (_jsx("div", { ...section('values'), style: getPayazaSectionInlineStyle(storeConfig, 'about', 'values'), className: "grid grid-cols-1 sm:grid-cols-2 gap-8", children: valuesItems.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` }, ...icon('values', ['items', String(idx), 'icon']), children: _jsx(DynamicIcon, { name: readItemIconName(item, 'Award'), 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", ...inline('values', ['items', String(idx), 'title']), children: item.title }), _jsx("p", { className: "text-gray-600 text-sm leading-relaxed", ...inline('values', ['items', String(idx), 'description']), children: item.description })] })] }, idx))) }))] })] }) })] })), statsConfig?.show !== false && (_jsxs("section", { ...section('stats'), style: getPayazaSectionInlineStyle(storeConfig, 'about', 'stats'), 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: statsItems.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 }, ...inline('stats', ['items', String(idx), 'value']), children: stat.value }), _jsx("div", { className: "text-gray-600 font-bold uppercase tracking-widest text-xs md:text-sm", ...inline('stats', ['items', String(idx), 'label']), children: stat.label })] }, idx))) }) })] })), contactInfoConfig?.show !== false && (_jsx("section", { ...section('contact-info'), style: getPayazaSectionInlineStyle(storeConfig, 'about', 'contact-info'), 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", ...inline('contact-info', ['title']), children: contactInfoConfig?.title || "Get in Touch" }), _jsx("p", { className: "text-gray-500 max-w-xl mx-auto", ...inline('contact-info', ['description']), children: contactInfoConfig?.description || "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", ...icon('contact-info', ['visitIcon']), children: _jsx(DynamicIcon, { name: visitIcon, 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", ...inline('contact-info', ['visitTitle']), children: visitTitle }), _jsx("p", { className: "text-gray-600 leading-relaxed whitespace-pre-line", ...inline('contact-info', ['address']), children: contactInfoConfig?.address || "123 Store Street\nCommerce 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", ...icon('contact-info', ['emailIcon']), children: _jsx(DynamicIcon, { name: emailIcon, 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", ...inline('contact-info', ['emailTitle']), children: emailTitle }), _jsxs("div", { className: "text-gray-600 leading-relaxed mb-4", children: [_jsx("span", { className: "block", ...inline('contact-info', ['email']), children: contactInfoConfig?.email || `hello@${storeConfig.slug}.com` }), (contactInfoConfig?.emailSecondary || !contactInfoConfig?.email) && (_jsx("span", { className: "block", ...inline('contact-info', ['emailSecondary']), children: contactInfoConfig?.emailSecondary || `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", ...icon('contact-info', ['hoursIcon']), children: _jsx(DynamicIcon, { name: hoursIcon, 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", ...inline('contact-info', ['hoursTitle']), children: hoursTitle }), _jsx("p", { className: "text-gray-600 leading-relaxed whitespace-pre-line", ...inline('contact-info', ['hours']), children: contactInfoConfig?.hours || "Mon - Fri: 9am - 6pm\nSat - Sun: 10am - 4pm" })] })] })] }) }))] }));
+}

package/dist/layouts/clothing/pages/CategoriesPage.d.ts

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

package/dist/layouts/clothing/pages/CategoriesPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CategoriesPage.d.ts","sourceRoot":"","sources":["../../../../src/layouts/clothing/pages/CategoriesPage.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAUvD,UAAU,mBAAmB;IAC3B,WAAW,EAAE,WAAW,CAAC;CAC1B;AAED,wBAAgB,sBAAsB,CAAC,EAAE,WAAW,EAAE,aAAa,EAAE,EAAE,mBAAmB,2CAyGzF"}

package/dist/layouts/clothing/pages/CategoriesPage.js

@@ -0,0 +1,34 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Breadcrumbs } from '../../../components/ui/breadcrumbs.js';
+import { ImageWithFallback } from '../../../components/ui/image-with-fallback.js';
+import { useStore } from '../../../lib/store-context.js';
+import { useCatalogLoader } from '../../../hooks/use-catalog-loader.js';
+import { getPayazaSectionInlineStyle } from '../../../lib/payaza-section-styles.js';
+import { isEditorPreviewMode, resolveStoreCategoriesForDisplay } from '../../../lib/utils/index.js';
+import { useClothingPayaza } from '../payaza-bindings.js';
+import { CategoryMasonryGrid } from '../../../components/categories/category-masonry-grid.js';
+export function ClothingCategoriesPage({ 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 layoutConfig = storeConfig.layoutConfig;
+    const categoriesHeaderConfig = layoutConfig?.pages?.categories?.categoriesHeader || layoutConfig?.sections?.categoriesHeader;
+    const categoryGridConfig = layoutConfig?.pages?.categories?.categoryGrid || layoutConfig?.sections?.categoryGrid;
+    const { section, edit, image, inline } = useClothingPayaza(storeConfig, 'categories');
+    const headerBackgroundImage = typeof categoriesHeaderConfig?.backgroundImage === 'string' &&
+        categoriesHeaderConfig.backgroundImage.trim().length > 0
+        ? categoriesHeaderConfig.backgroundImage.trim()
+        : undefined;
+    const breadcrumbItems = [
+        { label: storeConfig.name, href: `/${storeConfig.slug}` },
+        { label: 'Categories', href: `/${storeConfig.slug}/categories` },
+    ];
+    return (_jsxs("div", { "data-content-ready": true, className: "min-h-screen bg-white text-slate-900 font-sans", children: [categoriesHeaderConfig?.show !== false && (_jsxs("div", { ...section('categoriesHeader'), style: getPayazaSectionInlineStyle(storeConfig, 'categories', 'categoriesHeader'), className: `relative overflow-hidden border-b border-gray-200 ${headerBackgroundImage ? 'bg-gray-900' : 'bg-gray-50'}`, children: [headerBackgroundImage && (_jsxs("div", { className: "absolute inset-0 z-0", ...image('categoriesHeader', ['backgroundImage']), children: [_jsx(ImageWithFallback, { src: headerBackgroundImage, alt: categoriesHeaderConfig?.title || 'Categories', className: "h-full w-full object-cover object-center", skeletonAspectRatio: "16/9" }), _jsx("div", { className: "absolute inset-0 bg-gradient-to-r from-black/70 via-black/45 to-black/60" })] })), _jsx("div", { className: `container relative z-10 mx-auto px-4 sm:px-6 lg:px-8 ${headerBackgroundImage ? 'min-h-[320px] py-16 lg:min-h-[380px] lg:py-20' : 'py-12 lg:py-16'}`, children: _jsxs("div", { className: "max-w-3xl animate-fade-in-up", children: [_jsx("div", { className: "mb-6", children: _jsx(Breadcrumbs, { items: breadcrumbItems, variant: headerBackgroundImage ? 'light' : 'default' }) }), _jsx("h1", { className: `mb-6 text-4xl font-bold tracking-tight lg:text-5xl ${headerBackgroundImage ? 'text-white' : 'text-gray-900'}`, ...edit('categoriesHeader', ['title']), children: categoriesHeaderConfig?.title || 'Shop by Category' }), _jsx("p", { className: `max-w-2xl text-lg leading-relaxed ${headerBackgroundImage ? 'text-white/90' : 'text-gray-600'}`, ...edit('categoriesHeader', ['description']), children: categoriesHeaderConfig?.description ||
+                                        'Explore our comprehensive collection of premium products across various departments. Dive into our curated selections designed to match your style and needs.' })] }) })] })), categoryGridConfig?.show !== false && (_jsx("div", { ...section('categoryGrid'), style: getPayazaSectionInlineStyle(storeConfig, 'categories', 'categoryGrid'), className: "container mx-auto px-4 sm:px-6 lg:px-8 py-16", children: categories.length === 0 ? (_jsxs("div", { className: "text-center py-20", children: [_jsx("h3", { className: "text-xl font-semibold text-gray-900 mb-2", children: "No categories available" }), _jsx("p", { className: "text-gray-500", children: "Categories will appear here once they are added to the store." })] })) : (_jsx(CategoryMasonryGrid, { categories: categories, mode: "page", columns: categoryGridConfig?.columns, showImages: categoryGridConfig?.showImages !== false, showDescriptions: categoryGridConfig?.showDescriptions !== false, getHref: (category) => `/${storeConfig.slug}/products?category=${category.slug}`, exploreLabel: "Explore Collection" })) }))] }));
+}

package/dist/layouts/clothing/pages/CategoryPage.d.ts

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

package/dist/layouts/clothing/pages/CategoryPage.d.ts.map

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