@extends('layout.master')

@section('title', 'Educa Auge - Accede a los mejores cursos online para docentes')

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

@section('content')

    <main class="page-main" style="margin-top:30px">

        <div class="uk-section uk-padding-remove section2 opcional" style="margin-top: 20px">
            <!-- Solo visible en dispositivos no móviles -->
            <div class="imagenSection21">
                <img src="{{ asset('assets/img/recursos/agradecimiento.jpg') }}" alt="Imagen de fondo"
                    style="width: 100%; height: auto;">
            </div>
            <!-- Visible solo en móviles -->
            <div class="imagenSection22">
                <img src="{{ asset('assets/img/recursos/agradecimiento_mobil.jpg') }}" alt="Imagen de fondo"
                    style="width: 100%; height: auto;">
            </div>

            <div class="sectionAgradecimiento">
                <div class="uk-container">
                    <div class="uk-text-center">
                        <h1 class="font-titulo1" style="color: #FFF">¡Ya estás inscrito en el
                            Concurso de Becas 2025! <br>
                            <span > Sigue las instrucciones del video</span>
                        </h1>
                    </div>

                    <style>
                        .div_video {
                            display: flex;
                            justify-content: center;
                            align-items: center;
                        }
                    </style>
                    <div class="div_video">
                        <div class="contenedor_video">
                            <div style="overflow:hidden; border-radius:20px;">
                                @php
                                    $secureBecasTutorialUrl = \App\Http\Controllers\VideoProxyController::generateSecureUrl(
                                        'https://storage.googleapis.com/bucket-auge-oficial/Becas%20-%20Examen/video%20tutorial%20becas.mp4'
                                    );
                                @endphp
                                @include('partials.video-player-protected', [
                                    'videoSrc' => $secureBecasTutorialUrl,
                                    'playerId' => 'becas-tutorial-player',
                                ])
                            </div>
                        </div>
                    </div>

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

        <div class="section55">
            <div class="uk-container">
                <div class="uk-grid uk-grid-small uk-flex-middle cuadro_general" uk-grid style="width: 100%;">
                    <div class="uk-width-1-2@m">
                        {{-- <a href="{{$link}}" class="uk-button-verde uk-button-principal">Unirme a la comunidad
                        </a> --}}
                        <a href="{{$link}}" target="_blank" class="uk-button-verde uk-button-principal">
                            Unirme a la comunidad
                        </a>
                    </div>
                </div>
                <div class="uk-text-center">
                    <h1 class="font-titulo">¿CÓMO RENDIR EL EXÁMEN?</h1>
                </div>

                <div class="uk-grid uk-grid-small uk-flex-middle" uk-grid style="width: 100%">
                    <div class="cuadro1">
                        <img src="{{ asset('assets/img/recursos/1.png') }}" alt="">
                        <div class="text">
                            <h3> <b>Únete a la comunidad de WhatsApp</b> para recibir información actualizada sobre fechas,
                                temáticas del examen y demás detalles relevantes.</h3>
                        </div>

                    </div>
                    <div class="cuadro1">
                        <img src="{{ asset('assets/img/recursos/2.png') }}" alt="">
                        <div class="text">
                            <h3><b>Accede a tu Aula Virtual y diríjete la sección "Mis Exámenes"</b>. Allí encontrarás
                                el examen de becas, el cual debes completar en la fecha y hora establecida.</h3>
                        </div>

                    </div>
                    <div class="cuadro1">
                        <img src="{{ asset('assets/img/recursos/3.png') }}" alt="">
                        <div class="text">
                            <h3><b>Los 3 mejores puntajes
                                    serán anunciados</b> y accederán a una beca completa,
                                media beca o 1/4 de beca</h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>





    </main>

@endsection