{% extends 'layout.html.twig' %}

{% block page_title %}Contacto para Usuarios{% endblock %}
{% block main %}
<div class="container py-4">

    <div class="row mb-2">
        <div class="col">

            <h2 class="font-weight-bold text-7 mt-2">Contactar</h2>
            <p class="mb-4">No se corte, pregunte lo que quieras</p>

            <form class="contact-form-recaptcha-v3" action="php/contact-form-recaptcha-v3.php" method="POST">
                <div class="contact-form-success alert alert-success d-none mt-4">
                    <strong>Success!</strong> Su mensaje ha sido enviado.
                </div>

                <div class="contact-form-error alert alert-danger d-none mt-4">
                    <strong>Error!</strong> Tenemos problemas para enviar el mensaje.
                    <span class="mail-error-message text-1 d-block"></span>
                </div>

                <div class="row">
                    <div class="form-group col-lg-6">
                        <label class="form-label mb-1 text-2">Nombre completo</label>
                        <input type="text" value="" data-msg-required="Indique su nombre." maxlength="100" class="form-control text-3 h-auto py-2" name="name" required>
                    </div>
                    <div class="form-group col-lg-6">
                        <label class="form-label mb-1 text-2">Email</label>
                        <input type="email" value="" data-msg-required="Indique su email." data-msg-email="Please enter a valid email address." maxlength="100" class="form-control text-3 h-auto py-2" name="email" required>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group col">
                        <label class="form-label mb-1 text-2">Asunto</label>
                        <input type="text" value="" data-msg-required="Please enter the subject." maxlength="100" class="form-control text-3 h-auto py-2" name="subject" required>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group col">
                        <label class="form-label mb-1 text-2">Mensaje</label>
                        <textarea maxlength="5000" data-msg-required="Indique el mensaje." rows="5" class="form-control text-3 h-auto py-2" name="message" required></textarea>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group col">
                        <input type="submit" value="Enviar" class="btn btn-primary btn-modern" data-loading-text="Cargando...">
                    </div>
                </div>
            </form>

        </div>
    </div>
    <div class="row mb-5">
        <div class="col-lg-4">

            <div class="overflow-hidden mb-3">
                <h4 class="pt-5 mb-0 appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="200" data-plugin-options="{'accY': -200}">Get in <strong>Touch</strong></h4>
            </div>
            <div class="overflow-hidden mb-3">
                <p class="lead text-4 mb-0 appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="400" data-plugin-options="{'accY': -200}">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eget leo at velit imperdiet varius.</p>
            </div>
            <div class="overflow-hidden">
                <p class="mb-0 appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="600" data-plugin-options="{'accY': -200}">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eget leo at velit imperdiet varius.</p>
            </div>

        </div>
        <div class="col-lg-4 offset-lg-1 appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="800" data-plugin-options="{'accY': -200}">

            <h4 class="pt-5">Nuestras <strong>Oficinas</strong></h4>
            <ul class="list list-icons list-icons-style-3 mt-2">
                <li><i class="fas fa-map-marker-alt top-6"></i> <strong>Dirección:</strong> Suárez de la Riva, 2</li>
                <li><i class="fas fa-phone top-6"></i> <strong>Teléfono:</strong> (+34) 617 890 603</li>
                <li><i class="fas fa-envelope top-6"></i> <strong>Email:</strong> <a href="mailto:hi@hexagonalguru.com">hi@hexagonalguru.com</a></li>
            </ul>

        </div>
        <div class="col-lg-3 appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="1000" data-plugin-options="{'accY': -200}">

            <h4 class="pt-5"><strong>Horario</strong> de trabajo</h4>
            <ul class="list list-icons list-dark mt-2">
                <li><i class="far fa-clock top-6"></i> Lunes - Viernes - 9am a 6pm</li>
                <li><i class="far fa-clock top-6"></i> Sábado y Domingo - Cerrado</li>
            </ul>

        </div>
    </div>

</div>
    {{ include('partials/common/googlemaps.html.twig') }}
{% endblock %}