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

{% block title %}Accueil{% endblock %}

{% block body %}
 
  <main class="main">

    <!-- Hero Section -->
    <section light-background">

      <style>
        .carousel-item img {
            width: 100%;
            height: auto;
            max-height: 100vh; /* Ensures the image slider doesn't overflow */
            object-fit: cover; /* Ensures images fit nicely */
        }
.slider-container {
  position: relative;
}

.content2 {
  position: absolute;
  top: 50%; /* Adjust to overlap with the slider */
  left: 50%;
  transform: translate(-50%, -50%); /* Center horizontally and slightly overlap */
  z-index: 10; /* Place content above the slider */
  background: rgba(255, 255, 255, 0.8); /* Light transparent background */
  padding: 20px; /* Add padding around the text */
  border-radius: 10px; /* Rounded corners for a modern look */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
  max-width: 90%; /* Ensure it doesn't exceed the screen size */
}
/* Appointment Div (Flying to Top Left, Clear White Background) */
        .appointment-style {
            position: absolute;
            top: 10%;
            right: 5%;
            width: 250px;
            height: 250px;
            padding: 20px;
            background-color: rgba(197, 227, 229, 0.8); /* Clear white with opacity */
            color: #0056b3; /* Beautiful blue color */
            border-radius: 15px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
            z-index: 20;
            opacity: 0;
            text-align: center;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            transition: all 1s ease-out;
            transform: translateX(100%); /* Start off-screen to the right */
        }

        .appointment-style.animate {
            opacity: 1;
            transform: translateX(0); /* Move to final position */
            top: 5%;
            left: 5%; /* Move to top-left on landing */
        }

        .appointment-style .icon {
            font-size: 30px;
            color: #333;
            margin-bottom: 15px;
        }

        .appointment-style h4 {
            font-size: 15px;
            font-weight: bold;
            color: #333;
        }

        .appointment-style p {
            font-size: 14px;
            margin-bottom: 15px;
            color: #333;
        }

        .appointment-style .btn {
            background-color: #fff;
            color: #333;
            border: none;
            padding: 8px 12px;
            border-radius: 5px;
            text-transform: uppercase;
            font-weight: bold;
            cursor: pointer;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            transition: background-color 0.3s ease, box-shadow 0.3s ease;
        }

        .appointment-style .btn:hover {
            background-color: #0056b3;
            color: white;
            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
        }

 

  /* Ensuring the buttons are on top of all other content */
  .carousel-control-prev, .carousel-control-next {
    position: absolute;
    top:4%!important;
    z-index: 1050; /* Bootstrap's z-index for carousels */
    width: 5%;
    height: 100%;
    background-color: transparent; /* Make background transparent */
    border: none; /* Remove any borders */
  }

  /* Customizing the icons to make them visible */
  .carousel-control-prev-icon, .carousel-control-next-icon {
    background-color: black; /* Customize the arrow color */
    border-radius: 50%;
    width: 50px;
    height: 50px;
    background-size: 30px; /* Adjust arrow size */
  }

  /* Hover effect to make the arrows more visible */
  .carousel-control-prev-icon:hover, .carousel-control-next-icon:hover {
    background-color: #444;
  }

  /* Ensuring the arrows are centered */
  .carousel-control-prev {
    left: 0;
  }

  .carousel-control-next {
    right: 0;
  }
</style>


</style>

    </style>
<div class="slider-container">
  <!-- Slider -->
  <div id="imageSlider" class="carousel slide" data-bs-ride="carousel" data-bs-interval="3000">
    <div class="carousel-inner">
      {% for images_home in images_homes %}
        <div class="carousel-item {% if loop.first %}active{% endif %}">
          <img src="{{ asset('upload/images/' ~ images_home.image ) }}" class="d-block w-100" alt="Image {{ loop.index }}">
        </div>
      {% endfor %}
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#imageSlider" data-bs-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#imageSlider" data-bs-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Next</span>
    </button>
  </div>
</div>

<!-- Flying Appointment Request (Updated) -->
	<div class="row">
        <div class="appointment-style col-md-12" id="flyingAppointment">
          <i class="bi bi-calendar-check icon"></i> <!-- Calendar Icon -->
          <h4>Besoin d'un rendez-vous ?</h4>
          <p>Réservez une consultation avec Dr. Nader Meziou dès maintenant!</p>
          <a href="{{ path('prise_de_rdv') }}" class="btn">Prendre rendez-vous</a>
        </div>
	</div>



<!-- Content -->
<div class="content row gy-4 posh-content">
  <div class="row gy-4">
    <div class="col-xl-4 d-flex align-items-stretch">
      <a href="{{ path('app_actes') }}" class="icon-link">
        <div class="icon-box" data-aos="zoom-out" data-aos-delay="300">
          <i class="bi bi-clipboard-data"></i>
          <h4>Chirurgie Orale</h4>
          <p>La chirurgie orale est une spécialité médico-chirurgicale dont le centre d'intérêt est la pathologie chirurgicale de la cavité buccale...</p>
        </div>
      </a>
    </div>
    <div class="col-xl-4 d-flex align-items-stretch">
      <a href="{{ path('app_actes') }}" class="icon-link">
        <div class="icon-box" data-aos="zoom-out" data-aos-delay="400">
          <i class="bi bi-gem"></i>
          <h4>Parodontologie</h4>
          <p>La parodontologie est la discipline qui se consacre à la prévention, au diagnostic et au traitement des maladies de la gencive et de l’os sous-jacent...</p>
        </div>
      </a>
    </div>
    <div class="col-xl-4 d-flex align-items-stretch">
      <a href="{{ path('app_actes') }}" class="icon-link">
        <div class="icon-box" data-aos="zoom-out" data-aos-delay="500">
          <i class="bi bi-inboxes"></i>
          <h4>Implantologie</h4>
          <p>L'implant dentaire est une racine artificielle qui se présente sous la forme de petite vis, fait en titane, matériau totalement biocompatible...</p>
        </div>
      </a>
    </div>
  </div>
