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

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

// Voor de "uitgelichte series" kiezen we de 4 series met de meeste modellen
$featured = array_slice($groups, 0, 4, true);

// Hero-afbeelding: eerste design dat een foto heeft
$hero_design = null;
foreach ($designs as $d) {
  if (!empty($d['images']) && stripos($d['series'], 'Noordkaper') !== false) {
    $hero_design = $d; break;
  }
}
if (!$hero_design) {
  foreach ($designs as $d) { if (!empty($d['images'])) { $hero_design = $d; break; } }
}
$hero_img = $hero_design ? design_img($hero_design, 0) : null;

// Voor "over"-sectie: een tweede mooie foto
$about_img = null;
foreach ($designs as $d) {
  if ($d['id'] !== ($hero_design['id'] ?? null) && !empty($d['images'])) {
    $about_img = design_img($d, 0);
    break;
  }
}

$page_active = 'home';
$page_title  = '';
include __DIR__ . '/includes/header.php';
?>

<section class="hero" style="padding:0">
  <div class="hero-img">
    <?php if ($hero_img): ?>
      <img src="<?= e($hero_img) ?>" alt="<?= e($hero_design['title'] ?? '') ?>">
    <?php endif; ?>
  </div>
  <div class="hero-content">
    <div class="hero-eyebrow"><?= e(t('home.tagline')) ?></div>
    <h1>
      <?= e(t('home.h1.line1')) ?><br>
      <em><?= e(t('home.h1.em')) ?></em><br>
      <?= e(t('home.h1.line2')) ?>
    </h1>
    <div class="hero-tag"><?= e(t('home.hero.tag')) ?></div>
  </div>
</section>

<section class="about">
  <div class="container">
    <div class="about-grid">
      <div class="about-img">
        <?php if ($about_img): ?>
          <img src="<?= e($about_img) ?>" alt="">
          <div class="frame-mark">Fig. 01</div>
        <?php endif; ?>
      </div>
      <div>
        <div class="eyebrow"><?= e(t('home.about.eyebrow')) ?></div>
        <h2 class="section-title"><?= e(t('home.about.title')) ?> <em><?= e(t('home.about.title.em')) ?></em>.</h2>
        <p class="intro"><?= e(t('home.about.intro')) ?></p>
        <p><?= e(t('home.about.p1')) ?></p>
        <p><?= e(t('home.about.p2')) ?></p>
        <div class="signature">— Martin Bekebrede</div>
        <div class="stats">
          <div><div class="stat-num"><?= count($designs) ?>+</div><div class="stat-label"><?= $lang === 'en' ? 'Designs' : 'Ontwerpen' ?></div></div>
          <div><div class="stat-num"><?= date('Y') - 1974 ?></div><div class="stat-label"><?= $lang === 'en' ? 'Years active' : 'Jaar werkzaam' ?></div></div>
          <div><div class="stat-num"><?= count($groups) ?></div><div class="stat-label"><?= $lang === 'en' ? 'Vessel series' : 'Scheepsseries' ?></div></div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="portfolio-dark">
  <div class="container center">
    <div class="eyebrow center"><?= e(t('home.designs.eyebrow')) ?></div>
    <h2 class="section-title"><?= e(t('home.designs.title')) ?> <em><?= e(t('home.designs.title.em')) ?></em>.</h2>
    <p class="section-lede"><?= e(t('home.designs.lede')) ?></p>
    <div class="grid grid-2" style="text-align:left">
      <?php $i = 1; foreach ($featured as $g):
        $cover = $g['cover'];
        $coverPath = $cover ? 'images/designs/' . $cover['id'] . '/' . rawurlencode($cover['file']) : null;
      ?>
        <a class="card" href="<?= e(url('serie.php', ['slug' => $g['slug']])) ?>">
          <div class="card-img">
            <?php if ($coverPath): ?>
              <img src="<?= e($coverPath) ?>" alt="<?= e($g['name']) ?>">
            <?php endif; ?>
            <div class="card-num"><?= sprintf('Nº %02d', $i++) ?></div>
          </div>
          <div class="card-body">
            <div class="card-name"><?= e($g['name']) ?></div>
            <div class="card-meta">
              <?php if ($g['length_min'] !== null): ?>
                <?= e(rtrim(rtrim(number_format($g['length_min'], 1, '.', ''), '0'), '.')) ?>
                — <?= e(rtrim(rtrim(number_format($g['length_max'], 1, '.', ''), '0'), '.')) ?> m
              <?php endif; ?>
              <?php if (!empty($g['categories'])): ?>
                · <?= e(implode(', ', $g['categories'])) ?>
              <?php endif; ?>
            </div>
            <div class="card-text">
              <?= count($g['models']) ?> <?= e(t(count($g['models']) === 1 ? 'designs.count.one' : 'designs.count')) ?>
            </div>
          </div>
        </a>
      <?php endforeach; ?>
    </div>
    <div style="margin-top:60px">
      <a href="<?= e(url('ontwerpen.php')) ?>" class="btn btn-ghost"><?= e(t('home.designs.cta')) ?></a>
    </div>
  </div>
</section>

<section style="background:var(--paper)">
  <div class="container center">
    <div class="eyebrow center"><?= e(t('home.history.eyebrow')) ?></div>
    <h2 class="section-title"><?= e(t('home.history.title')) ?> <em><?= e(t('home.history.title.em')) ?></em> <?= e(t('home.history.title.suffix')) ?></h2>
    <div class="timeline">
      <div><div class="y">1974</div><div class="t"><?= $lang === 'en' ? 'First design' : 'Eerste ontwerp' ?></div><div class="d"><?= $lang === 'en' ? 'The studio opens its doors in the Netherlands.' : 'Begin van de praktijk in Nederland.' ?></div></div>
      <div><div class="y">1985</div><div class="t">Noordkaper</div><div class="d"><?= $lang === 'en' ? 'The signature series is born.' : 'Lancering van de bekendste lijn.' ?></div></div>
      <div><div class="y">2000</div><div class="t">Steeler</div><div class="d"><?= $lang === 'en' ? 'International breakthrough with steel offshore yachts.' : 'Internationale doorbraak met stalen offshore-jachten.' ?></div></div>
      <div><div class="y"><?= date('Y') ?></div><div class="t"><?= $lang === 'en' ? 'Today' : 'Vandaag' ?></div><div class="d"><?= count($designs) ?>+ <?= $lang === 'en' ? 'designs, still active.' : 'ontwerpen, nog altijd actief.' ?></div></div>
    </div>
  </div>
</section>

<section style="background:var(--canvas)">
  <div class="container">
    <div class="contact-card">
      <div class="eyebrow center"><?= e(t('home.contact.eyebrow')) ?></div>
      <h3 style="margin-bottom:18px"><?= e(t('home.contact.title')) ?> <em><?= e(t('home.contact.title.em')) ?></em><?= e(t('home.contact.title.suffix')) ?></h3>
      <p style="text-align:center;color:var(--muted);margin-bottom:32px;max-width:560px;margin-left:auto;margin-right:auto">
        <?= e(t('home.contact.intro')) ?>
      </p>
      <div style="text-align:center">
        <a href="<?= e(url('contact.php')) ?>" class="btn"><?= e(t('home.contact.cta')) ?></a>
      </div>
    </div>
  </div>
</section>

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