@extends('layouts.app')

@section('content')
<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-md-8 col-lg-6">
            <div class="card shadow-lg border-0 text-center">
                {{-- Encabezado similar al formulario --}}
                <div class="card-header bg-dark text-white p-4" style="border-bottom: 4px solid #C9A050;">
                    <img src="{{ asset('img/logo_50_aniversario.png') }}" alt="50 Años" class="mb-2" style="max-height: 80px; filter: drop-shadow(0px 2px 4px rgba(0,0,0,0.5));">
                    <h2 class="mb-0 fw-bold">¡Postulación Recibida!</h2>
                </div>

                <div class="card-body p-5">
                    <div class="mb-4">
                        <i class="bi bi-check-circle-fill text-success" style="font-size: 4rem;"></i>
                    </div>
                    
                    <h3 class="fw-bold text-dark">¡Muchas gracias por participar!</h3>
                    <p class="lead text-muted">Tu inscripción al Concurso Fotográfico 50° Aniversario ha sido procesada con éxito.</p>
                    
                    <div class="alert alert-warning border-0 small shadow-sm py-3 mb-4" style="background-color: #fffdf9; border-left: 4px solid #C9A050 !important;">
                        <i class="bi bi-envelope-check-fill me-2 text-primary"></i>
                        Se ha enviado un correo electrónico de confirmación a tu casilla. 
                        <br><strong>No olvides revisar la carpeta de Correo No Deseado o Spam.</strong>
                    </div>

                    <hr class="my-4 opacity-25">

                    <div class="d-grid gap-2 col-md-8 mx-auto">
                        {{-- Botón para volver al Home --}}
                        <a href="{{ url('/') }}" class="btn btn-dark btn-lg py-3 shadow-sm fw-bold text-uppercase" style="border-bottom: 3px solid #C9A050;">
                            <i class="bi bi-house-door-fill me-2"></i> Volver al Inicio
                        </a>
                    </div>
                </div>
            </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: 60px; 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