@extends('layouts.app')

@section('content')
{{-- HERO SECTION --}}
<div class="p-5 mb-4 shadow-sm" 
     style="background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.6)), 
            url('https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?auto=format&fit=crop&w=1920&q=80'); 
            background-size: cover; 
            background-position: center; 
            min-height: 500px; 
            display: flex; 
            align-items: center; 
            color: white;
            text-shadow: 2px 2px 10px rgba(0,0,0,0.9);
            background-color: #5d2a18;"> 
    <div class="container py-5">
        <div class="row align-items-center">
            {{-- ESPACIO LOGO 50 ANIVERSARIO --}}
            <div class="col-lg-4 mb-4 mb-lg-0 text-center">
                <img src="{{ asset('img/logo_50_aniversario.png') }}" 
                     alt="Logo 50 Aniversario" 
                     class="img-fluid" 
                     style="max-height: 280px; filter: drop-shadow(0px 4px 15px rgba(0,0,0,0.6));">
            </div>
            
            <div class="col-lg-8 text-center text-lg-start">
                <h1 class="display-3 fw-bold mb-0">COIRCO</h1>
                <h2 class="h3 fw-light mb-4">Comité Interjurisdiccional del Río Colorado</h2>
                
                <hr class="w-25 mx-auto mx-lg-0 border-2 opacitiy-100" style="color: #C9A050;">
                
                <h3 class="display-4 fw-bold">Concurso Fotográfico</h3>
                <h4 class="h2 fw-light">"50 años del primer organismo de cuenca del país"</h4>
                
                <p class="fs-4 mt-4">
                    Capturando la esencia de nuestro río, sus bardas y su historia. <br>
                    Participá con tus mejores tomas y celebrá medio siglo de nuestra comunidad.
                </p>
                <div class="mt-5">
                    <a href="{{ route('concurso.form') }}" class="btn btn-primary btn-lg px-5 py-3 shadow-lg fw-bold border-2">
                        <i class="bi bi-camera-fill me-2"></i> ENVIAR MI FOTOGRAFÍA
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- SECCIÓN DE INFORMACIÓN --}}
<div class="container">
    <div class="row align-items-md-stretch text-center mt-5">
        {{-- CAJA 1 --}}
        <div class="col-md-4 mb-4">
            <div class="h-100 p-5 bg-white border rounded-3 shadow-sm border-top-0 border-start-0 border-end-0 border-bottom border-4 border-primary">
                <div class="mb-3">
                    <i class="bi bi-camera" style="font-size: 3rem; color: #7a2a1e;"></i>
                </div>
                <h2 class="fw-bold">Fotografía Actual</h2>
                <p class="text-muted">Sube hasta 5 fotos digitales o analógicas. Se aceptan tomas con celular, cámara profesional o drones.</p>
                <span class="badge bg-info text-dark px-3 py-2">Máximo 5 fotografías</span>
            </div>
        </div>

        {{-- CAJA 2 --}}
        <div class="col-md-4 mb-4">
            <div class="h-100 p-5 bg-white border rounded-3 shadow-sm border-top-0 border-start-0 border-end-0 border-bottom border-4 border-secondary">
                <div class="mb-3">
                    <i class="bi bi-journal-album" style="font-size: 3rem; color: #7a2a1e;"></i>
                </div>
                <h2 class="fw-bold">Archivo Histórico</h2>
                <p class="text-muted">¿Tienes fotos antiguas en álbumes familiares? Escanéalas y ayúdanos a reconstruir nuestra historia.</p>
                <span class="badge bg-secondary px-3 py-2">Categoría Especial</span>
            </div>
        </div>

        {{-- CAJA 3 --}}
        <div class="col-md-4 mb-4">
            <div class="h-100 p-5 text-white bg-dark rounded-3 shadow-sm border-bottom border-4" style="border-color: #C9A050 !important;">
                <div class="mb-3">
                    <i class="bi bi-calendar-check" style="font-size: 3rem; color: #C9A050;"></i>
                </div>
                <h2 class="fw-bold text-white">Cronograma</h2>
                <ul class="list-unstyled mt-3 fs-5">
                    <li class="mb-2"><span class="text-primary fw-bold">●</span> Apertura: Abril</li>
                    <li class="mb-2"><span class="text-primary fw-bold">●</span> Cierre: Agosto</li>
                    <li class="mb-2"><span class="text-primary fw-bold">●</span> Selección: Septiembre</li>
                    <li class="mb-2"><span class="text-warning fw-bold">★</span> Premios: 26 de Octubre</li>
                </ul>
            </div>
        </div>
    </div>
</div>

{{-- FOOTER --}}
<footer class="pt-5 mt-5 text-muted border-top text-center pb-5 bg-light">
    <div class="container">
        <div class="mb-4">
            <img src="{{ asset('img/logo_coirco.png') }}" alt="COIRCO" style="max-height: 80px; filter: grayscale(100%); opacity: 0.6;">
        </div>
        <p class="mb-1 fw-bold">Comité Interjurisdiccional del Río Colorado (COIRCO)</p>
        <p class="small mb-0">&copy; 2026 - Comisión Organizadora del 50 Aniversario</p>
    </div>
</footer>
@endsection