tee3apps-cms-sdk-react 0.0.34 → 0.0.36

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

@@ -127,6 +127,8 @@ export interface TabComponentProps {
 	showTitle: boolean;
 	title: TitleStyle;
 	header: HeaderStyle;
+	showsp?: boolean;
+	showdiscount?: boolean;
 	tabs: TabItem[] | TabsData; // Support both array (new) and object with locale keys (old)
 }
 
@@ -141,14 +143,14 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 	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 
+	const tabs = Array.isArray(props.tabs)
+		? props.tabs
 		: (props.tabs?.all || props.tabs?.['en-IN'] || []);
 
 	// Validate props structure
@@ -163,8 +165,8 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 			}
 
 			// Check if tabs is array or object with valid structure
-			const tabs = Array.isArray(props.tabs) 
-				? props.tabs 
+			const tabs = Array.isArray(props.tabs)
+				? props.tabs
 				: (props.tabs?.all || props.tabs?.['en-IN'] || []);
 
 			if (!Array.isArray(tabs) || tabs.length === 0) {
@@ -301,7 +303,7 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 	// Helper function to extract YouTube video ID from various URL formats
 	const getYouTubeVideoId = (url: string): string | null => {
 		if (!url) return null;
-		
+
 		// Handle various YouTube URL formats
 		const patterns = [
 			/(?:https?:\/\/)?(?:www\.)?youtube\.com\/watch\?v=([^&]+)/,
@@ -315,7 +317,7 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 				return match[1];
 			}
 		}
-		
+
 		return null;
 	};
 
@@ -324,19 +326,19 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 		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';
+			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) {
@@ -345,21 +347,21 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 			// 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 
+		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 
+		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 
+		const loop = isDynamic
 			? (videoData?.video?.loop === true)
 			: (videoData?.attr?.all?.loop === true || videoData?.attr?.loop === true);
 
@@ -401,7 +403,7 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 		// Fallback to HTML5 video - always use Linode URL
 		const finalVideoUrl = getImageUrl(videoUrl);
 		console.log('Rendering HTML5 video with URL:', finalVideoUrl);
-		
+
 		// Create a video component with proper handling for no-controls videos
 		const VideoComponent = () => {
 			const videoRef = useRef<HTMLVideoElement>(null);
@@ -446,12 +448,12 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 					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, 
+					style={{
+						width: '100%',
+						height: '100%',
+						objectFit: (props.objectFit || 'contain') as any,
 						cursor: controls ? 'default' : 'pointer',
-						...style 
+						...style
 					}}
 					onError={(e) => {
 						console.error('Video failed to load:', e, 'URL:', finalVideoUrl);
@@ -541,8 +543,8 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 		const sp = product.price?.SP;
 		const offer = calculateOffer(mrp, sp);
 
-		const cardMode = layout === '1x1' ? 'carousel-mode' : layout === '2x1' ? 'layout-2x1' : 'grid-mode';	
-		
+		const cardMode = layout === '1x1' ? 'carousel-mode' : layout === '2x1' ? 'layout-2x1' : 'grid-mode';
+
 		const cardContent = (
 			<>
 				{/* Product Image */}
@@ -584,7 +586,7 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 							))}
 						</div>
 					)}
-{/* {layout === '1x1' && product.variant && product.variant.length > 0 && (
+					{/* {layout === '1x1' && product.variant && product.variant.length > 0 && (
 						<div className="product-variants">
 							{product.variant.map((variant: any, index: number) => (
 								<span key={index} className="variant-tag">
@@ -595,17 +597,27 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 					)} */}
 					{/* Pricing */}
 					<div className="product-pricing">
