@extends('layout')
@section('head')
    <title></title>
    <meta name="description" content="">
    @vite(['resources/stylus/aulas_virtuales.styl'])
@endsection
@section('content')
    @if ($banners)
        <section class="banners relative flex items-center justify-center overflow-hidden" id="banner_escritorio">
            @foreach ($banners as $banner)
                <div class="banners-item">
                    <img src="{{ $banner->imagen_url }}" alt="Hero Background" class="inset-0 w-full h-full object-cover">
                    <div class="banners-item-texto z-10 max-w-4xl mx-auto px-4 text-center">
                        @if ($banner->titulo)
                            <h1 class="text-4xl md:text-6xl font-extrabold text-white leading-tight mb-6">
                                {{ $banner->titulo }}
                            </h1>
                        @endif
                        @if ($banner->subtitulo)
                            <p class="text-lg md:text-xl text-white font-normal mb-10 max-w-2xl mx-auto">
                                {{ $banner->subtitulo }}</p>
                        @endif
                        @if ($banner->link)
                            <a href="{{ $banner->link }}" target="{{ $banner->es_interno ? '_self' : '_blank' }}"
                                class="bg-[#a3e435] text-[#004b92] font-bold py-3 px-10 rounded-lg shadow-xl hover:scale-105 transition-transform text-xl mx-auto">
                                Descubre nuestro impacto
                            </a>
                        @endif
                    </div>
                </div>
            @endforeach
        </section>
        <section class="banners relative flex items-center justify-center overflow-hidden" id="banner_movil">
            @foreach ($banners as $banner)
                <div class="banners-item">
                    <img src="{{ $banner->imagen_movil_url }}" alt="Hero Background"
                        class="inset-0 w-full h-full object-cover">
                    <div class="banners-item-texto z-10 max-w-4xl mx-auto px-4 text-center">
                        @if ($banner->titulo)
                            <h1 class="text-4xl md:text-6xl font-extrabold text-white leading-tight mb-6">
                                {{ $banner->titulo }}
                            </h1>
                        @endif
                        @if ($banner->subtitulo)
                            <p class="text-lg md:text-xl text-white font-normal mb-10 max-w-2xl mx-auto">
                                {{ $banner->subtitulo }}</p>
                        @endif
                        @if ($banner->link)
                            <a href="{{ $banner->link }}" target="{{ $banner->es_interno ? '_self' : '_blank' }}"
                                class="bg-[#a3e435] text-[#004b92] font-bold py-3 px-10 rounded-lg shadow-xl hover:scale-105 transition-transform text-xl mx-auto">
                                Descubre nuestro impacto
                            </a>
                        @endif
                    </div>
                </div>
            @endforeach
        </section>
    @endif

    <!-- Effective Platforms Section -->
    <section class="relative py-24 px-4">
        <!-- Background Pattern -->
        <div class="absolute top-0 left-0 w-full h-full opacity-10 pointer-events-none">
            <img src="{{ asset('images/aulas_virtuales/IMG_3.png') }}" alt="" class="w-full h-full object-cover">
        </div>

        <div class="max-w-6xl mx-auto relative">
            <!-- Blue Pill Container -->
            <div class="bg-[#004b92] pill-container pt-32 pb-32 px-8 md:px-20 text-center relative">
                <!-- Floating Icon -->
                <div
                    class="absolute -top-20 left-1/2 -translate-x-1/2 w-40 h-40 bg-[#a3e435] rounded-full flex items-center justify-center shadow-lg">
                    <img src="{{ asset('images/aulas_virtuales/IMG_4.svg') }}" alt="Platform Icon" class="w-24 h-24">
                </div>

                <h2 class="text-white text-3xl md:text-4xl font-bold mb-6">Plataformas educativas efectivas</h2>
                <p class="text-white/90 font-advent text-lg mb-8 max-w-3xl mx-auto">
                    Gestión, seguimiento y administración completa
                </p>
                <p class="text-white/80 font-advent text-base md:text-lg leading-relaxed max-w-3xl mx-auto">
                    Integramos tus procesos de capacitación en una plataforma administrable con módulos y material
                    educativo. Optimiza y acelera el proceso de aprendizaje de tus nuevos empleados.<br><br>
                    Nuestras plataformas permiten gestionar usuarios, cursos, evaluaciones y reportes desde un solo
                    lugar, facilitando el control académico y operativo de la formación.
                </p>
            </div>

            <!-- Floating Cards -->
            <div class="grid md:grid-cols-2 gap-8 px-4 md:px-12">
                <div class="bg-white rounded-lg p-8 shadow-soft">
                    <h3 class="text-[#a3e435] text-xl font-semibold mb-4 text-center">Plataforma Educativa</h3>
                    <ul class="text-[#004b92] font-advent text-base space-y-2">
                        <li>• División de contenidos</li>
                        <li>• Contenido interactivo</li>
                        <li>• Materiales complementarios</li>
                        <li>• Actividades de aprendizaje</li>
                        <li>• Evaluaciones</li>
                    </ul>
                </div>
                <div class="bg-white rounded-lg p-8 shadow-soft">
                    <h3 class="text-[#a3e435] text-xl font-semibold mb-4 text-center">Administración de tu plataforma
                    </h3>
                    <ul class="text-[#004b92] font-advent text-base space-y-2">
                        <li>• Gestión de cursos</li>
                        <li>• Gestión de usuarios</li>
                        <li>• Evaluaciones</li>
                        <li>• Reportes de avance</li>
                    </ul>
                </div>
            </div>
        </div>
    </section>

    <section class="relative seccion-logo-grande">
        <div class="absolute inset-0 opacity-25">
            <img src="{{ asset('images/aulas_virtuales/IMG_6.jpg') }}" alt="Background" class="w-full h-full object-cover">
        </div>
        <div class="max-w-7xl mx-auto px-4 relative z-10 texto">
            <div class="max-w-2xl">
                <h2 class="text-[#004b92] text-3xl md:text-4xl font-bold mb-8 leading-tight">
                    Soluciones digitales para formación moderna
                </h2>
                <div class="text-[#004b92] space-y-6 text-lg md:text-xl leading-relaxed">
                    <p class="font-semibold">Para instituciones que buscan escalar su operación educativa</p>
                    <p>Nos enfocamos en universidades, escuelas privadas y principalmente empresas con grandes equipos
                        que necesitan centralizar su operación educativa en una plataforma confiable.</p>
                    <p>Nos dirigimos a instituciones que buscan digitalizar procesos, ampliar su alcance, mejorar el
                        control académico y contar con información clara para la toma de decisiones estratégicas.</p>
                </div>
                <a href="{{ route('contacto') }}"
                    class="mt-10 bg-[#a3e435] text-[#004b92] px-10 py-3 rounded-lg font-bold text-xl shadow-lg btn-hover-scale">
                    Solicitar información
                </a>
            </div>
        </div>
        <img src="{{ asset('images/aulas_virtuales/IMG_5.svg') }}" alt="Graphic" class="logo">
    </section>

    <!-- Virtual Classrooms Section -->
    <section class="py-24 bg-white">
        <div class="max-w-7xl mx-auto px-4">
            <h2 class="text-[#1A1A1A] text-3xl md:text-4xl font-bold text-center mb-24">
                Aulas virtuales que alimentan el conocimiento
            </h2>

            <div class="grid md:grid-cols-2 gap-x-12 gap-y-24">
                <!-- Card 1 -->
                <div class="relative bg-white rounded-xl p-10 shadow-soft text-center pt-16">
                    <div
                        class="absolute -top-12 left-1/2 -translate-x-1/2 w-24 h-24 bg-[#004b92] rounded-full flex items-center justify-center shadow-md">
                        <img src="{{ asset('images/aulas_virtuales/IMG_7.svg') }}" alt="" class="w-14 h-14">
                    </div>
                    <h3 class="text-[#84bd20] text-3xl font-bold mb-4">Gestión centralizada</h3>
                    <p class="text-[#004b92] font-advent text-xl font-medium">
                        Administración de cursos, usuarios y evaluaciones desde una sola plataforma.
                    </p>
                </div>

                <!-- Card 2 -->
                <div class="relative bg-white rounded-xl p-10 shadow-soft text-center pt-16">
                    <div
                        class="absolute -top-12 left-1/2 -translate-x-1/2 w-24 h-24 bg-[#004b92] rounded-full flex items-center justify-center shadow-md">
                        <img src="{{ asset('images/aulas_virtuales/IMG_8.svg') }}" alt="" class="w-14 h-14">
                    </div>
                    <h3 class="text-[#84bd20] text-3xl font-bold mb-4">Trazabilidad total</h3>
                    <p class="text-[#004b92] font-advent text-xl font-medium">
                        Registro completo del avance, participación y resultados de cada usuario.
                    </p>
                </div>

                <!-- Card 3 -->
                <div class="relative bg-white rounded-xl p-10 shadow-soft text-center pt-16">
                    <div
                        class="absolute -top-12 left-1/2 -translate-x-1/2 w-24 h-24 bg-[#004b92] rounded-full flex items-center justify-center shadow-md">
                        <img src="{{ asset('images/aulas_virtuales/IMG_9.svg') }}" alt="" class="w-14 h-14">
                    </div>
                    <h3 class="text-[#84bd20] text-3xl font-bold mb-4">Escalabilidad sin fricción</h3>
                    <p class="text-[#004b92] font-advent text-xl font-medium">
                        Crecimiento en número de usuarios y cursos sin perder estabilidad ni control.
                    </p>
                </div>

                <!-- Card 4 -->
                <div class="relative bg-white rounded-xl p-10 shadow-soft text-center pt-16">
                    <div
                        class="absolute -top-12 left-1/2 -translate-x-1/2 w-24 h-24 bg-[#004b92] rounded-full flex items-center justify-center shadow-md">
                        <img src="{{ asset('images/aulas_virtuales/IMG_10.svg') }}" alt="" class="w-14 h-14">
                    </div>
                    <h3 class="text-[#84bd20] text-3xl font-bold mb-4">Soporte técnico continuo</h3>
                    <p class="text-[#004b92] font-advent text-xl font-medium">
                        Acompañamiento experto antes, durante y después de la implementación.
                    </p>
                </div>
            </div>
        </div>
    </section>

    <!-- Testimonials Section -->
    <section class="py-24 bg-white">
        <div class="max-w-3xl mx-auto px-4 text-center">
            <h2 class="text-[#171a1f] text-3xl md:text-4xl font-bold mb-16">
                Instituciones y empresas que avalan nuestro trabajo.
            </h2>
            <div class="testimonials-slider">
                <div>
                    <div class="flex flex-col items-center px-4">
                        <blockquote class="text-lg lg:text-xl text-[#171a1f] leading-relaxed italic mb-8 max-w-2xl mx-auto">
                            Agradezco la oportunidad de realizar este curso en una plataforma muy agradable para el
                            aprendizaje, con contenidos claros y fáciles de comprender. También reconozco al equipo por la
                            organización, difusión y seguimiento puntual a los participantes. Esta certificación aporta a mi
                            crecimiento personal y profesional, y me motiva a seguir mejorando y aprendiendo nuevas
                            tecnologías.
                        </blockquote>
                        <p class="text-base font-semibold text-[#004b92]">Norma Angélica Hernández Valle</p>
                    </div>
                </div>
                <div>
                    <div class="flex flex-col items-center px-4">
                        <blockquote
                            class="text-lg lg:text-xl text-[#171a1f] leading-relaxed italic mb-8 max-w-2xl mx-auto">
                            Me encanto todo, comunicación por correo, Whatsapp, atenciones, página rápida sin saturación,
                            realmente una muy muy grata experiencia.
                        </blockquote>
                        <p class="text-base font-semibold text-[#004b92]">Edgar Javier Arenas Casillas</p>
                    </div>
                </div>
                <div>
                    <div class="flex flex-col items-center px-4">
                        <blockquote
                            class="text-lg lg:text-xl text-[#171a1f] leading-relaxed italic mb-8 max-w-2xl mx-auto">
                            Tienen una eficiencia muy extraordinaria, y la calidad de contenidos.
                        </blockquote>
                        <p class="text-base font-semibold text-[#004b92]">Hannia Sarai Ortiz Rodríguez</p>
                    </div>
                </div>
                <div>
                    <div class="flex flex-col items-center px-4">
                        <blockquote
                            class="text-lg lg:text-xl text-[#171a1f] leading-relaxed italic mb-8 max-w-2xl mx-auto">
                            Explican los temas muy bien, la plataforma donde se suben los trabajos es muy fácil de usar,
                            todo se logra entender muy bien.
                        </blockquote>
                        <p class="text-base font-semibold text-[#004b92]">Diana Karina Palacios López</p>
                    </div>
                </div>
                <div>
                    <div class="flex flex-col items-center px-4">
                        <blockquote
                            class="text-lg lg:text-xl text-[#171a1f] leading-relaxed italic mb-8 max-w-2xl mx-auto">
                            Se ve la gran capacitación de los profesores, y la disponibilidad durante el desarrollo del
                            curso.
                        </blockquote>
                        <p class="text-base font-semibold text-[#004b92]">Mendez Sanchez Yahir</p>
                    </div>
                </div>
                <div>
                    <div class="flex flex-col items-center px-4">
                        <blockquote
                            class="text-lg lg:text-xl text-[#171a1f] leading-relaxed italic mb-8 max-w-2xl mx-auto">
                            Estuvo super completo y entendible, sin duda lo recomendaría.
                        </blockquote>
                        <p class="text-base font-semibold text-[#004b92]">Yael Humberto Garcia Valadez</p>
                    </div>
                </div>
                <div>
                    <div class="flex flex-col items-center px-4">
                        <blockquote
                            class="text-lg lg:text-xl text-[#171a1f] leading-relaxed italic mb-8 max-w-2xl mx-auto">
                            Muy buena plataforma para aprender.
                        </blockquote>
                        <p class="text-base font-semibold text-[#004b92]">Ariana Belén Rodríguez Vidal</p>
                    </div>
                </div>
                <div>
                    <div class="flex flex-col items-center px-4">
                        <blockquote
                            class="text-lg lg:text-xl text-[#171a1f] leading-relaxed italic mb-8 max-w-2xl mx-auto">
                            Es una plataforma que me ayudó demasiado a entender varias cosas que yo desconocía.
                        </blockquote>
                        <p class="text-base font-semibold text-[#004b92]">Aristeo Rodríguez Rangel</p>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection
@section('js')
@endsection