{% extends "themes/" + get_current_theme() + "/base.j2" %} {% set title = _("Contacto") %} {% block contenido %} {% set
current_theme = current_theme() %} {{ current_theme.navbar() }}

<main class="container my-5">
    <div class="row">
        <div class="col-12">
            <div class="text-center mb-4">
                <h1 class="display-5">{{ _("Contáctenos") }}</h1>
                <p class="lead">{{ _("¿Tiene preguntas o comentarios? Envíenos un mensaje y le responderemos pronto.") }}</p>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- Contact Form Column -->
        <div class="col-12 col-lg-6 mb-4">
            <div class="bg-white p-4 shadow-sm rounded h-100">
                <h3 class="mb-4">{{ _("Envíenos un mensaje") }}</h3>
                <form method="POST" action="{{ url_for('static_pages.contact') }}">
                    <div class="mb-3">
                        <label for="name" class="form-label">{{ _("Nombre") }} <span class="text-danger">*</span></label>
                        <input
                            type="text"
                            class="form-control"
                            id="name"
                            name="name"
                            required
                            maxlength="150"
                            placeholder="{{ _('Su nombre completo') }}"
                        />
                    </div>

                    <div class="mb-3">
                        <label for="email" class="form-label"
                            >{{ _("Correo Electrónico") }} <span class="text-danger">*</span></label
                        >
                        <input
                            type="email"
                            class="form-control"
                            id="email"
                            name="email"
                            required
                            maxlength="150"
                            placeholder="{{ _('correo@ejemplo.com') }}"
                        />
                    </div>

                    <div class="mb-3">
                        <label for="subject" class="form-label">{{ _("Asunto") }} <span class="text-danger">*</span></label>
                        <input
                            type="text"
                            class="form-control"
                            id="subject"
                            name="subject"
                            required
                            maxlength="200"
                            placeholder="{{ _('Breve descripción del tema') }}"
                        />
                    </div>

                    <div class="mb-3">
                        <label for="message" class="form-label">{{ _("Mensaje") }} <span class="text-danger">*</span></label>
                        <textarea
                            class="form-control"
                            id="message"
                            name="message"
                            required
                            rows="6"
                            maxlength="5000"
                            placeholder="{{ _('Escriba su mensaje aquí...') }}"
                        ></textarea>
                    </div>

                    <div class="d-grid gap-2">
                        <button type="submit" class="btn btn-primary btn-lg">
                            <i class="bi bi-send"></i> {{ _("Enviar Mensaje") }}
                        </button>
                        <a href="{{ url_for('home.pagina_de_inicio') }}" class="btn btn-outline-secondary">
                            {{ _("Cancelar") }}
                        </a>
                    </div>
                </form>
            </div>
        </div>

        <!-- Contact Information Column -->
        <div class="col-12 col-lg-6 mb-4">
            <div class="bg-white p-4 shadow-sm rounded h-100">
                <h3 class="mb-4">{{ _("Información de Contacto") }}</h3>

                {% if config and (config.contact_address or config.contact_email or config.contact_phone or
                config.contact_mobile or config.contact_whatsapp) %}
                <div class="contact-info">
                    {% if config.contact_address %}
                    <div class="mb-4">
                        <h6 class="text-muted mb-2">
                            <i class="bi bi-geo-alt-fill me-2"></i>{{ _("Sede central y oficinas") }}
                        </h6>
                        <p class="mb-0">{{ config.contact_address }}</p>
                    </div>
                    {% endif %} {% if config.contact_phone %}
                    <div class="mb-4">
                        <h6 class="text-muted mb-2"><i class="bi bi-telephone-fill me-2"></i>{{ _("Teléfono") }}</h6>
                        <p class="mb-0">
                            <a href="tel:{{ config.contact_phone }}" class="text-decoration-none"
                                >{{ config.contact_phone }}</a
                            >
                        </p>
                    </div>
                    {% endif %} {% if config.contact_email %}
                    <div class="mb-4">
                        <h6 class="text-muted mb-2"><i class="bi bi-envelope-fill me-2"></i>{{ _("Administración") }}</h6>
                        <p class="mb-0">
                            <a href="mailto:{{ config.contact_email }}" class="text-decoration-none"
                                >{{ config.contact_email }}</a
                            >
                        </p>
                    </div>
                    {% endif %} {% if config.contact_mobile %}
                    <div class="mb-4">
                        <h6 class="text-muted mb-2"><i class="bi bi-phone-fill me-2"></i>{{ _("Compras") }}</h6>
                        <p class="mb-0">
                            <a href="mailto:{{ config.contact_mobile }}" class="text-decoration-none"
                                >{{ config.contact_mobile }}</a
                            >
                        </p>
                    </div>
                    {% endif %} {% if config.contact_whatsapp %}
                    <div class="mb-4">
                        <h6 class="text-muted mb-2"><i class="bi bi-whatsapp me-2"></i>{{ _("Ventas") }}</h6>
                        <p class="mb-0">
                            <a href="mailto:{{ config.contact_whatsapp }}" class="text-decoration-none"
                                >{{ config.contact_whatsapp }}</a
                            >
                        </p>
                    </div>
                    {% endif %}
                </div>
                {% else %}
                <div class="text-muted">
                    <p>{{ _("La información de contacto no está disponible en este momento.") }}</p>
                    <p class="mb-0">{{ _("Por favor, utilice el formulario para enviarnos su mensaje.") }}</p>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</main>

{{ current_theme.footer() }} {% endblock %}