@extends('layouts.app')

@section('title', 'OnAPB - Inicio')

@section('styles')
<link rel="stylesheet" href="{{ asset('static/index.css') }}">
@endsection

@section('content')
<div id="main-content">
    <!-- HERO SECTION: The Editorial Statement -->
    <div id="heroCarousel" class="carousel slide carousel-fade" data-bs-ride="carousel">
        <div class="carousel-inner">
            @foreach($carouselItems as $index => $item)
            <div class="carousel-item {{ $index === 0 ? 'active' : '' }}">
                <div class="row g-0 align-items-center" style="min-height: 80vh; background: var(--surface);">
                    <div class="col-md-6 p-5">
                        <div class="p-lg-5">
                            <span class="kfx-live-pill mb-4">ONAPB Exclusivo · En vivo</span>
                            <h1 class="hero-title fw-bold mt-3" style="font-size: clamp(3rem, 10vw, 6rem); transition: all 0.5s ease;">{{ $item->titulo }}</h1>
                            <p class="fs-5 mb-5 text-kinetic-muted kfx-reveal" data-fx="up" style="max-width: 500px;">{{ $item->subtitulo }}</p>
                            @if($item->boton_texto && $item->boton_enlace)
                                <a href="{{ url($item->boton_enlace) }}" class="btn-kinetic-primary text-decoration-none" data-magnetic data-magnetic-strength="0.18" style="padding: 1.2rem 3rem; font-size: 1.1rem; border-radius: 0;">{{ $item->boton_texto }} <span class="ms-2">→</span></a>
                            @endif
                        </div>
                    </div>
                    <div class="col-md-6 position-relative kfx-img-cover">
                        <img src="{{ Str::startsWith($item->imagen, 'http') ? $item->imagen : asset($item->imagen) }}" class="w-100 hero-clip" data-parallax="0.08" style="height: 80vh; object-fit: cover; clip-path: polygon(10% 0, 100% 0, 100% 100%, 0% 100%);" alt="{{ $item->titulo }}">
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>

    <!-- NEWS & TOURNAMENTS: The Pulse of ONAPB -->
    <div class="container-fluid py-5" style="background: var(--surface);">
        <div class="container py-4">
            <div class="row g-5">
                <!-- Latest News Column -->
                <div class="col-lg-8">
                    <div class="d-flex justify-content-between align-items-end mb-4">
                        <div>
                            <span class="kfx-section-tag">Últimas Noticias</span>
                            <h2 class="display-5 fw-bold mb-0 kinetic-reveal-text">Cobertura Exclusiva<span class="text-primary">.</span></h2>
                        </div>
                        <a href="{{ route('noticias.index') }}" class="kfx-link text-muted small fw-bold">VER TODO <i class="bi bi-arrow-right"></i></a>
                    </div>

                    @foreach($noticias as $n)
                    <div class="kinetic-news-item mb-4 pb-4 border-bottom">
                        <div class="row g-4 align-items-center">
                            <div class="col-4 col-md-3">
                                <div class="ratio ratio-1x1 overflow-hidden">
                                    <img src="{{ str_starts_with($n->imagen, 'http') ? $n->imagen : asset($n->imagen) }}" class="object-fit-cover" alt="{{ $n->titulo }}">
                                </div>
                            </div>
                            <div class="col-8 col-md-9">
                                <span class="badge bg-primary-container text-primary mb-2">{{ $n->categoria ?? 'Media' }}</span>
                                <h3 class="h4 fw-bold mb-2">
                                    <a href="{{ route('noticias.show', $n->id) }}" class="text-decoration-none text-dark hover-primary">{{ $n->titulo }}</a>
                                </h3>
                                <p class="text-muted small mb-0 line-clamp-2">{{ Str::limit(strip_tags($n->contenido), 120) }}</p>
                            </div>
                        </div>
                    </div>
                    @endforeach
                    @if($noticias->isEmpty())
                        <p class="text-muted italic">No hay noticias recientes.</p>
                    @endif
                </div>

                <!-- Active Tournaments Column -->
                <div class="col-lg-4">
                    <div class="p-4 bg-dark text-white h-100 position-relative animate-on-scroll" style="border-left: 8px solid var(--primary); min-height: 540px; display: flex; flex-direction: column;">
                        <div class="d-flex justify-content-between align-items-center mb-4">
                            <h2 class="h3 fw-bold mb-0">Tablas <span class="text-primary">Live</span></h2>
                        </div>

                        <div id="standingsCarousel" class="carousel slide flex-grow-1" data-bs-ride="carousel">
                            <!-- Custom Indicators -->
                            <div class="carousel-indicators" style="bottom: -40px;">
                                @php $slideIdx = 0; @endphp
                                @foreach($standingsData as $torneoId => $grupos)
                                    @foreach($grupos as $nombreGrupo => $equipos)
                                        <button type="button" data-bs-target="#standingsCarousel" data-bs-slide-to="{{ $slideIdx }}" class="{{ $slideIdx === 0 ? 'active' : '' }}" aria-current="{{ $slideIdx === 0 ? 'true' : '' }}" aria-label="Slide {{ $slideIdx + 1 }}" style="width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--primary); background: transparent;"></button>
                                        @php $slideIdx++; @endphp
                                    @endforeach
                                @endforeach
                            </div>

                            <div class="carousel-inner">
                                @php $isFirst = true; $totalSlides = 0; @endphp
                                @foreach($standingsData as $torneoId => $grupos)
                                    @php $torneoObj = $torneos->firstWhere('id', $torneoId); @endphp
                                    @foreach($grupos as $nombreGrupo => $equipos)
                                        @php $totalSlides++; @endphp
                                        <div class="carousel-item {{ $isFirst ? 'active' : '' }}">
                                            <div class="standings-header mb-3">
                                                <div class="d-flex justify-content-between align-items-start">
                                                    <div>
                                                        <span class="text-primary fw-bold small text-uppercase" style="letter-spacing: 0.1em;">{{ $torneoObj->nombre }}</span>
                                                        <h4 class="h5 fw-bold text-white mb-0">{{ $nombreGrupo }}</h4>
                                                    </div>
                                                    <a href="{{ route('torneos.topScorers', $torneoId) }}" class="text-kinetic-muted hover-primary" title="Ver Goleadores">
                                                        <i class="bi bi-person-lines-fill fs-5"></i>
                                                    </a>
                                                </div>
                                            </div>
                                            
                                            <div class="table-responsive">
                                                <table class="table table-dark table-hover table-borderless align-middle mb-0" style="font-size: 0.85rem;">
                                                    <thead>
                                                        <tr class="text-kinetic-muted border-bottom border-secondary border-opacity-50">
                                                            <th class="ps-0 py-2" style="width: 30px;">#</th>
                                                            <th class="py-2">EQUIPO</th>
                                                            <th class="py-2 text-center">PJ</th>
                                                            <th class="pe-0 py-2 text-end">PTS</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        @foreach(array_slice($equipos, 0, 8) as $index => $e)
                                                        <tr class="border-bottom border-secondary border-opacity-10">
                                                            <td class="ps-0 py-2 fw-bold {{ $index < 2 ? 'text-primary' : '' }}">{{ $index + 1 }}</td>
                                                            <td class="py-2">
                                                                <div class="d-flex align-items-center">
                                                                    <img src="{{ $e['logo'] ? asset($e['logo']) : asset('logo.png') }}" 
                                                                         class="me-2 rounded-circle border border-secondary border-opacity-25" 
                                                                         style="width: 24px; height: 24px; object-fit: cover;"
                                                                         onerror="this.onerror=null;this.src='{{ asset('logo.png') }}';">
                                                                    <a href="{{ route('equipos.show', $e['id']) }}" class="text-decoration-none text-white hover-primary text-truncate d-inline-block" style="max-width: 120px;">
                                                                        {{ $e['nombre'] ?? 'TBD' }}
                                                                    </a>
                                                                </div>
                                                            </td>
                                                            <td class="py-2 text-center">{{ $e['pj'] }}</td>
                                                            <td class="pe-0 py-2 text-end fw-bold text-primary">{{ $e['pts'] }}</td>
                                                        </tr>
                                                        @endforeach
                                                    </tbody>
                                                </table>
                                            </div>
                                            
                                            <div class="mt-4 pt-2">
                                                <a href="{{ route('torneos.standings', $torneoId) }}" class="btn btn-outline-light btn-sm rounded-0 w-100 py-2 fw-bold" style="letter-spacing: 0.05em;">
                                                    VER TABLA COMPLETA <i class="bi bi-arrow-right ms-2"></i>
                                                </a>
                                            </div>
                                        </div>
                                        @php $isFirst = false; @endphp
                                    @endforeach
                                @endforeach

                                @if($totalSlides === 0)
                                    <div class="carousel-item active text-center py-5">
                                        <i class="bi bi-info-circle text-kinetic-muted display-4 mb-3"></i>
                                        <p class="text-kinetic-muted">No hay posiciones registradas para este torneo.</p>
                                    </div>
                                @endif
                            </div>

                            @if($totalSlides > 1)
                            <div class="d-flex justify-content-center gap-3 mt-5">
                                <button class="btn btn-dark btn-sm rounded-circle border-secondary bg-opacity-50" type="button" data-bs-target="#standingsCarousel" data-bs-slide="prev" style="width: 32px; height: 32px; padding: 0;">
                                    <i class="bi bi-chevron-left"></i>
                                </button>
                                <button class="btn btn-dark btn-sm rounded-circle border-secondary bg-opacity-50" type="button" data-bs-target="#standingsCarousel" data-bs-slide="next" style="width: 32px; height: 32px; padding: 0;">
                                    <i class="bi bi-chevron-right"></i>
                                </button>
                            </div>
                            @endif
                        </div>

                        <div class="mt-auto p-3 bg-secondary bg-opacity-10 border border-secondary border-opacity-25 mt-4">
                            <span class="d-block small text-primary fw-bold mb-1">CENTRO DE ESTADÍSTICAS</span>
                            <p class="small text-kinetic-muted mb-0">Datos actualizados en tiempo real según los últimos informes arbitrales.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container-fluid py-5" style="background: var(--surface-container-low);">
        <div class="container py-5">
            <div class="d-flex justify-content-between align-items-end mb-5">
                <div>
                    <span class="kfx-section-tag">Agenda</span>
                    <h2 class="display-3 fw-bold mb-0 kinetic-reveal-text">Próximos Partidos</h2>
                    <div class="kfx-divider-sweep" style="width: 140px; margin-top: 1rem; margin-bottom: 0;"></div>
                </div>
                <a href="{{ route('eventos.index') }}" class="kfx-link text-muted small fw-bold d-none d-md-inline">VER CALENDARIO COMPLETO <i class="bi bi-arrow-right"></i></a>
            </div>

            @if(count($eventos) === 0)
                <div class="kinetic-card text-center p-5">
                    <p class="text-kinetic-muted mb-0 fs-5">No hay eventos activos.</p>
                </div>
            @else
                <div class="row g-4" data-stagger>
                    @php
                        $eventosList = is_array($eventos) ? $eventos : $eventos->toArray();
                    @endphp
                    @foreach(array_slice($eventosList, 0, 6) as $e)
                        <div class="col-md-4">
                            <div class="kinetic-card h-100 d-flex flex-column" data-tilt data-tilt-max="5" style="padding: 0; overflow: hidden; border-radius: 0;">
                                <div class="p-4 flex-grow-1">
                                    <div class="d-flex justify-content-between mb-4">
                                        @if($e['estado'] === 'Activo')
                                            <span class="kfx-live-pill" style="font-size: 0.6rem; padding: 4px 10px;">En Vivo</span>
                                        @else
                                            <span class="fw-bold small text-kinetic-muted text-uppercase tracking-widest">{{ $e['estado'] }}</span>
                                        @endif
                                        <span class="small text-kinetic-muted">{{ \Carbon\Carbon::parse($e['fecha_evento'])->translatedFormat('d M') }}</span>
                                    </div>
                                    <h3 class="mb-4 h2">{{ $e['nombre_evento'] ?? ($e['clubLocal']['nombre'] . ' vs ' . $e['clubVisitante']['nombre']) }}</h3>
                                    <p class="text-kinetic-muted small mb-0"><i class="bi bi-geo-alt"></i> {{ $e['sede'] ?? 'TBD' }}</p>
                                </div>
                                <a href="{{ route('eventos.show', $e['id_evento']) }}" class="bg-primary text-white p-3 text-center text-decoration-none fw-bold small kfx-event-cta justify-content-center" style="letter-spacing: 0.1em;">VER FICHA TÉCNICA</a>
                            </div>
                        </div>
                    @endforeach
                </div>
            @endif
        </div>
    </div>

    <!-- PROMOS: Editorial Grid -->
    <div class="container py-5 my-5">
        <div class="text-center mb-5">
            <span class="kfx-section-tag justify-content-center" style="display: inline-flex;">Beneficios para Socios</span>
            <h2 class="display-3 fw-bold mb-0 kinetic-reveal-text">Beneficios <span class="kfx-text-gradient">Premium</span></h2>
        </div>
        @if($promociones->isEmpty())
            <div class="kinetic-card text-center p-5">
                <p class="text-kinetic-muted mb-0 fs-5">Sin promociones activas.</p>
            </div>
        @else
            <div class="row g-5" data-stagger>
                @foreach($promociones->take(3) as $p)
                    <div class="col-md-4">
                        <div class="position-relative overflow-hidden mb-4 kfx-img-cover kfx-img-spotlight" style="height: 400px;">
                            <img src="{{ asset('storage/' . $p->imagen) }}" class="w-100 h-100" style="object-fit: cover;" alt="{{ $p->nombre }}">
                            <div class="position-absolute bottom-0 start-0 p-4 w-100" style="background: linear-gradient(transparent, rgba(245, 243, 239, 0.95)); z-index: 2;">
                                <span class="badge bg-primary mb-2">{{ $p->categoria }}</span>
                                <h4 class="h3 mb-0">{{ $p->nombre }}</h4>
                            </div>
                        </div>
                        <p class="text-kinetic-muted small mb-4">{{ $p->descripcion }}</p>
                        <a href="{{ route('promo.qr', $p->id) }}" class="kfx-link fw-bold text-primary small d-inline-flex align-items-center gap-2">
                            SOLICITAR BENEFICIO <i class="bi bi-arrow-right"></i>
                        </a>
                    </div>
                @endforeach
            </div>
        @endif
    </div>
</div>

<style>
#splash {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: #ffffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: #ff0000ff;
    z-index: 9999;
    transition: opacity 0.6s ease, visibility 0.6s ease;
}
#splash img {
    width: 300px;
    margin-bottom: 20px;
    animation: bounce 1.5s infinite;
}
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}
#splash.hide {
    opacity: 0;
    visibility: hidden;
}
</style>

<script>
window.addEventListener("load", function() {
    const splash = document.getElementById("splash");
    const main = document.getElementById("main-content");
    
    // Solo mostrar splash si es la primera vez en esta sesión
    if (!sessionStorage.getItem('splashShown')) {
        sessionStorage.setItem('splashShown', 'true');
        splash.style.display = 'flex';
        setTimeout(() => {
            splash.style.opacity = '0';
            splash.style.visibility = 'hidden';
            main.style.display = 'block';
        }, 2000);
    } else {
        main.style.display = 'block';
    }
});
</script>
@endsection