@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--copa">

    <div class="container subarticle-hero__container">
        <h1 class="subarticle-hero__heading">Copa</h1>
        <h2 class="subarticle-hero__subhead">Riviera Nayarit</h2>

    </div>
</div>
<div class="container ribbon__container">
    <nav class="ribbon">
        <div class="ribbon-item ribbon-item--center">
            <img class="copa-logo" src="/img/subarticle/copa/logo.jpg" alt="">
        </div>
        <div class="ribbon-item">
            <div class="ribbon-item__copy">
                <h1 class="ribbon-item__heading">Del 6 al 9 de Diciembre</h1>
                <p class="ribbon-item__info">La patrona Polo & Equestrian Club, San Fancisco, Nayarit.</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>
              {{-- <a href="/pagar" class="button button--primary ribbon__button" >Comprar Boletos</a> --}}
        </div>
    </nav>
</div>
<section class="section section--subarticle">
    <div class="container">
        <div class="polo-academy">
            <div class="polo-academy__image">
                <img  src="img/subarticle/copa/sede.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">
                    La Sede
                </h1>
                <p class="polo-academy__copy">La Patrona Polo & Equestrian Club recibe la séptima edición de la COPA POLO RIVIERA NAYARIT para cerrar con broche de oro el 2018. Preparamos una celebración llena de sabor, ritmo y belleza para este fin de año, ya que en esta ocasión la gastronomía, mixología, moda, música y diversión se unirán para esta celebración.</p>
                <a href="https://goo.gl/maps/K3iNw3w3ruv" target="_blank">
                    <button class="button button--ghost-secondary polo-academy__button" type="button" name="button"> Cómo llegar</button>
                </a>
            </div>
        </div>
    </div>
</section>
{{-- <button form="copa-nayarit-form" class="button button--submit polo-contact__button" type="submit" name="button">Comprar boletos</button> --}}
<section class="section section--subarticle">
    <div class="container">
        <div class="polo-instructor">
            <div  class="polo-instructor__info">
                <h2 class="brand polo-instructor__brand">País invitado</h2>
                <h1 class="polo-instructor__headline">
                    Canadá
                </h1>
                <p class="copy polo-instructor__copy">Por primera vez en la historia de la COPA DE POLO RIVIERA NAYARIT tendremos un País invitado, y en esta ocasión nos complace recibir al País de la hoja de maple, Canadá</p>
            </div>
            <div class="polo-instructor__image">
                <img src="img/subarticle/copa/canada.png" alt="Polo by Alejandro Battro">
            </div>
        </div>
    </div>
</section>
<section class="section section--subarticle">
    <div class="container">
        <div class="polo-academy">
            <div class="polo-academy__image">
                <img  src="img/subarticle/copa/arte.png" alt="Learn from the best">
            </div>
            <div class="polo-academy__info">
                <h2 class="brand polo-academy__brand">Disfruta del</h2>
                <h1 class="polo-academy__headline">
                    Arte y experiencia <p class="polo-academy__subhead">gastronómica</p>
                </h1>
                <p class="polo-academy__copy">Por primera vez en la historia de la COPA DE POLO RIVIERA NAYARIT se involucrará el arte de lo mejor de la gastronomía y la mixología de la región y de México. Tendremos Chefs y mixólogos invitados de primer nivel que compartirán sus más exclusivas creaciones con nuestros invitados.</p>
            </div>
        </div>
    </div>
</section>
<section class="section section--subarticle">
    <div class="container">
        <div class="polo-instructor">
            <div  class="polo-instructor__info">
                <h2 class="brand polo-instructor__brand">Sunset</h2>
                <h1 class="polo-instructor__headline">
                    Fashion Show
                </h1>
                <p class="copy polo-instructor__copy">La Riviera Nayarit es el lugar más "Hot" del Pacífico Mexicano y queremos mostrar al mundo la calidad del diseño y tendencias de moda que se generan en el País, además de las bellezas mexicanas que engalanarán nuestro "Sunset fashion show" en el Club de Playa Lomas del Nayar.</p>
            </div>
            <div class="polo-instructor__image">
                <img src="img/subarticle/copa/fashion-show.png" alt="Polo by Alejandro Battro">
            </div>
        </div>
    </div>
</section>

<section class="section section--subarticle">
    <div class="container">
        <div class="polo-contact">
            <h1 class="polo-contact__headline"> ¿Te gustaría recibir más Información?</h1>
            <form class="polo-contact__form" id="copa-nayarit-form" @submit.prevent="sendContact('Copa Nayarit',false,'reservaciones@lapatronapoloclub.com')">
                <div class="polo-contact__upper">
                    <div class="form-control polo-contact__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 polo-contact__control polo-contact__control--small polo-contact__control--separator">
                        <label class="polo-contact__label" for=""> Correo</label>
                        <input v-model="contact.email" class="polo-contact__input" type="email" name="" value="" placeholder="Email" 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" name="" value="" placeholder="Lada + teléfono" required>
                    </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="copa-nayarit-form" class="button button--submit polo-contact__button" type="submit" name="button">Enviar</button>
            </div>
        </div>


    </div>
</section>
<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/copa_riviera_nayarit.mp4" autoplay controls poster=""></video>
    </div>
</div>
@endsection
@section('local_scripts')
    <script src="/js/subarticle.js" charset="utf-8"></script>
@endsection