@mohasinac/appkit 2.7.26 → 2.7.30

package/dist/features/admin/components/AdminSectionsView.js

@@ -9,6 +9,12 @@ import { useAdminSectionsListing } from "../hooks/useAdminSectionsListing";
 import { DataTable } from "./DataTable";
 import { SECTION_TYPE_OPTIONS, SUPPORTED_TYPED_BUILDERS, RESOURCE_SORT_OPTIONS, FAQ_CATEGORY_OPTIONS, DEFAULT_PRODUCTS_BUILDER, DEFAULT_AUCTIONS_BUILDER, DEFAULT_STATS_BUILDER, DEFAULT_PRE_ORDERS_BUILDER, DEFAULT_STORES_BUILDER, DEFAULT_EVENTS_BUILDER, DEFAULT_SOCIAL_FEED_BUILDER, DEFAULT_WELCOME_BUILDER, DEFAULT_TRUST_INDICATORS_BUILDER, DEFAULT_CATEGORIES_BUILDER, DEFAULT_BRANDS_BUILDER, DEFAULT_BANNER_BUILDER, DEFAULT_FEATURES_BUILDER, DEFAULT_REVIEWS_BUILDER, DEFAULT_WHATSAPP_BUILDER, DEFAULT_FAQ_BUILDER, DEFAULT_BLOG_BUILDER, DEFAULT_NEWSLETTER_BUILDER, DEFAULT_CAROUSEL_BUILDER, DEFAULT_CUSTOM_CARDS_BUILDER, DEFAULT_GOOGLE_REVIEWS_BUILDER, DEFAULT_FEATURED_BUNDLES_BUILDER, DEFAULT_PRIZE_DRAWS_BUILDER, DEFAULT_EVENT_RAFFLES_BUILDER, DEFAULT_COLLECTION_CARDS_BUILDER, } from "./sections/adminSectionsTypes";
 import { toStringValue, buildProductsConfig, buildAuctionsConfig, buildStatsConfig, buildPreOrdersConfig, buildStoresConfig, buildEventsConfig, buildSocialFeedConfig, buildWelcomeConfig, buildTrustIndicatorsConfig, buildCategoriesConfig, buildBrandsConfig, buildBannerConfig, buildFeaturesConfig, buildReviewsConfig, buildWhatsAppConfig, buildFAQConfig, buildBlogConfig, buildNewsletterConfig, buildCarouselConfig, buildCustomCardsConfig, buildGoogleReviewsConfig, buildFeaturedBundlesConfig, buildPrizeDrawsConfig, buildEventRafflesConfig, buildCollectionCardsConfig, parseProductsBuilder, parseAuctionsBuilder, parseStatsBuilder, parsePreOrdersBuilder, parseStoresBuilder, parseEventsBuilder, parseSocialFeedBuilder, parseWelcomeBuilder, parseTrustIndicatorsBuilder, parseCategoriesBuilder, parseBrandsBuilder, parseBannerBuilder, parseFeaturesBuilder, parseReviewsBuilder, parseWhatsAppBuilder, parseFAQBuilder, parseBlogBuilder, parseNewsletterBuilder, parseCarouselBuilder, parseCustomCardsBuilder, parseGoogleReviewsBuilder, parseFeaturedBundlesBuilder, parsePrizeDrawsBuilder, parseEventRafflesBuilder, parseCollectionCardsBuilder, } from "./sections/adminSectionsBuildParse";
+const CLS_SECTION_PANEL = "rounded-xl border border-zinc-200 dark:border-zinc-700 bg-white dark:bg-zinc-900 p-4 space-y-3";
+const LBL_FILTER_BY_CATEGORY = "Filter by category";
+const LBL_MAX_ITEMS = "Max items";
+const LBL_AUTOMATIC = "Automatic";
+const LBL_MANUAL_IDS = "Manual IDs";
+const LBL_SCROLL_INTERVAL = "Scroll interval (ms)";
 export function AdminSectionsView({ children }) {
     const hasChildren = React.Children.count(children) > 0;
     const queryClient = useQueryClient();
@@ -465,6 +471,12 @@ export function AdminSectionsView({ children }) {
             return normalizeOrder(next);
         });
     }
+    function handleReorderDrop(targetIndex) {
+        if (dragIndex !== null) {
+            moveItemToIndex(dragIndex, targetIndex);
+        }
+        setDragIndex(null);
+    }
     function reindexDraft() {
         applyReorderChange((prev) => normalizeOrder(prev));
     }
@@ -479,8 +491,14 @@ export function AdminSectionsView({ children }) {
         setReorderUndoStack(rest);
         setReorderDraft(cloneReorderItems(latest));
     }
