pb-sxp-ui 1.20.13 → 1.20.15

package/lib/core/components/StructurePage/index.js

@@ -0,0 +1,702 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const hooks_1 = require("../../hooks");
+const FormatImage_1 = tslib_1.__importDefault(require("../SxpPageRender/FormatImage"));
+const RESOLVER = {};
+try {
+    const materialsModule = require('../../materials/sxp');
+    Object.values(materialsModule).forEach((v) => {
+        var _a;
+        if ((_a = v === null || v === void 0 ? void 0 : v.extend) === null || _a === void 0 ? void 0 : _a.type) {
+            RESOLVER[v.extend.type] = v;
+        }
+    });
+}
+catch (error) {
+    console.warn('Failed to load materials for StructurePage:', error);
+}
+const baseStyles = {
+    container: {
+        backgroundColor: '#000',
+        overflowY: 'auto',
+        overflowX: 'hidden',
+        padding: 0,
+        boxSizing: 'border-box'
+    },
+    section: {
+        width: '100%',
+        position: 'relative',
+        boxSizing: 'border-box'
+    },
+    heroSection: {
+        width: '100%',
+        height: 'auto',
+        position: 'relative',
+        overflow: 'hidden',
+        backgroundColor: '#000'
+    },
+    heroTopText: {
+        width: '100%',
+        padding: '20px',
+        backgroundColor: '#fff',
+        color: '#000',
+        fontSize: '16px',
+        fontWeight: 'bold',
+        textAlign: 'center',
+        boxSizing: 'border-box'
+    },
+    heroImageContainer: {
+        width: '100%',
+        position: 'relative',
+        overflow: 'hidden'
+    },
+    heroImage: {
+        width: '100%',
+        height: 'auto',
+        display: 'block',
+        objectFit: 'cover'
+    },
+    heroVideo: {
+        width: '100%',
+        height: 'auto',
+        display: 'block',
+        objectFit: 'cover'
+    },
+    heroOverlay: {
+        position: 'absolute',
+        bottom: 0,
+        left: 0,
+        right: 0,
+        padding: '40px 20px',
+        background: 'linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 100%)',
+        color: '#fff',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center'
+    },
+    heroButton: {
+        padding: '12px 30px',
+        backgroundColor: '#fff',
+        color: '#000',
+        border: 'none',
+        fontSize: '14px',
+        fontWeight: 500,
+        cursor: 'pointer',
+        textTransform: 'uppercase'
+    },
+    carouselSection: {
+        width: '100%',
+        position: 'relative'
+    },
+    carouselImageContainer: {
+        width: '100%',
+        height: 'auto',
+        position: 'relative',
+        overflow: 'hidden'
+    },
+    carouselContainer: {
+        display: 'flex',
+        transition: 'transform 0.5s ease-in-out',
+        width: '100%'
+    },
+    carouselSlide: {
+        minWidth: '100%',
+        position: 'relative'
+    },
+    carouselImage: {
+        width: '100%',
+        height: 'auto',
+        display: 'block',
+        objectFit: 'cover'
+    },
+    carouselVideo: {
+        width: '100%',
+        height: 'auto',
+        display: 'block',
+        objectFit: 'cover'
+    },
+    carouselInfoSection: {
+        width: '100%',
+        padding: '20px',
+        backgroundColor: '#000',
+        color: '#fff',
+        textAlign: 'center'
+    },
+    carouselText: {
+        fontSize: '16px',
+        fontWeight: 'normal',
+        marginBottom: '15px',
+        color: '#fff'
+    },
+    carouselButton: {
+        padding: '10px 25px',
+        backgroundColor: '#fff',
+        color: '#000',
+        border: '1px solid #fff',
+        fontSize: '13px',
+        fontWeight: 500,
+        cursor: 'pointer',
+        textTransform: 'uppercase'
+    },
+    arrowButton: {
+        position: 'absolute',
+        top: '50%',
+        transform: 'translateY(-50%)',
+        width: '40px',
+        height: '40px',
+        backgroundColor: 'rgba(255,255,255,0.8)',
+        border: 'none',
+        borderRadius: '50%',
+        fontSize: '18px',
+        cursor: 'pointer',
+        zIndex: 10,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center'
+    },
+    highlightSection: {
+        width: '100%',
+        position: 'relative',
+        backgroundColor: '#000'
+    },
+    highlightImageContainer: {
+        width: '100%',
+        aspectRatio: '1/1',
+        position: 'relative',
+        overflow: 'hidden'
+    },
+    highlightImage: {
+        width: '100%',
+        height: '100%',
+        objectFit: 'cover',
+        display: 'block'
+    },
+    highlightInfoSection: {
+        width: '100%',
+        padding: '20px',
+        backgroundColor: '#000',
+        color: '#fff',
+        textAlign: 'center'
+    },
+    highlightTitle: {
+        fontSize: '18px',
+        fontWeight: 'bold',
+        marginBottom: '10px',
+        textAlign: 'center',
+        color: '#fff'
+    },
+    highlightDesc: {
+        fontSize: '14px',
+        marginBottom: '15px',
+        textAlign: 'center',
+        lineHeight: '1.5',
+        color: '#ccc'
+    },
+    highlightButton: {
+        padding: '10px 25px',
+        backgroundColor: 'transparent',
+        color: '#fff',
+        border: '1px solid #fff',
+        fontSize: '13px',
+        fontWeight: 500,
+        cursor: 'pointer',
+        textTransform: 'uppercase'
+    },
+    productGrid: {
+        display: 'grid',
+        gridTemplateColumns: '50% 50%',
+        gridAutoRows: 'auto',
+        gap: '0',
+        width: '100%',
+        backgroundColor: '#000',
+        boxSizing: 'border-box',
+        margin: 0,
+        padding: 0,
+        overflow: 'hidden'
+    },
+    productItem: {
+        position: 'relative',
+        backgroundColor: '#000',
+        display: 'block',
+        boxSizing: 'border-box',
+        width: '100%',
+        minWidth: 0,
+        overflow: 'hidden'
+    },
+    productImageContainer: {
+        width: '100%',
+        paddingBottom: '100%',
+        position: 'relative',
+        overflow: 'hidden'
+    },
+    productImage: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        width: '100%',
+        height: '100%',
+        objectFit: 'cover',
+        display: 'block'
+    },
+    productCtaContainer: {
+        width: '100%',
+        padding: '15px',
+        backgroundColor: '#000',
+        textAlign: 'center',
+        boxSizing: 'border-box'
+    },
+    productText: {
+        width: '100%',
+        padding: '15px',
+        backgroundColor: '#000',
+        color: '#fff',
+        textAlign: 'center',
+        fontSize: '14px',
+        fontWeight: 'normal',
+        boxSizing: 'border-box'
+    },
+    productButton: {
+        padding: '8px 20px',
+        backgroundColor: 'transparent',
+        color: '#fff',
+        border: '1px solid #fff',
+        fontSize: '12px',
+        fontWeight: 500,
+        cursor: 'pointer',
+        textTransform: 'uppercase',
+        whiteSpace: 'nowrap'
+    },
+    footerSection: {
+        width: '100%',
+        position: 'relative',
+        backgroundColor: '#000'
+    },
+    footerInfoSection: {
+        width: '100%',
+        padding: '20px',
+        backgroundColor: '#000',
+        color: '#fff',
+        textAlign: 'center'
+    },
+    footerText: {
+        fontSize: '18px',
+        fontWeight: 'normal',
+        marginBottom: '15px',
+        lineHeight: '1.4',
+        color: '#fff'
+    },
+    footerButton: {
+        padding: '10px 25px',
+        backgroundColor: 'transparent',
+        color: '#fff',
+        border: '1px solid #fff',
+        fontSize: '13px',
+        fontWeight: 500,
+        cursor: 'pointer',
+        textTransform: 'uppercase',
+        marginBottom: '20px',
+        display: 'inline-block'
+    },
+    footerImageContainer: {
+        width: '100%',
+        aspectRatio: '1/1',
+        overflow: 'hidden'
+    },
+    footerImage: {
+        width: '100%',
+        height: '100%',
+        objectFit: 'cover',
+        display: 'block'
+    }
+};
+const StructurePage = (_a) => {
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+    var { containerStyle, containerHeight = 664, containerWidth = 375, className = '', apiUrl = 'https://bff-be-dev.chatlabs.net/api/v1/recommend/list', requestBody, editorMode = false, multiCTAConfig: propMultiCTAConfig, videoPlayIcon: propVideoPlayIcon, isCmsMode = false, storyId, customHeaders } = _a, rest = tslib_1.__rest(_a, ["containerStyle", "containerHeight", "containerWidth", "className", "apiUrl", "requestBody", "editorMode", "multiCTAConfig", "videoPlayIcon", "isCmsMode", "storyId", "customHeaders"]);
+    const [data, setData] = (0, react_1.useState)(null);
+    const [loading, setLoading] = (0, react_1.useState)(true);
+    const [error, setError] = (0, react_1.useState)(null);
+    const [carouselIndex, setCarouselIndex] = (0, react_1.useState)(0);
+    const heroVideoRef = (0, react_1.useRef)(null);
+    const carouselVideoRefs = (0, react_1.useRef)([]);
+    const [isHeroVideoPaused, setIsHeroVideoPaused] = (0, react_1.useState)(false);
+    const [carouselVideoPausedStates, setCarouselVideoPausedStates] = (0, react_1.useState)([]);
+    const { schema } = (0, hooks_1.useEditor)();
+    const multiCTAConfig = (0, react_1.useMemo)(() => {
+        var _a;
+        return propMultiCTAConfig || ((_a = schema === null || schema === void 0 ? void 0 : schema.sxpPageConf) === null || _a === void 0 ? void 0 : _a.multiCTAConfig) || {};
+    }, [propMultiCTAConfig, (_b = schema === null || schema === void 0 ? void 0 : schema.sxpPageConf) === null || _b === void 0 ? void 0 : _b.multiCTAConfig]);
+    const DEFAULT_PAUSE_ICON = 'https://sxph5-uat.chatlabs.net/pb_static/06f28a2025c74c1cb49be6767316d827.png';
+    const videoPlayIcon = (0, react_1.useMemo)(() => {
+        var _a, _b;
+        if (propVideoPlayIcon)
+            return propVideoPlayIcon;
+        const configIcon = (_b = (_a = schema === null || schema === void 0 ? void 0 : schema.sxpPageConf) === null || _a === void 0 ? void 0 : _a.globalConfig) === null || _b === void 0 ? void 0 : _b.videoPlayIcon;
+        if (configIcon) {
+            if (configIcon.startsWith('http://') || configIcon.startsWith('https://')) {
+                return configIcon;
+            }
+            if (configIcon.startsWith('/')) {
+                return `${window.location.origin}${configIcon}`;
+            }
+            return configIcon;
+        }
+        return DEFAULT_PAUSE_ICON;
+    }, [propVideoPlayIcon, (_d = (_c = schema === null || schema === void 0 ? void 0 : schema.sxpPageConf) === null || _c === void 0 ? void 0 : _c.globalConfig) === null || _d === void 0 ? void 0 : _d.videoPlayIcon]);
+    const handleCtaClick = (0, react_1.useCallback)((link, interaction, productData, ctaData) => {
+        if (interaction) {
+            const { linkType, popupType, popupAni } = interaction;
+            if (linkType === 'popup' && popupType) {
+                if (productData && typeof window !== 'undefined' && window.setPopupDetailData) {
+                    const popupData = {
+                        video: {
+                            bindProduct: productData,
+                            bindProducts: [productData],
+                            bindCta: ctaData
+                        }
+                    };
+                    window.setPopupDetailData(popupData);
+                }
+                if (typeof window !== 'undefined' && window.sxpPopup) {
+                    if (popupAni && popupAni.name) {
+                        window.sxpPopup(popupType, popupAni);
+                    }
+                    else {
+                        window.sxpPopup(popupType);
+                    }
+                }
+                return;
+            }
+        }
+        if (link) {
+            window.open(link, '_blank');
+        }
+    }, []);
+    const mergeStyles = (0, react_1.useCallback)((baseStyle, configKey) => {
+        if (!editorMode || !multiCTAConfig[configKey]) {
+            return baseStyle;
+        }
+        const config = multiCTAConfig[configKey];
+        const styleKeys = [
+            'fontSize', 'color', 'textAlign', 'fontWeight',
+            'backgroundColor', 'padding', 'margin', 'borderRadius',
+            'showBorder', 'borderWidth', 'borderColor',
+            'buttonBackgroundColor', 'buttonTextColor', 'buttonWidth', 'buttonHeight'
+        ];
+        const styleConfig = Object.keys(config)
+            .filter(key => styleKeys.includes(key))
+            .reduce((obj, key) => {
+            obj[key] = config[key];
+            return obj;
+        }, {});
+        if (Object.keys(styleConfig).length === 0) {
+            return baseStyle;
+        }
+        const customStyle = {};
+        if (styleConfig.fontSize && typeof styleConfig.fontSize === 'number') {
+            customStyle.fontSize = `${styleConfig.fontSize}px`;
+        }
+        if (styleConfig.color && typeof styleConfig.color === 'string') {
+            customStyle.color = styleConfig.color;
+        }
+        if (styleConfig.textAlign && typeof styleConfig.textAlign === 'string') {
+            customStyle.textAlign = styleConfig.textAlign;
+        }
+        if (styleConfig.fontWeight && typeof styleConfig.fontWeight === 'number') {
+            customStyle.fontWeight = styleConfig.fontWeight;
+        }
+        if (styleConfig.backgroundColor && typeof styleConfig.backgroundColor === 'string') {
+            customStyle.backgroundColor = styleConfig.backgroundColor;
+        }
+        if (styleConfig.padding && typeof styleConfig.padding === 'string') {
+            customStyle.padding = styleConfig.padding;
+        }
+        if (styleConfig.margin && typeof styleConfig.margin === 'string') {
+            customStyle.margin = styleConfig.margin;
+        }
+        if (styleConfig.borderRadius && typeof styleConfig.borderRadius === 'number') {
+            customStyle.borderRadius = `${styleConfig.borderRadius}px`;
+        }
+        if (styleConfig.showBorder && styleConfig.borderWidth && typeof styleConfig.borderWidth === 'number') {
+            customStyle.border = `${styleConfig.borderWidth}px solid ${styleConfig.borderColor || '#d9d9d9'}`;
+        }
+        if (styleConfig.buttonBackgroundColor && typeof styleConfig.buttonBackgroundColor === 'string') {
+            customStyle.backgroundColor = styleConfig.buttonBackgroundColor;
+        }
+        if (styleConfig.buttonTextColor && typeof styleConfig.buttonTextColor === 'string') {
+            customStyle.color = styleConfig.buttonTextColor;
+        }
+        if (styleConfig.buttonWidth && typeof styleConfig.buttonWidth === 'number') {
+            customStyle.width = `${styleConfig.buttonWidth}px`;
+        }
+        if (styleConfig.buttonHeight && typeof styleConfig.buttonHeight === 'number') {
+            customStyle.height = `${styleConfig.buttonHeight}px`;
+        }
+        return Object.assign(Object.assign({}, baseStyle), customStyle);
+    }, [editorMode, multiCTAConfig]);
+    const renderCTA = (0, react_1.useCallback)((buttonKey, ctaData, productData, fallbackStyle) => {
+        var _a, _b, _c;
+        if (!ctaData) {
+            return null;
+        }
+        const config = multiCTAConfig[buttonKey];
+        const templateType = config === null || config === void 0 ? void 0 : config.templateType;
+        const interaction = config === null || config === void 0 ? void 0 : config.interaction;
+        if (editorMode && templateType && RESOLVER[templateType]) {
+            const TemplateComponent = RESOLVER[templateType];
+            const templateExtend = TemplateComponent === null || TemplateComponent === void 0 ? void 0 : TemplateComponent.extend;
+            if (templateExtend) {
+                const templateProps = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (_a = templateExtend.defaulSetting) === null || _a === void 0 ? void 0 : _a.props), { style: Object.assign(Object.assign(Object.assign({}, (_b = templateExtend.defaulSetting) === null || _b === void 0 ? void 0 : _b.style), mergeStyles(fallbackStyle || {}, buttonKey)), { marginBottom: 0, width: '100%' }), textStyle: (_c = templateExtend.defaulSetting) === null || _c === void 0 ? void 0 : _c.textStyle }), (productData && { bindProduct: productData })), { isTel: true }), rest);
+                return react_1.default.createElement(TemplateComponent, templateProps);
+            }
+        }
+        return (react_1.default.createElement("button", { style: mergeStyles(fallbackStyle || baseStyles.heroButton, buttonKey), onClick: () => handleCtaClick(ctaData === null || ctaData === void 0 ? void 0 : ctaData.link, interaction, productData, ctaData) }, ctaData.title));
+    }, [multiCTAConfig, editorMode, handleCtaClick, mergeStyles, rest]);
+    (0, react_1.useEffect)(() => {
+        const hasActualData = propMultiCTAConfig && (propMultiCTAConfig.heroSection ||
+            propMultiCTAConfig.carouselSection ||
+            propMultiCTAConfig.highlightRevealSection ||
+            propMultiCTAConfig.productGridSection ||
+            propMultiCTAConfig.footerSection);
+        if (editorMode && hasActualData && !isCmsMode) {
+            setLoading(false);
+            setError(null);
+            setData(propMultiCTAConfig);
+            return;
+        }
+        if (editorMode && data && !isCmsMode) {
+            return;
+        }
+        setLoading(true);
+        setError(null);
+        let finalApiUrl = apiUrl;
+        let bodyToSend = {};
+        if (isCmsMode) {
+            if (!storyId) {
+                console.error('[StructurePage CMS Mode] storyId is required but not provided');
+                setError('storyId is required in CMS mode');
+                setLoading(false);
+                return;
+            }
+            finalApiUrl = `${apiUrl}/api/console/ad/multiCta/rec/detail`;
+            bodyToSend = { storyId };
+        }
+        else {
+            const defaultBody = {
+                maxSize: 20,
+                defaultSize: 10,
+                type: 'story'
+            };
+            bodyToSend = requestBody ? Object.assign(Object.assign({}, defaultBody), requestBody) : defaultBody;
+        }
+        const headers = {
+            'Content-Type': 'application/json'
+        };
+        if (isCmsMode) {
+            if (customHeaders) {
+                Object.assign(headers, customHeaders);
+            }
+        }
+        else {
+            if (bodyToSend['x-app-id']) {
+                headers['x-app-id'] = bodyToSend['x-app-id'];
+                delete bodyToSend['x-app-id'];
+            }
+            if (bodyToSend['x-user-id']) {
+                headers['x-user-id'] = bodyToSend['x-user-id'];
+                delete bodyToSend['x-user-id'];
+            }
+            if (bodyToSend['tenant-id']) {
+                headers['tenant-id'] = bodyToSend['tenant-id'];
+                delete bodyToSend['tenant-id'];
+            }
+        }
+        fetch(finalApiUrl, {
+            method: 'POST',
+            headers,
+            body: JSON.stringify(bodyToSend),
+            credentials: 'include'
+        })
+            .then((res) => {
+            if (!res.ok) {
+                throw new Error(`HTTP error! status: ${res.status}`);
+            }
+            return res.json();
+        })
+            .then((result) => {
+            var _a, _b, _c, _d;
+            if (result.code === '0' || result.code === '00000') {
+                let multiCtaData = null;
+                if (isCmsMode) {
+                    multiCtaData = (_a = result.data) === null || _a === void 0 ? void 0 : _a.multiCta;
+                }
+                else {
+                    multiCtaData = (_d = (_c = (_b = result.data) === null || _b === void 0 ? void 0 : _b.recList) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.multiCta;
+                }
+                if (multiCtaData) {
+                    setData(multiCtaData);
+                }
+                else {
+                    console.error('[StructurePage] No multiCta data found in response:', result);
+                    setError(result.message || 'No multiCta data found');
+                }
+            }
+            else {
+                setError(result.message || 'Failed to load data');
+            }
+            setLoading(false);
+        })
+            .catch((err) => {
+            console.error('[StructurePage] Failed to fetch data:', {
+                error: err,
+                message: err.message,
+                url: finalApiUrl,
+                body: bodyToSend,
+                isCmsMode,
+                storyId
+            });
+            setError(err.message || 'Network error');
+            setLoading(false);
+        });
+    }, [apiUrl, isCmsMode, storyId, customHeaders]);
+    (0, react_1.useEffect)(() => {
+        var _a;
+        if (heroVideoRef.current && ((_a = data === null || data === void 0 ? void 0 : data.heroSection) === null || _a === void 0 ? void 0 : _a.url)) {
+            heroVideoRef.current.play().catch((err) => console.log('Video autoplay failed:', err));
+            setIsHeroVideoPaused(false);
+        }
+    }, [data === null || data === void 0 ? void 0 : data.heroSection]);
+    (0, react_1.useEffect)(() => {
+        if (data === null || data === void 0 ? void 0 : data.carouselSection) {
+            setCarouselVideoPausedStates(new Array(data.carouselSection.length).fill(true));
+        }
+    }, [data === null || data === void 0 ? void 0 : data.carouselSection]);
+    const handleHeroVideoClick = (0, react_1.useCallback)(() => {
+        if (heroVideoRef.current) {
+            if (heroVideoRef.current.paused) {
+                heroVideoRef.current.play();
+                setIsHeroVideoPaused(false);
+            }
+            else {
+                heroVideoRef.current.pause();
+                setIsHeroVideoPaused(true);
+            }
+        }
+    }, []);
+    const handleCarouselVideoClick = (0, react_1.useCallback)((index) => {
+        const videoRef = carouselVideoRefs.current[index];
+        if (videoRef) {
+            if (videoRef.paused) {
+                videoRef.play();
+                setCarouselVideoPausedStates(prev => {
+                    const newStates = [...prev];
+                    newStates[index] = false;
+                    return newStates;
+                });
+            }
+            else {
+                videoRef.pause();
+                setCarouselVideoPausedStates(prev => {
+                    const newStates = [...prev];
+                    newStates[index] = true;
+                    return newStates;
+                });
+            }
+        }
+    }, []);
+    const handleCarouselPrev = () => {
+        if (data === null || data === void 0 ? void 0 : data.carouselSection) {
+            setCarouselIndex((prev) => (prev === 0 ? data.carouselSection.length - 1 : prev - 1));
+        }
+    };
+    const handleCarouselNext = () => {
+        if (data === null || data === void 0 ? void 0 : data.carouselSection) {
+            setCarouselIndex((prev) => (prev === data.carouselSection.length - 1 ? 0 : prev + 1));
+        }
+    };
+    if (loading) {
+        return (react_1.default.createElement("div", { style: Object.assign(Object.assign({}, baseStyles.container), { height: containerHeight, width: containerWidth, display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontSize: '16px' }) }, "Loading..."));
+    }
+    if (error) {
+        return (react_1.default.createElement("div", { style: Object.assign(Object.assign({}, baseStyles.container), { height: containerHeight, width: containerWidth, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', color: '#fff', padding: '20px', textAlign: 'center' }) },
+            react_1.default.createElement("div", { style: { fontSize: '18px', marginBottom: '10px' } }, "\u26A0\uFE0F Error"),
+            react_1.default.createElement("div", { style: { fontSize: '14px', opacity: 0.8 } }, error)));
+    }
+    if (!data) {
+        return (react_1.default.createElement("div", { style: Object.assign(Object.assign({}, baseStyles.container), { height: containerHeight, width: containerWidth, display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontSize: '16px' }) }, "No data available"));
+    }
+    return (react_1.default.createElement("div", { className: className, style: Object.assign(Object.assign(Object.assign({}, baseStyles.container), { height: containerHeight, width: containerWidth }), containerStyle) },
+        data.heroSection && (react_1.default.createElement("div", { style: baseStyles.heroSection },
+            data.heroSection.text && (react_1.default.createElement("div", { style: mergeStyles(baseStyles.heroTopText, 'heroTopText') }, data.heroSection.text)),
+            react_1.default.createElement("div", { style: baseStyles.heroImageContainer },
+                data.heroSection.url ? (react_1.default.createElement("div", { style: { position: 'relative', width: '100%', height: '100%' }, onClick: handleHeroVideoClick },
+                    react_1.default.createElement("video", { ref: heroVideoRef, src: data.heroSection.url, style: baseStyles.heroVideo, autoPlay: true, muted: true, loop: true, playsInline: true, controls: false }),
+                    isHeroVideoPaused && (react_1.default.createElement(FormatImage_1.default, { className: 'clc-pb-video-pause', src: videoPlayIcon, alt: 'play' })))) : ((_e = data.heroSection.imgUrls) === null || _e === void 0 ? void 0 : _e[0]) ? (react_1.default.createElement("img", { src: data.heroSection.imgUrls[0], alt: 'Hero', style: baseStyles.heroImage })) : null,
+                react_1.default.createElement("div", { style: baseStyles.heroOverlay }, renderCTA('heroButton', (_g = (_f = data.heroSection.bindProducts) === null || _f === void 0 ? void 0 : _f[0]) === null || _g === void 0 ? void 0 : _g.bindCta, (_h = data.heroSection.bindProducts) === null || _h === void 0 ? void 0 : _h[0], baseStyles.heroButton))))),
+        data.carouselSection && data.carouselSection.length > 0 && (react_1.default.createElement("div", { style: mergeStyles(baseStyles.carouselSection, 'carouselSection') },
+            react_1.default.createElement("div", { style: baseStyles.carouselImageContainer },
+                react_1.default.createElement("div", { style: Object.assign(Object.assign({}, baseStyles.carouselContainer), { transform: `translateX(-${carouselIndex * 100}%)` }) }, data.carouselSection.map((item, index) => {
+                    var _a;
+                    return (react_1.default.createElement("div", { key: item.itemId, style: baseStyles.carouselSlide }, item.url ? (react_1.default.createElement("div", { style: { position: 'relative', width: '100%', height: '100%' }, onClick: () => handleCarouselVideoClick(index) },
+                        react_1.default.createElement("video", { ref: (el) => {
+                                carouselVideoRefs.current[index] = el;
+                            }, src: item.url, style: baseStyles.carouselVideo, muted: true, loop: true, playsInline: true, controls: false }),
+                        carouselVideoPausedStates[index] && (react_1.default.createElement(FormatImage_1.default, { className: 'clc-pb-video-pause', src: videoPlayIcon, alt: 'play' })))) : ((_a = item.imgUrls) === null || _a === void 0 ? void 0 : _a[0]) ? (react_1.default.createElement("img", { src: item.imgUrls[0], alt: item.text || 'Carousel', style: baseStyles.carouselImage })) : null));
+                })),
+                react_1.default.createElement("button", { style: Object.assign(Object.assign({}, baseStyles.arrowButton), { left: '10px' }), onClick: handleCarouselPrev }, "\u2039"),
+                react_1.default.createElement("button", { style: Object.assign(Object.assign({}, baseStyles.arrowButton), { right: '10px' }), onClick: handleCarouselNext }, "\u203A")),
+            react_1.default.createElement("div", { style: mergeStyles(baseStyles.carouselInfoSection, 'carouselSection') },
+                ((_j = data.carouselSection[carouselIndex]) === null || _j === void 0 ? void 0 : _j.text) && (react_1.default.createElement("div", { style: mergeStyles(baseStyles.carouselText, 'carouselSection') }, (_k = data.carouselSection[carouselIndex]) === null || _k === void 0 ? void 0 : _k.text)),
+                renderCTA('carouselButton', (_o = (_m = (_l = data.carouselSection[carouselIndex]) === null || _l === void 0 ? void 0 : _l.bindProducts) === null || _m === void 0 ? void 0 : _m[0]) === null || _o === void 0 ? void 0 : _o.bindCta, (_q = (_p = data.carouselSection[carouselIndex]) === null || _p === void 0 ? void 0 : _p.bindProducts) === null || _q === void 0 ? void 0 : _q[0], baseStyles.carouselButton)))),
+        data.highlightRevealSection && (react_1.default.createElement("div", { style: mergeStyles(baseStyles.highlightSection, 'highlightSection') },
+            react_1.default.createElement("div", { style: baseStyles.highlightImageContainer },
+                react_1.default.createElement("img", { src: data.highlightRevealSection.landingImageUrl || data.highlightRevealSection.cover, alt: data.highlightRevealSection.title, style: baseStyles.highlightImage })),
+            react_1.default.createElement("div", { style: mergeStyles(baseStyles.highlightInfoSection, 'highlightSection') },
+                react_1.default.createElement("div", { style: mergeStyles(baseStyles.highlightTitle, 'highlightSection') }, data.highlightRevealSection.title),
+                renderCTA('highlightButton', data.highlightRevealSection.bindCta, data.highlightRevealSection, baseStyles.highlightButton)))),
+        data.productGridSection && data.productGridSection.length > 0 && (react_1.default.createElement("div", { style: mergeStyles(baseStyles.productGrid, 'productGrid') }, (() => {
+            const gridItems = [null, null, null, null, null, null];
+            const productIndexMap = {};
+            data.productGridSection.forEach((product, idx) => {
+                var _a;
+                const pos = (_a = product.position) === null || _a === void 0 ? void 0 : _a.toLowerCase();
+                let gridIndex = -1;
+                if (pos === 'top_right') {
+                    gridIndex = 1;
+                }
+                else if (pos === 'top_left') {
+                    gridIndex = 0;
+                }
+                else if (pos === 'center_left') {
+                    gridIndex = 2;
+                }
+                else if (pos === 'center_right') {
+                    gridIndex = 3;
+                }
+                else if (pos === 'bottom_left') {
+                    gridIndex = 4;
+                }
+                else if (pos === 'bottom_right') {
+                    gridIndex = 5;
+                }
+                if (gridIndex >= 0) {
+                    gridItems[gridIndex] = product;
+                    productIndexMap[gridIndex] = idx + 1;
+                }
+            });
+            return gridItems.map((product, gridIndex) => {
+                const productDataIndex = productIndexMap[gridIndex];
+                const buttonKey = `productButton${productDataIndex || gridIndex + 1}`;
+                return (react_1.default.createElement("div", { key: (product === null || product === void 0 ? void 0 : product.itemId) || `empty-${gridIndex}`, style: baseStyles.productItem }, product ? (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement("div", { style: baseStyles.productImageContainer },
+                        react_1.default.createElement("img", { src: product.landingImageUrl || product.cover, style: baseStyles.productImage })),
+                    product.bindCta && (react_1.default.createElement("div", { style: baseStyles.productCtaContainer }, renderCTA(buttonKey, product.bindCta, product, baseStyles.productButton))))) : (react_1.default.createElement("div", { style: { width: '100%', paddingBottom: '100%' } }))));
+            });
+        })())),
+        data.footerSection && (react_1.default.createElement("div", { style: mergeStyles(baseStyles.footerSection, 'footerSection') },
+            react_1.default.createElement("div", { style: mergeStyles(baseStyles.footerInfoSection, 'footerSection') }, renderCTA('footerButton', data.footerSection.bindCta, data.footerSection, baseStyles.footerButton)),
+            react_1.default.createElement("div", { style: baseStyles.footerImageContainer },
+                react_1.default.createElement("img", { src: data.footerSection.landingImageUrl || data.footerSection.cover, alt: data.footerSection.title, style: baseStyles.footerImage }))))));
+};
+exports.default = StructurePage;