<?php
/**
 * Template Name: Contacto
 * 
 * @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">Estamos para ayudarte</p>
            <h1 class="hero-title animate-fadeInUp animate-delay-1">
                Contáctanos
            </h1>
            <p class="hero-description animate-fadeInUp animate-delay-2">
                Resuelve todas tus dudas. Nuestro equipo está disponible para brindarte la mejor atención.
            </p>
        </div>
    </div>
</section>

<!-- Contact Section -->
<section class="section">
    <div class="container">
        <div style="display: grid; grid-template-columns: 1.2fr 1fr; gap: 60px; align-items: start;">
            <!-- Contact Form -->
            <div>
                <div style="margin-bottom: 30px;">
                    <h2 class="heading-md" style="margin-bottom: 15px;">
                        Envíanos un Mensaje
                    </h2>
                    <p style="color: #777777; line-height: 1.7;">
                        Completa el formulario y te responderemos a la brevedad posible. 
                        También puedes llamarnos o escribirnos por WhatsApp para atención inmediata.
                    </p>
                </div>
                
                <?php echo do_shortcode('[rentcar_contact_form]'); ?>
            </div>
            
            <!-- Contact Info -->
            <div>
                <div class="card" style="margin-bottom: 30px;">
                    <h3 class="heading-md" style="margin-bottom: 25px;">
                        Información de Contacto
                    </h3>
                    
                    <div style="display: flex; flex-direction: column; gap: 25px;">
                        <div style="display: flex; gap: 20px;">
                            <div style="flex-shrink: 0; width: 50px; height: 50px; background: rgba(0, 150, 226, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center;">
                                <i class="fas fa-map-marker-alt" style="color: #0096e2; font-size: 22px;"></i>
                            </div>
                            <div>
                                <h4 style="font-size: 16px; margin-bottom: 8px; color: #1a1a1a;">Dirección</h4>
                                <p style="color: #777777; line-height: 1.6; margin: 0;">
                                    Av. Principal #123<br>
                                    Quito, Pichincha<br>
                                    Ecuador
                                </p>
                            </div>
                        </div>
                        
                        <div style="display: flex; gap: 20px;">
                            <div style="flex-shrink: 0; width: 50px; height: 50px; background: rgba(0, 150, 226, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center;">
                                <i class="fas fa-phone" style="color: #0096e2; font-size: 22px;"></i>
                            </div>
                            <div>
                                <h4 style="font-size: 16px; margin-bottom: 8px; color: #1a1a1a;">Teléfonos</h4>
                                <p style="color: #777777; line-height: 1.8; margin: 0;">
                                    <a href="tel:+593987645140" style="color: #0096e2; display: block;">+593 98 764 5140</a>
                                    <a href="tel:+593984520875" style="color: #0096e2; display: block;">+593 98 452 0875</a>
                                    <a href="tel:+593989496779" style="color: #0096e2; display: block;">+593 98 949 6779</a>
                                </p>
                            </div>
                        </div>
                        
                        <div style="display: flex; gap: 20px;">
                            <div style="flex-shrink: 0; width: 50px; height: 50px; background: rgba(0, 150, 226, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center;">
                                <i class="fas fa-envelope" style="color: #0096e2; font-size: 22px;"></i>
                            </div>
                            <div>
                                <h4 style="font-size: 16px; margin-bottom: 8px; color: #1a1a1a;">Email</h4>
                                <p style="color: #777777; line-height: 1.6; margin: 0;">
                                    <a href="mailto:info@rutarentacar.com" style="color: #0096e2;">info@rutarentacar.com</a><br>
                                    <a href="mailto:reservas@rutarentacar.com" style="color: #0096e2;">reservas@rutarentacar.com</a>
                                </p>
                            </div>
                        </div>
                        
                        <div style="display: flex; gap: 20px;">
                            <div style="flex-shrink: 0; width: 50px; height: 50px; background: rgba(0, 150, 226, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center;">
                                <i class="fas fa-clock" style="color: #0096e2; font-size: 22px;"></i>
                            </div>
                            <div>
                                <h4 style="font-size: 16px; margin-bottom: 8px; color: #1a1a1a;">Horario de Atención</h4>
                                <p style="color: #777777; line-height: 1.8; margin: 0;">
                                    <strong style="color: #1a1a1a;">Lunes a Viernes:</strong> 8:00 AM - 6:00 PM<br>
                                    <strong style="color: #1a1a1a;">Sábados:</strong> 8:00 AM - 1:00 PM<br>
                                    <strong style="color: #1a1a1a;">Domingos:</strong> Cerrado
                                </p>
                                <p style="color: #0096e2; margin-top: 10px; font-weight: 600;">
                                    <i class="fas fa-phone-alt"></i> Emergencias 24/7
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Social Media -->
                <div class="card">
                    <h3 style="font-size: 18px; margin-bottom: 20px; color: #1a1a1a;">
                        Síguenos en Redes Sociales
                    </h3>
                    <div style="display: flex; gap: 12px;">
                        <a href="#" style="width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; background: rgba(0, 150, 226, 0.1); border-radius: 50%; color: #0096e2; transition: all 0.3s;" onmouseover="this.style.background='#0096e2'; this.style.color='white';" onmouseout="this.style.background='rgba(0, 150, 226, 0.1)'; this.style.color='#0096e2';">
                            <i class="fab fa-facebook-f"></i>
                        </a>
                        <a href="#" style="width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; background: rgba(0, 150, 226, 0.1); border-radius: 50%; color: #0096e2; transition: all 0.3s;" onmouseover="this.style.background='#0096e2'; this.style.color='white';" onmouseout="this.style.background='rgba(0, 150, 226, 0.1)'; this.style.color='#0096e2';">
                            <i class="fab fa-instagram"></i>
                        </a>
                        <a href="#" style="width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; background: rgba(0, 150, 226, 0.1); border-radius: 50%; color: #0096e2; transition: all 0.3s;" onmouseover="this.style.background='#0096e2'; this.style.color='white';" onmouseout="this.style.background='rgba(0, 150, 226, 0.1)'; this.style.color='#0096e2';">
                            <i class="fab fa-whatsapp"></i>
                        </a>
                        <a href="#" style="width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; background: rgba(0, 150, 226, 0.1); border-radius: 50%; color: #0096e2; transition: all 0.3s;" onmouseover="this.style.background='#0096e2'; this.style.color='white';" onmouseout="this.style.background='rgba(0, 150, 226, 0.1)'; this.style.color='#0096e2';">
                            <i class="fab fa-tiktok"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Map Section -->
<section style="padding: 0; margin-top: 80px;">
    <div style="position: relative; width: 100%; height: 450px; background: #f0f0f0;">
        <!-- Google Maps iframe -->
        <iframe 
            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3989.8003876665994!2d-78.48624068524419!3d-0.18026349983771344!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zMMKwMTAnNDguOSJTIDc4wrAyOScwMi45Ilc!5e0!3m2!1ses!2sec!4v1234567890123!5m2!1ses!2sec" 
            width="100%" 
            height="450" 
            style="border:0;" 
            allowfullscreen="" 
            loading="lazy" 
            referrerpolicy="no-referrer-when-downgrade">
        </iframe>
    </div>
</section>

<!-- Branches Section -->
<section class="section" style="background: #f8f9fa;">
    <div class="container">
        <div class="section-header">
            <h2 class="section-title">Nuestras Sucursales</h2>
            <p class="section-description">
                Contamos con oficinas en las principales ciudades del Ecuador
            </p>
        </div>
        
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px;">
            <div class="card">
                <div style="display: flex; align-items: center; gap: 15px; margin-bottom: 15px;">
                    <div style="width: 50px; height: 50px; background: linear-gradient(135deg, #0096e2 0%, #0077b3 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
                        <i class="fas fa-building" style="color: white; font-size: 22px;"></i>
                    </div>
                    <h3 style="font-size: 20px; margin: 0;">Oficina Principal - Quito</h3>
                </div>
                <p style="color: #777777; margin-bottom: 10px; line-height: 1.6;">
                    <i class="fas fa-map-marker-alt" style="color: #0096e2; margin-right: 8px;"></i>
                    Av. Principal #123, Quito
                </p>
                <p style="color: #777777; margin-bottom: 10px;">
                    <i class="fas fa-phone" style="color: #0096e2; margin-right: 8px;"></i>
                    <a href="tel:+593987645140" style="color: #0096e2;">+593 98 764 5140</a>
                </p>
                <p style="color: #777777;">
                    <i class="fas fa-clock" style="color: #0096e2; margin-right: 8px;"></i>
                    Lun - Vie: 8:00 - 18:00
                </p>
            </div>
            
            <div class="card">
                <div style="display: flex; align-items: center; gap: 15px; margin-bottom: 15px;">
                    <div style="width: 50px; height: 50px; background: linear-gradient(135deg, #0096e2 0%, #0077b3 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
                        <i class="fas fa-building" style="color: white; font-size: 22px;"></i>
                    </div>
                    <h3 style="font-size: 20px; margin: 0;">Sucursal Guayaquil</h3>
                </div>
                <p style="color: #777777; margin-bottom: 10px; line-height: 1.6;">
                    <i class="fas fa-map-marker-alt" style="color: #0096e2; margin-right: 8px;"></i>
                    Av. 9 de Octubre, Guayaquil
                </p>
                <p style="color: #777777; margin-bottom: 10px;">
                    <i class="fas fa-phone" style="color: #0096e2; margin-right: 8px;"></i>
                    <a href="tel:+593984520875" style="color: #0096e2;">+593 98 452 0875</a>
                </p>
                <p style="color: #777777;">
                    <i class="fas fa-clock" style="color: #0096e2; margin-right: 8px;"></i>
                    Lun - Vie: 8:00 - 18:00
                </p>
            </div>
            
            <div class="card">
                <div style="display: flex; align-items: center; gap: 15px; margin-bottom: 15px;">
                    <div style="width: 50px; height: 50px; background: linear-gradient(135deg, #0096e2 0%, #0077b3 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
                        <i class="fas fa-building" style="color: white; font-size: 22px;"></i>
                    </div>
                    <h3 style="font-size: 20px; margin: 0;">Sucursal Cuenca</h3>
                </div>
                <p style="color: #777777; margin-bottom: 10px; line-height: 1.6;">
                    <i class="fas fa-map-marker-alt" style="color: #0096e2; margin-right: 8px;"></i>
                    Calle 13 y Los Mayas, Cuenca
                </p>
                <p style="color: #777777; margin-bottom: 10px;">
                    <i class="fas fa-phone" style="color: #0096e2; margin-right: 8px;"></i>
                    <a href="tel:+593989496779" style="color: #0096e2;">+593 98 949 6779</a>
                </p>
                <p style="color: #777777;">
                    <i class="fas fa-clock" style="color: #0096e2; margin-right: 8px;"></i>
                    Lun - Vie: 8:00 - 18:00
                </p>
            </div>
        </div>
    </div>
</section>

<?php get_footer(); ?>

<style>
@media (max-width: 992px) {
    section .container > div[style*="grid-template-columns: 1.2fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
}
</style>
