<!DOCTYPE html>
<html lang="pt-br">
<head>
  <?php include_once 'application/views/imports/head.php' ?>
</head>
<body class="overflow-x-hidden">
  <?php include_once 'application/views/imports/header.php' ?>

  <section id="banner-swiper" class="swiper-container h-screen">
    <div class="swiper-wrapper">
      <?php foreach ($banners as $banner) : ?>
      <div class="swiper-slide grid place-items-center bg-cover bg-center bg-no-repeat" style="background: linear-gradient(rgba(0, 0, 0, .2), rgba(0, 0, 0, .2)), url(<?= base_url('assets/uploads/images/banners/' . $banner->image) ?>)">
        <div class="wrapper px-20 md:px-10">
          <div class="text-center md:text-left sm:w-2/3 md:w-1/2">
            <h2 class="text-white font-bold text-2xl md:text-4xl leading-relaxed md:leading-relaxed">
              <?= $banner->title ?>
            </h2>
            <p class="my-4 paragraph text-white">
              <?= $banner->description ?>
            </p>
            <?php if (!empty($banner->button_link)) : ?>
              <a href="<?= $banner->button_link ?>" <?= $banner->button_opens_blank ? 'target="_blank"' : '' ?>>
                <button class="btn btn--primary uppercase text-sm">Saiba mais</button>
              </a>
            <?php endif ?>
          </div>
        </div>
      </div>
      <?php endforeach ?>
    </div>
    <button class="absolute top-1/2 z-50 transform translate-x-1/2 left-0 banner-swiper-button-prev grid place-items-center w-8 h-8 bg-white rounded-full"><i data-feather="chevron-left"></i></button>
    <button class="absolute top-1/2 z-50 transform -translate-x-1/2 right-0 banner-swiper-button-next grid place-items-center w-8 h-8 bg-white rounded-full"><i data-feather="chevron-right"></i></button>
  </section>

  <section class="py-12 md:py-20">
    <div class="wrapper">
      <p class="text-sm text-gray-500">O que fazemos</p>
      <h2 class="mt-3 mb-1 text-xl uppercase font-bold">Nossos serviços</h2>
      <span style="height: 2px" class="block w-32 bg-primary"></span>
      <div class="mt-10 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-6">
        <?php foreach ($services as $service) : ?>
          <a href="<?= base_url('servico/' . $service->slug) ?>">
            <div>
              <div class="overflow-hidden">  
                <img class="h-40 w-full object-cover hover:scale-110 transform transition-transform duration-500" src="<?= base_url('assets/uploads/images/services/' . $service->image) ?>" alt="<?= $service->title ?>">
              </div>
              <div class="bg-white shadow-md p-6">
                <h3 class="hover:underline text-sm uppercase font-semibold"><?= $service->title ?></h3>
                <p class="text-sm text-gray-700 mt-2 leading-relaxed"><?= word_limiter(strip_tags($service->text), 20) ?></p>
              </div>
            </div>
          </a>
        <?php endforeach ?>
      </div>
    </div>
  </section>

  <section class="py-12 md:py-20">
    <div class="wrapper">
      <div class="md:w-1/3 mx-auto">
        <h2 class="mt-3 mb-1 text-lg font-semibold text-dark text-center">Procure a unidade mais próxima de você</h2>
        <p class="mt-2 text-sm text-gray-500 text-center">Digite uma cidade desejada, iremos informar a <span class="font-semibold">unidade mais próxima</span> de você.</p>
        <div class="mt-10 bg-white shadow-md rounded-sm p-6 border border-gray-100">
          <form action="<?= base_url('cidades-atendidas/pesquisar') ?>" method="get" class="grid grid-cols-1 gap-2">
            <div>
              <label class="text-gray-600 text-sm font-medium">Nome da cidade</label>
              <input type="text" name="city" class="text-sm mt-1 border border-gray-400 rounded-sm p-2 w-full">
            </div>
            <button class="btn btn--primary">Pesquisar</button>
          </form>
        </div>
      </div>
    </div>
  </section>

  <section class="py-12 md:py-20">
    <div class="wrapper">
      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div>
          <p class="text-sm text-gray-500">Serviço de qualidade</p>
          <h2 class="mt-3 mb-1 text-xl uppercase font-bold"><?= $whyChooseUs->title ?></h2>
          <span style="height: 2px" class="block w-32 bg-primary"></span>
          <p class="text-sm text-gray-700 mt-8 leading-relaxed md:w-2/3">
            <?= $whyChooseUs->text ?>
          </p>
          <?php foreach ($whyChooseUsItems as $item) : ?>
            <div class="mt-10 flex">
              <div class="mr-6">
                <div class="p-2 border border-primary text-primary">
                  <i data-feather="check-circle"></i>
                </div>
              </div>
              <div>
                <h3 class="font-semibold uppercase text-sm"><?= $item->title ?></h3>
                <p class="text-sm text-gray-700 mt-4 leading-relaxed md:w-2/3"><?= nl2br($item->text) ?></p>
              </div>
            </div>
          <?php endforeach ?>
        </div>
        <div>
          <div class="image-bg relative">
            <picture>
              <source class="h-96 w-full object-cover" media="(max-width: 640px)" srcset="<?= base_url('assets/uploads/images/pages-contents/' . $whyChooseUs->mobile_image) ?>">
              <img class="h-96 w-full object-cover" src="<?= base_url('assets/uploads/images/pages-contents/' . $whyChooseUs->image) ?>" alt="<?= $whyChooseUs->title ?>">
            </picture>
          </div>
        </div>
      </div>
    </div>
  </section>

  <?php if (count($testimonials) > 0) : ?>
    <section class="py-12 md:py-20">
      <div class="wrapper">
        <p class="text-sm text-gray-500">Nossos clientes</p>
        <h2 class="mt-3 mb-1 text-xl uppercase font-bold">Depoimentos</h2>
        <span style="height: 2px" class="block w-32 bg-primary"></span>
        <div id="testimonials-swiper" class="swiper-container mt-10">
          <div class="swiper-wrapper">
            <?php foreach ($testimonials as $testimonial) : ?>
            <div class="swiper-slide">
              <div class="text-sm leading-relaxed bg-gray-100 p-4">
                <?= $testimonial->message ?>
              </div>
              <div class="mt-4 flex items-center">
                <figure class="p-0.5 border-2 border-primary rounded-full h-16 w-16">
                  <img class="rounded-full w-full h-full object-cover" src="<?= base_url('assets/uploads/images/testimonials/' . $testimonial->author_image) ?>" alt="<?= $testimonial->author_name ?>">
                </figure>
                <div class="ml-4">
                  <h3 class="font-semibold text-dark text-sm"><?= $testimonial->author_name ?></h3>
                  <p class="text-sm text-gray-400 font-medium"><?= $testimonial->author_function ?></p>
                </div>
              </div>
            </div>
            <?php endforeach ?>
          </div>
        </div>
      </div>
    </section>
  <?php endif ?>

  <?php include_once 'application/views/imports/footer.php' ?>
  <?php include_once 'application/views/imports/scripts.php' ?>

  <script>
    window.addEventListener('load', function () {
      initTestimonialsSwiper()
      initBannerSwiper()
    })

    function initTestimonialsSwiper () {
      const swiper = new Swiper('#testimonials-swiper', {
        autoplay: {
          delay: 5000,
        },
        spaceBetween: 20,
        slidesPerView: 1,
        breakpoints: {
          768: {
            slidesPerView: 2,
            spaceBetween: 20,
          },
        },
        navigation: {
          nextEl: '#testimonials-swiper .testimonials-swiper-button-next',
          prevEl: '#testimonials-swiper .testimonials-swiper-button-prev'
        }
      })
    }

    function initBannerSwiper () {
      const swiper = new Swiper('#banner-swiper', {
        autoplay: {
          delay: 5000,
        },
        navigation: {
          nextEl: '#banner-swiper .banner-swiper-button-next',
          prevEl: '#banner-swiper .banner-swiper-button-prev'
        }
      })
    }
  </script>
</body>
</html>