@extends('front.layouts.app')
@section('local_styles')
    <link rel="stylesheet" href="/css/subarticle.css">
@endsection
@section('content')
<div  id="mobile-menu" class="mobile-menu">
    <button @click="animateMenu"  id="mobile-menu-button" class="mobile-menu__button"><i class="fas fa-bars"></i></button>
</div>
<header class="internal-header">
    <div class="container">
    @include('front.partials.sticky')
      <ul id="main-nav" class="main-nav main-nav--subarticle" role="navigation">
          @include('front.partials.menu')
      </ul>
    </div>
</header>
<div class="hero subarticle-hero subarticle-hero--polo">
    <div class="container subarticle-hero__container">
        <h1 class="subarticle-hero__heading">Polo</h1>
        <div id="subarticle-hero__mask" class="subarticle-hero__mask subarticle-hero__mask--hat"></div>
    </div>
</div>
<div class="container ribbon__container">
    <nav class="ribbon">
        <div class="ribbon-item ribbon-item--extende">
            <div class="ribbon-item__copy">
                <h1 class="ribbon-item__heading">Sunday Polo Brunch</h1>
                <p class="ribbon-item__info">A partir del 04 de noviembre 2018.</p>
            </div>
        </div>
        <div class="ribbon-item ribbon-item--extende">
            <div class="ribbon-item__copy">
                <h1 class="ribbon-item__heading">Todos los Domingos</h1>
                <p class="ribbon-item__info">De 11:00 a 16:00hrs.</p>
            </div>
        </div>
        <div class="ribbon-item ribbon-item--extende ribbon-item--center">
            <button class="button button--primary ribbon__button" @click="playVideo = true"><span class="text">Ver video</span> <svgIcon src="/svg/play.svg"></svgIcon></button>
        </div>
    </nav>
</div>
<section class="section section--subarticle">
    <div class="container">
        <div class="polo-academy">
            <div class="polo-academy__image">
                <img  src="img/subarticle/polo/polo-learn.png" alt="Learn from the best">
            </div>
            <div class="polo-academy__info">
                <h2 class="brand polo-academy__brand"><svgicon class="patrona-polo-brand" src="/svg/lapatrona.svg"></svgicon></h2>
                <h1 class="polo-academy__headline">
                    Aprende de <p class="polo-academy__subhead">los mejores</p>
                </h1>
                <p class="polo-academy__copy">Todo aquel que desee aprender a jugar o mejorar su técnica de polo tiene en La Patrona Polo & Equestrian Club el mejor apoyo para desarrollarse, desde el nivel principiante hasta el nivel intermedio, a partir de los 10 años de edad. </p>
                <p class="polo-academy__copy">El principal objetivo es que los jugadores aprendan a jugar con seguridad y confianza en cualquier circunstancia, y con diferentes compañeros de equipo.</p>
                <p class="polo-academy__copy">
                    Existe la posibilidad de tomar lecciones individuales o en grupo, tanto prácticas como teóricas, en las siguientes áreas: equitación, cuidados básicos del caballo, reglamentos, tácticas de juego, estilo, técnica de balanceo, de golpe, sesiones de kick & ball y chukkers de práctica.
                </p>

            </div>
        </div>
    </div>
</section>
<imggallery :query="'polo'"></imggallery>
<section class="section section--subarticle">
    <div class="container">
        <div class="polo-instructor">

            <div  class="polo-instructor__info">
                <h2 class="brand polo-academy__brand"><svgicon class="patrona-polo-brand" src="/svg/lapatrona.svg"></svgicon></h2>
                <h1 class="polo-instructor__headline">
                    Campo de Polo <p class="polo-instructor__subhead"> por Alejandro Battro </p>
                </h1>
                <p class="copy polo-instructor__copy">Diseñadas con las mejores cualidades y con la asesoría de Alejandro Battro, La Patrona Polo & Equestrian Club permite experimentar la gran intensidad del Polo en:</p>
                <ul class="polo-instructor__copy polo-instructor__copy--list">
                    <li>Un campo profesional.</li>
                    <li>Una pista para indoor polo.</li>
                    <li>Una pista de taqueo para prácticas.</li>
                    <li>Renta de caballerizas.</li>
                </ul>
                <p class="copy polo-instructor__copy">Adicionalmente, cuenta con caballerizas para la comodidad de sus equinos, boxes, baños, vestidores, sillero, sala y patios privados.</p>
            </div>
            <div class="polo-instructor__image">
                <img src="img/subarticle/polo/polo-by-alejandro.png" alt="Polo by Alejandro Battro">
            </div>
        </div>
    </div>
</section>
<section id="brunch" class="section section--subarticle">
    <div class="container">
        <div class="polo-brunch">
            <div class="polo-brunch__image">
                <svgIcon class="polo-brunch__icon" src="svg/sunday-polo-brunches.svg"></svgIcon>
            </div>
            <div class="polo-brunch__info">
                <div class="polo-brunch__wrapper">
                    <header class="polo-brunch__header">
                        <div>
                            <h1 class="polo-brunch__headline">
                                Domingos
                            </h1>
                            <h2 class="polo-brunch__subhead">
                                en La Patrona Polo Club.
                            </h2>
                        </div>
                        <img class="polo-brunch__badge" src="img/subarticle/polo/polo-brunch.jpg" alt="Polo Brunch">
                    </header>
                    <p class="polo-brunch__copy">Es una oferta gastronómica en formato de Brunch pensado para vacacionistas locales y extranjeros que deseen disfrutar de nuestra cocina y gozar de una muestra de exhibición de Polo. Todos nuestros platillos son elaborados con productos frescos, utilizando técnicas de cocina basadas en ahumados, parrilla, leña y carbón, y con el toque de nuestro Chef,<strong> Hugo Ahumada.</strong></p>
                    {{-- <button class="button button--secondary polo-brunch__button" @click.prevent="modalActive = !modalActive">Asistir</button> --}}
                    <a class="button button--secondary polo-brunch__button" href="/tienda">Asistir</a>
                </div>
            </div>
    </div>
