import React, { useState, useEffect, useCallback } from 'react'; import { ArrowLeft, ArrowRight } from 'lucide-react'; import { IMAGES, getRole } from './utils/carousel'; import { CarouselItem } from './components/CarouselItem'; import { Toaster } from '@/components/ui/toaster'; import { useSwipe } from './hooks/useSwipe'; export default function ToonHubHero() { const [activeIndex, setActiveIndex] = useState(0); const [isAnimating, setIsAnimating] = useState(false); const [isMobile, setIsMobile] = useState(typeof window !== 'undefined' ? window.innerWidth < 640 : false); // Preload images useEffect(() => { IMAGES.forEach((img) => { const i = new Image(); i.src = img.src; }); const handleResize = () => setIsMobile(window.innerWidth < 640); window.addEventListener('resize', handleResize); return () => window.removeEventListener('resize', handleResize); }, []); const navigate = useCallback((direction: 'next' | 'prev') => { if (isAnimating) return; setIsAnimating(true); setActiveIndex((prev) => { if (direction === 'next') return (prev + 1) % 4; return (prev + 3) % 4; }); setTimeout(() => setIsAnimating(false), 650); }, [isAnimating]); // Swipe handlers const swipeHandlers = useSwipe( () => navigate('next'), () => navigate('prev') ); return (

{/* 1. Grain Overlay */}

{/* 2. Giant Ghost Text */}

3D SHAPE

{/* 3. Top-left Brand */}

TOONHUB

{/* 4. Carousel */}

{IMAGES.map((img, idx) => ( ))}

{/* 5. Bottom-left Content & Nav */}

TOONHUB FIGURINES

The artwork is stunning, shipped fully prepared. The finish is a vision, the 3D craft is flawless. Many thanks! Wishing you the win. Order now.

{/* 6. Bottom-right Link */}

DISCOVER IT

); }