@extends('layout')
@section('head')
    <title></title>
    <meta name="description" content="">
    @vite(['resources/stylus/home.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="btn_Banner">Ver +<span class="icon icon-arrow-right"></span></a>
                        @endif
                        <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>
                    </div>
                </div>
            @endforeach
        </section>
    @endif

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

        <div class="max-w-6xl mx-auto">
            <!-- Blue Pill Container -->
            <div
                class="bg-[#004b92] rounded-[100px] md:rounded-[172px] py-16 px-8 md:px-20 text-center mb-[-100px] relative z-10">
                <h2 class="text-2xl md:text-4xl font-bold text-white mb-6">Soluciones educativas diseñadas para
                    transformar</h2>
                <p class="font-accent text-base md:text-lg text-white max-w-3xl mx-auto">
                    Nuestras soluciones integrales están pensadas para impulsar la calidad y eficiencia de la educación en
                    todos los niveles. Desde la capacitación hasta el desarrollo de contenidos, ofrecemos herramientas
                    innovadoras que se adaptan a tus necesidades.
                </p>
            </div>

            <!-- Overlapping Cards -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-8 relative z-20 mt-32">
                <!-- Card 1 -->
                <div class="bg-white rounded-lg soft-card-shadow p-4 flex flex-col items-center text-center">
                    <h3 class="text-lg font-semibold mb-2">Innovación pedagógica</h3>
                    <iconify-icon icon="lucide:lightbulb" width="24" height="24"
                        class="text-[#004b92] mb-4"></iconify-icon>
                    <div class="w-full h-40 rounded-lg overflow-hidden mb-4">
                        <img src="{{ asset('images/home/IMG_5.webp') }}" alt="Innovación"
                            class="w-full h-full object-cover">
                    </div>
                    <p class="font-accent text-sm text-[#5F5F5F]">Metodologías y recursos vanguardistas para educadores.</p>
                </div>
                <!-- Card 2 -->
                <div class="bg-white rounded-lg soft-card-shadow p-4 flex flex-col items-center text-center">
                    <h3 class="text-lg font-semibold mb-2">Asesoría personalizada</h3>
                    <iconify-icon icon="lucide:users" width="24" height="24"
                        class="text-[#004b92] mb-4"></iconify-icon>
                    <div class="w-full h-40 rounded-lg overflow-hidden mb-4">
                        <img src="{{ asset('images/home/IMG_7.webp') }}" alt="Asesoría" class="w-full h-full object-cover">
                    </div>
                    <p class="font-accent text-sm text-[#5F5F5F]">Acompañamiento experto para cada desafío educativo.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Service Details -->
    <section class="py-20 px-4 bg-white">
        <div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8">
            <!-- Service 1 -->
            <div class="bg-white rounded-xl soft-card-shadow p-8 relative pt-12">
                <div class="absolute -top-8 -left-4">
                    <iconify-icon icon="lucide:award" width="80" height="80" class="text-[#004b92]"></iconify-icon>
                </div>
                <h3 class="text-xl font-bold mb-4 ml-12">Capacitaciones / Certificaciones</h3>
                <p class="font-accent text-base text-[#5F5F5F] mb-8">Programas diseñados para potenciar habilidades y
                    conocimientos, con certificaciones reconocidas y de alto valor en el mercado laboral.</p>
                <a href="{{ route('capacitaciones') }}"
                    class="font-accent text-sm font-semibold text-[#004b92] hover:underline">Saber más →</a>
            </div>
            <!-- Service 2 -->
            <div class="bg-white rounded-xl soft-card-shadow p-8 relative pt-12">
                <div class="absolute -top-8 -left-4">
                    <iconify-icon icon="lucide:book-open-text" width="80" height="80"
                        class="text-[#004b92]"></iconify-icon>
                </div>
                <h3 class="text-xl font-bold mb-4 ml-12">Aulas virtuales</h3>
                <p class="font-accent text-base text-[#5F5F5F] mb-8">Creamos entornos de aprendizaje interactivos y
                    accesibles, facilitando la colaboración y el seguimiento académico para estudiantes y docentes.</p>
                <a href="{{ route('aulas_virtuales') }}"
                    class="font-accent text-sm font-semibold text-[#004b92] hover:underline">Saber más →</a>
            </div>
            <!-- Service 3 -->
            <div class="bg-white rounded-xl soft-card-shadow p-8 relative pt-12">
                <div class="absolute -top-8 -left-4">
                    <iconify-icon icon="lucide:lightbulb" width="80" height="80"
                        class="text-[#004b92]"></iconify-icon>
                </div>
                <h3 class="text-xl font-bold mb-4 ml-12">Desarrollo de contenido</h3>
                <p class="font-accent text-base text-[#5F5F5F] mb-8">Diseñamos y producimos materiales educativos
                    innovadores y personalizados, adaptados a metodologías pedagógicas modernas y las necesidades de tu
                    audiencia.</p>
                <a href="{{ route('desarrollo_contenido') }}"
                    class="font-accent text-sm font-semibold text-[#004b92] hover:underline">Saber más →</a>
            </div>
        </div>
    </section>

    <!-- Transformation Badge -->
    <div class="flex justify-center -mb-28 relative z-30">
        <div
            class="w-48 h-48 md:w-56 md:h-56 bg-[#a3e435] rounded-full soft-card-shadow flex flex-col items-center justify-center text-center p-6">
            <img src="{{ asset('images/home/IMG_10.svg') }}" alt="Digital Transformation" class="w-16 h-16 mb-2">
            <span class="text-white font-bold text-lg leading-tight">Transformación Digital</span>
        </div>
    </div>

    <!-- Pillars Section -->
    <section class="pill-gradient pt-40 pb-20 px-4">
        <div class="max-w-7xl mx-auto">
            <div class="bg-[#004b92] rounded-full py-12 px-8 text-center mb-16 max-w-6xl mx-auto">
                <h2 class="text-2xl md:text-3xl font-bold text-white mb-4">Creando alternativas para el desarrollo del
                    conocimiento</h2>
                <p class="font-accent text-base md:text-lg text-white max-w-3xl mx-auto">
                    Nos enfocamos en pilares clave para garantizar que tu institución alcance la excelencia educativa a
                    través de la tecnología y metodologías innovadoras.
                </p>
            </div>

            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
                <!-- Pillar Cards -->
                <div class="bg-[#FAFAFA] rounded-xl p-8 flex flex-col items-center text-center shadow-sm">
                    <iconify-icon icon="lucide:sparkles" width="64" height="64"
                        class="text-[#84bd20] mb-4"></iconify-icon>
                    <span class="text-lg font-medium">Modernización</span>
                </div>
                <div class="bg-[#FAFAFA] rounded-xl p-8 flex flex-col items-center text-center shadow-sm">
                    <iconify-icon icon="lucide:trending-up" width="64" height="64"
                        class="text-[#84bd20] mb-4"></iconify-icon>
                    <span class="text-lg font-medium">Mejora continua</span>
                </div>
                <div class="bg-[#FAFAFA] rounded-xl p-8 flex flex-col items-center text-center shadow-sm">
                    <iconify-icon icon="lucide:chart-line" width="64" height="64"
                        class="text-[#84bd20] mb-4"></iconify-icon>
                    <span class="text-lg font-medium">Trazabilidad</span>
                </div>
                <div class="bg-[#FAFAFA] rounded-xl p-8 flex flex-col items-center text-center shadow-sm">
                    <iconify-icon icon="lucide:target" width="64" height="64"
                        class="text-[#84bd20] mb-4"></iconify-icon>
                    <span class="text-lg font-medium">Optimización</span>
                </div>
                <div class="bg-[#FAFAFA] rounded-xl p-8 flex flex-col items-center text-center shadow-sm">
                    <iconify-icon icon="lucide:users" width="64" height="64"
                        class="text-[#84bd20] mb-4"></iconify-icon>
                    <span class="text-lg font-medium">Acompañamiento humano y técnico</span>
                </div>
                <div class="bg-[#FAFAFA] rounded-xl p-8 flex flex-col items-center text-center shadow-sm">
                    <iconify-icon icon="lucide:circuit-board" width="64" height="64"
                        class="text-[#84bd20] mb-4"></iconify-icon>
                    <span class="text-lg font-medium">Innovación</span>
                </div>
            </div>

            <div class="mt-16 text-center">
                <a href="{{ route('compromiso') }}"
                    class="mx-auto bg-[#a3e435] text-[#344167] font-accent font-semibold py-3 px-10 rounded-lg border border-[#c3e4ff] hover:bg-white transition-colors">
                    Conócenos
                </a>
            </div>
        </div>
    </section>

    <!-- Trajectory Section -->
    <section class="py-24 px-4 bg-white">
        <div class="max-w-5xl mx-auto text-center mb-16">
            <h2 class="text-3xl md:text-4xl font-bold mb-6">Una trayectoria sólida que impulsa la educación virtual</h2>
            <p class="font-accent text-lg text-[#5F5F5F]">
                Con más de 8 años de experiencia, hemos sido pioneros en la transformación digital de la educación,
                impactando a
                miles de estudiantes y docentes en diversas instituciones. Nuestra pasión es construir el futuro del
                aprendizaje con soluciones que perduran.
            </p>
        </div>

        <div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8">
            <div class="bg-transparent rounded-xl soft-card-shadow p-10 text-center">
                <span class="text-5xl md:text-6xl font-bold text-[#84bd20] block mb-2">+500</span>
                <span class="font-accent text-lg font-medium text-[#004b92]">Cursos desarrollados con éxito</span>
            </div>
            <div class="bg-transparent rounded-xl soft-card-shadow p-10 text-center">
                <span class="text-5xl md:text-6xl font-bold text-[#84bd20] block mb-2">+100</span>
                <span class="font-accent text-lg font-medium text-[#004b92]">Campus virtuales implementados</span>
            </div>
            <div class="bg-transparent rounded-xl soft-card-shadow p-10 text-center">
                <span class="text-5xl md:text-6xl font-bold text-[#84bd20] block mb-2">+10,000</span>
                <span class="font-accent text-lg font-medium text-[#004b92]">Certificados entregados anualmente</span>
            </div>
        </div>
    </section>

    <section class="relative seccion-logo-grande">
        <div class="absolute inset-0">
            <img src="{{ asset('images/home/IMG_16.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">
                    Nuestro compromiso con la excelencia
                </h2>
                <div class="text-[#004b92] space-y-6 text-lg md:text-xl leading-relaxed">
                    Cada proyecto es una oportunidad para superar expectativas. Nos dedicamos a ofrecer no solo soluciones
                    tecnológicas, sino también un soporte humano excepcional. La calidad y el impacto positivo en la
                    comunidad educativa son nuestra prioridad. Trabajamos de la mano con nuestros clientes para asegurar una
                    implementación exitosa y una adaptación fluida a las nuevas herramientas.
                </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">
                    Conoce nuestra trayectoria
                </a>
            </div>
        </div>
        <img src="{{ asset('images/home/visily-image.png') }}" alt="Graphic" class="logo">
    </section>

    @if ($news)
        <!-- Blog Section -->
        <section class="py-24 px-4 bg-[#f3f4f6] relative">
            <div class="absolute top-0 left-0 w-full h-1/2 opacity-5 pointer-events-none">
                <img src="{{ asset('images/home/IMG_3.png') }}" alt="Pattern" class="w-full h-full object-cover">
            </div>
            <div class="max-w-7xl mx-auto relative z-10">
                <div class="text-center mb-16">
                    <h2 class="text-3xl md:text-4xl font-bold mb-6"># Conoce las tendencias que transforman el conocimiento
                        global</h2>
                    <p class="font-accent text-lg text-[#5F5F5F] max-w-3xl mx-auto">
                        Mantente al día con los avances más relevantes en educación digital, inteligencia artificial y
                        metodologías innovadoras que están redefiniendo el futuro del aprendizaje.
                    </p>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                    @foreach ($news as $item)
                        <a href="{{ route('noticia_detalle', ['id' => $item->id, 'slug' => $item->slug]) }}"
                            class="bg-white rounded-xl soft-card-shadow overflow-hidden flex flex-col">
                            <div class="h-48 overflow-hidden m-4 rounded-xl">
                                <img src="{{ $item->thumbnail_image_url }}" alt="{{ $item->title }}"
                                    class="w-full h-full object-cover">
                            </div>
                            <div class="p-6 flex-grow">
                                <h3 class="text-xl font-bold mb-4">{{ $item->title }}</h3>
                                <p class="font-accent text-sm text-[#5F5F5F] mb-6">{{ $item->excerpt }}</p>
                            </div>
                            <div class="p-6 pt-0">
                                <span
                                    class="border border-[#E1E1E1] rounded-lg py-2 px-6 font-accent text-sm font-medium hover:bg-gray-50">Ver
                                    más</span>
                            </div>
                        </a>
                    @endforeach
                </div>

                <div class="mt-16 text-center">
                    <a href="{{ route('noticias') }}"
                        class="mx-auto bg-white border border-[#E1E1E1] rounded-lg py-3 px-10 font-accent text-lg font-medium hover:bg-gray-50 transition-colors">
                        Ver todos los artículos
                    </a>
                </div>
            </div>
        </section>
    @endif
@endsection
@section('js')
    @vite(['resources/js/sitio_publico/home.js'])
@endsection