import { useState, useEffect } from 'react'; const Comp = ({ onLinkClick, slide1Image = 'https://firebasestorage.googleapis.com/v0/b/digisell-io.appspot.com/o/media%2Fplaceholders%2Fimages%2F1746806678960_neom-WpOMM4uE-F8-unsplash.webp?alt=media&token=5cd06726-8c06-49fa-b9a3-943b13627da7', slide1Title = 'Nature-inspired', slide1TitleFontF = 'var(--font-family-heading)', slide1TitleFontW = '300', slide1TitleFontS = '4rem', slide1Subtitle = 'portrait photography', slide1SubtitleFontF = 'var(--font-family-heading)', slide1SubtitleFontW = '300', slide1SubtitleFontS = '4rem', slide1Description = 'EXPLORE YOUR SENSE OF WONDER', slide1DescriptionFontF = 'var(--font-family)', slide1DescriptionFontW = '400', slide1DescriptionFontS = '0.875rem', slide1ButtonText = 'VIEW PORTFOLIO', slide1ButtonTextFontF = 'var(--font-family-button)', slide1ButtonTextFontW = '400', slide1ButtonTextFontS = '0.875rem', slide1ButtonLink = '', slide1ButtonLinkType = 'page', slide1ButtonNewTab = false, slide2Image = 'https://firebasestorage.googleapis.com/v0/b/digisell-io.appspot.com/o/media%2Fplaceholders%2Fimages%2F1746806678944_dave-hoefler-23mWSDzAIBc-unsplash.webp?alt=media&token=654f4795-03f9-4cab-ac83-823532411186', slide2Title = 'Capturing', slide2TitleFontF = 'var(--font-family-heading)', slide2TitleFontW = '300', slide2TitleFontS = '4rem', slide2Subtitle = 'authentic moments', slide2SubtitleFontF = 'var(--font-family-heading)', slide2SubtitleFontW = '300', slide2SubtitleFontS = '4rem', slide2Description = 'DISCOVER THE BEAUTY IN EVERYDAY', slide2DescriptionFontF = 'var(--font-family)', slide2DescriptionFontW = '400', slide2DescriptionFontS = '0.875rem', slide2ButtonText = 'VIEW GALLERY', slide2ButtonTextFontF = 'var(--font-family-button)', slide2ButtonTextFontW = '400', slide2ButtonTextFontS = '0.875rem', slide2ButtonLink = '', slide2ButtonLinkType = 'page', slide2ButtonNewTab = false, slide3Image = 'https://firebasestorage.googleapis.com/v0/b/digisell-io.appspot.com/o/media%2Fplaceholders%2Fimages%2F1746806678946_jeremy-cai-ucYWe5mzTMU-unsplash.webp?alt=media&token=7482f799-7e5a-45ac-b65b-6fc5acc69ec4', slide3Title = 'Timeless', slide3TitleFontF = 'var(--font-family-heading)', slide3TitleFontW = '300', slide3TitleFontS = '4rem', slide3Subtitle = 'visual stories', slide3SubtitleFontF = 'var(--font-family-heading)', slide3SubtitleFontW = '300', slide3SubtitleFontS = '4rem', slide3Description = 'CREATING MEMORIES THAT LAST', slide3DescriptionFontF = 'var(--font-family)', slide3DescriptionFontW = '400', slide3DescriptionFontS = '0.875rem', slide3ButtonText = 'BOOK SESSION', slide3ButtonTextFontF = 'var(--font-family-button)', slide3ButtonTextFontW = '400', slide3ButtonTextFontS = '0.875rem', slide3ButtonLink = '', slide3ButtonLinkType = 'page', slide3ButtonNewTab = false, textColor = '#ffffff', buttonBackgroundColor = 'rgba(255, 255, 255, 0.1)', buttonBorderColor = '#ffffff', buttonTextColor = '#ffffff', overlayOpacity = 0.4, autoplayDuration = 5000, showDots = true, showArrows = true, arrowColor = '#ffffff', dotColor = '#ffffff', dotActiveColor = '#ffffff', height = 100, preloadImages = true, enableAutoplay = true, animationDuration = 1000, animationDelay = 200, arrowSize = 2, arrowHoverColor = '#ffffffcc', dotSize = 8, thumbnailSize = 40, thumbnailBorderColor = '#ffffff', thumbnailBorderRadius = 4, thumbnailOpacity = 0.7, thumbnailActiveOpacity = 1, thumbnailSpacing = 8 }) => { const [isMobile, setIsMobile] = useState(window.innerWidth < 768); const [currentSlide, setCurrentSlide] = useState(0); const [isFirstLoad, setIsFirstLoad] = useState(true); const [animationComplete, setAnimationComplete] = useState(false); // Calculate overlay color with fixed black color and user-defined opacity const overlayColor = `rgba(0, 0, 0, ${overlayOpacity})`; const slides = [ { image: slide1Image, title: slide1Title, titleFontF: slide1TitleFontF, titleFontW: slide1TitleFontW, titleFontS: slide1TitleFontS, subtitle: slide1Subtitle, subtitleFontF: slide1SubtitleFontF, subtitleFontW: slide1SubtitleFontW, subtitleFontS: slide1SubtitleFontS, description: slide1Description, descriptionFontF: slide1DescriptionFontF, descriptionFontW: slide1DescriptionFontW, descriptionFontS: slide1DescriptionFontS, buttonText: slide1ButtonText, buttonTextFontF: slide1ButtonTextFontF, buttonTextFontW: slide1ButtonTextFontW, buttonTextFontS: slide1ButtonTextFontS, buttonLink: slide1ButtonLink, buttonLinkType: slide1ButtonLinkType, buttonNewTab: slide1ButtonNewTab }, { image: slide2Image, title: slide2Title, titleFontF: slide2TitleFontF, titleFontW: slide2TitleFontW, titleFontS: slide2TitleFontS, subtitle: slide2Subtitle, subtitleFontF: slide2SubtitleFontF, subtitleFontW: slide2SubtitleFontW, subtitleFontS: slide2SubtitleFontS, description: slide2Description, descriptionFontF: slide2DescriptionFontF, descriptionFontW: slide2DescriptionFontW, descriptionFontS: slide2DescriptionFontS, buttonText: slide2ButtonText, buttonTextFontF: slide2ButtonTextFontF, buttonTextFontW: slide2ButtonTextFontW, buttonTextFontS: slide2ButtonTextFontS, buttonLink: slide2ButtonLink, buttonLinkType: slide2ButtonLinkType, buttonNewTab: slide2ButtonNewTab }, { image: slide3Image, title: slide3Title, titleFontF: slide3TitleFontF, titleFontW: slide3TitleFontW, titleFontS: slide3TitleFontS, subtitle: slide3Subtitle, subtitleFontF: slide3SubtitleFontF, subtitleFontW: slide3SubtitleFontW, subtitleFontS: slide3SubtitleFontS, description: slide3Description, descriptionFontF: slide3DescriptionFontF, descriptionFontW: slide3DescriptionFontW, descriptionFontS: slide3DescriptionFontS, buttonText: slide3ButtonText, buttonTextFontF: slide3ButtonTextFontF, buttonTextFontW: slide3ButtonTextFontW, buttonTextFontS: slide3ButtonTextFontS, buttonLink: slide3ButtonLink, buttonLinkType: slide3ButtonLinkType, buttonNewTab: slide3ButtonNewTab } ]; // Preload images to prevent black flashes useEffect(() => { if (preloadImages) { slides.forEach(slide => { const img = new Image(); img.src = slide.image; }); } }, []); useEffect(() => { const handleResize = () => setIsMobile(window.innerWidth < 768); window.addEventListener('resize', handleResize); return () => window.removeEventListener('resize', handleResize); }, []); useEffect(() => { // Set animation complete after initial animations finish const timer = setTimeout(() => { setAnimationComplete(true); setIsFirstLoad(false); }, animationDuration + (animationDelay * 3)); // Total animation time return () => clearTimeout(timer); }, []); useEffect(() => { let interval; if (enableAutoplay && animationComplete) { interval = setInterval(() => { setCurrentSlide((prevSlide) => (prevSlide + 1) % slides.length); }, autoplayDuration); } return () => clearInterval(interval); }, [currentSlide, autoplayDuration, enableAutoplay, animationComplete]); const handleNextSlide = () => { setCurrentSlide((prevSlide) => (prevSlide + 1) % slides.length); }; const handlePrevSlide = () => { setCurrentSlide((prevSlide) => (prevSlide - 1 + slides.length) % slides.length); }; const goToSlide = (index) => { if (index === currentSlide) return; setCurrentSlide(index); }; const currentSlideData = slides[currentSlide]; return (

{/* Current Background Image */}

{/* Overlay */}

{/* Content */}

{currentSlideData.title}

{currentSlideData.subtitle}

{currentSlideData.description}

{/* Navigation Arrows */} {showArrows && ( <> )} {/* Thumbnail Navigation (replacing dots) */} {showDots && (

{slides.map((slide, index) => ( ))}

)} {/* CSS Animations */}

); };

404