@extends('layouts.app')

@section('content')
<style>
    .text-coirco-gold { color: #C9A050; }
    .btn-coirco { 
        background-color: #C9A050; 
        border: 2px solid #C9A050;
        color: #000; 
        font-weight: bold; 
        border-radius: 0;
        transition: all 0.3s;
    }
    .btn-coirco:hover { 
        background-color: #000; 
        color: #C9A050; 
    }
    .btn-outline-coirco {
        background-color: transparent;
        border: 2px solid #C9A050;
        color: #C9A050;
        font-weight: bold;
        border-radius: 0;
        transition: all 0.3s;
    }
    .btn-outline-coirco:hover {
        background-color: #C9A050;
        color: #000;
    }
    .border-gold-bottom { border-bottom: 4px solid #C9A050 !important; }
    
    .card-link {
        text-decoration: none;
        color: inherit;
        display: block;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .card-link:hover {
        transform: translateY(-8px);
        color: inherit;
    }
    .card-link:hover .card-body-custom {
        box-shadow: 0 1rem 3rem rgba(0,0,0,.175)!important;
    }
    .card-link:hover i {
        color: #C9A050 !important;
    }
    .badge-responsive {
        background-color: #C9A050; 
        color: #000; 
        letter-spacing: 1px; 
        font-weight: 800;
        display: inline-block;
        white-space: normal; /* Permite que el texto baje de línea en pantallas chicas */
        word-wrap: break-word;
        max-width: 100%;    /* Evita que se salga del contenedor padre */
        font-size: 0.75rem;    /* Tamaño base */
    }
    
    /* Ajuste para pantallas pequeñas (móviles) */
    @media (max-width: 576px) {
        .badge-responsive {
            font-size: 0.8rem; /* Achica un poco la letra en móviles */
            letter-spacing: 0.5px;
            padding: 10px 15px !important; /* Ajusta el relleno */
        }
    }
</style>

{{-- HERO SECTION --}}
<div class="p-5 mb-0" 
     style="background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7)), 
            url('{{ asset('img/20260122_193917.jpg') }}'); 
            background-size: cover; 
            background-position: 50% 60%; 
            min-height: 600px; 
            display: flex; 
            align-items: center; 
            color: white;
            border-bottom: 8px solid #7a2a1e;"> 
    <div class="container py-5 text-center text-lg-start">
        <div class="row align-items-center">
            <div class="col-lg-4 mb-4 mb-lg-0 text-center">
                {{-- Logo del 50 aniversario --}}
                <img src="{{ asset('img/logo_50_aniversario.png') . '?' . filemtime(public_path('img/logo_50_aniversario.png')) }}" 
                    alt="50 Años" 
                    class="img-fluid" 
                    style="max-height: 280px; filter: drop-shadow(0px 10px 20px rgba(0,0,0,0.5));">
            </div>
            <div class="col-lg-8">
                {{-- NUEVO: Mensaje principal del concurso --}}
                <!-- HTML Implementado -->
                <span class="badge mb-3 px-3 py-2 text-uppercase badge-responsive">
                    Concurso de fotografía y de imágenes históricas
                </span>

                <h1 class="display-3 fw-bold mb-0 text-uppercase">COIRCO</h1>
                <h2 class="display-5 fw-light text-uppercase mb-3" style="letter-spacing: 2px;">
                    La cuenca del Colorado: <span class="text-coirco-gold fw-normal">identidad de una región</span>
                </h2>
                
                <hr class="w-25 mx-auto mx-lg-0 border-2 opacity-100 mb-4" style="color: #C9A050;">
                
                <p class="lead mb-4 d-none d-md-block" style="max-width: 600px; text-shadow: 2px 2px 4px rgba(0,0,0,0.5);">
                    Promovemos una mirada profunda sobre nuestro entorno vital a través de la fotografía.
                </p>

                <div class="mt-4 d-flex flex-column flex-sm-row gap-3 justify-content-center justify-content-lg-start">
                    <a href="{{ route('concurso.form') }}" class="btn btn-coirco btn-lg px-5 py-3 shadow-lg text-uppercase">
                        <i class="bi bi-camera-fill me-2"></i> Participar ahora 
                    </a>
                    <a href="{{ route('bases_condiciones.index') }}" class="btn btn-outline-coirco btn-lg px-5 py-3 shadow-lg text-uppercase">
                        <i class="bi bi-file-earmark-text me-2"></i> Bases
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="container my-5">
    <div class="row justify-content-center">
        <div class="col-lg-10">
            
            {{-- 1. CATEGORÍAS --}}
            <div class="row g-4 mb-4">
                {{-- Certamen Actual --}}
                <div class="col-md-6">
                    <a href="{{ route('concurso.form') }}" class="card-link h-100">
                        <div class="h-100 p-5 bg-white border shadow-sm text-center border-gold-bottom card-body-custom">
                            <i class="bi bi-camera-fill mb-4 d-block" style="font-size: 3.5rem; color: #7a2a1e; transition: 0.3s;"></i>
                            <h3 class="fw-bold mb-3">Concurso de fotografía</h3>
                            <p class="text-muted mb-4">
                                Imágenes que representen la
                                identidad, las experiencias y
                                la cotidianeidad en la cuenca
                                del Colorado.
                            </p>
                            <div class="btn btn-coirco px-4 py-2 text-uppercase">Participe ahora</div>
                        </div>
                    </a> 
                </div>
            
                {{-- Fotos Históricas --}}
                <div class="col-md-6">
                    <a href="{{ route('concurso.form') }}" class="card-link h-100">
                        <div class="h-100 p-5 bg-white border shadow-sm text-center border-gold-bottom card-body-custom">
                            <i class="bi bi-journal-album mb-4 d-block" style="font-size: 3.5rem; color: #7a2a1e; transition: 0.3s;"></i>
                            <h3 class="fw-bold mb-3">Fotos históricas</h3>
                            <p class="text-muted mb-4">
                               Rescatar imágenes con valor
                                histórico sobre la cuenca del
                                Colorado, de cualquier época
                                o lugar.
                            </p>
                            <div class="btn btn-coirco px-4 py-2 text-uppercase">Participe ahora</div>
                        </div>
                    </a>
                </div>
            </div>

            {{-- 2. CAJA DE PREMIOS (Actualizada) --}}
            <div class="bg-dark text-white p-4 shadow-lg position-relative overflow-hidden mb-4" style="border-bottom: 5px solid #C9A050;">
                <div class="row align-items-center position-relative" style="z-index: 1;">
                    <div class="col-md-5 text-center border-md-end border-secondary border-opacity-25 mb-4 mb-md-0">
                        <h2 class="fw-bold mb-0 text-coirco-gold display-5">$ 3.500.000</h2>
                        <p class="small text-uppercase tracking-wider mb-0 opacity-75">en premios</p>
                    </div>
                    <div class="col-md-7">
                        <div class="row text-center text-md-start ps-md-4">
                            <div class="col-6 border-end border-secondary border-opacity-10">
                                <i class="bi bi-calendar-check text-coirco-gold fs-2 d-block mb-1"></i>
                                <small class="d-block text-uppercase opacity-50" style="font-size: 0.65rem;">Recepción de fotografías</small>
                                <span class="fw-bold">Hasta el 31 de Julio 2026</span><br><span style="display:inline-block;background:#C9A050;color:#000;font-size:0.72em;font-weight:700;padding:2px 8px;border-radius:20px;vertical-align:middle;letter-spacing:0.03em;">★ Plazo extendido</span>
                            </div>
                            <div class="col-6">
                                <i class="bi bi-megaphone text-coirco-gold fs-2 d-block mb-1"></i>
                                <small class="d-block text-uppercase opacity-50" style="font-size: 0.65rem;">Anuncio de ganadores</small>
                                <span class="fw-bold">31 de Agosto 2026</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

<footer class="pt-5 mt-5 text-muted border-top text-center pb-5 bg-white">
    <div class="container">
        <div class="mb-4">
            <img src="{{ asset('img/logo_coirco.png') }}" alt="COIRCO" style="max-height: 60px; filter: grayscale(100%); opacity: 0.6;">
        </div>
        <p class="mb-1 fw-bold text-dark text-uppercase">Comité Interjurisdiccional del Río Colorado (COIRCO)</p>
        <p class="small mb-0">1976 - 2026 | 50 Años de Gestión Interjurisdiccional</p>
        
        <div class="mt-3 d-flex justify-content-center align-items-center gap-2">
            <a href="{{ route('bases_condiciones.index') }}" class="text-decoration-none text-dark fw-bold small mx-2">Reglamento y Bases</a>
            
            @guest
                <span class="text-secondary opacity-50">|</span>
                <a href="{{ route('login') }}" class="text-decoration-none text-secondary small mx-2">
                    <i class="bi bi-gear-fill me-1"></i>Portal de Gestión
                </a>
            @endguest
        </div>
    </div>
</footer>
@endsection