-						<div className="price-row">
-							<span className="current-price">{formatPrice(sp)}</span>
-							{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>
-									{offer > 0 && <span className="offer-badge">{offer}% OFF</span>}
-								</>
+						<div className="price-row" style={{ display: 'flex', flexDirection: 'column', gap: '2px' }}>
+							{props.showsp !== false && (
+								<div style={{ display: 'flex', alignItems: 'center', gap: '6px', flexWrap: 'wrap' }}>
+									<span className="current-price" style={{ fontSize: '15px', fontWeight: 'bold' }}>
+										SP: {formatPrice(sp)} (incl of all tax)
+									</span>
+									{props.showdiscount !== false && 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" style={{ fontSize: '12px', color: '#666', textDecoration: 'line-through' }}>
+												MRP: {formatPrice(mrp)}
+											</span>
+										)}
+								</div>
+							)}
+							{props.showdiscount !== false && offer > 0 && (
+								<span className="offer-badge" style={{ fontSize: '11px', color: '#28a745', fontWeight: 'bold', width: 'fit-content' }}>
+									{offer}% OFF
+								</span>
 							)}
 						</div>
 					</div>
@@ -622,11 +634,11 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 						</div>
 					)}
 
-					
+
 				</div>
 			</>
 		);
-		
+
 		const productCode = typeof product.code === 'string' ? product.code : getDisplayText(product.code) || product.sku || '';
 		return (
 			<a href={productCode ? `/${productCode}` : '#'} className={`product-card ${cardMode}`} style={{ textDecoration: 'none', color: 'inherit' }}>
@@ -641,34 +653,34 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 			// 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.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.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.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]);
@@ -764,618 +776,113 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 
 			const layout = getCurrentLayout(tab);
 			console.warn(tab)
-		const getGridColumns = () => {
-			switch (layout) {
-				case '1x1': return '1fr';
-				case '1x2': return 'repeat(2, 1fr)';
-				case '2x1': return '1fr';
-				case '2x2': return 'repeat(2, 1fr)';
-				default: return '1fr';
-			}
-		};
-
-		const getGridRows = () => {
-			switch (layout) {
-				case '1x1': return '1fr';
-				case '1x2': return '1fr';
-				case '2x1': return 'repeat(2, minmax(0, 1fr))';
-				case '2x2': return 'repeat(2, minmax(0, 1fr))';
-				default: return '1fr';
-			}
-		};
-
-		const contentStyle = {
-			display: 'grid',
-			gridTemplateColumns: getGridColumns(),
-			gridTemplateRows: getGridRows(),
-			gap: '3px',
-			height: '100%', // force tab content height
-			overflow: 'hidden'
-		  };
-		  
-
-		switch (tab.tabContentType) {
-			case 'IMAGE':
-				if (tab.tabContentImage) {
-					return (
-						<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>
-					);
+			const getGridColumns = () => {
+				switch (layout) {
+					case '1x1': return '1fr';
+					case '1x2': return 'repeat(2, 1fr)';
+					case '2x1': return '1fr';
+					case '2x2': return 'repeat(2, 1fr)';
+					default: return '1fr';
 				}
-				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">
-							{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(videoUrl)}
-									controls
-									className="media-content"
-									style={{ width: '100%', height: '100%', objectFit: objectFit as any }}
-								/>
-							)}
-						</div>
-					</div>
-					);
+			};
+
+			const getGridRows = () => {
+				switch (layout) {
+					case '1x1': return '1fr';
+					case '1x2': return '1fr';
+					case '2x1': return 'repeat(2, minmax(0, 1fr))';
+					case '2x2': return 'repeat(2, minmax(0, 1fr))';
+					default: return '1fr';
 				}
-				break;
+			};
 
-				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 || []));
-						
-					  if (!images || images.length === 0) {
-						return <div>No images available</div>;
-					  }
-					  
-					  // 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 contentStyle = {
+				display: 'grid',
+				gridTemplateColumns: getGridColumns(),
+				gridTemplateRows: getGridRows(),
+				gap: '3px',
+				height: '100%', // force tab content height
+				overflow: 'hidden'
+			};
+
+
+			switch (tab.tabContentType) {
+				case 'IMAGE':
+					if (tab.tabContentImage) {
 						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}
-										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 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>
 						);