+    function renderProductsCategorySelectors() {
+        return (_jsxs(Div, { className: "space-y-2", children: [_jsx(Text, { className: "text-xs font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-400", children: "Category selectors" }), categoriesQuery.isLoading ? (_jsx(Text, { className: "text-sm text-zinc-500 dark:text-zinc-400", children: "Loading categories..." })) : categoryOptions.length === 0 ? (_jsx(Text, { className: "text-sm text-zinc-500 dark:text-zinc-400", children: "No categories available." })) : (_jsx(Div, { className: "grid grid-cols-1 gap-2 sm:grid-cols-2", children: categoryOptions.map((category) => (_jsx(Checkbox, { checked: productsBuilder.selectedCategoryIds.includes(category.id), label: category.name, onChange: (event) => setProductsBuilder((prev) => ({
+                            ...prev,
+                            selectedCategoryIds: toggleCategorySelection(prev.selectedCategoryIds, category.id, event.target.checked),
+                        })) }, category.id))) }))] }));
+    }
     function renderProductsBuilder() {
-        return (_jsxs(Div, { className: "space-y-4 rounded-lg border border-zinc-200 p-4 dark:border-slate-700", children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-800 dark:text-zinc-200", children: "Products Carousel Builder" }), _jsx(Input, { label: "Section title", value: productsBuilder.title, onChange: (event) => setProductsBuilder((prev) => ({ ...prev, title: event.target.value })) }), _jsx(Input, { label: "Subtitle", value: productsBuilder.subtitle, onChange: (event) => setProductsBuilder((prev) => ({ ...prev, subtitle: event.target.value })) }), _jsx(Input, { label: "Max products", type: "number", min: 1, max: 50, value: String(productsBuilder.maxItems), onChange: (event) => setProductsBuilder((prev) => ({
+        return (_jsxs(Div, { className: CLS_SECTION_PANEL, children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-800 dark:text-zinc-200", children: "Products Carousel Builder" }), _jsx(Input, { label: "Section title", value: productsBuilder.title, onChange: (event) => setProductsBuilder((prev) => ({ ...prev, title: event.target.value })) }), _jsx(Input, { label: "Subtitle", value: productsBuilder.subtitle, onChange: (event) => setProductsBuilder((prev) => ({ ...prev, subtitle: event.target.value })) }), _jsx(Input, { label: "Max products", type: "number", min: 1, max: 50, value: String(productsBuilder.maxItems), onChange: (event) => setProductsBuilder((prev) => ({
                         ...prev,
                         maxItems: Math.max(1, Number(event.target.value) || 1),
                     })) }), _jsx(Select, { label: "Status filter", value: productsBuilder.status, onValueChange: (value) => setProductsBuilder((prev) => ({
@@ -490,16 +508,13 @@ export function AdminSectionsView({ children }) {
                         { label: "All", value: "all" },
                         { label: "Published", value: "published" },
                         { label: "Draft", value: "draft" },
-                    ] }), _jsx(Select, { label: "Sort by", value: productsBuilder.sortBy, onValueChange: (value) => setProductsBuilder((prev) => ({ ...prev, sortBy: value })), options: [...RESOURCE_SORT_OPTIONS] }), _jsx(Input, { label: "Filter by category slug", value: productsBuilder.filterByCategory, onChange: (e) => setProductsBuilder((prev) => ({ ...prev, filterByCategory: e.target.value })), placeholder: "category-pokemon-cards" }), _jsx(Select, { label: "Max items to show", value: String(productsBuilder.maxCount), onValueChange: (v) => setProductsBuilder((prev) => ({ ...prev, maxCount: Number(v) })), options: [{ label: "5", value: "5" }, { label: "10", value: "10" }, { label: "20", value: "20" }] }), _jsx(Checkbox, { checked: productsBuilder.loop, label: "Loop carousel", onChange: (e) => setProductsBuilder((prev) => ({ ...prev, loop: e.target.checked })) }), _jsx(Select, { label: "Resource mode", value: productsBuilder.resourceMode, onValueChange: (value) => setProductsBuilder((prev) => ({
+                    ] }), _jsx(Select, { label: "Sort by", value: productsBuilder.sortBy, onValueChange: (value) => setProductsBuilder((prev) => ({ ...prev, sortBy: value })), options: [...RESOURCE_SORT_OPTIONS] }), _jsx(Input, { label: LBL_FILTER_BY_CATEGORY, value: productsBuilder.filterByCategory, onChange: (e) => setProductsBuilder((prev) => ({ ...prev, filterByCategory: e.target.value })), placeholder: "category-pokemon-cards" }), _jsx(Select, { label: LBL_MAX_ITEMS, value: String(productsBuilder.maxCount), onValueChange: (v) => setProductsBuilder((prev) => ({ ...prev, maxCount: Number(v) })), options: [{ label: "5", value: "5" }, { label: "10", value: "10" }, { label: "20", value: "20" }] }), _jsx(Checkbox, { checked: productsBuilder.loop, label: "Loop carousel", onChange: (e) => setProductsBuilder((prev) => ({ ...prev, loop: e.target.checked })) }), _jsx(Select, { label: "Resource mode", value: productsBuilder.resourceMode, onValueChange: (value) => setProductsBuilder((prev) => ({
                         ...prev,
                         resourceMode: value,
                     })), options: [
-                        { label: "Automatic by filters", value: "automatic" },
-                        { label: "Manual resource IDs", value: "manual" },
-                    ] }), _jsxs(Div, { className: "space-y-2", children: [_jsx(Text, { className: "text-xs font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-400", children: "Category selectors" }), categoriesQuery.isLoading ? (_jsx(Text, { className: "text-sm text-zinc-500 dark:text-zinc-400", children: "Loading categories..." })) : categoryOptions.length === 0 ? (_jsx(Text, { className: "text-sm text-zinc-500 dark:text-zinc-400", children: "No categories available." })) : (_jsx(Div, { className: "grid grid-cols-1 gap-2 sm:grid-cols-2", children: categoryOptions.map((category) => (_jsx(Checkbox, { checked: productsBuilder.selectedCategoryIds.includes(category.id), label: category.name, onChange: (event) => setProductsBuilder((prev) => ({
-                                    ...prev,
-                                    selectedCategoryIds: toggleCategorySelection(prev.selectedCategoryIds, category.id, event.target.checked),
-                                })) }, category.id))) }))] }), productsBuilder.resourceMode === "manual" ? (_jsx(Textarea, { label: "Manual product resource IDs (comma-separated)", value: productsBuilder.manualResourceIds, onChange: (event) => setProductsBuilder((prev) => ({
+                        { label: LBL_AUTOMATIC, value: "automatic" },
+                        { label: LBL_MANUAL_IDS, value: "manual" },
+                    ] }), renderProductsCategorySelectors(), productsBuilder.resourceMode === "manual" ? (_jsx(Textarea, { label: "Manual product resource IDs (comma-separated)", value: productsBuilder.manualResourceIds, onChange: (event) => setProductsBuilder((prev) => ({
                         ...prev,
                         manualResourceIds: event.target.value,
                     })), rows: 3 })) : null, _jsx(Checkbox, { checked: productsBuilder.featuredOnly, label: "Featured only", onChange: (event) => setProductsBuilder((prev) => ({
@@ -511,13 +526,19 @@ export function AdminSectionsView({ children }) {
                     })) }), _jsx(Checkbox, { checked: productsBuilder.autoScroll, label: "Auto-scroll", onChange: (event) => setProductsBuilder((prev) => ({
                         ...prev,
                         autoScroll: event.target.checked,
-                    })) }), _jsx(Input, { label: "Scroll interval (ms)", type: "number", min: 1000, step: 500, value: String(productsBuilder.scrollInterval), onChange: (event) => setProductsBuilder((prev) => ({
+                    })) }), _jsx(Input, { label: LBL_SCROLL_INTERVAL, type: "number", min: 1000, step: 500, value: String(productsBuilder.scrollInterval), onChange: (event) => setProductsBuilder((prev) => ({
                         ...prev,
                         scrollInterval: Math.max(1000, Number(event.target.value) || 1000),
                     })) })] }));
     }
+    function renderAuctionsCategorySelectors() {
+        return (_jsxs(Div, { className: "space-y-2", children: [_jsx(Text, { className: "text-xs font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-400", children: "Category selectors" }), categoriesQuery.isLoading ? (_jsx(Text, { className: "text-sm text-zinc-500 dark:text-zinc-400", children: "Loading categories..." })) : categoryOptions.length === 0 ? (_jsx(Text, { className: "text-sm text-zinc-500 dark:text-zinc-400", children: "No categories available." })) : (_jsx(Div, { className: "grid grid-cols-1 gap-2 sm:grid-cols-2", children: categoryOptions.map((category) => (_jsx(Checkbox, { checked: auctionsBuilder.selectedCategoryIds.includes(category.id), label: category.name, onChange: (event) => setAuctionsBuilder((prev) => ({
+                            ...prev,
+                            selectedCategoryIds: toggleCategorySelection(prev.selectedCategoryIds, category.id, event.target.checked),
+                        })) }, category.id))) }))] }));
+    }
     function renderAuctionsBuilder() {
-        return (_jsxs(Div, { className: "space-y-4 rounded-lg border border-zinc-200 p-4 dark:border-slate-700", children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-800 dark:text-zinc-200", children: "Auctions Carousel Builder" }), _jsx(Input, { label: "Section title", value: auctionsBuilder.title, onChange: (event) => setAuctionsBuilder((prev) => ({ ...prev, title: event.target.value })) }), _jsx(Input, { label: "Subtitle", value: auctionsBuilder.subtitle, onChange: (event) => setAuctionsBuilder((prev) => ({ ...prev, subtitle: event.target.value })) }), _jsx(Input, { label: "Max auctions", type: "number", min: 1, max: 50, value: String(auctionsBuilder.maxItems), onChange: (event) => setAuctionsBuilder((prev) => ({
+        return (_jsxs(Div, { className: CLS_SECTION_PANEL, children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-800 dark:text-zinc-200", children: "Auctions Carousel Builder" }), _jsx(Input, { label: "Section title", value: auctionsBuilder.title, onChange: (event) => setAuctionsBuilder((prev) => ({ ...prev, title: event.target.value })) }), _jsx(Input, { label: "Subtitle", value: auctionsBuilder.subtitle, onChange: (event) => setAuctionsBuilder((prev) => ({ ...prev, subtitle: event.target.value })) }), _jsx(Input, { label: "Max auctions", type: "number", min: 1, max: 50, value: String(auctionsBuilder.maxItems), onChange: (event) => setAuctionsBuilder((prev) => ({
                         ...prev,
                         maxItems: Math.max(1, Number(event.target.value) || 1),
                     })) }), _jsx(Select, { label: "Status filter", value: auctionsBuilder.status, onValueChange: (value) => setAuctionsBuilder((prev) => ({
@@ -528,28 +549,25 @@ export function AdminSectionsView({ children }) {
                         { label: "Active", value: "active" },
                         { label: "Scheduled", value: "scheduled" },
                         { label: "Ended", value: "ended" },
-                    ] }), _jsx(Select, { label: "Sort by", value: auctionsBuilder.sortBy, onValueChange: (value) => setAuctionsBuilder((prev) => ({ ...prev, sortBy: value })), options: [...RESOURCE_SORT_OPTIONS] }), _jsx(Input, { label: "Filter by category slug", value: auctionsBuilder.filterByCategory, onChange: (e) => setAuctionsBuilder((prev) => ({ ...prev, filterByCategory: e.target.value })), placeholder: "category-pokemon-cards" }), _jsx(Select, { label: "Max items to show", value: String(auctionsBuilder.maxCount), onValueChange: (v) => setAuctionsBuilder((prev) => ({ ...prev, maxCount: Number(v) })), options: [{ label: "5", value: "5" }, { label: "10", value: "10" }, { label: "20", value: "20" }] }), _jsx(Checkbox, { checked: auctionsBuilder.loop, label: "Loop carousel", onChange: (e) => setAuctionsBuilder((prev) => ({ ...prev, loop: e.target.checked })) }), _jsx(Select, { label: "Resource mode", value: auctionsBuilder.resourceMode, onValueChange: (value) => setAuctionsBuilder((prev) => ({
+                    ] }), _jsx(Select, { label: "Sort by", value: auctionsBuilder.sortBy, onValueChange: (value) => setAuctionsBuilder((prev) => ({ ...prev, sortBy: value })), options: [...RESOURCE_SORT_OPTIONS] }), _jsx(Input, { label: LBL_FILTER_BY_CATEGORY, value: auctionsBuilder.filterByCategory, onChange: (e) => setAuctionsBuilder((prev) => ({ ...prev, filterByCategory: e.target.value })), placeholder: "category-pokemon-cards" }), _jsx(Select, { label: LBL_MAX_ITEMS, value: String(auctionsBuilder.maxCount), onValueChange: (v) => setAuctionsBuilder((prev) => ({ ...prev, maxCount: Number(v) })), options: [{ label: "5", value: "5" }, { label: "10", value: "10" }, { label: "20", value: "20" }] }), _jsx(Checkbox, { checked: auctionsBuilder.loop, label: "Loop carousel", onChange: (e) => setAuctionsBuilder((prev) => ({ ...prev, loop: e.target.checked })) }), _jsx(Select, { label: "Resource mode", value: auctionsBuilder.resourceMode, onValueChange: (value) => setAuctionsBuilder((prev) => ({
                         ...prev,
                         resourceMode: value,
                     })), options: [
-                        { label: "Automatic by filters", value: "automatic" },
-                        { label: "Manual resource IDs", value: "manual" },
-                    ] }), _jsxs(Div, { className: "space-y-2", children: [_jsx(Text, { className: "text-xs font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-400", children: "Category selectors" }), categoriesQuery.isLoading ? (_jsx(Text, { className: "text-sm text-zinc-500 dark:text-zinc-400", children: "Loading categories..." })) : categoryOptions.length === 0 ? (_jsx(Text, { className: "text-sm text-zinc-500 dark:text-zinc-400", children: "No categories available." })) : (_jsx(Div, { className: "grid grid-cols-1 gap-2 sm:grid-cols-2", children: categoryOptions.map((category) => (_jsx(Checkbox, { checked: auctionsBuilder.selectedCategoryIds.includes(category.id), label: category.name, onChange: (event) => setAuctionsBuilder((prev) => ({
-                                    ...prev,
-                                    selectedCategoryIds: toggleCategorySelection(prev.selectedCategoryIds, category.id, event.target.checked),
-                                })) }, category.id))) }))] }), auctionsBuilder.resourceMode === "manual" ? (_jsx(Textarea, { label: "Manual auction resource IDs (comma-separated)", value: auctionsBuilder.manualResourceIds, onChange: (event) => setAuctionsBuilder((prev) => ({
+                        { label: LBL_AUTOMATIC, value: "automatic" },
+                        { label: LBL_MANUAL_IDS, value: "manual" },
+                    ] }), renderAuctionsCategorySelectors(), auctionsBuilder.resourceMode === "manual" ? (_jsx(Textarea, { label: "Manual auction resource IDs (comma-separated)", value: auctionsBuilder.manualResourceIds, onChange: (event) => setAuctionsBuilder((prev) => ({
                         ...prev,
                         manualResourceIds: event.target.value,
                     })), rows: 3 })) : null, _jsx(Checkbox, { checked: auctionsBuilder.autoScroll, label: "Auto-scroll", onChange: (event) => setAuctionsBuilder((prev) => ({
                         ...prev,
                         autoScroll: event.target.checked,
-                    })) }), _jsx(Input, { label: "Scroll interval (ms)", type: "number", min: 1000, step: 500, value: String(auctionsBuilder.scrollInterval), onChange: (event) => setAuctionsBuilder((prev) => ({
+                    })) }), _jsx(Input, { label: LBL_SCROLL_INTERVAL, type: "number", min: 1000, step: 500, value: String(auctionsBuilder.scrollInterval), onChange: (event) => setAuctionsBuilder((prev) => ({
                         ...prev,
                         scrollInterval: Math.max(1000, Number(event.target.value) || 1000),
                     })) })] }));
     }
     function renderStatsBuilder() {
-        return (_jsxs(Div, { className: "space-y-4 rounded-lg border border-zinc-200 p-4 dark:border-slate-700", children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-800 dark:text-zinc-200", children: "Stats Section Builder" }), _jsx(Input, { label: "Section title", value: statsBuilder.title, onChange: (event) => setStatsBuilder((prev) => ({ ...prev, title: event.target.value })), helperText: "Optional internal title for stats configuration." }), statsBuilder.stats.map((stat, index) => (_jsxs(Div, { className: "space-y-3 rounded-md border border-zinc-200 p-3 dark:border-slate-700", children: [_jsxs(Text, { className: "text-xs font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-400", children: ["Stat ", index + 1] }), _jsx(Input, { label: "Key", value: stat.key, onChange: (event) => setStatsBuilder((prev) => {
+        return (_jsxs(Div, { className: CLS_SECTION_PANEL, children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-800 dark:text-zinc-200", children: "Stats Section Builder" }), _jsx(Input, { label: "Section title", value: statsBuilder.title, onChange: (event) => setStatsBuilder((prev) => ({ ...prev, title: event.target.value })), helperText: "Optional internal title for stats configuration." }), statsBuilder.stats.map((stat, index) => (_jsxs(Div, { className: "space-y-3 rounded-md border border-zinc-200 p-3 dark:border-slate-700", children: [_jsxs(Text, { className: "text-xs font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-400", children: ["Stat ", index + 1] }), _jsx(Input, { label: "Key", value: stat.key, onChange: (event) => setStatsBuilder((prev) => {
                                 const next = [...prev.stats];
                                 next[index] = { ...next[index], key: event.target.value };
                                 return { ...prev, stats: next };
@@ -567,7 +585,7 @@ export function AdminSectionsView({ children }) {
         return (_jsxs(Div, { className: "space-y-2", children: [_jsx(Text, { className: "text-xs font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-400", children: "Category selectors" }), categoriesQuery.isLoading ? (_jsx(Text, { className: "text-sm text-zinc-500 dark:text-zinc-400", children: "Loading categories..." })) : categoryOptions.length === 0 ? (_jsx(Text, { className: "text-sm text-zinc-500 dark:text-zinc-400", children: "No categories available." })) : (_jsx(Div, { className: "grid grid-cols-1 gap-2 sm:grid-cols-2", children: categoryOptions.map((category) => (_jsx(Checkbox, { checked: selectedIds.includes(category.id), label: category.name, onChange: (event) => onToggle(category.id, event.target.checked) }, category.id))) }))] }));
     }
     function renderPreOrdersBuilder() {
-        return (_jsxs(Div, { className: "space-y-4 rounded-lg border border-zinc-200 p-4 dark:border-slate-700", children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-800 dark:text-zinc-200", children: "Pre-Orders Carousel Builder" }), _jsx(Input, { label: "Section title", value: preOrdersBuilder.title, onChange: (event) => setPreOrdersBuilder((prev) => ({ ...prev, title: event.target.value })) }), _jsx(Input, { label: "Subtitle", value: preOrdersBuilder.subtitle, onChange: (event) => setPreOrdersBuilder((prev) => ({ ...prev, subtitle: event.target.value })) }), _jsx(Input, { label: "Max pre-orders", type: "number", min: 1, max: 50, value: String(preOrdersBuilder.maxItems), onChange: (event) => setPreOrdersBuilder((prev) => ({
+        return (_jsxs(Div, { className: CLS_SECTION_PANEL, children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-800 dark:text-zinc-200", children: "Pre-Orders Carousel Builder" }), _jsx(Input, { label: "Section title", value: preOrdersBuilder.title, onChange: (event) => setPreOrdersBuilder((prev) => ({ ...prev, title: event.target.value })) }), _jsx(Input, { label: "Subtitle", value: preOrdersBuilder.subtitle, onChange: (event) => setPreOrdersBuilder((prev) => ({ ...prev, subtitle: event.target.value })) }), _jsx(Input, { label: "Max pre-orders", type: "number", min: 1, max: 50, value: String(preOrdersBuilder.maxItems), onChange: (event) => setPreOrdersBuilder((prev) => ({
                         ...prev,
                         maxItems: Math.max(1, Number(event.target.value) || 1),
                     })) }), _jsx(Select, { label: "Status filter", value: preOrdersBuilder.status, onValueChange: (value) => setPreOrdersBuilder((prev) => ({
@@ -578,12 +596,12 @@ export function AdminSectionsView({ children }) {
                         { label: "Active", value: "active" },
                         { label: "Upcoming", value: "upcoming" },
                         { label: "Closed", value: "closed" },
-                    ] }), _jsx(Select, { label: "Sort by", value: preOrdersBuilder.sortBy, onValueChange: (value) => setPreOrdersBuilder((prev) => ({ ...prev, sortBy: value })), options: [...RESOURCE_SORT_OPTIONS] }), _jsx(Input, { label: "Filter by category slug", value: preOrdersBuilder.filterByCategory, onChange: (e) => setPreOrdersBuilder((prev) => ({ ...prev, filterByCategory: e.target.value })), placeholder: "category-beyblade-tops" }), _jsx(Select, { label: "Max items to show", value: String(preOrdersBuilder.maxCount), onValueChange: (v) => setPreOrdersBuilder((prev) => ({ ...prev, maxCount: Number(v) })), options: [{ label: "5", value: "5" }, { label: "10", value: "10" }, { label: "20", value: "20" }] }), _jsx(Checkbox, { checked: preOrdersBuilder.loop, label: "Loop carousel", onChange: (e) => setPreOrdersBuilder((prev) => ({ ...prev, loop: e.target.checked })) }), _jsx(Select, { label: "Resource mode", value: preOrdersBuilder.resourceMode, onValueChange: (value) => setPreOrdersBuilder((prev) => ({
+                    ] }), _jsx(Select, { label: "Sort by", value: preOrdersBuilder.sortBy, onValueChange: (value) => setPreOrdersBuilder((prev) => ({ ...prev, sortBy: value })), options: [...RESOURCE_SORT_OPTIONS] }), _jsx(Input, { label: LBL_FILTER_BY_CATEGORY, value: preOrdersBuilder.filterByCategory, onChange: (e) => setPreOrdersBuilder((prev) => ({ ...prev, filterByCategory: e.target.value })), placeholder: "category-beyblade-tops" }), _jsx(Select, { label: LBL_MAX_ITEMS, value: String(preOrdersBuilder.maxCount), onValueChange: (v) => setPreOrdersBuilder((prev) => ({ ...prev, maxCount: Number(v) })), options: [{ label: "5", value: "5" }, { label: "10", value: "10" }, { label: "20", value: "20" }] }), _jsx(Checkbox, { checked: preOrdersBuilder.loop, label: "Loop carousel", onChange: (e) => setPreOrdersBuilder((prev) => ({ ...prev, loop: e.target.checked })) }), _jsx(Select, { label: "Resource mode", value: preOrdersBuilder.resourceMode, onValueChange: (value) => setPreOrdersBuilder((prev) => ({
                         ...prev,
                         resourceMode: value,
                     })), options: [
-                        { label: "Automatic by filters", value: "automatic" },
-                        { label: "Manual resource IDs", value: "manual" },
+                        { label: LBL_AUTOMATIC, value: "automatic" },
+                        { label: LBL_MANUAL_IDS, value: "manual" },
                     ] }), renderCategorySelector(preOrdersBuilder.selectedCategoryIds, (categoryId, checked) => {
                     setPreOrdersBuilder((prev) => ({
                         ...prev,
@@ -595,13 +613,13 @@ export function AdminSectionsView({ children }) {
                     })), rows: 3 })) : null, _jsx(Checkbox, { checked: preOrdersBuilder.autoScroll, label: "Auto-scroll", onChange: (event) => setPreOrdersBuilder((prev) => ({
                         ...prev,
                         autoScroll: event.target.checked,
-                    })) }), _jsx(Input, { label: "Scroll interval (ms)", type: "number", min: 1000, step: 500, value: String(preOrdersBuilder.scrollInterval), onChange: (event) => setPreOrdersBuilder((prev) => ({
+                    })) }), _jsx(Input, { label: LBL_SCROLL_INTERVAL, type: "number", min: 1000, step: 500, value: String(preOrdersBuilder.scrollInterval), onChange: (event) => setPreOrdersBuilder((prev) => ({
                         ...prev,
                         scrollInterval: Math.max(1000, Number(event.target.value) || 1000),
                     })) })] }));
     }
     function renderStoresBuilder() {
-        return (_jsxs(Div, { className: "space-y-4 rounded-lg border border-zinc-200 p-4 dark:border-slate-700", children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-800 dark:text-zinc-200", children: "Stores Section Builder" }), _jsx(Input, { label: "Section title", value: storesBuilder.title, onChange: (event) => setStoresBuilder((prev) => ({ ...prev, title: event.target.value })) }), _jsx(Input, { label: "Subtitle", value: storesBuilder.subtitle, onChange: (event) => setStoresBuilder((prev) => ({ ...prev, subtitle: event.target.value })) }), _jsx(Input, { label: "Max stores", type: "number", min: 1, max: 30, value: String(storesBuilder.maxItems), onChange: (event) => setStoresBuilder((prev) => ({
+        return (_jsxs(Div, { className: CLS_SECTION_PANEL, children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-800 dark:text-zinc-200", children: "Stores Section Builder" }), _jsx(Input, { label: "Section title", value: storesBuilder.title, onChange: (event) => setStoresBuilder((prev) => ({ ...prev, title: event.target.value })) }), _jsx(Input, { label: "Subtitle", value: storesBuilder.subtitle, onChange: (event) => setStoresBuilder((prev) => ({ ...prev, subtitle: event.target.value })) }), _jsx(Input, { label: "Max stores", type: "number", min: 1, max: 30, value: String(storesBuilder.maxItems), onChange: (event) => setStoresBuilder((prev) => ({
                         ...prev,
                         maxItems: Math.max(1, Number(event.target.value) || 1),
                     })) }), _jsx(Select, { label: "Status filter", value: storesBuilder.status, onValueChange: (value) => setStoresBuilder((prev) => ({
@@ -612,12 +630,12 @@ export function AdminSectionsView({ children }) {
                         { label: "Active", value: "active" },
                         { label: "Pending", value: "pending" },
                         { label: "Disabled", value: "disabled" },
-                    ] }), _jsx(Select, { label: "Sort by", value: storesBuilder.sortBy, onValueChange: (value) => setStoresBuilder((prev) => ({ ...prev, sortBy: value })), options: [...RESOURCE_SORT_OPTIONS] }), _jsx(Input, { label: "Filter by category slug", value: storesBuilder.filterByCategory, onChange: (e) => setStoresBuilder((prev) => ({ ...prev, filterByCategory: e.target.value })), placeholder: "category-pokemon-cards" }), _jsx(Select, { label: "Max items to show", value: String(storesBuilder.maxCount), onValueChange: (v) => setStoresBuilder((prev) => ({ ...prev, maxCount: Number(v) })), options: [{ label: "5", value: "5" }, { label: "10", value: "10" }, { label: "20", value: "20" }] }), _jsx(Checkbox, { checked: storesBuilder.loop, label: "Loop carousel", onChange: (e) => setStoresBuilder((prev) => ({ ...prev, loop: e.target.checked })) }), _jsx(Select, { label: "Resource mode", value: storesBuilder.resourceMode, onValueChange: (value) => setStoresBuilder((prev) => ({
+                    ] }), _jsx(Select, { label: "Sort by", value: storesBuilder.sortBy, onValueChange: (value) => setStoresBuilder((prev) => ({ ...prev, sortBy: value })), options: [...RESOURCE_SORT_OPTIONS] }), _jsx(Input, { label: LBL_FILTER_BY_CATEGORY, value: storesBuilder.filterByCategory, onChange: (e) => setStoresBuilder((prev) => ({ ...prev, filterByCategory: e.target.value })), placeholder: "category-pokemon-cards" }), _jsx(Select, { label: LBL_MAX_ITEMS, value: String(storesBuilder.maxCount), onValueChange: (v) => setStoresBuilder((prev) => ({ ...prev, maxCount: Number(v) })), options: [{ label: "5", value: "5" }, { label: "10", value: "10" }, { label: "20", value: "20" }] }), _jsx(Checkbox, { checked: storesBuilder.loop, label: "Loop carousel", onChange: (e) => setStoresBuilder((prev) => ({ ...prev, loop: e.target.checked })) }), _jsx(Select, { label: "Resource mode", value: storesBuilder.resourceMode, onValueChange: (value) => setStoresBuilder((prev) => ({
                         ...prev,
                         resourceMode: value,
                     })), options: [
-                        { label: "Automatic by filters", value: "automatic" },
-                        { label: "Manual resource IDs", value: "manual" },
+                        { label: LBL_AUTOMATIC, value: "automatic" },
+                        { label: LBL_MANUAL_IDS, value: "manual" },
                     ] }), renderCategorySelector(storesBuilder.selectedCategoryIds, (categoryId, checked) => {
                     setStoresBuilder((prev) => ({
                         ...prev,
@@ -632,13 +650,13 @@ export function AdminSectionsView({ children }) {
                     })) }), _jsx(Checkbox, { checked: storesBuilder.autoScroll, label: "Auto-scroll", onChange: (event) => setStoresBuilder((prev) => ({
                         ...prev,
                         autoScroll: event.target.checked,
-                    })) }), _jsx(Input, { label: "Scroll interval (ms)", type: "number", min: 1000, step: 500, value: String(storesBuilder.scrollInterval), onChange: (event) => setStoresBuilder((prev) => ({
+                    })) }), _jsx(Input, { label: LBL_SCROLL_INTERVAL, type: "number", min: 1000, step: 500, value: String(storesBuilder.scrollInterval), onChange: (event) => setStoresBuilder((prev) => ({
                         ...prev,
                         scrollInterval: Math.max(1000, Number(event.target.value) || 1000),
                     })) })] }));
     }
     function renderEventsBuilder() {
-        return (_jsxs(Div, { className: "space-y-4 rounded-lg border border-zinc-200 p-4 dark:border-slate-700", children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-800 dark:text-zinc-200", children: "Events Section Builder" }), _jsx(Input, { label: "Section title", value: eventsBuilder.title, onChange: (event) => setEventsBuilder((prev) => ({ ...prev, title: event.target.value })) }), _jsx(Input, { label: "Subtitle", value: eventsBuilder.subtitle, onChange: (event) => setEventsBuilder((prev) => ({ ...prev, subtitle: event.target.value })) }), _jsx(Input, { label: "Max events", type: "number", min: 1, max: 30, value: String(eventsBuilder.maxItems), onChange: (event) => setEventsBuilder((prev) => ({
+        return (_jsxs(Div, { className: CLS_SECTION_PANEL, children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-800 dark:text-zinc-200", children: "Events Section Builder" }), _jsx(Input, { label: "Section title", value: eventsBuilder.title, onChange: (event) => setEventsBuilder((prev) => ({ ...prev, title: event.target.value })) }), _jsx(Input, { label: "Subtitle", value: eventsBuilder.subtitle, onChange: (event) => setEventsBuilder((prev) => ({ ...prev, subtitle: event.target.value })) }), _jsx(Input, { label: "Max events", type: "number", min: 1, max: 30, value: String(eventsBuilder.maxItems), onChange: (event) => setEventsBuilder((prev) => ({
                         ...prev,
                         maxItems: Math.max(1, Number(event.target.value) || 1),
                     })) }), _jsx(Select, { label: "Status filter", value: eventsBuilder.status, onValueChange: (value) => setEventsBuilder((prev) => ({
@@ -649,12 +667,12 @@ export function AdminSectionsView({ children }) {
                         { label: "Active", value: "active" },
                         { label: "Upcoming", value: "upcoming" },
                         { label: "Ended", value: "ended" },
-                    ] }), _jsx(Select, { label: "Sort by", value: eventsBuilder.sortBy, onValueChange: (value) => setEventsBuilder((prev) => ({ ...prev, sortBy: value })), options: [...RESOURCE_SORT_OPTIONS] }), _jsx(Input, { label: "Filter by category slug", value: eventsBuilder.filterByCategory, onChange: (e) => setEventsBuilder((prev) => ({ ...prev, filterByCategory: e.target.value })), placeholder: "category-events" }), _jsx(Select, { label: "Max items to show", value: String(eventsBuilder.maxCount), onValueChange: (v) => setEventsBuilder((prev) => ({ ...prev, maxCount: Number(v) })), options: [{ label: "5", value: "5" }, { label: "10", value: "10" }, { label: "20", value: "20" }] }), _jsx(Checkbox, { checked: eventsBuilder.loop, label: "Loop carousel", onChange: (e) => setEventsBuilder((prev) => ({ ...prev, loop: e.target.checked })) }), _jsx(Select, { label: "Resource mode", value: eventsBuilder.resourceMode, onValueChange: (value) => setEventsBuilder((prev) => ({
+                    ] }), _jsx(Select, { label: "Sort by", value: eventsBuilder.sortBy, onValueChange: (value) => setEventsBuilder((prev) => ({ ...prev, sortBy: value })), options: [...RESOURCE_SORT_OPTIONS] }), _jsx(Input, { label: LBL_FILTER_BY_CATEGORY, value: eventsBuilder.filterByCategory, onChange: (e) => setEventsBuilder((prev) => ({ ...prev, filterByCategory: e.target.value })), placeholder: "category-events" }), _jsx(Select, { label: LBL_MAX_ITEMS, value: String(eventsBuilder.maxCount), onValueChange: (v) => setEventsBuilder((prev) => ({ ...prev, maxCount: Number(v) })), options: [{ label: "5", value: "5" }, { label: "10", value: "10" }, { label: "20", value: "20" }] }), _jsx(Checkbox, { checked: eventsBuilder.loop, label: "Loop carousel", onChange: (e) => setEventsBuilder((prev) => ({ ...prev, loop: e.target.checked })) }), _jsx(Select, { label: "Resource mode", value: eventsBuilder.resourceMode, onValueChange: (value) => setEventsBuilder((prev) => ({
                         ...prev,
                         resourceMode: value,
                     })), options: [
-                        { label: "Automatic by filters", value: "automatic" },
-                        { label: "Manual resource IDs", value: "manual" },
+                        { label: LBL_AUTOMATIC, value: "automatic" },
+                        { label: LBL_MANUAL_IDS, value: "manual" },
                     ] }), renderCategorySelector(eventsBuilder.selectedCategoryIds, (categoryId, checked) => {
                     setEventsBuilder((prev) => ({
                         ...prev,
@@ -669,13 +687,13 @@ export function AdminSectionsView({ children }) {
                     })) }), _jsx(Checkbox, { checked: eventsBuilder.autoScroll, label: "Auto-scroll", onChange: (event) => setEventsBuilder((prev) => ({
                         ...prev,
                         autoScroll: event.target.checked,
-                    })) }), _jsx(Input, { label: "Scroll interval (ms)", type: "number", min: 1000, step: 500, value: String(eventsBuilder.scrollInterval), onChange: (event) => setEventsBuilder((prev) => ({
+                    })) }), _jsx(Input, { label: LBL_SCROLL_INTERVAL, type: "number", min: 1000, step: 500, value: String(eventsBuilder.scrollInterval), onChange: (event) => setEventsBuilder((prev) => ({
                         ...prev,
                         scrollInterval: Math.max(1000, Number(event.target.value) || 1000),
                     })) })] }));
     }
     function renderFAQBuilder() {
-        return (_jsxs(Div, { className: "space-y-4 rounded-lg border border-zinc-200 p-4 dark:border-slate-700", children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-800 dark:text-zinc-200", children: "FAQ Section Builder" }), _jsx(Input, { label: "Section title", value: faqBuilder.title, onChange: (e) => setFaqBuilder((prev) => ({ ...prev, title: e.target.value })) }), _jsx(Input, { label: "Subtitle", value: faqBuilder.subtitle, onChange: (e) => setFaqBuilder((prev) => ({ ...prev, subtitle: e.target.value })) }), _jsx(Input, { label: "Display count", type: "number", min: 1, max: 20, value: String(faqBuilder.displayCount), onChange: (e) => setFaqBuilder((prev) => ({ ...prev, displayCount: Math.min(20, Math.max(1, Number(e.target.value) || 1)) })) }), _jsx(Checkbox, { checked: faqBuilder.showOnHomepage, label: "Show on homepage", onChange: (e) => setFaqBuilder((prev) => ({ ...prev, showOnHomepage: e.target.checked })) }), _jsx(Checkbox, { checked: faqBuilder.expandedByDefault, label: "Expanded by default", onChange: (e) => setFaqBuilder((prev) => ({ ...prev, expandedByDefault: e.target.checked })) }), _jsx(Checkbox, { checked: faqBuilder.linkToFullPage, label: "Link to full FAQ page", onChange: (e) => setFaqBuilder((prev) => ({ ...prev, linkToFullPage: e.target.checked })) }), _jsxs(Div, { className: "space-y-2", children: [_jsx(Text, { className: "text-xs font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-400", children: "Categories" }), _jsx(Div, { className: "grid grid-cols-2 gap-2", children: FAQ_CATEGORY_OPTIONS.map((opt) => (_jsx(Checkbox, { checked: faqBuilder.categories.includes(opt.value), label: opt.label, onChange: (e) => setFaqBuilder((prev) => ({
+        return (_jsxs(Div, { className: CLS_SECTION_PANEL, children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-800 dark:text-zinc-200", children: "FAQ Section Builder" }), _jsx(Input, { label: "Section title", value: faqBuilder.title, onChange: (e) => setFaqBuilder((prev) => ({ ...prev, title: e.target.value })) }), _jsx(Input, { label: "Subtitle", value: faqBuilder.subtitle, onChange: (e) => setFaqBuilder((prev) => ({ ...prev, subtitle: e.target.value })) }), _jsx(Input, { label: "Display count", type: "number", min: 1, max: 20, value: String(faqBuilder.displayCount), onChange: (e) => setFaqBuilder((prev) => ({ ...prev, displayCount: Math.min(20, Math.max(1, Number(e.target.value) || 1)) })) }), _jsx(Checkbox, { checked: faqBuilder.showOnHomepage, label: "Show on homepage", onChange: (e) => setFaqBuilder((prev) => ({ ...prev, showOnHomepage: e.target.checked })) }), _jsx(Checkbox, { checked: faqBuilder.expandedByDefault, label: "Expanded by default", onChange: (e) => setFaqBuilder((prev) => ({ ...prev, expandedByDefault: e.target.checked })) }), _jsx(Checkbox, { checked: faqBuilder.linkToFullPage, label: "Link to full FAQ page", onChange: (e) => setFaqBuilder((prev) => ({ ...prev, linkToFullPage: e.target.checked })) }), _jsxs(Div, { className: "space-y-2", children: [_jsx(Text, { className: "text-xs font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-400", children: "Categories" }), _jsx(Div, { className: "grid grid-cols-2 gap-2", children: FAQ_CATEGORY_OPTIONS.map((opt) => (_jsx(Checkbox, { checked: faqBuilder.categories.includes(opt.value), label: opt.label, onChange: (e) => setFaqBuilder((prev) => ({
                                     ...prev,
                                     categories: e.target.checked
                                         ? [...prev.categories, opt.value]
@@ -683,40 +701,40 @@ export function AdminSectionsView({ children }) {
                                 })) }, opt.value))) })] })] }));
     }
     function renderBlogBuilder() {
-        return (_jsxs(Div, { className: "space-y-4 rounded-lg border border-zinc-200 p-4 dark:border-slate-700", children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-800 dark:text-zinc-200", children: "Blog Articles Builder" }), _jsx(Input, { label: "Section title", value: blogBuilder.title, onChange: (e) => setBlogBuilder((prev) => ({ ...prev, title: e.target.value })) }), _jsx(Select, { label: "Max articles", value: String(blogBuilder.maxArticles), onValueChange: (v) => setBlogBuilder((prev) => ({ ...prev, maxArticles: Number(v) })), options: [{ label: "3", value: "3" }, { label: "4", value: "4" }, { label: "6", value: "6" }] }), _jsx(Checkbox, { checked: blogBuilder.showReadTime, label: "Show read time", onChange: (e) => setBlogBuilder((prev) => ({ ...prev, showReadTime: e.target.checked })) }), _jsx(Checkbox, { checked: blogBuilder.showAuthor, label: "Show author", onChange: (e) => setBlogBuilder((prev) => ({ ...prev, showAuthor: e.target.checked })) }), _jsx(Checkbox, { checked: blogBuilder.showThumbnails, label: "Show thumbnails", onChange: (e) => setBlogBuilder((prev) => ({ ...prev, showThumbnails: e.target.checked })) })] }));
+        return (_jsxs(Div, { className: CLS_SECTION_PANEL, children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-800 dark:text-zinc-200", children: "Blog Articles Builder" }), _jsx(Input, { label: "Section title", value: blogBuilder.title, onChange: (e) => setBlogBuilder((prev) => ({ ...prev, title: e.target.value })) }), _jsx(Select, { label: "Max articles", value: String(blogBuilder.maxArticles), onValueChange: (v) => setBlogBuilder((prev) => ({ ...prev, maxArticles: Number(v) })), options: [{ label: "3", value: "3" }, { label: "4", value: "4" }, { label: "6", value: "6" }] }), _jsx(Checkbox, { checked: blogBuilder.showReadTime, label: "Show read time", onChange: (e) => setBlogBuilder((prev) => ({ ...prev, showReadTime: e.target.checked })) }), _jsx(Checkbox, { checked: blogBuilder.showAuthor, label: "Show author", onChange: (e) => setBlogBuilder((prev) => ({ ...prev, showAuthor: e.target.checked })) }), _jsx(Checkbox, { checked: blogBuilder.showThumbnails, label: "Show thumbnails", onChange: (e) => setBlogBuilder((prev) => ({ ...prev, showThumbnails: e.target.checked })) })] }));
     }
     function renderNewsletterBuilder() {
-        return (_jsxs(Div, { className: "space-y-4 rounded-lg border border-zinc-200 p-4 dark:border-slate-700", children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-800 dark:text-zinc-200", children: "Newsletter Section Builder" }), _jsx(Input, { label: "Title", value: newsletterBuilder.title, onChange: (e) => setNewsletterBuilder((prev) => ({ ...prev, title: e.target.value })) }), _jsx(Textarea, { label: "Description", value: newsletterBuilder.description, onChange: (e) => setNewsletterBuilder((prev) => ({ ...prev, description: e.target.value })), rows: 2 }), _jsx(Input, { label: "Email placeholder", value: newsletterBuilder.placeholder, onChange: (e) => setNewsletterBuilder((prev) => ({ ...prev, placeholder: e.target.value })) }), _jsx(Input, { label: "Button text", value: newsletterBuilder.buttonText, onChange: (e) => setNewsletterBuilder((prev) => ({ ...prev, buttonText: e.target.value })) }), _jsx(Input, { label: "Privacy text", value: newsletterBuilder.privacyText, onChange: (e) => setNewsletterBuilder((prev) => ({ ...prev, privacyText: e.target.value })) }), _jsx(Input, { label: "Privacy link", value: newsletterBuilder.privacyLink, onChange: (e) => setNewsletterBuilder((prev) => ({ ...prev, privacyLink: e.target.value })), placeholder: "/privacy" })] }));
+        return (_jsxs(Div, { className: CLS_SECTION_PANEL, children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-800 dark:text-zinc-200", children: "Newsletter Section Builder" }), _jsx(Input, { label: "Title", value: newsletterBuilder.title, onChange: (e) => setNewsletterBuilder((prev) => ({ ...prev, title: e.target.value })) }), _jsx(Textarea, { label: "Description", value: newsletterBuilder.description, onChange: (e) => setNewsletterBuilder((prev) => ({ ...prev, description: e.target.value })), rows: 2 }), _jsx(Input, { label: "Email placeholder", value: newsletterBuilder.placeholder, onChange: (e) => setNewsletterBuilder((prev) => ({ ...prev, placeholder: e.target.value })) }), _jsx(Input, { label: "Button text", value: newsletterBuilder.buttonText, onChange: (e) => setNewsletterBuilder((prev) => ({ ...prev, buttonText: e.target.value })) }), _jsx(Input, { label: "Privacy text", value: newsletterBuilder.privacyText, onChange: (e) => setNewsletterBuilder((prev) => ({ ...prev, privacyText: e.target.value })) }), _jsx(Input, { label: "Privacy link", value: newsletterBuilder.privacyLink, onChange: (e) => setNewsletterBuilder((prev) => ({ ...prev, privacyLink: e.target.value })), placeholder: "/privacy" })] }));
     }
     function renderBannerBuilder() {
-        return (_jsxs(Div, { className: "space-y-4 rounded-lg border border-zinc-200 p-4 dark:border-slate-700", children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-800 dark:text-zinc-200", children: "Banner Section Builder" }), _jsx(Select, { label: "Height", value: bannerBuilder.height, onValueChange: (v) => setBannerBuilder((prev) => ({ ...prev, height: v })), options: [{ label: "Small (200px)", value: "sm" }, { label: "Medium (300px)", value: "md" }, { label: "Large (400px)", value: "lg" }, { label: "Extra Large (500px)", value: "xl" }] }), _jsx(Input, { label: "Background image URL", type: "url", value: bannerBuilder.backgroundImage, onChange: (e) => setBannerBuilder((prev) => ({ ...prev, backgroundImage: e.target.value })), placeholder: "https://..." }), _jsx(Input, { label: "Background color (CSS token)", value: bannerBuilder.backgroundColor, onChange: (e) => setBannerBuilder((prev) => ({ ...prev, backgroundColor: e.target.value })), placeholder: "var(--appkit-color-primary)" }), _jsx(Input, { label: "Gradient from (CSS token)", value: bannerBuilder.gradientFrom, onChange: (e) => setBannerBuilder((prev) => ({ ...prev, gradientFrom: e.target.value })), placeholder: "var(--appkit-color-primary)" }), _jsx(Input, { label: "Gradient to (CSS token)", value: bannerBuilder.gradientTo, onChange: (e) => setBannerBuilder((prev) => ({ ...prev, gradientTo: e.target.value })), placeholder: "var(--appkit-color-secondary)" }), _jsx(Input, { label: "Content title", value: bannerBuilder.contentTitle, onChange: (e) => setBannerBuilder((prev) => ({ ...prev, contentTitle: e.target.value })) }), _jsx(Input, { label: "Content subtitle", value: bannerBuilder.contentSubtitle, onChange: (e) => setBannerBuilder((prev) => ({ ...prev, contentSubtitle: e.target.value })) }), _jsx(Textarea, { label: "Content description", value: bannerBuilder.contentDescription, onChange: (e) => setBannerBuilder((prev) => ({ ...prev, contentDescription: e.target.value })), rows: 2 }), _jsxs(Div, { className: "space-y-2", children: [_jsx(Text, { className: "text-xs font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-400", children: "Buttons (max 3)" }), bannerBuilder.buttons.map((btn, index) => (_jsxs(Div, { className: "space-y-2 rounded-md border border-zinc-200 p-2 dark:border-slate-700", children: [_jsxs(Div, { className: "flex items-center justify-between", children: [_jsxs(Text, { className: "text-xs text-zinc-500", children: ["Button ", index + 1] }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => setBannerBuilder((prev) => ({ ...prev, buttons: prev.buttons.filter((_, i) => i !== index) })), children: "Remove" })] }), _jsx(Input, { label: "Text", value: btn.text, onChange: (e) => setBannerBuilder((prev) => { const next = [...prev.buttons]; next[index] = { ...next[index], text: e.target.value }; return { ...prev, buttons: next }; }) }), _jsx(Input, { label: "Link", value: btn.link, onChange: (e) => setBannerBuilder((prev) => { const next = [...prev.buttons]; next[index] = { ...next[index], link: e.target.value }; return { ...prev, buttons: next }; }) }), _jsx(Select, { label: "Variant", value: btn.variant, onValueChange: (v) => setBannerBuilder((prev) => { const next = [...prev.buttons]; next[index] = { ...next[index], variant: v }; return { ...prev, buttons: next }; }), options: [{ label: "Primary", value: "primary" }, { label: "Secondary", value: "secondary" }, { label: "Outline", value: "outline" }] })] }, `banner-btn-${index}`))), bannerBuilder.buttons.length < 3 ? (_jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setBannerBuilder((prev) => ({ ...prev, buttons: [...prev.buttons, { text: "", link: "", variant: "primary" }] })), children: "+ Add button" })) : null] }), _jsx(Checkbox, { checked: bannerBuilder.clickable, label: "Make entire banner clickable", onChange: (e) => setBannerBuilder((prev) => ({ ...prev, clickable: e.target.checked })) }), bannerBuilder.clickable ? (_jsx(Input, { label: "Click link", value: bannerBuilder.clickLink, onChange: (e) => setBannerBuilder((prev) => ({ ...prev, clickLink: e.target.value })), placeholder: "/products" })) : null] }));
+        return (_jsxs(Div, { className: CLS_SECTION_PANEL, children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-800 dark:text-zinc-200", children: "Banner Section Builder" }), _jsx(Select, { label: "Height", value: bannerBuilder.height, onValueChange: (v) => setBannerBuilder((prev) => ({ ...prev, height: v })), options: [{ label: "Small (200px)", value: "sm" }, { label: "Medium (300px)", value: "md" }, { label: "Large (400px)", value: "lg" }, { label: "Extra Large (500px)", value: "xl" }] }), _jsx(Input, { label: "Background image URL", type: "url", value: bannerBuilder.backgroundImage, onChange: (e) => setBannerBuilder((prev) => ({ ...prev, backgroundImage: e.target.value })), placeholder: "https://..." }), _jsx(Input, { label: "Background color (CSS token)", value: bannerBuilder.backgroundColor, onChange: (e) => setBannerBuilder((prev) => ({ ...prev, backgroundColor: e.target.value })), placeholder: "var(--appkit-color-primary)" }), _jsx(Input, { label: "Gradient from (CSS token)", value: bannerBuilder.gradientFrom, onChange: (e) => setBannerBuilder((prev) => ({ ...prev, gradientFrom: e.target.value })), placeholder: "var(--appkit-color-primary)" }), _jsx(Input, { label: "Gradient to (CSS token)", value: bannerBuilder.gradientTo, onChange: (e) => setBannerBuilder((prev) => ({ ...prev, gradientTo: e.target.value })), placeholder: "var(--appkit-color-secondary)" }), _jsx(Input, { label: "Content title", value: bannerBuilder.contentTitle, onChange: (e) => setBannerBuilder((prev) => ({ ...prev, contentTitle: e.target.value })) }), _jsx(Input, { label: "Content subtitle", value: bannerBuilder.contentSubtitle, onChange: (e) => setBannerBuilder((prev) => ({ ...prev, contentSubtitle: e.target.value })) }), _jsx(Textarea, { label: "Content description", value: bannerBuilder.contentDescription, onChange: (e) => setBannerBuilder((prev) => ({ ...prev, contentDescription: e.target.value })), rows: 2 }), _jsxs(Div, { className: "space-y-2", children: [_jsx(Text, { className: "text-xs font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-400", children: "Buttons (max 3)" }), bannerBuilder.buttons.map((btn, index) => (_jsxs(Div, { className: "space-y-2 rounded-md border border-zinc-200 p-2 dark:border-slate-700", children: [_jsxs(Div, { className: "flex items-center justify-between", children: [_jsxs(Text, { className: "text-xs text-zinc-500", children: ["Button ", index + 1] }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => setBannerBuilder((prev) => ({ ...prev, buttons: prev.buttons.filter((_, i) => i !== index) })), children: "Remove" })] }), _jsx(Input, { label: "Text", value: btn.text, onChange: (e) => setBannerBuilder((prev) => { const next = [...prev.buttons]; next[index] = { ...next[index], text: e.target.value }; return { ...prev, buttons: next }; }) }), _jsx(Input, { label: "Link", value: btn.link, onChange: (e) => setBannerBuilder((prev) => { const next = [...prev.buttons]; next[index] = { ...next[index], link: e.target.value }; return { ...prev, buttons: next }; }) }), _jsx(Select, { label: "Variant", value: btn.variant, onValueChange: (v) => setBannerBuilder((prev) => { const next = [...prev.buttons]; next[index] = { ...next[index], variant: v }; return { ...prev, buttons: next }; }), options: [{ label: "Primary", value: "primary" }, { label: "Secondary", value: "secondary" }, { label: "Outline", value: "outline" }] })] }, `banner-btn-${index}`))), bannerBuilder.buttons.length < 3 ? (_jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setBannerBuilder((prev) => ({ ...prev, buttons: [...prev.buttons, { text: "", link: "", variant: "primary" }] })), children: "+ Add button" })) : null] }), _jsx(Checkbox, { checked: bannerBuilder.clickable, label: "Make entire banner clickable", onChange: (e) => setBannerBuilder((prev) => ({ ...prev, clickable: e.target.checked })) }), bannerBuilder.clickable ? (_jsx(Input, { label: "Click link", value: bannerBuilder.clickLink, onChange: (e) => setBannerBuilder((prev) => ({ ...prev, clickLink: e.target.value })), placeholder: "/products" })) : null] }));
     }
     function renderFeaturesBuilder() {
-        return (_jsxs(Div, { className: "space-y-4 rounded-lg border border-zinc-200 p-4 dark:border-slate-700", children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-800 dark:text-zinc-200", children: "Features Section Builder" }), _jsx(Input, { label: "Section title", value: featuresBuilder.title, onChange: (e) => setFeaturesBuilder((prev) => ({ ...prev, title: e.target.value })) }), _jsxs(Div, { className: "space-y-2", children: [_jsx(Text, { className: "text-xs font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-400", children: "Feature items" }), featuresBuilder.features.map((feature, index) => (_jsxs(Div, { className: "flex items-center gap-2", children: [_jsx(Input, { value: feature, onChange: (e) => setFeaturesBuilder((prev) => { const next = [...prev.features]; next[index] = e.target.value; return { ...prev, features: next }; }), className: "flex-1" }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => setFeaturesBuilder((prev) => ({ ...prev, features: prev.features.filter((_, i) => i !== index) })), children: "\u2715" })] }, `feat-${index}`))), _jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setFeaturesBuilder((prev) => ({ ...prev, features: [...prev.features, ""] })), children: "+ Add feature" })] })] }));
+        return (_jsxs(Div, { className: CLS_SECTION_PANEL, children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-800 dark:text-zinc-200", children: "Features Section Builder" }), _jsx(Input, { label: "Section title", value: featuresBuilder.title, onChange: (e) => setFeaturesBuilder((prev) => ({ ...prev, title: e.target.value })) }), _jsxs(Div, { className: "space-y-2", children: [_jsx(Text, { className: "text-xs font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-400", children: "Feature items" }), featuresBuilder.features.map((feature, index) => (_jsxs(Div, { className: "flex items-center gap-2", children: [_jsx(Input, { value: feature, onChange: (e) => setFeaturesBuilder((prev) => { const next = [...prev.features]; next[index] = e.target.value; return { ...prev, features: next }; }), className: "flex-1" }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => setFeaturesBuilder((prev) => ({ ...prev, features: prev.features.filter((_, i) => i !== index) })), children: "\u2715" })] }, `feat-${index}`))), _jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setFeaturesBuilder((prev) => ({ ...prev, features: [...prev.features, ""] })), children: "+ Add feature" })] })] }));
     }
     function renderReviewsBuilder() {
-        return (_jsxs(Div, { className: "space-y-4 rounded-lg border border-zinc-200 p-4 dark:border-slate-700", children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-800 dark:text-zinc-200", children: "Reviews Section Builder" }), _jsx(Input, { label: "Section title", value: reviewsBuilder.title, onChange: (e) => setReviewsBuilder((prev) => ({ ...prev, title: e.target.value })) }), _jsx(Select, { label: "Reviews source", value: reviewsBuilder.source, onValueChange: (v) => setReviewsBuilder((prev) => ({ ...prev, source: v })), options: [
+        return (_jsxs(Div, { className: CLS_SECTION_PANEL, children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-800 dark:text-zinc-200", children: "Reviews Section Builder" }), _jsx(Input, { label: "Section title", value: reviewsBuilder.title, onChange: (e) => setReviewsBuilder((prev) => ({ ...prev, title: e.target.value })) }), _jsx(Select, { label: "Reviews source", value: reviewsBuilder.source, onValueChange: (v) => setReviewsBuilder((prev) => ({ ...prev, source: v })), options: [
                         { label: "Platform reviews (LetItRip)", value: "platform" },
                         { label: "Google Business Reviews", value: "google" },
-                    ] }), reviewsBuilder.source === "google" ? (_jsx(Input, { label: "Google Place ID", value: reviewsBuilder.placeId, onChange: (e) => setReviewsBuilder((prev) => ({ ...prev, placeId: e.target.value })), placeholder: "ChIJ...", helperText: "Find your Place ID at maps.google.com/placesinventory" })) : null, _jsx(Select, { label: "Max reviews", value: String(reviewsBuilder.maxReviews), onValueChange: (v) => setReviewsBuilder((prev) => ({ ...prev, maxReviews: Number(v) })), options: [{ label: "5", value: "5" }, { label: "10", value: "10" }, { label: "20", value: "20" }] }), _jsx(Select, { label: "Items per view", value: String(reviewsBuilder.itemsPerView), onValueChange: (v) => setReviewsBuilder((prev) => ({ ...prev, itemsPerView: Number(v) })), options: [{ label: "1", value: "1" }, { label: "2", value: "2" }, { label: "3", value: "3" }] }), _jsx(Checkbox, { checked: reviewsBuilder.autoScroll, label: "Auto-scroll", onChange: (e) => setReviewsBuilder((prev) => ({ ...prev, autoScroll: e.target.checked })) }), _jsx(Input, { label: "Scroll interval (ms)", type: "number", min: 1000, step: 500, value: String(reviewsBuilder.scrollInterval), onChange: (e) => setReviewsBuilder((prev) => ({ ...prev, scrollInterval: Math.max(1000, Number(e.target.value) || 1000) })) })] }));
+                    ] }), reviewsBuilder.source === "google" ? (_jsx(Input, { label: "Google Place ID", value: reviewsBuilder.placeId, onChange: (e) => setReviewsBuilder((prev) => ({ ...prev, placeId: e.target.value })), placeholder: "ChIJ...", helperText: "Find your Place ID at maps.google.com/placesinventory" })) : null, _jsx(Select, { label: "Max reviews", value: String(reviewsBuilder.maxReviews), onValueChange: (v) => setReviewsBuilder((prev) => ({ ...prev, maxReviews: Number(v) })), options: [{ label: "5", value: "5" }, { label: "10", value: "10" }, { label: "20", value: "20" }] }), _jsx(Select, { label: "Items per view", value: String(reviewsBuilder.itemsPerView), onValueChange: (v) => setReviewsBuilder((prev) => ({ ...prev, itemsPerView: Number(v) })), options: [{ label: "1", value: "1" }, { label: "2", value: "2" }, { label: "3", value: "3" }] }), _jsx(Checkbox, { checked: reviewsBuilder.autoScroll, label: "Auto-scroll", onChange: (e) => setReviewsBuilder((prev) => ({ ...prev, autoScroll: e.target.checked })) }), _jsx(Input, { label: LBL_SCROLL_INTERVAL, type: "number", min: 1000, step: 500, value: String(reviewsBuilder.scrollInterval), onChange: (e) => setReviewsBuilder((prev) => ({ ...prev, scrollInterval: Math.max(1000, Number(e.target.value) || 1000) })) })] }));
     }
     function renderWhatsAppBuilder() {
-        return (_jsxs(Div, { className: "space-y-4 rounded-lg border border-zinc-200 p-4 dark:border-slate-700", children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-800 dark:text-zinc-200", children: "WhatsApp Community Builder" }), _jsx(Input, { label: "Title", value: whatsappBuilder.title, onChange: (e) => setWhatsappBuilder((prev) => ({ ...prev, title: e.target.value })) }), _jsx(Textarea, { label: "Description", value: whatsappBuilder.description, onChange: (e) => setWhatsappBuilder((prev) => ({ ...prev, description: e.target.value })), rows: 2 }), _jsx(Input, { label: "WhatsApp group link", type: "url", value: whatsappBuilder.groupLink, onChange: (e) => setWhatsappBuilder((prev) => ({ ...prev, groupLink: e.target.value })), placeholder: "https://chat.whatsapp.com/..." }), _jsx(Input, { label: "Member count", type: "number", min: 0, value: String(whatsappBuilder.memberCount), onChange: (e) => setWhatsappBuilder((prev) => ({ ...prev, memberCount: Math.max(0, Number(e.target.value) || 0) })) }), _jsxs(Div, { className: "space-y-2", children: [_jsx(Text, { className: "text-xs font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-400", children: "Benefits" }), whatsappBuilder.benefits.map((benefit, index) => (_jsxs(Div, { className: "flex items-center gap-2", children: [_jsx(Input, { value: benefit, onChange: (e) => setWhatsappBuilder((prev) => { const next = [...prev.benefits]; next[index] = e.target.value; return { ...prev, benefits: next }; }), className: "flex-1" }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => setWhatsappBuilder((prev) => ({ ...prev, benefits: prev.benefits.filter((_, i) => i !== index) })), children: "\u2715" })] }, `wb-${index}`))), _jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setWhatsappBuilder((prev) => ({ ...prev, benefits: [...prev.benefits, ""] })), children: "+ Add benefit" })] }), _jsx(Input, { label: "Button text", value: whatsappBuilder.buttonText, onChange: (e) => setWhatsappBuilder((prev) => ({ ...prev, buttonText: e.target.value })) }), _jsx(Input, { label: "Testimonial (optional)", value: whatsappBuilder.testimonial, onChange: (e) => setWhatsappBuilder((prev) => ({ ...prev, testimonial: e.target.value })) })] }));
+        return (_jsxs(Div, { className: CLS_SECTION_PANEL, children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-800 dark:text-zinc-200", children: "WhatsApp Community Builder" }), _jsx(Input, { label: "Title", value: whatsappBuilder.title, onChange: (e) => setWhatsappBuilder((prev) => ({ ...prev, title: e.target.value })) }), _jsx(Textarea, { label: "Description", value: whatsappBuilder.description, onChange: (e) => setWhatsappBuilder((prev) => ({ ...prev, description: e.target.value })), rows: 2 }), _jsx(Input, { label: "WhatsApp group link", type: "url", value: whatsappBuilder.groupLink, onChange: (e) => setWhatsappBuilder((prev) => ({ ...prev, groupLink: e.target.value })), placeholder: "https://chat.whatsapp.com/..." }), _jsx(Input, { label: "Member count", type: "number", min: 0, value: String(whatsappBuilder.memberCount), onChange: (e) => setWhatsappBuilder((prev) => ({ ...prev, memberCount: Math.max(0, Number(e.target.value) || 0) })) }), _jsxs(Div, { className: "space-y-2", children: [_jsx(Text, { className: "text-xs font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-400", children: "Benefits" }), whatsappBuilder.benefits.map((benefit, index) => (_jsxs(Div, { className: "flex items-center gap-2", children: [_jsx(Input, { value: benefit, onChange: (e) => setWhatsappBuilder((prev) => { const next = [...prev.benefits]; next[index] = e.target.value; return { ...prev, benefits: next }; }), className: "flex-1" }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => setWhatsappBuilder((prev) => ({ ...prev, benefits: prev.benefits.filter((_, i) => i !== index) })), children: "\u2715" })] }, `wb-${index}`))), _jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setWhatsappBuilder((prev) => ({ ...prev, benefits: [...prev.benefits, ""] })), children: "+ Add benefit" })] }), _jsx(Input, { label: "Button text", value: whatsappBuilder.buttonText, onChange: (e) => setWhatsappBuilder((prev) => ({ ...prev, buttonText: e.target.value })) }), _jsx(Input, { label: "Testimonial (optional)", value: whatsappBuilder.testimonial, onChange: (e) => setWhatsappBuilder((prev) => ({ ...prev, testimonial: e.target.value })) })] }));
     }
     function renderWelcomeBuilder() {
-        return (_jsxs(Div, { className: "space-y-4 rounded-lg border border-zinc-200 p-4 dark:border-slate-700", children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-800 dark:text-zinc-200", children: "Welcome Section Builder" }), _jsx(Input, { label: "Headline (h1)", value: welcomeBuilder.h1, onChange: (e) => setWelcomeBuilder((prev) => ({ ...prev, h1: e.target.value })) }), _jsx(Input, { label: "Subtitle", value: welcomeBuilder.subtitle, onChange: (e) => setWelcomeBuilder((prev) => ({ ...prev, subtitle: e.target.value })) }), _jsx(Textarea, { label: "Description", value: welcomeBuilder.description, onChange: (e) => setWelcomeBuilder((prev) => ({ ...prev, description: e.target.value })), rows: 3 }), _jsx(Checkbox, { checked: welcomeBuilder.showCTA, label: "Show CTA button", onChange: (e) => setWelcomeBuilder((prev) => ({ ...prev, showCTA: e.target.checked })) }), welcomeBuilder.showCTA ? (_jsxs(_Fragment, { children: [_jsx(Input, { label: "CTA text", value: welcomeBuilder.ctaText, onChange: (e) => setWelcomeBuilder((prev) => ({ ...prev, ctaText: e.target.value })) }), _jsx(Input, { label: "CTA link", value: welcomeBuilder.ctaLink, onChange: (e) => setWelcomeBuilder((prev) => ({ ...prev, ctaLink: e.target.value })), placeholder: "/products" })] })) : null] }));
+        return (_jsxs(Div, { className: CLS_SECTION_PANEL, children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-800 dark:text-zinc-200", children: "Welcome Section Builder" }), _jsx(Input, { label: "Headline (h1)", value: welcomeBuilder.h1, onChange: (e) => setWelcomeBuilder((prev) => ({ ...prev, h1: e.target.value })) }), _jsx(Input, { label: "Subtitle", value: welcomeBuilder.subtitle, onChange: (e) => setWelcomeBuilder((prev) => ({ ...prev, subtitle: e.target.value })) }), _jsx(Textarea, { label: "Description", value: welcomeBuilder.description, onChange: (e) => setWelcomeBuilder((prev) => ({ ...prev, description: e.target.value })), rows: 3 }), _jsx(Checkbox, { checked: welcomeBuilder.showCTA, label: "Show CTA button", onChange: (e) => setWelcomeBuilder((prev) => ({ ...prev, showCTA: e.target.checked })) }), welcomeBuilder.showCTA ? (_jsxs(_Fragment, { children: [_jsx(Input, { label: "CTA text", value: welcomeBuilder.ctaText, onChange: (e) => setWelcomeBuilder((prev) => ({ ...prev, ctaText: e.target.value })) }), _jsx(Input, { label: "CTA link", value: welcomeBuilder.ctaLink, onChange: (e) => setWelcomeBuilder((prev) => ({ ...prev, ctaLink: e.target.value })), placeholder: "/products" })] })) : null] }));
     }
     function renderTrustIndicatorsBuilder() {
-        return (_jsxs(Div, { className: "space-y-4 rounded-lg border border-zinc-200 p-4 dark:border-slate-700", children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-800 dark:text-zinc-200", children: "Trust Indicators Builder" }), _jsx(Input, { label: "Section title", value: trustIndicatorsBuilder.title, onChange: (e) => setTrustIndicatorsBuilder((prev) => ({ ...prev, title: e.target.value })) }), trustIndicatorsBuilder.indicators.map((ind, index) => (_jsxs(Div, { className: "space-y-2 rounded-md border border-zinc-200 p-3 dark:border-slate-700", children: [_jsxs(Div, { className: "flex items-center justify-between", children: [_jsxs(Text, { className: "text-xs font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-400", children: ["Indicator ", index + 1] }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => setTrustIndicatorsBuilder((prev) => ({ ...prev, indicators: prev.indicators.filter((_, i) => i !== index) })), children: "Remove" })] }), _jsx(Input, { label: "Icon (emoji or text)", value: ind.icon, onChange: (e) => setTrustIndicatorsBuilder((prev) => { const next = [...prev.indicators]; next[index] = { ...next[index], icon: e.target.value }; return { ...prev, indicators: next }; }) }), _jsx(Input, { label: "Title", value: ind.title, onChange: (e) => setTrustIndicatorsBuilder((prev) => { const next = [...prev.indicators]; next[index] = { ...next[index], title: e.target.value }; return { ...prev, indicators: next }; }) }), _jsx(Input, { label: "Description", value: ind.description, onChange: (e) => setTrustIndicatorsBuilder((prev) => { const next = [...prev.indicators]; next[index] = { ...next[index], description: e.target.value }; return { ...prev, indicators: next }; }) })] }, ind.id))), _jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setTrustIndicatorsBuilder((prev) => ({ ...prev, indicators: [...prev.indicators, { id: `ti-${Date.now()}`, icon: "✨", title: "", description: "" }] })), children: "+ Add indicator" })] }));
+        return (_jsxs(Div, { className: CLS_SECTION_PANEL, children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-800 dark:text-zinc-200", children: "Trust Indicators Builder" }), _jsx(Input, { label: "Section title", value: trustIndicatorsBuilder.title, onChange: (e) => setTrustIndicatorsBuilder((prev) => ({ ...prev, title: e.target.value })) }), trustIndicatorsBuilder.indicators.map((ind, index) => (_jsxs(Div, { className: "space-y-2 rounded-md border border-zinc-200 p-3 dark:border-slate-700", children: [_jsxs(Div, { className: "flex items-center justify-between", children: [_jsxs(Text, { className: "text-xs font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-400", children: ["Indicator ", index + 1] }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => setTrustIndicatorsBuilder((prev) => ({ ...prev, indicators: prev.indicators.filter((_, i) => i !== index) })), children: "Remove" })] }), _jsx(Input, { label: "Icon (emoji or text)", value: ind.icon, onChange: (e) => setTrustIndicatorsBuilder((prev) => { const next = [...prev.indicators]; next[index] = { ...next[index], icon: e.target.value }; return { ...prev, indicators: next }; }) }), _jsx(Input, { label: "Title", value: ind.title, onChange: (e) => setTrustIndicatorsBuilder((prev) => { const next = [...prev.indicators]; next[index] = { ...next[index], title: e.target.value }; return { ...prev, indicators: next }; }) }), _jsx(Input, { label: "Description", value: ind.description, onChange: (e) => setTrustIndicatorsBuilder((prev) => { const next = [...prev.indicators]; next[index] = { ...next[index], description: e.target.value }; return { ...prev, indicators: next }; }) })] }, ind.id))), _jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setTrustIndicatorsBuilder((prev) => ({ ...prev, indicators: [...prev.indicators, { id: `ti-${Date.now()}`, icon: "✨", title: "", description: "" }] })), children: "+ Add indicator" })] }));
     }
     function renderCategoriesBuilder() {
-        return (_jsxs(Div, { className: "space-y-4 rounded-lg border border-zinc-200 p-4 dark:border-slate-700", children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-800 dark:text-zinc-200", children: "Categories Section Builder" }), _jsx(Input, { label: "Section title", value: categoriesBuilder.title, onChange: (e) => setCategoriesBuilder((prev) => ({ ...prev, title: e.target.value })) }), _jsx(Input, { label: "Max categories (4\u201312)", type: "number", min: 4, max: 12, value: String(categoriesBuilder.maxCategories), onChange: (e) => setCategoriesBuilder((prev) => ({ ...prev, maxCategories: Math.min(12, Math.max(4, Number(e.target.value) || 4)) })) }), _jsx(Checkbox, { checked: categoriesBuilder.autoScroll, label: "Auto-scroll", onChange: (e) => setCategoriesBuilder((prev) => ({ ...prev, autoScroll: e.target.checked })) }), _jsx(Input, { label: "Scroll interval (ms)", type: "number", min: 1000, step: 500, value: String(categoriesBuilder.scrollInterval), onChange: (e) => setCategoriesBuilder((prev) => ({ ...prev, scrollInterval: Math.max(1000, Number(e.target.value) || 1000) })) })] }));
+        return (_jsxs(Div, { className: CLS_SECTION_PANEL, children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-800 dark:text-zinc-200", children: "Categories Section Builder" }), _jsx(Input, { label: "Section title", value: categoriesBuilder.title, onChange: (e) => setCategoriesBuilder((prev) => ({ ...prev, title: e.target.value })) }), _jsx(Input, { label: "Max categories (4\u201312)", type: "number", min: 4, max: 12, value: String(categoriesBuilder.maxCategories), onChange: (e) => setCategoriesBuilder((prev) => ({ ...prev, maxCategories: Math.min(12, Math.max(4, Number(e.target.value) || 4)) })) }), _jsx(Checkbox, { checked: categoriesBuilder.autoScroll, label: "Auto-scroll", onChange: (e) => setCategoriesBuilder((prev) => ({ ...prev, autoScroll: e.target.checked })) }), _jsx(Input, { label: LBL_SCROLL_INTERVAL, type: "number", min: 1000, step: 500, value: String(categoriesBuilder.scrollInterval), onChange: (e) => setCategoriesBuilder((prev) => ({ ...prev, scrollInterval: Math.max(1000, Number(e.target.value) || 1000) })) })] }));
     }
     function renderBrandsBuilder() {
-        return (_jsxs(Div, { className: "space-y-4 rounded-lg border border-zinc-200 p-4 dark:border-slate-700", children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-800 dark:text-zinc-200", children: "Brands Section Builder" }), _jsx(Input, { label: "Section title", value: brandsBuilder.title, onChange: (e) => setBrandsBuilder((prev) => ({ ...prev, title: e.target.value })) }), _jsx(Input, { label: "Subtitle", value: brandsBuilder.subtitle, onChange: (e) => setBrandsBuilder((prev) => ({ ...prev, subtitle: e.target.value })) }), _jsx(Input, { label: "Max brands", type: "number", min: 1, max: 30, value: String(brandsBuilder.maxBrands), onChange: (e) => setBrandsBuilder((prev) => ({ ...prev, maxBrands: Math.max(1, Number(e.target.value) || 1) })) }), _jsx(Checkbox, { checked: brandsBuilder.autoScroll, label: "Auto-scroll", onChange: (e) => setBrandsBuilder((prev) => ({ ...prev, autoScroll: e.target.checked })) }), _jsx(Input, { label: "Scroll interval (ms)", type: "number", min: 1000, step: 500, value: String(brandsBuilder.scrollInterval), onChange: (e) => setBrandsBuilder((prev) => ({ ...prev, scrollInterval: Math.max(1000, Number(e.target.value) || 1000) })) })] }));
+        return (_jsxs(Div, { className: CLS_SECTION_PANEL, children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-800 dark:text-zinc-200", children: "Brands Section Builder" }), _jsx(Input, { label: "Section title", value: brandsBuilder.title, onChange: (e) => setBrandsBuilder((prev) => ({ ...prev, title: e.target.value })) }), _jsx(Input, { label: "Subtitle", value: brandsBuilder.subtitle, onChange: (e) => setBrandsBuilder((prev) => ({ ...prev, subtitle: e.target.value })) }), _jsx(Input, { label: "Max brands", type: "number", min: 1, max: 30, value: String(brandsBuilder.maxBrands), onChange: (e) => setBrandsBuilder((prev) => ({ ...prev, maxBrands: Math.max(1, Number(e.target.value) || 1) })) }), _jsx(Checkbox, { checked: brandsBuilder.autoScroll, label: "Auto-scroll", onChange: (e) => setBrandsBuilder((prev) => ({ ...prev, autoScroll: e.target.checked })) }), _jsx(Input, { label: LBL_SCROLL_INTERVAL, type: "number", min: 1000, step: 500, value: String(brandsBuilder.scrollInterval), onChange: (e) => setBrandsBuilder((prev) => ({ ...prev, scrollInterval: Math.max(1000, Number(e.target.value) || 1000) })) })] }));
     }
     function renderCarouselBuilder() {
-        return (_jsxs(Div, { className: "space-y-4 rounded-lg border border-zinc-200 p-4 dark:border-slate-700", children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-800 dark:text-zinc-200", children: "Carousel Section Builder" }), _jsx(Input, { label: "Section title", value: carouselBuilder.title, onChange: (e) => setCarouselBuilder((prev) => ({ ...prev, title: e.target.value })), placeholder: "Hero Carousel" }), _jsx(Select, { label: "Slide height", value: carouselBuilder.height, onValueChange: (value) => setCarouselBuilder((prev) => ({ ...prev, height: value })), options: [
+        return (_jsxs(Div, { className: CLS_SECTION_PANEL, children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-800 dark:text-zinc-200", children: "Carousel Section Builder" }), _jsx(Input, { label: "Section title", value: carouselBuilder.title, onChange: (e) => setCarouselBuilder((prev) => ({ ...prev, title: e.target.value })), placeholder: "Hero Carousel" }), _jsx(Select, { label: "Slide height", value: carouselBuilder.height, onValueChange: (value) => setCarouselBuilder((prev) => ({ ...prev, height: value })), options: [
                         { label: "Viewport (100vh)", value: "viewport" },
                         { label: "Tall (80vh)", value: "tall" },
                         { label: "Medium (60vh)", value: "medium" },
@@ -760,7 +778,16 @@ export function AdminSectionsView({ children }) {
                 return { ...prev, cards: next };
             });
         }
-        return (_jsxs(Div, { className: "space-y-4 rounded-lg border border-zinc-200 p-4 dark:border-slate-700", children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-800 dark:text-zinc-200", children: "Custom Cards Builder" }), _jsx(Input, { label: "Section title", value: customCardsBuilder.title, onChange: (e) => setCustomCardsBuilder((prev) => ({ ...prev, title: e.target.value })) }), _jsx(Select, { label: "Layout", value: customCardsBuilder.layout, onValueChange: (value) => setCustomCardsBuilder((prev) => ({ ...prev, layout: value })), options: [
+        function renderCardFields(card, index) {
+            return (_jsxs(Div, { className: "space-y-3 rounded-md border border-zinc-200 p-3 dark:border-slate-700", children: [_jsxs(Div, { className: "flex items-center justify-between", children: [_jsxs(Text, { className: "text-xs font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-400", children: ["Card ", index + 1] }), _jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => removeCard(index), children: "Remove" })] }), _jsx(Input, { label: "ID / slug", value: card.id, onChange: (e) => updateCard(index, { id: e.target.value }), placeholder: "card-1" }), _jsx(Input, { label: "Image URL", value: card.image, onChange: (e) => updateCard(index, { image: e.target.value }), placeholder: "https://..." }), _jsx(Input, { label: "Image alt text", value: card.imageAlt, onChange: (e) => updateCard(index, { imageAlt: e.target.value }) }), _jsx(Input, { label: "Eyebrow (small label above title)", value: card.eyebrow, onChange: (e) => updateCard(index, { eyebrow: e.target.value }) }), _jsx(Input, { label: "Title", value: card.title, onChange: (e) => updateCard(index, { title: e.target.value }) }), _jsx(Input, { label: "Body / description", value: card.body, onChange: (e) => updateCard(index, { body: e.target.value }) }), _jsx(Input, { label: "Link (href)", value: card.link, onChange: (e) => updateCard(index, { link: e.target.value }), placeholder: "/categories/..." }), _jsx(Input, { label: "Background colour", value: card.backgroundColor, onChange: (e) => updateCard(index, { backgroundColor: e.target.value }), placeholder: "#ffffff or var(--appkit-color-primary)" }), _jsx(Input, { label: "Text colour", value: card.textColor, onChange: (e) => updateCard(index, { textColor: e.target.value }), placeholder: "#000000" }), _jsx(Select, { label: "Border radius", value: card.borderRadius, onValueChange: (value) => updateCard(index, { borderRadius: value }), options: [
+                            { label: "None", value: "none" }, { label: "Small", value: "sm" }, { label: "Medium", value: "md" },
+                            { label: "Large", value: "lg" }, { label: "XL", value: "xl" }, { label: "Full (pill)", value: "full" },
+                        ] }), _jsx(Select, { label: "Shadow level", value: card.shadowLevel, onValueChange: (value) => updateCard(index, { shadowLevel: value }), options: [
+                            { label: "None", value: "none" }, { label: "Small", value: "sm" },
+                            { label: "Medium", value: "md" }, { label: "Large", value: "lg" },
+                        ] })] }, `custom-card-${index}`));
+        }
+        return (_jsxs(Div, { className: CLS_SECTION_PANEL, children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-800 dark:text-zinc-200", children: "Custom Cards Builder" }), _jsx(Input, { label: "Section title", value: customCardsBuilder.title, onChange: (e) => setCustomCardsBuilder((prev) => ({ ...prev, title: e.target.value })) }), _jsx(Select, { label: "Layout", value: customCardsBuilder.layout, onValueChange: (value) => setCustomCardsBuilder((prev) => ({ ...prev, layout: value })), options: [
                         { label: "Grid", value: "grid" },
                         { label: "Row (horizontal scroll)", value: "row" },
                         { label: "Masonry", value: "masonry" },
@@ -769,25 +796,13 @@ export function AdminSectionsView({ children }) {
                         { label: "2 columns", value: "2" },
                         { label: "3 columns", value: "3" },
                         { label: "4 columns", value: "4" },
-                    ] }), _jsx(Checkbox, { checked: customCardsBuilder.autoScroll, label: "Auto-scroll", onChange: (e) => setCustomCardsBuilder((prev) => ({ ...prev, autoScroll: e.target.checked })) }), _jsx(Input, { label: "Scroll interval (ms)", type: "number", min: 1000, step: 500, value: String(customCardsBuilder.scrollIntervalMs), onChange: (e) => setCustomCardsBuilder((prev) => ({
+                    ] }), _jsx(Checkbox, { checked: customCardsBuilder.autoScroll, label: "Auto-scroll", onChange: (e) => setCustomCardsBuilder((prev) => ({ ...prev, autoScroll: e.target.checked })) }), _jsx(Input, { label: LBL_SCROLL_INTERVAL, type: "number", min: 1000, step: 500, value: String(customCardsBuilder.scrollIntervalMs), onChange: (e) => setCustomCardsBuilder((prev) => ({
                         ...prev,
                         scrollIntervalMs: Math.max(1000, Number(e.target.value) || 4000),
-                    })) }), _jsxs(Div, { className: "space-y-3", children: [_jsxs(Div, { className: "flex items-center justify-between", children: [_jsxs(Text, { className: "text-xs font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-400", children: ["Cards (", customCardsBuilder.cards.length, ")"] }), _jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: addCard, children: "Add card" })] }), customCardsBuilder.cards.map((card, index) => (_jsxs(Div, { className: "space-y-3 rounded-md border border-zinc-200 p-3 dark:border-slate-700", children: [_jsxs(Div, { className: "flex items-center justify-between", children: [_jsxs(Text, { className: "text-xs font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-400", children: ["Card ", index + 1] }), _jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => removeCard(index), children: "Remove" })] }), _jsx(Input, { label: "ID / slug", value: card.id, onChange: (e) => updateCard(index, { id: e.target.value }), placeholder: "card-1" }), _jsx(Input, { label: "Image URL", value: card.image, onChange: (e) => updateCard(index, { image: e.target.value }), placeholder: "https://..." }), _jsx(Input, { label: "Image alt text", value: card.imageAlt, onChange: (e) => updateCard(index, { imageAlt: e.target.value }) }), _jsx(Input, { label: "Eyebrow (small label above title)", value: card.eyebrow, onChange: (e) => updateCard(index, { eyebrow: e.target.value }) }), _jsx(Input, { label: "Title", value: card.title, onChange: (e) => updateCard(index, { title: e.target.value }) }), _jsx(Input, { label: "Body / description", value: card.body, onChange: (e) => updateCard(index, { body: e.target.value }) }), _jsx(Input, { label: "Link (href)", value: card.link, onChange: (e) => updateCard(index, { link: e.target.value }), placeholder: "/categories/..." }), _jsx(Input, { label: "Background colour", value: card.backgroundColor, onChange: (e) => updateCard(index, { backgroundColor: e.target.value }), placeholder: "#ffffff or var(--appkit-color-primary)" }), _jsx(Input, { label: "Text colour", value: card.textColor, onChange: (e) => updateCard(index, { textColor: e.target.value }), placeholder: "#000000" }), _jsx(Select, { label: "Border radius", value: card.borderRadius, onValueChange: (value) => updateCard(index, { borderRadius: value }), options: [
-                                        { label: "None", value: "none" },
-                                        { label: "Small", value: "sm" },
-                                        { label: "Medium", value: "md" },
-                                        { label: "Large", value: "lg" },
-                                        { label: "XL", value: "xl" },
-                                        { label: "Full (pill)", value: "full" },
-                                    ] }), _jsx(Select, { label: "Shadow level", value: card.shadowLevel, onValueChange: (value) => updateCard(index, { shadowLevel: value }), options: [
-                                        { label: "None", value: "none" },
-                                        { label: "Small", value: "sm" },
-                                        { label: "Medium", value: "md" },
-                                        { label: "Large", value: "lg" },
-                                    ] })] }, `custom-card-${index}`))), customCardsBuilder.cards.length === 0 ? (_jsx(Text, { className: "text-sm text-zinc-500 dark:text-zinc-400", children: "No cards added yet. Click \"Add card\" to start." })) : null] })] }));
+                    })) }), _jsxs(Div, { className: "space-y-3", children: [_jsxs(Div, { className: "flex items-center justify-between", children: [_jsxs(Text, { className: "text-xs font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-400", children: ["Cards (", customCardsBuilder.cards.length, ")"] }), _jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: addCard, children: "Add card" })] }), customCardsBuilder.cards.map((card, index) => renderCardFields(card, index)), customCardsBuilder.cards.length === 0 ? (_jsx(Text, { className: "text-sm text-zinc-500 dark:text-zinc-400", children: "No cards added yet. Click \"Add card\" to start." })) : null] })] }));
     }
     function renderGoogleReviewsBuilder() {
-        return (_jsxs(Div, { className: "space-y-4 rounded-lg border border-zinc-200 p-4 dark:border-slate-700", children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-800 dark:text-zinc-200", children: "Google Reviews Builder" }), _jsx(Input, { label: "Google Place ID", value: googleReviewsBuilder.placeId, onChange: (e) => setGoogleReviewsBuilder((prev) => ({ ...prev, placeId: e.target.value })), placeholder: "ChIJ...", helperText: "Find your Place ID at developers.google.com/maps/documentation/places/web-service/place-id" }), _jsx(Input, { label: "Max reviews to show", type: "number", min: 1, max: 20, value: String(googleReviewsBuilder.maxReviews), onChange: (e) => setGoogleReviewsBuilder((prev) => ({
+        return (_jsxs(Div, { className: CLS_SECTION_PANEL, children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-800 dark:text-zinc-200", children: "Google Reviews Builder" }), _jsx(Input, { label: "Google Place ID", value: googleReviewsBuilder.placeId, onChange: (e) => setGoogleReviewsBuilder((prev) => ({ ...prev, placeId: e.target.value })), placeholder: "ChIJ...", helperText: "Find your Place ID at developers.google.com/maps/documentation/places/web-service/place-id" }), _jsx(Input, { label: "Max reviews to show", type: "number", min: 1, max: 20, value: String(googleReviewsBuilder.maxReviews), onChange: (e) => setGoogleReviewsBuilder((prev) => ({
                         ...prev,
                         maxReviews: Math.max(1, Math.min(20, Number(e.target.value) || 6)),
                     })) }), _jsx(Select, { label: "Minimum star rating to show", value: String(googleReviewsBuilder.minRating), onValueChange: (value) => setGoogleReviewsBuilder((prev) => ({ ...prev, minRating: Number(value) })), options: [
@@ -801,17 +816,17 @@ export function AdminSectionsView({ children }) {
                     ] }), _jsx(Checkbox, { checked: googleReviewsBuilder.showRating, label: "Show star rating on each review", onChange: (e) => setGoogleReviewsBuilder((prev) => ({ ...prev, showRating: e.target.checked })) }), _jsx(Checkbox, { checked: googleReviewsBuilder.showDate, label: "Show review date", onChange: (e) => setGoogleReviewsBuilder((prev) => ({ ...prev, showDate: e.target.checked })) }), _jsx(Checkbox, { checked: googleReviewsBuilder.linkToGoogleMaps, label: "Link to Google Maps listing", onChange: (e) => setGoogleReviewsBuilder((prev) => ({ ...prev, linkToGoogleMaps: e.target.checked })) }), googleReviewsBuilder.linkToGoogleMaps ? (_jsx(Input, { label: "Google Maps URL", value: googleReviewsBuilder.googleMapsUrl, onChange: (e) => setGoogleReviewsBuilder((prev) => ({ ...prev, googleMapsUrl: e.target.value })), placeholder: "https://maps.google.com/..." })) : null] }));
     }
     function renderFeaturedBundlesBuilder() {
-        return (_jsxs(Div, { className: "space-y-4 rounded-lg border border-zinc-200 p-4 dark:border-slate-700", children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-800 dark:text-zinc-200", children: "Featured Bundles Builder" }), _jsx(Input, { label: "Section title", value: featuredBundlesBuilder.title, onChange: (e) => setFeaturedBundlesBuilder((prev) => ({ ...prev, title: e.target.value })), placeholder: "Curated Bundles" }), _jsx(Input, { label: "Subtitle", value: featuredBundlesBuilder.subtitle, onChange: (e) => setFeaturedBundlesBuilder((prev) => ({ ...prev, subtitle: e.target.value })), placeholder: "Everything you need in one deal" }), _jsx(Input, { label: "Max items", type: "number", min: 1, max: 12, value: String(featuredBundlesBuilder.maxItems), onChange: (e) => setFeaturedBundlesBuilder((prev) => ({
+        return (_jsxs(Div, { className: CLS_SECTION_PANEL, children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-800 dark:text-zinc-200", children: "Featured Bundles Builder" }), _jsx(Input, { label: "Section title", value: featuredBundlesBuilder.title, onChange: (e) => setFeaturedBundlesBuilder((prev) => ({ ...prev, title: e.target.value })), placeholder: "Curated Bundles" }), _jsx(Input, { label: "Subtitle", value: featuredBundlesBuilder.subtitle, onChange: (e) => setFeaturedBundlesBuilder((prev) => ({ ...prev, subtitle: e.target.value })), placeholder: "Everything you need in one deal" }), _jsx(Input, { label: "Max items", type: "number", min: 1, max: 12, value: String(featuredBundlesBuilder.maxItems), onChange: (e) => setFeaturedBundlesBuilder((prev) => ({
                         ...prev,
                         maxItems: Math.max(1, Math.min(12, Number(e.target.value) || 8)),
-                    })) }), _jsx(Input, { label: "Filter by store (storeId)", value: featuredBundlesBuilder.storeId, onChange: (e) => setFeaturedBundlesBuilder((prev) => ({ ...prev, storeId: e.target.value })), placeholder: "store-pokemon-palace", helperText: "Leave blank to show bundles from all stores." }), _jsx(Input, { label: "Filter by category slug", value: featuredBundlesBuilder.categorySlug, onChange: (e) => setFeaturedBundlesBuilder((prev) => ({ ...prev, categorySlug: e.target.value })), placeholder: "category-trading-cards", helperText: "Leave blank to show bundles from all categories." }), _jsx(Select, { label: "Sort by", value: featuredBundlesBuilder.sortBy, onValueChange: (value) => setFeaturedBundlesBuilder((prev) => ({ ...prev, sortBy: value })), options: [
+                    })) }), _jsx(Input, { label: "Filter by store (storeId)", value: featuredBundlesBuilder.storeId, onChange: (e) => setFeaturedBundlesBuilder((prev) => ({ ...prev, storeId: e.target.value })), placeholder: "store-pokemon-palace", helperText: "Leave blank to show bundles from all stores." }), _jsx(Input, { label: LBL_FILTER_BY_CATEGORY, value: featuredBundlesBuilder.categorySlug, onChange: (e) => setFeaturedBundlesBuilder((prev) => ({ ...prev, categorySlug: e.target.value })), placeholder: "category-trading-cards", helperText: "Leave blank to show bundles from all categories." }), _jsx(Select, { label: "Sort by", value: featuredBundlesBuilder.sortBy, onValueChange: (value) => setFeaturedBundlesBuilder((prev) => ({ ...prev, sortBy: value })), options: [
                         { label: "Newest first", value: "newest" },
                         { label: "Biggest savings", value: "savings-desc" },
                         { label: "Price: low → high", value: "price-asc" },
                     ] }), _jsx(Checkbox, { checked: featuredBundlesBuilder.showSavingsBadge, label: "Show savings % badge on each bundle", onChange: (e) => setFeaturedBundlesBuilder((prev) => ({ ...prev, showSavingsBadge: e.target.checked })) }), _jsx(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400", children: "The bundles collection lands later in the bundle / prize-draw work; until then this section renders an empty state." })] }));
     }
     function renderPrizeDrawsBuilder() {
-        return (_jsxs(Div, { className: "space-y-4 rounded-lg border border-zinc-200 p-4 dark:border-slate-700", children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-800 dark:text-zinc-200", children: "Prize Draws Builder" }), _jsx(Input, { label: "Section title", value: prizeDrawsBuilder.title, onChange: (e) => setPrizeDrawsBuilder((prev) => ({ ...prev, title: e.target.value })), placeholder: "Prize Draws" }), _jsx(Input, { label: "Subtitle", value: prizeDrawsBuilder.subtitle, onChange: (e) => setPrizeDrawsBuilder((prev) => ({ ...prev, subtitle: e.target.value })), placeholder: "Enter for a chance to win rare collectibles" }), _jsx(Input, { label: "Max items", type: "number", min: 1, max: 12, value: String(prizeDrawsBuilder.maxItems), onChange: (e) => setPrizeDrawsBuilder((prev) => ({
+        return (_jsxs(Div, { className: CLS_SECTION_PANEL, children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-800 dark:text-zinc-200", children: "Prize Draws Builder" }), _jsx(Input, { label: "Section title", value: prizeDrawsBuilder.title, onChange: (e) => setPrizeDrawsBuilder((prev) => ({ ...prev, title: e.target.value })), placeholder: "Prize Draws" }), _jsx(Input, { label: "Subtitle", value: prizeDrawsBuilder.subtitle, onChange: (e) => setPrizeDrawsBuilder((prev) => ({ ...prev, subtitle: e.target.value })), placeholder: "Enter for a chance to win rare collectibles" }), _jsx(Input, { label: "Max items", type: "number", min: 1, max: 12, value: String(prizeDrawsBuilder.maxItems), onChange: (e) => setPrizeDrawsBuilder((prev) => ({
                         ...prev,
                         maxItems: Math.max(1, Math.min(12, Number(e.target.value) || 6)),
                     })) }), _jsx(Input, { label: "Filter by store (storeId)", value: prizeDrawsBuilder.storeId, onChange: (e) => setPrizeDrawsBuilder((prev) => ({ ...prev, storeId: e.target.value })), placeholder: "Leave blank for all stores" }), _jsx(Select, { label: "Reveal status", value: prizeDrawsBuilder.revealStatus, onValueChange: (value) => setPrizeDrawsBuilder((prev) => ({ ...prev, revealStatus: value })), options: [
@@ -821,7 +836,7 @@ export function AdminSectionsView({ children }) {
                     ] }), _jsx(Checkbox, { checked: prizeDrawsBuilder.showCountdown, label: "Show countdown to reveal window", onChange: (e) => setPrizeDrawsBuilder((prev) => ({ ...prev, showCountdown: e.target.checked })) }), _jsx(Checkbox, { checked: prizeDrawsBuilder.showEntriesRemaining, label: "Show entries-remaining bar", onChange: (e) => setPrizeDrawsBuilder((prev) => ({ ...prev, showEntriesRemaining: e.target.checked })) }), _jsx(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400", children: "Prize-draw listing type is added with the prize-draw feature; until then this section renders an empty state." })] }));
     }
     function renderEventRafflesBuilder() {
-        return (_jsxs(Div, { className: "space-y-4 rounded-lg border border-zinc-200 p-4 dark:border-slate-700", children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-800 dark:text-zinc-200", children: "Event Raffles Builder" }), _jsx(Input, { label: "Section title", value: eventRafflesBuilder.title, onChange: (e) => setEventRafflesBuilder((prev) => ({ ...prev, title: e.target.value })), placeholder: "Live Raffles & Spin Wheels" }), _jsx(Input, { label: "Subtitle", value: eventRafflesBuilder.subtitle, onChange: (e) => setEventRafflesBuilder((prev) => ({ ...prev, subtitle: e.target.value })), placeholder: "Participate in community events and win prizes" }), _jsx(Input, { label: "Max items", type: "number", min: 1, max: 8, value: String(eventRafflesBuilder.maxItems), onChange: (e) => setEventRafflesBuilder((prev) => ({
+        return (_jsxs(Div, { className: CLS_SECTION_PANEL, children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-800 dark:text-zinc-200", children: "Event Raffles Builder" }), _jsx(Input, { label: "Section title", value: eventRafflesBuilder.title, onChange: (e) => setEventRafflesBuilder((prev) => ({ ...prev, title: e.target.value })), placeholder: "Live Raffles & Spin Wheels" }), _jsx(Input, { label: "Subtitle", value: eventRafflesBuilder.subtitle, onChange: (e) => setEventRafflesBuilder((prev) => ({ ...prev, subtitle: e.target.value })), placeholder: "Participate in community events and win prizes" }), _jsx(Input, { label: "Max items", type: "number", min: 1, max: 8, value: String(eventRafflesBuilder.maxItems), onChange: (e) => setEventRafflesBuilder((prev) => ({
                         ...prev,
                         maxItems: Math.max(1, Math.min(8, Number(e.target.value) || 4)),
                     })) }), _jsx(Select, { label: "Raffle type", value: eventRafflesBuilder.raffleType, onValueChange: (value) => setEventRafflesBuilder((prev) => ({ ...prev, raffleType: value })), options: [
@@ -830,21 +845,36 @@ export function AdminSectionsView({ children }) {
                         { label: "Spin wheel only", value: "spin_wheel" },
                     ] }), _jsx(Checkbox, { checked: eventRafflesBuilder.showEntryCount, label: "Show entry count on each event", onChange: (e) => setEventRafflesBuilder((prev) => ({ ...prev, showEntryCount: e.target.checked })) }), _jsx(Checkbox, { checked: eventRafflesBuilder.showCountdown, label: "Show countdown to event start/end", onChange: (e) => setEventRafflesBuilder((prev) => ({ ...prev, showCountdown: e.target.checked })) }), _jsx(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400", children: "The hasRaffle flag on events ships with the raffle feature; until then this section renders an empty state." })] }));
     }
+    const COLLECTION_CARD_TYPE_OPTIONS = [
+        { label: "Products", value: "products" },
+        { label: "Auctions", value: "auctions" },
+        { label: "Pre-orders", value: "pre-orders" },
+        { label: "Stores", value: "stores" },
+        { label: "Events", value: "events" },
+        { label: "Blog posts", value: "blog-posts" },
+        { label: "Reviews", value: "reviews" },
+        { label: "Brands", value: "brands" },
+        { label: "Categories", value: "categories" },
+    ];
+    function renderCollectionEntry(entry, idx) {
+        return (_jsxs(Div, { className: "space-y-2 rounded-lg border border-zinc-200 p-3 dark:border-slate-700", children: [_jsx(Select, { label: `Collection ${idx + 1} type`, value: entry.type, onValueChange: (value) => setCollectionCardsBuilder((prev) => ({
+                        ...prev,
+                        collections: prev.collections.map((c, i) => i === idx ? { ...c, type: value } : c),
+                    })), options: COLLECTION_CARD_TYPE_OPTIONS }), _jsx(Input, { label: "Display label (optional)", value: entry.label, onChange: (e) => setCollectionCardsBuilder((prev) => ({
+                        ...prev,
+                        collections: prev.collections.map((c, i) => (i === idx ? { ...c, label: e.target.value } : c)),
+                    })), placeholder: "Leave blank to use the type name" }), _jsx(Input, { label: "Items in this collection", type: "number", min: 1, max: 20, value: String(entry.limit), onChange: (e) => setCollectionCardsBuilder((prev) => ({
+                        ...prev,
+                        collections: prev.collections.map((c, i) => i === idx ? { ...c, limit: Math.max(1, Math.min(20, Number(e.target.value) || 4)) } : c),
+                    })) }), _jsx(Button, { type: "button", variant: "secondary", onClick: () => setCollectionCardsBuilder((prev) => ({
+                        ...prev,
+                        collections: prev.collections.filter((_, i) => i !== idx),
+                    })), children: "Remove" })] }, `collection-${idx}`));
+    }
     function renderCollectionCardsBuilder() {
-        const COLLECTION_TYPE_OPTIONS = [
-            { label: "Products", value: "products" },
-            { label: "Auctions", value: "auctions" },
-            { label: "Pre-orders", value: "pre-orders" },
-            { label: "Stores", value: "stores" },
-            { label: "Events", value: "events" },
-            { label: "Blog posts", value: "blog-posts" },
-            { label: "Reviews", value: "reviews" },
-            { label: "Brands", value: "brands" },
-            { label: "Categories", value: "categories" },
-        ];
         const entries = collectionCardsBuilder.collections;
         const canAdd = entries.length < 3;
-        return (_jsxs(Div, { className: "space-y-4 rounded-lg border border-zinc-200 p-4 dark:border-slate-700", children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-800 dark:text-zinc-200", children: "Collection Cards Builder" }), _jsx(Input, { label: "Section title", value: collectionCardsBuilder.title, onChange: (e) => setCollectionCardsBuilder((prev) => ({ ...prev, title: e.target.value })), placeholder: "Featured Collections" }), _jsx(Input, { label: "Subtitle", value: collectionCardsBuilder.subtitle, onChange: (e) => setCollectionCardsBuilder((prev) => ({ ...prev, subtitle: e.target.value })), placeholder: "Hand-picked across the marketplace" }), _jsx(Select, { label: "Layout", value: collectionCardsBuilder.layout, onValueChange: (value) => setCollectionCardsBuilder((prev) => ({ ...prev, layout: value })), options: [
+        return (_jsxs(Div, { className: CLS_SECTION_PANEL, children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-800 dark:text-zinc-200", children: "Collection Cards Builder" }), _jsx(Input, { label: "Section title", value: collectionCardsBuilder.title, onChange: (e) => setCollectionCardsBuilder((prev) => ({ ...prev, title: e.target.value })), placeholder: "Featured Collections" }), _jsx(Input, { label: "Subtitle", value: collectionCardsBuilder.subtitle, onChange: (e) => setCollectionCardsBuilder((prev) => ({ ...prev, subtitle: e.target.value })), placeholder: "Hand-picked across the marketplace" }), _jsx(Select, { label: "Layout", value: collectionCardsBuilder.layout, onValueChange: (value) => setCollectionCardsBuilder((prev) => ({ ...prev, layout: value })), options: [
                         { label: "Carousel", value: "carousel" },
                         { label: "Grid", value: "grid" },
                         { label: "Mixed row", value: "mixed-row" },
@@ -858,19 +888,7 @@ export function AdminSectionsView({ children }) {
                     ] }), _jsx(Input, { label: "Max total items", type: "number", min: 4, max: 20, value: String(collectionCardsBuilder.maxItems), onChange: (e) => setCollectionCardsBuilder((prev) => ({
                         ...prev,
                         maxItems: Math.max(4, Math.min(20, Number(e.target.value) || 12)),
-                    })) }), _jsx(Checkbox, { checked: collectionCardsBuilder.showCollectionTabs, label: "Show collection tabs (filter chips)", onChange: (e) => setCollectionCardsBuilder((prev) => ({ ...prev, showCollectionTabs: e.target.checked })) }), _jsxs(Div, { className: "space-y-3", children: [_jsxs(Text, { className: "text-sm font-semibold text-zinc-800 dark:text-zinc-200", children: ["Collections (", entries.length, "/3)"] }), entries.map((entry, idx) => (_jsxs(Div, { className: "space-y-2 rounded-lg border border-zinc-200 p-3 dark:border-slate-700", children: [_jsx(Select, { label: `Collection ${idx + 1} type`, value: entry.type, onValueChange: (value) => setCollectionCardsBuilder((prev) => ({
-                                        ...prev,
-                                        collections: prev.collections.map((c, i) => i === idx ? { ...c, type: value } : c),
-                                    })), options: COLLECTION_TYPE_OPTIONS }), _jsx(Input, { label: "Display label (optional)", value: entry.label, onChange: (e) => setCollectionCardsBuilder((prev) => ({
-                                        ...prev,
-                                        collections: prev.collections.map((c, i) => (i === idx ? { ...c, label: e.target.value } : c)),
-                                    })), placeholder: "Leave blank to use the type name" }), _jsx(Input, { label: "Items in this collection", type: "number", min: 1, max: 20, value: String(entry.limit), onChange: (e) => setCollectionCardsBuilder((prev) => ({
-                                        ...prev,
-                                        collections: prev.collections.map((c, i) => i === idx ? { ...c, limit: Math.max(1, Math.min(20, Number(e.target.value) || 4)) } : c),
-                                    })) }), _jsx(Button, { type: "button", variant: "secondary", onClick: () => setCollectionCardsBuilder((prev) => ({
-                                        ...prev,
-                                        collections: prev.collections.filter((_, i) => i !== idx),
-                                    })), children: "Remove" })] }, `collection-${idx}`))), canAdd ? (_jsx(Button, { type: "button", variant: "secondary", onClick: () => setCollectionCardsBuilder((prev) => ({
+                    })) }), _jsx(Checkbox, { checked: collectionCardsBuilder.showCollectionTabs, label: "Show collection tabs (filter chips)", onChange: (e) => setCollectionCardsBuilder((prev) => ({ ...prev, showCollectionTabs: e.target.checked })) }), _jsxs(Div, { className: "space-y-3", children: [_jsxs(Text, { className: "text-sm font-semibold text-zinc-800 dark:text-zinc-200", children: ["Collections (", entries.length, "/3)"] }), entries.map((entry, idx) => renderCollectionEntry(entry, idx)), canAdd ? (_jsx(Button, { type: "button", variant: "secondary", onClick: () => setCollectionCardsBuilder((prev) => ({
                                 ...prev,
                                 collections: [
                                     ...prev.collections,
@@ -879,7 +897,7 @@ export function AdminSectionsView({ children }) {
                             })), children: "+ Add collection" })) : (_jsx(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400", children: "Maximum of 3 collections per section." }))] }), _jsx(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400", children: "Data fetching wires into the per-resource repositories \u2014 the section renders an empty state until the wiring lands." })] }));
     }
     function renderSocialFeedBuilder() {
-        return (_jsxs(Div, { className: "space-y-4 rounded-lg border border-zinc-200 p-4 dark:border-slate-700", children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-800 dark:text-zinc-200", children: "Social Feed Builder" }), _jsx(Input, { label: "Section title", value: socialFeedBuilder.title, onChange: (e) => setSocialFeedBuilder((prev) => ({ ...prev, title: e.target.value })), placeholder: "LetItRip on Instagram" }), _jsx(Input, { label: "Subtitle", value: socialFeedBuilder.subtitle, onChange: (e) => setSocialFeedBuilder((prev) => ({ ...prev, subtitle: e.target.value })), placeholder: "Follow us for daily collection showcases" }), _jsx(Select, { label: "Platform", value: socialFeedBuilder.platform, onValueChange: (v) => setSocialFeedBuilder((prev) => ({ ...prev, platform: v })), options: [
+        return (_jsxs(Div, { className: CLS_SECTION_PANEL, children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-800 dark:text-zinc-200", children: "Social Feed Builder" }), _jsx(Input, { label: "Section title", value: socialFeedBuilder.title, onChange: (e) => setSocialFeedBuilder((prev) => ({ ...prev, title: e.target.value })), placeholder: "LetItRip on Instagram" }), _jsx(Input, { label: "Subtitle", value: socialFeedBuilder.subtitle, onChange: (e) => setSocialFeedBuilder((prev) => ({ ...prev, subtitle: e.target.value })), placeholder: "Follow us for daily collection showcases" }), _jsx(Select, { label: "Platform", value: socialFeedBuilder.platform, onValueChange: (v) => setSocialFeedBuilder((prev) => ({ ...prev, platform: v })), options: [
                         { label: "Instagram", value: "instagram" },
                         { label: "Facebook", value: "facebook" },
                         { label: "TikTok", value: "tiktok" },
@@ -942,12 +960,7 @@ export function AdminSectionsView({ children }) {
     }, [sections]);
     const hasReorderChanges = reorderDraft.some((item) => sectionOrderMap.get(item.id) !== item.order);
     const canUndoReorderChanges = reorderUndoStack.length > 0;
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "py-4 px-3 sm:px-4", children: [_jsxs(Div, { className: "mb-4 flex items-center justify-between gap-3", children: [_jsxs(Div, { children: [_jsx(Text, { className: "text-base font-semibold text-zinc-900 dark:text-zinc-100", children: "Homepage Sections" }), _jsx(Text, { className: "text-sm text-zinc-500 dark:text-zinc-400", children: "Manage homepage sections and their display order" })] }), _jsxs(Div, { className: "flex items-center gap-2", children: [_jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setSeedResetOpen(true), children: "Reset seed data" }), _jsx(Button, { type: "button", variant: "primary", size: "sm", onClick: () => setIsModalOpen(true), children: "Manage Sections" })] })] }), errorMessage && (_jsx("div", { className: "mb-4 rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700 dark:border-red-900/60 dark:bg-red-950/40 dark:text-red-200", children: errorMessage })), _jsx(DataTable, { rows: rows, isLoading: isLoading, emptyLabel: "No sections found" })] }), _jsxs(Div, { className: "mt-4 space-y-3 rounded-xl border border-zinc-200 bg-white p-4 dark:border-slate-700 dark:bg-slate-900", children: [_jsxs(Div, { className: "flex items-center justify-between gap-3", children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-900 dark:text-zinc-100", children: "Reorder Sections" }), _jsxs(Div, { className: "flex items-center gap-2", children: [_jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: reindexDraft, disabled: reorderSections.isPending || reorderDraft.length === 0, children: "Reindex 1..N" }), _jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: undoReorderChange, disabled: reorderSections.isPending || !canUndoReorderChanges, children: "Undo unsaved" }), _jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: resetToServerOrder, disabled: reorderSections.isPending || !hasReorderChanges, children: "Reset to server" }), _jsx(Button, { type: "button", variant: "primary", size: "sm", onClick: () => reorderSections.mutate(), disabled: !hasReorderChanges || reorderSections.isPending, children: reorderSections.isPending ? "Saving order..." : "Save order" })] })] }), reorderDraft.length === 0 ? (_jsx(Text, { className: "text-sm text-zinc-500 dark:text-zinc-400", children: "No sections to reorder." })) : (_jsx(Div, { className: "space-y-2", children: reorderDraft.map((item, index) => (_jsxs(Div, { className: "grid grid-cols-[auto_1fr_auto_auto_auto] items-center gap-2 rounded-md border border-zinc-200 p-2 dark:border-slate-700", draggable: true, onDragStart: () => setDragIndex(index), onDragOver: (event) => event.preventDefault(), onDrop: () => {
-                                if (dragIndex !== null) {
-                                    moveItemToIndex(dragIndex, index);
-                                }
-                                setDragIndex(null);
-                            }, onDragEnd: () => setDragIndex(null), children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-500 dark:text-zinc-400", children: "\u2261" }), _jsxs(Text, { className: "text-sm text-zinc-800 dark:text-zinc-200", children: [item.type, " #", item.order] }), _jsx(Input, { type: "number", min: 1, max: reorderDraft.length, value: String(item.order), onChange: (event) => updateReorderItemOrder(index, Number(event.target.value) || 1), className: "w-24" }), _jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => moveReorderItem(index, -1), disabled: index === 0, children: "Up" }), _jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => moveReorderItem(index, 1), disabled: index === reorderDraft.length - 1, children: "Down" })] }, `reorder-${item.id}`))) }))] }), _jsx(ConfirmDeleteModal, { isOpen: seedResetOpen, onClose: () => setSeedResetOpen(false), onConfirm: () => resetSeed.mutate(), title: "Reset homepage sections seed data?", message: "This will reload the 19 default homepage sections from seed data. Any manual changes made in Firestore will be overwritten.", confirmText: "Reset seed", cancelText: "Cancel", isDeleting: resetSeed.isPending, variant: "danger" }), _jsx(Modal, { isOpen: isModalOpen, onClose: () => setIsModalOpen(false), title: "Manage Homepage Section", size: "lg", children: _jsxs(Form, { className: "space-y-4", onSubmit: (event) => {
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "py-4 px-3 sm:px-4", children: [_jsxs(Div, { className: "mb-4 flex items-center justify-between gap-3", children: [_jsxs(Div, { children: [_jsx(Text, { className: "text-base font-semibold text-zinc-900 dark:text-zinc-100", children: "Homepage Sections" }), _jsx(Text, { className: "text-sm text-zinc-500 dark:text-zinc-400", children: "Manage homepage sections and their display order" })] }), _jsxs(Div, { className: "flex items-center gap-2", children: [_jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setSeedResetOpen(true), children: "Reset seed data" }), _jsx(Button, { type: "button", variant: "primary", size: "sm", onClick: () => setIsModalOpen(true), children: "Manage Sections" })] })] }), errorMessage && (_jsx("div", { className: "mb-4 rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700 dark:border-red-900/60 dark:bg-red-950/40 dark:text-red-200", children: errorMessage })), _jsx(DataTable, { rows: rows, isLoading: isLoading, emptyLabel: "No sections found" })] }), _jsxs(Div, { className: "mt-4 space-y-3 rounded-xl border border-zinc-200 bg-white p-4 dark:border-slate-700 dark:bg-slate-900", children: [_jsxs(Div, { className: "flex items-center justify-between gap-3", children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-900 dark:text-zinc-100", children: "Reorder Sections" }), _jsxs(Div, { className: "flex items-center gap-2", children: [_jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: reindexDraft, disabled: reorderSections.isPending || reorderDraft.length === 0, children: "Reindex 1..N" }), _jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: undoReorderChange, disabled: reorderSections.isPending || !canUndoReorderChanges, children: "Undo unsaved" }), _jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: resetToServerOrder, disabled: reorderSections.isPending || !hasReorderChanges, children: "Reset to server" }), _jsx(Button, { type: "button", variant: "primary", size: "sm", onClick: () => reorderSections.mutate(), disabled: !hasReorderChanges || reorderSections.isPending, children: reorderSections.isPending ? "Saving order..." : "Save order" })] })] }), reorderDraft.length === 0 ? (_jsx(Text, { className: "text-sm text-zinc-500 dark:text-zinc-400", children: "No sections to reorder." })) : (_jsx(Div, { className: "space-y-2", children: reorderDraft.map((item, index) => (_jsxs(Div, { className: "grid grid-cols-[auto_1fr_auto_auto_auto] items-center gap-2 rounded-md border border-zinc-200 p-2 dark:border-slate-700", draggable: true, onDragStart: () => setDragIndex(index), onDragOver: (event) => event.preventDefault(), onDrop: () => handleReorderDrop(index), onDragEnd: () => setDragIndex(null), children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-500 dark:text-zinc-400", children: "\u2261" }), _jsxs(Text, { className: "text-sm text-zinc-800 dark:text-zinc-200", children: [item.type, " #", item.order] }), _jsx(Input, { type: "number", min: 1, max: reorderDraft.length, value: String(item.order), onChange: (event) => updateReorderItemOrder(index, Number(event.target.value) || 1), className: "w-24" }), _jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => moveReorderItem(index, -1), disabled: index === 0, children: "Up" }), _jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => moveReorderItem(index, 1), disabled: index === reorderDraft.length - 1, children: "Down" })] }, `reorder-${item.id}`))) }))] }), _jsx(ConfirmDeleteModal, { isOpen: seedResetOpen, onClose: () => setSeedResetOpen(false), onConfirm: () => resetSeed.mutate(), title: "Reset homepage sections seed data?", message: "This will reload the 19 default homepage sections from seed data. Any manual changes made in Firestore will be overwritten.", confirmText: "Reset seed", cancelText: "Cancel", isDeleting: resetSeed.isPending, variant: "danger" }), _jsx(Modal, { isOpen: isModalOpen, onClose: () => setIsModalOpen(false), title: "Manage Homepage Section", size: "lg", children: _jsxs(Form, { className: "space-y-4", onSubmit: (event) => {
                         event.preventDefault();
                         saveSection.mutate();
                     }, children: [_jsx(Select, { label: "Mode", value: mode, onValueChange: (value) => setMode(value), options: [