<?php
/**
 * Template Name: Seguros Dinámicos
 * 
 * @package RentCar_Pro
 */

get_header(); ?>

<!-- Page Header -->
<section class="hero-section" style="min-height: 350px;">
    <div class="container">
        <div class="hero-content" style="max-width: 800px;">
            <p class="hero-subtitle animate-fadeInUp">Protección Total</p>
            <h1 class="hero-title animate-fadeInUp animate-delay-1">
                Planes de Seguro
            </h1>
            <p class="hero-description animate-fadeInUp animate-delay-2">
                Viaja con tranquilidad. Contamos con diferentes opciones de cobertura para proteger tu inversión.
            </p>
        </div>
    </div>
</section>

<!-- Insurance Plans Section -->
<section class="section">
    <div class="container">
        <div class="section-header">
            <p class="section-subtitle">Nuestros Planes</p>
            <h2 class="section-title">Elige la Cobertura que Necesitas</h2>
            <p class="section-description">
                Ofrecemos diferentes niveles de protección para que elijas el que mejor se adapte a tus necesidades
            </p>
        </div>
        
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 30px; margin-top: 50px;">
            
            <!-- Plan Básico -->
            <div class="card" style="border: 2px solid #e0e0e0; position: relative; overflow: hidden;">
                <div style="background: #f8f9fa; padding: 30px; text-align: center;">
                    <div style="width: 80px; height: 80px; margin: 0 auto 20px; background: linear-gradient(135deg, #777777 0%, #555555 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center;">
                        <i class="fas fa-shield-alt" style="color: white; font-size: 35px;"></i>
                    </div>
                    <h3 style="font-size: 24px; margin-bottom: 10px;">Plan Básico</h3>
                    <p style="color: #777777; margin-bottom: 20px;">Incluido en tarifa</p>
                    <div style="font-size: 36px; font-weight: 800; color: #0096e2; margin-bottom: 10px;">$9.99</div>
                    <p style="font-size: 14px; color: #999999;">Con cada alquiler</p>
                </div>
                
                <div style="padding: 30px;">
                    <ul style="list-style: none; padding: 0; margin: 0;">
                        <li style="padding: 15px 0; border-bottom: 1px solid #f0f0f0; display: flex; align-items: flex-start; gap: 12px;">
                            <i class="fas fa-check" style="color: #0096e2; font-size: 18px; margin-top: 2px;"></i>
                            <span style="color: #777777;">Seguro Obligatorio SOAT</span>
                        </li>
                        <li style="padding: 15px 0; border-bottom: 1px solid #f0f0f0; display: flex; align-items: flex-start; gap: 12px;">
                            <i class="fas fa-check" style="color: #0096e2; font-size: 18px; margin-top: 2px;"></i>
                            <span style="color: #777777;">Responsabilidad Civil contra Terceros</span>
                        </li>
                        <li style="padding: 15px 0; border-bottom: 1px solid #f0f0f0; display: flex; align-items: flex-start; gap: 12px;">
                            <i class="fas fa-check" style="color: #0096e2; font-size: 18px; margin-top: 2px;"></i>
                            <span style="color: #777777;">Asistencia en Carretera</span>
                        </li>
                        <li style="padding: 15px 0; display: flex; align-items: flex-start; gap: 12px;">
                            <i class="fas fa-check" style="color: #0096e2; font-size: 18px; margin-top: 2px;"></i>
                            <span style="color: #777777;">Mantenimiento Preventivo</span>
                        </li>
                    </ul>
                </div>
            </div>
            
            <!-- Plan Medio -->
            <div class="card" style="border: 3px solid #0096e2; position: relative; overflow: hidden; transform: scale(1.05);">
                <div style="position: absolute; top: 15px; right: 15px; background: #0096e2; color: white; padding: 6px 15px; border-radius: 20px; font-size: 12px; font-weight: 600; z-index: 10;">
                    MÁS POPULAR
                </div>
                <div style="background: linear-gradient(135deg, #0096e2 0%, #0077b3 100%); padding: 30px; text-align: center; color: white;">
                    <div style="width: 80px; height: 80px; margin: 0 auto 20px; background: rgba(255, 255, 255, 0.2); border-radius: 50%; display: flex; align-items: center; justify-content: center;">
                        <i class="fas fa-shield-alt" style="color: white; font-size: 35px;"></i>
                    </div>
                    <h3 style="font-size: 24px; margin-bottom: 10px; color: white;">Plan Medium</h3>
                    <p style="color: rgba(255, 255, 255, 0.9); margin-bottom: 20px;">Cobertura ampliada</p>
                    <div style="font-size: 36px; font-weight: 800; margin-bottom: 5px;">$18.99</div>
                    <p style="font-size: 14px; opacity: 0.9;">por día</p>
                </div>
                
                <div style="padding: 30px;">
                    <ul style="list-style: none; padding: 0; margin: 0;">
                        <li style="padding: 15px 0; border-bottom: 1px solid #f0f0f0; display: flex; align-items: flex-start; gap: 12px;">
                            <i class="fas fa-check" style="color: #0096e2; font-size: 18px; margin-top: 2px;"></i>
                            <span style="color: #777777;">Todo lo del Plan Básico</span>
                        </li>
                        <li style="padding: 15px 0; border-bottom: 1px solid #f0f0f0; display: flex; align-items: flex-start; gap: 12px;">
                            <i class="fas fa-check" style="color: #0096e2; font-size: 18px; margin-top: 2px;"></i>
                            <span style="color: #777777;">Cobertura por Daños Propios (deducible 10%)</span>
                        </li>
                        <li style="padding: 15px 0; border-bottom: 1px solid #f0f0f0; display: flex; align-items: flex-start; gap: 12px;">
                            <i class="fas fa-check" style="color: #0096e2; font-size: 18px; margin-top: 2px;"></i>
                            <span style="color: #777777;">Robo Total del Vehículo (deducible 15%)</span>
                        </li>
                        <li style="padding: 15px 0; border-bottom: 1px solid #f0f0f0; display: flex; align-items: flex-start; gap: 12px;">
                            <i class="fas fa-check" style="color: #0096e2; font-size: 18px; margin-top: 2px;"></i>
                            <span style="color: #777777;">Vehículo de Reemplazo</span>
                        </li>
                        <li style="padding: 15px 0; display: flex; align-items: flex-start; gap: 12px;">
                            <i class="fas fa-check" style="color: #0096e2; font-size: 18px; margin-top: 2px;"></i>
                            <span style="color: #777777;">Conductor Adicional Incluido</span>
                        </li>
                    </ul>
                </div>
            </div>
            
            <!-- Plan Premium -->
            <div class="card" style="border: 2px solid #e0e0e0; position: relative; overflow: hidden;">
                <div style="background: linear-gradient(135deg, #1a1a1a 0%, #000000 100%); padding: 30px; text-align: center; color: white;">
                    <div style="width: 80px; height: 80px; margin: 0 auto 20px; background: rgba(255, 255, 255, 0.15); border-radius: 50%; display: flex; align-items: center; justify-content: center;">
                        <i class="fas fa-shield-alt" style="color: white; font-size: 35px;"></i>
                    </div>
                    <h3 style="font-size: 24px; margin-bottom: 10px; color: white;">Plan Total</h3>
                    <p style="color: rgba(255, 255, 255, 0.8); margin-bottom: 20px;">Máxima protección</p>
                    <div style="font-size: 36px; font-weight: 800; margin-bottom: 5px;">$38.99</div>
                    <p style="font-size: 14px; opacity: 0.9;">por día</p>
                </div>
                
                <div style="padding: 30px;">
                    <ul style="list-style: none; padding: 0; margin: 0;">
                        <li style="padding: 15px 0; border-bottom: 1px solid #f0f0f0; display: flex; align-items: flex-start; gap: 12px;">
                            <i class="fas fa-check" style="color: #0096e2; font-size: 18px; margin-top: 2px;"></i>
                            <span style="color: #777777;">Todo lo del Plan Medio</span>
                        </li>
                        <li style="padding: 15px 0; border-bottom: 1px solid #f0f0f0; display: flex; align-items: flex-start; gap: 12px;">
                            <i class="fas fa-check" style="color: #0096e2; font-size: 18px; margin-top: 2px;"></i>
                            <span style="color: #777777;"><strong>SIN DEDUCIBLE</strong> por Daños</span>
                        </li>
                        <li style="padding: 15px 0; border-bottom: 1px solid #f0f0f0; display: flex; align-items: flex-start; gap: 12px;">
                            <i class="fas fa-check" style="color: #0096e2; font-size: 18px; margin-top: 2px;"></i>
                            <span style="color: #777777;">Cobertura en Toda Latinoamérica</span>
                        </li>
                        <li style="padding: 15px 0; border-bottom: 1px solid #f0f0f0; display: flex; align-items: flex-start; gap: 12px;">
                            <i class="fas fa-check" style="color: #0096e2; font-size: 18px; margin-top: 2px;"></i>
                            <span style="color: #777777;">Accidentes Personales Ocupantes</span>
                        </li>
                        <li style="padding: 15px 0; border-bottom: 1px solid #f0f0f0; display: flex; align-items: flex-start; gap: 12px;">
                            <i class="fas fa-check" style="color: #0096e2; font-size: 18px; margin-top: 2px;"></i>
                            <span style="color: #777777;">Gastos Médicos hasta $10,000</span>
                        </li>
                        <li style="padding: 15px 0; display: flex; align-items: flex-start; gap: 12px;">
                            <i class="fas fa-check" style="color: #0096e2; font-size: 18px; margin-top: 2px;"></i>
                            <span style="color: #777777;">Asistencia VIP y Prioridad</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Why Insurance Section -->