-					  }
-					  
-					  // 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 && (
-								  <>
-									{/* Previous Button */}
-									<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>
-					  
-									{/* Next Button */}
-									<button
-									  onClick={nextCarouselItem}
-									  disabled={carouselIndex >= images.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 >= images.length - 1 ? 'not-allowed' : 'pointer',
-										opacity: carouselIndex >= images.length - 1 ? 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,
-									  }}
-									>
-									  {images.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>
-							);
-						  }
-					  
-						  // Other layouts: grid display with limited images
-						  const getMaxImages = () => {
-							switch (layout) {
-							  case '1x2': return 2;
-							  case '2x1': return 2;
-							  case '2x2': return 4;
-							  default: return images.length;
-							}
-						  };
-						  
-					  // 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));
+					}
+					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>;
 						}
-						
-						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((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',
-										}}
-									>
-										{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>
-						);
-					  }
-					  
-					  // For 1x1 layout with scroll, show one item at a time (carousel-like)
-					  if (layout === '1x1' && scrollType) {
-						const scrollDirection = scrollType === 'horizontal' ? 'row' : 'column';
+
+						// 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={{
-									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}
-										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)
-											}
+							<div style={contentStyle}>
+								<div className="media-box">
+									{isYouTube && youtubeId ? (
+										<iframe
+											src={`https://www.youtube.com/embed/${youtubeId}`}
+											title={videoAlt}
 											className="media-content"
-											style={{ objectFit: objectFit as any, width: '100%', height: '100%' }}
+											style={{ width: '100%', height: '100%', border: 'none' }}
+											allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+											allowFullScreen
 										/>
-									</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));
-						}
-						
-						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>
-									))}
+									) : (
+										<video
+											src={getImageUrl(videoUrl)}
+											controls
+											className="media-content"
+											style={{ width: '100%', height: '100%', objectFit: objectFit as any }}
+										/>
+									)}
 								</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 '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 || []));
+
+						if (!images || images.length === 0) {
+							return <div>No images available</div>;
 						}
-						break;
 
-					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 || []));
-							
-						  if (!videos || videos.length === 0) {
-							return <div>No videos available</div>;
-						  }
-						  
-						  // 1x1 layout: use scrollbar if scroll type is set, otherwise carousel
-						  if (layout === '1x1' && scrollType) {
+						// 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={{
@@ -1390,7 +897,7 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 									}}
 									className="scroll-container"
 								>
