@extends('layout')
@section('head')
    <title></title>
    <meta name="description" content="">
    @vite(['resources/stylus/desarrollo_contenido.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 Pill Section -->
    <section class="relative pt-24 pb-32 px-4">
        <div class="max-w-6xl mx-auto">
            <!-- Icon Circle -->
            <div class="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 z-20">
                <div class="w-40 h-40 bg-[#a3e435] rounded-full flex items-center justify-center shadow-lg">
                    <img src="{{ asset('images/desarollo_contenido/IMG_4.svg') }}" alt="Book Icon" class="w-24 h-24">
                </div>
            </div>

            <!-- Blue Container -->
            <div class="bg-[#004b92] rounded-pill-section pt-24 pb-48 px-8 md:px-20 text-center text-white relative z-10">
                <h2 class="text-3xl md:text-4xl font-bold mb-4">Material educativo hecho para aprender mejor</h2>
                <p class=" text-lg mb-8">Claro, interactivo y listo para contribuir al conocimiento
                </p>
                <div class="max-w-3xl mx-auto space-y-6  text-lg leading-relaxed opacity-90">
                    <p>Mejoramos el enfoque de tus contenidos, utilizamos tu información educativa o de capacitación y
                        desarrollamos materiales nutridos de valor que fomenten el aprendizaje aplicado.</p>
                    <p>Desarrollamos módulos, videos, evaluaciones y recursos interactivos que combinan diseño
                        pedagógico, multimedia moderna y claridad conceptual.</p>
                </div>
            </div>

            <!-- Overlapping Cards -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-8 -mt-32 relative z-20 px-4 md:px-12">
                <!-- Card 1 -->
                <div class="bg-white p-8 rounded-lg shadow-soft">
                    <h3 class="text-[#a3e435] text-xl font-bold text-center mb-6">Desarrollo de contenido</h3>
                    <ul class="text-[#004b92]  font-medium space-y-2">
                        <li class="flex items-start"><span class="mr-2">•</span> Corrección y actualización de
                            contenidos</li>
                        <li class="flex items-start"><span class="mr-2">•</span> Creación de contenido a partir de tu
                            propuesta actual</li>
                        <li class="flex items-start"><span class="mr-2">•</span> Contenidos complementarios</li>
                        <li class="flex items-start"><span class="mr-2">•</span> Ejercicios interactivos</li>
                    </ul>
                </div>
                <!-- Card 2 -->
                <div class="bg-white p-8 rounded-lg shadow-soft">
                    <h3 class="text-[#a3e435] text-xl font-bold text-center mb-6">Evaluaciones personalizadas</h3>
                    <ul class="text-[#004b92]  font-medium space-y-2">
                        <li class="flex items-start"><span class="mr-2">•</span> Métricas de evaluación</li>
                        <li class="flex items-start"><span class="mr-2">•</span> Sistemas que te permitan evaluar
                            fácilmente</li>
                        <li class="flex items-start"><span class="mr-2">•</span> Formatos de Evaluación</li>
                        <li class="flex items-start"><span class="mr-2">•</span> Métricas de analisis</li>
                    </ul>
                </div>
            </div>
        </div>
    </section>

    <!-- Solutions Section -->
    <section class="relative py-20 overflow-hidden">
        <div class="absolute inset-0 opacity-25">
            <img src="{{ asset('images/desarollo_contenido/IMG_6.jpeg') }}" alt="Background"
                class="w-full h-full object-cover scale-x-[-1]">
        </div>
        <div class="max-w-7xl mx-auto px-4 relative z-10 grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
            <div class="space-y-8">
                <h2 class="text-[#004b92] text-3xl md:text-4xl font-bold leading-tight">
                    desarollo_contenido para instituciones, plataformas y empresas
                </h2>
                <div class="text-[#004b92]  text-xl space-y-6 font-medium">
                    <p class="font-bold">Ideal para quienes enseñan a gran escala</p>
                    <p>Creado especialmente para universidades, centros de capacitación, plataformas de cursos online y
                        empresas que necesitan estandarizar conocimientos y asegurar una experiencia formativa
                        consistente.</p>
                    <p>Nos dirigimos a organizaciones que buscan profesionalizar su oferta educativa, mejorar la
                        retención del aprendizaje y comunicar contenidos de manera clara y visual.</p>
                </div>
                <a href="{{ route('contacto') }}"
                    class="bg-[#a3e435] text-[#004b92] px-10 py-3 rounded-lg font-bold text-xl shadow-[0px_12px_24px_0px_#4F46E566] hover:scale-105">
                    Solicitar información
                </a>
            </div>
            <div class="relative flex justify-center lg:justify-end">
                <img src="{{ asset('images/desarollo_contenido/IMG_5.svg') }}" alt="Monitor Illustration"
                    class="w-full max-w-[600px] h-auto">
            </div>
        </div>
    </section>

    <!-- Features Grid Section -->
    <section class="py-24 px-4 bg-white/50">
        <div class="max-w-7xl mx-auto">
            <h2 class="text-[#1A1A1A] text-3xl md:text-4xl font-bold text-center mb-20">
                Comparte tus conocimientos de forma controlada
            </h2>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-x-12 gap-y-24 mt-12">
                <!-- Feature 1 -->
                <div class="relative bg-white rounded-xl shadow-soft p-10 pt-16 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/desarollo_contenido/IMG_7.svg') }}" alt="Icon" class="w-14 h-14">
                    </div>
                    <h3 class="text-[#84bd20] text-3xl font-bold mb-4">Diseño instruccional profesional</h3>
                    <p class="text-[#004b92]  text-xl font-medium">Contenidos estructurados para
                        facilitar la comprensión y la retención del conocimiento.</p>
                </div>

                <!-- Feature 2 -->
                <div class="relative bg-white rounded-xl shadow-soft p-10 pt-16 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/desarollo_contenido/IMG_8.svg') }}" alt="Icon" class="w-14 h-14">
                    </div>
                    <h3 class="text-[#84bd20] text-3xl font-bold mb-4">Material multimedia atractivo</h3>
                    <p class="text-[#004b92]  text-xl font-medium">Videos, recursos visuales e
                        interactividad que mejoran la experiencia del usuario.</p>
                </div>

                <!-- Feature 3 -->
                <div class="relative bg-white rounded-xl shadow-soft p-10 pt-16 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/desarollo_contenido/IMG_9.svg') }}" alt="Icon" class="w-14 h-14">
                    </div>
                    <h3 class="text-[#84bd20] text-3xl font-bold mb-4">Adaptabilidad total</h3>
                    <p class="text-[#004b92]  text-xl font-medium">Contenidos personalizados según
                        público, nivel y objetivos educativos.</p>
                </div>

                <!-- Feature 4 -->
                <div class="relative bg-white rounded-xl shadow-soft p-10 pt-16 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/desarollo_contenido/IMG_10.svg') }}" alt="Icon"
                            class="w-14 h-14">
                    </div>
                    <h3 class="text-[#84bd20] text-3xl font-bold mb-4">Calidad y consistencia</h3>
                    <p class="text-[#004b92]  text-xl font-medium">Estandarización del conocimiento
                        sin perder claridad ni profundidad.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Testimonials Section -->
    <section class="py-24 px-4">
        <div class="max-w-3xl mx-auto text-center">
            <h2 class="text-[#171a1f] text-3xl 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