storefront-layouts 1.0.3 → 1.0.4

package/dist/layouts/food/components/FoodHomePage.js

@@ -1,29 +1,22 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Button } from '../../../components/ui/button.js';
-import { useStore } from '../../../lib/store-context.js';
-import { useToast } from '../../../components/ui/toast.js';
-import { Clock, Utensils, ChevronRight, Flame, ChefHat, ArrowRight, Calendar, Users, Mail, Phone, MessageSquare, CheckCircle, ChevronLeft, Plus } from 'lucide-react';
-import { DynamicIcon } from '../../../components/ui/dynamic-icon.js';
-import { encodePayazaFieldKey, payazaIconBindingProps } from '../../../preview/canvas/field-key.js';
+import { Button } from '../../../components/ui/button';
+import { useStore } from '../../../lib/store-context';
+import { useToast } from '../../../components/ui/toast';
+import { Clock, Star, Utensils, ChevronRight, Flame, ChefHat, Award, ArrowRight, Smartphone, Truck, Calendar, Users, Mail, Phone, MessageSquare, CheckCircle, ChevronLeft, Plus } from 'lucide-react';
 import Link from 'next/link';
 import Image from 'next/image';
 import { useState, useEffect } from 'react';
-import { formatCurrency, resolveMenuItemsForDisplay } from '../../../lib/utils/index.js';
-import { getLayoutText, getBannerImage, getTextContent, normalizeStoreImageUrl } from '../../../lib/utils/asset-helpers.js';
-import { shouldUseAPI } from '../../../lib/utils/demo-detection.js';
-import { usePreviewSlideSync } from '../../../hooks/usePreviewSlideSync.js';
-import { TestimonialCard } from '../../shared/components/TestimonialCard.js';
-import { showLayoutDecorativeBadges } from '../../../lib/layout-badges.js';
-import { getPayazaSectionInlineStyle } from '../../../lib/payaza-section-styles.js';
-import { resolveStoreLink } from '../../../lib/layout-route-utils.js';
+import { formatCurrency } from '../../../lib/utils';
+import { getLayoutText, getBannerImage, getTextContent, normalizeStoreImageUrl } from '../../../lib/utils/asset-helpers';
+import { toStoreHref } from '../../../lib/utils/url-helpers';
+import { shouldUseAPI } from '../../../lib/utils/demo-detection';
+import { TestimonialCard } from '../../shared/components/TestimonialCard';
 export function FoodHomePage({ storeConfig: initialConfig }) {
     const { store, addToCart } = useStore();
     const storeConfig = store || initialConfig;
     // In preview mode, use mock items if none are available
     const isPreview = (typeof window !== 'undefined' && window.__IS_PREVIEW__) || storeConfig.layoutConfig?.isPreview;
-    // Canvas edit helper — only active in preview mode (mirrors ClothingHomePage pattern)
-    const payaza = (sectionKey, segments) => isPreview ? encodePayazaFieldKey(sectionKey, segments) : undefined;
     const categories = (storeConfig.categories && storeConfig.categories.length > 0)
         ? storeConfig.categories
         : (isPreview ? [
@@ -32,9 +25,8 @@ export function FoodHomePage({ storeConfig: initialConfig }) {
             { id: 'cat3', name: 'Desserts', slug: 'desserts' },
             { id: 'cat4', name: 'Beverages', slug: 'beverages' }
         ] : []);
-    const resolvedMenuItems = resolveMenuItemsForDisplay(storeConfig.menuItems, storeConfig.products, isPreview);
-    const menuItems = resolvedMenuItems.length > 0
-        ? resolvedMenuItems
+    const menuItems = (storeConfig.menuItems && storeConfig.menuItems.length > 0)
+        ? storeConfig.menuItems
         : (isPreview ? [
             {
                 id: 'item1',
@@ -62,6 +54,7 @@ export function FoodHomePage({ storeConfig: initialConfig }) {
             },
         ] : []);
     const { addToast } = useToast();
+    const [newsletterEmail, setNewsletterEmail] = useState('');
     const handleAddToCart = (item) => {
         const product = {
             ...item,
@@ -77,6 +70,12 @@ export function FoodHomePage({ storeConfig: initialConfig }) {
         addToCart(product);
         addToast(`${item.name} added to order`, 'success');
     };
+    const handleSubscribe = () => {
+        if (newsletterEmail) {
+            addToast('Thank you for subscribing!', 'success');
+            setNewsletterEmail('');
+        }
+    };
     // Hero Slides Configuration - 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 layoutConfig = storeConfig.layoutConfig;
@@ -88,7 +87,7 @@ export function FoodHomePage({ storeConfig: initialConfig }) {
         console.log('[FoodHomePage] Sliders found:', layoutConfig?.sections?.hero?.sliders?.length || 0);
     }
     // Try new structure first (sections.hero.sliders)
-    let heroSlides = [{ image: 'https://images.unsplash.com/photo-1546069901-ba9599a7e63c?q=80&w=2000&auto=format&fit=crop', badge: undefined, title: 'Taste the', highlight: 'Extraordinary', description: 'Experience culinary excellence delivered straight to your doorstep.', primaryBtn: 'Order Now', primaryBtnLink: '/menu', secondaryBtn: 'View Menu', secondaryBtnLink: '/menu' }];
+    let heroSlides = [{ image: 'https://images.unsplash.com/photo-1546069901-ba9599a7e63c?q=80&w=2000&auto=format&fit=crop', badge: '#1 Food Delivery in Town', title: 'Taste the', highlight: 'Extraordinary', description: 'Experience culinary excellence delivered straight to your doorstep.', primaryBtn: 'Order Now', primaryBtnLink: toStoreHref(storeConfig.slug, undefined, '/menu'), secondaryBtn: 'View Menu', secondaryBtnLink: toStoreHref(storeConfig.slug, undefined, '/menu') }];
     if (layoutConfig?.sections?.hero?.sliders && Array.isArray(layoutConfig.sections.hero.sliders) && layoutConfig.sections.hero.sliders.length > 0) {
         if (process.env.NODE_ENV === 'development') {
             console.log('[FoodHomePage] Using sections.hero.sliders structure');
@@ -113,15 +112,15 @@ export function FoodHomePage({ storeConfig: initialConfig }) {
                 (layoutConfig?.hero?.showBadges !== false || layoutConfig?.sections?.hero?.showBadges === undefined);
             return {
                 image: normalizeStoreImageUrl(slider.image) || "https://images.unsplash.com/photo-1546069901-ba9599a7e63c?q=80&w=2000&auto=format&fit=crop",
-                badge: (showBadges && slider.badge && slider.badge.trim() !== '') ? slider.badge : undefined,
+                badge: (showBadges && slider.badge && slider.badge.trim() !== '') ? slider.badge : "#1 Food Delivery in Town",
                 title: slider.title || "Taste the Extraordinary",
                 highlight: slider.highlight || "", // Food layout specific
                 description: slider.description || `${storeConfig.description} Experience culinary excellence delivered straight to your doorstep.`,
                 // Only set button text if it's not empty - this allows button visibility logic to work
                 primaryBtn: primaryButtonText || getLayoutText(storeConfig, 'common.orderNow', "Order Now"),
-                primaryBtnLink: slider.primaryButton?.link || `/${storeConfig.slug}/menu`,
+                primaryBtnLink: toStoreHref(storeConfig.slug, slider.primaryButton?.link, '/menu'),
                 secondaryBtn: secondaryButtonText || undefined, // Don't provide fallback for secondary
-                secondaryBtnLink: slider.secondaryButton?.link || `/${storeConfig.slug}/menu`,
+                secondaryBtnLink: toStoreHref(storeConfig.slug, slider.secondaryButton?.link, '/menu'),
             };
         });
     }
@@ -140,14 +139,14 @@ export function FoodHomePage({ storeConfig: initialConfig }) {
                 (layoutConfig?.hero?.showBadges !== false || layoutConfig?.sections?.hero?.showBadges === undefined);
             return {
                 image: normalizeStoreImageUrl(slider.image) || "https://images.unsplash.com/photo-1546069901-ba9599a7e63c?q=80&w=2000&auto=format&fit=crop",
-                badge: (showBadges && slider.badge && slider.badge.trim() !== '') ? slider.badge : undefined,
+                badge: (showBadges && slider.badge && slider.badge.trim() !== '') ? slider.badge : "#1 Food Delivery in Town",
                 title: slider.title || "Taste the Extraordinary",
                 highlight: slider.highlight || "", // Food layout specific
                 description: slider.description || `${storeConfig.description} Experience culinary excellence delivered straight to your doorstep.`,
                 primaryBtn: primaryButtonText || getLayoutText(storeConfig, 'common.orderNow', "Order Now"),
-                primaryBtnLink: slider.primaryButton?.link || `/${storeConfig.slug}/menu`,
+                primaryBtnLink: toStoreHref(storeConfig.slug, slider.primaryButton?.link, '/menu'),
                 secondaryBtn: secondaryButtonText || undefined,
-                secondaryBtnLink: slider.secondaryButton?.link || `/${storeConfig.slug}/menu`,
+                secondaryBtnLink: toStoreHref(storeConfig.slug, slider.secondaryButton?.link, '/menu'),
             };
         });
     }
@@ -156,7 +155,7 @@ export function FoodHomePage({ storeConfig: initialConfig }) {
         heroSlides = [
             {
                 image: getBannerImage(storeConfig, 'hero_slide_1', "https://images.unsplash.com/photo-1546069901-ba9599a7e63c?q=80&w=2000&auto=format&fit=crop"),
-                badge: isRealStore && layoutConfig?.text?.hero?.slides?.[0]?.badge ? layoutConfig.text.hero.slides[0].badge : (showLayoutDecorativeBadges() ? getTextContent(storeConfig, 'hero_slide_1:badge', "#1 Food Delivery in Town") : undefined),
+                badge: isRealStore && layoutConfig?.text?.hero?.slides?.[0]?.badge ? layoutConfig.text.hero.slides[0].badge : getTextContent(storeConfig, 'hero_slide_1:badge', "#1 Food Delivery in Town"),
                 title: isRealStore && layoutConfig?.text?.hero?.slides?.[0]?.title ? layoutConfig.text.hero.slides[0].title : getTextContent(storeConfig, 'hero_slide_1:title', "Taste the"),
                 highlight: getTextContent(storeConfig, 'hero_slide_1:highlight', "Extraordinary"),
                 description: isRealStore && layoutConfig?.text?.hero?.slides?.[0]?.description ? layoutConfig.text.hero.slides[0].description : getTextContent(storeConfig, 'hero_slide_1:description', `${storeConfig.description} Experience culinary excellence delivered straight to your doorstep.`),
@@ -164,7 +163,7 @@ export function FoodHomePage({ storeConfig: initialConfig }) {
                 secondaryBtn: isRealStore && layoutConfig?.text?.hero?.slides?.[0]?.secondaryButton ? layoutConfig.text.hero.slides[0].secondaryButton : getLayoutText(storeConfig, 'common.viewMenu', "View Menu")
             },
             {
-                image: getBannerImage(storeConfig, 'hero_slide_2', "https://images.unsplash.com/photo-1556910103-1c02745aae4d?q=80&w=2000&auto=format&fit=crop"),
+                image: getBannerImage(storeConfig, 'hero_slide_2', "https://images.unsplash.com/photo-1556910103-1c02745a30bf?q=80&w=2000&auto=format&fit=crop"),
                 badge: isRealStore && layoutConfig?.text?.hero?.slides?.[1]?.badge ? layoutConfig.text.hero.slides[1].badge : getTextContent(storeConfig, 'hero_slide_2:badge', "Fresh & Authentic"),
                 title: isRealStore && layoutConfig?.text?.hero?.slides?.[1]?.title ? layoutConfig.text.hero.slides[1].title : getTextContent(storeConfig, 'hero_slide_2:title', "Ingredients of"),
                 highlight: getTextContent(storeConfig, 'hero_slide_2:highlight', "Quality"),
@@ -185,7 +184,6 @@ export function FoodHomePage({ storeConfig: initialConfig }) {
     }
     const [currentSlide, setCurrentSlide] = useState(0);
     const [isAutoPlaying, setIsAutoPlaying] = useState(true);
-    usePreviewSlideSync('hero', setCurrentSlide, () => setIsAutoPlaying(false));
     // Auto-play functionality
     useEffect(() => {
         if (!isAutoPlaying || heroSlides.length === 0)
@@ -312,27 +310,29 @@ export function FoodHomePage({ storeConfig: initialConfig }) {
     const handleInputChange = (field, value) => {
         setReservationData(prev => ({ ...prev, [field]: value }));
     };
-    return (_jsxs("div", { className: "min-h-screen bg-[#FAFAFA]", children: [(layoutConfig?.sections?.hero?.show ?? layoutConfig?.hero?.show) !== false && heroSlides.length > 0 && (_jsxs("section", { "data-section": "hero", "data-payaza-section-key": "hero", "data-payaza-page": "home", className: "relative h-[90vh] w-full overflow-hidden bg-black", style: getPayazaSectionInlineStyle(storeConfig, 'home', 'hero'), onMouseEnter: () => setIsAutoPlaying(false), onMouseLeave: () => setIsAutoPlaying(true), 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", "data-payaza-image": payaza('hero', ['sliders', String(index), 'image']), "data-payaza-section-key": "hero", children: [_jsx(Image, { src: slide.image, alt: slide.title, fill: true, className: `object-cover transition-transform duration-[10000ms] ease-linear ${index === currentSlide ? 'scale-110' : 'scale-100'}`, unoptimized: true }), _jsx("div", { className: "absolute inset-0 bg-gradient-to-r from-black/80 via-black/40 to-transparent" }), _jsx("div", { className: "absolute inset-0 bg-gradient-to-t from-black/60 via-transparent 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 space-y-8 transition-all duration-1000 transform ${index === currentSlide ? 'translate-y-0 opacity-100' : 'translate-y-10 opacity-0'}`, children: [showLayoutDecorativeBadges() && slide.badge && (_jsxs("div", { className: "inline-flex items-center gap-3 px-5 py-2.5 bg-orange-500 text-white rounded-full text-sm font-bold shadow-[0_0_20px_rgba(249,115,22,0.4)] backdrop-blur-md border border-orange-400/50 w-fit", "data-payaza-edit": payaza('hero', ['sliders', String(index), 'badge']), "data-payaza-section-key": "hero", children: [_jsx(Flame, { className: "h-4 w-4 fill-white animate-bounce" }), " ", slide.badge] })), _jsxs("h1", { className: "text-5xl sm:text-6xl lg:text-8xl font-black text-white tracking-tighter leading-[1.1] drop-shadow-2xl", "data-payaza-edit": payaza('hero', ['sliders', String(index), 'title']), "data-payaza-section-key": "hero", children: [slide.title, " ", _jsx("br", {}), _jsx("span", { className: "text-transparent bg-clip-text bg-gradient-to-r from-orange-400 via-yellow-400 to-orange-500", "data-payaza-edit": payaza('hero', ['sliders', String(index), 'highlight']), "data-payaza-section-key": "hero", children: slide.highlight })] }), _jsx("p", { className: "text-xl sm:text-2xl text-gray-200 max-w-xl font-medium leading-relaxed drop-shadow-lg", "data-payaza-edit": payaza('hero', ['sliders', String(index), 'description']), "data-payaza-section-key": "hero", children: slide.description }), _jsxs("div", { className: "flex flex-wrap gap-5 pt-4", children: [(layoutConfig?.sections?.hero?.showCTA !== false || layoutConfig?.hero?.showCTA !== false) &&
+    return (_jsxs("div", { className: "min-h-screen bg-[#FAFAFA]", children: [(layoutConfig?.sections?.hero?.show !== false || layoutConfig?.hero?.show !== false) && heroSlides.length > 0 && (_jsxs("section", { "data-section": "hero", className: "relative h-[90vh] w-full overflow-hidden bg-black", onMouseEnter: () => setIsAutoPlaying(false), onMouseLeave: () => setIsAutoPlaying(true), children: [heroSlides.map((slide, index) => (_jsxs("div", { className: `absolute inset-0 transition-opacity duration-1000 ease-in-out ${index === currentSlide ? 'opacity-100 z-10' : 'opacity-0 z-0'}`, children: [_jsxs("div", { className: "absolute inset-0", children: [_jsx(Image, { src: slide.image, alt: slide.title, fill: true, className: `object-cover transition-transform duration-[10000ms] ease-linear ${index === currentSlide ? 'scale-110' : 'scale-100'}`, unoptimized: true }), _jsx("div", { className: "absolute inset-0 bg-gradient-to-r from-black/80 via-black/40 to-transparent" }), _jsx("div", { className: "absolute inset-0 bg-gradient-to-t from-black/60 via-transparent 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 space-y-8 transition-all duration-1000 transform ${index === currentSlide ? 'translate-y-0 opacity-100' : 'translate-y-10 opacity-0'}`, children: [_jsxs("div", { className: "inline-flex items-center gap-3 px-5 py-2.5 bg-orange-500 text-white rounded-full text-sm font-bold shadow-[0_0_20px_rgba(249,115,22,0.4)] backdrop-blur-md border border-orange-400/50 w-fit", children: [_jsx(Flame, { className: "h-4 w-4 fill-white animate-bounce" }), " ", slide.badge] }), _jsxs("h1", { className: "text-5xl sm:text-6xl lg:text-8xl font-black text-white tracking-tighter leading-[1.1] drop-shadow-2xl", children: [slide.title, " ", _jsx("br", {}), _jsx("span", { className: "text-transparent bg-clip-text bg-gradient-to-r from-orange-400 via-yellow-400 to-orange-500", children: slide.highlight })] }), _jsx("p", { className: "text-xl sm:text-2xl text-gray-200 max-w-xl font-medium leading-relaxed drop-shadow-lg", children: slide.description }), _jsxs("div", { className: "flex flex-wrap gap-5 pt-4", children: [(layoutConfig?.sections?.hero?.showCTA !== false || layoutConfig?.hero?.showCTA !== false) &&
                                                         slide.primaryBtn &&
-                                                        slide.primaryBtn.trim() !== '' && (_jsx(Link, { href: resolveStoreLink(slide.primaryBtnLink || 'menu', storeConfig.slug), children: _jsx(Button, { size: "lg", className: "h-16 px-10 text-lg font-bold rounded-full bg-gradient-to-r from-orange-600 to-orange-500 hover:from-orange-700 hover:to-orange-600 text-white shadow-[0_10px_30px_rgba(249,115,22,0.4)] transition-all hover:scale-105 hover:-translate-y-1", children: slide.primaryBtn }) })), (layoutConfig?.sections?.hero?.showSecondaryCTA !== false || layoutConfig?.hero?.showSecondaryCTA !== false) &&
+                                                        slide.primaryBtn.trim() !== '' && (_jsx(Link, { href: slide.primaryBtnLink || `/${storeConfig.slug}/menu`, children: _jsx(Button, { size: "lg", className: "h-16 px-10 text-lg font-bold rounded-full bg-gradient-to-r from-orange-600 to-orange-500 hover:from-orange-700 hover:to-orange-600 text-white shadow-[0_10px_30px_rgba(249,115,22,0.4)] transition-all hover:scale-105 hover:-translate-y-1", children: slide.primaryBtn }) })), (layoutConfig?.sections?.hero?.showSecondaryCTA !== false || layoutConfig?.hero?.showSecondaryCTA !== false) &&
                                                         slide.secondaryBtn &&
                                                         slide.secondaryBtn.trim() !== '' &&
-                                                        slide.secondaryBtnLink && (_jsx(Link, { href: resolveStoreLink(slide.secondaryBtnLink, storeConfig.slug), children: _jsx(Button, { size: "lg", variant: "outline", className: "h-16 px-10 text-lg font-bold rounded-full border-2 border-white text-white bg-black/20 hover:bg-white hover:text-black hover:border-white transition-all backdrop-blur-md", children: slide.secondaryBtn }) }))] }), (layoutConfig?.sections?.hero?.showTrustIndicators !== false) && (_jsxs("div", { className: "flex flex-wrap gap-6 text-white/90 text-sm font-semibold pt-4", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Clock, { className: "h-5 w-5 text-orange-400" }), _jsx("span", { "data-payaza-edit": payaza('hero', ['deliveryTime']), "data-payaza-section-key": "hero", children: layoutConfig?.sections?.hero?.deliveryTime || '30-45 min Delivery' })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { ...payazaIconBindingProps(!!isPreview, 'hero', ['ratingIcon']), children: _jsx(DynamicIcon, { name: layoutConfig?.sections?.hero?.ratingIcon || 'Star', className: "h-5 w-5 text-yellow-400 fill-yellow-400" }) }), _jsx("span", { "data-payaza-edit": payaza('hero', ['ratingText']), "data-payaza-section-key": "hero", children: layoutConfig?.sections?.hero?.ratingText || '4.9 (2k+ Reviews)' })] })] }))] }) }) })] }, index))), _jsx("button", { onClick: prevSlide, className: "absolute left-2 sm:left-4 top-1/2 -translate-y-1/2 z-30 bg-white/10 hover:bg-white/20 backdrop-blur-md rounded-full p-2 sm:p-3 transition-all duration-300 hover:scale-110 group border border-white/10", "aria-label": "Previous slide", children: _jsx(ChevronLeft, { className: "h-5 w-5 sm:h-8 sm:w-8 text-white group-hover:text-orange-400 transition-colors" }) }), _jsx("button", { onClick: nextSlide, className: "absolute right-2 sm:right-4 top-1/2 -translate-y-1/2 z-30 bg-white/10 hover:bg-white/20 backdrop-blur-md rounded-full p-2 sm:p-3 transition-all duration-300 hover:scale-110 group border border-white/10", "aria-label": "Next slide", children: _jsx(ChevronRight, { className: "h-5 w-5 sm:h-8 sm:w-8 text-white group-hover:text-orange-400 transition-colors" }) }), _jsx("div", { className: "absolute bottom-10 left-1/2 -translate-x-1/2 z-30 flex gap-3", children: heroSlides.map((_, index) => (_jsx("button", { onClick: () => {
+                                                        slide.secondaryBtnLink && (_jsx(Link, { href: slide.secondaryBtnLink, children: _jsx(Button, { size: "lg", variant: "outline", className: "h-16 px-10 text-lg font-bold rounded-full border-2 border-white text-white bg-black/20 hover:bg-white hover:text-black hover:border-white transition-all backdrop-blur-md", children: slide.secondaryBtn }) }))] }), _jsxs("div", { className: "flex flex-wrap gap-6 text-white/90 text-sm font-semibold pt-4", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Clock, { className: "h-5 w-5 text-orange-400" }), " ", _jsx("span", { children: "30-45 min Delivery" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Star, { className: "h-5 w-5 text-yellow-400 fill-yellow-400" }), " ", _jsx("span", { children: "4.9 (2k+ Reviews)" })] })] })] }) }) })] }, index))), _jsx("button", { onClick: prevSlide, className: "absolute left-2 sm:left-4 top-1/2 -translate-y-1/2 z-30 bg-white/10 hover:bg-white/20 backdrop-blur-md rounded-full p-2 sm:p-3 transition-all duration-300 hover:scale-110 group border border-white/10", "aria-label": "Previous slide", children: _jsx(ChevronLeft, { className: "h-5 w-5 sm:h-8 sm:w-8 text-white group-hover:text-orange-400 transition-colors" }) }), _jsx("button", { onClick: nextSlide, className: "absolute right-2 sm:right-4 top-1/2 -translate-y-1/2 z-30 bg-white/10 hover:bg-white/20 backdrop-blur-md rounded-full p-2 sm:p-3 transition-all duration-300 hover:scale-110 group border border-white/10", "aria-label": "Next slide", children: _jsx(ChevronRight, { className: "h-5 w-5 sm:h-8 sm:w-8 text-white group-hover:text-orange-400 transition-colors" }) }), _jsx("div", { className: "absolute bottom-10 left-1/2 -translate-x-1/2 z-30 flex gap-3", children: heroSlides.map((_, index) => (_jsx("button", { onClick: () => {
                                 setCurrentSlide(index);
                                 setIsAutoPlaying(false);
                             }, className: `transition-all duration-500 rounded-full ${index === currentSlide
                                 ? 'w-12 h-3 bg-orange-500 shadow-lg shadow-orange-500/50'
-                                : 'w-3 h-3 bg-white/30 hover:bg-white/50'}`, "aria-label": `Go to slide ${index + 1}` }, index))) })] })), layoutConfig?.sections?.categories?.show !== false && (_jsx("section", { "data-section": "categories", "data-payaza-section-key": "categories", "data-payaza-page": "home", className: "py-16 md:py-24 px-4 sm:px-6 lg:px-8 -mt-20 md:-mt-32 relative z-10", style: getPayazaSectionInlineStyle(storeConfig, 'home', 'categories'), children: _jsx("div", { className: "container mx-auto max-w-7xl", children: _jsxs("div", { className: "bg-white/80 backdrop-blur-xl rounded-[2.5rem] shadow-2xl shadow-black/5 p-8 md:p-14 border border-white/20", children: [_jsxs("div", { className: "text-center mb-8 md:mb-12", children: [_jsx("span", { className: "text-orange-500 font-bold tracking-widest uppercase text-xs mb-3 block", "data-payaza-edit": payaza('categories', ['title']), children: layoutConfig?.sections?.categories?.title || "Menu Categories" }), _jsx("h2", { className: "text-3xl md:text-4xl font-black text-gray-900 tracking-tight", "data-payaza-edit": payaza('categories', ['subtitle']), children: layoutConfig?.sections?.categories?.subtitle || "What are you craving?" })] }), _jsx("div", { className: "flex flex-wrap justify-center gap-8 md:gap-12", children: categories.map((category) => (_jsxs(Link, { href: `/${storeConfig.slug}/menu/${category.slug}`, className: "group flex flex-col items-center gap-4 transition-all duration-300 hover:scale-110", children: [_jsx("div", { className: "w-20 h-20 rounded-full bg-gradient-to-br from-orange-500 to-orange-600 flex items-center justify-center shadow-lg group-hover:shadow-xl transition-shadow", children: _jsx(Utensils, { className: "w-10 h-10 text-white" }) }), _jsx("span", { className: "text-gray-900 font-bold text-lg group-hover:text-orange-500 transition-colors", children: category.name })] }, category.id))) })] }) }) })), layoutConfig?.sections?.process?.show !== false && (_jsx("section", { "data-section": "process", "data-payaza-section-key": "process", "data-payaza-page": "home", className: "py-16 md:py-24 px-4 sm:px-6 lg:px-8 bg-[#FAFAFA]", style: getPayazaSectionInlineStyle(storeConfig, 'home', 'process'), children: _jsxs("div", { className: "container mx-auto max-w-7xl", children: [_jsxs("div", { className: "text-center mb-12 md:mb-20", children: [_jsx("span", { className: "text-orange-500 font-bold tracking-widest uppercase text-xs mb-3 block", "data-payaza-edit": payaza('process', ['subtitle']), children: layoutConfig?.sections?.process?.subtitle || "Simple Process" }), _jsx("h2", { className: "text-4xl md:text-5xl font-black text-gray-900 tracking-tight", "data-payaza-edit": payaza('process', ['title']), children: layoutConfig?.sections?.process?.title || "How It Works" })] }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-12 relative max-w-5xl mx-auto", children: [_jsx("div", { className: "hidden md:block absolute top-16 left-[20%] right-[20%] h-0.5 bg-gradient-to-r from-gray-200 via-orange-200 to-gray-200 -z-10 border-t-2 border-dashed border-gray-300/50" }), (() => {
+                                : 'w-3 h-3 bg-white/30 hover:bg-white/50'}`, "aria-label": `Go to slide ${index + 1}` }, index))) })] })), layoutConfig?.sections?.categories?.show !== false && (_jsx("section", { "data-section": "categories", className: "py-16 md:py-24 px-4 sm:px-6 lg:px-8 -mt-20 md:-mt-32 relative z-10", children: _jsx("div", { className: "container mx-auto max-w-7xl", children: _jsxs("div", { className: "bg-white/80 backdrop-blur-xl rounded-[2.5rem] shadow-2xl shadow-black/5 p-8 md:p-14 border border-white/20", children: [_jsxs("div", { className: "text-center mb-8 md:mb-12", children: [_jsx("span", { className: "text-orange-500 font-bold tracking-widest uppercase text-xs mb-3 block", children: layoutConfig?.sections?.categories?.title || "Menu Categories" }), _jsx("h2", { className: "text-3xl md:text-4xl font-black text-gray-900 tracking-tight", children: layoutConfig?.sections?.categories?.subtitle || "What are you craving?" })] }), _jsx("div", { className: "flex flex-wrap justify-center gap-8 md:gap-12", children: categories.map((category) => (_jsxs(Link, { href: `/${storeConfig.slug}/menu/${category.slug}`, className: "group flex flex-col items-center gap-5 min-w-[120px]", children: [_jsxs("div", { className: "w-24 h-24 md:w-32 md:h-32 rounded-full bg-white shadow-[0_10px_40px_rgba(0,0,0,0.08)] group-hover:shadow-[0_20px_40px_rgba(249,115,22,0.2)] flex items-center justify-center transition-all duration-500 group-hover:-translate-y-2 border-4 border-white overflow-hidden relative", children: [_jsx("div", { className: "absolute inset-0 bg-orange-50 opacity-0 group-hover:opacity-100 transition-opacity duration-500" }), _jsx(Utensils, { className: "h-10 w-10 md:h-12 md:w-12 text-gray-400 group-hover:text-orange-500 transition-colors relative z-10" })] }), _jsx("span", { className: "font-bold text-gray-600 group-hover:text-orange-600 transition-colors text-base md:text-lg tracking-tight", children: category.name })] }, category.id))) })] }) }) })), layoutConfig?.sections?.process?.show !== false && (_jsx("section", { "data-section": "about", className: "py-16 md:py-24 px-4 sm:px-6 lg:px-8 bg-[#FAFAFA]", children: _jsxs("div", { className: "container mx-auto max-w-7xl", children: [_jsxs("div", { className: "text-center mb-12 md:mb-20", children: [_jsx("span", { className: "text-orange-500 font-bold tracking-widest uppercase text-xs mb-3 block", children: layoutConfig?.sections?.process?.subtitle || "Simple Process" }), _jsx("h2", { className: "text-4xl md:text-5xl font-black text-gray-900 tracking-tight", children: layoutConfig?.sections?.process?.title || "How It Works" })] }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-12 relative max-w-5xl mx-auto", children: [_jsx("div", { className: "hidden md:block absolute top-16 left-[20%] right-[20%] h-0.5 bg-gradient-to-r from-gray-200 via-orange-200 to-gray-200 -z-10 border-t-2 border-dashed border-gray-300/50" }), (() => {
                                     const defaultSteps = [
                                         { title: "Choose Your Dish", description: "Browse our diverse menu and select your favorite meals with just a few taps.", icon: "Smartphone" },
                                         { title: "We Cook It Fresh", description: "Our expert chefs prepare your order using the finest, freshest ingredients.", icon: "ChefHat" },
                                         { title: "Fast Delivery", description: "Receive your hot and delicious meal at your doorstep in record time.", icon: "Truck" }
                                     ];
                                     const steps = (layoutConfig?.sections?.process?.steps || defaultSteps).filter(Boolean);
+                                    const iconMap = { Smartphone, ChefHat, Truck };
                                     return steps.map((step, idx) => {
-                                        return (_jsxs("div", { className: "flex flex-col items-center text-center group", children: [_jsxs("div", { className: "w-32 h-32 rounded-[2rem] bg-white flex items-center justify-center mb-8 shadow-[0_20px_50px_rgba(0,0,0,0.05)] group-hover:shadow-[0_20px_50px_rgba(249,115,22,0.15)] group-hover:-translate-y-2 transition-all duration-500 relative z-10 border border-gray-100", children: [_jsx("div", { className: "p-4 bg-orange-50 rounded-2xl group-hover:bg-orange-100 transition-colors duration-500", ...payazaIconBindingProps(!!isPreview, 'process', ['steps', String(idx), 'icon']), children: _jsx(DynamicIcon, { name: step.icon || 'Utensils', className: "h-10 w-10 text-orange-500 group-hover:scale-110 transition-transform duration-500" }) }), _jsx("div", { className: "absolute -top-3 -right-3 w-8 h-8 bg-orange-500 rounded-full flex items-center justify-center text-white font-bold text-sm shadow-lg", children: idx + 1 })] }), _jsx("h3", { className: "text-2xl font-bold text-gray-900 mb-4", "data-payaza-edit": payaza('process', ['steps', String(idx), 'title']), children: step.title }), _jsx("p", { className: "text-gray-500 leading-relaxed max-w-xs font-medium", "data-payaza-edit": payaza('process', ['steps', String(idx), 'description']), children: step.description })] }, idx));
+                                        const IconComponent = iconMap[step.icon] || Utensils;
+                                        return (_jsxs("div", { className: "flex flex-col items-center text-center group", children: [_jsxs("div", { className: "w-32 h-32 rounded-[2rem] bg-white flex items-center justify-center mb-8 shadow-[0_20px_50px_rgba(0,0,0,0.05)] group-hover:shadow-[0_20px_50px_rgba(249,115,22,0.15)] group-hover:-translate-y-2 transition-all duration-500 relative z-10 border border-gray-100", children: [_jsx("div", { className: "p-4 bg-orange-50 rounded-2xl group-hover:bg-orange-100 transition-colors duration-500", children: _jsx(IconComponent, { className: "h-10 w-10 text-orange-500 group-hover:scale-110 transition-transform duration-500" }) }), _jsx("div", { className: "absolute -top-3 -right-3 w-8 h-8 bg-orange-500 rounded-full flex items-center justify-center text-white font-bold text-sm shadow-lg", children: idx + 1 })] }), _jsx("h3", { className: "text-2xl font-bold text-gray-900 mb-4", children: step.title }), _jsx("p", { className: "text-gray-500 leading-relaxed max-w-xs font-medium", children: step.description })] }, idx));
                                     });
-                                })()] })] }) })), layoutConfig?.sections?.featuredProducts?.show !== false && (_jsx("section", { "data-section": "featuredProducts", "data-payaza-section-key": "featuredProducts", "data-payaza-page": "home", className: "py-16 md:py-20 px-4 sm:px-6 lg:px-8", style: getPayazaSectionInlineStyle(storeConfig, 'home', 'featuredProducts'), children: _jsxs("div", { className: "container mx-auto max-w-7xl", children: [_jsxs("div", { className: "flex flex-col md:flex-row items-end justify-between mb-8 md:mb-12 gap-4", children: [_jsxs("div", { children: [_jsx("span", { className: "text-orange-500 font-bold tracking-widest uppercase text-xs mb-3 block", "data-payaza-edit": payaza('featuredProducts', ['subtitle']), children: layoutConfig?.sections?.featuredProducts?.subtitle || "Our Menu" }), _jsx("h2", { className: "text-3xl md:text-4xl font-black text-gray-900 tracking-tight", "data-payaza-edit": payaza('featuredProducts', ['title']), children: layoutConfig?.sections?.featuredProducts?.title || getLayoutText(storeConfig, 'food.chefRecommendations', 'Chef\'s Recommendations') })] }), _jsxs(Link, { href: resolveStoreLink(layoutConfig?.sections?.featuredProducts?.viewAllLink || 'menu', storeConfig.slug), className: "group flex items-center gap-2 text-gray-600 hover:text-orange-600 font-bold transition-colors", children: [_jsx("span", { "data-payaza-edit": payaza('featuredProducts', ['viewAllLabel']), children: layoutConfig?.sections?.featuredProducts?.viewAllLabel || getLayoutText(storeConfig, 'food.viewMenu', 'View Full Menu') }), _jsx(ArrowRight, { className: "h-5 w-5 transition-transform group-hover:translate-x-1" })] })] }), _jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8", children: menuItems.slice(0, layoutConfig?.sections?.featuredProducts?.maxItems || 3).map((item) => (_jsxs("div", { className: "group bg-white rounded-[2rem] border border-gray-100 shadow-sm hover:shadow-[0_20px_50px_rgba(0,0,0,0.08)] transition-all duration-500 overflow-hidden flex flex-col h-full hover:-translate-y-2", children: [_jsxs("div", { className: "relative aspect-[4/3] overflow-hidden m-3 rounded-[1.5rem]", children: [item.image ? (_jsx("div", { className: "w-full h-full relative", children: _jsx(Image, { src: item.image, alt: item.name, fill: true, className: "object-cover transition-transform duration-700 group-hover:scale-110", unoptimized: true }) })) : (_jsx("div", { className: "w-full h-full bg-gray-100 flex items-center justify-center", children: _jsx(Utensils, { className: "h-12 w-12 text-gray-300" }) })), _jsx("div", { className: "absolute inset-0 bg-gradient-to-t from-black/50 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" }), _jsx("div", { className: "absolute top-4 right-4 bg-white/95 backdrop-blur-md px-4 py-2 rounded-full font-black text-gray-900 shadow-lg border border-white/50", children: formatCurrency(item.price, storeConfig.settings?.currency || 'USD') }), _jsx("div", { className: "hidden lg:block absolute bottom-4 left-4 right-4 translate-y-20 opacity-0 group-hover:translate-y-0 group-hover:opacity-100 transition-all duration-500 delay-100", children: _jsx(Button, { onClick: () => handleAddToCart(item), className: "w-full h-12 rounded-xl bg-white hover:bg-orange-600 text-gray-900 hover:text-white font-bold shadow-xl border-0 transition-colors", children: "Add to Order" }) }), _jsx("button", { onClick: () => handleAddToCart(item), className: "lg:hidden absolute bottom-3 right-3 bg-white text-orange-600 w-10 h-10 rounded-full shadow-lg flex items-center justify-center font-bold z-10 active:scale-95 transition-transform", children: _jsx(Plus, { className: "h-5 w-5" }) })] }), _jsxs("div", { className: "p-6 pt-2 flex flex-col flex-1", children: [_jsx("div", { className: "flex justify-between items-start mb-2", children: _jsx("h3", { className: "font-bold text-xl text-gray-900 group-hover:text-orange-600 transition-colors line-clamp-1", children: item.name }) }), _jsx("p", { className: "text-gray-500 text-sm mb-6 line-clamp-2 flex-1 leading-relaxed font-medium", children: item.description }), item.dietaryInfo && item.dietaryInfo.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-2 mt-auto pt-4 border-t border-gray-50", children: item.dietaryInfo.map((info) => (_jsx("span", { className: "text-[10px] font-bold uppercase tracking-wider px-3 py-1.5 bg-gray-50 text-gray-600 rounded-lg group-hover:bg-orange-50 group-hover:text-orange-700 transition-colors", children: info }, info))) }))] })] }, item.id))) })] }) })), layoutConfig?.sections?.about?.show !== false && (_jsx("section", { "data-section": "about", "data-payaza-section-key": "about", "data-payaza-page": "home", className: "py-16 md:py-20 px-4 sm:px-6 lg:px-8 bg-white overflow-hidden", style: getPayazaSectionInlineStyle(storeConfig, 'home', 'about'), 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: [_jsx("div", { className: "order-2 lg:order-1", children: _jsxs("div", { className: "relative", children: [_jsx("div", { className: "absolute -top-10 -left-10 w-64 h-64 bg-orange-100 rounded-full blur-3xl opacity-50" }), _jsx("div", { className: "relative aspect-square rounded-3xl overflow-hidden shadow-2xl rotate-3 hover:rotate-0 transition-transform duration-700", "data-payaza-image": payaza('about', ['image']), children: _jsx(Image, { src: layoutConfig?.sections?.about?.image || getBannerImage(storeConfig, 'chef_image', "https://images.unsplash.com/photo-1583394293214-28ded15ee548?q=80&w=2000&auto=format&fit=crop"), alt: "Chef Cooking", fill: true, className: "object-cover", unoptimized: true }) }), _jsx("div", { className: "absolute -bottom-8 -right-8 bg-white p-6 rounded-2xl shadow-xl animate-fade-in-up hidden md:block", children: _jsxs("div", { className: "flex items-center gap-4", children: [_jsx("div", { className: "p-3 bg-orange-100 rounded-full text-orange-600", children: _jsx(ChefHat, { className: "h-8 w-8" }) }), _jsxs("div", { children: [_jsx("p", { className: "font-bold text-gray-900 text-lg", "data-payaza-edit": payaza('about', ['chefBadgeTitle']), "data-payaza-section-key": "about", children: layoutConfig?.sections?.about?.chefBadgeTitle || 'Master Chef' }), _jsx("p", { className: "text-sm text-gray-500", "data-payaza-edit": payaza('about', ['chefBadgeSubtitle']), "data-payaza-section-key": "about", children: layoutConfig?.sections?.about?.chefBadgeSubtitle || '15+ Years Experience' })] })] }) })] }) }), _jsxs("div", { className: "order-1 lg:order-2 space-y-6", children: [_jsx("span", { className: "text-orange-600 font-bold tracking-wider uppercase text-sm", "data-payaza-edit": payaza('about', ['section_title']), children: layoutConfig?.sections?.about?.section_title || getLayoutText(storeConfig, 'chef_image:section_title', 'Our Story') }), _jsx("h2", { className: "text-4xl md:text-5xl font-black text-gray-900 leading-tight", "data-payaza-edit": payaza('about', ['chef_name']), children: layoutConfig?.sections?.about?.chef_name || getLayoutText(storeConfig, 'chef_image:chef_name', 'Crafted with Love, Served with Passion') }), _jsx("p", { className: "text-lg text-gray-600 leading-relaxed", "data-payaza-edit": payaza('about', ['chef_bio']), children: layoutConfig?.sections?.about?.chef_bio || getLayoutText(storeConfig, 'chef_image:chef_bio', 'We believe that great food brings people together. Our chefs use only the freshest, locally-sourced ingredients to create dishes that not only taste amazing but also tell a story of tradition and innovation.') }), _jsx("div", { className: "grid grid-cols-2 gap-6 pt-4", children: (layoutConfig?.sections?.about?.showStats !== false) && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "space-y-2", children: [_jsx("h4", { className: "text-3xl font-black text-gray-900", "data-payaza-edit": payaza('about', ['stat1Value']), children: layoutConfig?.sections?.about?.stat1Value || "15k+" }), _jsx("p", { className: "text-gray-500 font-medium", "data-payaza-edit": payaza('about', ['stat1Label']), children: layoutConfig?.sections?.about?.stat1Label || "Happy Customers" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("h4", { className: "text-3xl font-black text-gray-900", "data-payaza-edit": payaza('about', ['stat2Value']), children: layoutConfig?.sections?.about?.stat2Value || "100%" }), _jsx("p", { className: "text-gray-500 font-medium", "data-payaza-edit": payaza('about', ['stat2Label']), children: layoutConfig?.sections?.about?.stat2Label || "Fresh Ingredients" })] })] })) }), _jsx("div", { className: "pt-6", children: _jsx(Link, { href: resolveStoreLink(layoutConfig?.sections?.about?.buttonLink || 'about', storeConfig.slug), children: _jsx(Button, { variant: "outline", className: "rounded-full px-8 py-6 border-gray-200 hover:border-orange-600 hover:text-orange-600 text-base font-bold", children: _jsx("span", { "data-payaza-edit": payaza('about', ['buttonText']), children: layoutConfig?.sections?.about?.buttonText || "Read More About Us" }) }) }) })] })] }) }) })), layoutConfig?.sections?.testimonials?.show !== false && (_jsx("section", { "data-section": "testimonials", "data-payaza-section-key": "testimonials", "data-payaza-page": "home", className: "py-16 md:py-24 px-4 sm:px-6 lg:px-8 bg-gradient-to-b from-white via-orange-50/30 to-white", style: getPayazaSectionInlineStyle(storeConfig, 'home', 'testimonials'), children: _jsxs("div", { className: "container mx-auto max-w-7xl", children: [_jsxs("div", { className: "text-center mb-12 md:mb-20", children: [_jsx("span", { className: "text-orange-500 font-bold tracking-widest uppercase text-xs mb-3 block", children: "Testimonials" }), _jsx("h2", { className: "text-4xl md:text-5xl font-black text-gray-900 tracking-tight", "data-payaza-edit": payaza('testimonials', ['title']), children: layoutConfig?.sections?.testimonials?.title || getLayoutText(storeConfig, 'sections.testimonials.title', 'What Our Customers Say') }), _jsx("p", { className: "text-gray-500 text-lg mt-4 max-w-2xl mx-auto", "data-payaza-edit": payaza('testimonials', ['subtitle']), children: layoutConfig?.sections?.testimonials?.subtitle || getLayoutText(storeConfig, 'sections.testimonials.subtitle', 'Real experiences from food lovers who trust us') })] }), _jsx("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-8", children: (() => {
+                                })()] })] }) })), layoutConfig?.sections?.featuredProducts?.show !== false && (_jsx("section", { "data-section": "featuredProducts", className: "py-16 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 items-end justify-between mb-8 md:mb-12 gap-4", children: [_jsxs("div", { children: [_jsx("span", { className: "text-orange-500 font-bold tracking-widest uppercase text-xs mb-3 block", children: layoutConfig?.sections?.featuredProducts?.subtitle || "Our Menu" }), _jsx("h2", { className: "text-3xl md:text-4xl font-black text-gray-900 tracking-tight", children: layoutConfig?.sections?.featuredProducts?.title || getLayoutText(storeConfig, 'food.chefRecommendations', 'Chef\'s Recommendations') })] }), _jsxs(Link, { href: `/${storeConfig.slug}/menu`, className: "group flex items-center gap-2 text-gray-600 hover:text-orange-600 font-bold transition-colors", children: [layoutConfig?.sections?.featuredProducts?.viewAllLabel || getLayoutText(storeConfig, 'food.viewMenu', 'View Full Menu'), " ", _jsx(ArrowRight, { className: "h-5 w-5 transition-transform group-hover:translate-x-1" })] })] }), _jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8", children: menuItems.slice(0, 3).map((item) => (_jsxs("div", { className: "group bg-white rounded-[2rem] border border-gray-100 shadow-sm hover:shadow-[0_20px_50px_rgba(0,0,0,0.08)] transition-all duration-500 overflow-hidden flex flex-col h-full hover:-translate-y-2", children: [_jsxs("div", { className: "relative aspect-[4/3] overflow-hidden m-3 rounded-[1.5rem]", children: [item.image ? (_jsx("div", { className: "w-full h-full relative", children: _jsx(Image, { src: item.image, alt: item.name, fill: true, className: "object-cover transition-transform duration-700 group-hover:scale-110", unoptimized: true }) })) : (_jsx("div", { className: "w-full h-full bg-gray-100 flex items-center justify-center", children: _jsx(Utensils, { className: "h-12 w-12 text-gray-300" }) })), _jsx("div", { className: "absolute inset-0 bg-gradient-to-t from-black/50 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" }), _jsx("div", { className: "absolute top-4 right-4 bg-white/95 backdrop-blur-md px-4 py-2 rounded-full font-black text-gray-900 shadow-lg border border-white/50", children: formatCurrency(item.price, storeConfig.settings?.currency || 'USD') }), _jsx("div", { className: "hidden lg:block absolute bottom-4 left-4 right-4 translate-y-20 opacity-0 group-hover:translate-y-0 group-hover:opacity-100 transition-all duration-500 delay-100", children: _jsx(Button, { onClick: () => handleAddToCart(item), className: "w-full h-12 rounded-xl bg-white hover:bg-orange-600 text-gray-900 hover:text-white font-bold shadow-xl border-0 transition-colors", children: "Add to Order" }) }), _jsx("button", { onClick: () => handleAddToCart(item), className: "lg:hidden absolute bottom-3 right-3 bg-white text-orange-600 w-10 h-10 rounded-full shadow-lg flex items-center justify-center font-bold z-10 active:scale-95 transition-transform", children: _jsx(Plus, { className: "h-5 w-5" }) })] }), _jsxs("div", { className: "p-6 pt-2 flex flex-col flex-1", children: [_jsx("div", { className: "flex justify-between items-start mb-2", children: _jsx("h3", { className: "font-bold text-xl text-gray-900 group-hover:text-orange-600 transition-colors line-clamp-1", children: item.name }) }), _jsx("p", { className: "text-gray-500 text-sm mb-6 line-clamp-2 flex-1 leading-relaxed font-medium", children: item.description }), item.dietaryInfo && item.dietaryInfo.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-2 mt-auto pt-4 border-t border-gray-50", children: item.dietaryInfo.map((info) => (_jsx("span", { className: "text-[10px] font-bold uppercase tracking-wider px-3 py-1.5 bg-gray-50 text-gray-600 rounded-lg group-hover:bg-orange-50 group-hover:text-orange-700 transition-colors", children: info }, info))) }))] })] }, item.id))) })] }) })), layoutConfig?.sections?.about?.show !== false && (_jsx("section", { "data-section": "about", className: "py-16 md:py-20 px-4 sm:px-6 lg:px-8 bg-white overflow-hidden", 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: [_jsx("div", { className: "order-2 lg:order-1", children: _jsxs("div", { className: "relative", children: [_jsx("div", { className: "absolute -top-10 -left-10 w-64 h-64 bg-orange-100 rounded-full blur-3xl opacity-50" }), _jsx("div", { className: "relative aspect-square rounded-3xl overflow-hidden shadow-2xl rotate-3 hover:rotate-0 transition-transform duration-700", children: _jsx(Image, { src: layoutConfig?.sections?.about?.image || getBannerImage(storeConfig, 'chef_image', "https://images.unsplash.com/photo-1583394293214-28ded15ee548?q=80&w=2000&auto=format&fit=crop"), alt: "Chef Cooking", fill: true, className: "object-cover", unoptimized: true }) }), _jsx("div", { className: "absolute -bottom-8 -right-8 bg-white p-6 rounded-2xl shadow-xl animate-fade-in-up hidden md:block", children: _jsxs("div", { className: "flex items-center gap-4", children: [_jsx("div", { className: "p-3 bg-orange-100 rounded-full text-orange-600", children: _jsx(ChefHat, { className: "h-8 w-8" }) }), _jsxs("div", { children: [_jsx("p", { className: "font-bold text-gray-900 text-lg", children: "Master Chef" }), _jsx("p", { className: "text-sm text-gray-500", children: "15+ Years Experience" })] })] }) })] }) }), _jsxs("div", { className: "order-1 lg:order-2 space-y-6", children: [_jsx("span", { className: "text-orange-600 font-bold tracking-wider uppercase text-sm", children: layoutConfig?.sections?.about?.section_title || getLayoutText(storeConfig, 'chef_image:section_title', 'Our Story') }), _jsx("h2", { className: "text-4xl md:text-5xl font-black text-gray-900 leading-tight", children: layoutConfig?.sections?.about?.chef_name || getLayoutText(storeConfig, 'chef_image:chef_name', 'Crafted with Love, Served with Passion') }), _jsx("p", { className: "text-lg text-gray-600 leading-relaxed", children: layoutConfig?.sections?.about?.chef_bio || getLayoutText(storeConfig, 'chef_image:chef_bio', 'We believe that great food brings people together. Our chefs use only the freshest, locally-sourced ingredients to create dishes that not only taste amazing but also tell a story of tradition and innovation.') }), _jsx("div", { className: "grid grid-cols-2 gap-6 pt-4", children: (layoutConfig?.sections?.about?.showStats !== false) && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "space-y-2", children: [_jsx("h4", { className: "text-3xl font-black text-gray-900", children: layoutConfig?.sections?.about?.stat1Value || "15k+" }), _jsx("p", { className: "text-gray-500 font-medium", children: layoutConfig?.sections?.about?.stat1Label || "Happy Customers" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("h4", { className: "text-3xl font-black text-gray-900", children: layoutConfig?.sections?.about?.stat2Value || "100%" }), _jsx("p", { className: "text-gray-500 font-medium", children: layoutConfig?.sections?.about?.stat2Label || "Fresh Ingredients" })] })] })) }), _jsx("div", { className: "pt-6", children: _jsx(Link, { href: toStoreHref(storeConfig.slug, layoutConfig?.sections?.about?.buttonLink, '/about'), children: _jsx(Button, { variant: "outline", className: "rounded-full px-8 py-6 border-gray-200 hover:border-orange-600 hover:text-orange-600 text-base font-bold", children: layoutConfig?.sections?.about?.buttonText || "Read More About Us" }) }) })] })] }) }) })), layoutConfig?.sections?.testimonials?.show !== false && (_jsx("section", { "data-section": "testimonials", className: "py-16 md:py-24 px-4 sm:px-6 lg:px-8 bg-gradient-to-b from-white via-orange-50/30 to-white", children: _jsxs("div", { className: "container mx-auto max-w-7xl", children: [_jsxs("div", { className: "text-center mb-12 md:mb-20", children: [_jsx("span", { className: "text-orange-500 font-bold tracking-widest uppercase text-xs mb-3 block", children: "Testimonials" }), _jsx("h2", { className: "text-4xl md:text-5xl font-black text-gray-900 tracking-tight", children: layoutConfig?.sections?.testimonials?.title || getLayoutText(storeConfig, 'sections.testimonials.title', 'What Our Customers Say') }), _jsx("p", { className: "text-gray-500 text-lg mt-4 max-w-2xl mx-auto", children: layoutConfig?.sections?.testimonials?.subtitle || getLayoutText(storeConfig, 'sections.testimonials.subtitle', 'Real experiences from food lovers who trust us') })] }), _jsx("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-8", children: (() => {
                                 // Use backend testimonials if available
                                 const backendTestimonials = layoutConfig?.sections?.testimonials?.items || [];
                                 const fallbackTestimonials = [
@@ -367,10 +367,9 @@ export function FoodHomePage({ storeConfig: initialConfig }) {
                                 // If backend has testimonials, use them; otherwise use fallback
                                 const testimonials = backendTestimonials.length > 0
                                     ? backendTestimonials
-                                    : (isPreview ? fallbackTestimonials : []);
-                                const maxItems = layoutConfig?.sections?.testimonials?.maxItems || 3;
-                                return testimonials.slice(0, maxItems);
-                            })().map((testimonial) => (_jsx(TestimonialCard, { testimonial: testimonial }, testimonial.id || testimonial.name))) })] }) })), layoutConfig?.sections?.reservation?.show !== false && (_jsxs("section", { "data-section": "reservation", "data-payaza-section-key": "reservation", "data-payaza-page": "home", className: "py-16 md:py-24 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-white via-orange-50/20 to-white relative overflow-hidden", style: getPayazaSectionInlineStyle(storeConfig, 'home', 'reservation'), children: [_jsx("div", { className: "absolute top-0 right-0 w-96 h-96 bg-orange-100 rounded-full blur-3xl opacity-30 -z-10" }), _jsx("div", { className: "absolute bottom-0 left-0 w-96 h-96 bg-orange-50 rounded-full blur-3xl opacity-20 -z-10" }), _jsx("div", { className: "container mx-auto max-w-7xl relative z-10", children: _jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-10 lg:gap-24 items-center", children: [_jsxs("div", { className: "space-y-10", children: [_jsxs("div", { children: [_jsx("span", { className: "text-orange-500 font-bold tracking-widest uppercase text-xs mb-4 block", "data-payaza-edit": payaza('reservation', ['subtitle']), children: layoutConfig?.sections?.reservation?.subtitle || "Reservations" }), _jsx("h2", { className: "text-4xl md:text-5xl lg:text-6xl font-black text-gray-900 leading-tight mb-6 tracking-tight", "data-payaza-edit": payaza('reservation', ['title']), children: layoutConfig?.sections?.reservation?.title || getLayoutText(storeConfig, 'food.reserveTable', 'Reserve Your Table') }), _jsx("p", { className: "text-lg text-gray-600 leading-relaxed font-medium", "data-payaza-edit": payaza('reservation', ['description']), children: layoutConfig?.sections?.reservation?.description || getLayoutText(storeConfig, 'food.ourPhilosophy', 'Experience our exceptional dining atmosphere. Book a table in advance to ensure the best experience for you and your guests.') })] }), _jsx("div", { className: "grid grid-cols-2 gap-6", children: (() => {
+                                    : fallbackTestimonials;
+                                return testimonials.slice(0, 3);
+                            })().map((testimonial) => (_jsx(TestimonialCard, { testimonial: testimonial }, testimonial.id || testimonial.name))) })] }) })), layoutConfig?.sections?.reservation?.show !== false && (_jsxs("section", { "data-section": "bookings", className: "py-16 md:py-24 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-white via-orange-50/20 to-white relative overflow-hidden", children: [_jsx("div", { className: "absolute top-0 right-0 w-96 h-96 bg-orange-100 rounded-full blur-3xl opacity-30 -z-10" }), _jsx("div", { className: "absolute bottom-0 left-0 w-96 h-96 bg-orange-50 rounded-full blur-3xl opacity-20 -z-10" }), _jsx("div", { className: "container mx-auto max-w-7xl relative z-10", children: _jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-10 lg:gap-24 items-center", children: [_jsxs("div", { className: "space-y-10", children: [_jsxs("div", { children: [_jsx("span", { className: "text-orange-500 font-bold tracking-widest uppercase text-xs mb-4 block", children: layoutConfig?.sections?.reservation?.subtitle || "Reservations" }), _jsx("h2", { className: "text-4xl md:text-5xl lg:text-6xl font-black text-gray-900 leading-tight mb-6 tracking-tight", children: layoutConfig?.sections?.reservation?.title || getLayoutText(storeConfig, 'food.reserveTable', 'Reserve Your Table') }), _jsx("p", { className: "text-lg text-gray-600 leading-relaxed font-medium", children: layoutConfig?.sections?.reservation?.description || getLayoutText(storeConfig, 'food.ourPhilosophy', 'Experience our exceptional dining atmosphere. Book a table in advance to ensure the best experience for you and your guests.') })] }), _jsx("div", { className: "grid grid-cols-2 gap-6", children: (() => {
                                                 const defaultFeatures = [
                                                     { title: "Flexible Booking", description: "Book up to 90 days in advance", icon: "Calendar" },
                                                     { title: "Group Dining", description: "Accommodate parties of all sizes", icon: "Users" },
@@ -378,10 +377,12 @@ export function FoodHomePage({ storeConfig: initialConfig }) {
                                                     { title: "Special Occasions", description: "Perfect for celebrations", icon: "Award" }
                                                 ];
                                                 const features = (layoutConfig?.sections?.reservation?.features || defaultFeatures).filter(Boolean);
+                                                const iconMap = { Calendar, Users, Clock, Award };
                                                 if (layoutConfig?.sections?.reservation?.showFeatures === false)
                                                     return null;
                                                 return features.map((feature, idx) => {
-                                                    return (_jsxs("div", { className: "group flex items-start gap-4 p-5 bg-white rounded-2xl shadow-sm hover:shadow-lg border border-gray-100 hover:border-orange-200 transition-all duration-300", children: [_jsx("div", { className: "p-3 bg-orange-50 rounded-xl group-hover:bg-orange-100 transition-colors", ...payazaIconBindingProps(!!isPreview, 'reservation', ['features', String(idx), 'icon']), children: _jsx(DynamicIcon, { name: feature.icon || 'Star', className: "h-6 w-6 text-orange-500" }) }), _jsxs("div", { children: [_jsx("h3", { className: "font-bold text-gray-900 mb-1.5", "data-payaza-edit": payaza('reservation', ['features', String(idx), 'title']), children: feature.title }), _jsx("p", { className: "text-sm text-gray-600 font-medium", "data-payaza-edit": payaza('reservation', ['features', String(idx), 'description']), children: feature.description })] })] }, idx));
+                                                    const IconComponent = iconMap[feature.icon] || Star;
+                                                    return (_jsxs("div", { className: "group flex items-start gap-4 p-5 bg-white rounded-2xl shadow-sm hover:shadow-lg border border-gray-100 hover:border-orange-200 transition-all duration-300", children: [_jsx("div", { className: "p-3 bg-orange-50 rounded-xl group-hover:bg-orange-100 transition-colors", children: _jsx(IconComponent, { className: "h-6 w-6 text-orange-500" }) }), _jsxs("div", { children: [_jsx("h3", { className: "font-bold text-gray-900 mb-1.5", children: feature.title }), _jsx("p", { className: "text-sm text-gray-600 font-medium", children: feature.description })] })] }, idx));
                                                 });
-                                            })() }), _jsx("div", { className: "pt-6", children: _jsxs("div", { className: "flex items-center gap-4 p-5 bg-white rounded-2xl shadow-sm border border-gray-100", children: [_jsx("div", { className: "p-3 bg-orange-50 rounded-xl", children: _jsx(Phone, { className: "h-5 w-5 text-orange-500" }) }), _jsxs("div", { children: [_jsx("p", { className: "text-sm text-gray-500 font-medium mb-1", children: "Prefer to call?" }), _jsx("span", { className: "text-lg font-bold text-gray-900", "data-payaza-edit": payaza('reservation', ['phone']), children: layoutConfig?.sections?.reservation?.phone || "(555) 123-4567" })] })] }) })] }), _jsxs("div", { className: "bg-white rounded-[2.5rem] shadow-[0_20px_60px_rgba(0,0,0,0.1)] p-8 md:p-10 border border-gray-100 relative overflow-hidden", children: [_jsx("div", { className: "absolute top-0 right-0 w-64 h-64 bg-orange-50 rounded-full blur-3xl opacity-50 -z-10" }), submitSuccess ? (_jsxs("div", { className: "text-center py-12", children: [_jsx("div", { className: "w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-6", children: _jsx(CheckCircle, { className: "h-10 w-10 text-green-600" }) }), _jsx("h3", { className: "text-2xl font-bold text-gray-900 mb-2", children: "Reservation Confirmed!" }), _jsxs("p", { className: "text-gray-600", children: ["We've sent a confirmation email to ", reservationData.email] })] })) : (_jsxs("form", { onSubmit: handleReservationSubmit, className: "space-y-6", children: [_jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsxs("div", { children: [_jsxs("label", { className: "block text-sm font-bold text-gray-900 mb-3", children: [_jsx(Calendar, { className: "h-4 w-4 inline mr-2 text-orange-500" }), "Date"] }), _jsx("input", { type: "date", required: true, min: minDate, max: maxDateString, value: reservationData.date, onChange: (e) => handleInputChange('date', e.target.value), className: "w-full px-5 py-4 rounded-2xl border-2 border-gray-200 focus:border-orange-500 focus:ring-4 focus:ring-orange-500/10 outline-none transition-all font-medium text-gray-900" })] }), _jsxs("div", { children: [_jsxs("label", { className: "block text-sm font-bold text-gray-900 mb-3", children: [_jsx(Clock, { className: "h-4 w-4 inline mr-2 text-orange-500" }), "Time"] }), _jsxs("select", { required: true, value: reservationData.time, onChange: (e) => handleInputChange('time', e.target.value), className: "w-full px-5 py-4 rounded-2xl border-2 border-gray-200 focus:border-orange-500 focus:ring-4 focus:ring-orange-500/10 outline-none transition-all font-medium text-gray-900", children: [_jsx("option", { value: "", children: "Select time" }), timeSlots.map((time) => (_jsx("option", { value: time, children: time }, time)))] })] })] }), _jsxs("div", { children: [_jsxs("label", { className: "block text-sm font-bold text-gray-900 mb-3", children: [_jsx(Users, { className: "h-4 w-4 inline mr-2 text-orange-500" }), getLayoutText(storeConfig, 'booking.selectDate', 'Number of Guests')] }), _jsxs("select", { required: true, value: reservationData.guests, onChange: (e) => handleInputChange('guests', e.target.value), className: "w-full px-5 py-4 rounded-2xl border-2 border-gray-200 focus:border-orange-500 focus:ring-4 focus:ring-orange-500/10 outline-none transition-all font-medium text-gray-900", children: [[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map((num) => (_jsxs("option", { value: num.toString(), children: [num, " ", num === 1 ? 'Guest' : 'Guests'] }, num))), _jsx("option", { value: "13+", children: "13+ Guests (Large Party)" })] })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-sm font-bold text-gray-900 mb-3", children: getLayoutText(storeConfig, 'common.account', 'Full Name') }), _jsx("input", { type: "text", required: true, value: reservationData.name, onChange: (e) => handleInputChange('name', e.target.value), placeholder: "John Doe", className: "w-full px-5 py-4 rounded-2xl border-2 border-gray-200 focus:border-orange-500 focus:ring-4 focus:ring-orange-500/10 outline-none transition-all font-medium text-gray-900 placeholder:text-gray-400" })] }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsxs("div", { children: [_jsxs("label", { className: "block text-sm font-bold text-gray-900 mb-3", children: [_jsx(Mail, { className: "h-4 w-4 inline mr-2 text-orange-500" }), getLayoutText(storeConfig, 'common.account', 'Email')] }), _jsx("input", { type: "email", required: true, value: reservationData.email, onChange: (e) => handleInputChange('email', e.target.value), placeholder: "john@example.com", className: "w-full px-5 py-4 rounded-2xl border-2 border-gray-200 focus:border-orange-500 focus:ring-4 focus:ring-orange-500/10 outline-none transition-all font-medium text-gray-900 placeholder:text-gray-400" })] }), _jsxs("div", { children: [_jsxs("label", { className: "block text-sm font-bold text-gray-900 mb-3", children: [_jsx(Phone, { className: "h-4 w-4 inline mr-2 text-orange-500" }), getLayoutText(storeConfig, 'common.account', 'Phone')] }), _jsx("input", { type: "tel", required: true, value: reservationData.phone, onChange: (e) => handleInputChange('phone', e.target.value), placeholder: "(555) 123-4567", className: "w-full px-5 py-4 rounded-2xl border-2 border-gray-200 focus:border-orange-500 focus:ring-4 focus:ring-orange-500/10 outline-none transition-all font-medium text-gray-900 placeholder:text-gray-400" })] })] }), _jsxs("div", { children: [_jsxs("label", { className: "block text-sm font-bold text-gray-900 mb-3", children: [_jsx(MessageSquare, { className: "h-4 w-4 inline mr-2 text-orange-500" }), getLayoutText(storeConfig, 'common.account', 'Special Requests (Optional)')] }), _jsx("textarea", { value: reservationData.specialRequests, onChange: (e) => handleInputChange('specialRequests', e.target.value), placeholder: "Dietary restrictions, celebration details, seating preferences...", rows: 4, className: "w-full px-5 py-4 rounded-2xl border-2 border-gray-200 focus:border-orange-500 focus:ring-4 focus:ring-orange-500/10 outline-none transition-all resize-none font-medium text-gray-900 placeholder:text-gray-400" })] }), _jsx(Button, { type: "submit", disabled: isSubmitting, className: "w-full h-16 rounded-2xl bg-gradient-to-r from-orange-600 to-orange-500 hover:from-orange-700 hover:to-orange-600 text-white font-bold text-lg shadow-[0_10px_30px_rgba(249,115,22,0.3)] transition-all hover:scale-[1.02] hover:-translate-y-1 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100 disabled:hover:translate-y-0", children: isSubmitting ? (_jsxs(_Fragment, { children: [_jsx(Clock, { className: "h-5 w-5 mr-2 animate-spin" }), getLayoutText(storeConfig, 'common.account', 'Processing...')] })) : (_jsxs(_Fragment, { children: [_jsx(Calendar, { className: "h-5 w-5 mr-2" }), _jsx("span", { "data-payaza-edit": payaza('reservation', ['submitButtonText']), "data-payaza-section-key": "reservation", children: layoutConfig?.sections?.reservation?.submitButtonText || getLayoutText(storeConfig, 'food.reserveTable', 'Reserve Table') })] })) }), _jsx("p", { className: "text-xs text-center text-gray-500 font-medium", children: "By submitting, you agree to our reservation policy. Cancellations must be made 24 hours in advance." })] }))] })] }) })] }))] }));
+                                            })() }), _jsx("div", { className: "pt-6", children: _jsxs("div", { className: "flex items-center gap-4 p-5 bg-white rounded-2xl shadow-sm border border-gray-100", children: [_jsx("div", { className: "p-3 bg-orange-50 rounded-xl", children: _jsx(Phone, { className: "h-5 w-5 text-orange-500" }) }), _jsxs("div", { children: [_jsx("p", { className: "text-sm text-gray-500 font-medium mb-1", children: "Prefer to call?" }), _jsx("span", { className: "text-lg font-bold text-gray-900", children: layoutConfig?.sections?.reservation?.phone || "(555) 123-4567" })] })] }) })] }), _jsxs("div", { className: "bg-white rounded-[2.5rem] shadow-[0_20px_60px_rgba(0,0,0,0.1)] p-8 md:p-10 border border-gray-100 relative overflow-hidden", children: [_jsx("div", { className: "absolute top-0 right-0 w-64 h-64 bg-orange-50 rounded-full blur-3xl opacity-50 -z-10" }), submitSuccess ? (_jsxs("div", { className: "text-center py-12", children: [_jsx("div", { className: "w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-6", children: _jsx(CheckCircle, { className: "h-10 w-10 text-green-600" }) }), _jsx("h3", { className: "text-2xl font-bold text-gray-900 mb-2", children: "Reservation Confirmed!" }), _jsxs("p", { className: "text-gray-600", children: ["We've sent a confirmation email to ", reservationData.email] })] })) : (_jsxs("form", { onSubmit: handleReservationSubmit, className: "space-y-6", children: [_jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsxs("div", { children: [_jsxs("label", { className: "block text-sm font-bold text-gray-900 mb-3", children: [_jsx(Calendar, { className: "h-4 w-4 inline mr-2 text-orange-500" }), "Date"] }), _jsx("input", { type: "date", required: true, min: minDate, max: maxDateString, value: reservationData.date, onChange: (e) => handleInputChange('date', e.target.value), className: "w-full px-5 py-4 rounded-2xl border-2 border-gray-200 focus:border-orange-500 focus:ring-4 focus:ring-orange-500/10 outline-none transition-all font-medium text-gray-900" })] }), _jsxs("div", { children: [_jsxs("label", { className: "block text-sm font-bold text-gray-900 mb-3", children: [_jsx(Clock, { className: "h-4 w-4 inline mr-2 text-orange-500" }), "Time"] }), _jsxs("select", { required: true, value: reservationData.time, onChange: (e) => handleInputChange('time', e.target.value), className: "w-full px-5 py-4 rounded-2xl border-2 border-gray-200 focus:border-orange-500 focus:ring-4 focus:ring-orange-500/10 outline-none transition-all font-medium text-gray-900", children: [_jsx("option", { value: "", children: "Select time" }), timeSlots.map((time) => (_jsx("option", { value: time, children: time }, time)))] })] })] }), _jsxs("div", { children: [_jsxs("label", { className: "block text-sm font-bold text-gray-900 mb-3", children: [_jsx(Users, { className: "h-4 w-4 inline mr-2 text-orange-500" }), getLayoutText(storeConfig, 'booking.selectDate', 'Number of Guests')] }), _jsxs("select", { required: true, value: reservationData.guests, onChange: (e) => handleInputChange('guests', e.target.value), className: "w-full px-5 py-4 rounded-2xl border-2 border-gray-200 focus:border-orange-500 focus:ring-4 focus:ring-orange-500/10 outline-none transition-all font-medium text-gray-900", children: [[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map((num) => (_jsxs("option", { value: num.toString(), children: [num, " ", num === 1 ? 'Guest' : 'Guests'] }, num))), _jsx("option", { value: "13+", children: "13+ Guests (Large Party)" })] })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-sm font-bold text-gray-900 mb-3", children: getLayoutText(storeConfig, 'common.account', 'Full Name') }), _jsx("input", { type: "text", required: true, value: reservationData.name, onChange: (e) => handleInputChange('name', e.target.value), placeholder: "John Doe", className: "w-full px-5 py-4 rounded-2xl border-2 border-gray-200 focus:border-orange-500 focus:ring-4 focus:ring-orange-500/10 outline-none transition-all font-medium text-gray-900 placeholder:text-gray-400" })] }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsxs("div", { children: [_jsxs("label", { className: "block text-sm font-bold text-gray-900 mb-3", children: [_jsx(Mail, { className: "h-4 w-4 inline mr-2 text-orange-500" }), getLayoutText(storeConfig, 'common.account', 'Email')] }), _jsx("input", { type: "email", required: true, value: reservationData.email, onChange: (e) => handleInputChange('email', e.target.value), placeholder: "john@example.com", className: "w-full px-5 py-4 rounded-2xl border-2 border-gray-200 focus:border-orange-500 focus:ring-4 focus:ring-orange-500/10 outline-none transition-all font-medium text-gray-900 placeholder:text-gray-400" })] }), _jsxs("div", { children: [_jsxs("label", { className: "block text-sm font-bold text-gray-900 mb-3", children: [_jsx(Phone, { className: "h-4 w-4 inline mr-2 text-orange-500" }), getLayoutText(storeConfig, 'common.account', 'Phone')] }), _jsx("input", { type: "tel", required: true, value: reservationData.phone, onChange: (e) => handleInputChange('phone', e.target.value), placeholder: "(555) 123-4567", className: "w-full px-5 py-4 rounded-2xl border-2 border-gray-200 focus:border-orange-500 focus:ring-4 focus:ring-orange-500/10 outline-none transition-all font-medium text-gray-900 placeholder:text-gray-400" })] })] }), _jsxs("div", { children: [_jsxs("label", { className: "block text-sm font-bold text-gray-900 mb-3", children: [_jsx(MessageSquare, { className: "h-4 w-4 inline mr-2 text-orange-500" }), getLayoutText(storeConfig, 'common.account', 'Special Requests (Optional)')] }), _jsx("textarea", { value: reservationData.specialRequests, onChange: (e) => handleInputChange('specialRequests', e.target.value), placeholder: "Dietary restrictions, celebration details, seating preferences...", rows: 4, className: "w-full px-5 py-4 rounded-2xl border-2 border-gray-200 focus:border-orange-500 focus:ring-4 focus:ring-orange-500/10 outline-none transition-all resize-none font-medium text-gray-900 placeholder:text-gray-400" })] }), _jsx(Button, { type: "submit", disabled: isSubmitting, className: "w-full h-16 rounded-2xl bg-gradient-to-r from-orange-600 to-orange-500 hover:from-orange-700 hover:to-orange-600 text-white font-bold text-lg shadow-[0_10px_30px_rgba(249,115,22,0.3)] transition-all hover:scale-[1.02] hover:-translate-y-1 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100 disabled:hover:translate-y-0", children: isSubmitting ? (_jsxs(_Fragment, { children: [_jsx(Clock, { className: "h-5 w-5 mr-2 animate-spin" }), getLayoutText(storeConfig, 'common.account', 'Processing...')] })) : (_jsxs(_Fragment, { children: [_jsx(Calendar, { className: "h-5 w-5 mr-2" }), getLayoutText(storeConfig, 'food.reserveTable', 'Reserve Table')] })) }), _jsx("p", { className: "text-xs text-center text-gray-500 font-medium", children: "By submitting, you agree to our reservation policy. Cancellations must be made 24 hours in advance." })] }))] })] }) })] })), layoutConfig?.sections?.marketing?.show !== false && (_jsx("section", { "data-section": "marketing", className: "py-16 md:py-24 px-4 sm:px-6 lg:px-8", children: _jsx("div", { className: "container mx-auto max-w-7xl", children: _jsxs("div", { className: "relative rounded-[2.5rem] overflow-hidden bg-gray-900 text-white isolate", children: [_jsx("div", { className: "absolute inset-0 opacity-20", children: _jsx(Image, { src: layoutConfig?.sections?.marketing?.backgroundImage || getBannerImage(storeConfig, 'newsletter_bg', "https://images.unsplash.com/photo-1555939594-58d7cb561ad1?q=80&w=2070&auto=format&fit=crop"), alt: "Pattern", fill: true, className: "object-cover", unoptimized: true }) }), _jsx("div", { className: "absolute inset-0 bg-gradient-to-r from-gray-900 via-gray-900/80 to-transparent" }), _jsxs("div", { className: "relative z-10 flex flex-col lg:flex-row items-center justify-between p-12 lg:p-20 gap-12", children: [_jsxs("div", { className: "max-w-xl space-y-6", children: [_jsx("span", { className: "inline-block px-4 py-1.5 bg-orange-500 text-white rounded-full text-sm font-bold uppercase tracking-widest shadow-lg shadow-orange-500/30", children: layoutConfig?.sections?.marketing?.badge || "Limited Time" }), _jsx("h2", { className: "text-4xl md:text-5xl font-black leading-tight", children: layoutConfig?.sections?.marketing?.title || "Get 20% Off Your <br /> First Order" }), _jsx("p", { className: "text-gray-300 text-lg leading-relaxed", children: layoutConfig?.sections?.marketing?.subtitle || "Join our food lover's community and get exclusive access to new menu items and special offers." }), _jsxs("div", { className: "flex flex-col sm:flex-row gap-4 pt-4", children: [_jsx("input", { type: "email", placeholder: layoutConfig?.sections?.marketing?.newsletterPlaceholder || "Enter your email address", value: newsletterEmail, onChange: (e) => setNewsletterEmail(e.target.value), className: "px-6 py-4 rounded-full bg-white/10 border border-white/20 text-white placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-orange-500 flex-1 min-w-[300px]" }), _jsx(Button, { onClick: handleSubscribe, size: "lg", className: "rounded-full px-8 py-6 bg-orange-600 hover:bg-orange-700 font-bold text-lg shadow-lg shadow-orange-600/30", children: layoutConfig?.sections?.marketing?.newsletterButton || "Subscribe" })] })] }), _jsx("div", { className: "hidden lg:block relative", children: _jsx("div", { className: "w-80 h-80 rounded-full bg-gradient-to-tr from-orange-500 to-yellow-500 p-1 animate-spin-slow", children: _jsx("div", { className: "w-full h-full rounded-full bg-gray-900 flex items-center justify-center p-8 text-center", children: _jsxs("div", { children: [_jsx("span", { className: "block text-8xl font-black text-transparent bg-clip-text bg-gradient-to-r from-orange-400 to-yellow-400", children: layoutConfig?.sections?.marketing?.promoDiscount || "20%" }), _jsx("span", { className: "text-2xl font-bold text-white tracking-widest uppercase", children: "OFF" })] }) }) }) })] })] }) }) }))] }));
 }

package/dist/layouts/food/index.js

@@ -1,9 +1,9 @@
 // Savory Bites (food) layout — fully sandboxed exports
-export { FoodHomePage } from './components/FoodHomePage.js';
-export { FoodProductsPage } from './pages/ProductsPage.js';
-export { FoodProductDetailPage } from './pages/ProductDetailPage.js';
-export { FoodCategoryPage } from './pages/CategoryPage.js';
-export { FoodCategoriesPage } from './pages/CategoriesPage.js';
-export { FoodMenuPage } from './pages/MenuPage.js';
-export { FoodAboutPage } from './pages/AboutPage.js';
-export { FoodContactPage } from './pages/ContactPage.js';
+export { FoodHomePage } from './components/FoodHomePage';
+export { FoodProductsPage } from './pages/ProductsPage';
+export { FoodProductDetailPage } from './pages/ProductDetailPage';
+export { FoodCategoryPage } from './pages/CategoryPage';
+export { FoodCategoriesPage } from './pages/CategoriesPage';
+export { FoodMenuPage } from './pages/MenuPage';
+export { FoodAboutPage } from './pages/AboutPage';
+export { FoodContactPage } from './pages/ContactPage';

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"AboutPage.d.ts","sourceRoot":"","sources":["../../../../src/layouts/food/pages/AboutPage.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAUhD,UAAU,cAAc;IACtB,WAAW,EAAE,WAAW,CAAC;CAC1B;AAED,wBAAgB,aAAa,CAAC,EAAE,WAAW,EAAE,aAAa,EAAE,EAAE,cAAc,2CA+U3E"}
+{"version":3,"file":"AboutPage.d.ts","sourceRoot":"","sources":["../../../../src/layouts/food/pages/AboutPage.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAOhD,UAAU,cAAc;IACtB,WAAW,EAAE,WAAW,CAAC;CAC1B;AAED,wBAAgB,SAAS,CAAC,EAAE,WAAW,EAAE,aAAa,EAAE,EAAE,cAAc,2CAkQvE"}

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

@@ -1,67 +1,66 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Heart, MapPin, Clock, Mail, ArrowRight } from 'lucide-react';
-import { Button } from '../../../components/ui/button.js';
-import { DotPattern } from '../../../components/ui/background-patterns.js';
-import { DynamicIcon } from '../../../components/ui/dynamic-icon.js';
-import { useStore } from '../../../lib/store-context.js';
+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 { useStore } from '../../../lib/store-context';
 import Image from 'next/image';
-import { payazaInlineBindingProps, payazaIconBindingProps, encodePayazaFieldKey } from '../../../preview/canvas/field-key.js';
-import { showLayoutDecorativeBadges } from '../../../lib/layout-badges.js';
-export function FoodAboutPage({ storeConfig: initialConfig }) {
+export function AboutPage({ storeConfig: initialConfig }) {
     const { store } = useStore();
     const storeConfig = store || initialConfig;
     const menuItems = storeConfig.menuItems || [];
     const primaryColor = storeConfig.branding.primaryColor;
     const secondaryColor = storeConfig.branding.secondaryColor || primaryColor;
     const aboutConfig = storeConfig.layoutConfig?.pages?.about;
-    const isPreview = !!storeConfig.isPreview;
-    // Header Data — check schema path (aboutHero) first, then legacy sub-objects for backward compat
-    const header = aboutConfig?.aboutHero || aboutConfig?.aboutHeader;
-    const heroImage = header?.backgroundImage || header?.image || aboutConfig?.heroImage || 'https://images.unsplash.com/photo-1559339352-11d035aa65de?q=80&w=1974&auto=format&fit=crop';
+    // Header Data
+    const header = aboutConfig?.aboutHeader;
+    const heroImage = header?.image || aboutConfig?.heroImage || 'https://images.unsplash.com/photo-1559339352-11d035aa65de?q=80&w=1974&auto=format&fit=crop';
     const pageTitle = header?.title || aboutConfig?.title || "Crafting Experiences, Delivering Joy.";
-    const missionStatement = header?.subtitle || header?.description || aboutConfig?.missionStatement || storeConfig.description;
+    const missionStatement = header?.description || aboutConfig?.missionStatement || storeConfig.description;
     const showBadge = header?.showBadge !== false;
     const badgeText = header?.badgeText || "Est. 2024";
-    // Content Data — check schema path (ourStory) first, then legacy sub-objects for backward compat
-    const content = aboutConfig?.ourStory || aboutConfig?.aboutContent;
+    // Content Data
+    const content = aboutConfig?.aboutContent;
     const sectionLabel = content?.label || "Who We Are";
     const sectionTitle = content?.title || "Our Journey";
     const pageContent = content?.content || aboutConfig?.content;
-    // showGallery: schema toggle (defaults false — single image is the default)
-    const showGallery = content?.showGallery === true;
-    const galleryImages = content?.galleryImages || content?.gallerySection || aboutConfig?.gallerySection;
-    // Story image: prefer ourStory.image, then legacy aboutContent.image
-    const storyImage = content?.image || 'https://images.unsplash.com/photo-1522202176988-66273c2fd55f?q=80&w=2071&auto=format&fit=crop';
-    const teamBadgeTitle = content?.teamBadgeTitle || 'The Dream Team';
-    const teamBadgeSubtitle = content?.teamBadgeSubtitle || 'Working together to serve you better';
-    // contactInfoSection config
-    const contactInfoConfig = aboutConfig?.contactInfoSection;
-    const showContactInfoSection = contactInfoConfig?.show !== false;
-    const contactInfoTitle = contactInfoConfig?.title || 'Get in Touch';
-    const contactInfoDescription = 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.";
-    const showAddressCard = contactInfoConfig?.showAddress !== false;
-    const showEmailCard = contactInfoConfig?.showEmail !== false;
-    const showHoursCard = contactInfoConfig?.showHours !== false;
+    const showGallery = content?.showGallery !== false;
+    const galleryImages = content?.gallerySection || aboutConfig?.gallerySection;
     // Stats Data
     const stats = aboutConfig?.statsSection;
     const showStatsSection = stats?.show !== false;
     const statItems = stats?.items || [
-        { label: 'Happy Foodies', value: '15k+' },
-        { label: 'Menu Items', value: menuItems?.length ? `${menuItems.length}+` : '40+' },
-        { label: 'Years of Cooking', value: '8+' },
-        { label: 'Expert Chefs', value: '12+' }
+        { label: "Happy Foodies", value: "15k+" },
+        { label: "Menu Items", value: menuItems?.length ? `${menuItems.length}+` : "40+" },
+        { label: "Years of Cooking", value: "8+" },
+        { label: "Expert Chefs", value: "12+" }
     ];
-    const valuesConfig = aboutConfig?.values;
-    const showValues = valuesConfig?.show !== false;
-    const defaultValues = [
-        { icon: 'Award', title: 'Fresh Ingredients', description: 'We source the finest local ingredients for every dish we prepare.' },
-        { icon: 'Users', title: 'Community Driven', description: "We're proud to be a local favorite and give back to our community." },
-        { icon: 'Heart', title: 'Made with Love', description: 'Every meal is prepared with passion and attention to detail.' },
-        { icon: 'Leaf', title: 'Sustainability', description: 'Committed to eco-friendly packaging and responsible sourcing.' }
+    const values = [
+        {
+            icon: Award,
+            title: "Fresh Ingredients",
+            description: "We source the finest local ingredients for every dish we prepare."
+        },
+        {
+            icon: Users,
+            title: "Community Driven",
+            description: "We're proud to be a local favorite and give back to our community."
+        },
+        {
+            icon: Heart,
+            title: "Made with Love",
+            description: "Every meal is prepared with passion and attention to detail."
+        },
+        {
+            icon: Leaf,
+            title: "Sustainability",
+            description: "Committed to eco-friendly packaging and responsible sourcing."
+        }
     ];
-    const valuesItems = valuesConfig?.items || defaultValues;
-    return (_jsxs("div", { className: "min-h-screen bg-white pb-20 overflow-hidden", children: [_jsxs("section", { "data-section": "aboutHero", "data-payaza-section-key": "aboutHero", "data-payaza-page": "about", className: "relative h-[60vh] min-h-[500px] w-full overflow-hidden", children: [_jsxs("div", { className: "absolute inset-0", "data-payaza-image": isPreview ? encodePayazaFieldKey('aboutHero', ['backgroundImage']) : undefined, children: [_jsx(Image, { src: heroImage, alt: "About Us", fill: true, className: "w-full h-full object-cover transform scale-105 animate-pulse-slow", unoptimized: true }), _jsx("div", { className: "absolute inset-0 bg-gradient-to-r from-black/80 via-black/50 to-transparent" })] }), _jsx("div", { className: "absolute inset-0 flex items-center", children: _jsx("div", { className: "container mx-auto px-4 sm:px-6 lg:px-8", children: _jsxs("div", { className: "max-w-3xl animate-fade-in-up", children: [showLayoutDecorativeBadges() && showBadge && (_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", ...payazaInlineBindingProps(isPreview, 'aboutHero', ['badgeText']), children: [_jsx("span", { className: "w-2 h-2 rounded-full bg-white animate-pulse" }), badgeText] })), _jsx("h1", { className: "text-5xl md:text-7xl font-bold text-white mb-6 tracking-tight leading-tight", ...payazaInlineBindingProps(isPreview, 'aboutHero', ['title']), children: pageTitle }), _jsx("p", { className: "text-xl md:text-2xl text-gray-200 max-w-2xl leading-relaxed font-light", ...payazaInlineBindingProps(isPreview, 'aboutHero', ['subtitle'], { rich: 'inline' }), children: missionStatement })] }) }) })] }), content?.show !== false && (_jsxs("section", { "data-section": "ourStory", "data-payaza-section-key": "ourStory", "data-payaza-page": "about", className: "py-24 px-4 sm:px-6 lg:px-8 relative", children: [_jsx("div", { className: "absolute top-0 right-0 -mt-24 -mr-24 w-96 h-96 bg-gray-50 rounded-full blur-3xl -z-10" }), _jsx("div", { className: "container mx-auto max-w-7xl", children: _jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-16 items-center", children: [_jsxs("div", { className: "relative", children: [showGallery && 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", "data-payaza-image": isPreview ? encodePayazaFieldKey('ourStory', ['image']) : undefined, 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", ...payazaInlineBindingProps(isPreview, 'ourStory', ['teamBadgeTitle']), children: teamBadgeTitle }), _jsx("p", { className: "text-white/80 text-sm", ...payazaInlineBindingProps(isPreview, 'ourStory', ['teamBadgeSubtitle']), children: teamBadgeSubtitle })] })] })), _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 }, ...payazaInlineBindingProps(isPreview, 'ourStory', ['label']), children: sectionLabel }), _jsx("h2", { className: "text-4xl md:text-5xl font-black text-gray-900 mb-6 tracking-tight", ...payazaInlineBindingProps(isPreview, 'ourStory', ['title']), children: sectionTitle }), _jsxs("div", { className: "prose prose-lg text-gray-600 leading-relaxed space-y-6", ...payazaInlineBindingProps(isPreview, 'ourStory', ['content'], { rich: 'inline' }), children: [pageContent?.split('\n').map((paragraph, idx) => (_jsx("p", { children: paragraph }, idx))), !pageContent && (_jsxs(_Fragment, { children: [_jsxs("p", { children: ["Founded with a bold vision to redefine excellence in the ", _jsx("span", { className: "font-semibold text-gray-900", children: storeConfig.type }), " industry, ", storeConfig.name, " has grown from a small passion project into a beloved brand. We believe in the power of quality, innovation, and community."] }), _jsx("p", { children: "Every day, we strive to bring you the best products, curated with care and delivered with a smile. Our team is dedicated to ensuring that your experience with us is nothing short of exceptional." })] }))] })] }), showValues && (_jsx("div", { "data-section": "values", "data-payaza-section-key": "values", "data-payaza-page": "about", className: "grid grid-cols-1 sm:grid-cols-2 gap-8", children: valuesItems.map((item, idx) => {
-                                                return (_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` }, ...payazaIconBindingProps(isPreview, 'values', ['items', String(idx), 'icon']), children: _jsx(DynamicIcon, { name: item.icon || '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", ...payazaInlineBindingProps(isPreview, 'values', ['items', String(idx), 'title']), children: item.title }), _jsx("p", { className: "text-gray-600 text-sm leading-relaxed", ...payazaInlineBindingProps(isPreview, 'values', ['items', String(idx), 'description']), children: item.description })] })] }, idx));
-                                            }) }))] })] }) })] })), showStatsSection && (_jsxs("section", { "data-section": "statsSection", "data-payaza-section-key": "statsSection", "data-payaza-page": "about", className: "py-20 relative overflow-hidden", children: [_jsx("div", { className: "absolute inset-0 opacity-10", children: _jsx(DotPattern, { color: primaryColor, cx: 2, cy: 2, cr: 2, width: 30, height: 30 }) }), _jsx("div", { className: "absolute inset-0", style: { backgroundColor: `${secondaryColor}15` } }), _jsx("div", { className: "container mx-auto px-4 relative z-10", children: _jsx("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-8 md:gap-12", children: statItems.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 }, ...payazaInlineBindingProps(isPreview, 'statsSection', ['items', String(idx), 'value']), children: stat.value }), _jsx("div", { className: "text-gray-600 font-bold uppercase tracking-widest text-xs md:text-sm", ...payazaInlineBindingProps(isPreview, 'statsSection', ['items', String(idx), 'label']), children: stat.label })] }, idx))) }) })] })), showContactInfoSection && (_jsx("section", { "data-section": "contactInfoSection", "data-payaza-section-key": "contactInfoSection", "data-payaza-page": "about", className: "py-24 px-4 sm:px-6 lg:px-8 bg-white", children: _jsxs("div", { className: "container mx-auto max-w-6xl", children: [_jsxs("div", { className: "text-center mb-16", children: [_jsx("h2", { className: "text-3xl md:text-4xl font-bold text-gray-900 mb-4", ...payazaInlineBindingProps(isPreview, 'contactInfoSection', ['title']), children: contactInfoTitle }), _jsx("p", { className: "text-gray-500 max-w-xl mx-auto", ...payazaInlineBindingProps(isPreview, 'contactInfoSection', ['description']), children: contactInfoDescription })] }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-8", children: [showAddressCard && (_jsxs("div", { className: "group p-8 rounded-[2rem] bg-gray-50 border border-gray-100 hover:shadow-xl hover:-translate-y-2 transition-all duration-300 text-center", children: [_jsx("div", { className: "w-16 h-16 mx-auto mb-6 rounded-2xl bg-white shadow-sm flex items-center justify-center group-hover:scale-110 transition-transform", children: _jsx(MapPin, { className: "h-8 w-8 text-gray-400 group-hover:text-blue-500 transition-colors" }) }), _jsx("h3", { className: "font-bold text-xl text-gray-900 mb-3", children: "Visit Us" }), _jsxs("p", { className: "text-gray-600 leading-relaxed", children: [storeConfig.contactInfo?.address?.street || '123 Store Street', _jsx("br", {}), storeConfig.contactInfo?.address?.city || 'Commerce City', ", ", storeConfig.contactInfo?.address?.state || 'ST', " ", storeConfig.contactInfo?.address?.zipCode || '12345'] })] })), showEmailCard && (_jsxs("div", { className: "group p-8 rounded-[2rem] bg-gray-50 border border-gray-100 hover:shadow-xl hover:-translate-y-2 transition-all duration-300 text-center relative overflow-hidden", children: [_jsx("div", { className: "absolute inset-0 border-2 border-transparent group-hover:border-orange-100 rounded-[2rem] transition-colors pointer-events-none" }), _jsx("div", { className: "w-16 h-16 mx-auto mb-6 rounded-2xl bg-white shadow-sm flex items-center justify-center group-hover:scale-110 transition-transform", children: _jsx(Mail, { className: "h-8 w-8 text-gray-400 group-hover:text-orange-500 transition-colors" }) }), _jsx("h3", { className: "font-bold text-xl text-gray-900 mb-3", children: "Email Us" }), _jsxs("p", { className: "text-gray-600 leading-relaxed mb-4", children: [storeConfig.contactInfo?.email || `hello@${storeConfig.slug}.com`, _jsx("br", {}), storeConfig.contactInfo?.phone || '+1 (555) 123-4567'] }), _jsxs(Button, { variant: "link", className: "text-orange-600 font-bold p-0 h-auto hover:no-underline group-hover:translate-x-1 transition-transform", children: ["Send a message ", _jsx(ArrowRight, { className: "ml-1 h-4 w-4" })] })] })), showHoursCard && (_jsxs("div", { className: "group p-8 rounded-[2rem] bg-gray-50 border border-gray-100 hover:shadow-xl hover:-translate-y-2 transition-all duration-300 text-center", children: [_jsx("div", { className: "w-16 h-16 mx-auto mb-6 rounded-2xl bg-white shadow-sm flex items-center justify-center group-hover:scale-110 transition-transform", children: _jsx(Clock, { className: "h-8 w-8 text-gray-400 group-hover:text-green-500 transition-colors" }) }), _jsx("h3", { className: "font-bold text-xl text-gray-900 mb-3", children: "Opening Hours" }), _jsx("p", { className: "text-gray-600 leading-relaxed", children: storeConfig.locations?.[0]?.openingHours || (_jsxs(_Fragment, { children: ["Mon - Fri: 9am - 6pm", _jsx("br", {}), "Sat - Sun: 10am - 4pm"] })) })] }))] })] }) }))] }));
+    return (_jsxs("div", { className: "min-h-screen bg-white pb-20 overflow-hidden", children: [_jsxs("section", { "data-section": "hero", 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" }), _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: [showBadge && (_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" }), badgeText] })), _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 })] }) }) })] }), content?.show !== false && (_jsxs("section", { "data-section": "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: [showGallery && 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" }) }, 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" }), _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: sectionLabel }), _jsx("h2", { className: "text-4xl md:text-5xl font-black text-gray-900 mb-6 tracking-tight", children: sectionTitle }), _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", { "data-section": "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: [
+                                { label: "Happy Foodies", value: "15k+" },
+                                { label: "Menu Items", value: menuItems?.length ? `${menuItems.length}+` : "40+" },
+                                { label: "Years of Cooking", value: "8+" },
+                                { label: "Expert Chefs", value: "12+" }
+                            ].map((stat, idx) => (_jsxs("div", { className: "text-center group", children: [_jsx("div", { className: "text-5xl md:text-6xl font-black mb-2 tracking-tight transition-transform group-hover:scale-110 duration-300", style: { color: primaryColor }, children: stat.value }), _jsx("div", { className: "text-gray-600 font-bold uppercase tracking-widest text-xs md:text-sm", children: stat.label })] }, idx))) }) })] }), _jsx("section", { "data-section": "contact-info", className: "py-24 px-4 sm:px-6 lg:px-8 bg-white", children: _jsxs("div", { className: "container mx-auto max-w-6xl", children: [_jsxs("div", { className: "text-center mb-16", children: [_jsx("h2", { className: "text-3xl md:text-4xl font-bold text-gray-900 mb-4", children: "Get in Touch" }), _jsx("p", { className: "text-gray-500 max-w-xl mx-auto", children: "Have questions? We'd love to hear from you. Reach out to our team via email, phone, or visit us at our store." })] }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-8", children: [_jsxs("div", { className: "group p-8 rounded-[2rem] bg-gray-50 border border-gray-100 hover:shadow-xl hover:-translate-y-2 transition-all duration-300 text-center", children: [_jsx("div", { className: "w-16 h-16 mx-auto mb-6 rounded-2xl bg-white shadow-sm flex items-center justify-center group-hover:scale-110 transition-transform", children: _jsx(MapPin, { className: "h-8 w-8 text-gray-400 group-hover:text-blue-500 transition-colors" }) }), _jsx("h3", { className: "font-bold text-xl text-gray-900 mb-3", children: "Visit Us" }), _jsxs("p", { className: "text-gray-600 leading-relaxed", children: [storeConfig.contactInfo?.address?.street || '123 Store Street', _jsx("br", {}), storeConfig.contactInfo?.address?.city || 'Commerce City', ", ", storeConfig.contactInfo?.address?.state || 'ST', " ", storeConfig.contactInfo?.address?.zipCode || '12345'] })] }), _jsxs("div", { className: "group p-8 rounded-[2rem] bg-gray-50 border border-gray-100 hover:shadow-xl hover:-translate-y-2 transition-all duration-300 text-center relative overflow-hidden", children: [_jsx("div", { className: "absolute inset-0 border-2 border-transparent group-hover:border-orange-100 rounded-[2rem] transition-colors pointer-events-none" }), _jsx("div", { className: "w-16 h-16 mx-auto mb-6 rounded-2xl bg-white shadow-sm flex items-center justify-center group-hover:scale-110 transition-transform", children: _jsx(Mail, { className: "h-8 w-8 text-gray-400 group-hover:text-orange-500 transition-colors" }) }), _jsx("h3", { className: "font-bold text-xl text-gray-900 mb-3", children: "Email Us" }), _jsxs("p", { className: "text-gray-600 leading-relaxed mb-4", children: [storeConfig.contactInfo?.email || `hello@${storeConfig.slug}.com`, _jsx("br", {}), storeConfig.contactInfo?.phone || '+1 (555) 123-4567'] }), _jsxs(Button, { variant: "link", className: "text-orange-600 font-bold p-0 h-auto hover:no-underline group-hover:translate-x-1 transition-transform", children: ["Send a message ", _jsx(ArrowRight, { className: "ml-1 h-4 w-4" })] })] }), _jsxs("div", { className: "group p-8 rounded-[2rem] bg-gray-50 border border-gray-100 hover:shadow-xl hover:-translate-y-2 transition-all duration-300 text-center", children: [_jsx("div", { className: "w-16 h-16 mx-auto mb-6 rounded-2xl bg-white shadow-sm flex items-center justify-center group-hover:scale-110 transition-transform", children: _jsx(Clock, { className: "h-8 w-8 text-gray-400 group-hover:text-green-500 transition-colors" }) }), _jsx("h3", { className: "font-bold text-xl text-gray-900 mb-3", children: "Opening Hours" }), _jsx("p", { className: "text-gray-600 leading-relaxed", children: storeConfig.locations?.[0]?.openingHours || (_jsxs(_Fragment, { children: ["Mon - Fri: 9am - 6pm", _jsx("br", {}), "Sat - Sun: 10am - 4pm"] })) })] })] })] }) })] }));
 }