<?php
require_once __DIR__ . '/includes/data.php';

$designs = load_designs();
$groups  = group_by_series($designs);

// Verzamel unieke categorieën voor filter
$cats = [];
foreach ($designs as $d) {
  if (!empty($d['category']) && !in_array($d['category'], $cats, true)) $cats[] = $d['category'];
}
sort($cats);

$page_active = 'designs';
$page_title  = $lang === 'en' ? 'Designs' : 'Ontwerpen';
include __DIR__ . '/includes/header.php';
?>

<header class="page-head">
  <div class="container">
    <div class="eyebrow"><?= e(t('designs.page.eyebrow')) ?></div>
    <h1><?= e(t('designs.page.title')) ?> <em><?= e(t('designs.page.title.em')) ?></em>.</h1>
    <p class="lede"><?= e(t('designs.page.lede')) ?> <?= count($designs) ?> <?= e(t('designs.count')) ?>, <?= count($groups) ?> <?= $lang === 'en' ? 'series' : 'series' ?>.</p>
  </div>
</header>

<div class="filterbar">
  <label for="searchInput"><?= $lang === 'en' ? 'Search' : 'Zoeken' ?></label>
  <input type="search" id="searchInput" placeholder="<?= e(t('designs.filter.search')) ?>">
  <label for="catFilter"><?= $lang === 'en' ? 'Category' : 'Categorie' ?></label>
  <select id="catFilter">
    <option value=""><?= e(t('designs.filter.all')) ?></option>
    <?php foreach ($cats as $c): ?>
      <option value="<?= e($c) ?>"><?= e(ucfirst($c)) ?></option>
    <?php endforeach; ?>
  </select>
  <span class="count"><span id="resultCount"><?= count($groups) ?></span> <?= $lang === 'en' ? 'series' : 'series' ?></span>
</div>

<section style="padding:80px 0;background:var(--paper)">
  <div class="container">
    <div class="grid grid-3" id="seriesGrid">
      <?php foreach ($groups as $g):
        $cover = $g['cover'];
        $coverPath = $cover ? 'images/designs/' . $cover['id'] . '/' . rawurlencode($cover['file']) : null;
        $modelsList = array_map(fn($m) => $m['model'], $g['models']);
      ?>
        <a class="card card-light" href="<?= e(url('serie.php', ['slug' => $g['slug']])) ?>"
           data-card
           data-name="<?= e($g['name']) ?>"
           data-categories="<?= e(implode('|', $g['categories'])) ?>"
           data-models="<?= e(implode('|', $modelsList)) ?>">
          <div class="card-img">
            <?php if ($coverPath): ?>
              <img src="<?= e($coverPath) ?>" alt="<?= e($g['name']) ?>" loading="lazy">
            <?php else: ?>
              <div style="aspect-ratio:16/10;display:grid;place-items:center;background:var(--canvas);color:var(--muted);font-size:12px;letter-spacing:.2em;text-transform:uppercase"><?= e(t('model.no_image')) ?></div>
            <?php endif; ?>
            <?php if ($g['length_min'] !== null): ?>
              <div class="card-tag">
                <?= e(rtrim(rtrim(number_format($g['length_min'], 1, '.', ''), '0'), '.')) ?> — <?= e(rtrim(rtrim(number_format($g['length_max'], 1, '.', ''), '0'), '.')) ?> m
              </div>
            <?php endif; ?>
          </div>
          <div class="card-body">
            <div class="card-name"><?= e($g['name']) ?></div>
            <div class="card-meta"><?= e(implode(', ', $g['categories'])) ?></div>
            <span class="card-count"><?= count($g['models']) ?> <?= e(t(count($g['models']) === 1 ? 'designs.count.one' : 'designs.count')) ?> →</span>
          </div>
        </a>
      <?php endforeach; ?>
    </div>
    <div id="noResults" style="display:none;text-align:center;padding:80px 20px;color:var(--muted)">
      <?= e(t('designs.no_results')) ?>
    </div>
  </div>
</section>

<?php include __DIR__ . '/includes/footer.php'; ?>
