@aware(['page'])
@props([
    'title',
    'description',
    'layout' => 'grid',
    'background_color' => '#F9FAFB',
    'background_image' => null,
    'use_gradient' => false,
    'gradient_start' => '#4F46E5',
    'gradient_end' => '#9333EA',
    'features' => [],
])

@php
    $backgroundStyle = '';
    if ($use_gradient) {
        $backgroundStyle = "background: linear-gradient(135deg, {$gradient_start}, {$gradient_end});";
    } elseif ($background_image) {
        $backgroundStyle = "background-image: url('{{ asset('storage/' . $background_image) }}'); background-size: cover; background-position: center;";
    } else {
        $backgroundStyle = "background-color: {$background_color};";
    }
    // Generate a unique ID for the carousel component
    $carouselId = 'carousel-' . uniqid();
@endphp

<div class="py-16" style="{{ $backgroundStyle }}">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-12">
            <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">{{ $title }}</h2>
            @if($description)
                <p class="mt-4 text-lg text-gray-600">{!! $description !!}</p>
            @endif
        </div>

        @if($layout === 'grid')
            <div class="grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
                @foreach($features as $feature)
                    <div class="relative bg-white p-6 rounded-lg shadow-md hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300">
                        <div class="flex items-center justify-center h-16 w-16 rounded-full mb-4 mx-auto" style="background-color: {{ $feature['icon_color'] ?? '#4F46E5' }}20;">
                            <x-mary-icon :name="$feature['icon'] ?? 'heroicon.s.star'" class="h-8 w-8" style="color: {{ $feature['icon_color'] ?? '#4F46E5' }};" />
                        </div>
                        <h3 class="text-lg font-medium text-gray-900 text-center">{{ $feature['title'] ?? 'Untitled Feature' }}</h3>
                        <p class="mt-2 text-base text-gray-600 text-center">{{ $feature['description'] ?? '' }}</p>
                        @if(!empty($feature['button_text']) && !empty($feature['button_link']))
                            <div class="mt-4">
                                <a href="{{ $feature['button_link'] }}" class="inline-flex text-white border-0 py-2 px-4 focus:outline-none rounded text-sm" style="background-color: {{ $feature['button_color'] ?? '#1E90FF' }};" onmouseover="this.style.backgroundColor='{{ $feature['button_hover_color'] ?? '#4169E1' }}'" onmouseout="this.style.backgroundColor='{{ $feature['button_color'] ?? '#1E90FF' }}'">{{ $feature['button_text'] }}</a>
                            </div>
                        @endif
                    </div>
                @endforeach
            </div>
        @else
            <div class="relative carousel-component" id="{{ $carouselId }}">
                <div class="overflow-hidden w-full">
                    <div class="flex transition-transform duration-500 ease-in-out" style="flex-wrap: nowrap;">
                        @foreach($features as $index => $feature)
                            <div class="w-full min-w-full flex-shrink-0 flex justify-center p-4" data-slide-index="{{ $index }}">
                                <div class="bg-white p-6 rounded-lg shadow-md hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 max-w-sm w-full sm:max-w-md">
                                    <div class="flex items-center justify-center h-16 w-16 rounded-full mb-4 mx-auto" style="background-color: {{ $feature['icon_color'] ?? '#4F46E5' }}20;">
                                        <x-mary-icon :name="$feature['icon'] ?? 'heroicon.s.star'" class="h-8 w-8" style="color: {{ $feature['icon_color'] ?? '#4F46E5' }};" />
                                    </div>
                                    <h3 class="text-lg font-medium text-gray-900 text-center">{{ $feature['title'] ?? 'Untitled Feature' }}</h3>
                                    <p class="mt-2 text-base text-gray-600 text-center">{{ $feature['description'] ?? '' }}</p>
                                    @if(!empty($feature['button_text']) && !empty($feature['button_link']))
                                        <div class="mt-4">
                                            <a href="{{ $feature['button_link'] }}" class="inline-flex text-white border-0 py-2 px-4 focus:outline-none rounded text-sm" style="background-color: {{ $feature['button_color'] ?? '#1E90FF' }};" onmouseover="this.style.backgroundColor='{{ $feature['button_hover_color'] ?? '#4169E1' }}'" onmouseout="this.style.backgroundColor='{{ $feature['button_color'] ?? '#1E90FF' }}'">{{ $feature['button_text'] }}</a>
                                        </div>
                                    @endif
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
                @if(count($features) > 1)
                    <button class="carousel-prev absolute top-1/2 left-2 sm:left-4 transform -translate-y-1/2 bg-emerald-600 text-white p-3 rounded-full hover:bg-emerald-700 focus:outline-none shadow-md transition-colors duration-200" aria-label="Previous Slide">
                        <x-mary-icon name="heroicon.s.chevron.left" class="h-6 w-6" />
                    </button>
                    <button class="carousel-next absolute top-1/2 right-2 sm:right-4 transform -translate-y-1/2 bg-emerald-600 text-white p-3 rounded-full hover:bg-emerald-700 focus:outline-none shadow-md transition-colors duration-200" aria-label="Next Slide">
                        <x-mary-icon name="heroicon.s.chevron.right" class="h-6 w-6" />
                    </button>
                    <div class="flex justify-center mt-4 space-x-2">
                        @foreach($features as $index => $feature)
                            <button class="carousel-dot w-3 h-3 rounded-full transition-colors duration-200 {{ $index === 0 ? 'bg-emerald-600' : 'bg-gray-300' }}" data-dot-index="{{ $index }}" aria-label="Go to slide {{ $index + 1 }}"></button>
                        @endforeach
                    </div>
                @endif
            </div>

            <script>
               (function() {
    const carousel = document.getElementById('{{ $carouselId }}');
    if (!carousel) {
        console.error('Carousel not found');
        return;
    }

    const slidesContainer = carousel.querySelector('.flex');
    const slides = carousel.querySelectorAll('[data-slide-index]');
    const prevButton = carousel.querySelector('.carousel-prev');
    const nextButton = carousel.querySelector('.carousel-next');
    const dots = carousel.querySelectorAll('.carousel-dot');
    let currentIndex = 1; // Start at the first real slide (after cloned last slide)
    let slideWidth = 0;
    let totalSlides = slides.length;
    let autoSlideTimer = null;
    const autoSlideInterval = 5000; // 5 seconds per slide

    // Clone first and last slides for infinite effect
    const firstSlide = slides[0].cloneNode(true);
    const lastSlide = slides[totalSlides - 1].cloneNode(true);
    slidesContainer.appendChild(firstSlide);
    slidesContainer.insertBefore(lastSlide, slides[0]);

    // Update slides reference after cloning
    const allSlides = carousel.querySelectorAll('.min-w-full');

    function updateSlideWidth() {
        slideWidth = carousel.offsetWidth;
        allSlides.forEach(slide => {
            slide.style.width = `${slideWidth}px`;
        });
        // Set initial position to first real slide
        slidesContainer.style.transition = 'none';
        slidesContainer.style.transform = `translateX(-${slideWidth}px)`;
        setTimeout(() => {
            slidesContainer.style.transition = 'transform 0.5s ease-in-out';
        }, 0);
        console.log('Carousel Width:', slideWidth, 'Slides:', totalSlides);
    }

    function updateSlidePosition() {
        slidesContainer.style.transform = `translateX(-${currentIndex * slideWidth}px)`;
        // Update dots and slide styles
        const realIndex = ((currentIndex - 1) % totalSlides + totalSlides) % totalSlides;
        allSlides.forEach((slide, index) => {
            slide.classList.toggle('opacity-100', index === currentIndex);
            slide.classList.toggle('opacity-80', index !== currentIndex);
            slide.classList.toggle('scale-100', index === currentIndex);
            slide.classList.toggle('scale-95', index !== currentIndex);
        });
        dots.forEach((dot, index) => {
            dot.classList.toggle('bg-emerald-600', index === realIndex);
            dot.classList.toggle('bg-gray-300', index !== realIndex);
        });
        console.log('Current Index:', currentIndex, 'Real Index:', realIndex);
    }

    function prevSlide() {
        currentIndex--;
        slidesContainer.style.transition = 'transform 0.5s ease-in-out';
        updateSlidePosition();
        if (currentIndex === 0) {
            setTimeout(() => {
                slidesContainer.style.transition = 'none';
                currentIndex = totalSlides;
                updateSlidePosition();
            }, 500);
        }
    }

    function nextSlide() {
        currentIndex++;
        slidesContainer.style.transition = 'transform 0.5s ease-in-out';
        updateSlidePosition();
        if (currentIndex === totalSlides + 1) {
            setTimeout(() => {
                slidesContainer.style.transition = 'none';
                currentIndex = 1;
                updateSlidePosition();
            }, 500);
        }
    }

    function goToSlide(index) {
        currentIndex = index + 1; // Adjust for cloned last slide at start
        slidesContainer.style.transition = 'transform 0.5s ease-in-out';
        updateSlidePosition();
    }

    // Automatic slide functionality
    function startAutoSlide() {
        stopAutoSlide(); // Clear any existing timer
        autoSlideTimer = setInterval(nextSlide, autoSlideInterval);
        console.log('Auto-slide started');
    }

    function stopAutoSlide() {
        if (autoSlideTimer) {
            clearInterval(autoSlideTimer);
            autoSlideTimer = null;
            console.log('Auto-slide stopped');
        }
    }

    // Pause auto-slide on user interaction
    function handleUserInteraction() {
        stopAutoSlide();
        // Resume after 10 seconds of inactivity
        setTimeout(startAutoSlide, 10000);
    }

    if (prevButton) {
        prevButton.addEventListener('click', () => {
            prevSlide();
            handleUserInteraction();
        });
    }
    if (nextButton) {
        nextButton.addEventListener('click', () => {
            nextSlide();
            handleUserInteraction();
        });
    }
    dots.forEach((dot, index) => {
        dot.addEventListener('click', () => {
            goToSlide(index);
            handleUserInteraction();
        });
    });

    // Pause auto-slide on hover
    carousel.addEventListener('mouseenter', stopAutoSlide);
    carousel.addEventListener('mouseleave', startAutoSlide);

    window.addEventListener('resize', updateSlideWidth);
    updateSlideWidth(); // Initial setup
    startAutoSlide(); // Start auto-slide on load
})();
            </script>
        @endif
    </div>
</div>