-									{videos.map((video, index) => (
+									{images.map((image, index) => (
 										<div
 											key={index}
 											className="media-box"
@@ -1403,722 +910,1176 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 												scrollSnapAlign: 'start',
 											}}
 										>
-											{renderVideoPlayer(video, isDynamic, 'media-content', { 
-												width: '100%', 
-												height: '100%',
-												objectFit: objectFit as any
-											})}
+											<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 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>
+						}
+
+						// 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
+
+							return (
+								<div
 									style={{
-									  position: 'relative',
-									  width: '100%',
-									  height: '100%',
-									  overflow: 'hidden',
-									  display: 'flex',
-									  alignItems: 'stretch',
-									  justifyContent: 'center',
+										position: 'relative',
+										width: '100%',
+										height: '100%',
+										overflow: 'hidden',
+										display: 'flex',
+										alignItems: 'center',
+										justifyContent: 'center',
 									}}
-								  >
-									{currentVideo && (
-									  <div style={{ width: '100%', height: '100%', display: 'flex' }}>
-										{videoElement}
-									  </div>
-									)}
-						  
+								>
+									{imageElement}
+
 									{/* Carousel Navigation */}
-									{videos.length > 1 && (
-									  <>
-										{/* Prev Button */}
-										<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>
-						  
-										{/* Next Button */}
-										<button
-										  onClick={nextCarouselItem}
-										  disabled={carouselIndex >= videos.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 >= videos.length - 1 ? 'not-allowed' : 'pointer',
-											opacity: carouselIndex >= videos.length - 1 ? 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,
-										  }}
-										>
-										  {videos.map((_, index) => (
+									{images.length > 1 && (
+										<>
+											{/* Previous Button */}
 											<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>
-								);
-						  }
-					  
-						  // Other layouts: grid display with limited videos
-						  const getMaxVideos = () => {
-							switch (layout) {
-							  case '1x2': return 2;
-							  case '2x1': return 2;
-							  case '2x2': return 4;
-							  default: return videos.length;
-							}
-						  };
-						  
-					  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={{
-									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((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',
-										}}
-									>
-										{slideVideos.map((video, index) => (
-											<div 
-												key={index} 
-												className="media-box" 
-												style={{ 
-													width: '100%', 
-													height: '100%', 
-													minHeight: 0,
-													overflow: 'hidden',
+												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',
-													boxSizing: 'border-box',
+													fontSize: '18px',
+													zIndex: 10,
 												}}
 											>
-												{renderVideoPlayer(video, isDynamic, 'media-content', { 
-													width: '100%', 
-													height: '100%',
-													objectFit: objectFit as any
-												})}
+												‹
+											</button>
+
+											{/* Next Button */}
+											<button
+												onClick={nextCarouselItem}
+												disabled={carouselIndex >= images.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 >= images.length - 1 ? 'not-allowed' : 'pointer',
+													opacity: carouselIndex >= images.length - 1 ? 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,
+												}}
+											>
+												{images.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>
+							);
+						}
+
+						// Other layouts: grid display with limited images
+						const getMaxImages = () => {
+							switch (layout) {
+								case '1x2': return 2;
+								case '2x1': return 2;
+								case '2x2': return 4;
+								default: return images.length;
+							}
+						};
+
+						// 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={{
+										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((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',
+											}}
+										>
+											{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>
+							);
+						}
+
+						// 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}
+											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>
+							);
+						}
+
+						// 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));
+							}
+
+							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) {
+						// 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 || []));
+
+						if (!videos || videos.length === 0) {
+							return <div>No videos available</div>;
+						}
+
+						// 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>
+							);
+						}
+
+						// 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%', height: '100%', display: 'flex' }}>
+											{videoElement}
+										</div>
+									)}
+
+									{/* Carousel Navigation */}
+									{videos.length > 1 && (
+										<>
+											{/* Prev Button */}
+											<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>
+
+											{/* Next Button */}
+											<button
+												onClick={nextCarouselItem}
+												disabled={carouselIndex >= videos.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 >= videos.length - 1 ? 'not-allowed' : 'pointer',
+													opacity: carouselIndex >= videos.length - 1 ? 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,
+												}}
+											>
+												{videos.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>
-								))}
-							</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}
-										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>
-						);
-					  }
-					  
-					  // 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));
+										</>
+									)}
+								</div>
+							);
 						}
-						
-						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',
+
+						// Other layouts: grid display with limited videos
+						const getMaxVideos = () => {
+							switch (layout) {
+								case '1x2': return 2;
+								case '2x1': return 2;
+								case '2x2': return 4;
+								default: return videos.length;
+							}
 						};
-						
-						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,
+
+						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={{
+										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((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',
-												display: 'flex',
-												alignItems: 'center',
-												justifyContent: 'center',
+												alignContent: 'stretch',
 												boxSizing: 'border-box',
 											}}
 										>
-											{renderVideoPlayer(video, isDynamic, 'media-content', { 
-												width: '100%', 
-												height: '100%',
-												objectFit: objectFit as any
-											})}
+											{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 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>
+							);
+						}
+
+						// 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}
+											className="media-box"
 											style={{
-												position: 'absolute',
-												bottom: '10px',
-												left: '50%',
-												transform: 'translateX(-50%)',
-												display: 'flex',
-												gap: '8px',
-												zIndex: 10,
+												width: scrollType === 'horizontal' ? '100%' : '100%',
+												height: scrollType === 'vertical' ? '100%' : '100%',
+												minWidth: scrollType === 'horizontal' ? '100%' : '100%',
+												minHeight: scrollType === 'vertical' ? '100%' : '100%',
+												flexShrink: 0,
+												scrollSnapAlign: 'start',
 											}}
 										>
-											{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',
-													}}
-												/>
-											))}
+											{renderVideoPlayer(video, isDynamic, 'media-content', {
+												width: '100%',
+												height: '100%',
+												objectFit: objectFit as any
+											})}
 										</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>
