@extends('layouts.app')

@section('content')
@php
use Carbon\Carbon;
@endphp
<div class="fixed inset-0 bg-gradient-to-br from-green-50 via-emerald-50 to-teal-50 z-0"></div>

<div
    class="fixed inset-0 bg-[radial-gradient(circle_at_25%_20%,rgba(52,211,153,0.15)_0%,transparent_40%),radial-gradient(circle_at_75%_80%,rgba(34,197,94,0.1)_0%,transparent_45%)] z-0 pointer-events-none">
</div>

<div class="fixed inset-0 overflow-hidden z-0 pointer-events-none">
    <div class="absolute top-20 left-10 w-2 h-2 bg-green-400 rounded-full animate-ping opacity-40"></div>
    <div class="absolute top-40 right-20 w-1 h-1 bg-emerald-300 rounded-full animate-pulse opacity-50"></div>
    <div class="absolute bottom-32 left-1/4 w-1.5 h-1.5 bg-teal-400 rounded-full animate-bounce opacity-30"></div>
    <div class="absolute top-1/3 right-1/3 w-1 h-1 bg-green-300 rounded-full animate-pulse opacity-40"></div>
</div>

<!-- <div class="fixed inset-0 flex items-center justify-center pointer-events-none z-0">
    <img src="{{ asset('assets/img/isnu_logo.png') }}"
         class="w-[500px] md:w-[800px] opacity-[0.03] mix-blend-multiply grayscale" />
</div> -->

<div class="relative z-10">
    @include('navbar')

    <section id="pertandingan" class="min-h-screen py-4 px-4 pt-24 pb-20">
        <div class="w-full max-w-6xl mx-auto">
            <div class="flex justify-center mb-6 sm:mb-10 sticky top-20 z-40">
    <div id="tab-container" class="bg-white/90 backdrop-blur-md p-1.5 rounded-full shadow-2xl flex space-x-1 border border-white/50">
        <button data-tab="live" class="tab-button active-tab py-2.5 px-6 sm:px-10 rounded-full text-xs sm:text-sm font-bold transition-all duration-500 active:scale-95">
            Live & Highlight
        </button>
        <button data-tab="jadwal" class="tab-button inactive-tab py-2.5 px-6 sm:px-10 rounded-full text-xs sm:text-sm font-bold transition-all duration-300 active:scale-95">
            Jadwal Lengkap
        </button>
        <button data-tab="grup" class="tab-button inactive-tab py-2.5 px-6 sm:px-10 rounded-full text-xs sm:text-sm font-bold transition-all duration-300 active:scale-95">
            Klasemen & Knockout
        </button>
    </div>
</div>

            <div class="grid grid-cols-1 md:grid-cols-5 gap-6 lg:gap-8">
                <div id="live-panel-container" data-panel="live" class="tab-panel col-span-1 md:col-start-2 md:col-span-3 space-y-6 sm:space-y-8 animate-fadeIn">
                    @include('partials.live-panel')
                </div>

                <div id="jadwal-panel-container" data-panel="jadwal" class="tab-panel col-span-1 hidden md:col-start-2 md:col-span-3 animate-fadeIn">
                    @include('partials.jadwal-panel')
                </div>

                <div id="klasemen-panel-container" data-panel="grup" class="tab-panel col-span-1 hidden md:col-start-2 md:col-span-3 animate-fadeIn">
                    @include('partials.klasmen-panel')
                </div>
            </div>
        </div>
    </section>
</div>

@include('partials.pertandingan-scripts')
@include('footer')
@endsection