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

{% block content %}

<nav class="navbar navbar-custom navbar-fixed-top hidden-xs">
    <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a id="gadirson-brand" role="button">
                <img class="gadirson-brand" src="{{ asset('assets/img/brand.png') }}" alt="Gadirson" />
            </a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

            <ul class="nav navbar-nav navbar-right">
		<li class="nav-services"><a href="https://booking.redforts.com/xOqv/" target="_blank">Alquiler Turístico</a></li>
                <li class="nav-services"><a href="#services" class="page-scroll">Servicios</a></li>
                <li class="nav-contact"><a href="#contact" class="page-scroll">Contacto</a></li>
                <li class="nav-map"><a href="#map" class="page-scroll">Dónde estamos</a></li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>

<nav class="navbar navbar-mobile hidden-sm hidden-md hidden-lg" style="position: absolute; right: 0; z-index: 10;">
    <div class="container">
        <div style="text-align: right;">
            <ul class="" style="padding: 0; list-style: none;">
                <li><a href="https://booking.redforts.com/xOqv/" target="_blank" style="font-size: 10px; color: #154973; text-transform: uppercase; font-weight: 700;">Alquiler Turístico</a></li>
            </ul>
        </div>
    </div>
</nav>

<!-- Header desktop -->

<header id="header-desktop" class="visible-lg">
    <div class="header-body">
        <div class="container">
            <div class="row">
                <div class="col-md-8 col-md-offset-2">
                    <img class="gadirson-logo" src="{{ asset('assets/img/logoHeader2.png') }}" alt="Gadirson" />
                    <p class="intro-text" style="color:#154973;">Servicios Inmobiliarios & Administración de fincas</p>
                </div>
            </div>
        </div>
    </div>
</header>

<!-- end Header desktop -->

<!-- Header mobile -->

<header id="header-mobile" class="hidden-lg">
    <div class="header-mobile">
        <div class="header-body">
            <div class="container">
                <div class="row">
                    <div class="col-md-8 col-md-offset-2">
                        <img class="gadirson-logo" src="{{ asset('assets/img/logoHeader2.png') }}" alt="Gadirson" />
                        <p class="intro-text" style="color:#154973;">Servicios Inmobiliarios & Administración de fincas</p>
                    </div>
                </div>
            </div>
        </div>
        <img class="img-responsive" src="{{ asset('assets/img/cover.jpg') }}" alt="Gadirson" />
    </div>
</header>

<!-- end Header mobile -->

<section id="services">
    <img id="separator-top" class="img-responsive" src="{{ asset('assets/img/separatorTop.png') }}" />
    <div class="services-body">
        <div class="container">
            <div class="row text-center">
                <div class="col-lg-12">
                    <div class="row">
                        <div class="col-xs-12 col-md-4 visible-xs visible-sm">
                            <div class="service-item">
                            <span class="fa-stack fa-5x">
                                <i class="fa fa-circle fa-stack-2x service-circle"></i>
                                <i class="fa fa-users fa-stack-1x service-icon"></i>
                            </span>
                                <h4>
                                    Quiénes somos
                                </h4>
                                <p>
                                    Somos un equipo joven y dinámico con experiencia en el sector inmobiliario de la provincia gaditana desde 1984. Nuestro deseo es ofrecer el mejor servicio posible en los campos del asesoramiento inmobiliario y en el complicado mundo de la administración de fincas.
                                </p>
                                <!-- <a href="#" class="btn btn-submit">Más información</a> -->
                            </div>
                        </div>
                        <div class="col-xs-12 col-md-4">
                            <div class="service-item">
                            <span class="fa-stack fa-5x circle">
                                <i class="fa fa-circle fa-stack-2x service-circle"></i>
                                <i class="fa fa-home fa-stack-1x service-icon"></i>
                            </span>
                                <h4>
                                    Servicios Inmobiliarios
                                </h4>
                                <p>
                                    Nuestros servicios incluyen la selección de los inmuebles que formarán parte de nuestra cartera, para su posterior tasación profesional. Dedicados a la intermediación en la compra-venta y alquiler de inmuebles. Le aconsejaremos en las decisiones administrativas, jurídicas, financieras, fiscales y técnicas que deberá tomar a lo largo de todo el camino.
                                </p>
                                <!-- <a href="#" class="btn btn-submit">Más información</a> -->
                            </div>
                        </div>
                        <div class="col-xs-12 col-md-4 hidden-xs hidden-sm">
                            <div class="service-item">
                            <span class="fa-stack fa-5x">
                                <i class="fa fa-circle fa-stack-2x service-circle"></i>
                                <i class="fa fa-users fa-stack-1x service-icon"></i>
                            </span>
                                <h4>
                                    Quiénes somos
                                </h4>
                                <p>
                                    Somos un equipo joven y dinámico con experiencia en el sector inmobiliario de la provincia gaditana desde 1984. Nuestro deseo es ofrecer el mejor servicio posible en los campos del asesoramiento inmobiliario y en el complicado mundo de la administración de fincas.
                                </p>
                                <!-- <a href="#" class="btn btn-submit">Más información</a> -->
                            </div>
                        </div>
                        <div class="col-xs-12 col-md-4">
                            <div class="service-item">
                            <span class="fa-stack fa-5x">
                                <i class="fa fa-circle fa-stack-2x service-circle"></i>
                                <i class="fa fa-key fa-stack-1x service-icon"></i>
                            </span>
                                <h4>
                                    Administración de fincas
                                </h4>
                                <p>Administración de comunidades para ofrecer a nuestros clientes la mayor transparencia en todas las gestiones necesarias en este ámbito: gestión de siniestros, ahorro en los contratos de mantenimiento, redacción de cuentas anuales y actas de las juntas, reclamación a morosos, etc.</p>
                                <!-- <a href="#" class="btn btn-submit">Más información</a> -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <img id="separator-bottom" class="img-responsive pull-right" src="{{ asset('assets/img/separatorBottom.png') }}" />
