@extends('frontend.layouts.app')

@section('content')

<section class="relative overflow-hidden">
    <div class="absolute inset-0 pointer-events-none">
        <div class="absolute top-20 left-10 w-72 h-72 bg-red-600/10 blur-[120px] rounded-full animate-pulse"></div>
        <div class="absolute bottom-10 right-10 w-80 h-80 bg-red-500/10 blur-[140px] rounded-full animate-pulse"></div>
    </div>

    <div class="relative">
        @forelse($sliders as $index => $slider)
            <div class="slider-item relative min-h-[92vh] flex items-center {{ $index !== 0 ? 'hidden' : '' }}"
                 data-slide="{{ $index }}">

                <div class="absolute inset-0">
                    <div class="absolute inset-0 bg-cover bg-center kenburns-slide"
                         style="background-image:url('{{ $slider->image ? asset('storage/'.$slider->image) : '' }}')"></div>
                    <div class="absolute inset-0 bg-gradient-to-r from-black via-black/80 to-red-950/30"></div>
                </div>

                <div class="relative max-w-7xl mx-auto px-6 py-24 w-full">
                    <div class="max-w-3xl">
                        <p class="hero-line hero-line-1 text-red-500 uppercase tracking-[0.4em] mb-4 text-sm md:text-base">
                            {{ $homepage->hero_badge ?? 'Official Stonebwoy Website' }}
                        </p>

                        <h1 class="hero-line hero-line-2 text-5xl md:text-7xl lg:text-8xl leading-none mb-5">
                            {{ $slider->title }}
                        </h1>

                        @if(!empty($slider->subtitle))
                            <h2 class="hero-line hero-line-3 text-xl md:text-3xl text-gray-300 mb-5">
                                {{ $slider->subtitle }}
                            </h2>
                        @elseif(!empty($homepage?->hero_subtitle))
                            <h2 class="hero-line hero-line-3 text-xl md:text-3xl text-gray-300 mb-5">
                                {{ $homepage->hero_subtitle }}
                            </h2>
                        @endif

                        @if(!empty($slider->description))
                            <p class="hero-line hero-line-4 text-gray-300 text-base md:text-lg leading-8 max-w-2xl mb-8">
                                {{ $slider->description }}
                            </p>
                        @elseif(!empty($homepage?->hero_description))
                            <p class="hero-line hero-line-4 text-gray-300 text-base md:text-lg leading-8 max-w-2xl mb-8">
                                {{ $homepage->hero_description }}
                            </p>
                        @endif

                        <div class="hero-line hero-line-5 flex flex-wrap gap-4">
                            @if(!empty($slider->button_link) && !empty($slider->button_text))
                                <a href="{{ $slider->button_link }}"
                                   class="btn-premium inline-block bg-red-600 hover:bg-red-700 px-8 py-4 rounded-full font-semibold transition">
                                    {{ $slider->button_text }}
                                </a>
                            @elseif(!empty($homepage?->hero_button_link) && !empty($homepage?->hero_button_text))
                                <a href="{{ $homepage->hero_button_link }}"
                                   class="btn-premium inline-block bg-red-600 hover:bg-red-700 px-8 py-4 rounded-full font-semibold transition">
                                    {{ $homepage->hero_button_text }}
                                </a>
                            @endif

                            <a href="#music"
                               class="btn-premium inline-block border border-white/30 hover:border-red-600 hover:bg-red-600/10 px-8 py-4 rounded-full font-semibold transition">
                                Explore Music
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        @empty
            <div class="slider-item relative min-h-[92vh] flex items-center bg-black">
                <div class="absolute inset-0">
                    <div class="absolute inset-0 bg-gradient-to-r from-black via-black/85 to-red-950/30"></div>
                </div>

                <div class="relative max-w-7xl mx-auto px-6 py-24 w-full">
                    <div class="max-w-3xl">
                        <p class="hero-line hero-line-1 text-red-500 uppercase tracking-[0.4em] mb-4 text-sm md:text-base">
                            {{ $homepage->hero_badge ?? 'Official Stonebwoy Website' }}
                        </p>

                        <h1 class="hero-line hero-line-2 text-5xl md:text-7xl lg:text-8xl leading-none mb-5">
                            {{ $homepage->hero_title ?? 'Stonebwoy' }}
                        </h1>

                        <h2 class="hero-line hero-line-3 text-xl md:text-3xl text-gray-300 mb-5">
                            {{ $homepage->hero_subtitle ?? 'Global Afro-Dancehall Energy' }}
                        </h2>

                        <p class="hero-line hero-line-4 text-gray-300 text-base md:text-lg leading-8 max-w-2xl mb-8">
                            {{ $homepage->hero_description ?? 'Welcome to the official one-page website for music, releases, news, bookings and artist brand presence.' }}
                        </p>

                        <a href="{{ $homepage->hero_button_link ?? '#music' }}"
                           class="hero-line hero-line-5 btn-premium inline-block bg-red-600 hover:bg-red-700 px-8 py-4 rounded-full font-semibold transition">
                            {{ $homepage->hero_button_text ?? 'Explore Music' }}
                        </a>
                    </div>
                </div>
            </div>
        @endforelse
    </div>

    @if($sliders->count() > 1)
        <button id="prevSlide" class="absolute left-4 md:left-8 top-1/2 -translate-y-1/2 z-20 w-12 h-12 rounded-full bg-black/40 hover:bg-red-600 transition text-white text-xl">
            ‹
        </button>

        <button id="nextSlide" class="absolute right-4 md:right-8 top-1/2 -translate-y-1/2 z-20 w-12 h-12 rounded-full bg-black/40 hover:bg-red-600 transition text-white text-xl">
            ›
        </button>

        <div class="absolute bottom-8 left-1/2 -translate-x-1/2 z-20 flex gap-3">
            @foreach($sliders as $index => $slider)
                <button class="slider-dot w-3 h-3 rounded-full {{ $index === 0 ? 'bg-red-600' : 'bg-white/40' }}"
                        data-dot="{{ $index }}"></button>
            @endforeach
        </div>
    @endif