<section class="section" style="background: #f8f9fa;">
    <div class="container">
        <div class="section-header">
            <h2 class="section-title">¿Por Qué Necesitas un Seguro?</h2>
        </div>
        
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px;">
            <div class="card" style="text-align: center;">
                <div style="width: 70px; height: 70px; margin: 0 auto 20px; background: rgba(0, 150, 226, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center;">
                    <i class="fas fa-umbrella" style="color: #0096e2; font-size: 30px;"></i>
                </div>
                <h3 style="font-size: 18px; margin-bottom: 15px;">Protección Financiera</h3>
                <p style="color: #777777; line-height: 1.6;">
                    Evita gastos imprevistos en caso de accidentes o daños al vehículo.
                </p>
            </div>
            
            <div class="card" style="text-align: center;">
                <div style="width: 70px; height: 70px; margin: 0 auto 20px; background: rgba(0, 150, 226, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center;">
                    <i class="fas fa-hands-helping" style="color: #0096e2; font-size: 30px;"></i>
                </div>
                <h3 style="font-size: 18px; margin-bottom: 15px;">Asistencia Inmediata</h3>
                <p style="color: #777777; line-height: 1.6;">
                    Soporte 24/7 para resolver cualquier eventualidad durante tu viaje.
                </p>
            </div>
            
            <div class="card" style="text-align: center;">
                <div style="width: 70px; height: 70px; margin: 0 auto 20px; background: rgba(0, 150, 226, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center;">
                    <i class="fas fa-smile-beam" style="color: #0096e2; font-size: 30px;"></i>
                </div>
                <h3 style="font-size: 18px; margin-bottom: 15px;">Tranquilidad Total</h3>
                <p style="color: #777777; line-height: 1.6;">
                    Viaja sin preocupaciones sabiendo que estás completamente protegido.
                </p>
            </div>
        </div>
    </div>