</div>
<style>
@media (max-width: 768px) {
#flyingAppointment {
  position:static!important;
  margin:0 auto;
}
    .posh-content {
  position: static!important;
  
    }
}
section {
  padding:3px!important;
}
.posh-content {
  position: absolute;
  top: 50%;
  left: 0%;
  padding: 30px;
  /*background: rgba(255, 255, 255, 0.9); *//* Slightly more opaque for better readability */
  border-radius: 15px; /* Smooth, rounded corners for modern aesthetics */
  
  width: 100%; /* Controls the width to avoid stretching too far */
  text-align: center; /* Center-align the text */
  z-index: 999!important; /* Ensures the content is above the slider */
}

.icon-box {
opacity:0.7;
  
  padding: 20px;
  background: linear-gradient(145deg, #f7f7f7, #ffffff); /* Subtle gradient background for a premium look */
  border-radius: 10px;
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth hover animation */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.icon-box:hover {
  transform: translateY(-10px); /* Slight upward motion for interactivity */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* Stronger shadow on hover */
}

.icon-box h4 {
color:black;
  font-size: 1.5rem;
  font-weight: bold;
  color: #333; /* Refined dark gray for titles */
  margin-top: 15px;
}

.icon-box p {
color:black;
  font-size: 1rem;
  color: #555; /* Subtle gray for the paragraph */
  line-height: 1.6; /* Improves readability */
}

.icon-box i {
  
  font-size: 2.5rem;
  color: #6CC1D9; /* Elegant blue for icons */
  margin-bottom: 10px;
}

.icon-link {
  text-decoration: none; /* Removes underlines */
}

.icon-link:hover {
  text-decoration: none; /* Ensures hover state is clean */
}
.position-relative {
  overflow: hidden; /* Ensures content stays within the div */
  border-radius: 15px; /* Smooth rounded corners for a modern look */
  position: relative; /* Keeps child elements positioned correctly */
}
.piu {
  text-align:center;
}
.piu img {
  width:71%!important;
}
.position-relative img {
  width: 100%; /* Makes the image responsive */
  height: auto; /* Maintains aspect ratio */
  border-radius: 15px; /* Matches the parent div's rounded corners */
  transition: transform 0.3s ease, filter 0.3s ease; /* Adds smooth hover effect */
}

.position-relative img:hover {
  transform: scale(1.05); /* Slight zoom effect on hover */
  filter: brightness(90%); /* Darkens image slightly for contrast */
}

.pulsating-play-btn {
  position: absolute; /* Places the button over the image */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Centers the button */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  background: rgba(255, 255, 255, 0.8); /* Semi-transparent white circle */
  border-radius: 50%; /* Makes the button circular */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Adds shadow for a premium look */
  transition: transform 0.3s ease; /* Animates button on hover */
}

.pulsating-play-btn::after {
  content: '';
  position: absolute;
  width: 90px;
  height: 90px;
  border: 2px solid rgba(255, 255, 255, 0.6); /* Transparent white border */
  border-radius: 50%;
  animati


</style>
    </section><!-- /Hero Section -->
<!-- About Section -->
    <section id="about" class="about section">

      <div class="container">

        <div class="row gy-4 gx-5">

          <div class="col-lg-12 position-relative piu align-self-start" data-aos="fade-up" data-aos-delay="200">
            <img src="assets/img/about.jpg" class="img-fluid" alt="" >
            <a href="https://www.youtube.com/watch?v=KsPF2yqsFk4" class="glightbox pulsating-play-btn"></a>
          </div>

<div class="col-lg-12 col-12 content" data-aos="fade-up" data-aos-delay="100">
  <h3 style="font-weight:bold; text-align:center;">Les services du Dr Nader Meziou</h3>
  <ul class="row">
    <style>
      .chirurgie-dentaires-icon {
        font-size: 1.5rem !important; /* Set smaller icon size */
        color: #007BFF !important; /* Shiny blue color */
        margin-right: 10px; /* Space between the icon and text */
      }
    </style>
    {% for categactesmedical in categactesmedicaux %}
      <li class="col-md-6 col-12 d-flex align-items-start">
        <!-- Updated to use Chirurgie Dentaires icon -->
        {% set icons = ['fa-tooth', 'fa-teeth-open', 'fa-stethoscope', 'fa-x-ray', 'fa-syringe', 'fa-notes-medical'] %}
                            <i class="fa-solid {{ icons[loop.index0 % icons|length] }} me-2" style="color: #8BA8B5 !important; font-size: 1.5rem;"></i>
        <div>
          <h5>{{ categactesmedical.categorie }}</h5>
          <p style="text-align:justify;">{{ categactesmedical.description }}</p>
        </div>
      </li>
    {% endfor %}
  </ul>
</div>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">



        </div>

      </div>

    </section><!-- /About Section -->

    

   
    <!-- Faq Section -->
    
   

    

  </main>

  <script>
  window.addEventListener('load', function () {
    const flyingAppointment = document.getElementById('flyingAppointment');
    flyingAppointment.style.opacity = '0.7';
    setTimeout(function() {
        flyingAppointment.classList.add('animate');
    }, 1000);
  });
</script>

{% endblock %}