@mohasinac/appkit 2.3.2 → 2.4.1

package/dist/features/homepage/components/BrandsSection.js

@@ -1,5 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Image from "next/image";
 import Link from "next/link";
 import { THEME_CONSTANTS } from "../../../tokens";
 import { Heading, HorizontalScroller, Section, Text } from "../../../ui";
@@ -9,11 +10,11 @@ function BrandLogo({ brand }) {
     const iconSrc = brand.display?.icon;
     const coverImage = brand.display?.coverImage;
     const initial = brand.name[0]?.toUpperCase() ?? "?";
-    return (_jsxs(Link, { href: ROUTES.PUBLIC.CATEGORY_DETAIL(brand.slug), className: "flex h-24 w-28 flex-col items-center justify-center gap-2 rounded-xl border border-zinc-200 bg-white p-3 shadow-sm transition-all hover:border-primary-300 hover:shadow-md dark:border-slate-700 dark:bg-slate-900", children: [iconSrc || coverImage ? (_jsx("img", { src: iconSrc ?? coverImage, alt: brand.name, className: "h-10 w-10 rounded object-contain" })) : (_jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-lg bg-primary-100 text-sm font-bold text-primary-700 dark:bg-primary-900 dark:text-primary-300", children: initial })), _jsx(Text, { className: "w-full truncate text-center text-xs font-medium text-zinc-700 dark:text-zinc-300", children: brand.name })] }));
+    return (_jsxs(Link, { href: ROUTES.PUBLIC.CATEGORY_DETAIL(brand.slug), className: "flex h-24 w-28 flex-col items-center justify-center gap-2 rounded-xl border border-zinc-200 bg-white p-3 shadow-sm transition-all hover:border-primary-300 hover:shadow-md dark:border-slate-700 dark:bg-slate-900", children: [iconSrc || coverImage ? (_jsx(Image, { src: iconSrc ?? coverImage, alt: brand.name, width: 40, height: 40, className: "h-10 w-10 rounded object-contain" })) : (_jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-lg bg-primary-100 text-sm font-bold text-primary-700 dark:bg-primary-900 dark:text-primary-300", children: initial })), _jsx(Text, { className: "w-full truncate text-center text-xs font-medium text-zinc-700 dark:text-zinc-300", children: brand.name })] }));
 }
-export function BrandsSection({ title = "Top Brands", subtitle, limit = 12, viewMoreHref, viewMoreLabel = "All brands →", className = "", }) {
+export function BrandsSection({ title = "Top Brands", subtitle, limit = 12, viewMoreHref, viewMoreLabel = "All brands →", className = "", initialItems, }) {
     const { themed } = THEME_CONSTANTS;
-    const { data: brands = [], isLoading } = useTopBrands(limit);
+    const { data: brands = [], isLoading } = useTopBrands(limit, { initialData: initialItems });
     if (!isLoading && brands.length === 0)
         return null;
     return (_jsx(Section, { className: `py-12 px-4 ${themed.bgSecondary} ${className}`, children: _jsxs("div", { className: "mx-auto max-w-7xl", children: [_jsxs("div", { className: "mb-6 flex items-center justify-between", children: [_jsxs("div", { children: [_jsx(Heading, { level: 2, className: `text-2xl font-bold md:text-3xl ${themed.textPrimary}`, children: title }), subtitle && (_jsx(Text, { variant: "secondary", className: "mt-1 text-sm", children: subtitle }))] }), viewMoreHref && (_jsx(Link, { href: viewMoreHref, className: "text-sm font-medium text-primary hover:underline", children: viewMoreLabel }))] }), isLoading ? (_jsx("div", { className: "flex gap-3 overflow-hidden", children: Array.from({ length: 8 }).map((_, i) => (_jsx("div", { className: "h-24 w-28 flex-none animate-pulse rounded-xl bg-zinc-200 dark:bg-slate-700" }, i))) })) : (_jsx(HorizontalScroller, { items: brands, renderItem: (brand) => _jsx(BrandLogo, { brand: brand }), keyExtractor: (brand) => brand.id, gap: 12, showArrows: true, showScrollbar: false }))] }) }));

package/dist/features/homepage/components/CustomCardsSection.d.ts

@@ -0,0 +1,3 @@
+import type { CustomCardsSectionConfig } from "../schemas";
+export type CustomCardsSectionProps = CustomCardsSectionConfig;
+export declare function CustomCardsSection(config: CustomCardsSectionProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/features/homepage/components/CustomCardsSection.js

@@ -0,0 +1,76 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Heading, HorizontalScroller, Section } from "../../../ui";
+import { THEME_CONSTANTS } from "../../../tokens";
+import { SectionCarousel } from "./SectionCarousel";
+import { MediaImage } from "../../media/MediaImage";
+// --- Helpers -----------------------------------------------------------------
+const COLS_CLASS = {
+    1: "grid-cols-1",
+    2: "grid-cols-1 sm:grid-cols-2",
+    3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
+    4: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4",
+};
+const RADIUS_CLASS = {
+    none: "rounded-none",
+    sm: "rounded-sm",
+    md: "rounded-md",
+    lg: "rounded-lg",
+    xl: "rounded-xl",
+    full: "rounded-full",
+};
+const SHADOW_CLASS = {
+    none: "",
+    sm: "shadow-sm",
+    md: "shadow-md",
+    lg: "shadow-lg",
+};
+const VARIANT_CLASS = {
+    primary: "inline-flex items-center justify-center px-4 py-2 rounded-md bg-[var(--appkit-color-primary)] text-white text-sm font-medium hover:opacity-90 transition-opacity",
+    secondary: "inline-flex items-center justify-center px-4 py-2 rounded-md bg-[var(--appkit-color-secondary)] text-white text-sm font-medium hover:opacity-90 transition-opacity",
+    outline: "inline-flex items-center justify-center px-4 py-2 rounded-md border border-current text-sm font-medium hover:bg-black/5 transition-colors",
+    ghost: "inline-flex items-center justify-center px-4 py-2 text-sm font-medium hover:underline transition-colors",
+};
+// --- Card Item ---------------------------------------------------------------
+function CardItem({ card }) {
+    const radiusClass = RADIUS_CLASS[card.borderRadius ?? "lg"] ?? "rounded-lg";
+    const shadowClass = SHADOW_CLASS[card.shadowLevel ?? "sm"] ?? "shadow-sm";
+    const cardStyle = {};
+    if (card.backgroundColor)
+        cardStyle.backgroundColor = card.backgroundColor;
+    if (card.textColor)
+        cardStyle.color = card.textColor;
+    return (_jsxs("div", { className: `flex flex-col overflow-hidden ${radiusClass} ${shadowClass} bg-[var(--appkit-color-surface)]`, style: cardStyle, children: [card.image && (_jsx("div", { className: "relative w-full aspect-video overflow-hidden", children: _jsx(MediaImage, { src: card.image, alt: card.imageAlt ?? "", size: "card" }) })), _jsxs("div", { className: "flex flex-col gap-2 p-4 flex-1", children: [card.eyebrow && (_jsx("p", { className: "text-xs font-semibold uppercase tracking-widest opacity-70", children: card.eyebrow })), card.title && (_jsx("p", { className: "text-base font-bold leading-snug", children: card.title })), card.body && (_jsx("p", { className: "text-sm opacity-80 leading-relaxed flex-1", children: card.body })), card.buttons && card.buttons.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-2 mt-2", children: card.buttons.map((btn, i) => (_jsx("a", { href: btn.href, target: btn.target ?? "_self", rel: btn.target === "_blank" ? "noopener noreferrer" : undefined, className: VARIANT_CLASS[btn.variant] ?? VARIANT_CLASS.primary, children: btn.label }, i))) })), card.formEmbed && (_jsx("iframe", { src: card.formEmbed, sandbox: "allow-forms allow-scripts", loading: "lazy", className: "w-full mt-3 border-0 rounded-md", style: { minHeight: "200px" }, title: "Embedded form" }))] })] }));
+}
+// --- Section Header ----------------------------------------------------------
+function SectionHeader({ title }) {
+    const { themed } = THEME_CONSTANTS;
+    if (!title)
+        return null;
+    return (_jsx("div", { className: "mb-6", children: _jsx(Heading, { level: 2, className: themed.textPrimary, children: title }) }));
+}
+export function CustomCardsSection(config) {
+    const { title, layout, columns = 3, cards, autoScroll, scrollIntervalMs } = config;
+    const { themed } = THEME_CONSTANTS;
+    if (!cards?.length)
+        return null;
+    // autoScroll: wrap all cards in SectionCarousel (client carousel)
+    if (autoScroll) {
+        return (_jsx(Section, { className: `py-12 ${themed.bgPrimary}`, children: _jsx("div", { className: "w-full max-w-7xl mx-auto px-4", children: _jsx(SectionCarousel, { title: title ?? "", items: cards, renderItem: (card) => _jsx(CardItem, { card: card }), keyExtractor: (card) => card.id, autoScroll: true, autoScrollInterval: scrollIntervalMs ?? 3500, perView: { base: 1, sm: 2, md: columns } }) }) }));
+    }
+    // Row layout: horizontal scroller
+    if (layout === "row") {
+        return (_jsx(Section, { className: `py-12 ${themed.bgPrimary}`, children: _jsxs("div", { className: "w-full max-w-7xl mx-auto px-4", children: [_jsx(SectionHeader, { title: title }), _jsx(HorizontalScroller, { gap: 16, showArrows: true, snapToItems: true, children: cards.map((card) => (_jsx("div", { className: "w-72 flex-shrink-0", children: _jsx(CardItem, { card: card }) }, card.id))) })] }) }));
+    }
+    // Masonry layout: CSS columns
+    if (layout === "masonry") {
+        const colsClass = COLS_CLASS[columns] ?? COLS_CLASS[3];
+        const masonryClass = colsClass
+            .split(" ")
+            .map((c) => c.replace("grid-cols-", "columns-"))
+            .join(" ");
+        return (_jsx(Section, { className: `py-12 ${themed.bgPrimary}`, children: _jsxs("div", { className: "w-full max-w-7xl mx-auto px-4", children: [_jsx(SectionHeader, { title: title }), _jsx("div", { className: `${masonryClass} gap-4 space-y-4`, children: cards.map((card) => (_jsx("div", { className: "break-inside-avoid", children: _jsx(CardItem, { card: card }) }, card.id))) })] }) }));
+    }
+    // Grid layout (default)
+    const colsClass = COLS_CLASS[columns] ?? COLS_CLASS[3];
+    return (_jsx(Section, { className: `py-12 ${themed.bgPrimary}`, children: _jsxs("div", { className: "w-full max-w-7xl mx-auto px-4", children: [_jsx(SectionHeader, { title: title }), _jsx("div", { className: `grid ${colsClass} gap-4`, children: cards.map((card) => (_jsx(CardItem, { card: card }, card.id))) })] }) }));
+}

package/dist/features/homepage/components/EventsSection.d.ts

@@ -1,3 +1,4 @@
+import type { EventItem } from "../../events/types";
 export interface EventsSectionProps {
     title?: string;
     description?: string;
@@ -5,5 +6,6 @@ export interface EventsSectionProps {
     viewMoreLabel?: string;
     limit?: number;
     className?: string;
+    initialItems?: EventItem[];
 }
-export declare function EventsSection({ title, description, viewMoreHref, viewMoreLabel, limit, className, }: EventsSectionProps): import("react/jsx-runtime").JSX.Element;
+export declare function EventsSection({ title, description, viewMoreHref, viewMoreLabel, limit, className, initialItems, }: EventsSectionProps): import("react/jsx-runtime").JSX.Element;

package/dist/features/homepage/components/EventsSection.js

@@ -4,7 +4,7 @@ import { THEME_CONSTANTS } from "../../../tokens";
 import { SectionCarousel } from "./SectionCarousel";
 import { useHomepageEvents } from "../hooks/useHomepageEvents";
 import { EventCard } from "../../events/components/EventCard";
-export function EventsSection({ title = "Events & Offers", description, viewMoreHref, viewMoreLabel = "View all events →", limit = 6, className = "", }) {
-    const { data: items = [], isLoading } = useHomepageEvents(limit);
+export function EventsSection({ title = "Events & Offers", description, viewMoreHref, viewMoreLabel = "View all events →", limit = 6, className = "", initialItems, }) {
+    const { data: items = [], isLoading } = useHomepageEvents(limit, { initialData: initialItems });
     return (_jsx(SectionCarousel, { title: title, description: description, pillLabel: "Events & Offers", headingVariant: "editorial", viewMoreHref: viewMoreHref, viewMoreLabel: viewMoreLabel, items: items, isLoading: isLoading, skeletonCount: 3, perView: THEME_CONSTANTS.carousel.perView.events, gap: 16, keyExtractor: (event) => event.id, renderItem: (event) => (_jsx(EventCard, { event: event })), className: className }));
 }

package/dist/features/homepage/components/FeaturedAuctionsSection.d.ts

@@ -1,8 +1,11 @@
+import type { ProductItem } from "../../products/types";
 export interface FeaturedAuctionsSectionProps {
     title?: string;
     description?: string;
     viewMoreHref?: string;
     viewMoreLabel?: string;
     className?: string;
+    filterByBrand?: string;
+    initialItems?: ProductItem[];
 }
-export declare function FeaturedAuctionsSection({ title, description, viewMoreHref, viewMoreLabel, className, }: FeaturedAuctionsSectionProps): import("react/jsx-runtime").JSX.Element;
+export declare function FeaturedAuctionsSection({ title, description, viewMoreHref, viewMoreLabel, className, filterByBrand, initialItems, }: FeaturedAuctionsSectionProps): import("react/jsx-runtime").JSX.Element;

package/dist/features/homepage/components/FeaturedAuctionsSection.js

@@ -4,7 +4,7 @@ import { THEME_CONSTANTS } from "../../../tokens";
 import { SectionCarousel } from "./SectionCarousel";
 import { useFeaturedAuctions } from "../hooks/useFeaturedAuctions";
 import { MarketplaceAuctionCard } from "../../auctions/components/MarketplaceAuctionCard";
-export function FeaturedAuctionsSection({ title = "Live Auctions", description, viewMoreHref, viewMoreLabel = "View all auctions →", className = "", }) {
-    const { data: items = [], isLoading } = useFeaturedAuctions();
+export function FeaturedAuctionsSection({ title = "Live Auctions", description, viewMoreHref, viewMoreLabel = "View all auctions →", className = "", filterByBrand, initialItems, }) {
+    const { data: items = [], isLoading } = useFeaturedAuctions({ filterByBrand, initialData: initialItems });
     return (_jsx(SectionCarousel, { title: title, description: description, pillLabel: "Live Auctions", headingVariant: "editorial", viewMoreHref: viewMoreHref, viewMoreLabel: viewMoreLabel, items: items, isLoading: isLoading, skeletonCount: 4, perView: THEME_CONSTANTS.carousel.perView.standard, gap: 16, keyExtractor: (product) => product.id, renderItem: (product) => (_jsx(MarketplaceAuctionCard, { product: product })), className: className }));
 }

package/dist/features/homepage/components/FeaturedPreOrdersSection.d.ts

@@ -1,8 +1,11 @@
+import type { ProductItem } from "../../products/types";
 export interface FeaturedPreOrdersSectionProps {
     title?: string;
     description?: string;
     viewMoreHref?: string;
     viewMoreLabel?: string;
     className?: string;
+    filterByBrand?: string;
+    initialItems?: ProductItem[];
 }
-export declare function FeaturedPreOrdersSection({ title, description, viewMoreHref, viewMoreLabel, className, }: FeaturedPreOrdersSectionProps): import("react/jsx-runtime").JSX.Element;
+export declare function FeaturedPreOrdersSection({ title, description, viewMoreHref, viewMoreLabel, className, filterByBrand, initialItems, }: FeaturedPreOrdersSectionProps): import("react/jsx-runtime").JSX.Element;

package/dist/features/homepage/components/FeaturedPreOrdersSection.js

@@ -4,7 +4,7 @@ import { THEME_CONSTANTS } from "../../../tokens";
 import { SectionCarousel } from "./SectionCarousel";
 import { useFeaturedPreOrders } from "../hooks/useFeaturedPreOrders";
 import { MarketplacePreorderCard } from "../../pre-orders/components/MarketplacePreorderCard";
-export function FeaturedPreOrdersSection({ title = "Reserve Before It Ships", description, viewMoreHref, viewMoreLabel = "View all pre-orders →", className = "", }) {
-    const { data: items = [], isLoading } = useFeaturedPreOrders();
+export function FeaturedPreOrdersSection({ title = "Reserve Before It Ships", description, viewMoreHref, viewMoreLabel = "View all pre-orders →", className = "", filterByBrand, initialItems, }) {
+    const { data: items = [], isLoading } = useFeaturedPreOrders({ filterByBrand, initialData: initialItems });
     return (_jsx(SectionCarousel, { title: title, description: description, pillLabel: "Pre-Order Incoming", headingVariant: "editorial", viewMoreHref: viewMoreHref, viewMoreLabel: viewMoreLabel, items: items, isLoading: isLoading, skeletonCount: 4, perView: THEME_CONSTANTS.carousel.perView.standard, gap: 16, keyExtractor: (product) => product.id, renderItem: (product) => (_jsx(MarketplacePreorderCard, { product: product })), className: className }));
 }

package/dist/features/homepage/components/FeaturedProductsSection.d.ts

@@ -1,8 +1,11 @@
+import type { ProductItem } from "../../products/types";
 export interface FeaturedProductsSectionProps {
     title?: string;
     description?: string;
     viewMoreHref?: string;
     viewMoreLabel?: string;
     className?: string;
+    filterByBrand?: string;
+    initialItems?: ProductItem[];
 }
-export declare function FeaturedProductsSection({ title, description, viewMoreHref, viewMoreLabel, className, }: FeaturedProductsSectionProps): import("react/jsx-runtime").JSX.Element;
+export declare function FeaturedProductsSection({ title, description, viewMoreHref, viewMoreLabel, className, filterByBrand, initialItems, }: FeaturedProductsSectionProps): import("react/jsx-runtime").JSX.Element;

package/dist/features/homepage/components/FeaturedProductsSection.js

@@ -4,8 +4,13 @@ import { SectionCarousel } from "./SectionCarousel";
 import { useFeaturedProducts } from "../hooks/useFeaturedProducts";
 import { InteractiveProductCard } from "../../products/components/InteractiveProductCard";
 import { ROUTES } from "../../../next";
-export function FeaturedProductsSection({ title = "Featured Products", description, viewMoreHref, viewMoreLabel = "View all products →", className = "", }) {
-    const { data, isLoading } = useFeaturedProducts();
+export function FeaturedProductsSection({ title = "Featured Products", description, viewMoreHref, viewMoreLabel = "View all products →", className = "", filterByBrand, initialItems, }) {
+    const { data, isLoading } = useFeaturedProducts({
+        filterByBrand,
+        initialData: initialItems?.length
+            ? { items: initialItems, total: initialItems.length, page: 1, pageSize: initialItems.length, totalPages: 1, hasMore: false }
+            : undefined,
+    });
     const items = data?.items ?? [];
-    return (_jsx(SectionCarousel, { title: title, description: description, pillLabel: "Featured Products", headingVariant: "editorial", viewMoreHref: viewMoreHref, viewMoreLabel: viewMoreLabel, items: items, isLoading: isLoading, skeletonCount: 4, gap: 16, keyExtractor: (product) => product.id, renderItem: (product) => (_jsx(InteractiveProductCard, { product: product, href: ROUTES.PUBLIC.PRODUCT_DETAIL(product.slug ?? product.id) })), className: className }));
+    return (_jsx(SectionCarousel, { title: title, description: description, pillLabel: "Featured Products", headingVariant: "editorial", viewMoreHref: viewMoreHref, viewMoreLabel: viewMoreLabel, items: items, isLoading: isLoading, skeletonCount: 4, gap: 16, keyExtractor: (product) => product.id, renderItem: (product) => (_jsx(InteractiveProductCard, { product: product, href: String(ROUTES.PUBLIC.PRODUCT_DETAIL(product.slug ?? product.id ?? "")) })), className: className }));
 }

package/dist/features/homepage/components/FeaturedStoresSection.d.ts

@@ -1,3 +1,4 @@
+import type { StoreListItem } from "../../stores/types";
 export interface FeaturedStoresSectionProps {
     title?: string;
     description?: string;
@@ -5,5 +6,6 @@ export interface FeaturedStoresSectionProps {
     viewMoreLabel?: string;
     limit?: number;
     className?: string;
+    initialItems?: StoreListItem[];
 }
-export declare function FeaturedStoresSection({ title, description, viewMoreHref, viewMoreLabel, limit, className, }: FeaturedStoresSectionProps): import("react/jsx-runtime").JSX.Element;
+export declare function FeaturedStoresSection({ title, description, viewMoreHref, viewMoreLabel, limit, className, initialItems, }: FeaturedStoresSectionProps): import("react/jsx-runtime").JSX.Element;

package/dist/features/homepage/components/FeaturedStoresSection.js

@@ -5,7 +5,7 @@ import { SectionCarousel } from "./SectionCarousel";
 import { useFeaturedStores } from "../hooks/useFeaturedStores";
 import { InteractiveStoreCard } from "../../stores/components/InteractiveStoreCard";
 import { ROUTES } from "../../../next";
-export function FeaturedStoresSection({ title = "Featured Stores", description, viewMoreHref, viewMoreLabel = "View all stores →", limit = 8, className = "", }) {
-    const { data: items = [], isLoading } = useFeaturedStores(limit);
+export function FeaturedStoresSection({ title = "Featured Stores", description, viewMoreHref, viewMoreLabel = "View all stores →", limit = 8, className = "", initialItems, }) {
+    const { data: items = [], isLoading } = useFeaturedStores(limit, { initialData: initialItems });
     return (_jsx(SectionCarousel, { title: title, description: description, pillLabel: "Top Stores", headingVariant: "editorial", viewMoreHref: viewMoreHref, viewMoreLabel: viewMoreLabel, items: items, isLoading: isLoading, skeletonCount: 4, perView: THEME_CONSTANTS.carousel.perView.standard, gap: 16, keyExtractor: (store) => store.id, renderItem: (store) => (_jsx(InteractiveStoreCard, { store: store, href: ROUTES.PUBLIC.STORE_DETAIL(store.storeSlug) })), className: className }));
 }

package/dist/features/homepage/components/GoogleReviewsSection.d.ts

@@ -0,0 +1,3 @@
+import type { GoogleReviewsSectionConfig } from "../schemas";
+export type GoogleReviewsSectionProps = GoogleReviewsSectionConfig;
+export declare function GoogleReviewsSection(config: GoogleReviewsSectionProps): Promise<import("react/jsx-runtime").JSX.Element | null>;

package/dist/features/homepage/components/GoogleReviewsSection.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Heading, Section, Text } from "../../../ui";
+import { THEME_CONSTANTS } from "../../../tokens";
+import { siteSettingsRepository } from "../../admin/repository/site-settings.repository";
+import { fetchGoogleReviews } from "../lib/google-reviews-fetcher";
+// --- Star Rating -------------------------------------------------------------
+function StarRating({ rating }) {
+    return (_jsx("div", { className: "flex items-center gap-0.5", "aria-label": `${rating} out of 5 stars`, children: [1, 2, 3, 4, 5].map((star) => (_jsx("svg", { className: `w-4 h-4 ${star <= rating ? "text-yellow-400" : "text-zinc-300 dark:text-zinc-600"}`, viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", children: _jsx("path", { d: "M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" }) }, star))) }));
+}
+// --- Google Logo Badge -------------------------------------------------------
+function GoogleBadge() {
+    return (_jsxs("span", { className: "inline-flex items-center gap-1 text-xs text-zinc-500 dark:text-zinc-400", children: [_jsxs("svg", { className: "w-3.5 h-3.5", viewBox: "0 0 24 24", "aria-hidden": "true", children: [_jsx("path", { fill: "#4285F4", d: "M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" }), _jsx("path", { fill: "#34A853", d: "M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" }), _jsx("path", { fill: "#FBBC05", d: "M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" }), _jsx("path", { fill: "#EA4335", d: "M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" })] }), "Posted on Google"] }));
+}
+// --- Review Card -------------------------------------------------------------
+function ReviewCard({ review, showRating, showDate, }) {
+    const dateStr = showDate
+        ? new Date(review.time * 1000).toLocaleDateString("en-IN", {
+            year: "numeric",
+            month: "short",
+            day: "numeric",
+        })
+        : null;
+    return (_jsxs("div", { className: "flex flex-col gap-3 p-4 rounded-xl bg-[var(--appkit-color-surface)] shadow-sm border border-[var(--appkit-color-border)]", children: [_jsxs("div", { className: "flex items-center gap-3", children: [review.authorPhotoUrl ? (_jsx("img", { src: review.authorPhotoUrl, alt: review.authorName, className: "w-9 h-9 rounded-full object-cover flex-shrink-0", loading: "lazy", referrerPolicy: "no-referrer" })) : (_jsx("div", { className: "w-9 h-9 rounded-full bg-[var(--appkit-color-primary)] flex items-center justify-center flex-shrink-0", children: _jsx("span", { className: "text-white text-sm font-bold", children: review.authorName.charAt(0).toUpperCase() }) })), _jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "text-sm font-semibold truncate", children: review.authorName }), dateStr && (_jsx("p", { className: "text-xs text-zinc-500 dark:text-zinc-400", children: dateStr }))] })] }), showRating && _jsx(StarRating, { rating: review.rating }), review.text && (_jsx("p", { className: "text-sm leading-relaxed text-zinc-700 dark:text-zinc-300 line-clamp-4", children: review.text })), _jsx(GoogleBadge, {})] }));
+}
+// --- Empty / Not Configured States -------------------------------------------
+function NotConfiguredState() {
+    return (_jsxs("div", { className: "flex flex-col items-center justify-center py-16 text-zinc-400 text-sm", children: [_jsxs("svg", { className: "w-10 h-10 mb-3", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [_jsx("circle", { cx: "12", cy: "12", r: "10" }), _jsx("path", { d: "M12 8v4m0 4h.01" })] }), "Google Reviews not configured. Add your Google Maps API key in Site Settings."] }));
+}
+function EmptyState() {
+    return (_jsxs("div", { className: "flex flex-col items-center justify-center py-16 text-zinc-400 text-sm", children: [_jsx("svg", { className: "w-10 h-10 mb-3", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: _jsx("path", { d: "M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" }) }), "No reviews yet."] }));
+}
+export async function GoogleReviewsSection(config) {
+    const { placeId: configPlaceId, maxReviews = 6, minRating = 0, layout = "grid", showRating = true, showDate = true, linkToGoogleMaps = true, googleMapsUrl, } = config;
+    const { themed } = THEME_CONSTANTS;
+    // Get credentials from site settings
+    const credentials = await siteSettingsRepository
+        .getDecryptedCredentials()
+        .catch(() => ({}));
+    const apiKey = credentials.googleMapsApiKey ?? "";
+    if (!apiKey) {
+        return (_jsx(Section, { className: `py-12 ${themed.bgPrimary}`, children: _jsx("div", { className: "w-full max-w-7xl mx-auto px-4", children: _jsx(NotConfiguredState, {}) }) }));
+    }
+    const placeId = configPlaceId || credentials.googlePlaceId || "";
+    if (!placeId) {
+        return null;
+    }
+    let reviews = [];
+    let aggregateRating = 0;
+    let totalRatings = 0;
+    try {
+        const result = await fetchGoogleReviews(placeId, apiKey, maxReviews, minRating);
+        reviews = result.reviews;
+        aggregateRating = result.aggregateRating;
+        totalRatings = result.totalRatings;
+    }
+    catch {
+        // Fail silently — empty state shown
+    }
+    const gridClass = layout === "carousel"
+        ? "flex gap-4 overflow-x-auto pb-2 snap-x snap-mandatory"
+        : "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4";
+    const cardClass = layout === "carousel" ? "flex-shrink-0 w-72 snap-start" : "";
+    const mapsHref = googleMapsUrl || (placeId ? `https://search.google.com/local/reviews?placeid=${placeId}` : "");
+    return (_jsx(Section, { className: `py-12 ${themed.bgPrimary}`, children: _jsxs("div", { className: "w-full max-w-7xl mx-auto px-4", children: [_jsxs("div", { className: "mb-8 flex items-end justify-between gap-4", children: [_jsxs("div", { children: [_jsx(Heading, { level: 2, children: "What Our Customers Say" }), aggregateRating > 0 && (_jsxs("div", { className: "flex items-center gap-2 mt-1", children: [_jsx(StarRating, { rating: Math.round(aggregateRating) }), _jsxs(Text, { size: "sm", variant: "muted", children: [aggregateRating.toFixed(1), " \u00B7 ", totalRatings.toLocaleString(), " reviews"] })] }))] }), linkToGoogleMaps && mapsHref && (_jsx("a", { href: mapsHref, target: "_blank", rel: "noopener noreferrer", className: "shrink-0 text-sm font-medium text-blue-600 dark:text-blue-400 hover:underline", children: "View on Google \u2192" }))] }), reviews.length === 0 ? (_jsx(EmptyState, {})) : (_jsx("div", { className: gridClass, children: reviews.map((review, i) => (_jsx("div", { className: cardClass, children: _jsx(ReviewCard, { review: review, showRating: showRating, showDate: showDate }) }, `${review.authorName}-${i}`))) }))] }) }));
+}

package/dist/features/homepage/components/HeroCarousel.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useEffect, useRef, useCallback } from "react";
 import { useMediaQuery } from "../../../react";
 import { THEME_CONSTANTS } from "../../../tokens";
@@ -7,7 +7,7 @@ import { Button, Div, Heading, Row, Section, Span, Text } from "../../../ui";
 import { MediaImage } from "../../media/MediaImage";
 import { MediaVideo } from "../../media/MediaVideo";
 import { useHeroCarousel } from "../hooks/useHeroCarousel";
-const { flex, position, homepage } = THEME_CONSTANTS;
+const { flex, position } = THEME_CONSTANTS;
 function navigate(href, push) {
     if (push) {
         push(href);
@@ -16,6 +16,102 @@ function navigate(href, push) {
         window.location.href = href;
     }
 }
+function resolveZoneToGrid(zone) {
+    const row = zone <= 3 ? 1 : 2;
+    const col = zone <= 3 ? zone : zone - 3;
+    return { gridRow: row, gridColumn: col };
+}
+function getHoverClass(effect) {
+    if (!effect || effect === "none")
+        return "";
+    if (effect === "scale")
+        return "hover:scale-105";
+    if (effect === "glow")
+        return "hover:shadow-[0_0_24px_6px_rgba(255,255,255,0.25)]";
+    if (effect === "color")
+        return "hover:brightness-110";
+    return "";
+}
+function getSlideHeightClass(height) {
+    if (height === "viewport")
+        return "min-h-screen";
+    if (height === "tall")
+        return "min-h-[80vh]";
+    return "min-h-[60vh] md:min-h-[clamp(420px,72vh,680px)]";
+}
+/** Renders the slide background — image, video, solid colour, or gradient. */
+function SlideBackground({ bg, legacy, mobileLegacy, isMobile, priority, }) {
+    const effectiveBg = bg ?? (legacy ? { type: legacy.type, url: legacy.url } : undefined);
+    const mobileUrl = effectiveBg?.mobileUrl ?? (isMobile && mobileLegacy ? mobileLegacy.url : undefined);
+    const src = mobileUrl ?? effectiveBg?.url ?? "";
+    if (!effectiveBg) {
+        return _jsx(Div, { className: `${position.fill} bg-zinc-900` });
+    }
+    if (effectiveBg.type === "color") {
+        const bg_color = effectiveBg.color ?? "var(--appkit-color-primary)";
+        return _jsx(Div, { className: position.fill, style: { backgroundColor: bg_color } });
+    }
+    if (effectiveBg.type === "gradient") {
+        const from = effectiveBg.gradientFrom ?? "var(--appkit-color-primary)";
+        const to = effectiveBg.gradientTo ?? "var(--appkit-color-secondary)";
+        const angle = effectiveBg.gradientAngle ?? 135;
+        return (_jsx(Div, { className: position.fill, style: { background: `linear-gradient(${angle}deg, ${from}, ${to})` } }));
+    }
+    if (effectiveBg.type === "video") {
+        return (_jsxs(_Fragment, { children: [_jsx(MediaVideo, { src: src, thumbnailUrl: effectiveBg.thumbnail ?? legacy?.thumbnail, alt: "", autoPlayMuted: true, loop: true, controls: false }), effectiveBg.dimOverlay?.enabled && (_jsx(Div, { className: position.fill, style: { backgroundColor: `rgba(0,0,0,${(effectiveBg.dimOverlay.opacity ?? 0) / 100})` } }))] }));
+    }
+    return (_jsxs(_Fragment, { children: [_jsx(MediaImage, { src: src, alt: "", size: "hero", priority: priority }), effectiveBg.dimOverlay?.enabled && (_jsx(Div, { className: position.fill, style: { backgroundColor: `rgba(0,0,0,${(effectiveBg.dimOverlay.opacity ?? 0) / 100})` } }))] }));
+}
+/** Renders the background of a card (image, video, color, gradient). */
+function CardBackground({ bg }) {
+    if (bg.type === "color") {
+        return (_jsx(Div, { className: position.fill, style: { backgroundColor: bg.color ?? "var(--appkit-color-surface)" } }));
+    }
+    if (bg.type === "gradient") {
+        const from = bg.gradientFrom ?? "var(--appkit-color-primary)";
+        const to = bg.gradientTo ?? "var(--appkit-color-secondary)";
+        const angle = bg.gradientAngle ?? 135;
+        return (_jsx(Div, { className: position.fill, style: { background: `linear-gradient(${angle}deg, ${from}, ${to})` } }));
+    }
+    if (bg.type === "image" && bg.url) {
+        return _jsx(MediaImage, { src: bg.url, alt: "", size: "card" });
+    }
+    return null;
+}
+function CarouselCardRenderer({ card, isMobile, push, }) {
+    const mobileZone = card.mobileZone;
+    const gridPos = isMobile && mobileZone
+        ? { gridRow: mobileZone <= 3 ? 1 : 2, gridColumn: mobileZone <= 3 ? mobileZone : mobileZone - 3 }
+        : resolveZoneToGrid(card.zone);
+    const hoverClass = getHoverClass(card.hover?.effect);
+    const textAlign = card.content?.textAlign ?? "left";
+    const textAlignClass = textAlign === "center" ? "text-center" : textAlign === "right" ? "text-right" : "text-left";
+    return (_jsxs(Div, { className: `relative rounded-lg overflow-hidden shadow-lg transition-all duration-300 ${hoverClass}`, style: {
+            gridRow: String(gridPos.gridRow),
+            gridColumn: String(gridPos.gridColumn),
+            minHeight: isMobile ? 100 : 140,
+        }, children: [_jsx(CardBackground, { bg: card.background }), !card.isButtonOnly && (_jsxs(Div, { className: `${position.fill} flex flex-col justify-end bg-gradient-to-t from-black/80 via-black/30 to-transparent p-2 md:p-6 ${textAlignClass}`, children: [card.content?.eyebrow && (_jsx(Text, { className: "text-[10px] md:text-xs !text-white/70 mb-0.5 uppercase tracking-wider drop-shadow-sm", children: card.content.eyebrow })), card.content?.subtitle && (_jsx(Text, { className: "hidden md:block text-xs md:text-sm !text-white/90 mb-0.5 md:mb-2 drop-shadow-sm", children: card.content.subtitle })), card.content?.title && (_jsx(Heading, { level: 2, className: `text-[11px] md:text-2xl lg:text-3xl font-bold mb-0.5 md:mb-3 drop-shadow-md ${THEME_CONSTANTS.utilities.textClamp2}`, style: { color: card.content.textColor ?? "#ffffff" }, children: card.content.title })), card.content?.description && (_jsx(Text, { className: `text-[10px] md:text-sm !text-white/80 mb-1 md:mb-4 ${THEME_CONSTANTS.utilities.textClamp1} drop-shadow-sm`, children: card.content.description })), (card.buttons?.length ?? 0) > 0 && (_jsx(Row, { wrap: true, gap: "xs", className: "md:gap-2", children: (card.buttons ?? []).map((btn, i) => {
+                            const variant = btn.variant === "link" || btn.variant === "ghost"
+                                ? "ghost"
+                                : btn.variant;
+                            return (_jsx(Button, { variant: variant, size: "sm", onClick: () => {
+                                    if (btn.openInNewTab) {
+                                        window.open(btn.href, "_blank", "noopener,noreferrer");
+                                    }
+                                    else {
+                                        navigate(btn.href, push);
+                                    }
+                                }, children: btn.text }, btn.id ?? i));
+                        }) }))] })), card.isButtonOnly && card.buttons?.[0] && (_jsx(Button, { variant: "ghost", className: `${position.fill} ${flex.center} font-semibold text-white hover:bg-black/20 transition-colors rounded-none p-0`, onClick: () => {
+                    const btn = card.buttons[0];
+                    if (btn.openInNewTab) {
+                        window.open(btn.href, "_blank", "noopener,noreferrer");
+                    }
+                    else {
+                        navigate(btn.href, push);
+                    }
+                }, children: _jsx(Span, { className: "text-lg md:text-2xl", children: card.buttons[0].text }) }))] }));
+}
 export function HeroCarousel({ initialSlides, push } = {}) {
     const [currentSlide, setCurrentSlide] = useState(0);
     const [isPaused, setIsPaused] = useState(false);
@@ -29,6 +125,9 @@ export function HeroCarousel({ initialSlides, push } = {}) {
         ?.filter((s) => s.active)
         ?.sort((a, b) => a.order - b.order)
         ?.slice(0, 5) || [];
+    const currentSlideData = slides[currentSlide];
+    const autoplayDelay = currentSlideData?.settings?.autoplayDelayMs ?? 4000;
+    const heightClass = getSlideHeightClass(currentSlideData?.settings?.height);
     const goToSlide = useCallback((index) => {
         const el = slidesRef.current;
         if (!el)
@@ -36,9 +135,7 @@ export function HeroCarousel({ initialSlides, push } = {}) {
         setCurrentSlide(index);
         isScrollingRef.current = true;
         el.scrollTo({ left: index * el.offsetWidth, behavior: "smooth" });
-        setTimeout(() => {
-            isScrollingRef.current = false;
-        }, 600);
+        setTimeout(() => { isScrollingRef.current = false; }, 600);
     }, []);
     const goNext = useCallback(() => goToSlide((currentSlide + 1) % slides.length), [currentSlide, slides.length, goToSlide]);
     const goPrev = useCallback(() => goToSlide((currentSlide - 1 + slides.length) % slides.length), [currentSlide, slides.length, goToSlide]);
@@ -55,29 +152,9 @@ export function HeroCarousel({ initialSlides, push } = {}) {
     useEffect(() => {
         if (slides.length <= 1 || isPaused || prefersReducedMotion)
             return;
-        const interval = setInterval(goNext, 4000);
+        const interval = setInterval(goNext, autoplayDelay);
         return () => clearInterval(interval);
-    }, [slides.length, isPaused, prefersReducedMotion, goNext]);
-    if (isLoading) {
-        return (_jsx(Div, { className: `relative w-full ${homepage.heroMinH} ${THEME_CONSTANTS.themed.bgTertiary} animate-pulse`, children: _jsx(Div, { className: `${position.fill} ${flex.center}`, children: _jsx(Text, { variant: "secondary", children: "Loading..." }) }) }));
-    }
-    if (!slides || slides.length === 0) {
-        return (_jsxs(Div, { className: `relative w-full ${homepage.heroMinH} bg-gradient-to-br from-primary/10 to-secondary/10 ${flex.center} flex-col gap-4`, children: [_jsx(Heading, { level: 2, className: "text-2xl font-bold text-primary", children: "Coming Soon" }), _jsx(Text, { variant: "secondary", className: "text-center max-w-md px-4", children: "Amazing deals are on their way. Stay tuned!" })] }));
-    }
-    const getBackgroundStyle = (card) => {
-        const { type, value } = card.background;
-        if (type === "transparent")
-            return { background: "transparent" };
-        if (type === "color")
-            return { backgroundColor: value };
-        if (type === "gradient")
-            return { background: value };
-        return {};
-    };
-    const getGridPosition = (card) => ({
-        gridRow: String(card.gridRow),
-        gridColumn: isMobile ? "1" : String(card.gridCol),
-    });
+    }, [slides.length, isPaused, prefersReducedMotion, goNext, autoplayDelay]);
     const handleKeyDown = (e) => {
         if (e.key === "ArrowRight")
             goNext();
@@ -88,63 +165,30 @@ export function HeroCarousel({ initialSlides, push } = {}) {
             setIsPaused((p) => !p);
         }
     };
-    return (_jsxs(Section, { ref: sectionRef, className: `relative w-full ${homepage.heroMinH} overflow-hidden`, "aria-roledescription": "carousel", "aria-label": "Hero carousel", onKeyDown: handleKeyDown, onMouseEnter: () => setIsPaused(true), onMouseLeave: () => setIsPaused(false), onFocus: () => setIsPaused(true), onBlur: () => setIsPaused(false), tabIndex: 0, children: [_jsx(Div, { "aria-live": "polite", "aria-atomic": "true", className: "sr-only", children: `Slide ${currentSlide + 1} of ${slides.length}` }), _jsx(Div, { className: position.fill, children: _jsx(Div, { ref: slidesRef, onScroll: handleSlidesScroll, className: "flex h-full overflow-x-auto scroll-smooth snap-x snap-mandatory [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", style: { gap: 0 }, children: slides.map((slide, slideIndex) => (_jsxs(Div, { className: "snap-start flex-none w-full relative self-stretch bg-zinc-900", children: [_jsxs(Div, { className: position.fill, children: [slide.media.type === "image" ? (_jsx(MediaImage, { src: isMobile && slide.mobileMedia
-                                            ? slide.mobileMedia.url
-                                            : slide.media.url, alt: slide.media.alt, size: "hero", priority: slideIndex === 0 })) : (_jsx(MediaVideo, { src: isMobile && slide.mobileMedia
-                                            ? slide.mobileMedia.url
-                                            : slide.media.url, thumbnailUrl: slide.media.thumbnail, alt: slide.media.alt, autoPlayMuted: true, loop: true, controls: false })), _jsx(Div, { className: `${position.fill} bg-black/10` })] }), slide.overlay ? (_jsxs(Div, { className: `${position.fill} ${flex.center} flex-col text-center px-6 md:px-16 lg:px-32`, children: [slide.overlay.subtitle && (_jsx(Text, { className: "stagger-1 text-xs md:text-sm !text-white/80 mb-1 md:mb-2 drop-shadow-sm uppercase tracking-widest", children: slide.overlay.subtitle })), slide.overlay.title && (_jsx(Heading, { level: 1, className: "stagger-2 font-display text-4xl md:text-6xl lg:text-8xl !text-white drop-shadow-2xl mb-2 md:mb-4", children: slide.overlay.title })), slide.overlay.description && (_jsx(Text, { className: "stagger-3 text-sm md:text-lg lg:text-xl !text-white/90 mb-4 md:mb-8 drop-shadow-sm max-w-2xl mx-auto", children: slide.overlay.description })), slide.overlay.button && (_jsx(Div, { className: "stagger-4", children: _jsx(Button, { variant: slide.overlay.button.variant, size: "sm", onClick: () => {
-                                                const btn = slide.overlay.button;
-                                                if (btn.openInNewTab) {
-                                                    window.open(btn.link, "_blank", "noopener,noreferrer");
-                                                }
-                                                else {
-                                                    navigate(btn.link, push);
-                                                }
-                                            }, children: slide.overlay.button.text }) }))] })) : (
-                            /* Grid Overlay with Cards */
-                            _jsx(Div, { className: `${position.fill} grid gap-2 md:gap-4 p-4 md:p-8`, style: {
-                                    gridTemplateRows: "repeat(2, 1fr)",
-                                    gridTemplateColumns: isMobile ? "1fr" : "repeat(3, 1fr)",
-                                    justifyItems: isMobile ? "center" : undefined,
-                                    alignItems: isMobile ? "center" : undefined,
-                                }, children: slide.cards.map((card) => (_jsxs(Div, { className: "relative rounded-lg overflow-hidden shadow-lg transition-transform hover:scale-105", style: {
-                                        ...getGridPosition(card),
-                                        ...getBackgroundStyle(card),
-                                        width: card.sizing?.widthPct
-                                            ? `${isMobile ? Math.min(card.sizing.widthPct, 65) : card.sizing.widthPct}%`
-                                            : isMobile
-                                                ? "65%"
-                                                : "100%",
-                                        height: card.sizing?.heightPct
-                                            ? `${isMobile ? Math.min(card.sizing.heightPct, 55) : card.sizing.heightPct}%`
-                                            : isMobile
-                                                ? "55%"
-                                                : "100%",
-                                        justifySelf: "center",
-                                        alignSelf: "center",
-                                    }, children: [card.background.type === "image" &&
-                                            card.background.value && (_jsx(MediaImage, { src: card.background.value, alt: "", size: "card" })), !card.isButtonOnly && (_jsxs(Div, { className: `${position.fill} flex flex-col justify-end bg-gradient-to-t from-black/80 via-black/30 to-transparent ${card.sizing?.padding === "none"
-                                                ? "p-0"
-                                                : card.sizing?.padding === "sm"
-                                                    ? "p-1.5 md:p-3"
-                                                    : card.sizing?.padding === "lg"
-                                                        ? "p-3 md:p-8"
-                                                        : "p-2 md:p-6"}`, children: [card.content?.subtitle && (_jsx(Text, { className: "hidden md:block text-xs md:text-sm !text-white/90 mb-0.5 md:mb-2 drop-shadow-sm", children: card.content.subtitle })), card.content?.title && (_jsx(Heading, { level: 2, className: `text-[11px] md:text-2xl lg:text-3xl font-bold !text-white mb-0.5 md:mb-3 ${THEME_CONSTANTS.utilities.textClamp1} md:${THEME_CONSTANTS.utilities.textClamp2} drop-shadow-md`, children: card.content.title })), card.content?.description && (_jsx(Text, { className: `text-[10px] md:text-sm lg:text-base !text-white/80 mb-1 md:mb-4 ${THEME_CONSTANTS.utilities.textClamp1} drop-shadow-sm`, children: card.content.description })), (card.buttons?.length ?? 0) > 0 && (_jsx(Row, { wrap: true, gap: "xs", className: "md:gap-2", children: (card.buttons ?? []).map((btn) => (_jsx(Button, { variant: btn.variant, size: "sm", onClick: () => {
-                                                            if (btn.openInNewTab) {
-                                                                window.open(btn.link, "_blank", "noopener,noreferrer");
-                                                            }
-                                                            else {
-                                                                navigate(btn.link, push);
-                                                            }
-                                                        }, children: btn.text }, btn.id))) }))] })), card.isButtonOnly && card.buttons?.[0] && (_jsx(Button, { variant: "ghost", className: `${position.fill} ${flex.center} font-semibold text-white hover:bg-black/20 transition-colors rounded-none p-0`, onClick: () => {
-                                                const btn = card.buttons[0];
-                                                if (btn.openInNewTab) {
-                                                    window.open(btn.link, "_blank", "noopener,noreferrer");
-                                                }
-                                                else {
-                                                    navigate(btn.link, push);
-                                                }
-                                            }, children: _jsx(Span, { className: "text-lg md:text-2xl", children: card.buttons[0].text }) }))] }, card.id))) }))] }, slide.id))) }) }), slides.length > 1 && (_jsx(Div, { className: "absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-2 z-10", children: slides.map((_, index) => (_jsx(Button, { variant: "ghost", className: `relative overflow-hidden rounded-full transition-all duration-500 p-0 !min-h-0 ${index === currentSlide
+    if (isLoading) {
+        return (_jsx(Div, { className: `relative w-full ${heightClass} ${THEME_CONSTANTS.themed.bgTertiary} animate-pulse`, children: _jsx(Div, { className: `${position.fill} ${flex.center}`, children: _jsx(Text, { variant: "secondary", children: "Loading..." }) }) }));
+    }
+    if (!slides || slides.length === 0) {
+        return (_jsxs(Div, { className: `relative w-full min-h-[260px] md:min-h-[60vh] bg-gradient-to-br from-primary/10 to-secondary/10 ${flex.center} flex-col gap-4`, children: [_jsx(Heading, { level: 2, className: "text-2xl font-bold text-primary", children: "Coming Soon" }), _jsx(Text, { variant: "secondary", className: "text-center max-w-md px-4", children: "Amazing deals are on their way. Stay tuned!" })] }));
+    }
+    return (_jsxs(Section, { ref: sectionRef, className: `relative w-full ${heightClass} overflow-hidden`, "aria-roledescription": "carousel", "aria-label": "Hero carousel", onKeyDown: handleKeyDown, onMouseEnter: () => setIsPaused(true), onMouseLeave: () => setIsPaused(false), onFocus: () => setIsPaused(true), onBlur: () => setIsPaused(false), tabIndex: 0, children: [_jsx(Div, { "aria-live": "polite", "aria-atomic": "true", className: "sr-only", children: `Slide ${currentSlide + 1} of ${slides.length}` }), _jsx(Div, { className: position.fill, children: _jsx(Div, { ref: slidesRef, onScroll: handleSlidesScroll, className: "flex h-full overflow-x-auto scroll-smooth snap-x snap-mandatory [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", style: { gap: 0 }, children: slides.map((slide, slideIndex) => {
+                        const slideHeightClass = getSlideHeightClass(slide.settings?.height);
+                        const hasCards = slide.cards && slide.cards.length > 0;
+                        return (_jsxs(Div, { className: `snap-start flex-none w-full relative self-stretch bg-zinc-900 ${slideHeightClass}`, children: [_jsx(Div, { className: position.fill, children: _jsx(SlideBackground, { bg: slide.background, legacy: slide.media, mobileLegacy: slide.mobileMedia, isMobile: isMobile, priority: slideIndex === 0 }) }), slide.overlay && (_jsxs(Div, { className: `${position.fill} ${flex.center} flex-col text-center px-6 md:px-16 lg:px-32`, children: [slide.overlay.subtitle && (_jsx(Text, { className: "stagger-1 text-xs md:text-sm !text-white/80 mb-1 md:mb-2 drop-shadow-sm uppercase tracking-widest", children: slide.overlay.subtitle })), slide.overlay.title && (_jsx(Heading, { level: 1, className: "stagger-2 font-display text-4xl md:text-6xl lg:text-8xl !text-white drop-shadow-2xl mb-2 md:mb-4", children: slide.overlay.title })), slide.overlay.description && (_jsx(Text, { className: "stagger-3 text-sm md:text-lg lg:text-xl !text-white/90 mb-4 md:mb-8 drop-shadow-sm max-w-2xl mx-auto", children: slide.overlay.description })), slide.overlay.button && (_jsx(Div, { className: "stagger-4", children: _jsx(Button, { variant: slide.overlay.button.variant, size: "sm", onClick: () => {
+                                                    const btn = slide.overlay.button;
+                                                    if (btn.openInNewTab) {
+                                                        window.open(btn.link, "_blank", "noopener,noreferrer");
+                                                    }
+                                                    else {
+                                                        navigate(btn.link, push);
+                                                    }
+                                                }, children: slide.overlay.button.text }) }))] })), hasCards && (_jsx(Div, { className: `${position.fill} grid gap-2 md:gap-4 p-4 md:p-8`, style: {
+                                        gridTemplateRows: "repeat(2, 1fr)",
+                                        gridTemplateColumns: isMobile ? "1fr" : "repeat(3, 1fr)",
+                                        alignContent: "center",
+                                        alignItems: "stretch",
+                                    }, children: slide.cards.slice(0, 6).map((card) => (_jsx(CarouselCardRenderer, { card: card, isMobile: isMobile, push: push }, card.id))) }))] }, slide.id));
+                    }) }) }), slides.length > 1 && (_jsx(Div, { className: "absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-2 z-10", children: slides.map((_, index) => (_jsx(Button, { variant: "ghost", className: `relative overflow-hidden rounded-full transition-all duration-500 p-0 !min-h-0 ${index === currentSlide
                         ? THEME_CONSTANTS.carousel.dotActive
                         : `${THEME_CONSTANTS.carousel.dotInactive} hover:bg-white/75`}`, onClick: () => goToSlide(index), "aria-label": `Go to slide ${index + 1}`, children: index === currentSlide && (_jsx(Span, { className: "absolute inset-y-0 left-0 bg-black/20 rounded-full animate-[progress-fill_4s_linear_forwards]", "aria-hidden": "true" })) }, index))) })), slides.length > 1 && (_jsxs(Div, { className: "absolute bottom-4 right-4 z-20 flex gap-2", children: [_jsx(Button, { variant: "ghost", className: `p-0 ${THEME_CONSTANTS.carousel.arrow}`, onClick: goPrev, "aria-label": "Previous slide", children: _jsx("svg", { className: "w-7 h-7", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2.5, d: "M15 19l-7-7 7-7" }) }) }), _jsx(Button, { variant: "ghost", className: `p-0 ${THEME_CONSTANTS.carousel.arrow}`, onClick: goNext, "aria-label": "Next slide", children: _jsx("svg", { className: "w-7 h-7", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2.5, d: "M9 5l7 7-7 7" }) }) })] }))] }));
 }