</section>

<section id="about" class="section-reveal max-w-7xl mx-auto px-6 py-24 grid md:grid-cols-2 gap-14 items-center">
    <div>
        <p class="text-red-500 uppercase tracking-[0.3em] mb-3">
            {{ $homepage->about_badge ?? 'About Stonebwoy' }}
        </p>

        <h2 class="text-5xl md:text-6xl mb-6">
            {{ $homepage->about_title ?? 'A Global Ghanaian Sound' }}
        </h2>

        <p class="text-gray-300 leading-8 text-lg mb-6">
            {{ $homepage->about_text_1 ?? 'Stonebwoy represents premium Afro-Dancehall excellence with world-class performance, unmistakable style and a strong international music identity.' }}
        </p>

        <p class="text-gray-400 leading-8">
            {{ $homepage->about_text_2 ?? 'This homepage is built as a modern artist landing page that highlights music, updates, bookings and visual branding in one smooth experience.' }}
        </p>
    </div>

    <div class="float-soft">
        <div class="rounded-[2rem] bg-gradient-to-br from-red-800 to-black p-1 shadow-2xl">
            @if(!empty($homepage?->about_image))
                <div class="rounded-[2rem] min-h-[420px] bg-cover bg-center"
                     style="background-image:url('{{ asset('storage/'.$homepage->about_image) }}')"></div>
            @else
                <div class="rounded-[2rem] bg-[#111] min-h-[420px] flex items-center justify-center text-gray-500 text-xl">
                    Stonebwoy Feature Visual
                </div>
            @endif
        </div>
    </div>
</section>

