@props([
    'highlights' => [],
    'theme' => 'businessportal24',
])

@php
    $sectionBgClass = match ($theme) {
        'presseecho' => 'bg-gradient-to-br from-zinc-50 to-zinc-100 dark:from-zinc-800 dark:to-zinc-900',
        'businessportal24' => 'main-content-section',
        default => 'bg-white dark:bg-zinc-950',
    };
@endphp

<section class="relative overflow-hidden {{ $sectionBgClass }} py-12 md:py-16 animate-fade-in">
    <div class="container mx-auto px-4">
        <!-- Section Header -->
        <div class="mb-8 flex items-end justify-between">
            <div>
                <h2 class="text-3xl md:text-4xl font-bold text-zinc-900 dark:text-zinc-100 mb-2 flex items-center gap-3">
                    <span class="gradient-indicator"></span>
                    Highlights der Woche
                </h2>
                <p class="text-zinc-600 dark:text-zinc-400 ml-5">Exklusive Einblicke und Top-Analysen</p>
            </div>

            <!-- Navigation Buttons -->
            <div class="hidden md:flex items-center gap-2">
                <button id="highlights-prev" class="slider-nav-btn" aria-label="Vorheriges Highlight">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7">
                        </path>
                    </svg>
                </button>
                <button id="highlights-next" class="slider-nav-btn" aria-label="Nächstes Highlight">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                    </svg>
                </button>
            </div>
        </div>

        <!-- Slider Container -->
        <div class="slider-wrapper">
            <div id="highlights-slider" class="highlights-slider">
                @foreach ($highlights as $highlight)
                    <x-web.highlight-card :highlight="$highlight" />
                @endforeach
            </div>

            <!-- Pagination Dots -->
            <div class="slider-dots">
                @foreach ($highlights as $index => $highlight)
                    <button data-slide="{{ $index }}" class="slider-dot {{ $index === 0 ? 'active' : '' }}"
                        aria-label="Zu Slide {{ $index + 1 }}"></button>
                @endforeach
            </div>
        </div>
    </div>
</section>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const slider = document.getElementById('highlights-slider');
        const prevBtn = document.getElementById('highlights-prev');
        const nextBtn = document.getElementById('highlights-next');
        const dots = document.querySelectorAll('.slider-dot');

        if (!slider || !prevBtn || !nextBtn) return;

        let currentSlide = 0;
        const totalSlides = dots.length;

        function updateSlider() {
            const slideWidth = slider.children[0].offsetWidth;
            slider.scrollTo({
                left: currentSlide * (slideWidth + 24), // 24px = gap-6
                behavior: 'smooth'
            });
            updateDots();
            updateButtons();
        }

        function updateDots() {
            dots.forEach((dot, index) => {
                dot.classList.toggle('active', index === currentSlide);
            });
        }

        function updateButtons() {
            prevBtn.disabled = currentSlide === 0;
            nextBtn.disabled = currentSlide === totalSlides - 1;
        }

        prevBtn.addEventListener('click', () => {
            if (currentSlide > 0) {
                currentSlide--;
                updateSlider();
            }
        });

        nextBtn.addEventListener('click', () => {
            if (currentSlide < totalSlides - 1) {
                currentSlide++;
                updateSlider();
            }
        });

        dots.forEach((dot, index) => {
            dot.addEventListener('click', () => {
                currentSlide = index;
                updateSlider();
            });
        });

        // Keyboard navigation
        document.addEventListener('keydown', (e) => {
            if (e.key === 'ArrowLeft' && currentSlide > 0) {
                currentSlide--;
                updateSlider();
            } else if (e.key === 'ArrowRight' && currentSlide < totalSlides - 1) {
                currentSlide++;
                updateSlider();
            }
        });

        // Initialize
        updateButtons();
    });
</script>