-					  );
-						  
+									))}
+								</div>
+							);
 						}
-						break;
-					  
-						case 'GROUPPRODUCT':
-							if (tab.tabContentGroupProduct) {
-							  // 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: 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) => (
+
+						// 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: scrollType === 'horizontal' ? '100%' : '100%',
-													height: scrollType === 'vertical' ? '100%' : '100%',
-													minWidth: scrollType === 'horizontal' ? '100%' : '100%',
-													minHeight: scrollType === 'vertical' ? '100%' : '100%',
-													flexShrink: 0,
-													scrollSnapAlign: 'start',
+													width: '100%',
+													height: '100%',
+													minHeight: 0,
+													minWidth: 0,
+													overflow: 'hidden',
+													display: 'flex',
+													alignItems: 'center',
+													justifyContent: 'center',
+													boxSizing: 'border-box',
 												}}
 											>
-												<ProductCard product={product} layout={layout} />
+												{renderVideoPlayer(video, isDynamic, 'media-content', {
+													width: '100%',
+													height: '100%',
+													objectFit: objectFit as any
+												})}
 											</div>
 										))}
 									</div>
-								);
-							  }
-							  
-							  // 1x1 layout: Carousel view (fallback when scroll is not set)
-							  if (layout === '1x1') {
-								const currentProduct = products[carouselIndex] || products[0];
-						  
-								return (
-								  <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) {
+						// 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: 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];
+
+							return (
+								<div
 									style={{
-									  position: 'relative',
-									  width: '100%',
-									  height: '100%', // Full height of tab content
-									  overflow: 'hidden',
-									  display: 'flex',
-									  alignItems: 'stretch',
-									  justifyContent: 'center',
+										position: 'relative',
+										width: '100%',
+										height: '100%', // Full height of tab content
+										overflow: 'hidden',
+										display: 'flex',
+										alignItems: 'stretch',
+										justifyContent: 'center',
 									}}
-								  >
+								>
 									{currentProduct && (
-									  <div style={{ width: '100%', height: '100%', display: 'flex' }}>
-										<ProductCard product={currentProduct} layout={layout} />
-									  </div>
+										<div style={{ width: '100%', height: '100%', display: 'flex' }}>
+											<ProductCard product={currentProduct} layout={layout} />
+										</div>
 									)}
-						  
+
 									{/* Carousel Navigation */}
 									{products.length > 1 && (
-									  <>
-										{/* Prev Button */}
-										<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>
-						  
-										{/* Next Button */}
-										<button
-										  onClick={nextCarouselItem}
-										  disabled={carouselIndex >= products.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 >= products.length - 1
-												? 'not-allowed'
-												: 'pointer',
-											opacity: carouselIndex >= products.length - 1 ? 0.5 : 1,
-											display: 'flex',
-											alignItems: 'center',
-											justifyContent: 'center',
-											fontSize: '18px',
-											zIndex: 10,
-										  }}
-										>
-										  ›
-										</button>
-						  
-										{/* Dots */}
-										<div
-										  style={{
-											position: 'absolute',
-											bottom: '10px',
-											left: '50%',
-											transform: 'translateX(-50%)',
-											display: 'flex',
-											gap: '8px',
-											zIndex: 10,
-										  }}
-										>
-										  {products.map((_: any, index: number) => (
+										<>
+											{/* Prev Button */}
 											<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>
-								);
-							  }
-						  
-							  // Other layouts: Grid view with limited products
-							  const getMaxProducts = () => {
-								switch (layout) {
-								  case '1x2': return 2;
-								  case '2x1': return 2;
-								  case '2x2': return 4;
-								  default: return products.length;
-								}
-							  };
-							  
-							  // 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) => (
+												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>
+
+											{/* Next Button */}
+											<button
+												onClick={nextCarouselItem}
+												disabled={carouselIndex >= products.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 >= products.length - 1
+															? 'not-allowed'
+															: 'pointer',
+													opacity: carouselIndex >= products.length - 1 ? 0.5 : 1,
+													display: 'flex',
+													alignItems: 'center',
+													justifyContent: 'center',
+													fontSize: '18px',
+													zIndex: 10,
+												}}
+											>
+												›
+											</button>
+
+											{/* Dots */}
 											<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'
+													position: 'absolute',
+													bottom: '10px',
+													left: '50%',
+													transform: 'translateX(-50%)',
+													display: 'flex',
+													gap: '8px',
+													zIndex: 10,
 												}}
 											>
-												{slideProducts.map((product: any, index: number) => (
-													<div
+												{products.map((_: any, index: number) => (
+													<button
 														key={index}
+														onClick={() => goToCarouselItem(index)}
 														style={{
-															width: '100%',
-															height: '100%',
-															maxHeight: '100%',
-															overflow: 'hidden',
-															display: 'flex',
-															alignItems: 'stretch',
-															justifyContent: 'center',
-															minHeight: 0,
-															minWidth: 0
+															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',
 														}}
-													>
-														<ProductCard product={product} layout={layout} />
-													</div>
+													/>
 												))}
 											</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 < 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>
+							);
+						}
+
+						// Other layouts: Grid view with limited products
+						const getMaxProducts = () => {
+							switch (layout) {
+								case '1x2': return 2;
+								case '2x1': return 2;
+								case '2x2': return 4;
+								default: return products.length;
+							}
+						};
+
+						// 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={{
@@ -2137,98 +2098,23 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 												</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);
-							  
-							  const groupProductContentStyle = {
+									))}
+								</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 < 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(),
@@ -2238,46 +2124,172 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 								overflow: 'hidden',
 								padding: '12px',
 								alignItems: 'stretch',
