@extends('layouts.app')

@section('title', 'Truyện Hay - Trang chủ Website đọc truyện')
@section('description', 'Nền tảng đọc truyện online miễn phí hàng đầu với kho tàng truyện phong phú, đa dạng thể loại, cập nhật chương mới liên tục hàng ngày.')

@section('content')
    {{-- Hero Section - Featured Comic --}}
    @if($featuredComic)
        <section class="relative w-full h-[400px] md:h-[500px] overflow-hidden group">
            <div class="absolute inset-0 bg-cover bg-center transition-transform duration-700 group-hover:scale-105"
                style="background-image: url('{{ $featuredComic->banner_image }}');"></div>
            <div class="absolute inset-0 bg-gradient-to-t from-background-dark via-background-dark/60 to-transparent"></div>
            <div class="absolute inset-0 bg-gradient-to-r from-background-dark via-background-dark/80 to-transparent"></div>

            <div class="container mx-auto px-4 lg:px-8 h-full relative z-10 flex flex-col justify-center max-w-7xl">
                <div class="max-w-2xl animate-fade-in-up mb-[3rem]">
                    <span class="inline-block py-1 px-3 rounded-full bg-primary/20 text-primary border border-primary/30 text-xs font-bold mb-4 backdrop-blur-sm">
                        SPOTLIGHT HÔM NAY
                    </span>
                    <h2 class="text-4xl md:text-6xl font-extrabold text-white mb-4 leading-tight">
                        {{ $featuredComic->title }}
                    </h2>
                    <div class="flex items-center gap-4 text-gray-300 text-sm mb-6">
                        <span class="flex items-center gap-1">
                            <span class="material-symbols-outlined text-yellow-500 text-lg">star</span>
                            {{ number_format($featuredComic->rating, 1) }}
                        </span>
                        <span>•</span>
                        <span>{{ $featuredComic->author->name }}</span>
                        <span>•</span>
                        <span>{{ $featuredComic->categories->first()->name ?? '' }}</span>
                    </div>
                    <p class="text-gray-300 text-base md:text-lg line-clamp-3 mb-8 max-w-xl">
                        {{ $featuredComic->description }}
                    </p>
                    <div class="flex gap-4">
                        <button class="flex items-center justify-center h-12 px-8 rounded-lg bg-primary hover:bg-primary-hover text-white font-bold text-base shadow-lg shadow-primary/40 transition-all transform hover:-translate-y-0.5">
                            <span class="mr-2 material-symbols-outlined text-[20px]">menu_book</span> Đọc Ngay
                        </button>
                        <button class="flex items-center justify-center h-12 px-6 rounded-lg bg-white/10 hover:bg-white/20 text-white font-bold text-base backdrop-blur-md border border-white/10 transition-colors">
                            <span class="material-symbols-outlined text-[20px]">bookmark_add</span>
                        </button>
                    </div>
                </div>
            </div>
        </section>
    @endif

    <div class="container mx-auto px-4 lg:px-8 max-w-7xl -mt-20 relative z-20 pb-12">
        {{-- Recommended Comics Section --}}
        <section class="mb-12 mt-12.5">
            <div class="flex items-center justify-between mb-4 px-2">
                <h3 class="text-white text-2xl font-bold flex items-center gap-2">
                    <span class="material-symbols-outlined text-primary">recommend</span> Truyện Đề Cử
                </h3>
                <a class="text-sm text-gray-400 hover:text-white flex items-center gap-1 transition-colors" href="#">
                    Xem tất cả <span class="material-symbols-outlined text-base">arrow_forward</span>
                </a>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                @foreach($recommendedComics as $comic)
                    <x-comic-card-horizontal :comic="$comic" />
                @endforeach
            </div>
        </section>

        <div class="grid grid-cols-1 lg:grid-cols-12 gap-8">
            {{-- Recently Updated Comics --}}
            <div class="lg:col-span-8">
                <div class="flex items-center justify-between mb-6 px-2 border-b border-gray-800 pb-2">
                    <h3 class="text-white text-xl font-bold flex items-center gap-2">
                        <span class="material-symbols-outlined text-primary">update</span> Mới Cập Nhật
                    </h3>
                </div>
                <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">
                    @foreach($recentlyUpdatedComics as $comic)
                        <x-comic-card-grid :comic="$comic" />
                    @endforeach
                </div>
                <div class="mt-8 flex justify-center">
                    <a class="px-6 py-2 rounded-full border border-gray-700 text-gray-300 hover:text-white hover:border-primary hover:bg-primary/10 transition-all text-sm font-semibold flex items-center gap-2" href="{{ route('comics.list') }}">
                        Xem thêm cập nhật <span class="material-symbols-outlined text-sm">expand_more</span>
                    </a>
                </div>
            </div>

            {{-- Sidebar --}}
            <aside class="lg:col-span-4 flex flex-col gap-8">
                {{-- Ranking Section --}}
                <div class="bg-surface-dark rounded-xl p-5 border border-gray-800">
                    <div class="flex items-center justify-between mb-4 pb-2 border-b border-gray-700/50">
                        <h3 class="text-white font-bold text-lg flex items-center gap-2">
                            <span class="material-symbols-outlined text-yellow-500">trophy</span> Bảng Xếp Hạng
                        </h3>
                        <div class="flex gap-2">
                            <button class="text-[10px] font-bold text-primary bg-primary/10 px-2 py-1 rounded">Tuần</button>
                            <button class="text-[10px] font-bold text-gray-500 hover:text-gray-300 transition-colors px-2 py-1">Tháng</button>
                        </div>
                    </div>
                    <div class="flex flex-col gap-4">
                        @foreach($topRankedComics as $index => $comic)
                            <x-ranking-item :comic="$comic" :index="$index" />
                        @endforeach
                    </div>
                </div>

                {{-- Categories Section --}}
                <div class="bg-surface-dark rounded-xl p-5 border border-gray-800">
                    <h3 class="text-white font-bold text-lg mb-4 flex items-center gap-2">
                        <span class="material-symbols-outlined text-pink-500">category</span> Thể Loại
                    </h3>
                    <div class="flex flex-wrap gap-2">
                        @foreach($categories as $category)
                        <a class="text-xs px-3 py-1.5 rounded-lg bg-gray-800 text-gray-300 hover:bg-primary hover:text-white transition-all"
                            href="#">{{ $category->name }}</a>
                        @endforeach
                    </div>
                </div>
            </aside>
        </div>
    </div>
@endsection