</section>

<!-- FAQ Section -->
<section class="section">
    <div class="container">
        <div class="section-header">
            <h2 class="section-title">Preguntas Frecuentes sobre Seguros</h2>
        </div>
        
        <div style="max-width: 900px; margin: 0 auto;">
            <div class="card" style="margin-bottom: 20px;">
                <div style="padding: 25px;">
                    <h3 style="font-size: 18px; margin-bottom: 12px; color: #1a1a1a;">
                        <i class="fas fa-question-circle" style="color: #0096e2; margin-right: 10px;"></i>
                        ¿Qué cubre el seguro básico?
                    </h3>
                    <p style="color: #777777; line-height: 1.7; padding-left: 38px;">
                        El seguro básico incluye el SOAT obligatorio, responsabilidad civil contra terceros, 
                        asistencia en carretera y mantenimiento preventivo del vehículo.
                    </p>
                </div>
            </div>
            
            <div class="card" style="margin-bottom: 20px;">
                <div style="padding: 25px;">
                    <h3 style="font-size: 18px; margin-bottom: 12px; color: #1a1a1a;">
                        <i class="fas fa-question-circle" style="color: #0096e2; margin-right: 10px;"></i>
                        ¿Qué es el deducible?
                    </h3>
                    <p style="color: #777777; line-height: 1.7; padding-left: 38px;">
                        El deducible es el porcentaje del valor del daño que asumes en caso de siniestro. 
                        Por ejemplo, con un deducible del 10%, si el daño es de $1,000, pagas $100 y 
                        el seguro cubre los $900 restantes.
                    </p>
                </div>
            </div>
            
            <div class="card" style="margin-bottom: 20px;">
                <div style="padding: 25px;">
                    <h3 style="font-size: 18px; margin-bottom: 12px; color: #1a1a1a;">
                        <i class="fas fa-question-circle" style="color: #0096e2; margin-right: 10px;"></i>
                        ¿Puedo contratar el seguro después de alquilar?
                    </h3>
                    <p style="color: #777777; line-height: 1.7; padding-left: 38px;">
                        Los seguros adicionales deben contratarse al momento de la reserva o 
                        al retirar el vehículo. No es posible agregar cobertura una vez iniciado el alquiler.
                    </p>
                </div>
            </div>
            
            <div class="card" style="margin-bottom: 20px;">
                <div style="padding: 25px;">
                    <h3 style="font-size: 18px; margin-bottom: 12px; color: #1a1a1a;">
                        <i class="fas fa-question-circle" style="color: #0096e2; margin-right: 10px;"></i>
                        ¿Qué hacer en caso de accidente?
                    </h3>
                    <p style="color: #777777; line-height: 1.7; padding-left: 38px;">
                        Contacta inmediatamente a nuestro número de emergencias 24/7: +593 99 699 2032. 
                        Nuestro equipo te guiará en los pasos a seguir y coordinará la asistencia necesaria.
                    </p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- CTA Section -->
<section class="section" style="background: linear-gradient(135deg, #0096e2 0%, #0077b3 100%); color: white;">
    <div class="container" style="text-align: center;">
        <h2 class="heading-lg" style="color: white; margin-bottom: 20px;">
            ¿Necesitas Asesoría Personalizada?
        </h2>
        <p style="font-size: 18px; margin-bottom: 30px; opacity: 0.95; max-width: 600px; margin-left: auto; margin-right: auto;">
            Nuestros agentes están listos para ayudarte a elegir el plan de seguro 
            que mejor se adapte a tus necesidades y presupuesto.
        </p>
        <div style="display: flex; gap: 15px; justify-content: center; flex-wrap: wrap;">
            <a href="<?php echo esc_url(home_url('/contacto')); ?>" class="btn-white">
                <i class="fas fa-envelope"></i> Contactar
            </a>
            <a href="tel:+593996992032" class="btn-outline-white">
                <i class="fas fa-phone"></i> Llamar Ahora
            </a>
        </div>
    </div>
</section>

<?php get_footer(); ?>