storefront-layouts 1.0.18 → 1.0.19

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

@@ -1,59 +1,66 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Users, Award, Heart, Leaf, MapPin, Clock, Mail, ArrowRight } from 'lucide-react';
+import Link from 'next/link';
+import { ArrowRight } from 'lucide-react';
 import { Button } from '../../../components/ui/button.js';
 import { DotPattern } from '../../../components/ui/background-patterns.js';
 import { useStore } from '../../../lib/store-context.js';
+import { DynamicIcon } from '../../../components/ui/dynamic-icon.js';
 import Image from 'next/image';
 import { SafeRichHtml } from '../../../components/rich-text/SafeRichHtml.js';
 import { RichTextExcerpt } from '../../../components/rich-text/RichTextExcerpt.js';
 import { storySectionImage, storySectionLabel, storySectionTitle, storyTeamSubtitle, storyTeamTitle, } from '../../shared/about-story-media.js';
+import { BOOKING_DEFAULT_ABOUT_STATS, BOOKING_DEFAULT_ABOUT_VALUES, normalizeAboutContactInfoCards, resolveAboutPageValueItems, resolveBookingAboutStats, } from '../../booking/components/booking-about-defaults.js';
+import { useClothingPayaza } from '../../clothing/payaza-bindings.js';
+import { payazaGroupBindingProps } from '../../../preview/canvas/field-key.js';
 export function AboutPage({ storeConfig: initialConfig }) {
     const { store } = useStore();
     const storeConfig = store || initialConfig;
     const primaryColor = storeConfig.branding.primaryColor;
     const secondaryColor = storeConfig.branding.secondaryColor || primaryColor;
     const aboutConfig = storeConfig.layoutConfig?.pages?.about;
-    const heroConfig = aboutConfig?.hero || aboutConfig;
-    const storyConfig = aboutConfig?.story || aboutConfig;
+    const heroConfig = aboutConfig?.hero;
+    const storyConfig = aboutConfig?.story;
+    const statsConfig = aboutConfig?.stats;
+    const contactRaw = aboutConfig?.['contact-info'];
+    const contactInfo = contactRaw
+        ? normalizeAboutContactInfoCards(contactRaw)
+        : undefined;
+    const visitCard = (contactInfo?.visitCard || {});
+    const emailCard = (contactInfo?.emailCard || {});
+    const hoursCard = (contactInfo?.hoursCard || {});
+    const valuesConfig = aboutConfig?.values || storeConfig.layoutConfig?.sections?.values;
+    const valuesItems = resolveAboutPageValueItems(storeConfig.layoutConfig, BOOKING_DEFAULT_ABOUT_VALUES);
+    const { section, edit, image, icon, isPreview } = useClothingPayaza(storeConfig, 'about');
     const heroImage = heroConfig?.heroImage ||
-        aboutConfig?.heroImage ||
         'https://images.unsplash.com/photo-1522071820081-009f0129c71c?q=80&w=2070&auto=format&fit=crop';
-    const pageTitle = heroConfig?.title || aboutConfig?.title || "Crafting Experiences, Delivering Joy.";
-    const pageContent = storyConfig?.content || aboutConfig?.content || storeConfig.description;
-    const missionStatement = heroConfig?.missionStatement || aboutConfig?.missionStatement;
-    const galleryImages = storyConfig?.gallerySection || aboutConfig?.gallerySection;
+    const pageTitle = heroConfig?.title || 'Crafting Experiences, Delivering Joy.';
+    const missionStatement = heroConfig?.missionStatement || storeConfig.description;
+    const rawHeroBadge = heroConfig?.badgeText ?? heroConfig?.establishedYear;
+    const heroBadgeText = rawHeroBadge === '' ? null : (typeof rawHeroBadge === 'string' ? rawHeroBadge.trim() : '') || 'Est. 2024';
+    const statItems = resolveBookingAboutStats(statsConfig, { servicesCount: storeConfig.services?.length ?? 0 }, BOOKING_DEFAULT_ABOUT_STATS);
+    const statGridCols = statItems.length >= 4
+        ? 'md:grid-cols-4'
+        : statItems.length === 3
+            ? 'md:grid-cols-3'
+            : statItems.length === 1
+                ? 'md:grid-cols-1'
+                : 'md:grid-cols-2';
+    const heroTextColor = (value) => typeof value === 'string' && /^#[0-9A-Fa-f]{6}$/i.test(value.trim()) ? value.trim() : undefined;
+    const badgeColor = heroTextColor(heroConfig?.badgeTextColor);
+    const headlineColor = heroTextColor(heroConfig?.titleColor);
+    const missionColor = heroTextColor(heroConfig?.missionStatementColor);
+    const overlayColor = heroTextColor(heroConfig?.imageOverlayColor);
+    const pageContent = storyConfig?.content || storeConfig.description;
     const storyImage = storySectionImage(storyConfig);
     const storyLabel = storySectionLabel(storyConfig);
     const storyTitle = storySectionTitle(storyConfig);
     const storyCaptionTitle = storyTeamTitle(storyConfig);
     const storyCaptionSubtitle = storyTeamSubtitle(storyConfig);
-    const values = [
-        {
-            icon: Award,
-            title: "Certified Experts",
-            description: "Our professionals are highly trained and fully certified."
-        },
-        {
-            icon: Users,
-            title: "Personalized Care",
-            description: "We tailor every service to your specific needs and goals."
-        },
-        {
-            icon: Heart,
-            title: "Compassion",
-            description: "We care deeply about your well-being and results."
-        },
-        {
-            icon: Leaf,
-            title: "Premium Products",
-            description: "We use only the best tools and products for our services."
-        }
-    ];
-    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: [_jsxs("div", { className: "inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-white/10 backdrop-blur-md border border-white/20 text-white text-sm font-medium mb-6", children: [_jsx("span", { className: "w-2 h-2 rounded-full bg-white animate-pulse" }), "Est. 2024"] }), _jsx("h1", { className: "text-5xl md:text-7xl font-bold text-white mb-6 tracking-tight leading-tight", children: pageTitle }), _jsx(SafeRichHtml, { value: missionStatement || storeConfig.description, as: "div", className: "text-xl md:text-2xl text-gray-200 max-w-2xl leading-relaxed font-light [&_p]:mb-0" })] }) }) })] }), _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: [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: storyImage, alt: storyCaptionTitle, 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: storyCaptionTitle }), _jsx("p", { className: "text-white/80 text-sm", children: storyCaptionSubtitle })] })] })), _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: storyLabel }), _jsx("h2", { className: "text-4xl md:text-5xl font-black text-gray-900 mb-6 tracking-tight", children: storyTitle }), _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(RichTextExcerpt, { value: item.description, as: "p", className: "text-gray-600 text-sm leading-relaxed" })] })] }, 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: "Bookings Completed", value: "8k+" },
-                                { label: "Expert Staff", value: "15+" },
-                                { label: "Services Offered", value: storeConfig.services?.length ? `${storeConfig.services.length}+` : "20+" },
-                                { label: "Years Experience", value: "10+" }
-                            ].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"] })) })] })] })] }) })] }));
+    const emailCtaLabel = emailCard.ctaLabel || 'Send a message';
+    const emailCtaLink = emailCard.ctaLink || '/contact';
+    return (_jsxs("div", { className: "min-h-screen bg-white pb-20 overflow-hidden", children: [heroConfig?.show !== false && (_jsxs("section", { ...section('hero'), className: "relative h-[60vh] min-h-[500px] w-full overflow-hidden", children: [_jsxs("div", { className: "absolute inset-0", ...image('hero', ['heroImage']), children: [_jsx(Image, { src: heroImage, alt: "About Us", fill: true, className: "w-full h-full object-cover transform scale-105 animate-pulse-slow" }), overlayColor ? (_jsx("div", { className: "absolute inset-0", style: {
+                                    background: `linear-gradient(to right, ${overlayColor}d9, ${overlayColor}80, transparent)`,
+                                } })) : (_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: [heroBadgeText ? (_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" }), _jsx("span", { ...edit('hero', ['badgeText']), style: badgeColor ? { color: badgeColor } : undefined, children: heroBadgeText })] })) : null, _jsx("h1", { className: "text-5xl md:text-7xl font-bold text-white mb-6 tracking-tight leading-tight", style: headlineColor ? { color: headlineColor } : undefined, ...edit('hero', ['title']), children: pageTitle }), _jsx("div", { style: missionColor ? { color: missionColor } : undefined, ...edit('hero', ['missionStatement']), children: _jsx(SafeRichHtml, { value: missionStatement, as: "div", className: "text-xl md:text-2xl text-gray-200 max-w-2xl leading-relaxed font-light [&_p]:mb-0" }) })] }) }) })] })), storyConfig?.show !== false && (_jsxs("section", { ...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-12 lg:gap-20 items-start", children: [_jsx("div", { className: "relative", children: _jsxs("div", { className: "relative aspect-[4/5] rounded-[2rem] overflow-hidden shadow-2xl", ...image('story', ['storyImage']), children: [_jsx(Image, { src: storyImage, alt: storyCaptionTitle, 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", ...edit('story', ['galleryOverlayTitle']), children: storyCaptionTitle }), _jsx("p", { className: "text-white/80 text-sm", ...edit('story', ['galleryOverlaySubtitle']), children: storyCaptionSubtitle })] })] }) }), _jsxs("div", { className: "flex flex-col gap-14 lg:gap-16 pt-4 lg:pt-2 lg:pl-2", children: [_jsxs("div", { className: "space-y-8", children: [_jsx("span", { className: "text-sm font-bold uppercase tracking-[0.2em] mb-1 block", style: { color: primaryColor }, ...edit('story', ['sectionLabel']), children: storyLabel }), _jsx("h2", { className: "text-4xl md:text-5xl font-black text-gray-900 tracking-tight leading-[1.1]", ...edit('story', ['sectionHeading']), children: storyTitle }), _jsx("div", { className: "prose prose-lg max-w-none text-gray-600 leading-[1.75] space-y-5", ...edit('story', ['content']), children: pageContent?.split('\n').map((paragraph, idx) => (_jsx("p", { children: paragraph }, idx))) })] }), valuesConfig?.show !== false && valuesItems.length > 0 && (_jsx("div", { ...section('values'), className: "grid grid-cols-1 sm:grid-cols-2 pt-12 border-t border-gray-100", style: { columnGap: '2.5rem', rowGap: '3rem' }, children: valuesItems.map((item, idx) => (_jsxs("div", { className: "flex gap-5 group", ...payazaGroupBindingProps(isPreview, 'values', ['items', String(idx)]), children: [_jsx("div", { className: "flex-shrink-0", children: _jsx("div", { className: "w-14 h-14 rounded-2xl flex items-center justify-center transition-colors group-hover:bg-gray-100", style: { backgroundColor: `${primaryColor}10` }, ...icon('values', ['items', String(idx), 'icon']), children: _jsx(DynamicIcon, { name: item.icon, className: "h-7 w-7 transition-transform group-hover:scale-110", style: { color: primaryColor } }) }) }), _jsxs("div", { className: "min-w-0 pt-0.5", children: [_jsx("h4", { className: "font-bold text-gray-900 mb-2.5 text-lg leading-snug", ...edit('values', ['items', String(idx), 'title']), children: item.title }), _jsx("p", { className: "text-gray-600 text-sm leading-relaxed", ...edit('values', ['items', String(idx), 'description']), children: _jsx(RichTextExcerpt, { value: item.description, as: "span" }) })] })] }, idx))) }))] })] }) })] })), statsConfig?.show !== false && statItems.length > 0 && (_jsxs("section", { ...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 gap-8 md:gap-12 ${statGridCols}`, children: statItems.map((stat, idx) => (_jsxs("div", { className: "text-center group", ...payazaGroupBindingProps(isPreview, 'stats', ['items', String(idx)]), 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 }, ...edit('stats', ['items', String(idx), 'value']), children: stat.value }), _jsx("div", { className: "text-gray-600 font-bold uppercase tracking-widest text-xs md:text-sm", ...edit('stats', ['items', String(idx), 'label']), children: stat.label })] }, stat.id ?? idx))) }) })] })), contactInfo?.show !== false && (_jsx("section", { ...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", ...edit('contact-info', ['title']), children: contactInfo?.title || 'Get in Touch' }), _jsx("p", { className: "text-gray-500 max-w-xl mx-auto", ...edit('contact-info', ['description']), children: contactInfo?.description ||
+                                        "Have questions? We'd love to hear from you. Reach out to our team via email, phone, or visit us at our store." })] }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-8", children: [_jsxs("div", { className: "group p-8 rounded-[2rem] bg-gray-50 border border-gray-100 hover:shadow-xl hover:-translate-y-2 transition-all duration-300 text-center", style: { ['--brand-primary']: primaryColor }, children: [_jsx("div", { className: "w-16 h-16 mx-auto mb-6 rounded-2xl bg-white shadow-sm flex items-center justify-center group-hover:scale-110 transition-transform", ...icon('contact-info', ['visitCard', 'icon']), children: _jsx(DynamicIcon, { name: visitCard.icon || 'MapPin', className: "h-8 w-8 text-gray-400 transition-colors group-hover:text-[var(--brand-primary)]" }) }), _jsx("h3", { className: "font-bold text-xl text-gray-900 mb-3", ...edit('contact-info', ['visitCard', 'title']), children: visitCard.title || 'Visit Us' }), _jsx("p", { className: "text-gray-600 leading-relaxed whitespace-pre-line", ...edit('contact-info', ['visitCard', 'address']), children: visitCard.address || '123 Store Street\nCommerce City, ST 12345' })] }), _jsxs("div", { className: "group p-8 rounded-[2rem] bg-gray-50 border border-gray-100 hover:shadow-xl hover:-translate-y-2 transition-all duration-300 text-center", style: { ['--brand-primary']: primaryColor }, children: [_jsx("div", { className: "w-16 h-16 mx-auto mb-6 rounded-2xl bg-white shadow-sm flex items-center justify-center group-hover:scale-110 transition-transform", ...icon('contact-info', ['emailCard', 'icon']), children: _jsx(DynamicIcon, { name: emailCard.icon || 'Mail', className: "h-8 w-8 text-gray-400 transition-colors group-hover:text-[var(--brand-primary)]" }) }), _jsx("h3", { className: "font-bold text-xl text-gray-900 mb-3", ...edit('contact-info', ['emailCard', 'title']), children: emailCard.title || 'Email Us' }), _jsxs("p", { className: "text-gray-600 leading-relaxed mb-4", children: [_jsx("span", { ...edit('contact-info', ['emailCard', 'email']), children: emailCard.email || `hello@${storeConfig.slug}.com` }), emailCard.phone ? (_jsxs(_Fragment, { children: [_jsx("br", {}), _jsx("span", { ...edit('contact-info', ['emailCard', 'phone']), children: emailCard.phone })] })) : null] }), _jsx(Button, { variant: "link", className: "font-bold p-0 h-auto hover:no-underline group-hover:translate-x-1 transition-transform", style: { color: primaryColor }, asChild: true, children: _jsxs(Link, { href: emailCtaLink, ...edit('contact-info', ['emailCard', 'ctaLabel']), children: [emailCtaLabel, " ", _jsx(ArrowRight, { className: "ml-1 h-4 w-4 inline" })] }) })] }), _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", style: { ['--brand-primary']: primaryColor }, children: [_jsx("div", { className: "w-16 h-16 mx-auto mb-6 rounded-2xl bg-white shadow-sm flex items-center justify-center group-hover:scale-110 transition-transform", ...icon('contact-info', ['hoursCard', 'icon']), children: _jsx(DynamicIcon, { name: hoursCard.icon || 'Clock', className: "h-8 w-8 text-gray-400 transition-colors group-hover:text-[var(--brand-primary)]" }) }), _jsx("h3", { className: "font-bold text-xl text-gray-900 mb-3", ...edit('contact-info', ['hoursCard', 'title']), children: hoursCard.title || 'Opening Hours' }), _jsx("p", { className: "text-gray-600 leading-relaxed whitespace-pre-line", ...edit('contact-info', ['hoursCard', 'hours']), children: hoursCard.hours || 'Mon - Fri: 9am - 6pm\nSat - Sun: 10am - 4pm' })] })] })] }) }))] }));
 }

package/dist/layouts/booking/pages/ContactPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ContactPage.d.ts","sourceRoot":"","sources":["../../../../src/layouts/booking/pages/ContactPage.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAOhD,UAAU,gBAAgB;IACtB,WAAW,EAAE,WAAW,CAAC;CAC5B;AAED,wBAAgB,WAAW,CAAC,EAAE,WAAW,EAAE,aAAa,EAAE,EAAE,gBAAgB,+BA0S3E"}
+{"version":3,"file":"ContactPage.d.ts","sourceRoot":"","sources":["../../../../src/layouts/booking/pages/ContactPage.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAOhD,UAAU,gBAAgB;IACtB,WAAW,EAAE,WAAW,CAAC;CAC5B;AAED,wBAAgB,WAAW,CAAC,EAAE,WAAW,EAAE,aAAa,EAAE,EAAE,gBAAgB,+BAgM3E"}

package/dist/layouts/booking/pages/ContactPage.js

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

package/dist/layouts/booking-agenda/pages/AboutPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AboutPage.d.ts","sourceRoot":"","sources":["../../../../src/layouts/booking-agenda/pages/AboutPage.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAgBhD,UAAU,cAAc;IACtB,WAAW,EAAE,WAAW,CAAC;CAC1B;AAED,wBAAgB,SAAS,CAAC,EAAE,WAAW,EAAE,aAAa,EAAE,EAAE,cAAc,+BAqPvE"}
+{"version":3,"file":"AboutPage.d.ts","sourceRoot":"","sources":["../../../../src/layouts/booking-agenda/pages/AboutPage.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAqBhD,UAAU,cAAc;IACtB,WAAW,EAAE,WAAW,CAAC;CAC1B;AAED,wBAAgB,SAAS,CAAC,EAAE,WAAW,EAAE,aAAa,EAAE,EAAE,cAAc,+BAiOvE"}

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

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Users, Award, Heart, Leaf, MapPin, Clock, Mail, ArrowRight } from 'lucide-react';
+import { Heart, MapPin, Clock, Mail, ArrowRight } from 'lucide-react';
 import { Button } from '../../../components/ui/button.js';
 import { DotPattern } from '../../../components/ui/background-patterns.js';
 import { useStore } from '../../../lib/store-context.js';
@@ -8,6 +8,8 @@ import Image from 'next/image';
 import { SafeRichHtml } from '../../../components/rich-text/SafeRichHtml.js';
 import { RichTextExcerpt } from '../../../components/rich-text/RichTextExcerpt.js';
 import { storySectionImage, storySectionLabel, storySectionTitle, storyTeamSubtitle, storyTeamTitle, } from '../../shared/about-story-media.js';
+import { BOOKING_DEFAULT_ABOUT_VALUES, resolveAboutPageValueItems, } from '../../booking/components/booking-about-defaults.js';
+import { DynamicIcon } from '../../../components/ui/dynamic-icon.js';
 export function AboutPage({ storeConfig: initialConfig }) {
     const { store } = useStore();
     const storeConfig = store || initialConfig;
@@ -28,29 +30,10 @@ export function AboutPage({ storeConfig: initialConfig }) {
     const storyTitle = storySectionTitle(storyConfig);
     const storyCaptionTitle = storyTeamTitle(storyConfig);
     const storyCaptionSubtitle = storyTeamSubtitle(storyConfig);
-    const values = [
-        {
-            icon: Award,
-            title: "Mastery",
-            description: "Our team consists of industry leaders with decades of combined expertise."
-        },
-        {
-            icon: Users,
-            title: "Community",
-            description: "Building lasting relationships through reliable and consistent service."
-        },
-        {
-            icon: Heart,
-            title: "Dedication",
-            description: "Your goals are our goals. We are committed to your absolute success."
-        },
-        {
-            icon: Leaf,
-            title: "Integrity",
-            description: "Honest, transparent, and ethical practices in everything we do."
-        }
-    ];
-    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: [_jsxs("div", { className: "inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-white/10 backdrop-blur-md border border-white/20 text-white text-sm font-medium mb-6", children: [_jsx("span", { className: "w-2 h-2 rounded-full bg-white animate-pulse" }), "Est. 2024"] }), _jsx("h1", { className: "text-5xl md:text-7xl font-bold text-white mb-6 tracking-tight leading-tight", children: pageTitle }), _jsx(SafeRichHtml, { value: missionStatement || storeConfig.description, as: "div", className: "text-xl md:text-2xl text-gray-200 max-w-2xl leading-relaxed font-light [&_p]:mb-0" })] }) }) })] }), _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: [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: storyImage, alt: storyCaptionTitle, 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: storyCaptionTitle }), _jsx("p", { className: "text-white/80 text-sm", children: storyCaptionSubtitle })] })] })), _jsx("div", { className: "absolute -bottom-6 -right-6 w-24 h-24 bg-white rounded-2xl shadow-xl flex items-center justify-center p-4 animate-bounce duration-[3000ms]", children: _jsx(Heart, { className: "w-10 h-10", style: { color: primaryColor, fill: primaryColor } }) })] }), _jsxs("div", { className: "space-y-10", children: [_jsxs("div", { children: [_jsx("span", { className: "text-sm font-bold uppercase tracking-widest mb-3 block", style: { color: primaryColor }, children: "Who We Are" }), _jsx("h2", { className: "text-4xl md:text-5xl font-black text-gray-900 mb-6 tracking-tight", children: "Our Journey" }), _jsxs("div", { className: "prose prose-lg text-gray-600 leading-relaxed space-y-6", children: [pageContent?.split('\n').map((paragraph, idx) => (_jsx("p", { children: paragraph }, idx))), !pageContent && (_jsxs(_Fragment, { children: [_jsxs("p", { children: ["Founded with a bold vision to redefine excellence in the ", _jsx("span", { className: "font-semibold text-gray-900", children: storeConfig.type }), " industry, ", storeConfig.name, " has grown from a small passion project into a beloved brand. We believe in the power of quality, innovation, and community."] }), _jsx("p", { children: "Every day, we strive to bring you the best products, curated with care and delivered with a smile. Our team is dedicated to ensuring that your experience with us is nothing short of exceptional." })] }))] })] }), _jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-8", children: values.map((item, idx) => (_jsxs("div", { className: "flex gap-4 group", children: [_jsx("div", { className: "flex-shrink-0", children: _jsx("div", { className: "w-14 h-14 rounded-2xl flex items-center justify-center transition-colors group-hover:bg-gray-100", style: { backgroundColor: `${primaryColor}10` }, children: _jsx(item.icon, { className: "h-7 w-7 transition-transform group-hover:scale-110", style: { color: primaryColor } }) }) }), _jsxs("div", { children: [_jsx("h4", { className: "font-bold text-gray-900 mb-2 text-lg", children: item.title }), _jsx(RichTextExcerpt, { value: item.description, as: "p", className: "text-gray-600 text-sm leading-relaxed" })] })] }, 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: [
+    const valuesConfig = storeConfig.layoutConfig?.pages?.about?.values || storeConfig.layoutConfig?.sections?.values;
+    const valuesItems = resolveAboutPageValueItems(storeConfig.layoutConfig, BOOKING_DEFAULT_ABOUT_VALUES);
+    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: [_jsxs("div", { className: "inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-white/10 backdrop-blur-md border border-white/20 text-white text-sm font-medium mb-6", children: [_jsx("span", { className: "w-2 h-2 rounded-full bg-white animate-pulse" }), "Est. 2024"] }), _jsx("h1", { className: "text-5xl md:text-7xl font-bold text-white mb-6 tracking-tight leading-tight", children: pageTitle }), _jsx(SafeRichHtml, { value: missionStatement || storeConfig.description, as: "div", className: "text-xl md:text-2xl text-gray-200 max-w-2xl leading-relaxed font-light [&_p]:mb-0" })] }) }) })] }), _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: [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: storyImage, alt: storyCaptionTitle, 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: storyCaptionTitle }), _jsx("p", { className: "text-white/80 text-sm", children: storyCaptionSubtitle })] })] })), _jsx("div", { className: "absolute -bottom-6 -right-6 w-24 h-24 bg-white rounded-2xl shadow-xl flex items-center justify-center p-4 animate-bounce duration-[3000ms]", children: _jsx(Heart, { className: "w-10 h-10", style: { color: primaryColor, fill: primaryColor } }) })] }), _jsxs("div", { className: "space-y-10", children: [_jsxs("div", { children: [_jsx("span", { className: "text-sm font-bold uppercase tracking-widest mb-3 block", style: { color: primaryColor }, children: "Who We Are" }), _jsx("h2", { className: "text-4xl md:text-5xl font-black text-gray-900 mb-6 tracking-tight", children: "Our Journey" }), _jsxs("div", { className: "prose prose-lg text-gray-600 leading-relaxed space-y-6", children: [pageContent?.split('\n').map((paragraph, idx) => (_jsx("p", { children: paragraph }, idx))), !pageContent && (_jsxs(_Fragment, { children: [_jsxs("p", { children: ["Founded with a bold vision to redefine excellence in the ", _jsx("span", { className: "font-semibold text-gray-900", children: storeConfig.type }), " industry, ", storeConfig.name, " has grown from a small passion project into a beloved brand. We believe in the power of quality, innovation, and community."] }), _jsx("p", { children: "Every day, we strive to bring you the best products, curated with care and delivered with a smile. Our team is dedicated to ensuring that your experience with us is nothing short of exceptional." })] }))] })] }), _jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-8", children: valuesConfig?.show !== false &&
+                                                valuesItems.map((item, idx) => (_jsxs("div", { className: "flex gap-4 group", children: [_jsx("div", { className: "flex-shrink-0", children: _jsx("div", { className: "w-14 h-14 rounded-2xl flex items-center justify-center transition-colors group-hover:bg-gray-100", style: { backgroundColor: `${primaryColor}10` }, children: _jsx(DynamicIcon, { name: 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(RichTextExcerpt, { value: item.description, as: "p", className: "text-gray-600 text-sm leading-relaxed" })] })] }, 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: "Sessions Held", value: "12k+" },
                                 { label: "Elite Experts", value: "20+" },
                                 { label: "Programs", value: storeConfig.services?.length ? `${storeConfig.services.length}+` : "25+" },

package/dist/layouts/booking-agenda/pages/ContactPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ContactPage.d.ts","sourceRoot":"","sources":["../../../../src/layouts/booking-agenda/pages/ContactPage.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAOhD,UAAU,gBAAgB;IACtB,WAAW,EAAE,WAAW,CAAC;CAC5B;AAED,wBAAgB,WAAW,CAAC,EAAE,WAAW,EAAE,aAAa,EAAE,EAAE,gBAAgB,+BA0S3E"}
+{"version":3,"file":"ContactPage.d.ts","sourceRoot":"","sources":["../../../../src/layouts/booking-agenda/pages/ContactPage.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAOhD,UAAU,gBAAgB;IACtB,WAAW,EAAE,WAAW,CAAC;CAC5B;AAED,wBAAgB,WAAW,CAAC,EAAE,WAAW,EAAE,aAAa,EAAE,EAAE,gBAAgB,+BAgM3E"}

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

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

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

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

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

@@ -1,13 +1,15 @@
 '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 { ArrowRight } from 'lucide-react';
 import { Button } from '../../../components/ui/button.js';
 import { DotPattern } from '../../../components/ui/background-patterns.js';
 import { useStore } from '../../../lib/store-context.js';
 import { DynamicIcon } from '../../../components/ui/dynamic-icon.js';
 import Image from 'next/image';
-import { RichTextExcerpt } from '../../../components/rich-text/RichTextExcerpt.js';
 import { storySectionImage, storySectionLabel, storySectionTitle, storyTeamSubtitle, storyTeamTitle, } from '../../shared/about-story-media.js';
+import { CLOTHING_DEFAULT_ABOUT_VALUES, CLOTHING_DEFAULT_ABOUT_STATS, resolveAboutPageValueItems, resolveBookingAboutStats, normalizeClothingAboutContactInfo, } from '../../booking/components/booking-about-defaults.js';
+import { useClothingPayaza } from '../payaza-bindings.js';
+import { payazaGroupBindingProps } from '../../../preview/canvas/field-key.js';
 export function AboutPage({ storeConfig: initialConfig }) {
     const { store } = useStore();
     const storeConfig = store || initialConfig;
@@ -18,31 +20,46 @@ export function AboutPage({ storeConfig: initialConfig }) {
     const heroConfig = layoutConfig?.pages?.about?.hero || layoutConfig?.sections?.hero;
     const storyConfig = layoutConfig?.pages?.about?.story || layoutConfig?.sections?.story;
     const statsConfig = layoutConfig?.pages?.about?.stats || layoutConfig?.sections?.stats;
-    const contactInfoConfig = layoutConfig?.pages?.about?.['contact-info'] || layoutConfig?.sections?.['contact-info'];
+    const contactInfoConfigRaw = layoutConfig?.pages?.about?.['contact-info'] || layoutConfig?.sections?.['contact-info'];
+    const contactInfo = contactInfoConfigRaw
+        ? normalizeClothingAboutContactInfo(contactInfoConfigRaw)
+        : undefined;
+    const visitCard = (contactInfo?.visitCard || {});
+    const emailCard = (contactInfo?.emailCard || {});
+    const hoursCard = (contactInfo?.hoursCard || {});
     const valuesConfig = layoutConfig?.pages?.about?.values || layoutConfig?.sections?.values;
+    const valuesItems = resolveAboutPageValueItems(layoutConfig, CLOTHING_DEFAULT_ABOUT_VALUES);
+    const { section, edit, image, icon, isPreview } = useClothingPayaza(storeConfig, 'about');
     // Hero section data
     const heroImage = heroConfig?.heroImage || 'https://images.unsplash.com/photo-1558769132-cb1aea458c5e?q=80&w=2074&auto=format&fit=crop';
     const pageTitle = heroConfig?.title || "Crafting Experiences, Delivering Joy.";
     const missionStatement = heroConfig?.missionStatement || storeConfig.description;
+    const rawHeroBadge = heroConfig?.badgeText;
+    const heroBadgeText = rawHeroBadge === '' ? null : (typeof rawHeroBadge === 'string' ? rawHeroBadge.trim() : '') || 'Est. 2024';
+    const statItems = resolveBookingAboutStats(statsConfig, {}, CLOTHING_DEFAULT_ABOUT_STATS);
+    const statGridCols = statItems.length >= 4
+        ? 'md:grid-cols-4'
+        : statItems.length === 3
+            ? 'md:grid-cols-3'
+            : statItems.length === 1
+                ? 'md:grid-cols-1'
+                : 'md:grid-cols-2';
+    const heroTextColor = (value) => typeof value === 'string' && /^#[0-9A-Fa-f]{6}$/i.test(value.trim()) ? value.trim() : undefined;
+    const badgeColor = heroTextColor(heroConfig?.badgeTextColor);
+    const headlineColor = heroTextColor(heroConfig?.titleColor);
+    const missionColor = heroTextColor(heroConfig?.missionStatementColor);
+    const overlayColor = heroTextColor(heroConfig?.imageOverlayColor);
     // Story section data
     const pageContent = storyConfig?.content || storeConfig.description;
-    const gallerySection = storyConfig?.gallerySection || [];
     const storyImage = storySectionImage(storyConfig);
     const storyLabel = storySectionLabel(storyConfig);
     const storyTitle = storySectionTitle(storyConfig);
     const storyCaptionTitle = storyTeamTitle(storyConfig);
     const storyCaptionSubtitle = storyTeamSubtitle(storyConfig);
-    // Values section data - use config if available, otherwise use defaults
-    const valuesItems = (valuesConfig?.items || [
-        { icon: 'Award', title: "Premium Fabrics", description: "We use only the highest quality materials for our collections." },
-        { icon: 'Users', title: "Style for All", description: "Incisive designs that celebrate every individual's unique style." },
-        { icon: 'Heart', title: "Ethical Fashion", description: "We believe in fair trade and ethical manufacturing processes." },
-        { icon: 'Leaf', title: "Sustainable Style", description: "Eco-friendly collections that look good and do good for the planet." }
-    ]).filter(Boolean);
-    return (_jsxs("div", { className: "min-h-screen bg-white pb-20 overflow-hidden", children: [heroConfig?.show !== false && (_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: [_jsxs("div", { className: "inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-white/10 backdrop-blur-md border border-white/20 text-white text-sm font-medium mb-6", children: [_jsx("span", { className: "w-2 h-2 rounded-full bg-white animate-pulse" }), "Est. 2024"] }), _jsx("h1", { className: "text-5xl md:text-7xl font-bold text-white mb-6 tracking-tight leading-tight", children: pageTitle }), _jsx("p", { className: "text-xl md:text-2xl text-gray-200 max-w-2xl leading-relaxed font-light", children: missionStatement })] }) }) })] })), storyConfig?.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: [gallerySection && gallerySection.length > 0 ? (_jsx("div", { className: "grid grid-cols-2 gap-4", children: gallerySection.slice(0, 4).map((img, i) => (_jsx("div", { className: `relative overflow-hidden rounded-2xl shadow-lg ${i === 0 ? 'col-span-2 aspect-[16/9]' : 'aspect-square'}`, children: _jsx(Image, { src: img.image, alt: img.caption || "Gallery Image", fill: true, className: "w-full h-full object-cover hover:scale-110 transition-transform duration-500" }) }, i))) })) : (_jsxs("div", { className: "relative aspect-[4/5] rounded-[2rem] overflow-hidden shadow-2xl", children: [_jsx(Image, { src: storyImage, alt: storyCaptionTitle, 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: storyCaptionTitle }), _jsx("p", { className: "text-white/80 text-sm", children: storyCaptionSubtitle })] })] })), _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: storyLabel }), _jsx("h2", { className: "text-4xl md:text-5xl font-black text-gray-900 mb-6 tracking-tight", children: storyTitle }), _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." })] }))] })] }), valuesConfig?.show !== false && valuesItems.length > 0 && (_jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-8", children: valuesItems.map((item, idx) => (_jsxs("div", { className: "flex gap-4 group", children: [_jsx("div", { className: "flex-shrink-0", children: _jsx("div", { className: "w-14 h-14 rounded-2xl flex items-center justify-center transition-colors group-hover:bg-gray-100", style: { backgroundColor: `${primaryColor}10` }, children: _jsx(DynamicIcon, { name: 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(RichTextExcerpt, { value: item.description, as: "p", className: "text-gray-600 text-sm leading-relaxed" })] })] }, idx))) }))] })] }) })] })), statsConfig?.show !== false && (_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: "Style Lovers", value: "20k+" },
-                                { label: "New Arrivals", value: storeConfig.products?.length ? `${storeConfig.products.length * 5}+` : "100+" },
-                                { label: "Global Shipping", value: "50+" },
-                                { label: "Design Experts", value: "15+" }
-                            ].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))) }) })] })), contactInfoConfig?.show !== false && (_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: contactInfoConfig?.title || "Get in Touch" }), _jsx("p", { className: "text-gray-500 max-w-xl mx-auto", children: contactInfoConfig?.description || "Have questions? We'd love to hear from you. Reach out to our team via email, phone, or visit us at our store." })] }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-8", children: [_jsxs("div", { className: "group p-8 rounded-[2rem] bg-gray-50 border border-gray-100 hover:shadow-xl hover:-translate-y-2 transition-all duration-300 text-center", children: [_jsx("div", { className: "w-16 h-16 mx-auto mb-6 rounded-2xl bg-white shadow-sm flex items-center justify-center group-hover:scale-110 transition-transform", 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" }), _jsx("p", { className: "text-gray-600 leading-relaxed whitespace-pre-line", children: contactInfoConfig?.address || "123 Store Street\nCommerce City, ST 12345" })] }), _jsxs("div", { className: "group p-8 rounded-[2rem] bg-gray-50 border border-gray-100 hover:shadow-xl hover:-translate-y-2 transition-all duration-300 text-center relative overflow-hidden", children: [_jsx("div", { className: "absolute inset-0 border-2 border-transparent group-hover:border-orange-100 rounded-[2rem] transition-colors pointer-events-none" }), _jsx("div", { className: "w-16 h-16 mx-auto mb-6 rounded-2xl bg-white shadow-sm flex items-center justify-center group-hover:scale-110 transition-transform", 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: [contactInfoConfig?.email || `hello@${storeConfig.slug}.com`, contactInfoConfig?.emailSecondary && (_jsxs(_Fragment, { children: [_jsx("br", {}), contactInfoConfig.emailSecondary] })), !contactInfoConfig?.email && (_jsxs(_Fragment, { children: [_jsx("br", {}), "support@", storeConfig.slug, ".com"] }))] }), _jsxs(Button, { variant: "link", className: "text-orange-600 font-bold p-0 h-auto hover:no-underline group-hover:translate-x-1 transition-transform", children: ["Send a message ", _jsx(ArrowRight, { className: "ml-1 h-4 w-4" })] })] }), _jsxs("div", { className: "group p-8 rounded-[2rem] bg-gray-50 border border-gray-100 hover:shadow-xl hover:-translate-y-2 transition-all duration-300 text-center", children: [_jsx("div", { className: "w-16 h-16 mx-auto mb-6 rounded-2xl bg-white shadow-sm flex items-center justify-center group-hover:scale-110 transition-transform", children: _jsx(Clock, { className: "h-8 w-8 text-gray-400 group-hover:text-green-500 transition-colors" }) }), _jsx("h3", { className: "font-bold text-xl text-gray-900 mb-3", children: "Opening Hours" }), _jsx("p", { className: "text-gray-600 leading-relaxed whitespace-pre-line", children: contactInfoConfig?.hours || "Mon - Fri: 9am - 6pm\nSat - Sun: 10am - 4pm" })] })] })] }) }))] }));
+    return (_jsxs("div", { className: "min-h-screen bg-white pb-20 overflow-hidden", children: [heroConfig?.show !== false && (_jsxs("section", { ...section('hero'), className: "relative h-[60vh] min-h-[500px] w-full overflow-hidden", children: [_jsxs("div", { className: "absolute inset-0", ...image('hero', ['heroImage']), children: [_jsx(Image, { src: heroImage, alt: "About Us", fill: true, className: "w-full h-full object-cover transform scale-105 animate-pulse-slow" }), overlayColor ? (_jsx("div", { className: "absolute inset-0", style: {
+                                    background: `linear-gradient(to right, ${overlayColor}d9, ${overlayColor}80, transparent)`,
+                                } })) : (_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: [heroBadgeText ? (_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" }), _jsx("span", { ...edit('hero', ['badgeText']), style: badgeColor ? { color: badgeColor } : undefined, children: heroBadgeText })] })) : null, _jsx("h1", { className: "text-5xl md:text-7xl font-bold text-white mb-6 tracking-tight leading-tight", style: headlineColor ? { color: headlineColor } : undefined, ...edit('hero', ['title']), children: pageTitle }), _jsx("p", { className: "text-xl md:text-2xl text-gray-200 max-w-2xl leading-relaxed font-light", style: missionColor ? { color: missionColor } : undefined, ...edit('hero', ['missionStatement']), children: missionStatement })] }) }) })] })), storyConfig?.show !== false && (_jsxs("section", { ...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-12 lg:gap-20 items-start", children: [_jsx("div", { className: "relative", children: _jsxs("div", { className: "relative aspect-[4/5] rounded-[2rem] overflow-hidden shadow-2xl", ...image('story', ['storyImage']), children: [_jsx(Image, { src: storyImage, alt: storyCaptionTitle, 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", ...edit('story', ['teamTitle']), children: storyCaptionTitle }), _jsx("p", { className: "text-white/80 text-sm", ...edit('story', ['teamSubtitle']), children: storyCaptionSubtitle })] })] }) }), _jsxs("div", { className: "flex flex-col gap-14 lg:gap-16 pt-4 lg:pt-2 lg:pl-2", children: [_jsxs("div", { className: "space-y-8", children: [_jsx("span", { className: "text-sm font-bold uppercase tracking-[0.2em] mb-1 block", style: { color: primaryColor }, ...edit('story', ['sectionLabel']), children: storyLabel }), _jsx("h2", { className: "text-4xl md:text-5xl font-black text-gray-900 tracking-tight leading-[1.1]", ...edit('story', ['title']), children: storyTitle }), _jsxs("div", { className: "prose prose-lg max-w-none text-gray-600 leading-[1.75] space-y-5", ...edit('story', ['content']), children: [pageContent?.split('\n').map((paragraph, idx) => (_jsx("p", { children: paragraph }, idx))), !pageContent && (_jsxs(_Fragment, { children: [_jsxs("p", { children: ["Founded with a bold vision to redefine excellence in the ", _jsx("span", { className: "font-semibold text-gray-900", children: storeConfig.type }), " industry, ", storeConfig.name, " has grown from a small passion project into a beloved brand. We believe in the power of quality, innovation, and community."] }), _jsx("p", { children: "Every day, we strive to bring you the best products, curated with care and delivered with a smile. Our team is dedicated to ensuring that your experience with us is nothing short of exceptional." })] }))] })] }), valuesConfig?.show !== false && valuesItems.length > 0 && (_jsx("div", { ...section('values'), className: "grid grid-cols-1 sm:grid-cols-2 pt-12 border-t border-gray-100", style: { columnGap: '2.5rem', rowGap: '3rem' }, children: valuesItems.map((item, idx) => (_jsxs("div", { className: "flex gap-5 group", ...payazaGroupBindingProps(isPreview, 'values', ['items', String(idx)]), children: [_jsx("div", { className: "flex-shrink-0", children: _jsx("div", { className: "w-14 h-14 rounded-2xl flex items-center justify-center transition-colors group-hover:bg-gray-100", style: { backgroundColor: `${primaryColor}10` }, ...icon('values', ['items', String(idx), 'icon']), children: _jsx(DynamicIcon, { name: item.icon, className: "h-7 w-7 transition-transform group-hover:scale-110", style: { color: primaryColor } }) }) }), _jsxs("div", { className: "min-w-0 pt-0.5", children: [_jsx("h4", { className: "font-bold text-gray-900 mb-2.5 text-lg leading-snug", ...edit('values', ['items', String(idx), 'title']), children: item.title }), _jsx("p", { className: "text-gray-600 text-sm leading-relaxed whitespace-pre-line", ...edit('values', ['items', String(idx), 'description']), children: typeof item.description === 'string'
+                                                                    ? item.description
+                                                                    : '' })] })] }, idx))) }))] })] }) })] })), statsConfig?.show !== false && statItems.length > 0 && (_jsxs("section", { ...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 gap-8 md:gap-12 ${statGridCols}`, children: statItems.map((stat, idx) => (_jsxs("div", { className: "text-center group", ...payazaGroupBindingProps(isPreview, 'stats', ['items', String(idx)]), 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 }, ...edit('stats', ['items', String(idx), 'value']), children: stat.value }), _jsx("div", { className: "text-gray-600 font-bold uppercase tracking-widest text-xs md:text-sm", ...edit('stats', ['items', String(idx), 'label']), children: stat.label })] }, stat.id ?? idx))) }) })] })), contactInfo?.show !== false && (_jsx("section", { "data-section": "contact-info", className: "py-24 px-4 sm:px-6 lg:px-8 bg-white", ...section('contact-info'), 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", ...edit('contact-info', ['title']), children: contactInfo?.title || 'Get in Touch' }), _jsx("p", { className: "text-gray-500 max-w-xl mx-auto", ...edit('contact-info', ['description']), children: contactInfo?.description ||
+                                        "Have questions? We'd love to hear from you. Reach out to our team via email, phone, or visit us at our store." })] }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-8", children: [_jsxs("div", { className: "group p-8 rounded-[2rem] bg-gray-50 border border-gray-100 hover:shadow-xl hover:-translate-y-2 transition-all duration-300 text-center", style: { ['--brand-primary']: primaryColor }, children: [_jsx("div", { className: "w-16 h-16 mx-auto mb-6 rounded-2xl bg-white shadow-sm flex items-center justify-center group-hover:scale-110 transition-transform", ...icon('contact-info', ['visitCard', 'icon']), children: _jsx(DynamicIcon, { name: visitCard.icon || 'MapPin', className: "h-8 w-8 text-gray-400 transition-colors group-hover:text-[var(--brand-primary)]" }) }), _jsx("h3", { className: "font-bold text-xl text-gray-900 mb-3", ...edit('contact-info', ['visitCard', 'title']), children: visitCard.title || 'Visit Us' }), _jsx("p", { className: "text-gray-600 leading-relaxed whitespace-pre-line", ...edit('contact-info', ['visitCard', 'address']), children: visitCard.address || '123 Store Street\nCommerce City, ST 12345' })] }), _jsxs("div", { className: "group p-8 rounded-[2rem] bg-gray-50 border border-gray-100 hover:shadow-xl hover:-translate-y-2 transition-all duration-300 text-center", style: { ['--brand-primary']: primaryColor }, children: [_jsx("div", { className: "w-16 h-16 mx-auto mb-6 rounded-2xl bg-white shadow-sm flex items-center justify-center group-hover:scale-110 transition-transform", ...icon('contact-info', ['emailCard', 'icon']), children: _jsx(DynamicIcon, { name: emailCard.icon || 'Mail', className: "h-8 w-8 text-gray-400 transition-colors group-hover:text-[var(--brand-primary)]" }) }), _jsx("h3", { className: "font-bold text-xl text-gray-900 mb-3", ...edit('contact-info', ['emailCard', 'title']), children: emailCard.title || 'Email Us' }), _jsxs("p", { className: "text-gray-600 leading-relaxed mb-4", children: [_jsx("span", { ...edit('contact-info', ['emailCard', 'email']), children: emailCard.email || `hello@${storeConfig.slug}.com` }), emailCard.emailSecondary ? (_jsxs(_Fragment, { children: [_jsx("br", {}), _jsx("span", { ...edit('contact-info', ['emailCard', 'emailSecondary']), children: emailCard.emailSecondary })] })) : !emailCard.email ? (_jsxs(_Fragment, { children: [_jsx("br", {}), "support@", storeConfig.slug, ".com"] })) : null] }), _jsxs(Button, { variant: "link", className: "font-bold p-0 h-auto hover:no-underline group-hover:translate-x-1 transition-transform", style: { color: primaryColor }, 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", style: { ['--brand-primary']: primaryColor }, children: [_jsx("div", { className: "w-16 h-16 mx-auto mb-6 rounded-2xl bg-white shadow-sm flex items-center justify-center group-hover:scale-110 transition-transform", ...icon('contact-info', ['hoursCard', 'icon']), children: _jsx(DynamicIcon, { name: hoursCard.icon || 'Clock', className: "h-8 w-8 text-gray-400 transition-colors group-hover:text-[var(--brand-primary)]" }) }), _jsx("h3", { className: "font-bold text-xl text-gray-900 mb-3", ...edit('contact-info', ['hoursCard', 'title']), children: hoursCard.title || 'Opening Hours' }), _jsx("p", { className: "text-gray-600 leading-relaxed whitespace-pre-line", ...edit('contact-info', ['hoursCard', 'hours']), children: hoursCard.hours || 'Mon - Fri: 9am - 6pm\nSat - Sun: 10am - 4pm' })] })] })] }) }))] }));
 }

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

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

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

@@ -1,8 +1,8 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { Button } from '../../../components/ui/button.js';
-import { Mail, Phone, MapPin, Clock, Send, MessageSquare, CheckCircle } from 'lucide-react';
+import { Send, CheckCircle } from 'lucide-react';
 import { useStore } from '../../../lib/store-context.js';
 import Image from 'next/image';
 import { submitContact } from '../../../lib/services/contact.service.js';
@@ -51,5 +51,5 @@ export function ContactPage({ storeConfig: initialConfig }) {
             setErrorMessage('Failed to send message. Please try again.');
         }
     };
-    return (_jsxs("div", { className: "min-h-screen bg-white pb-20", children: [contactHeaderConfig?.show !== false && (_jsxs("section", { "data-section": "hero", className: "relative bg-gray-900 text-white py-20 overflow-hidden", children: [_jsxs("div", { className: "absolute inset-0 opacity-20", children: [_jsx(Image, { src: contactHeaderConfig?.backgroundImage || "https://images.unsplash.com/photo-1596524430615-b46475ddff6e?q=80&w=2070&auto=format&fit=crop", alt: "Contact Background", fill: true, className: "w-full h-full object-cover" }), _jsx("div", { className: "absolute inset-0 bg-black/60" })] }), _jsxs("div", { className: "container mx-auto px-4 relative z-10 text-center", children: [_jsx("h1", { className: "text-4xl md:text-6xl font-bold mb-4 tracking-tight", children: contactHeaderConfig?.title || "Get in Touch" }), _jsx("p", { className: "text-xl text-gray-300 max-w-2xl mx-auto font-light", children: contactHeaderConfig?.subtitle || "We'd love to hear from you. Here's how you can reach us." })] })] })), _jsx("div", { "data-section": "form", className: "container mx-auto px-4 -mt-10 relative z-20 max-w-6xl", children: _jsxs("div", { className: "bg-white rounded-3xl shadow-xl overflow-hidden border border-gray-100 flex flex-col lg:flex-row", children: [contactFormConfig?.show !== false && (_jsxs("div", { className: "lg:w-2/5 p-8 md:p-12 text-white relative overflow-hidden", style: { backgroundColor: 'var(--store-primary)' }, children: [_jsx("div", { className: "absolute top-0 right-0 -mt-10 -mr-10 w-40 h-40 bg-white opacity-10 rounded-full blur-2xl" }), _jsx("div", { className: "absolute bottom-0 left-0 -mb-10 -ml-10 w-40 h-40 bg-black opacity-10 rounded-full blur-2xl" }), _jsx("h2", { className: "text-2xl font-bold mb-8 relative z-10", children: contactFormConfig?.infoTitle || "Contact Information" }), _jsx("p", { className: "mb-10 text-white/90 leading-relaxed relative z-10 whitespace-pre-line", children: contactFormConfig?.infoDescription || "Fill out the form and our team will get back to you within 24 hours." }), _jsxs("div", { className: "space-y-8 relative z-10", children: [(contactFormConfig?.phone || contactFormConfig?.phoneSecondary) && (_jsxs("div", { className: "flex items-start gap-4", children: [_jsx("div", { className: "w-10 h-10 rounded-full bg-white/20 flex items-center justify-center flex-shrink-0", children: _jsx(Phone, { className: "w-5 h-5 text-white" }) }), _jsxs("div", { children: [_jsx("h3", { className: "font-semibold text-white mb-1", children: "Call Us" }), contactFormConfig?.phone && _jsx("p", { className: "text-white/80", children: contactFormConfig.phone }), contactFormConfig?.phoneSecondary && _jsx("p", { className: "text-white/80", children: contactFormConfig.phoneSecondary }), !contactFormConfig?.phone && !contactFormConfig?.phoneSecondary && (_jsxs(_Fragment, { children: [_jsx("p", { className: "text-white/80", children: "+1 (555) 123-4567" }), _jsx("p", { className: "text-white/80", children: "+1 (555) 987-6543" })] }))] })] })), (contactFormConfig?.email || contactFormConfig?.emailSecondary) && (_jsxs("div", { className: "flex items-start gap-4", children: [_jsx("div", { className: "w-10 h-10 rounded-full bg-white/20 flex items-center justify-center flex-shrink-0", children: _jsx(Mail, { className: "w-5 h-5 text-white" }) }), _jsxs("div", { children: [_jsx("h3", { className: "font-semibold text-white mb-1", children: "Email Us" }), contactFormConfig?.email && _jsx("p", { className: "text-white/80", children: contactFormConfig.email }), contactFormConfig?.emailSecondary && _jsx("p", { className: "text-white/80", children: contactFormConfig.emailSecondary }), !contactFormConfig?.email && !contactFormConfig?.emailSecondary && (_jsxs(_Fragment, { children: [_jsxs("p", { className: "text-white/80", children: ["hello@", storeConfig.slug, ".com"] }), _jsxs("p", { className: "text-white/80", children: ["support@", storeConfig.slug, ".com"] })] }))] })] })), contactFormConfig?.address && (_jsxs("div", { className: "flex items-start gap-4", children: [_jsx("div", { className: "w-10 h-10 rounded-full bg-white/20 flex items-center justify-center flex-shrink-0", children: _jsx(MapPin, { className: "w-5 h-5 text-white" }) }), _jsxs("div", { children: [_jsx("h3", { className: "font-semibold text-white mb-1", children: "Visit Us" }), _jsx("p", { className: "text-white/80 whitespace-pre-line", children: contactFormConfig.address })] })] })), contactFormConfig?.showHours !== false && contactFormConfig?.hours && (_jsxs("div", { className: "flex items-start gap-4", children: [_jsx("div", { className: "w-10 h-10 rounded-full bg-white/20 flex items-center justify-center flex-shrink-0", children: _jsx(Clock, { className: "w-5 h-5 text-white" }) }), _jsxs("div", { children: [_jsx("h3", { className: "font-semibold text-white mb-1", children: "Opening Hours" }), _jsx("p", { className: "text-white/80 whitespace-pre-line", children: contactFormConfig.hours })] })] }))] }), contactFormConfig?.showSocialLinks !== false && (_jsx("div", { className: "mt-12 relative z-10", children: _jsx("div", { className: "flex gap-4", children: [1, 2, 3, 4].map((i) => (_jsx("div", { className: "w-8 h-8 rounded-full bg-white/20 hover:bg-white/30 cursor-pointer transition-colors" }, i))) }) }))] })), _jsxs("div", { className: "lg:w-3/5 p-8 md:p-12 bg-white relative", children: [_jsx("div", { className: "absolute top-0 right-0 p-6 opacity-5", children: _jsx(MessageSquare, { className: "w-32 h-32" }) }), formState === 'success' ? (_jsxs("div", { className: "h-full flex flex-col items-center justify-center text-center py-10", children: [_jsx("div", { className: "w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mb-6", children: _jsx(CheckCircle, { className: "w-10 h-10 text-green-600" }) }), _jsx("h3", { className: "text-2xl font-bold text-gray-900 mb-2", children: "Message Sent!" }), _jsx("p", { className: "text-gray-600 max-w-sm mx-auto mb-8", children: "Thank you for contacting us. We have received your message and will respond as soon as possible." }), _jsx(Button, { onClick: () => setFormState('idle'), className: "bg-gray-900 hover:bg-gray-800", children: "Send Another Message" })] })) : (_jsxs("form", { onSubmit: handleSubmit, className: "relative z-10 space-y-6", children: [errorMessage && (_jsx("p", { className: "text-sm text-red-600 bg-red-50 p-3 rounded-xl", children: errorMessage })), _jsx("h2", { className: "text-2xl font-bold text-gray-900 mb-6", children: "Send us a Message" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsxs("div", { className: "space-y-2", children: [_jsx("label", { htmlFor: "firstName", className: "text-sm font-medium text-gray-700", children: "First Name" }), _jsx("input", { type: "text", id: "firstName", required: true, className: "w-full px-4 py-3 rounded-xl bg-gray-50 border border-gray-200 focus:border-gray-900 focus:ring-0 outline-none transition-all", placeholder: "John" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { htmlFor: "lastName", className: "text-sm font-medium text-gray-700", children: "Last Name" }), _jsx("input", { type: "text", id: "lastName", required: true, className: "w-full px-4 py-3 rounded-xl bg-gray-50 border border-gray-200 focus:border-gray-900 focus:ring-0 outline-none transition-all", placeholder: "Doe" })] })] }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsxs("div", { className: "space-y-2", children: [_jsx("label", { htmlFor: "email", className: "text-sm font-medium text-gray-700", children: "Email Address" }), _jsx("input", { type: "email", id: "email", required: true, className: "w-full px-4 py-3 rounded-xl bg-gray-50 border border-gray-200 focus:border-gray-900 focus:ring-0 outline-none transition-all", placeholder: "john@example.com" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { htmlFor: "phone", className: "text-sm font-medium text-gray-700", children: "Phone (Optional)" }), _jsx("input", { type: "tel", id: "phone", className: "w-full px-4 py-3 rounded-xl bg-gray-50 border border-gray-200 focus:border-gray-900 focus:ring-0 outline-none transition-all", placeholder: "+1 (555) 000-0000" })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { htmlFor: "subject", className: "text-sm font-medium text-gray-700", children: "Subject" }), _jsxs("select", { id: "subject", className: "w-full px-4 py-3 rounded-xl bg-gray-50 border border-gray-200 focus:border-gray-900 focus:ring-0 outline-none transition-all", children: [_jsx("option", { value: "general", children: "General Inquiry" }), _jsx("option", { value: "support", children: "Customer Support" }), _jsx("option", { value: "orders", children: "Order Status & Returns" }), _jsx("option", { value: "size", children: "Sizing & Styling Advice" }), _jsx("option", { value: "wholesale", children: "Wholesale & Partnerships" })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { htmlFor: "message", className: "text-sm font-medium text-gray-700", children: "Message" }), _jsx("textarea", { id: "message", rows: 4, required: true, className: "w-full px-4 py-3 rounded-xl bg-gray-50 border border-gray-200 focus:border-gray-900 focus:ring-0 outline-none transition-all resize-none", placeholder: "How can we help you today?" })] }), _jsx("div", { className: "pt-2", children: _jsx(Button, { type: "submit", disabled: formState === 'submitting', className: "w-full py-6 text-lg font-semibold rounded-xl", style: { backgroundColor: 'var(--store-primary)' }, children: formState === 'submitting' ? (_jsxs("span", { className: "flex items-center gap-2", children: [_jsx("span", { className: "w-4 h-4 border-2 border-white/20 border-t-white rounded-full animate-spin" }), "Sending..."] })) : (_jsxs("span", { className: "flex items-center gap-2", children: ["Send Message", _jsx(Send, { className: "w-4 h-4" })] })) }) })] }))] })] }) }), contactFormConfig?.showMap !== false && (_jsx("section", { "data-section": "map", className: "container mx-auto px-4 mt-20 max-w-6xl", children: _jsxs("div", { className: "bg-gray-100 rounded-3xl overflow-hidden h-96 w-full relative grayscale hover:grayscale-0 transition-all duration-500", children: [_jsx("iframe", { src: "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3024.2219901290355!2d-74.00369368400567!3d40.71312937933185!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c25a23e28c1191%3A0x49f75d3281df052a!2s150%20Park%20Row%2C%20New%20York%2C%20NY%2010007!5e0!3m2!1sen!2sus!4v1620000000000!5m2!1sen!2sus", width: "100%", height: "100%", style: { border: 0 }, allowFullScreen: true, loading: "lazy", title: "Store Location" }), _jsxs("div", { className: "absolute top-4 right-4 bg-white p-4 rounded-xl shadow-lg z-10 hidden md:block", children: [_jsx("p", { className: "font-bold text-gray-900", children: storeConfig.name }), _jsx("p", { className: "text-sm text-gray-500", children: "123 Commerce Blvd" })] })] }) }))] }));
+    return (_jsxs("div", { className: "min-h-screen bg-white pb-20", children: [contactHeaderConfig?.show !== false && (_jsxs("section", { "data-section": "hero", className: "relative bg-gray-900 text-white py-20 overflow-hidden", children: [_jsxs("div", { className: "absolute inset-0 opacity-20", children: [_jsx(Image, { src: contactHeaderConfig?.backgroundImage || "https://images.unsplash.com/photo-1596524430615-b46475ddff6e?q=80&w=2070&auto=format&fit=crop", alt: "Contact Background", fill: true, className: "w-full h-full object-cover" }), _jsx("div", { className: "absolute inset-0 bg-black/60" })] }), _jsxs("div", { className: "container mx-auto px-4 relative z-10 text-center", children: [_jsx("h1", { className: "text-4xl md:text-6xl font-bold mb-4 tracking-tight", children: contactHeaderConfig?.title || "Get in Touch" }), _jsx("p", { className: "text-xl text-gray-300 max-w-2xl mx-auto font-light", children: contactHeaderConfig?.subtitle || "We'd love to hear from you. Here's how you can reach us." })] })] })), _jsx("div", { "data-section": "form", className: "container mx-auto px-4 py-12 relative max-w-6xl", children: _jsx("div", { className: "bg-white shadow-xl overflow-hidden border border-gray-100 ", children: _jsx("div", { className: "w-full p-8 md:p-12 bg-white relative", children: formState === 'success' ? (_jsxs("div", { className: "h-full flex flex-col items-center justify-center text-center py-10", children: [_jsx("div", { className: "w-20 h-20 bg-green-100 flex items-center justify-center mb-6", children: _jsx(CheckCircle, { className: "w-10 h-10 text-green-600" }) }), _jsx("h3", { className: "text-2xl font-bold text-gray-900 mb-2", children: "Message Sent!" }), _jsx("p", { className: "text-gray-600 max-w-sm mx-auto mb-8", children: "Thank you for contacting us. We have received your message and will respond as soon as possible." }), _jsx(Button, { onClick: () => setFormState('idle'), className: "bg-gray-900 hover:bg-gray-800", children: "Send Another Message" })] })) : (_jsxs("form", { onSubmit: handleSubmit, className: "relative z-10 space-y-6", children: [errorMessage && (_jsx("p", { className: "text-sm text-red-600 bg-red-50 p-3", children: errorMessage })), _jsx("h2", { className: "text-2xl font-bold text-gray-900 mb-6", children: "Send us a Message" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsxs("div", { className: "space-y-2", children: [_jsx("label", { htmlFor: "firstName", className: "text-sm font-medium text-gray-700", children: "First Name" }), _jsx("input", { type: "text", id: "firstName", required: true, className: "w-full px-4 py-3 bg-gray-50 border border-gray-200 focus:border-gray-900 focus:ring-0 outline-none transition-all", placeholder: "John" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { htmlFor: "lastName", className: "text-sm font-medium text-gray-700", children: "Last Name" }), _jsx("input", { type: "text", id: "lastName", required: true, className: "w-full px-4 py-3 bg-gray-50 border border-gray-200 focus:border-gray-900 focus:ring-0 outline-none transition-all", placeholder: "Doe" })] })] }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsxs("div", { className: "space-y-2", children: [_jsx("label", { htmlFor: "email", className: "text-sm font-medium text-gray-700", children: "Email Address" }), _jsx("input", { type: "email", id: "email", required: true, className: "w-full px-4 py-3 bg-gray-50 border border-gray-200 focus:border-gray-900 focus:ring-0 outline-none transition-all", placeholder: "john@example.com" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { htmlFor: "phone", className: "text-sm font-medium text-gray-700", children: "Phone (Optional)" }), _jsx("input", { type: "tel", id: "phone", className: "w-full px-4 py-3 bg-gray-50 border border-gray-200 focus:border-gray-900 focus:ring-0 outline-none transition-all", placeholder: "+1 (555) 000-0000" })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { htmlFor: "subject", className: "text-sm font-medium text-gray-700", children: "Subject" }), _jsxs("select", { id: "subject", className: "w-full px-4 py-3 bg-gray-50 border border-gray-200 focus:border-gray-900 focus:ring-0 outline-none transition-all", children: [_jsx("option", { value: "general", children: "General Inquiry" }), _jsx("option", { value: "support", children: "Customer Support" }), _jsx("option", { value: "orders", children: "Order Status & Returns" }), _jsx("option", { value: "size", children: "Sizing & Styling Advice" }), _jsx("option", { value: "wholesale", children: "Wholesale & Partnerships" })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { htmlFor: "message", className: "text-sm font-medium text-gray-700", children: "Message" }), _jsx("textarea", { id: "message", rows: 4, required: true, className: "w-full px-4 py-3 bg-gray-50 border border-gray-200 focus:border-gray-900 focus:ring-0 outline-none transition-all resize-none", placeholder: "How can we help you today?" })] }), _jsx("div", { className: "pt-2", children: _jsx(Button, { type: "submit", disabled: formState === 'submitting', className: "w-full py-6 text-lg font-semibold", style: { backgroundColor: 'var(--store-primary)' }, children: formState === 'submitting' ? (_jsxs("span", { className: "flex items-center gap-2", children: [_jsx("span", { className: "w-4 h-4 border-2 border-white/20 border-t-white rounded-full animate-spin" }), "Sending..."] })) : (_jsxs("span", { className: "flex items-center gap-2", children: ["Send Message", _jsx(Send, { className: "w-4 h-4" })] })) }) })] })) }) }) })] }));
 }