<section id="stats" class="section-reveal max-w-7xl mx-auto px-6 py-8">
    <div class="grid md:grid-cols-4 gap-6">
        <div class="card-lift rounded-[1.8rem] border border-red-950 bg-[#101010] p-8 text-center">
            <div class="counter-number text-5xl text-white mb-2" data-counter="{{ (int) ($homepage->stat_1_number ?? 150) }}">0</div>
            <p class="text-gray-400 uppercase tracking-[0.25em] text-xs">{{ $homepage->stat_1_label ?? 'Live Performances' }}</p>
        </div>

        <div class="card-lift rounded-[1.8rem] border border-red-950 bg-[#101010] p-8 text-center">
            <div class="counter-number text-5xl text-white mb-2" data-counter="{{ (int) ($homepage->stat_2_number ?? 50) }}">0</div>
            <p class="text-gray-400 uppercase tracking-[0.25em] text-xs">{{ $homepage->stat_2_label ?? 'Awards & Honors' }}</p>
        </div>

        <div class="card-lift rounded-[1.8rem] border border-red-950 bg-[#101010] p-8 text-center">
            <div class="counter-number text-5xl text-white mb-2" data-counter="{{ (int) ($homepage->stat_3_number ?? 100) }}">0</div>
            <p class="text-gray-400 uppercase tracking-[0.25em] text-xs">{{ $homepage->stat_3_label ?? 'Major Releases' }}</p>
        </div>

        <div class="card-lift rounded-[1.8rem] border border-red-950 bg-[#101010] p-8 text-center">
            <div class="counter-number text-5xl text-white mb-2" data-counter="{{ (int) ($homepage->stat_4_number ?? 20) }}">0</div>
            <p class="text-gray-400 uppercase tracking-[0.25em] text-xs">{{ $homepage->stat_4_label ?? 'Global Tours' }}</p>
        </div>
    </div>
</section>

<section id="music" class="section-reveal max-w-7xl mx-auto px-6 py-20">
    <div class="max-w-5xl mx-auto">
        <div class="rounded-[2rem] overflow-hidden border border-red-950 bg-[#111] grid lg:grid-cols-2">
            @if($trendingRelease)
                <div class="min-h-[420px] bg-cover bg-center"
                     style="background-image:url('{{ $trendingRelease->cover_image ? asset('storage/'.$trendingRelease->cover_image) : '' }}')">
                    @if(!$trendingRelease->cover_image)
                        <div class="h-full min-h-[420px] flex items-center justify-center text-gray-500 text-xl">
                            Music Cover
                        </div>
                    @endif
                </div>

                <div class="p-8 md:p-12 flex flex-col justify-center">
                    <p class="text-red-500 uppercase tracking-[0.35em] text-sm mb-3">
                        {{ $homepage->music_badge ?? 'Latest Release' }}
                    </p>

                    <h2 class="text-5xl md:text-6xl mb-4">{{ $trendingRelease->title }}</h2>

                    <p class="text-gray-400 mb-4">
                        {{ ucfirst($trendingRelease->type ?? 'Release') }}
                        @if($trendingRelease->release_date)
                            • {{ $trendingRelease->release_date }}
                        @endif
                    </p>

                    @if($trendingRelease->description)
                        <p class="text-gray-300 leading-8 mb-8">
                            {{ $trendingRelease->description }}
                        </p>
                    @endif

                    <div class="flex flex-wrap gap-3">
                        <button
                            type="button"
                            class="btn-premium bg-red-600 hover:bg-red-700 px-6 py-3 rounded-full font-semibold"
                            onclick="openMusicModal(
                                '{{ addslashes($trendingRelease->title) }}',
                                '{{ addslashes($trendingRelease->type ?? 'Release') }}',
                                '{{ addslashes($trendingRelease->description ?? '') }}',
                                '{{ $trendingRelease->cover_image ? asset('storage/'.$trendingRelease->cover_image) : '' }}',
                                '{{ $trendingRelease->spotify_link ?? '' }}',
                                '{{ $trendingRelease->youtube_link ?? '' }}',
                                '{{ $trendingRelease->audiomack_link ?? '' }}',
                                '{{ $trendingRelease->apple_music_link ?? '' }}',
                                '{{ $trendingRelease->release_date ?? '' }}'
                            )">
                            Preview
                        </button>

                        @if($trendingRelease->spotify_link)
                            <a href="{{ $trendingRelease->spotify_link }}" target="_blank" class="btn-premium border border-red-600 px-6 py-3 rounded-full font-semibold">
                                Spotify
                            </a>
                        @endif
                    </div>
                </div>
            @else
                <div class="lg:col-span-2 p-12 text-center text-gray-500">
                    No music release added yet.
                </div>
            @endif
        </div>
    </div>
