{% extends 'base.html.twig' %}

{% block head %}
    {{ parent() }}
    <style>
        .button-container {
            height: 50em;
        }
        .button-container.left {
            background: url({{ asset('assets/img/eolia-interieur.jpg') }}) no-repeat center center fixed;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
        }
        .button-container.right {
            background: url({{ asset('assets/img/eolia-exterieur.jpg') }}) no-repeat center center fixed;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
        }
    </style>
    <script>
        function scrollToPosition(id) {
            var element = document.getElementById(id);
            element.scrollIntoView({behavior: "smooth"});
        }
    </script>
{% endblock %}

{% block title %}
    {{ parent() }}
{% endblock %}

{% block header %}
    {{ parent() }}
{% endblock %}

{% block body %}
    {{ parent() }}
    <div class="row g-3">
        <div class="col-md-6 d-flex justify-content-center align-items-center button-container left">
            <a href="#btnInterieur">
                <button class="btn-custom">Intérieur/Indoor</button>
            </a>
        </div>
        <div class="col-md-6 d-flex justify-content-center align-items-center button-container right">
            <a href="#btnExterieur">
                <button class="btn-custom">Extérieur/Outdoor</button>
            </a>
        </div>
    </div>
    <div class="container-fluid product py-5 my-5">
        <div class="container py-5">
            <div class="section-title text-center mx-auto wow fadeInUp" data-wow-delay="0.1s" style="max-width: 500px;">
                <p class="fs-5 fw-medium fst-italic text-primary">Notre présence</p>
                <h1 class="display-6">Eolia possède plusieurs site sur Omaha Beach</h1>
            </div>
            <div class="owl-carousel product-carousel wow fadeInUp" data-wow-delay="0.5s">
                <a href="" class="d-block product-item rounded">
                    <img src="/SiteEolia/public/assets/img/eolia-CM.jpg" alt="">
                    <div class="bg-white shadow-sm text-center p-4 position-relative mt-n5 mx-4">
                        <h4 class="text-primary">Colleville-Sur-Mer</h4>
                        <span class="text-body">Restauration sur place ou à emporter</span>
                        <span class="text-body">Séminaires disponibles</span>
                    </div>
                </a>
                <a href="" class="d-block product-item rounded">
                    <img src="/SiteEolia/public/assets/img/eolia-SM.jpg" alt="">
                    <div class="bg-white shadow-sm text-center p-4 position-relative mt-n5 mx-4">
                        <h4 class="text-primary">Saint-Laurent-Sur-Mer</h4>
                        <span class="text-body">Restauration à emporter</span>
                        <span class="text-body">Séminaires disponibles</span>
                    </div>
                </a>
                <a href="" class="d-block product-item rounded">
                    <img src="/SiteEolia/public/assets/img/eolia_VM.jpg" alt="">
                    <div class="bg-white shadow-sm text-center p-4 position-relative mt-n5 mx-4">
                        <h4 class="text-primary">Vierville-Sur-Mer</h4>
                        <span class="text-body">Rien de disponible actuellement sur ce site</span>
                        <span class="text-body"></span>
                    </div>
                </a>
            </div>
        </div>
    </div>

        <div class="right">
            <div class="container-xxl py-5">
                <div class="container">
                    <div class="row g-5">
                        <div  class="col-md-6 col-lg-6 d-flex justify-content-center align-items-center ">
                                <div class="col-12 text-center wow fadeInUp" data-wow-delay="0.1s">
                                    <a href="https://youtu.be/dQw4w9WgXcQ?si=t6msZ-imTtbR8DEs" class="btn btn-primary rounded-pill py-3 px-5">RESERVATION EN LIGNE</a>
                                </div>
                        </div>
                        <div class="col-lg-6 wow fadeIn" data-wow-delay="0.5s">
                            <div class="section-title">
                                <p class="fs-5 fw-medium fst-italic text-primary">Bloowatch</p>
                                <h1 class="display-6">Notre méthode de réservation sportive</h1>
                            </div>
                            <div class="row g-3 mb-4">
                                <div class="col-sm-4">
                                    <img class="img-fluid bg-white w-100" src="/SiteEolia/public/assets/img/bloowatch.png" alt="">
                                </div>
                                <div class="col-sm-8">
                                    <h5>Un partenaire de confiance pour la sécurité de vos achats</h5>
                                    <p class="mb-0">Bloowatch est un logiciel visant à sécuriser vos réservations. Grâce à ses méthodes efficaces il combine rapidité et sûreté pour vos achats !</p>
                                </div>
                            </div>
                            <div class="border-top mb-4"></div>
                            <div class="row g-3">
                                <div class="col-sm-8">
                                    <h5>Du sport dans les meilleurs conditions </h5>
                                    <p class="mb-0">Chez Eolia, nous pensons que le sport devrait avant tout être un plaisir profitable dans les meilleurs conditions. Pour cela nous préparons les meilleurs séances pour vous !</p>
                                </div>
                                <div class="col-sm-4">
                                    <img class="img-fluid bg-white w-100" src="/SiteEolia/public/assets/img/sport_centre.jpg" alt="">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

{% endblock %}

{% block footer %}
        {{ parent() }}
{% endblock %}