@extends('frontend.layouts.app')

@section('content')

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

    @if(!empty($page?->banner_image))
        <div class="absolute inset-0 bg-cover bg-center opacity-20 hero-zoom"
             style="background-image:url('{{ asset('storage/' . $page->banner_image) }}')"></div>
        <div class="absolute inset-0 bg-black/80"></div>
    @endif

    <div class="relative max-w-7xl mx-auto px-6 py-24 text-center">
        <p class="hero-line hero-line-1 text-red-500 uppercase tracking-[0.35em] text-sm mb-4">
            Official Music
        </p>

        <h1 class="hero-line hero-line-2 text-6xl md:text-8xl leading-none mb-5">
            {{ strtoupper($page->title ?? 'Music') }}
        </h1>

        <p class="hero-line hero-line-3 text-gray-400 text-lg max-w-3xl mx-auto leading-8">
            {{ $page->meta_description ?? 'Discover official releases, albums, singles and featured music from Stonebwoy.' }}
        </p>
    </div>
</section>

@if(!empty($page?->content))
<section class="section-reveal max-w-5xl mx-auto px-6 py-14">
    <div class="rounded-[2rem] border border-red-950 bg-[#101010] p-8 md:p-10">
        <div class="prose prose-invert max-w-none text-gray-300 leading-8">
            {!! $page->content !!}
        </div>
    </div>
</section>
@endif

<section class="max-w-7xl mx-auto px-6 py-12">
    <div class="section-reveal flex items-center justify-between mb-10">
        <div>
            <p class="text-red-500 uppercase tracking-[0.3em] text-sm mb-2">Latest Releases</p>
            <h2 class="text-5xl">Music Collection</h2>
        </div>
    </div>

    <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
        @forelse($music as $index => $item)
            <div class="music-card section-reveal card-lift rounded-[1.8rem] overflow-hidden border border-red-950 bg-[#111] shadow-xl"
                 style="transition-delay: {{ $index * 70 }}ms">
                <div class="relative overflow-hidden">
                    <div class="h-80 bg-cover bg-center card-image-zoom"
                         style="background-image:url('{{ $item->cover_image ? asset('storage/'.$item->cover_image) : '' }}')">
                        @if(!$item->cover_image)
                            <div class="h-full flex items-center justify-center text-gray-500 text-xl">
                                Cover Art
                            </div>
                        @endif
                    </div>

                    <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-transparent to-transparent"></div>

                    <div class="absolute top-4 left-4">
                        <span class="bg-red-600 text-white text-xs px-3 py-1 rounded-full uppercase tracking-widest">
                            {{ ucfirst($item->type ?? 'Release') }}
                        </span>
                    </div>
                </div>

                <div class="p-6">
                    <h3 class="text-3xl mb-2">{{ $item->title }}</h3>

                    <p class="text-gray-400 mb-4">
                        @if($item->release_date)
                            {{ \Carbon\Carbon::parse($item->release_date)->format('F d, Y') }}
                        @else
                            Official Release
                        @endif
                    </p>

                    @if($item->description)
                        <p class="text-gray-300 leading-7 mb-6">
                            {{ \Illuminate\Support\Str::limit(strip_tags($item->description), 120) }}
                        </p>
                    @endif

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

                        @if($item->spotify_link)
                            <a href="{{ $item->spotify_link }}" target="_blank"
                               class="btn-premium border border-red-600 px-5 py-2.5 rounded-full text-sm font-semibold hover:bg-red-600 hover:text-white transition">
                                Spotify
                            </a>
                        @endif
                    </div>
                </div>
            </div>
        @empty
            <div class="col-span-full section-reveal text-center text-gray-500 py-20">
                No music releases available yet.
            </div>
        @endforelse
    </div>

    <div class="section-reveal max-w-7xl mx-auto px-6 pb-16 mt-10">
        {{ $music->links() }}
    </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>
    .hero-zoom {
        animation: heroZoom 12s ease-in-out infinite alternate;
        transform: scale(1.04);
    }

    @keyframes heroZoom {
        0% { transform: scale(1.04) translate(0, 0); }
        100% { transform: scale(1.12) translate(-1%, -1%); }
    }

    .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: .45s; }

    @keyframes heroLineUp {
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .section-reveal {
        opacity: 0;
        transform: translateY(38px);
        transition: opacity .8s ease, transform .8s ease;
    }

    .section-reveal.show {
        opacity: 1;
        transform: translateY(0);
    }

    .card-lift {
        transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
    }

    .card-lift:hover {
        transform: translateY(-10px);
        box-shadow: 0 22px 48px rgba(0,0,0,.40);
        border-color: rgba(220, 38, 38, .45);
    }

    .card-image-zoom {
        transition: transform .6s ease;
    }

    .music-card:hover .card-image-zoom {
        transform: scale(1.08);
    }

    .btn-premium {
        position: relative;
        overflow: hidden;
        transition: all .3s ease;
    }

    .btn-premium::before {
        content: "";
        position: absolute;
        top: 0;
        left: -120%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
        transition: left .6s ease;
    }

    .btn-premium:hover::before {
        left: 120%;
    }
</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();
        }
    });

    document.addEventListener('DOMContentLoaded', function () {
        const reveals = document.querySelectorAll('.section-reveal');

        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('show');
                }
            });
        }, { threshold: 0.12 });

        reveals.forEach(item => observer.observe(item));
    });
</script>

@endsection