@extends('layouts.app')

@section('title', 'Home')

@section('content')
    {{-- Hero Banner --}}
    <section class="relative overflow-hidden">
        <div class="relative h-64 sm:h-80 md:h-96 lg:h-[28rem]">
            {{-- Gradient banner placeholder --}}
            <div class="w-full h-full bg-gradient-to-br from-gray-900 via-red-900/30 to-black"></div>
            {{-- Dark overlay gradient --}}
            <div class="absolute inset-0 bg-gradient-to-t from-black via-black/60 to-black/20"></div>
            <div class="absolute inset-0 bg-gradient-to-r from-black/40 to-transparent"></div>

            {{-- Banner Content --}}
            <div class="absolute inset-0 flex items-end">
                <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-8 md:pb-12 w-full">
                    <div class="flex items-end gap-5">
                        {{-- Logo placeholder --}}
                        <div class="w-20 h-20 md:w-28 md:h-28 rounded-full bg-red-600 flex items-center justify-center ring-4 ring-black shadow-2xl flex-shrink-0">
                            <span class="text-white text-2xl md:text-4xl font-extrabold">TK</span>
                        </div>
                        {{-- Text --}}
                        <div class="pb-1">
                            <h1 class="text-3xl md:text-4xl lg:text-5xl font-extrabold text-white drop-shadow-lg">
                                TTEOTK Devotionals
                            </h1>
                            <p class="text-gray-300 text-sm md:text-base mt-1 max-w-xl drop-shadow">
                                Your home for every TTEOTK devotional. Watch, discover, and create playlists.
                            </p>
                            <div class="flex items-center gap-4 mt-3">
                                <span class="text-yellow-400 font-semibold text-sm">{{ number_format($totalVideos) }} Videos</span>
                                <span class="text-gray-500">|</span>
                                <a href="https://www.youtube.com/@tteotk" target="_blank" rel="noopener noreferrer"
                                   class="inline-flex items-center gap-1.5 text-red-400 hover:text-red-300 text-sm font-medium transition-colors">
                                    <i class="fa-brands fa-youtube"></i> YouTube Channel
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- Today's Devotional / Featured Video --}}
    @if($featuredVideo)
    <section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10 lg:py-12">
        <div class="flex items-center gap-3 mb-6">
            <div class="w-1.5 h-8 bg-red-500 rounded-full"></div>
            <h2 class="text-2xl md:text-3xl font-bold text-white">
                @if($isTodayMatch)
                    Today's Devotional
                @else
                    Featured
                @endif
            </h2>
            @if($isTodayMatch)
                <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-yellow-500/20 text-yellow-300 border border-yellow-500/30">
                    <i class="fa-solid fa-calendar-day mr-1.5"></i>
                    {{ $devotionalDate->format('F j') }}
                </span>
            @endif
        </div>
        <div class="max-w-4xl">
            <div class="relative aspect-video rounded-xl overflow-hidden shadow-2xl shadow-red-900/30 ring-1 ring-gray-800/50">
                <iframe
                    src="https://www.youtube-nocookie.com/embed/{{ $featuredVideo->youtube_id }}"
                    class="absolute inset-0 w-full h-full"
                    frameborder="0"
                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                    allowfullscreen
                ></iframe>
            </div>
            <div class="mt-4 flex items-center gap-3">
                <a href="{{ route('videos.show', $featuredVideo) }}" class="text-xl font-semibold text-white hover:text-yellow-400 transition-colors">
                    {{ $featuredVideo->title }}
                </a>
                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-900/50 text-yellow-300 border border-red-700/50">
                    {{ $featuredVideo->formatted_duration }}
                </span>
            </div>
        </div>
    </section>
    @endif

    {{-- Continue Watching (auth only) --}}
    @auth
        @if($continueWatching->isNotEmpty())
            <section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10 lg:py-12">
                <div class="flex items-center justify-between mb-6">
                    <div class="flex items-center gap-3">
                        <div class="w-1.5 h-8 bg-green-500 rounded-full"></div>
                        <h2 class="text-2xl md:text-3xl font-bold text-white">Continue Watching</h2>
                    </div>
                    <a href="{{ route('history') }}" class="text-yellow-400 hover:text-yellow-300 text-sm font-medium transition-colors flex items-center gap-1">
                        View History
                        <svg class="w-4 h-4" 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"/>
                        </svg>
                    </a>
                </div>
                <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
                    @foreach($continueWatching as $video)
                        <a href="{{ route('videos.show', $video) }}" class="group block">
                            <div class="bg-gray-800 rounded-xl overflow-hidden border border-gray-700/50 transition-all duration-300 group-hover:scale-[1.03] group-hover:shadow-xl group-hover:shadow-green-900/20 group-hover:border-green-600/30">
                                <div class="relative aspect-video overflow-hidden">
                                    <img src="{{ $video->thumbnail }}"
                                         alt="{{ $video->title }}"
                                         class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110"
                                         loading="lazy">
                                    <div class="absolute inset-0 bg-black/0 group-hover:bg-black/30 transition-all duration-300 flex items-center justify-center">
                                        <div class="w-12 h-12 rounded-full bg-green-600/90 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-all duration-300 transform scale-75 group-hover:scale-100">
                                            <svg class="w-5 h-5 text-white ml-0.5" fill="currentColor" viewBox="0 0 24 24">
                                                <path d="M8 5v14l11-7z"/>
                                            </svg>
                                        </div>
                                    </div>
                                    <div class="absolute bottom-2 right-2 bg-black/80 text-white text-xs font-medium px-2 py-1 rounded">
                                        {{ $video->formatted_duration }}
                                    </div>
                                </div>
                                <div class="p-3">
                                    <h3 class="text-xs sm:text-sm font-semibold text-white line-clamp-2 leading-snug group-hover:text-green-300 transition-colors">
                                        {{ $video->title }}
                                    </h3>
                                </div>
                            </div>
                        </a>
                    @endforeach
                </div>
            </section>
        @endif
    @endauth

    {{-- Guest CTA: ONLY today's devotional + sign-up invitation --}}
    @guest
        <section class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
            <div class="relative overflow-hidden rounded-2xl border border-red-700/40 bg-gradient-to-br from-red-900/30 via-gray-900 to-gray-950 p-8 md:p-10 text-center shadow-2xl shadow-red-900/20">
                <div class="absolute -top-16 -right-16 w-48 h-48 rounded-full bg-red-600/20 blur-3xl"></div>
                <div class="absolute -bottom-16 -left-16 w-48 h-48 rounded-full bg-yellow-600/10 blur-3xl"></div>
                <div class="relative">
                    <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-yellow-500/20 border border-yellow-500/30 text-yellow-300 text-xs font-semibold uppercase tracking-wider mb-4">
                        <i class="fa-solid fa-envelope-open-text"></i> Free Daily Devotionals
                    </div>
                    <h2 class="text-2xl md:text-3xl font-bold text-white mb-3">Join us &mdash; new devotional every day.</h2>
                    <p class="text-gray-300 max-w-xl mx-auto mb-6">
                        Create a free account to unlock the full library, browse by book and month, save playlists, and receive new devotionals straight to your inbox.
                    </p>
                    <div class="flex flex-wrap items-center justify-center gap-3">
                        <a href="{{ route('register') }}" class="inline-flex items-center gap-2 px-6 py-3 bg-red-600 hover:bg-red-500 text-white font-semibold rounded-xl shadow-lg shadow-red-900/40 transition-all hover:-translate-y-0.5">
                            <i class="fa-solid fa-user-plus"></i> Create Free Account
                        </a>
                        <a href="{{ route('login') }}" class="inline-flex items-center gap-2 px-6 py-3 bg-gray-800 hover:bg-gray-700 border border-gray-700 text-white font-semibold rounded-xl transition-colors">
                            Sign In
                        </a>
                    </div>
                    <p class="text-gray-500 text-xs mt-4">By creating an account you'll be subscribed to daily devotionals. Unsubscribe anytime.</p>
                </div>
            </div>
        </section>
    @endguest

    {{-- The library (Browse by Book, by Month, View All) is gated behind auth --}}
    @auth
    {{-- Browse by Category --}}
    @if($categories->isNotEmpty())
        <section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
            <div class="flex items-center gap-3 mb-4">
                <div class="w-1.5 h-6 bg-red-500 rounded-full"></div>
                <h2 class="text-lg font-bold text-white">Browse by Book</h2>
            </div>
            <div class="flex flex-wrap gap-2">
                @foreach($categories as $category)
                    <a href="{{ route('videos.index', ['category' => $category->slug]) }}"
                       class="inline-flex items-center gap-2 px-4 py-2 rounded-full text-sm font-medium transition-all duration-200 hover:-translate-y-0.5 hover:shadow-lg border"
                       style="background-color: {{ $category->color }}15; border-color: {{ $category->color }}40; color: {{ $category->color }}">
                        <span class="w-2 h-2 rounded-full" style="background-color: {{ $category->color }}"></span>
                        {{ $category->name }}
                        <span class="text-xs opacity-70">({{ $category->videos_count }})</span>
                    </a>
                @endforeach
            </div>
        </section>
    @endif

    {{-- Browse by Month --}}
    @if(isset($videosByMonth) && $videosByMonth->isNotEmpty())
        @foreach($videosByMonth as $monthName => $monthVideos)
            <section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
                <div class="flex items-center justify-between mb-6">
                    <div class="flex items-center gap-3">
                        <div class="w-1.5 h-8 bg-yellow-500 rounded-full"></div>
                        <h2 class="text-2xl md:text-3xl font-bold text-white">{{ $monthName }}</h2>
                        <span class="text-gray-500 text-sm">({{ $monthVideos->count() }} devotionals)</span>
                    </div>
                    <a href="{{ route('videos.index') }}" class="text-yellow-400 hover:text-yellow-300 text-sm font-medium transition-colors flex items-center gap-1">
                        View All
                        <svg class="w-4 h-4" 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"/>
                        </svg>
                    </a>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
                    @foreach($monthVideos->take(8) as $video)
                        <a href="{{ route('videos.show', $video) }}" class="group block">
                            <div class="bg-gray-800 rounded-xl overflow-hidden border border-gray-700/50 transition-all duration-300 group-hover:scale-[1.03] group-hover:shadow-xl group-hover:shadow-red-900/20 group-hover:border-red-600/30">
                                <div class="relative aspect-video overflow-hidden">
                                    <img
                                        src="https://img.youtube.com/vi/{{ $video->youtube_id }}/hqdefault.jpg"
                                        alt="{{ $video->title }}"
                                        class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110"
                                        loading="lazy"
                                    >
                                    <div class="absolute inset-0 bg-black/0 group-hover:bg-black/30 transition-all duration-300 flex items-center justify-center">
                                        <div class="w-14 h-14 rounded-full bg-red-600/90 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-all duration-300 transform scale-75 group-hover:scale-100">
                                            <svg class="w-6 h-6 text-white ml-1" fill="currentColor" viewBox="0 0 24 24">
                                                <path d="M8 5v14l11-7z"/>
                                            </svg>
                                        </div>
                                    </div>
                                    <div class="absolute bottom-2 right-2 bg-black/80 text-white text-xs font-medium px-2 py-1 rounded">
                                        {{ $video->formatted_duration }}
                                    </div>
                                </div>
                                <div class="p-4">
                                    <h3 class="text-sm font-semibold text-white line-clamp-2 leading-snug group-hover:text-yellow-300 transition-colors">
                                        {{ $video->title }}
                                    </h3>
                                </div>
                            </div>
                        </a>
                    @endforeach
                </div>
                @if($monthVideos->count() > 8)
                    <div class="text-center mt-6">
                        <a href="{{ route('videos.index') }}" class="text-yellow-400 hover:text-yellow-300 text-sm font-medium transition-colors">
                            View all {{ $monthVideos->count() }} {{ $monthName }} devotionals &rarr;
                        </a>
                    </div>
                @endif
            </section>
        @endforeach
    @endif

    {{-- View All Videos Button --}}
    <div class="text-center py-10">
        <a href="{{ route('videos.index') }}" class="inline-flex items-center gap-2 px-8 py-3 bg-red-600 hover:bg-red-700 text-white font-semibold rounded-xl transition-all duration-200 hover:shadow-lg hover:shadow-red-900/30 hover:-translate-y-0.5">
            <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="M4 6h16M4 10h16M4 14h16M4 18h16"/>
            </svg>
            View All {{ number_format($totalVideos) }} Videos
        </a>
    </div>
    @endauth

    {{-- Email subscription popup (Alpine-driven, 8s delay, 30-day suppression) --}}
    @guest
        @include('partials.subscribe-popup')
    @endguest
@endsection