@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--festival">
        <div class="container subarticle-hero__container">
            <h1 class="subarticle-hero__heading tittle-festival">
                FESTIVAL
            </h1>
            <p class="paragraph-tittle festival">GOURMET</p>
            <div id="subarticle-hero__mask"  class="subarticle-hero__mask subarticle-hero__mask--festival"></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">Festival Gourmet</h1>
                </div>
            </div>
            <div class="ribbon-item ribbon-item--extende">
                <div class="ribbon-item__copy">
                    <h1 class="ribbon-item__heading">Mesa del Chef</h1>
                    <p class="ribbon-item__info">Viernes 30 de noviembre 18:00hrs.</p>
                </div>
            </div>
            <div class="ribbon-item ribbon-item--extende">
                <div class="ribbon-item__copy">
                    <h1 class="ribbon-item__heading">Polo Grill Feast</h1>
                    <p class="ribbon-item__info">Domingo 02 de Diciembre 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/festival/festival-hugo.png" alt="hugo ahumada">
                </div>
                <div class="polo-academy__info">
                    <h2 class="brand polo-academy__brand">Asiste a</h2>
                    <h1 class="polo-academy__headline headline-festival">
                        Una fiesta de
                        <p class="polo-academy__subhead">
                            sabores.
                        </p>
                    </h1>
                    <p class="polo-academy__copy">Vive una experiencia gastronómica única en manos de nuestro galardonado Chef de casa, Hugo Ahumada, quien estará acompañado por nuestro invitado especial, el reconocido Chef Diego Hernández.  Juntos ofrecerán una Mesa del Chef con un menú especial de seis tiempos elaborado con productos locales y del huerto orgánico de La Patrona. </p>
                    <p class="polo-academy__copy">
                    Para cerrar con broche de oro la jornada de eventos que engalanarán el festival, el tradicional Sunday Polo Brunch de la Patrona, se convertirá en un Grill Feast donde los visitantes podrán disfrutar de vegetales, carnes y mariscos cocinados en la parrilla y condimentados con el inigualable estilo de la casa.
                    </p>
                    <button class="button button--ghost-secondary polo-academy__button" type="button" name="button" @click.prevent="modalActive = !modalActive" >Asistir</button>
                </div>
            </div>
        </div>
    </section>

    <imggallery :query="'Festival Gourmet'"></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" style="background-image:url('img/festival/festival-modal.jpg');">
                <img src="" alt="">
            </div>
            <div class="lightbox__info">
                <template v-if="!thanks">
                    <div class="lightbox__headline">
                        Festival <strong>Gourmet</strong>
                        <p class="lightbox-paragraph">¿Deseas recibir información y costos? Envíanos un mensaje y estaremos en contacto.</p>
                    </div>
                    <form id="gourmet-festival-form" class="lightbox-form" @submit.prevent="sendContact('Festival Gourmet', true,'reservaciones@tierratropical.com.mx')">
                        <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="Email" 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="gourmet-festival-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/festival_gourmet_internacional-polo_grill_feast.mp4" autoplay controls poster=""></video>
        </div>
    </div>
@endsection
@section('local_scripts')
    <script src="/js/subarticle.js" charset="utf-8"></script>
@endsection