</section>

<div id="musicModal" class="fixed inset-0 z-[100] hidden">
    <div class="absolute inset-0 bg-black/80" onclick="closeMusicModal()"></div>

    <div class="relative max-w-5xl mx-auto mt-10 md:mt-16 bg-[#0d0d0d] border border-red-950 rounded-[2rem] overflow-hidden shadow-2xl w-[95%]">
        <button onclick="closeMusicModal()" class="absolute top-4 right-4 z-20 bg-black/60 hover:bg-red-600 w-10 h-10 rounded-full text-white text-lg">
            ✕
        </button>

        <div class="grid lg:grid-cols-2">
            <div id="modalCoverWrap" class="min-h-[320px] md:min-h-[460px] bg-[#111] bg-cover bg-center"></div>

            <div class="p-8 md:p-10">
                <p id="modalType" class="text-red-500 uppercase tracking-[0.3em] text-sm mb-3"></p>
                <h2 id="modalTitle" class="text-5xl md:text-6xl mb-4"></h2>
                <p id="modalDate" class="text-gray-500 mb-5"></p>
                <p id="modalDescription" class="text-gray-300 leading-8 mb-8"></p>

                <div class="flex flex-wrap gap-3 mb-8">
                    <a id="modalSpotify" href="#" target="_blank" class="hidden btn-premium bg-red-600 px-5 py-3 rounded-full text-sm font-semibold">Spotify</a>
                    <a id="modalApple" href="#" target="_blank" class="hidden btn-premium border border-white/30 px-5 py-3 rounded-full text-sm font-semibold">Apple Music</a>
                    <a id="modalAudiomack" href="#" target="_blank" class="hidden btn-premium border border-red-600 px-5 py-3 rounded-full text-sm font-semibold">Audiomack</a>
                    <a id="modalYoutube" href="#" target="_blank" class="hidden btn-premium border border-white/30 px-5 py-3 rounded-full text-sm font-semibold">YouTube</a>
                </div>

                <div id="modalEmbedWrap" class="rounded-2xl overflow-hidden bg-black"></div>
            </div>
        </div>
    </div>
</div>

