@extends('layout')
@section('head')
    <title></title>
    <meta name="description" content="">
    @vite(['resources/stylus/capacitaciones.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

    <!-- Blue Info Section -->
    <section class="relative py-20 px-4">
        <!-- Background Pattern -->
        <div class="absolute inset-0 opacity-10 pointer-events-none overflow-hidden">
            <img src="{{ asset('images/capacitaciones/IMG_3.png') }}" alt="Pattern" class="w-full h-full object-cover">
        </div>

        <div class="max-w-6xl mx-auto relative">
            <!-- Icon Badge -->
            <div
                class="absolute -top-12 left-1/2 -translate-x-1/2 w-32 h-32 md:w-40 md:h-40 bg-[#a3e435] rounded-full flex items-center justify-center shadow-xl z-20">
                <img src="{{ asset('images/capacitaciones/IMG_4.svg') }}" alt="Icon" class="w-20 h-20 md:w-24 md:h-24">
            </div>

            <!-- Blue Card -->
            <div class="bg-[#004b92] rounded-[40px] md:rounded-[166px] pt-32 pb-32 px-8 md:px-20 text-center text-white">
                <h2 class="text-2xl md:text-4xl font-bold mb-6">Capacitaciones diseñadas para transformar equipos</h2>
                <p class="text-sm md:text-lg font-light max-w-3xl mx-auto leading-relaxed opacity-90">
                    Actualiza habilidades con programas certificados<br><br>
                    Tenemos para ti cursos y certificaciones diseñados especialmente para dar mayor valor a tu carrera
                    profesional.
                    Nuestros programas fortalecen competencias laborales y académicas, garantizando cumplimiento y
                    crecimiento profesional.
                </p>
            </div>

            <!-- Floating Cards -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-8 -mt-20 px-4 md:px-12">
                <div class="bg-white p-8 rounded-xl shadow-2xl border-t-4 border-[#a3e435]">
                    <h3 class="text-[#a3e435] text-xl font-semibold text-center mb-6">Contamos con cursos para tu
                        desarrollo</h3>
                    <ul class="text-[#004b92] space-y-2 text-sm md:text-base font-medium">
                        <li>• Aula Tech</li>
                        <li>• Innovando la enseñanza</li>
                        <li>• Desarrollo de habilidades STEAM</li>
                        <li>• Manejo eficiente de Riego por Gravedad</li>
                        <li>• Aspectos básicos para enseñar en línea</li>
                        <li>• Liderazgo</li>
                    </ul>
                </div>
                <div class="bg-white p-8 rounded-xl shadow-2xl border-t-4 border-[#a3e435]">
                    <h3 class="text-[#a3e435] text-xl font-semibold text-center mb-6">Te ofrecemos certificaciones DC3
                        con valor curricular</h3>
                    <ul class="text-[#004b92] space-y-2 text-sm md:text-base font-medium">
                        <li>• Primeros auxilios</li>
                        <li>• Trabajo seguro en alturas</li>
                    </ul>
                </div>
            </div>
        </div>
    </section>

    <section class="relative seccion-logo-grande">
        <div class="absolute inset-0 opacity-25">
            <img src="{{ asset('images/capacitaciones/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">
                    Capacitación estratégica para crecer y cumplir
                </h2>
                <div class="text-[#004b92] space-y-6 text-lg md:text-xl leading-relaxed">
                    <p class="font-semibold">Ideal para instituciones que buscan profesionalizar talentos</p>
                    <p>Nos dirigimos a universidades, áreas de RRHH, centros de capacitación y empresas que requieren
                        actualizar sus competencias o las de su personal.</p>
                    <p>Está orientado a organizaciones que atraviesan procesos de auditoría, certificación,
                        reacreditación o transformación interna, y que buscan soluciones confiables, claras y alineadas
                        a estándares laborales y educativos.</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/capacitaciones/IMG_5.svg') }}" alt="Graphic" class="logo">
    </section>

    <!-- Value Features Section -->
    <section class="py-24 bg-white">
        <div class="max-w-7xl mx-auto px-4">
            <h2 class="text-center text-[#1A1A1A] text-3xl md:text-4xl font-bold mb-20">Formación que genera valor real
            </h2>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-x-12 gap-y-24">
                <!-- Feature 1 -->
                <div class="relative bg-white p-10 rounded-xl shadow-soft border border-gray-100 text-center group">
                    <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-lg">
                        <img src="{{ asset('images/capacitaciones/IMG_8.svg') }}" alt="Icon" class="w-14 h-14">
                    </div>
                    <h3 class="text-[#84bd20] text-2xl md:text-3xl font-bold mt-8 mb-6">Cumplimiento normativo
                        garantizado</h3>
                    <p class="text-[#004b92] text-lg font-medium leading-relaxed">Programas alineados a certificaciones
                        oficiales como DC3, listos para auditorías y revisiones</p>
                </div>

                <!-- Feature 2 -->
                <div class="relative bg-white p-10 rounded-xl shadow-soft border border-gray-100 text-center">
                    <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-lg">
                        <img src="{{ asset('images/capacitaciones/IMG_7.svg') }}" alt="Icon" class="w-14 h-14">
                    </div>
                    <h3 class="text-[#84bd20] text-2xl md:text-3xl font-bold mt-8 mb-6">Capacitación práctica y
                        aplicable</h3>
                    <p class="text-[#004b92] text-lg font-medium leading-relaxed">Contenidos diseñados para que el
                        conocimiento se traduzca en habilidades reales dentro del entorno laboral.</p>
                </div>

                <!-- Feature 3 -->
                <div class="relative bg-white p-10 rounded-xl shadow-soft border border-gray-100 text-center">
                    <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-lg">
                        <img src="{{ asset('images/capacitaciones/IMG_10.svg') }}" alt="Icon" class="w-14 h-14">
                    </div>
                    <h3 class="text-[#84bd20] text-2xl md:text-3xl font-bold mt-8 mb-6">Flexibilidad de implementación
                    </h3>
                    <p class="text-[#004b92] text-lg font-medium leading-relaxed">Modalidades presenciales, virtuales o
                        híbridas adaptadas a la operación de cada organización.</p>
                </div>

                <!-- Feature 4 -->
                <div class="relative bg-white p-10 rounded-xl shadow-soft border border-gray-100 text-center">
                    <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-lg">
                        <img src="{{ asset('images/capacitaciones/IMG_9.svg') }}" alt="Icon" class="w-14 h-14">
                    </div>
                    <h3 class="text-[#84bd20] text-2xl md:text-3xl font-bold mt-8 mb-6">Seguimiento y evaluación</h3>
                    <p class="text-[#004b92] text-lg font-medium leading-relaxed">Medición del avance, resultados claros
                        y trazabilidad del proceso formativo.</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