</section>

<section id="social">
    <div class="text-vertical-center">
        <span class="social-item">Síguenos en las redes sociales</span>
        <br class="visible-xs">
        <br class="visible-xs">
        <span>
        <a class="social-item fb" href="https://www.facebook.com/gadirsoninmobiliaria/" target="_blank"><i class="fa fa-facebook"></i></a>
        <a class="social-item instagram" href="https://www.instagram.com/gadirsoninmobiliaria/" target="_blank"><i class="fa fa-instagram"></i></a>
    </span>

    </div>
</section>

<section id="contact">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 text-center">
                <h3>Contacto</h3>
            </div>
        </div>
        {% set indexContact = path('front_index') ~ '#contact' %}

            {# {{ form_start(contactForm, {'attr': {'id': 'contact-form','class': 'contact-form'}, 'action': indexContact, 'method': 'post'}) }} #}
        <form id="contact-form" class="contact-form" action="{{ indexContact }}" method="POST">
            <div class="row">
                <div class="col-xs-12 col-sm-6">
                    {# {{ form_widget(contactForm.name, {'attr': {'class': 'contact-input', 'placeholder': 'Nombre', 'autocomplete': 'off'} }) }} #}
                    <input
                        type="text"
                        class="contact-input"
                        name="name"
                        onfocus="this.placeholder = ''"
                        onblur="this.placeholder = 'Nombre*'"
                        placeholder="Nombre*"
                        required
                        autocomplete="off"
                    >
                    <div class="error-message hidden-xs">El nombre introducido no es válido</div>
                    <div class="error-message-xs visible-xs"><i class="fa fa-ban"></i></div>
                    <div class="success-message"><i class="fa fa-check"></i></div>
                </div>
                <div class="col-xs-12 col-sm-6">
                    {# {{ form_widget(contactForm.email, {'attr': {'class': 'contact-input', 'placeholder': 'Email', 'autocomplete': 'off'} }) }} #}
                    <input
                        type="email"
                        class="contact-input"
                        name="email"
                        onfocus="this.placeholder = ''"
                        onblur="this.placeholder = 'Email*'"
                        placeholder="Email*"
                        required
                        autocomplete="off"
                    >
                    <div class="error-message hidden-xs">El email introducido no es válido</div>
                    <div class="error-message-xs visible-xs"><i class="fa fa-ban"></i></div>
                    <div class="success-message"><i class="fa fa-check"></i></div>
                </div>
                <div class="col-xs-12">
                    <textarea
                        class="contact-input contact-textarea"
                        name="body"
                        cols="30"
                        rows="9"
                        onfocus="this.placeholder = ''"
                        onblur="this.placeholder = 'Mensaje...'"
                        placeholder="Mensaje..."
                        required
                    ></textarea>
                </div>
            </div>
            {% for flashMessage in app.session.flashbag.get('email-error') %}
                <div class="row">
                    <div class="col-xs-12">
                        <div class="alert alert-danger alert-dismissible" role="alert">
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            {{ flashMessage }}
                        </div>
                    </div>
                </div>
            {% endfor %}
            {% for flashMessage in app.session.flashbag.get('email-successful') %}
                <div class="row">
                    <div class="col-xs-12">
                        <div class="alert alert-success alert-dismissible" role="alert">
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            {{ flashMessage }}
                        </div>
                    </div>
                </div>
            {% endfor %}
            {% if recaptchaError == true %}
                <div class="row">
                    <div class="col-xs-12">
                        <div class="alert alert-danger alert-dismissible" role="alert">
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <span>Por favor, rellene el reCAPTCHA.</span>
                        </div>
                    </div>
                </div>
            {% endif %}
            <div class="g-recaptcha" name="g-recaptcha-response" data-sitekey="6Lc_01cUAAAAACYGcgUVWYcCicxS4BwJ8BW_AAr0"></div>
            <script src='https://www.google.com/recaptcha/api.js'></script>
            <div class="row">
                <div class="col-xs-12">
                    <div class="contact-submit" style="border:none">
                        <button type="submit" class="btn btn-primary">Enviar</button>
                    </div>
                </div>
            </div>
            <div class="antispam">
                No rellenar: <input type="text" name="url" >
            </div>
        </form>
    </div>
</section>

<section id="map">
    <div id="map-wrapper" class="no-scroll-layer">
        <iframe
            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d534.9028510829529!2d-6.299406552894262!3d36.5349430637476!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd0dd160cd1ad48b%3A0xa8578be8294f3e01!2sGadirson.%20Inmobiliaria%20y%20Administraci%C3%B3n%20de%20Fincas!5e0!3m2!1ses!2ses!4v1669622302654!5m2!1ses!2ses"
            width="100%"
            height="650px"
            style="border:0;"
            allowfullscreen=""
            loading="lazy"
            referrerpolicy="no-referrer-when-downgrade">
        </iframe>
    </div>
</section>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script src="{{ asset('assets/js/jquery.easing.min.js') }}"></script>
    <script src="{{ asset('assets/js/jquery.nevma.noScrollLayer-1.0.min.js') }}"></script>
    <script src="{{ asset('assets/js/gadirson.js') }}"></script>
{% endblock %}