{% load static %}
<c-layouts.base>
    <c-slot name="title">Lo Justo E-Learning | Acreditación y Formación</c-slot>

    <!-- HERO SECTION -->
    <div class="relative bg-gradient-to-br from-[#044d29]/5 via-zinc-50 to-zinc-50 pt-16 pb-20">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col items-center text-center">
            
            <h1 class="text-[#044d29] text-5xl sm:text-6xl md:text-7xl font-black tracking-tighter mb-6">
                Lo Justo Learning
            </h1>
            
            <h2 class="text-3xl sm:text-4xl md:text-5xl font-bold tracking-tight text-zinc-900 max-w-4xl leading-tight mb-8">
                Aprende con quienes marcan el estándar de la metrología en el Perú,
                <span class="text-[#044d29]">donde la experiencia se convierte en conocimiento.</span>
            </h2>
            
            <p class="text-lg text-zinc-700 max-w-4xl leading-relaxed mb-10 font-medium">
                Somos referentes en calibración, producción de Materiales de Referencia Certificados (PMR/MRC) y aseguramiento metrológico. Ahora ponemos esa experiencia a tu alcance mediante programas de formación virtual diseñados para quienes buscan conocimientos aplicables y respaldados por la experiencia de un laboratorio acreditado.
            </p>

            <div class="flex flex-col sm:flex-row items-center justify-center gap-4 w-full sm:w-auto mt-4">
                <a href="{% url 'courses:catalog' %}" class="inline-flex items-center justify-center gap-2.5 bg-[#f5b522] hover:bg-[#e0a21a] text-[#044d29] font-black px-7 py-3.5 rounded-xl shadow-lg shadow-[#f5b522]/20 hover:-translate-y-1 transition-all text-sm uppercase tracking-wide w-full sm:w-auto text-center border-2 border-transparent">
                    <c-lbi n="rmx.book-read" w="1.25rem" h="1.25rem" />
                    <span>Explorar Catálogo de Cursos</span>
                </a>
                
                <a href="{% url 'certificates:verify_search' %}" class="inline-flex items-center justify-center gap-2.5 bg-transparent border-2 border-[#044d29] text-[#044d29] hover:bg-[#044d29] hover:text-white font-black px-7 py-3.5 rounded-xl hover:-translate-y-1 transition-all text-sm uppercase tracking-wide w-full sm:w-auto text-center">
                    <c-lbi n="rmx.qr-code" w="1.25rem" h="1.25rem" />
                    <span>Validar Diploma QR</span>
                </a>
            </div>
        </div>
    </div>

    <!-- POR QUÉ LO JUSTO -->
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
        <h2 class="text-4xl sm:text-5xl font-black text-[#044d29] uppercase mb-16 tracking-tight">
            POR QUÉ LO JUSTO
        </h2>

        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-x-8 gap-y-12">
            <!-- Confianza -->
            <div class="flex flex-col items-start border-l-2 border-[#044d29] pl-6 h-full">
                <img src="{% static 'img/icons/mock up learning - externo_cofianza.svg' %}" alt="Confianza" class="h-16 mb-6" />
                <h3 class="text-lg font-black text-[#044d29] mb-4 leading-tight">
                    ¿Por qué confiar en<br/>Lo Justo?
                </h3>
                <p class="text-sm text-zinc-700 font-medium leading-relaxed">
                    Aprende con contenidos desarrollados sobre los requisitos de las normas ISO/IEC 17025 e ISO 17034, utilizando casos prácticos y la experiencia de especialistas que trabajan diariamente en metrología y aseguramiento de la calidad.
                </p>
            </div>
            
            <!-- Valor -->
            <div class="flex flex-col items-start border-l-2 border-[#044d29] pl-6 h-full">
                <img src="{% static 'img/icons/mock up learning - externo_validez.svg' %}" alt="Validez" class="h-16 mb-6" />
                <h3 class="text-lg font-black text-[#044d29] mb-4 leading-tight">
                    ¿Mi certificado tendrá valor?
                </h3>
                <p class="text-sm text-zinc-700 font-medium leading-relaxed">
                    Al finalizar tu formación obtendrás un certificado digital verificable, respaldado por la trayectoria de Lo Justo como referente en metrología. Un reconocimiento que aporta confianza y valor a tu desarrollo profesional.
                </p>
            </div>

            <!-- Nivel -->
            <div class="flex flex-col items-start border-l-2 border-[#044d29] pl-6 h-full">
                <img src="{% static 'img/icons/mock up learning - externo_encontrar un curso.svg' %}" alt="Encontrar Curso" class="h-16 mb-6" />
                <h3 class="text-lg font-black text-[#044d29] mb-4 leading-tight">
                    ¿Encontraré un curso<br/>para mi nivel?
                </h3>
                <p class="text-sm text-zinc-700 font-medium leading-relaxed">
                    Ya sea que estés iniciando tu formación o busques especializarte para afrontar nuevos desafíos profesionales, encontrarás cursos pensados para acompañarte en cada etapa de tu crecimiento. Estudia cuando quieras, desde donde estés y avanza según tus objetivos.
                </p>
            </div>

            <!-- Equipo -->
            <div class="flex flex-col items-start border-l-2 border-[#044d29] pl-6 h-full">
                <img src="{% static 'img/icons/mock up learning - externo_capacitar equipo.svg' %}" alt="Capacitar Equipo" class="h-16 mb-6" />
                <h3 class="text-lg font-black text-[#044d29] mb-4 leading-tight">
                    ¿Y si necesito capacitar a<br/>todo mi equipo?
                </h3>
                <p class="text-sm text-zinc-700 font-medium leading-relaxed">
                    Impulsa el desarrollo de tu organización con programas de capacitación para equipos completos. Diseñamos planes de formación que fortalecen las competencias técnicas y apoyan el cumplimiento de los estándares de calidad de tu empresa.
                </p>
            </div>
        </div>
    </div>

    <!-- RUTAS DE FORMACIÓN -->
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 bg-zinc-50/50 rounded-3xl mb-10">
        <h2 class="text-4xl sm:text-5xl font-black text-[#044d29] uppercase mb-16 tracking-tight">
            RUTAS DE FORMACIÓN
        </h2>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-12">
            <!-- Metrología -->
            <div class="space-y-6">
                <img src="{% static 'img/icons/mock up learning - externo_laboratorio de calibración.svg' %}" alt="Metrología" class="h-16" />
                <h3 class="text-xl font-black text-[#044d29] border-b-[3px] border-[#f5b522] pb-3 inline-block">
                    Escuela de Metrología
                </h3>
                <p class="text-sm text-zinc-800 font-medium h-12">
                    Fortalece tus conocimientos en sistemas de gestión y competencia técnica de laboratorios.
                </p>
                <div class="space-y-2 text-xs text-zinc-600 pt-2">
                    <p class="text-zinc-800 mb-3">Cursos como:</p>
                    <ul class="space-y-2 font-medium">
                        <li class="flex items-start"><span class="text-[#f5b522] mr-2">▶</span> Lectura e interpretación de certificados de calibración.</li>
                        <li class="flex items-start"><span class="text-[#f5b522] mr-2">▶</span> Confirmación metrológica.</li>
                        <li class="flex items-start"><span class="text-[#f5b522] mr-2">▶</span> Error e incertidumbre.</li>
                        <li class="flex items-start"><span class="text-[#f5b522] mr-2">▶</span> Deriva metrológica.</li>
                        <li class="flex items-start"><span class="text-[#f5b522] mr-2">▶</span> Trazabilidad de las mediciones.</li>
                        <li class="flex items-start"><span class="text-[#f5b522] mr-2">▶</span> Gestión de equipos de medición.</li>
                        <li class="flex items-start"><span class="text-[#f5b522] mr-2">▶</span> Variables metrológicas.</li>
                        <li class="flex items-start"><span class="text-[#f5b522] mr-2">▶</span> Buenas prácticas de medición.</li>
                    </ul>
                </div>
                <div class="border-t-[3px] border-[#044d29] pt-4 mt-8">
                    <a href="{% url 'courses:catalog' %}?ruta=metrologia" class="inline-flex items-center text-xs font-black text-[#044d29] hover:text-emerald-700 transition-colors">
                        <span>Ver ruta completa</span>
                        <c-lbi n="rmx.arrow-right" w="1rem" h="1rem" class="ml-1" />
                    </a>
                </div>
            </div>

            <!-- Calidad -->
            <div class="space-y-6">
                <img src="{% static 'img/icons/mock up learning - externo_calidad.svg' %}" alt="Calidad" class="h-16" />
                <h3 class="text-xl font-black text-[#044d29] border-b-[3px] border-[#f5b522] pb-3 inline-block">
                    Escuela de Calidad y Laboratorios
                </h3>
                <p class="text-sm text-zinc-800 font-medium h-12">
                    Desarrolla competencias en medición, calibración y trazabilidad metrológica.
                </p>
                <div class="space-y-2 text-xs text-zinc-600 pt-2">
                    <p class="text-zinc-800 mb-3">Aquí entrarían cursos como:</p>
                    <ul class="space-y-2 font-medium">
                        <li class="flex items-start"><span class="text-[#f5b522] mr-2">▶</span> Interpretación de ISO/IEC 17025.</li>
                        <li class="flex items-start"><span class="text-[#f5b522] mr-2">▶</span> Gestión documental.</li>
                        <li class="flex items-start"><span class="text-[#f5b522] mr-2">▶</span> Validación de métodos.</li>
                        <li class="flex items-start"><span class="text-[#f5b522] mr-2">▶</span> Control de calidad.</li>
                        <li class="flex items-start"><span class="text-[#f5b522] mr-2">▶</span> Auditorías internas.</li>
                        <li class="flex items-start"><span class="text-[#f5b522] mr-2">▶</span> Gestión de riesgos.</li>
                        <li class="flex items-start"><span class="text-[#f5b522] mr-2">▶</span> Acciones correctivas.</li>
                        <li class="flex items-start"><span class="text-[#f5b522] mr-2">▶</span> Competencia del personal.</li>
                    </ul>
                </div>
                <div class="border-t-[3px] border-[#044d29] pt-4 mt-8">
                    <a href="{% url 'courses:catalog' %}?ruta=calidad" class="inline-flex items-center text-xs font-black text-[#044d29] hover:text-emerald-700 transition-colors">
                        <span>Ver ruta completa</span>
                        <c-lbi n="rmx.arrow-right" w="1rem" h="1rem" class="ml-1" />
                    </a>
                </div>
            </div>

            <!-- Materiales de Referencia -->
            <div class="space-y-6">
                <img src="{% static 'img/icons/mock up learning - externo_MRC y ensayos.svg' %}" alt="Materiales" class="h-16" />
                <h3 class="text-xl font-black text-[#044d29] border-b-[3px] border-[#f5b522] pb-3 inline-block">
                    Escuela de Materiales de Referencia y Ensayos
                </h3>
                <p class="text-sm text-zinc-800 font-medium h-12">
                    Especialízate en el uso, selección y producción de materiales de referencia para asegurar mediciones confiables.
                </p>
                <div class="space-y-2 text-xs text-zinc-600 pt-2">
                    <p class="text-zinc-800 mb-3">Cursos como:</p>
                    <ul class="space-y-2 font-medium">
                        <li class="flex items-start"><span class="text-[#f5b522] mr-2">▶</span> Materiales de Referencia Certificados (MRC/PMR).</li>
                        <li class="flex items-start"><span class="text-[#f5b522] mr-2">▶</span> ISO 17034.</li>
                        <li class="flex items-start"><span class="text-[#f5b522] mr-2">▶</span> Selección de materiales de referencia.</li>
                        <li class="flex items-start"><span class="text-[#f5b522] mr-2">▶</span> Homogeneidad y estabilidad.</li>
                        <li class="flex items-start"><span class="text-[#f5b522] mr-2">▶</span> Trazabilidad química.</li>
                        <li class="flex items-start"><span class="text-[#f5b522] mr-2">▶</span> Aseguramiento de la calidad de las mediciones.</li>
                    </ul>
                </div>
                <div class="border-t-[3px] border-[#044d29] pt-4 mt-8">
                    <a href="{% url 'courses:catalog' %}?ruta=materiales" class="inline-flex items-center text-xs font-black text-[#044d29] hover:text-emerald-700 transition-colors">
                        <span>Ver ruta completa</span>
                        <c-lbi n="rmx.arrow-right" w="1rem" h="1rem" class="ml-1" />
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- AUDITORÍA RÁPIDA & TRANSPARENCIA -->
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-10 mb-10">
        <c-lb.card class="bg-white border-2 border-emerald-50 rounded-[2rem] shadow-[0_10px_40px_-15px_rgba(4,77,41,0.1)] p-8 sm:p-12 relative overflow-hidden flex flex-col md:flex-row items-center justify-between gap-10">
            <div class="space-y-3 max-w-lg">
                <div class="text-xs font-black uppercase tracking-widest text-[#044d29]">Auditoría Rápida & Transparencia</div>
                <h3 class="text-2xl sm:text-3xl font-black tracking-tight text-zinc-900 leading-tight">¿Tienes un certificado emitido por Lo Justo?</h3>
                <p class="text-sm text-zinc-600 leading-relaxed font-medium">
                    Nuestro sistema genera diplomas digitales inalterables con código único y código QR. Ingresa el código alfanumérico para verificar la validez y calificación de cualquier alumno al instante.
                </p>
            </div>
            <div class="shrink-0 relative z-10">
                <a href="{% url 'certificates:verify_search' %}">
                    <c-lb.button class="bg-[#f5b522] hover:bg-[#e0a21a] text-zinc-950 font-black px-6 py-3 rounded-xl shadow-lg shadow-[#f5b522]/30 hover:-translate-y-1 transition-all text-sm flex items-center justify-center gap-2 border-0">
                        <c-lbi n="rmx.shield-check" variant="fill" w="1.2rem" h="1.2rem" />
                        <span>Verificar un Certificado</span>
                    </c-lb.button>
                </a>
            </div>
            
            <!-- Decoración abstracta -->
            <div class="absolute -bottom-10 -right-10 w-40 h-40 bg-emerald-50 rounded-full blur-2xl z-0"></div>
        </c-lb.card>
    </div>

    <!-- PLANES CORPORATIVOS -->
    <div class="bg-[#044d29] text-white py-24">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center space-y-8 flex flex-col items-center">
            <h2 class="text-4xl sm:text-5xl font-black tracking-tight text-[#f5b522] uppercase">
                PLANES CORPORATIVOS
            </h2>
            <h3 class="text-3xl sm:text-4xl font-bold tracking-tight max-w-4xl mx-auto leading-tight">
                ¿Necesitas capacitar a varias personas de tu equipo?
            </h3>
            <p class="text-lg text-emerald-50/80 max-w-3xl mx-auto leading-relaxed pb-4">
                Diseñamos un plan a la medida de tu organización: rutas combinadas, reportes de avance por colaborador y facturación consolidada.
            </p>
            <a href="{% url 'core:corporate' %}">
                <c-lb.button class="bg-white hover:bg-zinc-100 text-[#044d29] font-black px-10 py-4 rounded-full shadow-2xl hover:-translate-y-1 border-0 flex items-center justify-center transition-all uppercase tracking-wider text-sm">
                    <span>SOLICITAR UN PLAN PARA MI EQUIPO</span>
                </c-lb.button>
            </a>
        </div>
    </div>
</c-layouts.base>