-							  };
-							  
-							  return (
-								<div style={groupProductContentStyle}>
-								  {displayProducts.map((product: any, index: number) => (
+								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);
+
+						const groupProductContentStyle = {
+							display: 'grid',
+							gridTemplateColumns: getGridColumns(),
+							gridTemplateRows: getGridRows(),
+							gap: '12px',
+							height: '100%',
+							width: '100%',
+							overflow: 'hidden',
+							padding: '12px',
+							alignItems: 'stretch',
+						};
+
+						return (
+							<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
-									  }}
+										key={index}
+										style={{
+											width: '100%',
+											height: '100%',
+											display: 'flex',
+											alignItems: 'stretch',
+											justifyContent: 'center',
+											minHeight: 0,
+											minWidth: 0
+										}}
 									>
-									  <ProductCard product={product} layout={layout} />
-								</div>
-							))}
+										<ProductCard product={product} layout={layout} />
+									</div>
+								))}
+							</div>
+						);
+					}
+					break;
+
+				default:
+					return (
+						<div style={{
+							...contentStyle,
+							alignItems: 'center',
+							justifyContent: 'center',
+							backgroundColor: '#f8f9fa',
+							borderRadius: '8px'
+						}}>
+							<p style={{ color: '#6c757d', textAlign: 'center' }}>No content available</p>
 						</div>
 					);
-				}
-				break;
-
-			default:
-				return (
-					<div style={{
-						...contentStyle,
-						alignItems: 'center',
-						justifyContent: 'center',
-						backgroundColor: '#f8f9fa',
-						borderRadius: '8px'
-					}}>
-						<p style={{ color: '#6c757d', textAlign: 'center' }}>No content available</p>
-					</div>
-				);
-		}
+			}
 
