<?php
// Template Name: Black Friday
get_header(); ?>
<style>
    @import url('https://fonts.googleapis.com/css?family=Montserrat:400,700&display=swap');
</style>

    <main class="page-main page-blackfriday" role="main">

        <div class="container">

            <div class="row">
                <div class="col-12">
                    <div class="container">
                        <ul class="contador-black">
                            <li><span id="days"></span>dias</li>
                            <li><span id="hours"></span>horas</li>
                            <li><span id="minutes"></span>minutos</li>
                            <li><span id="seconds"></span>segundos</li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-12">
                    <h1>Black Friday de Verdade!</h1>
                    <p>Preparem-se, nerds, pois a melhor Black Friday do Brasil está chegando! Os melhores preços e promoções em camisetas, livros e artigos de decoração nerd estão aqui na Nerdstore!</p>
                </div>
            </div>

            <div class="row banner-bf">
                <div class="col-12">
                    <img src="<?php bloginfo('template_directory'); ?>/images/blackfriday/banner-90porcento.jpg" alt="Black Friday com até 90% de desconto. Black Friday de Verdade!">
                </div>
            </div>

            <div class="row">
                <div class="col-12">
                    <h2>Receba o Alerta!</h2>
                    <p>Cadastre o seu e-mail agora para saber na hora que a Black Friday começar.</p>
                </div>
            </div>

            <?php echo do_shortcode( '[contact-form-7 id="307304" title="black friday"]' ); ?>

            <div class="row">
                <div class="col-12 col-md-4">
                    <img src="<?php bloginfo('template_directory'); ?>/images/blackfriday/banner-camisetas.jpg" alt="Black Friday de Camisetas Nerds">
                    <h4>Black Friday <span>CAMISETAS</span></h4>
                </div>

                <div class="col-12 col-md-4">
                    <img src="<?php bloginfo('template_directory'); ?>/images/blackfriday/banner-livros.jpg" alt="Black Friday de livros">
                    <h4>Black Friday <span>LIVROS</span></h4>
                </div>

                <div class="col-12 col-md-4">
                    <img src="<?php bloginfo('template_directory'); ?>/images/blackfriday/banner-decoracao.jpg" alt="Black Friday de Decoração Nerd">
                    <h4>Black Friday <span>DECORAÇÃO</span></h4>
                </div>
            </div>

            <div class="row textos-rodape">
                <div class="col-12 col-md-6">
                    <img src="<?php bloginfo('template_directory'); ?>/images/blackfriday/icon-like.png" alt="Black Friday de Verdade">
                    <h3>Promoções de <br>Verdade</h3>
                    <article>
                        <p>Quando o assunto é Black Friday não dá para bobear! Fique esperto e não se deixe enganar com falsas promoções. Na Black Friday Nerdstore você encontra promoções de verdade: produtos de qualidade com 50%, 70% até 90% de desconto!</p>
                    </article>
                </div>

                <div class="col-12 col-md-6">
                    <img src="<?php bloginfo('template_directory'); ?>/images/blackfriday/icon-calendar.png" alt="Black Friday da Nerdstore está chegando">
                    <h3>Quando acontece <br> a Black Friday?</h3>
                    <article>
                        <p>Ela está chegando! A Black Friday Nerdstore começa no dia 27 de novembro e vai até o dia 1 de dezembro de 2019. São 5 dias de produtos Nerdstore com preços ainda menores. Não vai perder!</p>
                    </article>
                </div>
            </div>
        </div>

    </main>

<!-- <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalblackfriday">
  botao demo
</button> -->

<!-- Modal -->
<div class="modal fade" id="modalblackfriday" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-body">
            <div class="row">
                <div class="col-12">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">X</span>
                    </button>
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <h6>Parabéns!</h6>
                    <p>Seu e-mail foi cadastrado com sucesso e você receberá as ofertas da Nerdstore em primeira mão, antes de todo mundo.</p>
                    <p>Fique atento no dia <b>27 de novembro de 2019</b></p>
                </div>
            </div>
      </div>
    </div>
  </div>
</div>
<!-- Fim do Modal -->

<script type="text/javascript">
    document.addEventListener( 'wpcf7mailsent', function( event ) {
        if ( '307304' == event.detail.contactFormId ) { // Change 123 to the ID of the form
            jQuery('#modalblackfriday').modal('show'); //this is the bootstrap modal popup id
        }
    }, false );
</script>



<?php get_footer(); ?>