@props(['slides' => []])
<div class="banner left-blue-gradient text-white">
  <div class="banner_swiper overflow-hidden">
    <div class="swiper-wrapper">
      @foreach ($slides as $index=>$slide)
        <div class="swiper-slide">
          <img src="{{ $slide }}" alt="Slide {{ $index + 1 }}">
        </div>
      @endforeach
    </div>
  </div>
  <header class="banner_top">
    <nav class="container navbar border-b border-secondary px-0">
      <div class="flex-1">
        <a href="/" class="flex items-center">
          <img src="https://www.apexpaversandpools.com/cdn/logos/company_logo_badge.png" alt="Apex Pavers and Pools"
            class="h-12 w-auto">
        </a>
      </div>
      <div class="flex-none">
        <ul class="menu menu-horizontal px-1">
          <li><a class="link-menu">Services</a></li>
          <li><a class="link-menu">Project Designer</a></li>
          <li><a class="link-menu">Gallery</a></li>
          <li><a class="link-menu">Financing</a></li>
          <li><a class="link-menu">Commercial</a></li>
          <li class="estimate">
            <details>
              <summary class="ropdown-menu btn btn-secondary rounded-none text-primary">Free Estimate
              </summary>
              <ul class="ml-0 mt-0 w-full rounded-t-none bg-base-100 p-2 text-primary">
                <li><a>Pavers</a></li>
                <li><a>Pools</a></li>
              </ul>
            </details>
          </li>
        </ul>
      </div>
    </nav>
  </header>
  <div {{ $attributes->merge(['class' => 'banner_body flex items-center justify-start']) }}>
    {{ $slot }}
  </div>
  <div class="banner__end">
    <div class="swiper-pagination"></div>
    <p class="slogan text-xl text-white">
      Creating <strong>Everlasting Moments & Majestic Experiences</strong>
    </p>
  </div>
</div>