<?php
require_once __DIR__ . '/includes/data.php';
$designs = load_designs();
$groups  = group_by_series($designs);

// Pak een mooie foto voor de over-pagina
$portrait_img = null;
foreach ($designs as $d) {
  if (!empty($d['images']) && stripos($d['series'], 'Lemsteraak') !== false) {
    $portrait_img = design_img($d, 0); break;
  }
}
if (!$portrait_img) {
  foreach ($designs as $d) { if (!empty($d['images'])) { $portrait_img = design_img($d, 0); break; } }
}

$page_active = 'about';
$page_title  = $lang === 'en' ? 'About Martin' : 'Over Martin';
include __DIR__ . '/includes/header.php';
?>

<header class="page-head">
  <div class="container">
    <div class="eyebrow"><?= e(t('home.about.eyebrow')) ?></div>
    <h1><?= e(t('home.about.title')) ?> <em><?= e(t('home.about.title.em')) ?></em>.</h1>
    <p class="lede">
      <?= $lang === 'en'
          ? 'Martin Bekebrede has been designing vessels in the Dutch tradition since 1974 — more than ' . count($designs) . ' designs across ' . count($groups) . ' series.'
          : 'Martin Bekebrede ontwerpt sinds 1974 schepen in de Nederlandse traditie — ruim ' . count($designs) . ' ontwerpen, verdeeld over ' . count($groups) . ' series.' ?>
    </p>
  </div>
</header>

<section class="about" style="padding:100px 0">
  <div class="container">
    <div class="about-grid">
      <div class="about-img">
        <?php if ($portrait_img): ?>
          <img src="<?= e($portrait_img) ?>" alt="">
          <div class="frame-mark"><?= $lang === 'en' ? 'From the archive' : 'Uit het archief' ?></div>
        <?php endif; ?>
      </div>
      <div>
        <p class="intro"><?= e(t('home.about.intro')) ?></p>
        <p><?= e(t('home.about.p1')) ?></p>
        <p><?= e(t('home.about.p2')) ?></p>
        <p>
          <?= $lang === 'en'
              ? 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Continue with biographical text — education, early years, key collaborations, the founding of the studio. (This is placeholder text — to be filled in later.)'
              : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Hier komt later de uitgebreide biografische tekst — opleiding, eerste jaren, belangrijke samenwerkingen, de oprichting van het bureau. (Deze tekst is een placeholder — later in te vullen.)' ?>
        </p>
        <div class="signature">— Martin Bekebrede</div>
      </div>
    </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.' : '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.' : 'Internationale doorbraak.' ?></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.' : 'ontwerpen.' ?></div></div>
    </div>
  </div>
</section>

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