@mohasinac/appkit 2.3.2 → 2.4.0

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

@@ -2,365 +2,18 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React from "react";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { Alert, Button, Checkbox, Div, Form, FormActions, Input, Modal, Select, Text, Textarea, } from "../../../ui";
+import { Button, Checkbox, ConfirmDeleteModal, Div, Form, FormActions, Input, Modal, Select, Text, Textarea, useToast, } from "../../../ui";
 import { apiClient } from "../../../http";
-import { ADMIN_ENDPOINTS } from "../../../constants";
+import { ADMIN_ENDPOINTS, DEMO_ENDPOINTS } from "../../../constants";
 import { useAdminSectionsListing } from "../hooks/useAdminSectionsListing";
-import { AdminListingScaffold } from "./AdminListingScaffold";
-const SECTION_TYPE_OPTIONS = [
-    "welcome",
-    "stats",
-    "trust-indicators",
-    "categories",
-    "brands",
-    "products",
-    "pre-orders",
-    "auctions",
-    "banner",
-    "features",
-    "reviews",
-    "whatsapp-community",
-    "faq",
-    "blog-articles",
-    "newsletter",
-    "stores",
-    "events",
-];
-const DEFAULT_PRODUCTS_BUILDER = {
-    title: "Featured Products",
-    subtitle: "",
-    maxItems: 18,
-    status: "published",
-    sortBy: "featured",
-    featuredOnly: true,
-    inStockOnly: true,
-    autoScroll: false,
-    scrollInterval: 5000,
-    resourceMode: "automatic",
-    selectedCategoryIds: [],
-    manualResourceIds: "",
-};
-const DEFAULT_AUCTIONS_BUILDER = {
-    title: "Live Auctions",
-    subtitle: "",
-    maxItems: 18,
-    status: "active",
-    sortBy: "ending-soon",
-    autoScroll: false,
-    scrollInterval: 5000,
-    resourceMode: "automatic",
-    selectedCategoryIds: [],
-    manualResourceIds: "",
-};
-const DEFAULT_STATS_BUILDER = {
-    title: "Marketplace Stats",
-    stats: [
-        { key: "products", label: "Products Listed", value: "10,000+" },
-        { key: "sellers", label: "Verified Sellers", value: "2,000+" },
-        { key: "buyers", label: "Happy Buyers", value: "50,000+" },
-        { key: "rating", label: "Average Rating", value: "4.8/5" },
-    ],
-};
-const DEFAULT_PRE_ORDERS_BUILDER = {
-    title: "Reserve Before It Ships",
-    subtitle: "",
-    maxItems: 18,
-    status: "active",
-    sortBy: "shipping-soon",
-    autoScroll: false,
-    scrollInterval: 5000,
-    resourceMode: "automatic",
-    selectedCategoryIds: [],
-    manualResourceIds: "",
-};
-const DEFAULT_STORES_BUILDER = {
-    title: "Featured Stores",
-    subtitle: "",
-    maxItems: 8,
-    status: "active",
-    sortBy: "rating-desc",
-    verifiedOnly: true,
-    autoScroll: false,
-    scrollInterval: 5000,
-    resourceMode: "automatic",
-    selectedCategoryIds: [],
-    manualResourceIds: "",
-};
-const DEFAULT_EVENTS_BUILDER = {
-    title: "Events & Offers",
-    subtitle: "",
-    maxItems: 6,
-    status: "active",
-    sortBy: "start-date",
-    featuredOnly: false,
-    autoScroll: false,
-    scrollInterval: 5000,
-    resourceMode: "automatic",
-    selectedCategoryIds: [],
-    manualResourceIds: "",
-};
-const SUPPORTED_TYPED_BUILDERS = [
-    "products",
-    "auctions",
-    "stats",
-    "pre-orders",
-    "stores",
-    "events",
-];
-function parseCsvValues(value) {
-    return value
-        .split(",")
-        .map((part) => part.trim())
-        .filter(Boolean);
-}
-function toNumberValue(value, fallback) {
-    if (typeof value === "number" && Number.isFinite(value)) {
-        return value;
-    }
-    if (typeof value === "string") {
-        const parsed = Number(value);
-        if (Number.isFinite(parsed)) {
-            return parsed;
-        }
-    }
-    return fallback;
-}
-function toStringValue(value, fallback = "") {
-    return typeof value === "string" ? value : fallback;
-}
-function toBooleanValue(value, fallback = false) {
-    return typeof value === "boolean" ? value : fallback;
-}
-function toStringArray(value) {
-    return Array.isArray(value)
-        ? value.filter((item) => typeof item === "string")
-        : [];
-}
-function buildProductsConfig(builder) {
-    return {
-        title: builder.title,
-        subtitle: builder.subtitle || undefined,
-        maxProducts: builder.maxItems,
-        rows: 2,
-        itemsPerRow: 3,
-        mobileItemsPerRow: 1,
-        autoScroll: builder.autoScroll,
-        scrollInterval: builder.scrollInterval,
-        filters: {
-            categoryIds: builder.selectedCategoryIds,
-            status: builder.status,
-            sortBy: builder.sortBy,
-            featuredOnly: builder.featuredOnly,
-            inStockOnly: builder.inStockOnly,
-        },
-        resources: {
-            mode: builder.resourceMode,
-            ids: builder.resourceMode === "manual" ? parseCsvValues(builder.manualResourceIds) : [],
-        },
-    };
-}
-function buildAuctionsConfig(builder) {
-    return {
-        title: builder.title,
-        subtitle: builder.subtitle || undefined,
-        maxAuctions: builder.maxItems,
-        rows: 2,
-        itemsPerRow: 3,
-        mobileItemsPerRow: 1,
-        autoScroll: builder.autoScroll,
-        scrollInterval: builder.scrollInterval,
-        filters: {
-            categoryIds: builder.selectedCategoryIds,
-            status: builder.status,
-            sortBy: builder.sortBy,
-        },
-        resources: {
-            mode: builder.resourceMode,
-            ids: builder.resourceMode === "manual" ? parseCsvValues(builder.manualResourceIds) : [],
-        },
-    };
-}
-function buildStatsConfig(builder) {
-    return {
-        title: builder.title || undefined,
-        stats: builder.stats.map((item, index) => ({
-            key: item.key.trim() || `stat-${index + 1}`,
-            label: item.label,
-            value: item.value,
-        })),
-    };
-}
-function buildPreOrdersConfig(builder) {
-    return {
-        title: builder.title,
-        subtitle: builder.subtitle || undefined,
-        maxItems: builder.maxItems,
-        rows: 2,
-        itemsPerRow: 3,
-        mobileItemsPerRow: 1,
-        autoScroll: builder.autoScroll,
-        scrollInterval: builder.scrollInterval,
-        filters: {
-            categoryIds: builder.selectedCategoryIds,
-            status: builder.status,
-            sortBy: builder.sortBy,
-        },
-        resources: {
-            mode: builder.resourceMode,
-            ids: builder.resourceMode === "manual" ? parseCsvValues(builder.manualResourceIds) : [],
-        },
-    };
-}
-function buildStoresConfig(builder) {
-    return {
-        title: builder.title,
-        subtitle: builder.subtitle || undefined,
-        maxStores: builder.maxItems,
-        autoScroll: builder.autoScroll,
-        scrollInterval: builder.scrollInterval,
-        filters: {
-            categoryIds: builder.selectedCategoryIds,
-            status: builder.status,
-            sortBy: builder.sortBy,
-            verifiedOnly: builder.verifiedOnly,
-        },
-        resources: {
-            mode: builder.resourceMode,
-            ids: builder.resourceMode === "manual" ? parseCsvValues(builder.manualResourceIds) : [],
-        },
-    };
-}
-function buildEventsConfig(builder) {
-    return {
-        title: builder.title,
-        subtitle: builder.subtitle || undefined,
-        maxEvents: builder.maxItems,
-        autoScroll: builder.autoScroll,
-        scrollInterval: builder.scrollInterval,
-        filters: {
-            categoryIds: builder.selectedCategoryIds,
-            status: builder.status,
-            sortBy: builder.sortBy,
-            featuredOnly: builder.featuredOnly,
-        },
-        resources: {
-            mode: builder.resourceMode,
-            ids: builder.resourceMode === "manual" ? parseCsvValues(builder.manualResourceIds) : [],
-        },
-    };
-}
-function parseProductsBuilder(config) {
-    const filters = (config.filters ?? {});
-    const resources = (config.resources ?? {});
-    return {
-        title: toStringValue(config.title, DEFAULT_PRODUCTS_BUILDER.title),
-        subtitle: toStringValue(config.subtitle),
-        maxItems: toNumberValue(config.maxProducts, DEFAULT_PRODUCTS_BUILDER.maxItems),
-        status: toStringValue(filters.status, DEFAULT_PRODUCTS_BUILDER.status),
-        sortBy: toStringValue(filters.sortBy, DEFAULT_PRODUCTS_BUILDER.sortBy),
-        featuredOnly: toBooleanValue(filters.featuredOnly, DEFAULT_PRODUCTS_BUILDER.featuredOnly),
-        inStockOnly: toBooleanValue(filters.inStockOnly, DEFAULT_PRODUCTS_BUILDER.inStockOnly),
-        autoScroll: toBooleanValue(config.autoScroll, DEFAULT_PRODUCTS_BUILDER.autoScroll),
-        scrollInterval: toNumberValue(config.scrollInterval, DEFAULT_PRODUCTS_BUILDER.scrollInterval),
-        resourceMode: toStringValue(resources.mode, DEFAULT_PRODUCTS_BUILDER.resourceMode),
-        selectedCategoryIds: toStringArray(filters.categoryIds),
-        manualResourceIds: toStringArray(resources.ids).join(", "),
-    };
-}
-function parseAuctionsBuilder(config) {
-    const filters = (config.filters ?? {});
-    const resources = (config.resources ?? {});
-    return {
-        title: toStringValue(config.title, DEFAULT_AUCTIONS_BUILDER.title),
-        subtitle: toStringValue(config.subtitle),
-        maxItems: toNumberValue(config.maxAuctions, DEFAULT_AUCTIONS_BUILDER.maxItems),
-        status: toStringValue(filters.status, DEFAULT_AUCTIONS_BUILDER.status),
-        sortBy: toStringValue(filters.sortBy, DEFAULT_AUCTIONS_BUILDER.sortBy),
-        autoScroll: toBooleanValue(config.autoScroll, DEFAULT_AUCTIONS_BUILDER.autoScroll),
-        scrollInterval: toNumberValue(config.scrollInterval, DEFAULT_AUCTIONS_BUILDER.scrollInterval),
-        resourceMode: toStringValue(resources.mode, DEFAULT_AUCTIONS_BUILDER.resourceMode),
-        selectedCategoryIds: toStringArray(filters.categoryIds),
-        manualResourceIds: toStringArray(resources.ids).join(", "),
-    };
-}
-function parseStatsBuilder(config) {
-    const statsArray = Array.isArray(config.stats) ? config.stats : [];
-    const parsedStats = statsArray
-        .slice(0, 4)
-        .map((item, index) => {
-        const row = (item ?? {});
-        return {
-            key: toStringValue(row.key, `stat-${index + 1}`),
-            label: toStringValue(row.label),
-            value: toStringValue(row.value),
-        };
-    });
-    while (parsedStats.length < 4) {
-        parsedStats.push({
-            key: `stat-${parsedStats.length + 1}`,
-            label: "",
-            value: "",
-        });
-    }
-    return {
-        title: toStringValue(config.title, DEFAULT_STATS_BUILDER.title),
-        stats: parsedStats,
-    };
-}
-function parsePreOrdersBuilder(config) {
-    const filters = (config.filters ?? {});
-    const resources = (config.resources ?? {});
-    return {
-        title: toStringValue(config.title, DEFAULT_PRE_ORDERS_BUILDER.title),
-        subtitle: toStringValue(config.subtitle),
-        maxItems: toNumberValue(config.maxItems, DEFAULT_PRE_ORDERS_BUILDER.maxItems),
-        status: toStringValue(filters.status, DEFAULT_PRE_ORDERS_BUILDER.status),
-        sortBy: toStringValue(filters.sortBy, DEFAULT_PRE_ORDERS_BUILDER.sortBy),
-        autoScroll: toBooleanValue(config.autoScroll, DEFAULT_PRE_ORDERS_BUILDER.autoScroll),
-        scrollInterval: toNumberValue(config.scrollInterval, DEFAULT_PRE_ORDERS_BUILDER.scrollInterval),
-        resourceMode: toStringValue(resources.mode, DEFAULT_PRE_ORDERS_BUILDER.resourceMode),
-        selectedCategoryIds: toStringArray(filters.categoryIds),
-        manualResourceIds: toStringArray(resources.ids).join(", "),
-    };
-}
-function parseStoresBuilder(config) {
-    const filters = (config.filters ?? {});
-    const resources = (config.resources ?? {});
-    return {
-        title: toStringValue(config.title, DEFAULT_STORES_BUILDER.title),
-        subtitle: toStringValue(config.subtitle),
-        maxItems: toNumberValue(config.maxStores, DEFAULT_STORES_BUILDER.maxItems),
-        status: toStringValue(filters.status, DEFAULT_STORES_BUILDER.status),
-        sortBy: toStringValue(filters.sortBy, DEFAULT_STORES_BUILDER.sortBy),
-        verifiedOnly: toBooleanValue(filters.verifiedOnly, DEFAULT_STORES_BUILDER.verifiedOnly),
-        autoScroll: toBooleanValue(config.autoScroll, DEFAULT_STORES_BUILDER.autoScroll),
-        scrollInterval: toNumberValue(config.scrollInterval, DEFAULT_STORES_BUILDER.scrollInterval),
-        resourceMode: toStringValue(resources.mode, DEFAULT_STORES_BUILDER.resourceMode),
-        selectedCategoryIds: toStringArray(filters.categoryIds),
-        manualResourceIds: toStringArray(resources.ids).join(", "),
-    };
-}
-function parseEventsBuilder(config) {
-    const filters = (config.filters ?? {});
-    const resources = (config.resources ?? {});
-    return {
-        title: toStringValue(config.title, DEFAULT_EVENTS_BUILDER.title),
-        subtitle: toStringValue(config.subtitle),
-        maxItems: toNumberValue(config.maxEvents, DEFAULT_EVENTS_BUILDER.maxItems),
-        status: toStringValue(filters.status, DEFAULT_EVENTS_BUILDER.status),
-        sortBy: toStringValue(filters.sortBy, DEFAULT_EVENTS_BUILDER.sortBy),
-        featuredOnly: toBooleanValue(filters.featuredOnly, DEFAULT_EVENTS_BUILDER.featuredOnly),
-        autoScroll: toBooleanValue(config.autoScroll, DEFAULT_EVENTS_BUILDER.autoScroll),
-        scrollInterval: toNumberValue(config.scrollInterval, DEFAULT_EVENTS_BUILDER.scrollInterval),
-        resourceMode: toStringValue(resources.mode, DEFAULT_EVENTS_BUILDER.resourceMode),
-        selectedCategoryIds: toStringArray(filters.categoryIds),
-        manualResourceIds: toStringArray(resources.ids).join(", "),
-    };
-}
+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, } 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, parseProductsBuilder, parseAuctionsBuilder, parseStatsBuilder, parsePreOrdersBuilder, parseStoresBuilder, parseEventsBuilder, parseSocialFeedBuilder, parseWelcomeBuilder, parseTrustIndicatorsBuilder, parseCategoriesBuilder, parseBrandsBuilder, parseBannerBuilder, parseFeaturesBuilder, parseReviewsBuilder, parseWhatsAppBuilder, parseFAQBuilder, parseBlogBuilder, parseNewsletterBuilder, parseCarouselBuilder, parseCustomCardsBuilder, parseGoogleReviewsBuilder, } from "./sections/adminSectionsBuildParse";
 export function AdminSectionsView({ children }) {
     const hasChildren = React.Children.count(children) > 0;
     const queryClient = useQueryClient();
     const [isModalOpen, setIsModalOpen] = React.useState(false);
+    const [seedResetOpen, setSeedResetOpen] = React.useState(false);
     const [mode, setMode] = React.useState("create");
     const [selectedSectionId, setSelectedSectionId] = React.useState("");
     const [sectionType, setSectionType] = React.useState("products");
@@ -373,11 +26,26 @@ export function AdminSectionsView({ children }) {
     const [preOrdersBuilder, setPreOrdersBuilder] = React.useState(DEFAULT_PRE_ORDERS_BUILDER);
     const [storesBuilder, setStoresBuilder] = React.useState(DEFAULT_STORES_BUILDER);
     const [eventsBuilder, setEventsBuilder] = React.useState(DEFAULT_EVENTS_BUILDER);
+    const [socialFeedBuilder, setSocialFeedBuilder] = React.useState(DEFAULT_SOCIAL_FEED_BUILDER);
+    const [welcomeBuilder, setWelcomeBuilder] = React.useState(DEFAULT_WELCOME_BUILDER);
+    const [trustIndicatorsBuilder, setTrustIndicatorsBuilder] = React.useState(DEFAULT_TRUST_INDICATORS_BUILDER);
+    const [categoriesBuilder, setCategoriesBuilder] = React.useState(DEFAULT_CATEGORIES_BUILDER);
+    const [brandsBuilder, setBrandsBuilder] = React.useState(DEFAULT_BRANDS_BUILDER);
+    const [bannerBuilder, setBannerBuilder] = React.useState(DEFAULT_BANNER_BUILDER);
+    const [featuresBuilder, setFeaturesBuilder] = React.useState(DEFAULT_FEATURES_BUILDER);
+    const [reviewsBuilder, setReviewsBuilder] = React.useState(DEFAULT_REVIEWS_BUILDER);
+    const [whatsappBuilder, setWhatsappBuilder] = React.useState(DEFAULT_WHATSAPP_BUILDER);
+    const [faqBuilder, setFaqBuilder] = React.useState(DEFAULT_FAQ_BUILDER);
+    const [blogBuilder, setBlogBuilder] = React.useState(DEFAULT_BLOG_BUILDER);
+    const [newsletterBuilder, setNewsletterBuilder] = React.useState(DEFAULT_NEWSLETTER_BUILDER);
+    const [carouselBuilder, setCarouselBuilder] = React.useState(DEFAULT_CAROUSEL_BUILDER);
+    const [customCardsBuilder, setCustomCardsBuilder] = React.useState(DEFAULT_CUSTOM_CARDS_BUILDER);
+    const [googleReviewsBuilder, setGoogleReviewsBuilder] = React.useState(DEFAULT_GOOGLE_REVIEWS_BUILDER);
     const [reorderDraft, setReorderDraft] = React.useState([]);
     const [reorderServerSnapshot, setReorderServerSnapshot] = React.useState([]);
     const [reorderUndoStack, setReorderUndoStack] = React.useState([]);
     const [dragIndex, setDragIndex] = React.useState(null);
-    const [formMessage, setFormMessage] = React.useState(null);
+    const toast = useToast();
     const isTypedBuilder = SUPPORTED_TYPED_BUILDERS.includes(sectionType);
     const { sections, isLoading, errorMessage } = useAdminSectionsListing({
         page: 1,
@@ -405,25 +73,30 @@ export function AdminSectionsView({ children }) {
             .filter((item) => item !== null);
     }, [categoriesQuery.data?.items]);
     const typedConfig = React.useMemo(() => {
-        if (sectionType === "products") {
-            return buildProductsConfig(productsBuilder);
-        }
-        if (sectionType === "auctions") {
-            return buildAuctionsConfig(auctionsBuilder);
-        }
-        if (sectionType === "stats") {
-            return buildStatsConfig(statsBuilder);
-        }
-        if (sectionType === "pre-orders") {
-            return buildPreOrdersConfig(preOrdersBuilder);
-        }
-        if (sectionType === "stores") {
-            return buildStoresConfig(storesBuilder);
+        switch (sectionType) {
+            case "products": return buildProductsConfig(productsBuilder);
+            case "auctions": return buildAuctionsConfig(auctionsBuilder);
+            case "stats": return buildStatsConfig(statsBuilder);
+            case "pre-orders": return buildPreOrdersConfig(preOrdersBuilder);
+            case "stores": return buildStoresConfig(storesBuilder);
+            case "events": return buildEventsConfig(eventsBuilder);
+            case "social-feed": return buildSocialFeedConfig(socialFeedBuilder);
+            case "welcome": return buildWelcomeConfig(welcomeBuilder);
+            case "trust-indicators": return buildTrustIndicatorsConfig(trustIndicatorsBuilder);
+            case "categories": return buildCategoriesConfig(categoriesBuilder);
+            case "brands": return buildBrandsConfig(brandsBuilder);
+            case "banner": return buildBannerConfig(bannerBuilder);
+            case "features": return buildFeaturesConfig(featuresBuilder);
+            case "reviews": return buildReviewsConfig(reviewsBuilder);
+            case "whatsapp-community": return buildWhatsAppConfig(whatsappBuilder);
+            case "faq": return buildFAQConfig(faqBuilder);
+            case "blog-articles": return buildBlogConfig(blogBuilder);
+            case "newsletter": return buildNewsletterConfig(newsletterBuilder);
+            case "carousel": return buildCarouselConfig(carouselBuilder);
+            case "custom-cards": return buildCustomCardsConfig(customCardsBuilder);
+            case "google-reviews": return buildGoogleReviewsConfig(googleReviewsBuilder);
+            default: return null;
         }
-        if (sectionType === "events") {
-            return buildEventsConfig(eventsBuilder);
-        }
-        return null;
     }, [
         sectionType,
         productsBuilder,
@@ -432,6 +105,21 @@ export function AdminSectionsView({ children }) {
         preOrdersBuilder,
         storesBuilder,
         eventsBuilder,
+        socialFeedBuilder,
+        welcomeBuilder,
+        trustIndicatorsBuilder,
+        categoriesBuilder,
+        brandsBuilder,
+        bannerBuilder,
+        featuresBuilder,
+        reviewsBuilder,
+        whatsappBuilder,
+        faqBuilder,
+        blogBuilder,
+        newsletterBuilder,
+        carouselBuilder,
+        customCardsBuilder,
+        googleReviewsBuilder,
     ]);
     React.useEffect(() => {
         if (!typedConfig) {
@@ -484,11 +172,25 @@ export function AdminSectionsView({ children }) {
         },
         onSuccess: async () => {
             await queryClient.invalidateQueries({ queryKey: ["admin", "sections", "listing"] });
-            setFormMessage(mode === "create" ? "Section created." : "Section updated.");
+            toast.showToast(mode === "create" ? "Section created." : "Section updated.", "success");
             setIsModalOpen(false);
         },
         onError: (error) => {
-            setFormMessage(error instanceof Error ? error.message : "Failed to save section.");
+            toast.showToast(error instanceof Error ? error.message : "Failed to save section.", "error");
+        },
+    });
+    const resetSeed = useMutation({
+        mutationFn: () => apiClient.post(DEMO_ENDPOINTS.SEED, {
+            action: "load",
+            collections: ["homepageSections"],
+        }),
+        onSuccess: async () => {
+            await queryClient.invalidateQueries({ queryKey: ["admin", "sections", "listing"] });
+            setSeedResetOpen(false);
+            toast.showToast("Homepage sections seed data reloaded.", "success");
+        },
+        onError: () => {
+            toast.showToast("Seed reset failed.", "error");
         },
     });
     const reorderSections = useMutation({
@@ -501,10 +203,10 @@ export function AdminSectionsView({ children }) {
             await queryClient.invalidateQueries({ queryKey: ["admin", "sections", "listing"] });
             setReorderServerSnapshot(cloneReorderItems(reorderDraft));
             setReorderUndoStack([]);
-            setFormMessage("Section order updated.");
+            toast.showToast("Section order updated.", "success");
         },
         onError: (error) => {
-            setFormMessage(error instanceof Error ? error.message : "Failed to reorder sections.");
+            toast.showToast(error instanceof Error ? error.message : "Failed to reorder sections.", "error");
         },
     });
     React.useEffect(() => {
@@ -518,46 +220,140 @@ export function AdminSectionsView({ children }) {
         setOrder(String(selected.order ?? ""));
         const selectedConfig = (selected.config ?? {});
         setConfigJson(JSON.stringify(selectedConfig, null, 2));
-        if (selected.type === "products") {
-            setProductsBuilder(parseProductsBuilder(selectedConfig));
-        }
-        if (selected.type === "auctions") {
-            setAuctionsBuilder(parseAuctionsBuilder(selectedConfig));
-        }
-        if (selected.type === "stats") {
-            setStatsBuilder(parseStatsBuilder(selectedConfig));
-        }
-        if (selected.type === "pre-orders") {
-            setPreOrdersBuilder(parsePreOrdersBuilder(selectedConfig));
-        }
-        if (selected.type === "stores") {
-            setStoresBuilder(parseStoresBuilder(selectedConfig));
-        }
-        if (selected.type === "events") {
-            setEventsBuilder(parseEventsBuilder(selectedConfig));
+        switch (selected.type) {
+            case "products":
+                setProductsBuilder(parseProductsBuilder(selectedConfig));
+                break;
+            case "auctions":
+                setAuctionsBuilder(parseAuctionsBuilder(selectedConfig));
+                break;
+            case "stats":
+                setStatsBuilder(parseStatsBuilder(selectedConfig));
+                break;
+            case "pre-orders":
+                setPreOrdersBuilder(parsePreOrdersBuilder(selectedConfig));
+                break;
+            case "stores":
+                setStoresBuilder(parseStoresBuilder(selectedConfig));
+                break;
+            case "events":
+                setEventsBuilder(parseEventsBuilder(selectedConfig));
+                break;
+            case "social-feed":
+                setSocialFeedBuilder(parseSocialFeedBuilder(selectedConfig));
+                break;
+            case "welcome":
+                setWelcomeBuilder(parseWelcomeBuilder(selectedConfig));
+                break;
+            case "trust-indicators":
+                setTrustIndicatorsBuilder(parseTrustIndicatorsBuilder(selectedConfig));
+                break;
+            case "categories":
+                setCategoriesBuilder(parseCategoriesBuilder(selectedConfig));
+                break;
+            case "brands":
+                setBrandsBuilder(parseBrandsBuilder(selectedConfig));
+                break;
+            case "banner":
+                setBannerBuilder(parseBannerBuilder(selectedConfig));
+                break;
+            case "features":
+                setFeaturesBuilder(parseFeaturesBuilder(selectedConfig));
+                break;
+            case "reviews":
+                setReviewsBuilder(parseReviewsBuilder(selectedConfig));
+                break;
+            case "whatsapp-community":
+                setWhatsappBuilder(parseWhatsAppBuilder(selectedConfig));
+                break;
+            case "faq":
+                setFaqBuilder(parseFAQBuilder(selectedConfig));
+                break;
+            case "blog-articles":
+                setBlogBuilder(parseBlogBuilder(selectedConfig));
+                break;
+            case "newsletter":
+                setNewsletterBuilder(parseNewsletterBuilder(selectedConfig));
+                break;
+            case "carousel":
+                setCarouselBuilder(parseCarouselBuilder(selectedConfig));
+                break;
+            case "custom-cards":
+                setCustomCardsBuilder(parseCustomCardsBuilder(selectedConfig));
+                break;
+            case "google-reviews":
+                setGoogleReviewsBuilder(parseGoogleReviewsBuilder(selectedConfig));
+                break;
         }
     }, [mode, sections, selectedSectionId]);
     React.useEffect(() => {
         if (!isModalOpen || mode !== "create") {
             return;
         }
-        if (sectionType === "products") {
-            setProductsBuilder(DEFAULT_PRODUCTS_BUILDER);
-        }
-        if (sectionType === "auctions") {
-            setAuctionsBuilder(DEFAULT_AUCTIONS_BUILDER);
-        }
-        if (sectionType === "stats") {
-            setStatsBuilder(DEFAULT_STATS_BUILDER);
-        }
-        if (sectionType === "pre-orders") {
-            setPreOrdersBuilder(DEFAULT_PRE_ORDERS_BUILDER);
-        }
-        if (sectionType === "stores") {
-            setStoresBuilder(DEFAULT_STORES_BUILDER);
-        }
-        if (sectionType === "events") {
-            setEventsBuilder(DEFAULT_EVENTS_BUILDER);
+        switch (sectionType) {
+            case "products":
+                setProductsBuilder(DEFAULT_PRODUCTS_BUILDER);
+                break;
+            case "auctions":
+                setAuctionsBuilder(DEFAULT_AUCTIONS_BUILDER);
+                break;
+            case "stats":
+                setStatsBuilder(DEFAULT_STATS_BUILDER);
+                break;
+            case "pre-orders":
+                setPreOrdersBuilder(DEFAULT_PRE_ORDERS_BUILDER);
+                break;
+            case "stores":
+                setStoresBuilder(DEFAULT_STORES_BUILDER);
+                break;
+            case "events":
+                setEventsBuilder(DEFAULT_EVENTS_BUILDER);
+                break;
+            case "social-feed":
+                setSocialFeedBuilder(DEFAULT_SOCIAL_FEED_BUILDER);
+                break;
+            case "welcome":
+                setWelcomeBuilder(DEFAULT_WELCOME_BUILDER);
+                break;
+            case "trust-indicators":
+                setTrustIndicatorsBuilder(DEFAULT_TRUST_INDICATORS_BUILDER);
+                break;
+            case "categories":
+                setCategoriesBuilder(DEFAULT_CATEGORIES_BUILDER);
+                break;
+            case "brands":
+                setBrandsBuilder(DEFAULT_BRANDS_BUILDER);
+                break;
+            case "banner":
+                setBannerBuilder(DEFAULT_BANNER_BUILDER);
+                break;
+            case "features":
+                setFeaturesBuilder(DEFAULT_FEATURES_BUILDER);
+                break;
+            case "reviews":
+                setReviewsBuilder(DEFAULT_REVIEWS_BUILDER);
+                break;
+            case "whatsapp-community":
+                setWhatsappBuilder(DEFAULT_WHATSAPP_BUILDER);
+                break;
+            case "faq":
+                setFaqBuilder(DEFAULT_FAQ_BUILDER);
+                break;
+            case "blog-articles":
+                setBlogBuilder(DEFAULT_BLOG_BUILDER);
+                break;
+            case "newsletter":
+                setNewsletterBuilder(DEFAULT_NEWSLETTER_BUILDER);
+                break;
+            case "carousel":
+                setCarouselBuilder(DEFAULT_CAROUSEL_BUILDER);
+                break;
+            case "custom-cards":
+                setCustomCardsBuilder(DEFAULT_CUSTOM_CARDS_BUILDER);
+                break;
+            case "google-reviews":
+                setGoogleReviewsBuilder(DEFAULT_GOOGLE_REVIEWS_BUILDER);
+                break;
         }
     }, [isModalOpen, mode, sectionType]);
     function toggleCategorySelection(ids, categoryId, checked) {
@@ -658,15 +454,7 @@ export function AdminSectionsView({ children }) {
                         { label: "All", value: "all" },
                         { label: "Published", value: "published" },
                         { label: "Draft", value: "draft" },
-                    ] }), _jsx(Select, { label: "Sort", value: productsBuilder.sortBy, onValueChange: (value) => setProductsBuilder((prev) => ({
-                        ...prev,
-                        sortBy: value,
-                    })), options: [
-                        { label: "Featured", value: "featured" },
-                        { label: "Newest", value: "newest" },
-                        { label: "Price (Low to High)", value: "price-asc" },
-                        { label: "Price (High to Low)", value: "price-desc" },
-                    ] }), _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: "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) => ({
                         ...prev,
                         resourceMode: value,
                     })), options: [
@@ -704,14 +492,7 @@ export function AdminSectionsView({ children }) {
                         { label: "Active", value: "active" },
                         { label: "Scheduled", value: "scheduled" },
                         { label: "Ended", value: "ended" },
-                    ] }), _jsx(Select, { label: "Sort", value: auctionsBuilder.sortBy, onValueChange: (value) => setAuctionsBuilder((prev) => ({
-                        ...prev,
-                        sortBy: value,
-                    })), options: [
-                        { label: "Ending Soon", value: "ending-soon" },
-                        { label: "Highest Bid", value: "highest-bid" },
-                        { label: "Newest", value: "newest" },
-                    ] }), _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: "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) => ({
                         ...prev,
                         resourceMode: value,
                     })), options: [
@@ -761,15 +542,7 @@ export function AdminSectionsView({ children }) {
                         { label: "Active", value: "active" },
                         { label: "Upcoming", value: "upcoming" },
                         { label: "Closed", value: "closed" },
-                    ] }), _jsx(Select, { label: "Sort", value: preOrdersBuilder.sortBy, onValueChange: (value) => setPreOrdersBuilder((prev) => ({
-                        ...prev,
-                        sortBy: value,
-                    })), options: [
-                        { label: "Shipping Soon", value: "shipping-soon" },
-                        { label: "Newest", value: "newest" },
-                        { label: "Price (Low to High)", value: "price-asc" },
-                        { label: "Price (High to Low)", value: "price-desc" },
-                    ] }), _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: "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) => ({
                         ...prev,
                         resourceMode: value,
                     })), options: [
@@ -803,14 +576,7 @@ export function AdminSectionsView({ children }) {
                         { label: "Active", value: "active" },
                         { label: "Pending", value: "pending" },
                         { label: "Disabled", value: "disabled" },
-                    ] }), _jsx(Select, { label: "Sort", value: storesBuilder.sortBy, onValueChange: (value) => setStoresBuilder((prev) => ({
-                        ...prev,
-                        sortBy: value,
-                    })), options: [
-                        { label: "Rating (High to Low)", value: "rating-desc" },
-                        { label: "Newest", value: "newest" },
-                        { label: "Popular", value: "popular" },
-                    ] }), _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: "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) => ({
                         ...prev,
                         resourceMode: value,
                     })), options: [
@@ -847,14 +613,7 @@ export function AdminSectionsView({ children }) {
                         { label: "Active", value: "active" },
                         { label: "Upcoming", value: "upcoming" },
                         { label: "Ended", value: "ended" },
-                    ] }), _jsx(Select, { label: "Sort", value: eventsBuilder.sortBy, onValueChange: (value) => setEventsBuilder((prev) => ({
-                        ...prev,
-                        sortBy: value,
-                    })), options: [
-                        { label: "Start Date", value: "start-date" },
-                        { label: "Newest", value: "newest" },
-                        { label: "Popular", value: "popular" },
-                    ] }), _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: "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) => ({
                         ...prev,
                         resourceMode: value,
                     })), options: [
@@ -879,26 +638,156 @@ export function AdminSectionsView({ children }) {
                         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) => ({
+                                    ...prev,
+                                    categories: e.target.checked
+                                        ? [...prev.categories, opt.value]
+                                        : prev.categories.filter((c) => c !== opt.value),
+                                })) }, 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 })) })] }));
+    }
+    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" })] }));
+    }
+    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] }));
+    }
+    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" })] })] }));
+    }
+    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: [
+                        { 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) })) })] }));
+    }
+    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 })) })] }));
+    }
+    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] }));
+    }
+    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" })] }));
+    }
+    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) })) })] }));
+    }
+    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) })) })] }));
+    }
+    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: [
+                        { label: "Viewport (100vh)", value: "viewport" },
+                        { label: "Tall (80vh)", value: "tall" },
+                        { label: "Medium (60vh)", value: "medium" },
+                    ] }), _jsx(Input, { label: "Default autoplay delay (ms)", type: "number", min: 1000, step: 500, value: String(carouselBuilder.defaultAutoplayDelayMs), onChange: (e) => setCarouselBuilder((prev) => ({
+                        ...prev,
+                        defaultAutoplayDelayMs: Math.max(1000, Number(e.target.value) || 5000),
+                    })) }), _jsx(Checkbox, { checked: carouselBuilder.pauseOnHover, label: "Pause on hover", onChange: (e) => setCarouselBuilder((prev) => ({ ...prev, pauseOnHover: e.target.checked })) }), _jsx(Checkbox, { checked: carouselBuilder.showDots, label: "Show navigation dots", onChange: (e) => setCarouselBuilder((prev) => ({ ...prev, showDots: e.target.checked })) }), _jsx(Checkbox, { checked: carouselBuilder.showArrows, label: "Show prev/next arrows", onChange: (e) => setCarouselBuilder((prev) => ({ ...prev, showArrows: e.target.checked })) })] }));
+    }
+    function renderCustomCardsBuilder() {
+        function addCard() {
+            setCustomCardsBuilder((prev) => ({
+                ...prev,
+                cards: [
+                    ...prev.cards,
+                    {
+                        id: `card-${prev.cards.length + 1}`,
+                        image: "",
+                        imageAlt: "",
+                        eyebrow: "",
+                        title: "",
+                        body: "",
+                        link: "",
+                        backgroundColor: "",
+                        textColor: "",
+                        borderRadius: "md",
+                        shadowLevel: "sm",
+                    },
+                ],
+            }));
+        }
+        function removeCard(index) {
+            setCustomCardsBuilder((prev) => ({
+                ...prev,
+                cards: prev.cards.filter((_, i) => i !== index),
+            }));
+        }
+        function updateCard(index, patch) {
+            setCustomCardsBuilder((prev) => {
+                const next = [...prev.cards];
+                next[index] = { ...next[index], ...patch };
+                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: [
+                        { label: "Grid", value: "grid" },
+                        { label: "Row (horizontal scroll)", value: "row" },
+                        { label: "Masonry", value: "masonry" },
+                    ] }), _jsx(Select, { label: "Columns", value: String(customCardsBuilder.columns), onValueChange: (value) => setCustomCardsBuilder((prev) => ({ ...prev, columns: Number(value) })), options: [
+                        { label: "1 column", value: "1" },
+                        { 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) => ({
+                        ...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] })] }));
+    }
+    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) => ({
+                        ...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: [
+                        { label: "All ratings (0★+)", value: "0" },
+                        { label: "3★ and above", value: "3" },
+                        { label: "4★ and above", value: "4" },
+                        { label: "5★ only", value: "5" },
+                    ] }), _jsx(Select, { label: "Layout", value: googleReviewsBuilder.layout, onValueChange: (value) => setGoogleReviewsBuilder((prev) => ({ ...prev, layout: value })), options: [
+                        { label: "Grid", value: "grid" },
+                        { label: "Carousel", value: "carousel" },
+                    ] }), _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 renderTypedBuilder() {
-        if (sectionType === "products") {
-            return renderProductsBuilder();
-        }
-        if (sectionType === "auctions") {
-            return renderAuctionsBuilder();
-        }
-        if (sectionType === "stats") {
-            return renderStatsBuilder();
-        }
-        if (sectionType === "pre-orders") {
-            return renderPreOrdersBuilder();
-        }
-        if (sectionType === "stores") {
-            return renderStoresBuilder();
-        }
-        if (sectionType === "events") {
-            return renderEventsBuilder();
+        switch (sectionType) {
+            case "products": return renderProductsBuilder();
+            case "auctions": return renderAuctionsBuilder();
+            case "stats": return renderStatsBuilder();
+            case "pre-orders": return renderPreOrdersBuilder();
+            case "stores": return renderStoresBuilder();
+            case "events": return renderEventsBuilder();
+            case "welcome": return renderWelcomeBuilder();
+            case "trust-indicators": return renderTrustIndicatorsBuilder();
+            case "categories": return renderCategoriesBuilder();
+            case "brands": return renderBrandsBuilder();
+            case "banner": return renderBannerBuilder();
+            case "features": return renderFeaturesBuilder();
+            case "reviews": return renderReviewsBuilder();
+            case "whatsapp-community": return renderWhatsAppBuilder();
+            case "faq": return renderFAQBuilder();
+            case "blog-articles": return renderBlogBuilder();
+            case "newsletter": return renderNewsletterBuilder();
+            case "carousel": return renderCarouselBuilder();
+            case "custom-cards": return renderCustomCardsBuilder();
+            case "google-reviews": return renderGoogleReviewsBuilder();
+            default: return null;
         }
-        return null;
     }
     // If children exist, render passthrough mode (detail view)
     if (hasChildren) {
@@ -917,12 +806,12 @@ 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: [_jsx(AdminListingScaffold, { title: "Homepage Sections", subtitle: "Manage homepage sections and their display order", actionLabel: "Manage Sections", searchPlaceholder: "Search sections...", rows: rows, isLoading: isLoading, errorMessage: errorMessage, emptyLabel: "No sections found", actionsSlot: _jsx(Button, { type: "button", variant: "primary", size: "sm", onClick: () => setIsModalOpen(true), children: "Manage Sections" }) }), _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: () => {
+    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}`))) }))] }), formMessage ? (_jsx(Alert, { variant: formMessage.includes("Failed") || formMessage.includes("must") ? "error" : "success", title: "Sections", children: formMessage })) : null, _jsx(Modal, { isOpen: isModalOpen, onClose: () => setIsModalOpen(false), title: "Manage Homepage Section", size: "lg", children: _jsxs(Form, { className: "space-y-4", onSubmit: (event) => {
+                            }, 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: [