@extends('layout.master')

@section('title', 'Educa Auge - Accede a los mejores cursos online para docentes')
@section('meta')
    <meta property="og:title" content="Bienvenido a EDUCA AUGE" />
    <meta property="og:description" content="Bienvenido a EDUCA AUGE" />
    <meta property="og:image" content="https://educaauge.com/assets/XMEB40.jpg" />
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="630" />
    <meta property="og:url" content="{{ url()->current() }}" />
    <meta property="og:type" content="article" />
    <meta property="og:site_name" content="Educa Auge" />


    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content="Bienvenido a EDUCA AUGE" />
    <meta name="twitter:description" content="Bienvenido a EDUCA AUGE" />
    <meta name="twitter:image" content="https://educaauge.com/assets/XMEB40.jpg" />

@endsection
@section('styles')

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

    <style>
        .page-main .bodyfull {
            padding: 20px;
        }

        .fondo_contador {
            background-color: #333333;
            color: #fff;
        }

        .cuadro {
            background-color: #ccc;
            color: #000;
            padding: 5px;
            border-radius: 10px;
            width: 80px;
        }

        /* Cuando el ancho de la pantalla sea menor a 768px (típico de móviles) */
        @media (max-width: 768px) {
            .uk-height-max-medium {
                max-height: 700px;
            }

            .imagen-movil {
                display: block;
                /* Mostrar la imagen móvil */
            }

            .imagen-desktop {
                display: none;
                /* Ocultar la imagen de escritorio */
            }

            .portadaimagen {
                padding: 0px;
            }
        }
    </style>
@endsection
@section('content')
    <main class="page-main">
        <div class="bodyfull">
            <div class="py-4 fondo_contador text-white">
                <div class="row align-items-center text-center justify-content-center">
                    <!-- Texto -->
                    <div class="col-auto">
                        <h2 class="mb-0">¡No pierdas tu oportunidad! El registro finaliza en:</h2>
                    </div>
                    <!-- Contador -->
                    <div class="col-auto" id="countdown">
                        <div class="d-flex justify-content-center">
                            <div class="text-center mx-2 cuadro">
                                <span id="hours" class="h2 mb-0"><b>00</b></span>
                                <small><b>Horas</b></small>
                            </div>
                            <div class="text-center mx-2 cuadro">
                                <span id="minutes" class="h2 mb-0"><b>00</b></span>
                                <small><b>Minutos</b></small>
                            </div>
                            <div class="text-center mx-2 cuadro">
                                <span id="seconds" class="h2 mb-0"><b>00</b></span>
                                <small><b>Segundos</b></small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Sección del video embebido centrado -->
            <div class="container mt-2">
                <div class="row justify-content-center">
                    <div class="col-md-8 text-center">
                        <!-- Utilizando el componente Ratio de Bootstrap 5 para mantener 16:9 -->
                        <div class="ratio ratio-16x9">
                            <iframe src="https://www.youtube.com/embed/bhgp2T9frtY?si=w9zzSJr2zpsOT7Eo"
                                title="YouTube video"
                                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                                allowfullscreen>
                            </iframe>
                        </div>
                    </div>
                </div>
            </div>

            <div class="my-4">
                <div class="text-white text-center p-4 rounded" style="background-color: #da291c;">
                    <h2 class="mb-2">Elige tu examen y completa tu participación</h2>
                    <p class="mb-0">
                        Selecciona la opción según tu objetivo: Nombramiento Docente o Ascenso de Escala 2025. <br>
                        <strong>Recuerda:</strong> este paso es clave para acceder a la beca del programa que más se adapta
                        a ti.
                    </p>
                </div>
            </div>

            <div class="row justify-content-center ">
                <!-- Opción 1: Ascenso -->
                <div class="col-12 col-md-3 d-flex flex-column align-items-center">
                    <!-- Contenedor cuadrado para la imagen -->
                    <div class="bg-light d-flex align-items-center justify-content-center mb-2">
                        <a href="{{ url('/registro_beca') }}">
                            <img src="{{ asset('assets/img/ascenso.jpg') }}" alt="Ascenso" class="img-fluid"
                                style="border-radius: 10px">
                        </a>
                    </div>
                    {{-- <button class="btn btn-primary">Inscribirse</button> --}}
                </div>
                <!-- Opción 2: Nombramiento -->
                <div class="col-12 col-md-3 d-flex flex-column align-items-center">
                    <!-- Contenedor cuadrado para la imagen -->
                    <div class="bg-light d-flex align-items-center justify-content-center mb-2">
                        <a href="{{ url('/registro_beca') }}">
                            <img src="{{ asset('assets/img/nombramiento.jpg') }}" alt="Nombramiento" class="img-fluid"
                                style="border-radius: 10px">
                        </a>
                    </div>
                    {{-- <button class="btn btn-primary">Inscribirse</button> --}}
                </div>
            </div>


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


@endsection

@section('script')
    <!-- Bootstrap JS (incluye Popper) -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

@endsection