<?php
$portfolioSlides = [];
$portfolioBaseDir = dirname(__DIR__, 2) . '/assets/images/portfolios';
$portfolioImageExtensions = ['webp', 'jpg', 'jpeg', 'png', 'jfif', 'gif'];

if (is_dir($portfolioBaseDir)) {
  $categories = scandir($portfolioBaseDir);
  sort($categories);

  foreach ($categories as $category) {
    if ($category === '.' || $category === '..') {
      continue;
    }

    $categoryPath = $portfolioBaseDir . '/' . $category;
    if (!is_dir($categoryPath)) {
      continue;
    }

    $images = [];
    foreach (scandir($categoryPath) as $file) {
      if ($file === '.' || $file === '..') {
        continue;
      }

      $extension = strtolower(pathinfo($file, PATHINFO_EXTENSION));
      if (in_array($extension, $portfolioImageExtensions, true)) {
        $images[] = $file;
      }
    }

    natsort($images);
    $images = array_slice(array_values($images), 0, 1);
    $categoryLabel = ucwords(str_replace('-', ' ', $category));

    foreach ($images as $file) {
      $portfolioSlides[] = [
        'src' => 'assets/images/portfolios/' . $category . '/' . $file,
        'alt' => $categoryLabel . ' book cover',
      ];
    }
  }
}
?>

<section class="portfolio">
  <div class="container-fluid portfolio-top-wrap">
    <div class="portfolio-top">
      <div class="portfolio-book portfolio-book--top-left">
        <img src="assets/images/port-top-left.webp" alt="Simply More book cover" class="portfolio-img">
      </div>

      <div class="portfolio-content text-center">
        <h2 class="portfolio-heading">
          A Portfolio Built<br>
          <em>On Purposeful Craft</em>
        </h2>
        <p class="portfolio-desc">Affordable ghostwriting and publishing services - all under one roof. Get re aaffordable ghostwriting and publishing services - all under one roof. Get ready to   under one roof. Get ready to  dy to become a successful author!</p>
        <a href="#" class="btn btn-primary btn-hero quote-modal-trigger">Publish Your Book</a>
      </div>

      <div class="portfolio-book portfolio-book--top-right">
        <img src="assets/images/port-top-right.webp" alt="LOUD book cover" class="portfolio-img">
      </div>
    </div>
  </div>

  <div class="container-fluid portfolio-slider-wrap">
    <div
      class="swiper portfolio-slider"
      data-gallery="<?php echo htmlspecialchars(json_encode($portfolioSlides), ENT_QUOTES, 'UTF-8'); ?>"
    >
      <div class="swiper-wrapper portfolio-slider-track">
        <?php foreach ($portfolioSlides as $slide): ?>
        <div class="swiper-slide">
          <a href="<?php echo htmlspecialchars($slide['src'], ENT_QUOTES, 'UTF-8'); ?>" data-fancybox="portfolio" data-type="image" data-caption="<?php echo htmlspecialchars($slide['alt'], ENT_QUOTES, 'UTF-8'); ?>" class="portfolio-lightbox">
            <img src="<?php echo htmlspecialchars($slide['src'], ENT_QUOTES, 'UTF-8'); ?>" alt="<?php echo htmlspecialchars($slide['alt'], ENT_QUOTES, 'UTF-8'); ?>" class="portfolio-img">
          </a>
        </div>
        <?php endforeach; ?>
      </div>
    </div>
  </div>
</section>
