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

$id = (int)($_GET['id'] ?? 0);
$design = find_design_by_id($id);

if (!$design) {
  http_response_code(404);
  $page_title = '404';
  include __DIR__ . '/includes/header.php';
  echo '<header class="page-head"><div class="container"><h1>404 — '
    . ($lang === 'en' ? 'Design not found' : 'Ontwerp niet gevonden')
    . '</h1></div></header>';
  include __DIR__ . '/includes/footer.php';
  exit;
}

$serie = find_serie_by_slug($design['slug']);
$page_active = 'designs';
$page_title  = $design['name'];
include __DIR__ . '/includes/header.php';

// Specs we'd like to show with NL labels
$specsOrder = [
  'Categorie', 'Type', 'Lengte', 'Lengte met kluiverboom', 'Breedte',
  'Diepgang', 'Diepgang zwaard neer', 'Waterverplaatsing',
  'Materiaal', 'Bouwjaar', 'Motorvermogen',
  'Opp kluiver', 'Opp fok', 'Opp grootzeil', 'Opp totaal',
];
$fields = $design['fields'] ?? [];

// Andere modellen in dezelfde serie (max 3)
$related = [];
if ($serie) {
  foreach ($serie['models'] as $m) {
    if ($m['id'] !== $design['id']) $related[] = $m;
    if (count($related) >= 3) break;
  }
}
?>

<header class="detail-hero">
  <div class="container">
    <div class="breadcrumb">
      <a href="<?= e(url('ontwerpen.php')) ?>"><?= e(t('nav.designs')) ?></a> /
      <a href="<?= e(url('serie.php', ['slug' => $design['slug']])) ?>"><?= e($design['series']) ?></a> /
      <span><?= e($design['model']) ?></span>
    </div>
    <h1 class="detail-title"><?= e($design['name']) ?></h1>
    <div class="detail-subtitle">
      <?= e($design['type']) ?>
      <?php if (!empty($design['category'])): ?> · <?= e($design['category']) ?><?php endif; ?>
    </div>
  </div>
</header>

<section style="padding:0;background:var(--paper)">
  <div class="container">
    <div class="detail-grid">

      <div class="gallery">
        <?php if (!empty($design['images'])): $first = design_img($design, 0); ?>
          <div class="main"><img id="galleryMain" src="<?= e($first) ?>" alt="<?= e($design['name']) ?>"></div>
          <?php if (count($design['images']) > 1): ?>
            <div class="thumbs">
              <?php foreach ($design['images'] as $idx => $img):
                $path = design_img($design, $idx);
              ?>
                <img data-thumb data-full="<?= e($path) ?>" src="<?= e($path) ?>"
                     class="<?= $idx === 0 ? 'active' : '' ?>" alt="" loading="lazy">
              <?php endforeach; ?>
            </div>
          <?php endif; ?>
        <?php else: ?>
          <div style="aspect-ratio:4/3;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; ?>
      </div>

      <aside>
        <div class="specs">
          <h3><?= e(t('model.specs')) ?></h3>
          <dl>
            <?php
            $shown = 0;
            foreach ($specsOrder as $key) {
              if (!empty($fields[$key])) {
                echo '<div class="row"><dt>' . e($key) . '</dt><dd>' . e($fields[$key]) . '</dd></div>';
                $shown++;
              }
            }
            // Toon ook overige velden die niet in $specsOrder staan
            foreach ($fields as $k => $v) {
              if (!in_array($k, $specsOrder, true) && $k !== 'Naam' && trim((string)$v) !== '') {
                echo '<div class="row"><dt>' . e($k) . '</dt><dd>' . e($v) . '</dd></div>';
                $shown++;
              }
            }
            if ($shown === 0) {
              echo '<p style="grid-column:1/-1;color:var(--muted);font-size:14px">'
                . ($lang === 'en' ? 'No detailed specs on file.' : 'Geen specificaties beschikbaar.')
                . '</p>';
            }
            ?>
          </dl>
        </div>

        <?php if ($serie && count($serie['models']) > 1): ?>
          <div style="margin-top:32px">
            <a href="<?= e(url('serie.php', ['slug' => $design['slug']])) ?>" class="btn btn-small">
              <?= e(t('model.about_series')) ?> →
            </a>
          </div>
        <?php endif; ?>
      </aside>

    </div>
  </div>
</section>

<?php if (!empty($related)): ?>
<section class="portfolio-dark" style="padding:100px 0">
  <div class="container">
    <div class="eyebrow"><?= e(t('model.related')) ?></div>
    <h2 class="section-title" style="margin-bottom:50px"><?= e($design['series']) ?></h2>
    <div class="grid grid-3">
      <?php foreach ($related as $m):
        $img = !empty($m['images']) ? design_img($m, 0) : null;
      ?>
        <a class="card" href="<?= e(url('design.php', ['id' => $m['id']])) ?>">
          <div class="card-img">
            <?php if ($img): ?>
              <img src="<?= e($img) ?>" alt="<?= e($m['name']) ?>" loading="lazy">
            <?php endif; ?>
          </div>
          <div class="card-body">
            <div class="card-name"><?= e($m['name']) ?></div>
            <div class="card-meta"><?= e($m['type']) ?></div>
          </div>
        </a>
      <?php endforeach; ?>
    </div>
  </div>
</section>
<?php endif; ?>

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