{% extends "base.html" %}

{% block title %}{{ title }}{% endblock %}

{% block content %}
<div class="section contact-section">
    <div class="container">
        <div class="page-header">
            <h1 class="title">Contacta con nosotros</h1>
            <p class="subtitle">Estamos aquí para resolver todas tus dudas sobre ahorro energético</p>
            
            {% if show_success %}
            <div class="success-message" id="success-alert" style="background-color: #b400f4; color: white; padding: 15px; border-radius: 5px; margin: 20px 0; position: relative;">
                <button type="button" class="close" style="position: absolute; right: 15px; top: 13px; cursor: pointer; background: none; border: none; color: white; font-size: 18px;">&times;</button>
                <p style="margin: 0;"><strong>¡Gracias por ponerte en contacto!</strong> Te responderemos lo antes posible.</p>
            </div>
            
            <script>
                document.addEventListener('DOMContentLoaded', function() {
                    document.querySelector('#success-alert .close').addEventListener('click', function() {
                        document.getElementById('success-alert').style.display = 'none';
                    });
                });
            </script>
            {% endif %}
        </div>
        
        <div class="contact-container">
            <div class="contact-form">
                <h3><i class="fas fa-envelope"></i> Envíanos un mensaje</h3>
                <p class="mb-4">Rellena el formulario y te responderemos en menos de 24 horas</p>
                
                <form method="POST" action="{{ url_for('contact_bp.contact') }}">
                    {{ form.hidden_tag() }}
                    
                    <div class="form-row">
                        <div class="form-group">
                            <label for="{{ form.name.id }}">Nombre <span class="text-danger">*</span></label>
                            {{ form.name(class="form-control", placeholder="Tu nombre", required=true) }}
                            {% for error in form.name.errors %}
                            <span class="error-message">{{ error }}</span>
                            {% endfor %}
                        </div>
                        
                        <div class="form-group">
                            <label for="{{ form.email.id }}">Email <span class="text-danger">*</span></label>
                            {{ form.email(class="form-control", placeholder="correo@ejemplo.com", required=true) }}
                            {% for error in form.email.errors %}
                            <span class="error-message">{{ error }}</span>
                            {% endfor %}
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label for="{{ form.phone.id }}">Teléfono <span class="text-danger">*</span></label>
                        {{ form.phone(class="form-control", placeholder="Ej: 612 345 678", required=true) }}
                        {% for error in form.phone.errors %}
                        <span class="error-message">{{ error }}</span>
                        {% endfor %}
                    </div>
                    
                    <div class="form-group">
                        <label for="{{ form.subject.id }}">Asunto <span class="text-danger">*</span></label>
                        {{ form.subject(class="form-control", placeholder="Asunto de tu mensaje", required=true) }}
                        {% for error in form.subject.errors %}
                        <span class="error-message">{{ error }}</span>
                        {% endfor %}
                    </div>
                    
                    <div class="form-group">
                        <label for="{{ form.message.id }}">Mensaje <span class="text-danger">*</span></label>
                        {{ form.message(class="form-control", placeholder="Describe en qué podemos ayudarte...", required=true) }}
                        {% for error in form.message.errors %}
                        <span class="error-message">{{ error }}</span>
                        {% endfor %}
                    </div>

                    <div class="form-section">
                        <!-- Información del tratamiento de datos -->
                        <div class="gdpr-info-box" style="margin-bottom: 20px; padding: 15px; background-color: #f9f9f9; border-radius: 5px; font-size: 10px;">
                            <h4 style="margin-top: 0; font-size: 16px; font-weight: bold;">Información del tratamiento de datos</h4>
                            <p style="margin-bottom: 10px;">
                                EI responsable del tratamiento de los datos facilitados
                                es Catatumbo Solutions S.L. La finalidad del
                                tratamiento es atender a tu solicitud de información y en
                                caso de que autorices enviarte información sobre
                                nuestros productos y/o servicios. La base legal del
                                tratamiento es el interés legítimo en atender a tu
                                solicitud y en su caso el consentimiento facilitado para
                                el envío de comunicaciones comerciales. Podrás
                                ejercer los derechos de acceso: rectificación, limitación,
                                oposición, portabilidad, o retirar el consentimiento
                                enviando un email a dpd@catatumbosolutions.es.
                                También puedes presentar una reclamación ante la
                                Autoridad de Control (AEPD). Puedes consultar
                                información adicional y detallada sobre protección de
                                datos en nuestra <a href="{{ url_for('public.privacy_policy') }}" target="_blank">política de privacidad</a>.
                            </p>
                        </div>
                    </div>
                    
                    <div class="form-check">
                        {{ form.rgpd_consent(class="form-check-input", required=true) }}
                        <label class="form-check-label" for="{{ form.rgpd_consent.id }}">
                            Acepto la <a href="{{ url_for('public.privacy_policy') }}" target="_blank">política de privacidad</a> y el <a href="{{ url_for('public.terms_conditions') }}" target="_blank">tratamiento de mis datos</a> <span class="text-danger">*</span>
                        </label>
                        {% for error in form.rgpd_consent.errors %}
                        <span class="error-message">{{ error }}</span>
                        {% endfor %}
                    </div>
                    
                    <div class="form-check">
                        {{ form.newsletter(class="form-check-input") }}
                        {{ form.newsletter.label(class="form-check-label") }}
                        {% for error in form.newsletter.errors %}
                        <span class="error-message">{{ error }}</span>
                        {% endfor %}
                    </div>
                    
                    <div class="form-actions">
                        {{ form.submit(class="btn btn-primary", value="Enviar Mensaje") }}
                    </div>
                </form>
            </div>
            
            <div class="contact-info">
                <div class="info-card">
                    <h3><i class="fas fa-map-marker-alt"></i> Nuestra oficina</h3>
                    <p>Estamos ubicados en el centro de Madrid, a pocos minutos de transporte público.</p>
                    <ul>
                        <li><i class="fas fa-map-marker-alt"></i> C/ de la Princesa 31, piso 2, puerta 2, 28008, Madrid</li>
                        <li><i class="fas fa-phone"></i> +34 919 99 30 76</li>
                        <li><i class="fab fa-whatsapp"></i> +34 641 13 81 84</li>
                        <li><i class="fas fa-envelope"></i> ahorro@oleconsulting.es</li>
                    </ul>
                    <div class="mt-4">
                        <a href="https://maps.app.goo.gl/SdQ26YTqXpVpLFFf8" target="_blank" class="btn btn-sm btn-outline-primary">Ver en Google Maps</a>
                    </div>
                </div>
                
                <div class="info-card">
                    <h3><i class="far fa-clock"></i> Horario de atención</h3>
                    <p>Nuestro equipo está disponible durante los siguientes horarios:</p>
                    <ul>
                        <li><i class="fas fa-calendar-day"></i> Lunes a Jueves: 10:00 - 18:45</li>
                        <li><i class="fas fa-calendar-times"></i> Viernes: 10:00 - 14:00</li>
                        <li><i class="fas fa-calendar-times"></i> Fines de semana: Cerrado</li>
                    </ul>
                </div>
                
                <div class="social-media">
                    <h3><i class="fas fa-share-alt"></i> Síguenos</h3>
                    <p>Manténte al día de nuestras novedades sobre ahorro energético</p>
                    <div class="social-icons">
                        <a href="#" class="social-icon" aria-label="LinkedIn"><i class="fab fa-linkedin"></i></a>
                        <a href="#" class="social-icon" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
                        <a href="#" class="social-icon" aria-label="Facebook"><i class="fab fa-facebook"></i></a>
                        <a href="#" class="social-icon" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}
