@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__brunch">
    <div class="container subarticle-hero__container">
        <h2 class="title__extended">sunday polo</h2>
        <h1 class="subarticle-hero__heading subarticle-hero__heading--polo__brunch">Brunch</h1>
    </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">$1,100 MXN por persona</h1>
                <p class="ribbon-item__info">La Patrona Polo & Equestrian Club. Lecciones individuales o en grupo.</p>
                <div class="box-header__cards">
                    <img  src="/svg/american-express.svg" alt="" class="checkout-cards checkout-cards--large"> <img  src="/svg/visa.svg" alt="" class="checkout-cards checkout-cards--small"> <img  src="/svg/mastercard.svg" alt="" class="checkout-cards checkout-cards--large">
                </div>
            </div>
        </div>
        <div class="ribbon-item ribbon-item--extende">
            <a class="btn__buy__ticket">
                COMPAR BOLETOS | BUY TICKETS
                <img src="/img/polo-brunch/ticket.png" alt="">
            </a>
        </div>
    </nav>
</div>
<section class="section section--subarticle">
    <div class="container">
        <div class="polo-academy">
            <div class="polo-academy__image">
                <img  src="img/polo-brunch/body-brunch.png" alt="Learn from the best">
            </div>
            <div class="polo-academy__info">
                <h2 class="brand polo-academy__brand">Domingos</h2>
                <h1 class="polo-academy__headline">
                    de Polo y<p class="polo-academy__subhead">Brunch.</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>
                <ul class="list__polo__brunch">
                    <li class="list__polo__brunch__item">Polo Bruncho por el Chef Hugo Ahumada</li>
                    <li class="list__polo__brunch__item">Exhibicion de polo en cancha de Jaguar</li>
                    <li class="list__polo__brunch__item">Una pista de taque para práctica</li>
                    <li class="list__polo__brunch__item">Renta de caballerizas</li>
                </ul>
            </div>
        </div>
    </div>
</section>
<imggallery :query="'polo'"></imggallery>

<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