{% load static %}
<c-layouts.base>
    <c-slot name="title">Planes Corporativos | Lo Justo E-Learning</c-slot>

    <!-- HERO CORPORATIVO -->
    <div class="relative bg-gradient-to-br from-[#044d29] via-[#03361d] to-[#022413] text-white py-20 overflow-hidden">
        <div class="absolute inset-0 bg-[radial-gradient(#f5b522_1px,transparent_1px)] [background-size:24px_24px] opacity-10"></div>
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
            <div class="max-w-3xl space-y-6">
                <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full text-xs font-black uppercase tracking-widest bg-[#f5b522] text-[#044d29]">
                    Soluciones B2B para Empresas
                </span>
                <h1 class="text-4xl sm:text-5xl md:text-6xl font-black tracking-tight leading-tight">
                    Capacitación Metrológica e ISO para tu Equipo
                </h1>
                <p class="text-lg text-emerald-100/90 font-medium leading-relaxed">
                    Fortalece la competencia técnica de tus laboratorios con planes institucionales diseñados a la medida de tu organización: trazabilidad, aseguramiento de la calidad y acreditación 17025.
                </p>
            </div>
        </div>
    </div>

    <!-- BENEFICIOS CLAVE B2B -->
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
        <div class="text-center max-w-3xl mx-auto mb-16 space-y-3">
            <h2 class="text-3xl sm:text-4xl font-black text-[#044d29] uppercase tracking-tight">
                Ventajas del Plan Corporativo
            </h2>
            <p class="text-zinc-600 font-medium text-base">
                Optimiza el presupuesto de capacitación y garantiza el cumplimiento normativo con nuestro respaldo institucional.
            </p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            <!-- Beneficio 1 -->
            <div class="bg-white border border-zinc-200/80 rounded-2xl p-8 shadow-sm hover:shadow-md transition-all space-y-4">
                <div class="w-12 h-12 rounded-xl bg-emerald-50 text-[#044d29] flex items-center justify-center font-black">
                    <c-lbi n="rmx.bar-chart-box" w="1.5rem" h="1.5rem" />
                </div>
                <h3 class="text-xl font-black text-zinc-900">Reportes de Avance por Colaborador</h3>
                <p class="text-sm text-zinc-600 font-medium leading-relaxed">
                    Acceso para Jefatura de Calidad o RRHH con métricas en tiempo real sobre el progreso, calificaciones y certificados emitidos para cada colaborador.
                </p>
            </div>

            <!-- Beneficio 2 -->
            <div class="bg-white border border-zinc-200/80 rounded-2xl p-8 shadow-sm hover:shadow-md transition-all space-y-4">
                <div class="w-12 h-12 rounded-xl bg-amber-50 text-[#044d29] flex items-center justify-center font-black">
                    <c-lbi n="rmx.price-tag-3" w="1.5rem" h="1.5rem" />
                </div>
                <h3 class="text-xl font-black text-zinc-900">Descuentos por Volumen y Facturación</h3>
                <p class="text-sm text-zinc-600 font-medium leading-relaxed">
                    Descuentos escalonados por paquete de matrículas y facturación corporativa consolidada (Factura Electrónica con RUC).
                </p>
            </div>

            <!-- Beneficio 3 -->
            <div class="bg-white border border-zinc-200/80 rounded-2xl p-8 shadow-sm hover:shadow-md transition-all space-y-4">
                <div class="w-12 h-12 rounded-xl bg-emerald-50 text-[#044d29] flex items-center justify-center font-black">
                    <c-lbi n="rmx.shield-check" w="1.5rem" h="1.5rem" />
                </div>
                <h3 class="text-xl font-black text-zinc-900">Rutas Adaptadas a tus Auditorías</h3>
                <p class="text-sm text-zinc-600 font-medium leading-relaxed">
                    Combinamos cursos de Metrología, Incertidumbre, ISO/IEC 17025 y Materiales de Referencia según las brechas detectadas en tus auditorías.
                </p>
            </div>
        </div>
    </div>

    <!-- FORMULARIO DE COTIZACIÓN -->
    <div class="bg-zinc-100/70 py-16 border-t border-b border-zinc-200/80">
        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="bg-white border border-zinc-200 rounded-3xl p-8 sm:p-12 shadow-xl space-y-8">
                
                <div class="text-center space-y-2 border-b border-zinc-100 pb-6">
                    <span class="text-xs font-black uppercase tracking-widest text-[#044d29]">Atención Personalizada</span>
                    <h2 class="text-2xl sm:text-3xl font-black text-zinc-900">Solicita una Cotización Corporativa</h2>
                    <p class="text-sm text-zinc-600 font-medium max-w-xl mx-auto">
                        Completa tus datos corporativos y un asesor especialista se pondrá en contacto contigo en menos de 24 horas.
                    </p>
                </div>

                {% if submitted %}
                <div class="bg-emerald-50 border border-emerald-300/80 rounded-2xl p-8 text-center space-y-4">
                    <div class="w-16 h-16 bg-emerald-600 text-white rounded-full flex items-center justify-center mx-auto shadow-lg shadow-emerald-600/30">
                        <c-lbi n="rmx.check" w="2rem" h="2rem" />
                    </div>
                    <h3 class="text-2xl font-black text-[#044d29]">¡Solicitud Recibida con Éxito!</h3>
                    <p class="text-sm text-zinc-700 font-medium max-w-md mx-auto leading-relaxed">
                        Gracias por comunicarte con Lo Justo E-Learning. Nuestro equipo de capacitación corporativa ha recibido tu requerimiento y te contactará en breve.
                    </p>
                    <a href="{% url 'core:landing' %}" class="inline-block mt-4 text-xs font-black text-[#044d29] hover:underline uppercase tracking-wider">
                        ← Volver al Inicio
                    </a>
                </div>
                {% else %}
                <form method="post" class="space-y-6">
                    {% csrf_token %}
                    
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
                        <div>
                            <label class="block text-xs font-black uppercase tracking-wider text-zinc-700 mb-2">
                                RUC de la Empresa *
                            </label>
                            <input type="text" name="ruc" required placeholder="20123456789" maxlength="11" class="w-full px-4 py-3 bg-zinc-50 border border-zinc-300 rounded-xl text-sm font-medium focus:bg-white focus:ring-2 focus:ring-[#044d29]/20 focus:border-[#044d29] transition-all">
                        </div>
                        <div>
                            <label class="block text-xs font-black uppercase tracking-wider text-zinc-700 mb-2">
                                Razon Social / Empresa *
                            </label>
                            <input type="text" name="company" required placeholder="Ej. Laboratorios del Perú S.A.C." class="w-full px-4 py-3 bg-zinc-50 border border-zinc-300 rounded-xl text-sm font-medium focus:bg-white focus:ring-2 focus:ring-[#044d29]/20 focus:border-[#044d29] transition-all">
                        </div>
                    </div>

                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
                        <div>
                            <label class="block text-xs font-black uppercase tracking-wider text-zinc-700 mb-2">
                                Nombre del Contacto *
                            </label>
                            <input type="text" name="contact_name" required placeholder="Ej. Ing. Patricia Vega" class="w-full px-4 py-3 bg-zinc-50 border border-zinc-300 rounded-xl text-sm font-medium focus:bg-white focus:ring-2 focus:ring-[#044d29]/20 focus:border-[#044d29] transition-all">
                        </div>
                        <div>
                            <label class="block text-xs font-black uppercase tracking-wider text-zinc-700 mb-2">
                                Cargo / Área *
                            </label>
                            <input type="text" name="position" placeholder="Ej. Jefa de Calidad / RRHH" class="w-full px-4 py-3 bg-zinc-50 border border-zinc-300 rounded-xl text-sm font-medium focus:bg-white focus:ring-2 focus:ring-[#044d29]/20 focus:border-[#044d29] transition-all">
                        </div>
                    </div>

                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
                        <div>
                            <label class="block text-xs font-black uppercase tracking-wider text-zinc-700 mb-2">
                                Correo Corporativo *
                            </label>
                            <input type="email" name="email" required placeholder="contacto@empresa.com" class="w-full px-4 py-3 bg-zinc-50 border border-zinc-300 rounded-xl text-sm font-medium focus:bg-white focus:ring-2 focus:ring-[#044d29]/20 focus:border-[#044d29] transition-all">
                        </div>
                        <div>
                            <label class="block text-xs font-black uppercase tracking-wider text-zinc-700 mb-2">
                                Teléfono de Contacto *
                            </label>
                            <input type="tel" name="phone" required placeholder="+51 987 654 321" class="w-full px-4 py-3 bg-zinc-50 border border-zinc-300 rounded-xl text-sm font-medium focus:bg-white focus:ring-2 focus:ring-[#044d29]/20 focus:border-[#044d29] transition-all">
                        </div>
                    </div>

                    <div>
                        <label class="block text-xs font-black uppercase tracking-wider text-zinc-700 mb-2">
                            Estimado de Colaboradores a Capacitar
                        </label>
                        <select name="team_size" class="w-full px-4 py-3 bg-zinc-50 border border-zinc-300 rounded-xl text-sm font-medium focus:bg-white focus:ring-2 focus:ring-[#044d29]/20 focus:border-[#044d29] transition-all">
                            <option value="5-10">De 5 a 10 personas</option>
                            <option value="11-25">De 11 a 25 personas</option>
                            <option value="26-50">De 26 a 50 personas</option>
                            <option value="50+">Más de 50 personas</option>
                        </select>
                    </div>

                    <div>
                        <label class="block text-xs font-black uppercase tracking-wider text-zinc-700 mb-2">
                            Requerimientos o Cursos de Interés
                        </label>
                        <textarea name="message" rows="3" placeholder="Indica los cursos o temas específicos que necesitas reforzar en tu organización..." class="w-full px-4 py-3 bg-zinc-50 border border-zinc-300 rounded-xl text-sm font-medium focus:bg-white focus:ring-2 focus:ring-[#044d29]/20 focus:border-[#044d29] transition-all"></textarea>
                    </div>

                    <button type="submit" class="w-full py-4 bg-[#f5b522] hover:bg-[#e0a21a] text-[#044d29] font-black uppercase tracking-wider rounded-xl shadow-lg shadow-[#f5b522]/30 transition-all text-sm flex items-center justify-center gap-2 border-0">
                        <c-lbi n="rmx.send-plane" w="1.2rem" h="1.2rem" />
                        <span>Enviar Solicitud de Cotización</span>
                    </button>
                </form>
                {% endif %}

            </div>
        </div>
    </div>
</c-layouts.base>