<style>
    .kenburns-slide {
        animation: kenBurns 14s ease-in-out infinite alternate;
        transform: scale(1.05);
    }

    @keyframes kenBurns {
        0% { transform: scale(1.05) translate(0, 0); }
        100% { transform: scale(1.16) translate(-1.5%, -1.5%); }
    }

    .hero-line {
        opacity: 0;
        transform: translateY(24px);
        animation: heroLineUp .8s ease forwards;
    }

    .hero-line-1 { animation-delay: .1s; }
    .hero-line-2 { animation-delay: .25s; }
    .hero-line-3 { animation-delay: .4s; }
    .hero-line-4 { animation-delay: .55s; }
    .hero-line-5 { animation-delay: .7s; }

    @keyframes heroLineUp {
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
</style>

<script>
    function convertYoutubeToEmbed(url) {
        if (!url) return '';
        if (url.includes('watch?v=')) {
            return url.replace('watch?v=', 'embed/');
        }
        if (url.includes('youtu.be/')) {
            return url.replace('youtu.be/', 'www.youtube.com/embed/');
        }
        return url;
    }

    function openMusicModal(title, type, description, cover, spotify, youtube, audiomack, apple, date) {
        const modal = document.getElementById('musicModal');
        const modalTitle = document.getElementById('modalTitle');
        const modalType = document.getElementById('modalType');
        const modalDate = document.getElementById('modalDate');
        const modalDescription = document.getElementById('modalDescription');
        const modalCoverWrap = document.getElementById('modalCoverWrap');
        const modalEmbedWrap = document.getElementById('modalEmbedWrap');

        const modalSpotify = document.getElementById('modalSpotify');
        const modalYoutube = document.getElementById('modalYoutube');
        const modalAudiomack = document.getElementById('modalAudiomack');
        const modalApple = document.getElementById('modalApple');

        modalTitle.textContent = title || '';
        modalType.textContent = type || '';
        modalDate.textContent = date || '';
        modalDescription.textContent = description || '';

        if (cover) {
            modalCoverWrap.style.backgroundImage = `url('${cover}')`;
        } else {
            modalCoverWrap.style.backgroundImage = 'none';
        }

        modalSpotify.classList.add('hidden');
        modalYoutube.classList.add('hidden');
        modalAudiomack.classList.add('hidden');
        modalApple.classList.add('hidden');
        modalEmbedWrap.innerHTML = '';

        if (spotify) {
            modalSpotify.href = spotify;
            modalSpotify.classList.remove('hidden');
        }

        if (youtube) {
            modalYoutube.href = youtube;
            modalYoutube.classList.remove('hidden');

            const embedUrl = convertYoutubeToEmbed(youtube);
            modalEmbedWrap.innerHTML = `
                <iframe
                    src="${embedUrl}"
                    class="w-full h-[240px] md:h-[280px]"
                    frameborder="0"
                    allowfullscreen
                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture">
                </iframe>
            `;
        }

        if (audiomack) {
            modalAudiomack.href = audiomack;
            modalAudiomack.classList.remove('hidden');
        }

        if (apple) {
            modalApple.href = apple;
            modalApple.classList.remove('hidden');
        }

        modal.classList.remove('hidden');
        document.body.style.overflow = 'hidden';
    }

    function closeMusicModal() {
        document.getElementById('musicModal').classList.add('hidden');
        document.getElementById('modalEmbedWrap').innerHTML = '';
        document.body.style.overflow = 'auto';
    }

    document.addEventListener('keydown', function (e) {
        if (e.key === 'Escape') {
            closeMusicModal();
        }
    });
</script>

@if($sliders->count() > 1)
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const slides = document.querySelectorAll('.slider-item');
        const dots = document.querySelectorAll('.slider-dot');
        const nextBtn = document.getElementById('nextSlide');
        const prevBtn = document.getElementById('prevSlide');
        let current = 0;

        function restartHeroAnimation(slide) {
            const lines = slide.querySelectorAll('.hero-line');
            lines.forEach(line => {
                line.style.animation = 'none';
                line.offsetHeight;
                line.style.animation = null;
            });
        }

        function showSlide(index) {
            slides.forEach((slide, i) => {
                if (i === index) {
                    slide.classList.remove('hidden');
                    slide.style.opacity = '1';
                    slide.style.transform = 'scale(1)';
                    restartHeroAnimation(slide);
                } else {
                    slide.classList.add('hidden');
                    slide.style.opacity = '0';
                    slide.style.transform = 'scale(1.03)';
                }
            });

            dots.forEach((dot, i) => {
                dot.classList.toggle('bg-red-600', i === index);
                dot.classList.toggle('bg-white/40', i !== index);
            });

            current = index;
        }

        function nextSlide() {
            let next = current + 1;
            if (next >= slides.length) next = 0;
            showSlide(next);
        }

        function prevSlideFn() {
            let prev = current - 1;
            if (prev < 0) prev = slides.length - 1;
            showSlide(prev);
        }

        if (nextBtn) nextBtn.addEventListener('click', nextSlide);
        if (prevBtn) prevBtn.addEventListener('click', prevSlideFn);

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

        setInterval(nextSlide, 6000);
    });
</script>
@endif

@endsection