tee3apps-cms-sdk-react 0.0.20 → 0.0.23

package/src/PageComponents/Visual-Components/TabComponent.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useCallback } from 'react'
+import React, { useState, useCallback, useEffect, useRef } from 'react'
 import './tab.css';
 import { Linodeurl } from '../../const';
 interface TabImage {
@@ -16,29 +16,34 @@ interface TabVideo {
 
 interface TabContentImage {
 	image: TabImage;
-	link_type: string;
-	product: any;
-	tag: any;
-	page: any;
-	external_link: any;
 }
 
 interface TabContentVideo {
 	video: TabVideo;
-	link_type: string;
-	product: any;
-	tag: any;
-	page: any;
-	external_link: any;
 }
 
 interface Product {
 	_id: string;
 	code: string;
-	name: string | { all: string };
-	image: any;
+	name: string;
+	image: {
+		url: string;
+		alt?: string;
+		width?: number;
+		height?: number;
+		[key: string]: any;
+	};
+	brand?: {
+		name: string;
+		[key: string]: any;
+	};
 	isActive: boolean;
 	price?: any;
+	sku?: string;
+	starrating?: number;
+	startRatingCount?: number;
+	variant?: any[];
+	[key: string]: any;
 }
 
 interface TabContentGroup {
@@ -49,19 +54,17 @@ interface TabContentGroup {
 	dynamicImages?: any[];
 	dynamicVideos?: any[];
 	dynamicProducts?: any[];
+	staticProducts?: any[];
 	staticImages?: any[];
 	staticVideos?: any[];
-	staticProducts?: any[];
-	showItems?: Product[];
 	dynamic?: {
-		conditions: any[];
-		query: string;
-		list: any[];
-		pagination: number;
-	};
-	dynamicQueries?: {
-		selectedVariants: any[];
+		list?: Product[];
+		conditions?: any[];
+		mongoQuery?: any;
+		query?: string;
+		pagination?: number;
 	};
+	showItems?: Product[];
 }
 
 interface TabMode {
@@ -72,6 +75,7 @@ interface TabMode {
 }
 
 interface TabItem {
+	id?: string; // Optional id field for new structure
 	tabHeaderType: string;
 	tabHeaderText: string;
 	tabHeaderImage: TabImage;
@@ -91,7 +95,7 @@ interface FontStyle {
 }
 
 interface TitleStyle {
-	titleText:any;
+	titleText: string;
 	fontSize: number;
 	fontStyle: FontStyle;
 	fontColor: string;
@@ -109,15 +113,21 @@ interface HeaderStyle {
 	activeColorText: string;
 }
 
+interface TabsData {
+	[key: string]: TabItem[]; // Object with locale keys (all, en-IN, etc.)
+}
+
 export interface TabComponentProps {
 	name: string;
 	code: string;
 	orientation: 'horizontal' | 'vertical';
+	scroll?: 'horizontal' | 'vertical';
+	objectFit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
 	height: number;
 	showTitle: boolean;
 	title: TitleStyle;
 	header: HeaderStyle;
-	tabs: TabItem[];
+	tabs: TabItem[] | TabsData; // Support both array (new) and object with locale keys (old)
 }
 
 interface TabComponentMainProps {
@@ -128,105 +138,378 @@ interface TabComponentMainProps {
 const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'web' }) => {
 	const [activeTab, setActiveTab] = useState(0);
 	const [carouselIndex, setCarouselIndex] = useState(0);
+	const [hoveredTab, setHoveredTab] = useState<number | null>(null);
+	const [hasError, setHasError] = useState(false);
+	const [errorMessage, setErrorMessage] = useState<string>('');
+	
+	// Get scroll type and objectFit from props
+	const scrollType = props.scroll || 'horizontal';
+	const objectFit = props.objectFit || 'fill';
+
+	// Extract tabs - handle both new structure (array) and old structure (object with locale keys)
+	const tabs = Array.isArray(props.tabs) 
+		? props.tabs 
+		: (props.tabs?.all || props.tabs?.['en-IN'] || []);
+
+	// Validate props structure
+	const validateProps = (): { isValid: boolean; error?: string } => {
+		try {
+			if (!props) {
+				return { isValid: false, error: 'Props are missing' };
+			}
 
-	// Check if tab content contains image/video components for dynamic height
-	const hasMediaComponents = (): boolean => {
-		if (!props.tabs || props.tabs.length === 0) return false;
-		
-		const activeTabData = props.tabs[activeTab];
-		if (!activeTabData) return false;
-		
-		// Check tab content type
-		const contentType = activeTabData.tabContentType;
-		const mediaContentTypes = ['IMAGE', 'VIDEO', 'GROUPIMAGE', 'GROUPVIDEO'];
-		
-		if (contentType && mediaContentTypes.includes(contentType)) {
-			return true;
+			if (!props.tabs) {
+				return { isValid: false, error: 'Tabs data is missing' };
+			}
+
+			// Check if tabs is array or object with valid structure
+			const tabs = Array.isArray(props.tabs) 
+				? props.tabs 
+				: (props.tabs?.all || props.tabs?.['en-IN'] || []);
+
+			if (!Array.isArray(tabs) || tabs.length === 0) {
+				return { isValid: false, error: 'No valid tabs found' };
+			}
+
+			// Validate each tab structure
+			for (let i = 0; i < tabs.length; i++) {
+				const tab = tabs[i];
+				if (!tab) {
+					return { isValid: false, error: `Tab at index ${i} is invalid` };
+				}
+				if (!tab.tabContentType) {
+					return { isValid: false, error: `Tab at index ${i} missing tabContentType` };
+				}
+				if (!tab.mode || !tab.mode.web || !tab.mode.web.layout) {
+					return { isValid: false, error: `Tab at index ${i} missing valid mode configuration` };
+				}
+			}
+
+			return { isValid: true };
+		} catch (error: any) {
+			return { isValid: false, error: error?.message || 'Unknown validation error' };
 		}
-		
-		return false;
 	};
 
-	const buildLinkForSlide = (slide: any) => {
-    switch (slide.link_type) {
-      case 'NONE':
-        return null;
-      case 'EXTERNALLINK':
-        return `${slide.external_link?.url || ''}`;
-      case 'PRODUCT': {
-        const product: any = slide.product || {};
-        const pdType = product?.pd_type || product?.product_type;
-        const code = product?.code || '';
-         if (!code) return null;
-
-        return pdType === 'VARIANT'
-		? `/variant/${code}`
-        : `model/${code}`;
-      }
-      case 'TAG': {
-        const tag: any = slide.tag || {};
-        if (!tag.code) return null;
-		return `/tag/${tag?.code}`;
-
-      }
-      case 'PAGE': {
-        const page: any = slide.page || {};
-        const pageId = page._id
-        const pgType=page.page_type
-        return `/page/${pageId}?type=${pgType}`;
-      }
-      default:
-        return null;
-    }
-  };
+	// Validate on mount and when props change
+	useEffect(() => {
+		const validation = validateProps();
+		if (!validation.isValid) {
+			setHasError(true);
+			setErrorMessage(validation.error || 'Invalid data structure');
+		} else {
+			setHasError(false);
+			setErrorMessage('');
+		}
+	}, [props]);
+
+	// Ensure activeTab is within bounds when tabs change
+	useEffect(() => {
+		if (Array.isArray(tabs) && tabs.length > 0 && activeTab >= tabs.length) {
+			setActiveTab(0);
+		}
+	}, [tabs, activeTab]);
+
+	// Fallback component for error state
+	const renderFallback = () => {
+		return (
+			<div style={{
+				width: '100%',
+				height: `${props?.height || 400}px`,
+				backgroundColor: '#f8f9fa',
+				display: 'flex',
+				flexDirection: 'column',
+				alignItems: 'center',
+				justifyContent: 'center',
+				border: '1px solid #e5e7eb',
+				borderRadius: '8px',
+				padding: '40px 20px',
+				boxSizing: 'border-box'
+			}}>
+				<div style={{
+					fontSize: '24px',
+					fontWeight: 'bold',
+					color: '#dc3545',
+					marginBottom: '12px'
+				}}>
+					⚠️ Failed to Render Tab Component
+				</div>
+				<div style={{
+					fontSize: '14px',
+					color: '#6c757d',
+					textAlign: 'center',
+					maxWidth: '500px',
+					lineHeight: '1.5'
+				}}>
+					{errorMessage || 'Invalid data structure provided'}
+				</div>
+				<div style={{
+					fontSize: '12px',
+					color: '#9ca3af',
+					marginTop: '16px',
+					textAlign: 'center'
+				}}>
+					Please check the component props and ensure all required fields are present.
+				</div>
+			</div>
+		);
+	};
+
+	// If validation failed, show fallback
+	if (hasError) {
+		return renderFallback();
+	}
+
 
 	const getImageUrl = (url: string) => {
 		if (!url) return '';
 		if (url.startsWith('http://') || url.startsWith('https://')) return url;
-		// Ensure URL has leading slash if Linodeurl doesn't end with one
-		const cleanUrl = url.startsWith('/') ? url : `/${url}`;
-		const baseUrl = Linodeurl.endsWith('/') ? Linodeurl.slice(0, -1) : Linodeurl;
-		return `${baseUrl}${cleanUrl}`;
+		return `${Linodeurl}${url}`;
 	};
 
-	// Helper function to extract numeric value from price in any format
-	const getPriceValue = (price: any): number => {
-		console.error(price,"price-----")
-		if (price === null || price === undefined) return 0;
-		
-		// If it's already a number
-		if (typeof price === 'number') {
-			return isNaN(price) ? 0 : price;
+	// Helper function to determine if an image item is dynamic based on its structure
+	const isImageDynamic = (imageItem: any): boolean => {
+		// Dynamic images have image.image or image.url structure
+		// Static images have attr.all or attr structure
+		return !!(imageItem?.image?.url || imageItem?.image?.isDynamic !== undefined) && !imageItem?.attr;
+	};
+
+	// Helper function to get image URL from either dynamic or static structure
+	const getImageItemUrl = (imageItem: any, groupType?: string): string => {
+		if (!imageItem) return '';
+		// If showItems is used, determine type from item structure
+		const isDynamic = groupType === 'DYNAMIC' || isImageDynamic(imageItem);
+		if (isDynamic) {
+			return imageItem.image?.url || imageItem.url || '';
+		} else {
+			return imageItem.attr?.all?.url || imageItem.attr?.url || imageItem.url || '';
 		}
+	};
+
+	// Helper function to get image alt from either dynamic or static structure
+	const getImageItemAlt = (imageItem: any, groupType?: string): string => {
+		if (!imageItem) return '';
+		// If showItems is used, determine type from item structure
+		const isDynamic = groupType === 'DYNAMIC' || isImageDynamic(imageItem);
+		if (isDynamic) {
+			return imageItem.image?.alt || imageItem.alt || '';
+		} else {
+			return imageItem.attr?.all?.alt || imageItem.attr?.alt || imageItem.alt || '';
+		}
+	};
+
+	// Helper function to extract YouTube video ID from various URL formats
+	const getYouTubeVideoId = (url: string): string | null => {
+		if (!url) return null;
 		
-		// If it's an object with $numberDecimal (but not an array)
-		if (typeof price === 'object' && price !== null && !Array.isArray(price)) {
-			if (price.$numberDecimal !== undefined && price.$numberDecimal !== null) {
-				const value = parseFloat(String(price.$numberDecimal));
-				return isNaN(value) ? 0 : value;
+		// Handle various YouTube URL formats
+		const patterns = [
+			/(?:https?:\/\/)?(?:www\.)?youtube\.com\/watch\?v=([^&]+)/,
+			/(?:https?:\/\/)?(?:www\.)?youtu\.be\/([^?]+)/,
+			/(?:https?:\/\/)?(?:www\.)?youtube\.com\/embed\/([^?]+)/,
+		];
+
+		for (const pattern of patterns) {
+			const match = url.match(pattern);
+			if (match && match[1]) {
+				return match[1];
 			}
 		}
 		
-		// If it's a string, try to parse it
-		if (typeof price === 'string') {
-			const value = parseFloat(price);
-			return isNaN(value) ? 0 : value;
+		return null;
+	};
+
+	// Helper function to check if video is YouTube type
+	const isYouTubeVideo = (videoData: any, isDynamic: boolean): boolean => {
+		if (isDynamic) {
+			return videoData?.video?.playerType === 'Youtube' || videoData?.video?.playerType === 'youtube';
+		} else {
+			return videoData?.attr?.all?.playerType === 'Youtube' || 
+				   videoData?.attr?.all?.playerType === 'youtube' ||
+				   videoData?.attr?.playerType === 'Youtube' || 
+				   videoData?.attr?.playerType === 'youtube';
+		}
+	};
+
+	// Render video player (YouTube or HTML5)
+	const renderVideoPlayer = (videoData: any, isDynamic: boolean, className: string = 'media-content', style: React.CSSProperties = {}) => {
+		console.log('renderVideoPlayer called with:', { videoData, isDynamic });
+		
+		const isYouTube = isYouTubeVideo(videoData, isDynamic);
+		
+		// Get video URL with proper fallback - handle both dynamic and static videos
+		let videoUrl = '';
+		if (isDynamic) {
+			videoUrl = videoData?.video?.url || videoData?.url || '';
+		} else {
+			// Static videos: check multiple possible locations
+			videoUrl = videoData?.attr?.all?.url || videoData?.attr?.url || videoData?.video?.url || videoData?.url || '';
+		}
+		
+		console.log('Video URL extracted:', videoUrl, 'isYouTube:', isYouTube);
+		
+		// Get video attributes - handle both dynamic and static videos
+		const videoAlt = isDynamic 
+			? (videoData?.video?.alt || videoData?.alt || videoData?.name || 'Video')
+			: (videoData?.attr?.all?.alt || videoData?.attr?.alt || videoData?.video?.alt || videoData?.alt || 'Video');
+		
+		// Get controls setting with proper defaults (default to true if undefined)
+		const controls = isDynamic 
+			? (videoData?.video?.controls !== undefined ? videoData.video.controls : true)
+			: (videoData?.attr?.all?.controls !== undefined ? videoData.attr.all.controls : (videoData?.attr?.controls !== undefined ? videoData.attr.controls : true));
+		
+		// Get loop setting (default to false if undefined)
+		const loop = isDynamic 
+			? (videoData?.video?.loop === true)
+			: (videoData?.attr?.all?.loop === true || videoData?.attr?.loop === true);
+
+		// Get autoplay setting - if controls are false, enable autoplay by default
+		const autoplay = isDynamic
+			? (videoData?.video?.autoplay !== undefined ? videoData.video.autoplay : !controls)
+			: (videoData?.attr?.all?.autoplay !== undefined ? videoData.attr.all.autoplay : (videoData?.attr?.autoplay !== undefined ? videoData.attr.autoplay : !controls));
+
+		console.log('Video controls:', controls, 'loop:', loop, 'autoplay:', autoplay);
+
+		if (!videoUrl) {
+			console.error('No video URL found in videoData');
+			return <div style={{ padding: '20px', textAlign: 'center' }}>No video URL available</div>;
+		}
+
+		if (isYouTube) {
+			const videoId = getYouTubeVideoId(videoUrl);
+			if (videoId) {
+				const autoplayParam = autoplay ? '&autoplay=1&mute=1' : '';
+				const embedUrl = `https://www.youtube.com/embed/${videoId}?${controls ? 'controls=1' : 'controls=0'}${loop ? '&loop=1&playlist=' + videoId : ''}${autoplayParam}`;
+				return (
+					<iframe
+						src={embedUrl}
+						title={videoAlt}
+						className={className}
+						style={{
+							width: '100%',
+							height: '100%',
+							border: 'none',
+							...style
+						}}
+						allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+						allowFullScreen
+					/>
+				);
+			}
 		}
+
+		// Fallback to HTML5 video - always use Linode URL
+		const finalVideoUrl = getImageUrl(videoUrl);
+		console.log('Rendering HTML5 video with URL:', finalVideoUrl);
 		
-		return 0;
+		// Create a video component with proper handling for no-controls videos
+		const VideoComponent = () => {
+			const videoRef = useRef<HTMLVideoElement>(null);
+
+			// Handle click to play/pause when controls are disabled
+			const handleVideoClick = () => {
+				if (!controls && videoRef.current) {
+					if (videoRef.current.paused) {
+						videoRef.current.play().catch(err => {
+							console.error('Error playing video:', err);
+							// If autoplay fails, try with muted
+							if (videoRef.current) {
+								videoRef.current.muted = true;
+								videoRef.current.play().catch(e => console.error('Error playing muted video:', e));
+							}
+						});
+					} else {
+						videoRef.current.pause();
+					}
+				}
+			};
+
+			// Auto-play when video is loaded if autoplay is enabled
+			useEffect(() => {
+				if (autoplay && videoRef.current && !controls) {
+					videoRef.current.muted = true; // Mute for autoplay (browser requirement)
+					videoRef.current.play().catch(err => {
+						console.error('Autoplay failed:', err);
+					});
+				}
+			}, [autoplay, controls]);
+
+			return (
+				<video
+					ref={videoRef}
+					src={finalVideoUrl}
+					title={videoAlt}
+					className={className}
+					controls={controls}
+					loop={loop}
+					autoPlay={autoplay}
+					muted={autoplay || !controls} // Mute if autoplay or no controls (required for autoplay in browsers)
+					playsInline={true} // Required for mobile devices
+					onClick={handleVideoClick}
+					style={{ 
+						width: '100%', 
+						height: '100%', 
+						objectFit: (props.objectFit || 'contain') as any, 
+						cursor: controls ? 'default' : 'pointer',
+						...style 
+					}}
+					onError={(e) => {
+						console.error('Video failed to load:', e, 'URL:', finalVideoUrl);
+					}}
+					onLoadedData={() => {
+						console.log('Video loaded successfully:', finalVideoUrl);
+						// Try to play if autoplay is enabled
+						if (autoplay && videoRef.current && !controls) {
+							videoRef.current.muted = true;
+							videoRef.current.play().catch(err => {
+								console.error('Error autoplaying video:', err);
+							});
+						}
+					}}
+				/>
+			);
+		};
+
+		return <VideoComponent />;
 	};
 
 	// Inline Product Card Component
 	const ProductCard: React.FC<{ product: any; layout?: string }> = ({ product, layout = '1x1' }) => {
+		// Helper function to get product name (handles both string and object formats)
+		const getProductName = (name: any): string => {
+			if (!name) return '';
+			if (typeof name === 'string') return name;
+			if (typeof name === 'object') {
+				return name.displayName || name.all || name.en || '';
+			}
+			return '';
+		};
+
 		const formatPrice = (price: any) => {
-			const priceValue = getPriceValue(price);
-			if (priceValue === 0 && !price) return '0';
-			return priceValue
+			if (!price) return '₹0';
+			if (typeof price === 'object' && price.$numberDecimal) {
+				return parseFloat(price.$numberDecimal).toLocaleString('en-IN', {
+					style: 'currency',
+					currency: 'INR',
+					minimumFractionDigits: 0,
+					maximumFractionDigits: 0
+				});
+			}
+			if (typeof price === 'number') {
+				return price.toLocaleString('en-IN', {
+					style: 'currency',
+					currency: 'INR',
+					minimumFractionDigits: 0,
+					maximumFractionDigits: 0
+				});
+			}
+			return price;
 		};
 
 		const calculateOffer = (mrp: any, sp: any) => {
-			const mrpValue = getPriceValue(mrp);
-			const spValue = getPriceValue(sp);
+			if (!mrp || !sp) return 0;
+			const mrpValue = parseFloat(mrp.$numberDecimal || mrp || 0);
+			const spValue = parseFloat(sp.$numberDecimal || sp || 0);
 			if (mrpValue > spValue && mrpValue > 0) {
 				const discount = ((mrpValue - spValue) / mrpValue) * 100;
 				return Math.round(discount);
@@ -251,51 +534,32 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 		};
 
 		const getVariantText = (variant: any) => {
-			return variant.valueId?.name?.all || variant.valueId?.name || '';
+			return variant.valueId?.name || '';
 		};
 
-		// Use pricing object first, fallback to price for backward compatibility
-		const mrp = product.pricing?.mrp ;
-		console.error(mrp,product,"mrp-----")
-		const sp = product.pricing?.costPrice;
-		console.error(sp,"sp-----")
+		const mrp = product.price?.MRP;
+		const sp = product.price?.SP;
 		const offer = calculateOffer(mrp, sp);
 
 		const cardMode = layout === '1x1' ? 'carousel-mode' : layout === '2x1' ? 'layout-2x1' : 'grid-mode';	
-		const productSlug = product.code;
-		const productLink = `/${productSlug}`;
 		
-		// Get product image URL - try multiple possible locations
-		const getProductImageUrl = () => {
-			return product.image?.all?.url || 
-				   product.image?.url || 
-				   product.model?.image?.url || 
-				   product.model?.image?.all?.url || 
-				   '';
-		};
-
 		const cardContent = (
 			<>
 				{/* Product Image */}
 				<div className="product-image-container">
 					<img
-						src={getImageUrl(getProductImageUrl())}
-						alt={product.name?.all || product.name?.displayName || 'Product image'}
+						src={getImageUrl(product.image?.url || '')}
+						alt={getProductName(product.name) || product.image?.alt || ''}
 						className="product-image"
-						onError={(e) => {
-							// Fallback if image fails to load
-							const target = e.target as HTMLImageElement;
-							target.style.display = 'none';
-						}}
 					/>
 				</div>
 
 				{/* Product Details */}
 				<div className="product-details">
 					<div className="product-header">
-						<div className="product-brand">{product.brand?.name?.all || product.brand?.name}</div>
-						<div className="product-name">{product.name?.all || product.name}</div>
-						<div className="product-code">Code: {product.sku}</div>
+						<div className="product-brand">{product.brand?.name || ''}</div>
+						<div className="product-name">{getProductName(product.name)}</div>
+						<div className="product-code">Code: {product.sku || product.code || ''}</div>
 					</div>
 
 					{/* Rating - Show first for grid mode */}
@@ -333,10 +597,14 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 					<div className="product-pricing">
 						<div className="price-row">
 							<span className="current-price">{formatPrice(sp)}</span>
-							{mrp && sp && offer > 0 && (
+							{mrp && sp && (() => {
+								const mrpValue = parseFloat(mrp?.$numberDecimal || mrp || 0);
+								const spValue = parseFloat(sp?.$numberDecimal || sp || 0);
+								return mrpValue > spValue && mrpValue > 0;
+							})() && (
 								<>
 									<span className="original-price">{formatPrice(mrp)}</span>
-									<span className="offer-badge">{offer}% OFF</span>
+									{offer > 0 && <span className="offer-badge">{offer}% OFF</span>}
 								</>
 							)}
 						</div>
@@ -361,23 +629,48 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 		
 		return (
 			<div className={`product-card ${cardMode}`}>
-				{layout === '1x1' ? (
-					<a href={productLink} target="_blank" style={{ textDecoration: 'none', color: 'inherit', display: 'contents' }}>
-					{cardContent}
-				</a>
-				) : (
-					<a href={productLink} target="_blank" style={{ textDecoration: 'none', color: 'inherit', display: 'contents' }}>
-						{cardContent}
-					</a>
-				)}
+				{cardContent}
 			</div>
 		);
 	};
 
 	// Carousel navigation functions
 	const nextCarouselItem = useCallback(() => {
-		setCarouselIndex((prev) => (prev + 1));
-	}, []);
+		setCarouselIndex((prev) => {
+			// Get current tab to determine max slides
+			const currentTab = tabs[activeTab];
+			if (!currentTab) return prev;
+			
+			const layout = getCurrentLayout(currentTab);
+			const itemsPerSlide = layout === '2x2' ? 4 : (layout === '1x2' || layout === '2x1') ? 2 : 1;
+			
+			let maxSlides = 0;
+			if (currentTab.tabContentType === 'GROUPIMAGE' && currentTab.tabContentGroupImage) {
+				const items = currentTab.tabContentGroupImage.showItems && currentTab.tabContentGroupImage.showItems.length > 0
+					? currentTab.tabContentGroupImage.showItems
+					: (currentTab.tabContentGroupImage.type === 'DYNAMIC' 
+						? currentTab.tabContentGroupImage.dynamicImages 
+						: (currentTab.tabContentGroupImage.staticImages || []));
+				maxSlides = items?.length ? (layout !== '1x1' ? Math.ceil(items.length / itemsPerSlide) : items.length) : 0;
+			} else if (currentTab.tabContentType === 'GROUPVIDEO' && currentTab.tabContentGroupVideo) {
+				const items = currentTab.tabContentGroupVideo.showItems && currentTab.tabContentGroupVideo.showItems.length > 0
+					? currentTab.tabContentGroupVideo.showItems
+					: (currentTab.tabContentGroupVideo.type === 'DYNAMIC' 
+						? currentTab.tabContentGroupVideo.dynamicVideos 
+						: (currentTab.tabContentGroupVideo.staticVideos || []));
+				maxSlides = items?.length ? (layout !== '1x1' ? Math.ceil(items.length / itemsPerSlide) : items.length) : 0;
+			} else if (currentTab.tabContentType === 'GROUPPRODUCT' && currentTab.tabContentGroupProduct) {
+				const items = currentTab.tabContentGroupProduct.showItems && currentTab.tabContentGroupProduct.showItems.length > 0
+					? currentTab.tabContentGroupProduct.showItems
+					: (currentTab.tabContentGroupProduct.type === 'DYNAMIC' 
+						? currentTab.tabContentGroupProduct.dynamic?.list 
+						: currentTab.tabContentGroupProduct.staticProducts);
+				maxSlides = items?.length ? (layout !== '1x1' ? Math.ceil(items.length / itemsPerSlide) : items.length) : 0;
+			}
+			
+			return maxSlides > 0 ? Math.min(prev + 1, maxSlides - 1) : prev;
+		});
+	}, [activeTab, tabs]);
 
 	const prevCarouselItem = useCallback(() => {
 		setCarouselIndex((prev) => Math.max(0, prev - 1));
@@ -393,33 +686,6 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 		setCarouselIndex(0);
 	};
 
-	// Helper function to get sliding window indices for grid layouts
-	const getSlidingWindowIndices = (totalItems: number, itemsPerView: number, currentIndex: number): number[] => {
-		if (totalItems <= itemsPerView) {
-			// If total items <= items per view, show all items
-			return Array.from({ length: totalItems }, (_, i) => i);
-		}
-
-		// Calculate max possible index for sliding window
-		// For sliding window, we can slide until the last item is shown
-		// Max index is when we show the last itemsPerView items
-		const maxIndex = totalItems - itemsPerView;
-		const clampedIndex = Math.min(Math.max(0, currentIndex), maxIndex);
-		
-		// Sliding window: start from clampedIndex, show itemsPerView items
-		return Array.from({ length: itemsPerView }, (_, i) => clampedIndex + i);
-	};
-
-	// Helper function to calculate max carousel index for grid layouts
-	const getMaxCarouselIndex = (totalItems: number, itemsPerView: number): number => {
-		if (totalItems <= itemsPerView) {
-			return 0; // No carousel needed
-		}
-		// For sliding window, max index is when we show the last itemsPerView items
-		// This allows us to slide through all items with overlapping windows
-		return Math.max(0, totalItems - itemsPerView);
-	};
-
 	const getCurrentLayout = (tab: TabItem): string => {
 		switch (deviceMode) {
 			case 'mobileweb': return tab.mode.mobileweb.layout;
@@ -432,20 +698,35 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 
 	const getTabHeaderStyle = (index: number) => {
 		const isActive = activeTab === index;
+		const isHovered = hoveredTab === index;
+
+		// Determine background and text colors based on state
+		let backgroundColor: string;
+		let color: string;
+
+		if (isActive) {
+			backgroundColor = props.header.activeColorBg || '#acffb5';
+			color = props.header.activeColorText || '#000000';
+		} else if (isHovered) {
+			backgroundColor = props.header.hoverColorBg || '#b4b2ff';
+			color = props.header.hoverColorText || '#454545';
+		} else {
+			backgroundColor = props.header.defaultColorBg || '#ffc5c5';
+			color = props.header.defaultColorText || '#000000';
+		}
 
 		return {
-			backgroundColor: 'transparent',
-			color: isActive ? '#000000' : '#6b7280', // black for active, grey for inactive
+			backgroundColor: backgroundColor,
+			color: color,
 			fontSize: `${props.header.fontSize}px`,
-			fontWeight: props.header.fontStyle.isBold ? 'bold' : '500',
+			fontWeight: props.header.fontStyle.isBold ? 'bold' : 'normal',
 			fontStyle: props.header.fontStyle.isItalic ? 'italic' : 'normal',
 			textDecoration: props.header.fontStyle.isUnderLine ? 'underline' : 'none',
 			padding: '8px 12px',
 			border: 'none',
 			cursor: 'pointer',
 			transition: 'all 0.3s ease',
-			borderRadius: '0',
-			background: 'none',
+			borderRadius: '4px',
 			whiteSpace: 'nowrap' as const,
 		};
 	};
@@ -465,8 +746,23 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 	};
 
 	const renderTabContent = (tab: TabItem) => {
-		const layout = getCurrentLayout(tab);
-		console.warn(tab)
+		try {
+			if (!tab) {
+				return (
+					<div style={{
+						display: 'flex',
+						alignItems: 'center',
+						justifyContent: 'center',
+						height: '100%',
+						color: '#6c757d'
+					}}>
+						Invalid tab data
+					</div>
+				);
+			}
+
+			const layout = getCurrentLayout(tab);
+			console.warn(tab)
 		const getGridColumns = () => {
 			switch (layout) {
 				case '1x1': return '1fr';
@@ -481,8 +777,8 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 			switch (layout) {
 				case '1x1': return '1fr';
 				case '1x2': return '1fr';
-				case '2x1': return 'repeat(2, 1fr)';
-				case '2x2': return 'repeat(2, 1fr)';
+				case '2x1': return 'repeat(2, minmax(0, 1fr))';
+				case '2x2': return 'repeat(2, minmax(0, 1fr))';
 				default: return '1fr';
 			}
 		};
@@ -492,139 +788,163 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 			gridTemplateColumns: getGridColumns(),
 			gridTemplateRows: getGridRows(),
 			gap: '3px',
-			width: '100%',
+			height: '100%', // force tab content height
 			overflow: 'hidden'
 		  };
 		  
 
 		switch (tab.tabContentType) {
 			case 'IMAGE':
-				if (tab.tabContentImage && tab.tabContentImage.image) {
-				  const imageUrl = tab.tabContentImage.image.url;
-				  const imageAlt = tab.tabContentImage.image.alt || 'Image';
-				  const fullImageUrl = getImageUrl(imageUrl);
-				  const linkUrl = buildLinkForSlide(tab.tabContentImage);
-				  const linkTarget = tab.tabContentImage.link_type === 'EXTERNALLINK'
-					? tab.tabContentImage.external_link?.target || '_blank'
-					: '_blank';
-				  
-				  // Debug: Log image URL construction
-				  if (!fullImageUrl) {
-					console.warn('Image URL is empty. Original URL:', imageUrl);
-				  }
-				  
-				  const imageElement = (
-					<div style={contentStyle}>
-						<div className="media-box" style={{ width: '100%', overflow: 'hidden' }}>
-							<img
-								src={fullImageUrl}
-								alt={imageAlt}
-								className="media-content"
-								style={{
-									width: '100%',
-									height: 'auto',
-									display: 'block'
-								}}
-								onError={(e) => {
-									const target = e.target as HTMLImageElement;
-									console.error('Image failed to load. URL:', fullImageUrl, 'Original:', imageUrl);
-									target.style.display = 'none';
-								}}
-							/>
-						</div>
-					</div>
-				  );
-				  
-				  if (linkUrl) {
+				if (tab.tabContentImage) {
 					return (
-						<a
-							href={linkUrl}
-							target={linkTarget}
-							style={{ textDecoration: 'none', color: 'inherit', display: 'contents' }}
-						>
-							{imageElement}
-						</a>
+						<div style={contentStyle}>
+							<div className="media-box">
+								<img
+									src={getImageUrl(tab.tabContentImage.image.url)}
+									alt={tab.tabContentImage.image.alt}
+									className="media-content"
+									style={{ objectFit: objectFit as any, width: '100%', height: '100%' }}
+								/>
+							</div>
+						</div>
 					);
-				  }
-				  
-				  return imageElement;
 				}
 				break;
 			case 'VIDEO':
 				if (tab.tabContentVideo) {
+					const videoUrl = tab.tabContentVideo.video.url;
+					const videoAlt = tab.tabContentVideo.video.alt || 'Video';
+					// Access playerType from video object (may not be in type definition but exists in runtime)
+					const videoData = tab.tabContentVideo.video as any;
+					const playerType = videoData?.playerType;
+					
+					if (!videoUrl) {
+						return <div style={{ padding: '20px', textAlign: 'center' }}>No video URL available</div>;
+					}
+					
+					// Check if it's a YouTube video (by playerType or URL)
+					const isYouTube = playerType === 'Youtube' || playerType === 'youtube' || getYouTubeVideoId(videoUrl) !== null;
+					const youtubeId = getYouTubeVideoId(videoUrl);
+					
 					return (
 						<div style={contentStyle}>
-						  <div className="media-box" style={{ width: '100%', overflow: 'hidden' }}>
+						  <div className="media-box">
+							{isYouTube && youtubeId ? (
+								<iframe
+									src={`https://www.youtube.com/embed/${youtubeId}`}
+									title={videoAlt}
+									className="media-content"
+									style={{ width: '100%', height: '100%', border: 'none' }}
+									allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+									allowFullScreen
+								/>
+							) : (
 								<video
-									src={getImageUrl(tab.tabContentVideo.video.url)}
+									src={getImageUrl(videoUrl)}
 									controls
-							   className="media-content"
-							   style={{ width: '100%', height: 'auto', display: 'block' }}
+									className="media-content"
+									style={{ width: '100%', height: '100%', objectFit: objectFit as any }}
 								/>
-							</div>
+							)}
 						</div>
+					</div>
 					);
 				}
 				break;
 
-					case 'GROUPIMAGE':
-						if (tab.tabContentGroupImage) {
-						  // Handle both DYNAMIC and STATIC types
-						  const images = tab.tabContentGroupImage.type === 'DYNAMIC' 
+				case 'GROUPIMAGE':
+					if (tab.tabContentGroupImage) {
+					  // Prioritize showItems, fallback to dynamic/static arrays
+					  const images = tab.tabContentGroupImage.showItems && tab.tabContentGroupImage.showItems.length > 0
+						? tab.tabContentGroupImage.showItems
+						: (tab.tabContentGroupImage.type === 'DYNAMIC' 
 							? tab.tabContentGroupImage.dynamicImages 
-							: (tab.tabContentGroupImage.staticImages || tab.tabContentGroupImage.showItems);
-							
-						  if (!images || images.length === 0) {
-							return <div>No images available</div>;
-						  }
-					  
-						  // 1x1 layout: carousel display
-						  if (layout === '1x1') {
-							const currentImage = images[carouselIndex] || images[0];
-							const linkUrl = currentImage ? buildLinkForSlide(currentImage) : null;
-					  
-							const imageElement = currentImage ? (
-							  <div className="media-box" style={{ width: '100%', overflow: 'hidden' }}>
-								<img
-								  src={getImageUrl(
-									tab.tabContentGroupImage.type === 'DYNAMIC' 
-									  ? currentImage.image.url 
-									  : currentImage.attr?.url
-								  )}
-								  alt={
-									tab.tabContentGroupImage.type === 'DYNAMIC' 
-									  ? currentImage.image.alt 
-									  : currentImage.attr?.alt
-								  }
-								   className="media-content"
-								   style={{ width: '100%', height: 'auto', display: 'block' }}
-								/>
-							  </div>
-							) : null;
+							: (tab.tabContentGroupImage.staticImages || []));
+						
+					  if (!images || images.length === 0) {
+						return <div>No images available</div>;
+					  }
 					  
-					return (
-						<div
-							style={{
-								  position: 'relative',
-								  width: '100%',
-								  overflow: 'hidden',
+					  // 1x1 layout: use scrollbar if scroll type is set, otherwise carousel
+					  if (layout === '1x1' && scrollType) {
+						// Use scrollable container with scrollbar - each item takes full width/height
+						const scrollDirection = scrollType === 'horizontal' ? 'row' : 'column';
+						
+						return (
+							<div
+								style={{
+									width: '100%',
+									height: '100%',
+									overflow: scrollType === 'horizontal' ? 'auto' : 'auto',
+									display: 'flex',
+									flexDirection: scrollDirection as any,
+									scrollSnapType: scrollType === 'horizontal' ? 'x mandatory' : 'y mandatory',
+									gap: 0,
+									padding: 0,
 								}}
-							  >
-								{linkUrl ? (
-								  <a
-									href={linkUrl}
-									target={
-									  currentImage?.link_type === 'EXTERNALLINK'
-										? currentImage.external_link?.target || '_blank'
-										: '_self'
-									}
-									style={{ width: '100%', display: 'block' }}
-								  >
-									{imageElement}
-								  </a>
-								) : (
-								  imageElement
-								)}
+								className="scroll-container"
+							>
+								{images.map((image, index) => (
+									<div
+										key={index}
+										className="media-box"
+										style={{
+											width: scrollType === 'horizontal' ? '100%' : '100%',
+											height: scrollType === 'vertical' ? '100%' : '100%',
+											minWidth: scrollType === 'horizontal' ? '100%' : '100%',
+											minHeight: scrollType === 'vertical' ? '100%' : '100%',
+											flexShrink: 0,
+											scrollSnapAlign: 'start',
+										}}
+									>
+										<img
+											src={getImageUrl(
+												getImageItemUrl(image, tab.tabContentGroupImage.type)
+											)}
+											alt={
+												getImageItemAlt(image, tab.tabContentGroupImage.type)
+											}
+											className="media-content"
+											style={{ objectFit: objectFit as any, width: '100%', height: '100%' }}
+										/>
+									</div>
+								))}
+							</div>
+						);
+					  }
+					  
+					  // 1x1 layout: carousel display (fallback when scroll is not set)
+					  if (layout === '1x1') {
+						const currentImage = images[carouselIndex] || images[0];
+				  
+						const imageElement = currentImage ? (
+						  <div className="media-box" style={{ width: '100%', height: '100%' }}>
+							<img
+							  src={getImageUrl(
+								getImageItemUrl(currentImage, tab.tabContentGroupImage.type)
+							  )}
+							  alt={
+								getImageItemAlt(currentImage, tab.tabContentGroupImage.type)
+							  }
+							   className="media-content"
+							   style={{ objectFit: objectFit as any, width: '100%', height: '100%' }}
+							/>
+						  </div>
+						) : null;
+				  
+				return (
+					<div
+						style={{
+							  position: 'relative',
+							  width: '100%',
+							  height: '100%',
+							  overflow: 'hidden',
+							  display: 'flex',
+							  alignItems: 'center',
+							  justifyContent: 'center',
+							}}
+						  >
+							{imageElement}
 					  
 								{/* Carousel Navigation */}
 								{images.length > 1 && (
@@ -717,7 +1037,7 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 							);
 						  }
 					  
-						  // Other layouts: grid display with sliding window carousel
+						  // Other layouts: grid display with limited images
 						  const getMaxImages = () => {
 							switch (layout) {
 							  case '1x2': return 2;
@@ -727,241 +1047,402 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 							}
 						  };
 						  
-						  const itemsPerView = getMaxImages();
-						  const maxCarouselIndex = getMaxCarouselIndex(images.length, itemsPerView);
-						  const displayIndices = getSlidingWindowIndices(images.length, itemsPerView, carouselIndex);
-						  const displayImages = displayIndices.map(idx => images[idx]);
-						  const needsCarousel = images.length > itemsPerView;
-						  
-						  // Navigation handlers specific to this layout
-						  const handleNextImage = () => {
-							if (carouselIndex < maxCarouselIndex) {
-							  setCarouselIndex((prev) => Math.min(prev + 1, maxCarouselIndex));
-							}
-						  };
-						  
-						  const handlePrevImage = () => {
-							if (carouselIndex > 0) {
-							  setCarouselIndex((prev) => Math.max(prev - 1, 0));
-							}
-						  };
-						  
-						  // Create dynamic content style for GROUPIMAGE
-						  const groupImageContentStyle = {
-							display: 'grid',
-							gridTemplateColumns: getGridColumns(),
-							gridTemplateRows: getGridRows(),
-							gap: '3px',
-							width: '100%',
-							overflow: 'hidden'
-						  };
-						  
-						  return (
+					  // For grid layouts (1x2, 2x1, 2x2), show one grid per slide
+					  // For 1x1 layout with scroll, show one item at a time
+					  if (layout !== '1x1' && scrollType) {
+						// Group items into slides based on layout
+						const itemsPerSlide = layout === '2x2' ? 4 : 2; // 4 for 2x2, 2 for 1x2/2x1
+						const slides: any[][] = [];
+						for (let i = 0; i < images.length; i += itemsPerSlide) {
+							slides.push(images.slice(i, i + itemsPerSlide));
+						}
+						
+						const scrollDirection = scrollType === 'horizontal' ? 'row' : 'column';
+						
+						return (
 							<div
-							  style={{
-								position: 'relative',
-								width: '100%',
-								overflow: 'hidden',
-							  }}
+								style={{
+									width: '100%',
+									height: '100%',
+									overflow: scrollType === 'horizontal' ? 'auto' : 'auto',
+									display: 'flex',
+									flexDirection: scrollDirection as any,
+									scrollSnapType: scrollType === 'horizontal' ? 'x mandatory' : 'y mandatory',
+									gap: 0,
+									padding: 0,
+								}}
+								className="scroll-container"
 							>
-							  <div style={groupImageContentStyle} className='media-box'>
-								{displayImages.map((image, displayIndex) => {
-								  const originalIndex = displayIndices[displayIndex];
-								  const linkUrl = buildLinkForSlide(image);
-								  const imageElement = (
-									<div key={originalIndex} className="media-box" style={{ width: '100%', overflow: 'hidden' }}>
-									  <img
-										src={getImageUrl(
-										  tab.tabContentGroupImage.type === 'DYNAMIC' 
-											? image.image.url 
-											: image.attr?.url
-										)}
-										alt={
-										  tab.tabContentGroupImage.type === 'DYNAMIC' 
-											? image.image.alt 
-											: image.attr?.alt
-										}
-										className="media-content"
-										style={{ width: '100%', height: 'auto', display: 'block' }}
-									  />
-									</div>
-								  );
-							
-								  return linkUrl ? (
-									<a
-									  key={originalIndex}
-									  href={linkUrl}
-									  target={
-										image.link_type === 'EXTERNALLINK'
-										  ? image.external_link?.target || '_blank'
-										  : '_self'
-									  }
-									  className='media-box'
-									  style={{ width: '100%', display: 'block' }}
+								{slides.map((slideImages, slideIndex) => (
+									<div
+										key={slideIndex}
+										style={{
+											width: scrollType === 'horizontal' ? '100%' : '100%',
+											height: scrollType === 'vertical' ? '100%' : '100%',
+											minWidth: scrollType === 'horizontal' ? '100%' : '100%',
+											minHeight: scrollType === 'vertical' ? '100%' : '100%',
+											flexShrink: 0,
+											scrollSnapAlign: 'start',
+											display: 'grid',
+											gridTemplateColumns: getGridColumns(),
+											gridTemplateRows: getGridRows(),
+											gap: '3px',
+											overflow: 'hidden',
+											boxSizing: 'border-box',
+										}}
 									>
-									  {imageElement}
-									</a>
-								  ) : (
-									<div key={originalIndex} style={{ width: '100%' }}>
-									  {imageElement}
+										{slideImages.map((image, index) => (
+											<div 
+												key={index} 
+												className="media-box" 
+												style={{ 
+													width: '100%', 
+													height: '100%', 
+													minHeight: 0,
+													overflow: 'hidden',
+													display: 'flex',
+													alignItems: 'center',
+													justifyContent: 'center',
+													boxSizing: 'border-box',
+												}}
+											>
+												<img
+													src={getImageUrl(
+														tab.tabContentGroupImage.type === 'DYNAMIC' 
+															? image.image?.url || image.url
+															: image.attr?.all?.url || image.attr?.url || image.url
+													)}
+													alt={
+														tab.tabContentGroupImage.type === 'DYNAMIC' 
+															? image.image?.alt || image.alt || ''
+															: image.attr?.all?.alt || image.attr?.alt || image.alt || ''
+													}
+													className="media-content"
+													style={{ objectFit: objectFit as any, width: '100%', height: '100%' }}
+												/>
+											</div>
+										))}
 									</div>
-								  );
-								})}
-							  </div>
-
-							  {/* Carousel Navigation for Grid Layouts */}
-							  {needsCarousel && (
-								<>
-								  {/* Previous Button */}
-								  <button
-									onClick={handlePrevImage}
-									disabled={carouselIndex === 0}
-									style={{
-									  position: 'absolute',
-									  left: '10px',
-									  top: '50%',
-									  transform: 'translateY(-50%)',
-									  background: 'rgba(0,0,0,0.5)',
-									  color: 'white',
-									  border: 'none',
-									  borderRadius: '50%',
-									  width: '40px',
-									  height: '40px',
-									  cursor: carouselIndex === 0 ? 'not-allowed' : 'pointer',
-									  opacity: carouselIndex === 0 ? 0.5 : 1,
-									  display: 'flex',
-									  alignItems: 'center',
-									  justifyContent: 'center',
-									  fontSize: '18px',
-									  zIndex: 10,
-									}}
-								  >
-									‹
-								  </button>
-
-								  {/* Next Button */}
-								  <button
-									onClick={handleNextImage}
-									disabled={carouselIndex >= maxCarouselIndex}
-									style={{
-									  position: 'absolute',
-									  right: '10px',
-									  top: '50%',
-									  transform: 'translateY(-50%)',
-									  background: 'rgba(0,0,0,0.5)',
-									  color: 'white',
-									  border: 'none',
-									  borderRadius: '50%',
-									  width: '40px',
-									  height: '40px',
-									  cursor: carouselIndex >= maxCarouselIndex ? 'not-allowed' : 'pointer',
-									  opacity: carouselIndex >= maxCarouselIndex ? 0.5 : 1,
-									  display: 'flex',
-									  alignItems: 'center',
-									  justifyContent: 'center',
-									  fontSize: '18px',
-									  zIndex: 10,
-									}}
-								  >
-									›
-								  </button>
-
-								  {/* Dots Indicator */}
-								  <div
-									style={{
-									  position: 'absolute',
-									  bottom: '10px',
-									  left: '50%',
-									  transform: 'translateX(-50%)',
-									  display: 'flex',
-									  gap: '8px',
-									  zIndex: 10,
-									}}
-								  >
-									{Array.from({ length: maxCarouselIndex + 1 }, (_, index) => (
-									  <button
+								))}
+							</div>
+						);
+					  }
+					  
+					  // For 1x1 layout with scroll, show one item at a time (carousel-like)
+					  if (layout === '1x1' && scrollType) {
+						const scrollDirection = scrollType === 'horizontal' ? 'row' : 'column';
+						return (
+							<div
+								style={{
+									width: '100%',
+									height: '100%',
+									overflow: scrollType === 'horizontal' ? 'auto' : 'auto',
+									display: 'flex',
+									flexDirection: scrollDirection as any,
+									scrollSnapType: scrollType === 'horizontal' ? 'x mandatory' : 'y mandatory',
+									gap: 0,
+									padding: 0,
+								}}
+								className="scroll-container"
+							>
+								{images.map((image, index) => (
+									<div
 										key={index}
-										onClick={() => goToCarouselItem(index)}
+										className="media-box"
 										style={{
-										  width: index === carouselIndex ? '12px' : '8px',
-										  height: index === carouselIndex ? '12px' : '8px',
-										  borderRadius: '50%',
-										  border: 'none',
-										  background: index === carouselIndex ? 'white' : 'rgba(255,255,255,0.5)',
-										  cursor: 'pointer',
-										  transition: 'all 0.3s ease',
+											width: scrollType === 'horizontal' ? '100%' : '100%',
+											height: scrollType === 'vertical' ? '100%' : '100%',
+											minWidth: scrollType === 'horizontal' ? '100%' : '100%',
+											minHeight: scrollType === 'vertical' ? '100%' : '100%',
+											flexShrink: 0,
+											scrollSnapAlign: 'start',
 										}}
-									  />
-									))}
-								  </div>
-								</>
-							  )}
+									>
+										<img
+											src={getImageUrl(
+												getImageItemUrl(image, tab.tabContentGroupImage.type)
+											)}
+											alt={
+												getImageItemAlt(image, tab.tabContentGroupImage.type)
+											}
+											className="media-content"
+											style={{ objectFit: objectFit as any, width: '100%', height: '100%' }}
+										/>
+									</div>
+								))}
 							</div>
-						  );
-						  
+						);
+					  }
+					  
+					  // Grid layout without scroll - show one grid per slide with carousel navigation
+					  if (layout !== '1x1') {
+						// Group items into slides based on layout
+						const itemsPerSlide = layout === '2x2' ? 4 : 2; // 4 for 2x2, 2 for 1x2/2x1
+						const slides: any[][] = [];
+						for (let i = 0; i < images.length; i += itemsPerSlide) {
+							slides.push(images.slice(i, i + itemsPerSlide));
 						}
-						break;
+						
+						const currentSlide = slides[carouselIndex] || slides[0] || [];
+						
+						const groupImageContentStyle: React.CSSProperties = {
+							display: 'grid',
+							gridTemplateColumns: getGridColumns(),
+							gridTemplateRows: getGridRows(),
+							gap: '3px',
+							height: '100%',
+							width: '100%',
+							overflow: 'hidden',
+							alignContent: 'stretch',
+							boxSizing: 'border-box',
+						};
+						
+						return (
+							<div style={{ position: 'relative', width: '100%', height: '100%', overflow: 'hidden' }}>
+								<div style={groupImageContentStyle}>
+									{currentSlide.map((image, index) => (
+										<div 
+											key={index} 
+											className="media-box" 
+											style={{ 
+												width: '100%', 
+												height: '100%', 
+												minHeight: 0, 
+												minWidth: 0,
+												overflow: 'hidden',
+												display: 'flex',
+												alignItems: 'center',
+												justifyContent: 'center',
+												boxSizing: 'border-box',
+											}}
+										>
+											<img
+												src={getImageUrl(
+													tab.tabContentGroupImage.type === 'DYNAMIC' 
+														? image.image?.url || image.url
+														: image.attr?.all?.url || image.attr?.url || image.url
+												)}
+												alt={
+													tab.tabContentGroupImage.type === 'DYNAMIC' 
+														? image.image?.alt || image.alt || ''
+														: image.attr?.all?.alt || image.attr?.alt || image.alt || ''
+												}
+												className="media-content"
+												style={{ objectFit: objectFit as any, width: '100%', height: '100%' }}
+											/>
+										</div>
+									))}
+								</div>
+								
+								{/* Carousel Navigation for grid slides */}
+								{slides.length > 1 && (
+									<>
+										<button
+											onClick={prevCarouselItem}
+											disabled={carouselIndex === 0}
+											style={{
+												position: 'absolute',
+												left: '10px',
+												top: '50%',
+												transform: 'translateY(-50%)',
+												background: 'rgba(0,0,0,0.5)',
+												color: 'white',
+												border: 'none',
+												borderRadius: '50%',
+												width: '40px',
+												height: '40px',
+												cursor: carouselIndex === 0 ? 'not-allowed' : 'pointer',
+												opacity: carouselIndex === 0 ? 0.5 : 1,
+												display: 'flex',
+												alignItems: 'center',
+												justifyContent: 'center',
+												fontSize: '18px',
+												zIndex: 10,
+											}}
+										>
+											‹
+										</button>
+										<button
+											onClick={nextCarouselItem}
+											disabled={carouselIndex >= slides.length - 1}
+											style={{
+												position: 'absolute',
+												right: '10px',
+												top: '50%',
+												transform: 'translateY(-50%)',
+												background: 'rgba(0,0,0,0.5)',
+												color: 'white',
+												border: 'none',
+												borderRadius: '50%',
+												width: '40px',
+												height: '40px',
+												cursor: carouselIndex >= slides.length - 1 ? 'not-allowed' : 'pointer',
+												opacity: carouselIndex >= slides.length - 1 ? 0.5 : 1,
+												display: 'flex',
+												alignItems: 'center',
+												justifyContent: 'center',
+												fontSize: '18px',
+												zIndex: 10,
+											}}
+										>
+											›
+										</button>
+										<div
+											style={{
+												position: 'absolute',
+												bottom: '10px',
+												left: '50%',
+												transform: 'translateX(-50%)',
+												display: 'flex',
+												gap: '8px',
+												zIndex: 10,
+											}}
+										>
+											{slides.map((_, index) => (
+												<button
+													key={index}
+													onClick={() => goToCarouselItem(index)}
+													style={{
+														width: index === carouselIndex ? '12px' : '8px',
+														height: index === carouselIndex ? '12px' : '8px',
+														borderRadius: '50%',
+														border: 'none',
+														background: index === carouselIndex ? 'white' : 'rgba(255,255,255,0.5)',
+														cursor: 'pointer',
+														transition: 'all 0.3s ease',
+													}}
+												/>
+											))}
+										</div>
+									</>
+								)}
+							</div>
+						);
+					  }
+					  
+					  // Fallback for 1x1 or other cases
+					  const maxImages = getMaxImages();
+					  const displayImages = images.slice(0, maxImages);
+					  
+					  const groupImageContentStyle = {
+						display: 'grid',
+						gridTemplateColumns: getGridColumns(),
+						gridTemplateRows: getGridRows(),
+						gap: '3px',
+						height: '100%',
+						width: '100%',
+						overflow: 'hidden'
+					  };
+					  
+					  return (
+						<div style={groupImageContentStyle}>
+						  {displayImages.map((image, index) => (
+							  <div key={index} className="media-box" style={{ width: '100%', height: '100%', minHeight: 0, minWidth: 0 }}>
+								<img
+								  src={getImageUrl(
+									getImageItemUrl(image, tab.tabContentGroupImage.type)
+								  )}
+								  alt={
+									getImageItemAlt(image, tab.tabContentGroupImage.type)
+								  }
+								  className="media-content"
+								  style={{ objectFit: objectFit as any, width: '100%', height: '100%' }}
+								/>
+							  </div>
+						  ))}
+						</div>
+					  );
+						  
+						}
+						break;
 
-						case 'GROUPVIDEO':
-							if (tab.tabContentGroupVideo) {
-							  // Handle both DYNAMIC and STATIC types
-							  const videos = tab.tabContentGroupVideo.type === 'DYNAMIC' 
+					case 'GROUPVIDEO':
+						if (tab.tabContentGroupVideo) {
+						  // Prioritize showItems, fallback to dynamic/static arrays
+						  const videos = tab.tabContentGroupVideo.showItems && tab.tabContentGroupVideo.showItems.length > 0
+							? tab.tabContentGroupVideo.showItems
+							: (tab.tabContentGroupVideo.type === 'DYNAMIC' 
 								? tab.tabContentGroupVideo.dynamicVideos 
-								: (tab.tabContentGroupVideo.staticVideos || tab.tabContentGroupVideo.showItems);
-								
-							  if (!videos || videos.length === 0) {
-								return <div>No videos available</div>;
-							  }
+								: (tab.tabContentGroupVideo.staticVideos || []));
+							
+						  if (!videos || videos.length === 0) {
+							return <div>No videos available</div>;
+						  }
 						  
-							  // 1x1 layout: carousel display
-							  if (layout === '1x1') {
-								const currentVideo = videos[carouselIndex] || videos[0];
-								const linkUrl = currentVideo ? buildLinkForSlide(currentVideo) : null;
+						  // 1x1 layout: use scrollbar if scroll type is set, otherwise carousel
+						  if (layout === '1x1' && scrollType) {
+							// Use scrollable container with scrollbar - each item takes full width/height
+							const scrollDirection = scrollType === 'horizontal' ? 'row' : 'column';
+							const isDynamic = tab.tabContentGroupVideo.type === 'DYNAMIC';
+							
+							return (
+								<div
+									style={{
+										width: '100%',
+										height: '100%',
+										overflow: scrollType === 'horizontal' ? 'auto' : 'auto',
+										display: 'flex',
+										flexDirection: scrollDirection as any,
+										scrollSnapType: scrollType === 'horizontal' ? 'x mandatory' : 'y mandatory',
+										gap: 0,
+										padding: 0,
+									}}
+									className="scroll-container"
+								>
+									{videos.map((video, index) => (
+										<div
+											key={index}
+											className="media-box"
+											style={{
+												width: scrollType === 'horizontal' ? '100%' : '100%',
+												height: scrollType === 'vertical' ? '100%' : '100%',
+												minWidth: scrollType === 'horizontal' ? '100%' : '100%',
+												minHeight: scrollType === 'vertical' ? '100%' : '100%',
+												flexShrink: 0,
+												scrollSnapAlign: 'start',
+											}}
+										>
+											{renderVideoPlayer(video, isDynamic, 'media-content', { 
+												width: '100%', 
+												height: '100%',
+												objectFit: objectFit as any
+											})}
+										</div>
+									))}
+								</div>
+							);
+						  }
 						  
-								const videoElement = currentVideo ? (
-								  <div className="media-box" style={{ width: '100%', overflow: 'hidden' }}>
-									<video
-									  src={getImageUrl(
-										tab.tabContentGroupVideo.type === 'DYNAMIC' 
-										  ? currentVideo.video?.url 
-										  : currentVideo.attr?.url
-									  )}
-									  title={
-										tab.tabContentGroupVideo.type === 'DYNAMIC' 
-										  ? currentVideo.video?.alt || currentVideo.name
-										  : currentVideo.attr?.alt 								  }
-									  className="media-content"
-									  controls
-									  style={{ width: '100%', height: 'auto', display: 'block' }}
-									/>
-								  </div>
-								) : null;
+						  // 1x1 layout: carousel display (fallback when scroll is not set)
+						  if (layout === '1x1') {
+							const currentVideo = videos[carouselIndex] || videos[0];
+							const isDynamic = tab.tabContentGroupVideo.type === 'DYNAMIC';
+					  
+							const videoElement = currentVideo ? (
+							  <div className="media-box" style={{ width: '100%', height: '100%' }}>
+								{renderVideoPlayer(currentVideo, isDynamic, 'media-content', { 
+									width: '100%', 
+									height: '100%',
+									objectFit: objectFit as any
+								})}
+							  </div>
+							) : null;
 						  
 								return (
 								  <div
 									style={{
 									  position: 'relative',
 									  width: '100%',
+									  height: '100%',
 									  overflow: 'hidden',
+									  display: 'flex',
+									  alignItems: 'stretch',
+									  justifyContent: 'center',
 									}}
 								  >
 									{currentVideo && (
-									  <div style={{ width: '100%' }}>
-										{linkUrl ? (
-										  <a
-											href={linkUrl}
-											target={
-											  currentVideo.link_type === 'EXTERNALLINK'
-												? currentVideo.external_link?.target || '_blank'
-												: '_self'
-											}
-											style={{ textDecoration: 'none', color: 'inherit', display: 'block', width: '100%' }}
-										  >
-											{videoElement}
-										  </a>
-										) : (
-										  videoElement
-										)}
+									  <div style={{ width: '100%', height: '100%', display: 'flex' }}>
+										{videoElement}
 									  </div>
 									)}
 						  
@@ -1056,7 +1537,7 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 								);
 						  }
 					  
-						  // Other layouts: grid display with sliding window carousel
+						  // Other layouts: grid display with limited videos
 						  const getMaxVideos = () => {
 							switch (layout) {
 							  case '1x2': return 2;
@@ -1066,195 +1547,353 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 							}
 						  };
 						  
-						  const itemsPerView = getMaxVideos();
-						  const maxCarouselIndex = getMaxCarouselIndex(videos.length, itemsPerView);
-						  const displayIndices = getSlidingWindowIndices(videos.length, itemsPerView, carouselIndex);
-						  const displayVideos = displayIndices.map(idx => videos[idx]);
-						  const needsCarousel = videos.length > itemsPerView;
-						  
-						  // Navigation handlers specific to this layout
-						  const handleNextVideo = () => {
-							if (carouselIndex < maxCarouselIndex) {
-							  setCarouselIndex((prev) => Math.min(prev + 1, maxCarouselIndex));
-							}
-						  };
-						  
-						  const handlePrevVideo = () => {
-							if (carouselIndex > 0) {
-							  setCarouselIndex((prev) => Math.max(prev - 1, 0));
-							}
-						  };
-						  
-						  // Create dynamic content style for GROUPVIDEO
-						  const groupVideoContentStyle = {
-							display: 'grid',
-							gridTemplateColumns: getGridColumns(),
-							gridTemplateRows: getGridRows(),
-							gap: '3px',
-							width: '100%',
-							overflow: 'hidden'
-						  };
-						  
-						  return (
+					  const isDynamic = tab.tabContentGroupVideo.type === 'DYNAMIC';
+					  
+					  // For grid layouts (1x2, 2x1, 2x2), show one grid per slide
+					  // For 1x1 layout with scroll, show one item at a time
+					  if (layout !== '1x1' && scrollType) {
+						// Group items into slides based on layout
+						const itemsPerSlide = layout === '2x2' ? 4 : 2; // 4 for 2x2, 2 for 1x2/2x1
+						const slides: any[][] = [];
+						for (let i = 0; i < videos.length; i += itemsPerSlide) {
+							slides.push(videos.slice(i, i + itemsPerSlide));
+						}
+						
+						const scrollDirection = scrollType === 'horizontal' ? 'row' : 'column';
+						
+						return (
 							<div
-							  style={{
-								position: 'relative',
-								width: '100%',
-								overflow: 'hidden',
-							  }}
+								style={{
+									width: '100%',
+									height: '100%',
+									overflow: scrollType === 'horizontal' ? 'auto' : 'auto',
+									display: 'flex',
+									flexDirection: scrollDirection as any,
+									scrollSnapType: scrollType === 'horizontal' ? 'x mandatory' : 'y mandatory',
+									gap: 0,
+									padding: 0,
+								}}
+								className="scroll-container"
 							>
-							  <div style={groupVideoContentStyle} className='media-box'>
-								{displayVideos.map((video, displayIndex) => {
-								  const originalIndex = displayIndices[displayIndex];
-								  const linkUrl = buildLinkForSlide(video);
-								  
-								  const videoElement = (
-									<div key={originalIndex} className="media-box" style={{ width: '100%', overflow: 'hidden' }}>
-									  <video
-										src={getImageUrl(
-										  tab.tabContentGroupVideo.type === 'DYNAMIC' 
-											? video.video?.url 
-											: video.attr?.url
-										)}
-										title={
-										  tab.tabContentGroupVideo.type === 'DYNAMIC' 
-											? video.video?.alt || video.name
-											: video.attr?.alt 
-										}
-										className="media-content"
-										controls
-										style={{ width: '100%', height: 'auto', display: 'block' }}
-									  />
-									</div>
-								  );
-						  
-								  return linkUrl ? (
-									<a
-									  key={originalIndex}
-									  href={linkUrl}
-									  target={
-										video.link_type === 'EXTERNALLINK'
-										  ? video.external_link?.target || '_blank'
-										  : '_self'
-									  }
-									  className='media-box'
-									  style={{ width: '100%', display: 'block' }}
+								{slides.map((slideVideos, slideIndex) => (
+									<div
+										key={slideIndex}
+										style={{
+											width: scrollType === 'horizontal' ? '100%' : '100%',
+											height: scrollType === 'vertical' ? '100%' : '100%',
+											minWidth: scrollType === 'horizontal' ? '100%' : '100%',
+											minHeight: scrollType === 'vertical' ? '100%' : '100%',
+											flexShrink: 0,
+											scrollSnapAlign: 'start',
+											display: 'grid',
+											gridTemplateColumns: getGridColumns(),
+											gridTemplateRows: getGridRows(),
+											gap: '3px',
+											overflow: 'hidden',
+											alignContent: 'stretch',
+											boxSizing: 'border-box',
+										}}
 									>
-									  {videoElement}
-									</a>
-								  ) : (
-									<div key={originalIndex} style={{ width: '100%' }}>
-									  {videoElement}
+										{slideVideos.map((video, index) => (
+											<div 
+												key={index} 
+												className="media-box" 
+												style={{ 
+													width: '100%', 
+													height: '100%', 
+													minHeight: 0,
+													overflow: 'hidden',
+													display: 'flex',
+													alignItems: 'center',
+													justifyContent: 'center',
+													boxSizing: 'border-box',
+												}}
+											>
+												{renderVideoPlayer(video, isDynamic, 'media-content', { 
+													width: '100%', 
+													height: '100%',
+													objectFit: objectFit as any
+												})}
+											</div>
+										))}
 									</div>
-								  );
-								})}
-							  </div>
-
-							  {/* Carousel Navigation for Grid Layouts */}
-							  {needsCarousel && (
-								<>
-								  {/* Previous Button */}
-								  <button
-									onClick={handlePrevVideo}
-									disabled={carouselIndex === 0}
-									style={{
-									  position: 'absolute',
-									  left: '10px',
-									  top: '50%',
-									  transform: 'translateY(-50%)',
-									  background: 'rgba(0,0,0,0.5)',
-									  color: 'white',
-									  border: 'none',
-									  borderRadius: '50%',
-									  width: '40px',
-									  height: '40px',
-									  cursor: carouselIndex === 0 ? 'not-allowed' : 'pointer',
-									  opacity: carouselIndex === 0 ? 0.5 : 1,
-									  display: 'flex',
-									  alignItems: 'center',
-									  justifyContent: 'center',
-									  fontSize: '18px',
-									  zIndex: 10,
-									}}
-								  >
-									‹
-								  </button>
-
-								  {/* Next Button */}
-								  <button
-									onClick={handleNextVideo}
-									disabled={carouselIndex >= maxCarouselIndex}
-									style={{
-									  position: 'absolute',
-									  right: '10px',
-									  top: '50%',
-									  transform: 'translateY(-50%)',
-									  background: 'rgba(0,0,0,0.5)',
-									  color: 'white',
-									  border: 'none',
-									  borderRadius: '50%',
-									  width: '40px',
-									  height: '40px',
-									  cursor: carouselIndex >= maxCarouselIndex ? 'not-allowed' : 'pointer',
-									  opacity: carouselIndex >= maxCarouselIndex ? 0.5 : 1,
-									  display: 'flex',
-									  alignItems: 'center',
-									  justifyContent: 'center',
-									  fontSize: '18px',
-									  zIndex: 10,
-									}}
-								  >
-									›
-								  </button>
-
-								  {/* Dots Indicator */}
-								  <div
-									style={{
-									  position: 'absolute',
-									  bottom: '10px',
-									  left: '50%',
-									  transform: 'translateX(-50%)',
-									  display: 'flex',
-									  gap: '8px',
-									  zIndex: 10,
-									}}
-								  >
-									{Array.from({ length: maxCarouselIndex + 1 }, (_, index) => (
-									  <button
+								))}
+							</div>
+						);
+					  }
+					  
+					  // For 1x1 layout with scroll, show one item at a time (carousel-like)
+					  if (layout === '1x1' && scrollType) {
+						const scrollDirection = scrollType === 'horizontal' ? 'row' : 'column';
+						return (
+							<div
+								style={{
+									width: '100%',
+									height: '100%',
+									overflow: scrollType === 'horizontal' ? 'auto' : 'auto',
+									display: 'flex',
+									flexDirection: scrollDirection as any,
+									scrollSnapType: scrollType === 'horizontal' ? 'x mandatory' : 'y mandatory',
+									gap: 0,
+									padding: 0,
+								}}
+								className="scroll-container"
+							>
+								{videos.map((video, index) => (
+									<div
 										key={index}
-										onClick={() => goToCarouselItem(index)}
+										className="media-box"
 										style={{
-										  width: index === carouselIndex ? '12px' : '8px',
-										  height: index === carouselIndex ? '12px' : '8px',
-										  borderRadius: '50%',
-										  border: 'none',
-										  background: index === carouselIndex ? 'white' : 'rgba(255,255,255,0.5)',
-										  cursor: 'pointer',
-										  transition: 'all 0.3s ease',
+											width: scrollType === 'horizontal' ? '100%' : '100%',
+											height: scrollType === 'vertical' ? '100%' : '100%',
+											minWidth: scrollType === 'horizontal' ? '100%' : '100%',
+											minHeight: scrollType === 'vertical' ? '100%' : '100%',
+											flexShrink: 0,
+											scrollSnapAlign: 'start',
 										}}
-									  />
+									>
+										{renderVideoPlayer(video, isDynamic, 'media-content', { 
+											width: '100%', 
+											height: '100%',
+											objectFit: objectFit as any
+										})}
+									</div>
+								))}
+							</div>
+						);
+					  }
+					  
+					  // Grid layout without scroll - show one grid per slide with carousel navigation
+					  if (layout !== '1x1') {
+						// Group items into slides based on layout
+						const itemsPerSlide = layout === '2x2' ? 4 : 2; // 4 for 2x2, 2 for 1x2/2x1
+						const slides: any[][] = [];
+						for (let i = 0; i < videos.length; i += itemsPerSlide) {
+							slides.push(videos.slice(i, i + itemsPerSlide));
+						}
+						
+						const currentSlide = slides[carouselIndex] || slides[0] || [];
+						
+						const groupVideoContentStyle: React.CSSProperties = {
+							display: 'grid',
+							gridTemplateColumns: getGridColumns(),
+							gridTemplateRows: getGridRows(),
+							gap: '3px',
+							height: '100%',
+							width: '100%',
+							overflow: 'hidden',
+							alignContent: 'stretch',
+							boxSizing: 'border-box',
+						};
+						
+						return (
+							<div style={{ position: 'relative', width: '100%', height: '100%', overflow: 'hidden' }}>
+								<div style={groupVideoContentStyle}>
+									{currentSlide.map((video, index) => (
+										<div 
+											key={index} 
+											className="media-box" 
+											style={{ 
+												width: '100%', 
+												height: '100%', 
+												minHeight: 0, 
+												minWidth: 0,
+												overflow: 'hidden',
+												display: 'flex',
+												alignItems: 'center',
+												justifyContent: 'center',
+												boxSizing: 'border-box',
+											}}
+										>
+											{renderVideoPlayer(video, isDynamic, 'media-content', { 
+												width: '100%', 
+												height: '100%',
+												objectFit: objectFit as any
+											})}
+										</div>
 									))}
-								  </div>
-								</>
-							  )}
+								</div>
+								
+								{/* Carousel Navigation for grid slides */}
+								{slides.length > 1 && (
+									<>
+										<button
+											onClick={prevCarouselItem}
+											disabled={carouselIndex === 0}
+											style={{
+												position: 'absolute',
+												left: '10px',
+												top: '50%',
+												transform: 'translateY(-50%)',
+												background: 'rgba(0,0,0,0.5)',
+												color: 'white',
+												border: 'none',
+												borderRadius: '50%',
+												width: '40px',
+												height: '40px',
+												cursor: carouselIndex === 0 ? 'not-allowed' : 'pointer',
+												opacity: carouselIndex === 0 ? 0.5 : 1,
+												display: 'flex',
+												alignItems: 'center',
+												justifyContent: 'center',
+												fontSize: '18px',
+												zIndex: 10,
+											}}
+										>
+											‹
+										</button>
+										<button
+											onClick={nextCarouselItem}
+											disabled={carouselIndex >= slides.length - 1}
+											style={{
+												position: 'absolute',
+												right: '10px',
+												top: '50%',
+												transform: 'translateY(-50%)',
+												background: 'rgba(0,0,0,0.5)',
+												color: 'white',
+												border: 'none',
+												borderRadius: '50%',
+												width: '40px',
+												height: '40px',
+												cursor: carouselIndex >= slides.length - 1 ? 'not-allowed' : 'pointer',
+												opacity: carouselIndex >= slides.length - 1 ? 0.5 : 1,
+												display: 'flex',
+												alignItems: 'center',
+												justifyContent: 'center',
+												fontSize: '18px',
+												zIndex: 10,
+											}}
+										>
+											›
+										</button>
+										<div
+											style={{
+												position: 'absolute',
+												bottom: '10px',
+												left: '50%',
+												transform: 'translateX(-50%)',
+												display: 'flex',
+												gap: '8px',
+												zIndex: 10,
+											}}
+										>
+											{slides.map((_, index) => (
+												<button
+													key={index}
+													onClick={() => goToCarouselItem(index)}
+													style={{
+														width: index === carouselIndex ? '12px' : '8px',
+														height: index === carouselIndex ? '12px' : '8px',
+														borderRadius: '50%',
+														border: 'none',
+														background: index === carouselIndex ? 'white' : 'rgba(255,255,255,0.5)',
+														cursor: 'pointer',
+														transition: 'all 0.3s ease',
+													}}
+												/>
+											))}
+										</div>
+									</>
+								)}
 							</div>
-						  );
+						);
+					  }
+					  
+					  // Fallback for 1x1 or other cases
+					  const maxVideos = getMaxVideos();
+					  const displayVideos = videos.slice(0, maxVideos);
+					  
+					  const groupVideoContentStyle = {
+						display: 'grid',
+						gridTemplateColumns: getGridColumns(),
+						gridTemplateRows: getGridRows(),
+						gap: '3px',
+						height: '100%',
+						width: '100%',
+						overflow: 'hidden'
+					  };
+					  
+					  return (
+						<div style={groupVideoContentStyle}>
+						  {displayVideos.map((video, index) => (
+							  <div 
+								key={index} 
+								className="media-box" 
+								style={{ 
+									width: '100%', 
+									height: '100%', 
+									minHeight: 0, 
+									minWidth: 0,
+									display: 'flex',
+									alignItems: 'stretch'
+								}}
+							  >
+								{renderVideoPlayer(video, isDynamic, 'media-content', { 
+									width: '100%', 
+									height: '100%',
+									objectFit: objectFit as any
+								})}
+							  </div>
+						  ))}
+						</div>
+					  );
 						  
 						}
 						break;
 					  
 						case 'GROUPPRODUCT':
 							if (tab.tabContentGroupProduct) {
-							  // Handle both DYNAMIC and STATIC types
-							  const products = tab.tabContentGroupProduct.type === 'DYNAMIC' 
-								? tab.tabContentGroupProduct.dynamicProducts 
-								: ( tab.tabContentGroupProduct.showItems || []);
-							  
+							  // Prioritize showItems, fallback to dynamic/static arrays
+							  const products = tab.tabContentGroupProduct.showItems && tab.tabContentGroupProduct.showItems.length > 0
+								? tab.tabContentGroupProduct.showItems
+								: (tab.tabContentGroupProduct.type === 'DYNAMIC' 
+									? tab.tabContentGroupProduct.dynamic?.list 
+									: tab.tabContentGroupProduct.staticProducts);
+							
 							  if (!products || products.length === 0) {
 								return <div>No products available</div>;
 							  }
 						  
-							  // 1x1 layout: Carousel view
+							  // 1x1 layout: use scrollbar if scroll type is set, otherwise carousel
+							  if (layout === '1x1' && scrollType) {
+								// Use scrollable container with scrollbar - each item takes full width/height
+								const scrollDirection = scrollType === 'horizontal' ? 'row' : 'column';
+								
+								return (
+									<div
+										style={{
+											width: '100%',
+											height: '100%',
+											overflow: scrollType === 'horizontal' ? 'auto' : 'auto',
+											display: 'flex',
+											flexDirection: scrollDirection as any,
+											scrollSnapType: scrollType === 'horizontal' ? 'x mandatory' : 'y mandatory',
+											gap: 0,
+											padding: 0,
+										}}
+										className="scroll-container"
+									>
+										{products.map((product: any, index: number) => (
+											<div
+												key={index}
+												style={{
+													width: scrollType === 'horizontal' ? '100%' : '100%',
+													height: scrollType === 'vertical' ? '100%' : '100%',
+													minWidth: scrollType === 'horizontal' ? '100%' : '100%',
+													minHeight: scrollType === 'vertical' ? '100%' : '100%',
+													flexShrink: 0,
+													scrollSnapAlign: 'start',
+												}}
+											>
+												<ProductCard product={product} layout={layout} />
+											</div>
+										))}
+									</div>
+								);
+							  }
+							  
+							  // 1x1 layout: Carousel view (fallback when scroll is not set)
 							  if (layout === '1x1') {
 								const currentProduct = products[carouselIndex] || products[0];
 						  
@@ -1263,12 +1902,15 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 									style={{
 									  position: 'relative',
 									  width: '100%',
-									  height: `${props.height}px`,
+									  height: '100%', // Full height of tab content
 									  overflow: 'hidden',
+									  display: 'flex',
+									  alignItems: 'stretch',
+									  justifyContent: 'center',
 									}}
 								  >
 									{currentProduct && (
-									  <div style={{ width: '100%', height: '100%' }}>
+									  <div style={{ width: '100%', height: '100%', display: 'flex' }}>
 										<ProductCard product={currentProduct} layout={layout} />
 									  </div>
 									)}
@@ -1345,7 +1987,7 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 											zIndex: 10,
 										  }}
 										>
-										  {products.map((_, index) => (
+										  {products.map((_: any, index: number) => (
 											<button
 											  key={index}
 											  onClick={() => goToCarouselItem(index)}
@@ -1370,7 +2012,7 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 								);
 							  }
 						  
-							  // Other layouts: Grid view with sliding window carousel
+							  // Other layouts: Grid view with limited products
 							  const getMaxProducts = () => {
 								switch (layout) {
 								  case '1x2': return 2;
@@ -1380,198 +2022,245 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 								}
 							  };
 							  
-							  const itemsPerView = getMaxProducts();
-							  const maxCarouselIndex = getMaxCarouselIndex(products.length, itemsPerView);
-							  const displayIndices = getSlidingWindowIndices(products.length, itemsPerView, carouselIndex);
-							  const displayProducts = displayIndices.map(idx => products[idx]);
-							  const needsCarousel = products.length > itemsPerView;
-							  
-							  // Debug logging
-							  console.log('GROUPPRODUCT Grid Layout:', {
-								layout,
-								totalProducts: products.length,
-								itemsPerView,
-								carouselIndex,
-								maxCarouselIndex,
-								displayIndices,
-								needsCarousel
-							  });
-							  
-							  // Navigation handlers specific to this layout
-							  const handleNextProduct = () => {
-								console.log('Next clicked, current:', carouselIndex, 'max:', maxCarouselIndex);
-								if (carouselIndex < maxCarouselIndex) {
-								  setCarouselIndex((prev) => {
-									const next = Math.min(prev + 1, maxCarouselIndex);
-									console.log('Setting carousel index to:', next);
-									return next;
-								  });
+							  // For grid layouts (1x2, 2x1, 2x2), show one grid per slide
+							  if (layout !== '1x1' && scrollType) {
+								// Group items into slides based on layout
+								const itemsPerSlide = layout === '2x2' ? 4 : 2; // 4 for 2x2, 2 for 1x2/2x1
+								const slides: any[][] = [];
+								for (let i = 0; i < products.length; i += itemsPerSlide) {
+									slides.push(products.slice(i, i + itemsPerSlide));
 								}
-							  };
+								
+								const scrollDirection = scrollType === 'horizontal' ? 'row' : 'column';
+								
+								return (
+									<div
+										style={{
+											width: '100%',
+											height: '100%',
+											overflow: scrollType === 'horizontal' ? 'auto' : 'auto',
+											display: 'flex',
+											flexDirection: scrollDirection as any,
+											scrollSnapType: scrollType === 'horizontal' ? 'x mandatory' : 'y mandatory',
+											gap: 0,
+											padding: 0,
+										}}
+										className="scroll-container"
+									>
+										{slides.map((slideProducts, slideIndex) => (
+											<div
+												key={slideIndex}
+												style={{
+													width: scrollType === 'horizontal' ? '100%' : '100%',
+													height: scrollType === 'vertical' ? '100%' : '100%',
+													minWidth: scrollType === 'horizontal' ? '100%' : '100%',
+													minHeight: scrollType === 'vertical' ? '100%' : '100%',
+													flexShrink: 0,
+													scrollSnapAlign: 'start',
+													display: 'grid',
+													gridTemplateColumns: getGridColumns(),
+													gridTemplateRows: getGridRows(),
+													gap: '12px',
+													padding: '12px',
+													overflow: 'hidden',
+													alignContent: 'stretch'
+												}}
+											>
+												{slideProducts.map((product: any, index: number) => (
+													<div
+														key={index}
+														style={{
+															width: '100%',
+															height: '100%',
+															maxHeight: '100%',
+															overflow: 'hidden',
+															display: 'flex',
+															alignItems: 'stretch',
+															justifyContent: 'center',
+															minHeight: 0,
+															minWidth: 0
+														}}
+													>
+														<ProductCard product={product} layout={layout} />
+													</div>
+												))}
+											</div>
+										))}
+									</div>
+								);
+							  }
 							  
-							  const handlePrevProduct = () => {
-								console.log('Prev clicked, current:', carouselIndex);
-								if (carouselIndex > 0) {
-								  setCarouselIndex((prev) => {
-									const next = Math.max(prev - 1, 0);
-									console.log('Setting carousel index to:', next);
-									return next;
-								  });
+							  // Grid layout without scroll - show one grid per slide with carousel navigation
+							  if (layout !== '1x1') {
+								// Group items into slides based on layout
+								const itemsPerSlide = layout === '2x2' ? 4 : 2; // 4 for 2x2, 2 for 1x2/2x1
+								const slides: any[][] = [];
+								for (let i = 0; i < products.length; i += itemsPerSlide) {
+									slides.push(products.slice(i, i + itemsPerSlide));
 								}
-							  };
+								
+								const currentSlide = slides[carouselIndex] || slides[0] || [];
+								
+								const groupProductContentStyle = {
+									display: 'grid',
+									gridTemplateColumns: getGridColumns(),
+									gridTemplateRows: getGridRows(),
+									gap: '12px',
+									height: '100%',
+									width: '100%',
+									overflow: 'hidden',
+									padding: '12px',
+									alignItems: 'stretch',
+									alignContent: 'stretch'
+								};
+								
+								return (
+									<div style={{ position: 'relative', width: '100%', height: '100%' }}>
+										<div style={groupProductContentStyle}>
+											{currentSlide.map((product: any, index: number) => (
+												<div
+													key={index}
+													style={{
+														width: '100%',
+														height: '100%',
+														maxHeight: '100%',
+														overflow: 'hidden',
+														display: 'flex',
+														alignItems: 'stretch',
+														justifyContent: 'center',
+														minHeight: 0,
+														minWidth: 0
+													}}
+												>
+													<ProductCard product={product} layout={layout} />
+												</div>
+											))}
+										</div>
+										
+										{/* Carousel Navigation for grid slides */}
+										{slides.length > 1 && (
+											<>
+												<button
+													onClick={prevCarouselItem}
+													disabled={carouselIndex === 0}
+													style={{
+														position: 'absolute',
+														left: '10px',
+														top: '50%',
+														transform: 'translateY(-50%)',
+														background: 'rgba(0,0,0,0.5)',
+														color: 'white',
+														border: 'none',
+														borderRadius: '50%',
+														width: '40px',
+														height: '40px',
+														cursor: carouselIndex === 0 ? 'not-allowed' : 'pointer',
+														opacity: carouselIndex === 0 ? 0.5 : 1,
+														display: 'flex',
+														alignItems: 'center',
+														justifyContent: 'center',
+														fontSize: '18px',
+														zIndex: 10,
+													}}
+												>
+													‹
+												</button>
+												<button
+													onClick={nextCarouselItem}
+													disabled={carouselIndex >= slides.length - 1}
+													style={{
+														position: 'absolute',
+														right: '10px',
+														top: '50%',
+														transform: 'translateY(-50%)',
+														background: 'rgba(0,0,0,0.5)',
+														color: 'white',
+														border: 'none',
+														borderRadius: '50%',
+														width: '40px',
+														height: '40px',
+														cursor: carouselIndex >= slides.length - 1 ? 'not-allowed' : 'pointer',
+														opacity: carouselIndex >= slides.length - 1 ? 0.5 : 1,
+														display: 'flex',
+														alignItems: 'center',
+														justifyContent: 'center',
+														fontSize: '18px',
+														zIndex: 10,
+													}}
+												>
+													›
+												</button>
+												<div
+													style={{
+														position: 'absolute',
+														bottom: '10px',
+														left: '50%',
+														transform: 'translateX(-50%)',
+														display: 'flex',
+														gap: '8px',
+														zIndex: 10,
+													}}
+												>
+													{slides.map((_, index) => (
+														<button
+															key={index}
+															onClick={() => goToCarouselItem(index)}
+															style={{
+																width: index === carouselIndex ? '12px' : '8px',
+																height: index === carouselIndex ? '12px' : '8px',
+																borderRadius: '50%',
+																border: 'none',
+																background: index === carouselIndex ? 'white' : 'rgba(255,255,255,0.5)',
+																cursor: 'pointer',
+																transition: 'all 0.3s ease',
+															}}
+														/>
+													))}
+												</div>
+											</>
+										)}
+									</div>
+								);
+							  }
+							  
+							  // Fallback for 1x1 or other cases
+							  const maxProducts = getMaxProducts();
+							  const displayProducts = products.slice(0, maxProducts);
 							  
-							  // Create dynamic content style for GROUPPRODUCT
 							  const groupProductContentStyle = {
 								display: 'grid',
 								gridTemplateColumns: getGridColumns(),
 								gridTemplateRows: getGridRows(),
 								gap: '12px',
-								height: `${props.height}px`, // Use TabComponent height for group products
+								height: '100%',
+								width: '100%',
 								overflow: 'hidden',
 								padding: '12px',
 								alignItems: 'stretch',
 							  };
 							  
 							  return (
-								<div
-								  style={{
-									position: 'relative',
-									width: '100%',
-									height: `${props.height}px`,
-									overflow: 'hidden',
-								  }}
-								>
-								  <div style={groupProductContentStyle}>
-									{displayProducts.map((product, displayIndex) => {
-									  const originalIndex = displayIndices[displayIndex];
-									  return (
-										<div
-										  key={originalIndex}
-										  style={{
-											width: '100%',
-											display: 'flex',
-											alignItems: 'stretch',
-											justifyContent: 'center',
-											minHeight: '200px',
-										  }}
-										>
-										  <ProductCard product={product} layout={layout} />
-										</div>
-									  );
-									})}
-								  </div>
-
-								  {/* Carousel Navigation for Grid Layouts */}
-								  {needsCarousel && (
-									<>
-									  {/* Previous Button */}
-									  <button
-										onClick={(e) => {
-										  e.preventDefault();
-										  e.stopPropagation();
-										  handlePrevProduct();
-										}}
-										disabled={carouselIndex === 0}
-										style={{
-										  position: 'absolute',
-										  left: '10px',
-										  top: '50%',
-										  transform: 'translateY(-50%)',
-										  background: carouselIndex === 0 ? 'rgba(0,0,0,0.3)' : 'rgba(0,0,0,0.7)',
-										  color: 'white',
-										  border: 'none',
-										  borderRadius: '50%',
-										  width: '40px',
-										  height: '40px',
-										  cursor: carouselIndex === 0 ? 'not-allowed' : 'pointer',
-										  opacity: carouselIndex === 0 ? 0.5 : 1,
-										  display: 'flex',
-										  alignItems: 'center',
-										  justifyContent: 'center',
-										  fontSize: '24px',
-										  fontWeight: 'bold',
-										  zIndex: 100,
-										  pointerEvents: 'auto',
-										  transition: 'all 0.3s ease',
-										}}
-									  >
-										‹
-									  </button>
-
-									  {/* Next Button */}
-									  <button
-										onClick={(e) => {
-										  e.preventDefault();
-										  e.stopPropagation();
-										  handleNextProduct();
-										}}
-										disabled={carouselIndex >= maxCarouselIndex}
-										style={{
-										  position: 'absolute',
-										  right: '10px',
-										  top: '50%',
-										  transform: 'translateY(-50%)',
-										  background: carouselIndex >= maxCarouselIndex ? 'rgba(0,0,0,0.3)' : 'rgba(0,0,0,0.7)',
-										  color: 'white',
-										  border: 'none',
-										  borderRadius: '50%',
-										  width: '40px',
-										  height: '40px',
-										  cursor: carouselIndex >= maxCarouselIndex ? 'not-allowed' : 'pointer',
-										  opacity: carouselIndex >= maxCarouselIndex ? 0.5 : 1,
-										  display: 'flex',
-										  alignItems: 'center',
-										  justifyContent: 'center',
-										  fontSize: '24px',
-										  fontWeight: 'bold',
-										  zIndex: 100,
-										  pointerEvents: 'auto',
-										  transition: 'all 0.3s ease',
-										}}
-									  >
-										›
-									  </button>
-
-									  {/* Dots Indicator */}
-									  <div
-										style={{
-										  position: 'absolute',
-										  bottom: '10px',
-										  left: '50%',
-										  transform: 'translateX(-50%)',
-										  display: 'flex',
-										  gap: '8px',
-										  zIndex: 100,
-										  pointerEvents: 'auto',
-										}}
-									  >
-										{Array.from({ length: maxCarouselIndex + 1 }, (_, index) => (
-										  <button
-											key={index}
-											onClick={(e) => {
-											  e.preventDefault();
-											  e.stopPropagation();
-											  goToCarouselItem(index);
-											}}
-											style={{
-											  width: index === carouselIndex ? '12px' : '8px',
-											  height: index === carouselIndex ? '12px' : '8px',
-											  borderRadius: '50%',
-											  border: '2px solid white',
-											  background: index === carouselIndex ? 'white' : 'rgba(255,255,255,0.6)',
-											  cursor: 'pointer',
-											  transition: 'all 0.3s ease',
-											  pointerEvents: 'auto',
-											}}
-										  />
-										))}
-									  </div>
-									</>
-								  )}
+								<div style={groupProductContentStyle}>
+								  {displayProducts.map((product: any, index: number) => (
+									<div
+									  key={index}
+									  style={{
+										width: '100%',
+										height: '100%',
+										display: 'flex',
+										alignItems: 'stretch',
+										justifyContent: 'center',
+										minHeight: 0,
+										minWidth: 0
+									  }}
+									>
+									  <ProductCard product={product} layout={layout} />
 								</div>
-							  );
-							}
-							break;
+							))}
+						</div>
+					);
+				}
+				break;
 
 			default:
 				return (
@@ -1588,39 +2277,74 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 		}
 
 		return null;
-	};
-
-	const tabs = props.tabs || [];
-	
-	// Get dynamic minHeight based on media components
-	const getTabMinHeight = (): string | undefined => {
-		if (hasMediaComponents()) {
-			return undefined; // Remove minHeight constraint for media components
+		} catch (error: any) {
+			console.error('Error rendering tab content:', error);
+			return (
+				<div style={{
+					display: 'flex',
+					flexDirection: 'column',
+					alignItems: 'center',
+					justifyContent: 'center',
+					height: '100%',
+					padding: '20px',
+					backgroundColor: '#f8f9fa',
+					borderRadius: '8px'
+				}}>
+					<div style={{ color: '#dc3545', fontSize: '16px', marginBottom: '8px' }}>
+						⚠️ Failed to render tab content
+					</div>
+					<div style={{ color: '#6c757d', fontSize: '12px', textAlign: 'center' }}>
+						{error?.message || 'An error occurred while rendering this tab'}
+					</div>
+				</div>
+			);
 		}
-		return `${props.height}px`;
 	};
 
-	return (
-		<div style={{
-			width: '100%',
-			minHeight: getTabMinHeight(),
-			backgroundColor: '#ffffff',
-			overflow: 'hidden',
-			boxShadow: '0 4px 20px rgba(0,0,0,0.08)',
-			border: '1px solid #e5e7eb'
-		}}>
+	const isVertical = props.orientation === 'vertical';
+
+	// Render function wrapped in error handling
+	const renderComponent = () => {
+		try {
+			// Validate tabs array
+			if (!Array.isArray(tabs) || tabs.length === 0) {
+				return renderFallback();
+			}
+
+			return (
+			<div style={{
+				width: '100%',
+				height: `${props.height}px`,
+				backgroundColor: '#ffffff',
+				overflow: 'hidden',
+				boxShadow: '0 4px 20px rgba(0,0,0,0.08)',
+				border: '1px solid #e5e7eb',
+				display: 'flex',
+				flexDirection: isVertical ? 'row' : 'column'
+			}}>
 			{/* Header Section */}
 			<div style={{
 				display: 'flex',
-				alignItems: 'center',
-				justifyContent: 'space-between',
-				padding: '20px 32px',
+				flexDirection: isVertical ? 'column' : 'row',
+				alignItems: isVertical ? 'stretch' : 'center',
+				justifyContent: isVertical ? 'space-between' : 'space-between',
+				padding: isVertical ? '20px 16px' : '20px 32px',
 				backgroundColor: '#ffffff',
-				borderBottom: '1px solid #e5e7eb'
+				borderBottom: isVertical ? 'none' : '1px solid #e5e7eb',
+				borderRight: isVertical ? '1px solid #e5e7eb' : 'none',
+				width: isVertical ? '200px' : '100%',
+				minWidth: isVertical ? '180px' : 'auto',
+				flexShrink: 0
 			}}>
 				{/* Title */}
 				{props.showTitle && (
-					<h1 style={getTitleStyle()}>
+					<h1 style={{
+						...getTitleStyle(),
+						marginBottom: isVertical ? '16px' : '0',
+						textAlign: isVertical ? 'left' : getTitleStyle().textAlign,
+						writingMode: isVertical ? 'horizontal-tb' : 'initial',
+						flexShrink: 0
+					}}>
 						{props?.title?.titleText}
 					</h1>
 				)}
@@ -1628,13 +2352,25 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 				{/* Tab Headers */}
 				<div style={{
 					display: 'flex',
-					alignItems: 'center',
+					flexDirection: isVertical ? 'column' : 'row',
+					alignItems: isVertical ? 'stretch' : 'center',
+					gap: isVertical ? '8px' : '0',
+					width: isVertical ? '100%' : 'auto',
+					marginLeft: isVertical ? '0' : 'auto'
 				}}>
 					{tabs.map((tab, index) => (
 						<React.Fragment key={index}>
 							<button
-								style={getTabHeaderStyle(index)}
+								style={{
+									...getTabHeaderStyle(index),
+									width: isVertical ? '100%' : 'auto',
+									textAlign: isVertical ? 'left' : 'center',
+									justifyContent: isVertical ? 'flex-start' : 'center',
+									marginBottom: isVertical ? '0' : '0'
+								}}
 								onClick={() => handleTabChange(index)}
+								onMouseEnter={() => setHoveredTab(index)}
+								onMouseLeave={() => setHoveredTab(null)}
 							>
 								{tab.tabHeaderType === 'text' ? (
 									tab.tabHeaderText
@@ -1649,8 +2385,8 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 								)}
 							</button>
 
-							{/* Add separator | except after last tab */}
-							{index < tabs.length - 1 && (
+							{/* Add separator - only for horizontal orientation */}
+							{!isVertical && index < tabs.length - 1 && (
 								<span style={{ color: '#9ca3af', margin: '0 4px' }}>|</span>
 							)}
 						</React.Fragment>
@@ -1662,19 +2398,31 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 			{/* Tab Content */}
 			<div style={{
 				position: 'relative',
-				height: 'auto'
+				flex: 1,
+				overflow: 'hidden',
+				minHeight: 0, // Allows flex child to shrink below content size
+				width: isVertical ? 'calc(100% - 200px)' : '100%'
 			}}>
 				{tabs.length > 0 && tabs[activeTab] && (
 					<div style={{
 						width: '100%',
-						
+						height: '100%'
 					}}>
 						{renderTabContent(tabs[activeTab])}
 					</div>
 				)}
 			</div>
 		</div>
-	);
+			);
+		} catch (error: any) {
+			console.error('Error rendering TabComponent:', error);
+			setHasError(true);
+			setErrorMessage(error?.message || 'Failed to render tab component');
+			return renderFallback();
+		}
+	};
+
+	return renderComponent();
 };
 
 export default TabComponent;