</section>
<section class="section section--subarticle">
    <div class="container">
        <div class="polo-contact">
            <h1 class="polo-contact__headline"> COMIENZA TUS LECCIONES DE POLO. CONTÁCTANOS PARA MAYORES INFORMES</h1>
            <form id="polo-lesson-form" class="polo-contact__form" action="" @submit.prevent="sendContact('Polo Lesson',false,'reservaciones@tierratropical.com.mx')">
                <div class="polo-contact__upper">
                    <div class="form-control polo-contact__control">
                        <label class="polo-contact__label" for=""> Nombre </label>
                        <input v-model="contact.name" class="polo-contact__input" type="text" placeholder="Nombre" required>
                    </div>
                    <div class="form-control polo-contact__control">
                        <label class="polo-contact__label" for=""> Apellido</label>
                        <input v-model="contact.l_name" class="polo-contact__input" type="text" placeholder="Apellido" required>
                    </div>
                </div>
                <div class="polo-contact__upper">
                    <div class="form-control polo-contact__control">
                        <label class="polo-contact__label" for=""> Correo</label>
                        <input v-model="contact.email" class="polo-contact__input" type="email" placeholder="Email" required>
                    </div>
                    <div class="form-control polo-contact__control polo-contact__control--small">
                        <label class="polo-contact__label" for=""> País</label>
                        <input v-model="contact.country" class="polo-contact__input" type="text" placeholder="País" required>
                    </div>
                    <div class="form-control polo-contact__control polo-contact__control--small">
                        <label class="polo-contact__label" for=""> Teléfono </label>
                        <input v-model="contact.phone" class="polo-contact__input" type="tel" placeholder="Lada + teléfono" required>
                    </div>
                </div>

                 <div class="polo-contact__lower">
                    <div class="form-control polo-contact__control polo-contact__control--tall">
                        <label class="polo-contact__label" for="">Comentario</label>
                        <textarea v-model="contact.body" class="polo-contact__input polo-contact__input--textarea" name="name"></textarea>
                    </div>
                 </div>
            </form>
            <div class="polo-contact__submit">
                <p class="polo-contact__legal">Al dar clic a enviar acepto haber leído el<a @click.prevent="privacidad = true">Aviso de privacidad</a></p>
                <button form="polo-lesson-form" class="button button--submit polo-contact__button" type="submit" name="button">Enviar</button>
            </div>
        </div>
    </div>
</section>
<div class="overlay" :class="{active: modalActive}" @click.prevent="modalActive = !modalActive">
    <div class="lightbox" @click.stop>
        <div class="lightbox__close" @click.prevent="modalActive = !modalActive"></div>
        <div class="lightbox__image lightbox__image--brunch">
            <img src="" alt="">
        </div>
        <div class="lightbox__info">
            <template v-if="!thanks">
                <h1 class="lightbox__headline">
                    Sunday Polo <strong>Brunch.</strong>
                </h1>
                <form id="sunday-polo-brunch-form" class="lightbox-form" @submit.prevent="sendContact('Polo Brunch Sunday', true,'reservaciones@lapatronapoloclub.com')">
                    <div class="form-control lightbox__control">
                        <label class="polo-contact__label" for="">Nombre Completo</label>
                        <input v-model="contact.name" class="polo-contact__input" type="text" name="" value="" placeholder="Nombre" required>
                    </div>
                    <div class="form-control lightbox__control ">
                        <label class="polo-contact__label" for=""> Correo</label>
                        <input v-model="contact.email" class="polo-contact__input" type="email" name="" value="" placeholder="Correo"required>
                    </div>
                    <div class="form-control lightbox__control">
                        <label class="polo-contact__label" for="">Teléfono </label>
                        <input v-model="contact.phone" class="polo-contact__input" type="tel" name="" value="" placeholder="Lada + teléfono" required>
                    </div>
                </form>

                <button form="sunday-polo-brunch-form" class="button button--secondary lightbox__button" type="submit" name="button">Enviar</button>
            </template>
            <div class="lightbox-thanks" v-else>
                <svgicon class="lightbox-thanks__icon" src="svg/thanks.svg"></svgicon>
                <h1 class="lightbox-thanks__headline">Gracias</h1>
                <p class="lightbox-thanks__subhead">Hemos recibido tu mensaje, te contactaremos por correo para dar seguimiento a tu petición.</p>
            </div>
        </div>
    </div>
</div>
<div class="overlay" :class="{active: playVideo}" @click="playVideo = false" v-if="playVideo">
    <div class="lightbox lightbox--video">
        <div class="lightbox__close lightbox__close--outside" @click.prevent="playVideo = !playVideo"></div>
        <video @click.stop style="max-width:100%" src="/videos/sunday_polo_brunch.mp4" autoplay controls poster=""></video>
    </div>
</div>
@endsection
@section('local_scripts')
    <script src="/js/subarticle.js" charset="utf-8"></script>
@endsection