-		return null;
+			return null;
 		} catch (error: any) {
 			console.error('Error rendering tab content:', error);
 			return (
@@ -2313,107 +2325,107 @@ const TabComponent: React.FC<TabComponentMainProps> = ({ props, deviceMode = 'we
 			}
 
 			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',
-				flexDirection: isVertical ? 'column' : 'row',
-				alignItems: isVertical ? 'stretch' : 'center',
-				justifyContent: isVertical ? 'space-between' : 'space-between',
-				padding: isVertical ? '20px 16px' : '20px 32px',
-				backgroundColor: '#ffffff',
-				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(),
-						marginBottom: isVertical ? '16px' : '0',
-						textAlign: isVertical ? 'left' : getTitleStyle().textAlign,
-						writingMode: isVertical ? 'horizontal-tb' : 'initial',
-						flexShrink: 0
-					}}>
-						{props?.title?.titleText}
-					</h1>
-				)}
-
-				{/* Tab Headers */}
 				<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 ? 'column' : 'row',
-					alignItems: isVertical ? 'stretch' : 'center',
-					gap: isVertical ? '8px' : '0',
-					width: isVertical ? '100%' : 'auto',
-					marginLeft: isVertical ? '0' : 'auto'
+					flexDirection: isVertical ? 'row' : 'column'
 				}}>
-					{tabs.map((tab, index) => (
-						<React.Fragment key={index}>
-							<button
-								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
-								) : tab.tabHeaderImage.url ? (
-									<img
-										src={getImageUrl(tab.tabHeaderImage.url)}
-										alt={tab.tabHeaderImage.alt}
-										style={{ height: '20px', width: 'auto' }}
-									/>
-								) : (
-									tab.tabHeaderText
-								)}
-							</button>
-
-							{/* Add separator - only for horizontal orientation */}
-							{!isVertical && index < tabs.length - 1 && (
-								<span style={{ color: '#9ca3af', margin: '0 4px' }}>|</span>
-							)}
-						</React.Fragment>
-					))}
-				</div>
+					{/* Header Section */}
+					<div style={{
+						display: 'flex',
+						flexDirection: isVertical ? 'column' : 'row',
+						alignItems: isVertical ? 'stretch' : 'center',
+						justifyContent: isVertical ? 'space-between' : 'space-between',
+						padding: isVertical ? '20px 16px' : '20px 32px',
+						backgroundColor: '#ffffff',
+						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(),
+								marginBottom: isVertical ? '16px' : '0',
+								textAlign: isVertical ? 'left' : getTitleStyle().textAlign,
+								writingMode: isVertical ? 'horizontal-tb' : 'initial',
+								flexShrink: 0
+							}}>
+								{props?.title?.titleText}
+							</h1>
+						)}
+
+						{/* Tab Headers */}
+						<div style={{
+							display: 'flex',
+							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),
+											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
+										) : tab.tabHeaderImage.url ? (
+											<img
+												src={getImageUrl(tab.tabHeaderImage.url)}
+												alt={tab.tabHeaderImage.alt}
+												style={{ height: '20px', width: 'auto' }}
+											/>
+										) : (
+											tab.tabHeaderText
+										)}
+									</button>
 
-			</div>
+									{/* Add separator - only for horizontal orientation */}
+									{!isVertical && index < tabs.length - 1 && (
+										<span style={{ color: '#9ca3af', margin: '0 4px' }}>|</span>
+									)}
+								</React.Fragment>
+							))}
+						</div>
 
-			{/* Tab Content */}
-			<div style={{
-				position: 'relative',
-				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>
+
+					{/* Tab Content */}
 					<div style={{
-						width: '100%',
-						height: '100%'
+						position: 'relative',
+						flex: 1,
+						overflow: 'hidden',
+						minHeight: 0, // Allows flex child to shrink below content size
+						width: isVertical ? 'calc(100% - 200px)' : '100%'
 					}}>
-						{renderTabContent(tabs[activeTab])}
+						{tabs.length > 0 && tabs[activeTab] && (
+							<div style={{
+								width: '100%',
+								height: '100%'
+							}}>
+								{renderTabContent(tabs[activeTab])}
+							</div>
+						)}
 					</div>
-				)}
-			</div>
-		</div>
+				</div>
 			);
 		} catch (error: any) {
 			console.error('Error rendering TabComponent:', error);