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

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

{% block body %}
<style>
/* CSS personnalisé */
  .slider {
    width: 80%;
    max-width: 600px;
    position: relative;
  }
  .slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
  }
  .slide img {
    width: 100%;
    display: block;
    border-radius: 10px;
  }
  .slide.active {
    opacity: 1;
  }
</style>

<div class="flex-col lg:flex lg:flex-row lg:min-h-screen bg-tel-50 items-stretch mb-30 lg:mb-0">
    <div class="lg:relative md:w-full lg:w-1/2 text-left text-black top-24 pl-20 flex">
      <div>
        <h1 class="text-9xl lg:text-7xl font-bold pt-20 ">DOC AND GO</h1>
        <h2 class="text-5xl lg:text-3xl text-vert mt-4">La plateforme qu'il vous faut !</h2>
        <p class="text-gray-700 text-4xl lg:text-2xl pt-4 font-sans leading-relaxed">
          On démocratise l'accès aux soins médicaux en ligne. Nous offrons une solution innovante pour rendre la santé accessible à tous, sans barrières ni frontières.
        </p>
        <div class="max-w-2xl max-w-3xl lg:max-w-md mt-6">
                <label for="searchSpeciality" class="mb-2 lg:text-sm font-medium text-gray-900 sr-only">Rechercher</label>
                <div class="flex relative">
                    <div class="absolute mt-6 flex items-center ps-3 pointer-events-none">
                        <svg class="w-6 h-6 lg:w-4 lg:h-4 text-gray-700" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"/>
                        </svg>
                    </div>
                    <input type="text" id="searchInput" placeholder="Rechercher une spécialité..." class="block w-full py-4 ps-10 bg-white shadow text-4xl lg:text-lg text-gray-900 rounded-lg focus:outline-none" required />
                    <button id="clearBtn" title="Vider la recherche" class="btn btn-outline-secondary px-2 absolute end-2.5 mt-6 lg:mt-4 hover:text-red-500" type="button"><i class="fa-solid fa-x"></i></button>
                </div>
        </div>
      </div>
    </div>
    <div class="lg:ml-20">
    <div class="slider z-30">
        <div class="slides">
            <div class="slide"><img class="z-20 mb-28 lg:mb-0" src="{{ asset('images/doctor.png') }}" alt="Photo d'un docteur en blouse blanche" class="lg:w-full md:h-full md:object-cover"></div>
            <div class="slide"><img class="z-20 mb-28 lg:mb-0" src="{{ asset('images/image4.png') }}" alt="Photo d'un monsieur docteur" class="lg:w-full md:h-full md:object-cover"></div>
        </div>
    </div>
    {# Carte Roumanie Ordinateur #}
    <div class="hidden lg:flex justify-center">
      <img class="z-10 mt-3" style="margin-left:0em; width: 34em; height: auto;" src="{{ asset('images/carte.png') }}" alt="Carte de la roumanie">
    </div>
    </div>
</div>

{# Carte Roumanie Téléphone #}
<div class="flex justify-center lg:hidden mb-32">
  <img class="z-10 mt-3" style="margin-left:5em; width: 80%; height: auto;" src="{{ asset('images/carte.png') }}" alt="Carte de la roumanie">
</div>
                {% include("speciality/index.html.twig") %}

<section class="text-center mt-32 lg:mt-24">
  <h2 class="text-6xl lg:text-4xl font-bold my-8">Nos valeurs</h2>
  <div class="swiper-container overflow-hidden w-full my-20">
    <div class="swiper-wrapper">
      <div class="swiper-slide flex flex-col items-center p-4 w-screen">
        <img src="{{ asset('images/ear.png') }}" alt="Icone d'une oreille" class="w-40 lg:w-32 text-white p-6">
        <h6 class="my-3 text-5xl lg:text-lg font-bold">Attentif</h6>
        <hr class="h-1 rounded w-1/4 text-vert m-4 border border-vert bg-vert">
        <p class="text-4xl lg:text-base text-center text-gray-700 w-full">
          Nous sommes toujours attentifs à nos utilisateurs pour mieux répondre à leurs besoins et améliorer notre service.
        </p>
      </div>
      <div class="swiper-slide flex flex-col items-center p-4 ">
        <img src="{{ asset('images/balance.png') }}" alt="Icone d'une balance" class="w-40 lg:w-32 text-white p-6 ">
        <h6 class="my-3 text-5xl lg:text-lg font-bold">Int&eacutegrit&eacute</h6>
        <hr class="h-1 rounded w-1/4 text-vert m-4 border border-vert bg-vert">
        <p class="text-4xl lg:text-base text-center text-gray-700 w-full">
          Réfléchir sur notre intégrité nous pousse &agrave évaluer comment nos actions refl&egravetent nos valeurs d'honn&ecircteté et de moralité, formant la base de notre conduite au quotidien.
        </p>
      </div>
      <div class="swiper-slide flex flex-col items-center p-4">
        <img src="{{ asset('images/heart.png') }}" alt="Icone d'un coeur" class="w-40 lg:w-32 text-white p-6 ">
        <h6 class="my-3 text-5xl lg:text-lg font-bold">Passion</h6>
        <hr class="h-1 rounded w-1/4 text-vert m-4 border border-vert bg-vert">
        <p class="text-4xl lg:text-base text-center text-gray-700 w-full">
          Notre passion pour la santé nous pousse à offrir des soins de qualité et à mettre le cœur dans tout ce que nous faisons.
        </p>
      </div>
      <div class="swiper-slide flex flex-col items-center p-4">
        <img src="{{ asset('images/inclusive.png') }}" alt="Icone de mains qui se rejoignent" class="w-40 lg:w-32 text-white p-6 ">
        <h6 class="my-3 text-5xl lg:text-lg font-bold">Inclusion</h6>
        <hr class="h-1 rounded w-1/4 text-vert m-4 border border-vert bg-vert">
        <p class="text-4xl lg:text-base text-center text-gray-700:w-full">
          Nous croyons en l'inclusion et faisons tout notre possible pour rendre nos services accessibles à tous, sans exception.
        </p>
      </div>
      <div class="swiper-slide flex flex-col items-center p-4">
        <img src="{{ asset('images/eye.png') }}" alt="Icone d'un oeil barré" class="w-40 lg:w-32 text-white p-6 ">
        <h6 class="my-3 text-5xl lg:text-lg font-bold">Accessibilité</h6>
        <hr class="h-1 rounded w-1/4 text-vert m-4 border border-vert bg-vert">
        <p class="text-4xl lg:text-base text-center text-gray-700 w-full">
          Nous nous engageons à rendre notre plateforme accessible aux personnes non voyantes grâce à des technologies adaptées.
        </p>
      </div>
    </div>
  </div>
  <a href="{{ path('app_valeur') }}" class="text-4xl lg:text-base p-4 lg:p-2 text-white rounded bg-vert shadow font-bold my-6 hover:bg-teal-800 mt-20 lg:mt-12">En savoir plus</a>
</section>

<section style="position: relative;top: 4em;" class="my-32 lg:mt-52">
  <div style="margin-bottom:2em;">
    <h2 class="text-center text-6xl lg:text-4xl font-bold mb-12 lg:my-8">Votre avis compte</h2>
{% if not app.user %}
        <div class="text-center mb-10"><a href="{{ path('app_review_new') }}" class="rounded p-4 lg:p-2 bg-vert text-white shadow text-4xl lg:text-lg font-bold">Vous souhaitez nous aider ? Donnez votre avis</a></div>
    {% else %}
        {% if app.user.review is empty %}
        <div class="text-center mb-10"><a href="{{ path('app_review_new') }}" class="rounded p-4 lg:p-2 bg-vert text-white shadow text-4xl lg:text-lg font-bold">Vous souhaitez nous aider ? Donnez votre avis</a></div>
        {% else %}
        <div class="text-center mb-10">
        <a href="{{ path('app_review_edit', {'id': app.user.review.id}) }}" class="rounded p-4 lg:p-2 text-white bg-vert shadow text-4xl lg:text-lg  font-bold"><i class="fa-solid fa-pen"></i> Modifier mon avis</a>
        </div>
        {% endif %}
    {% endif %}

{{ render(controller('App\\Controller\\ReviewController::index')) }}
  </div>
{{ render(controller('App\\Controller\\ChatBotController::index')) }}
</section>

<script>
  let slideIndex = 0;

  function showSlides() {
    const slides = document.querySelectorAll('.slide');
    slides.forEach((slide, index) => {
      slide.classList.remove('active');
    });
    slides[slideIndex].classList.add('active');
    slideIndex = (slideIndex + 1) % slides.length;
    setTimeout(showSlides, 3000); // Change image every 3 seconds
  }

  document.addEventListener('DOMContentLoaded', showSlides);

  document.addEventListener('DOMContentLoaded', function () {
    var swiper = new Swiper('.swiper-container', {
      slidesPerView: 1,
      spaceBetween: 10,
      loop: true,
      autoplay: {
        delay: 3000,
        disableOnInteraction: false,
      },
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      breakpoints: {
        320: {
          slidesPerView: 1, // 1 slide on small screens
          spaceBetween: 20,
        },
        768: {
          slidesPerView: 2,
          spaceBetween: 30,
        },
        1024: {
          slidesPerView: 3,
          spaceBetween: 30,
        },
        1280: {
          slidesPerView: 3,
          spaceBetween: 40,
        },
      },
    });
  });
</script>

{% endblock %}