<!DOCTYPE html>
<html lang="pt-br">
<head>
  <?php include_once 'application/views/imports/head.php' ?>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lightgallery@2.1.8/css/lightgallery.min.css">
</head>
<body class="overflow-x-hidden">
  <?php include_once 'application/views/imports/header.php' ?>

  <section class="flex items-center w-screen py-12 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/intern-banners/' . $banner->image) ?>)">
    <div class="wrapper">
      <h1 class="text-white font-bold uppercase text-center text-xl md:text-4xl leading-relaxed">
        Quem somos
      </h1>
      <ul class="mt-4 text-sm flex justify-center items-center text-white">
        <li class="text-white font-semibold"><a href="<?= base_url() ?>">Início</a></li>
        <li class="mx-4">/</li>
        <li class="text-gray-300 font-semibold">Quem somos</li>
      </ul>
    </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">Quem somos</p>
          <h2 class="mt-3 mb-1 text-xl uppercase font-bold"><?= $about->title ?></h2>
          <span style="height: 2px" class="block w-32 bg-primary"></span>
          <div class="text-sm text-dark leading-7 mt-8 md:w-5/6">
            <p>
              <?= $about->text ?>
            </p>
          </div>
        </div>
        <div class="image-bg relative">
          <picture>
            <source class="rounded-sm h-96 w-full object-cover" media="(max-width: 640px)" srcset="<?= base_url('assets/uploads/images/pages-contents/' . $about->mobile_image) ?>">
            <img class="rounded-sm h-96 w-full object-cover" src="<?= base_url('assets/uploads/images/pages-contents/' . $about->image) ?>" alt="<?= $about->title ?>">
          </picture>
        </div>
      </div>
    </div>
  </section>

  <section class="py-12 md:py-20">
    <div class="wrapper grid grid-cols-1 md:grid-cols-3 gap-8">
      <div>
        <h2 class="mt-3 mb-1 text-xl uppercase font-bold">Missão</h2>
        <span style="height: 2px" class="block w-32 bg-primary"></span>
        <p class="text-sm text-gray-700 mt-4 leading-relaxed">
          <?= $companyInformations->mission_text ?>
        </p>
      </div>
      <div>
        <h2 class="mt-3 mb-1 text-xl uppercase font-bold">Visão</h2>
        <span style="height: 2px" class="block w-32 bg-primary"></span>
        <p class="text-sm text-gray-700 mt-4 leading-relaxed">
          <?= $companyInformations->vision_text ?>
        </p>
      </div>
      <div>
        <h2 class="mt-3 mb-1 text-xl uppercase font-bold">Valores</h2>
        <span style="height: 2px" class="block w-32 bg-primary"></span>
        <p class="text-sm text-gray-700 mt-4 leading-relaxed">
          <?= $companyInformations->values_text ?>
        </p>
      </div>
    </div>
  </section>

  <section class="py-12 md:py-20">
    <div class="wrapper">
      <div id="lightgallery" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
        <?php foreach ($images as $image) : ?>
          <a href="<?= base_url('assets/uploads/images/gallery/' . $image->file) ?>">
            <div class="overflow-hidden">
              <img class="w-full h-full object-cover hover:scale-110 transform transition-transform duration-500 cursor-pointer" alt="<?= $image->alt ?>" src="<?= base_url('assets/uploads/images/gallery/' . $image->file) ?>" />
            </div>
            <h3 class="mt-3 text-dark uppercase text-xs font-semibold"><?= $image->alt ?></h3>
          </a>
        <?php endforeach ?>
        <?php foreach ($videos as $video) : ?>
          <div href="<?= base_url('assets/uploads/videos/gallery/' . $video->file) ?>">
            <video width="100%" controls>
              <source src="<?= base_url('assets/uploads/videos/gallery/' . $video->file) ?>" type="video/mp4">
              Your browser does not support HTML video.
            </video>
            <h3 class="mt-3 text-dark uppercase text-xs font-semibold"><?= $video->alt ?></h3>
          </div>
        <?php endforeach ?>
      </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="rounded-sm h-96 w-full object-cover" media="(max-width: 640px)" srcset="<?= base_url('assets/uploads/images/pages-contents/' . $whyChooseUs->mobile_image) ?>">
              <img class="rounded-sm 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 include_once 'application/views/imports/footer.php' ?>
  <?php include_once 'application/views/imports/scripts.php' ?>
  
  <script src="https://cdn.jsdelivr.net/npm/lightgallery@2.1.8/lightgallery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/lightgallery@2.1.8/lightgallery.umd.min.js"></script>

  <script>
    window.addEventListener('load', function () {
      lightGallery(document.querySelector('#lightgallery'));
    })
  </script>
</body>
</html>