<?php
require_once __DIR__ . '/includes/data.php';
$items = load_forsale();

$page_active = 'forsale';
$page_title  = $lang === 'en' ? 'For sale' : 'Te koop';
include __DIR__ . '/includes/header.php';
?>

<header class="page-head">
  <div class="container">
    <div class="eyebrow"><?= e(t('nav.forsale')) ?></div>
    <h1><?= e(t('forsale.page.title')) ?></h1>
    <p class="lede"><?= e(t('forsale.page.lede')) ?></p>
  </div>
</header>

<section style="background:var(--paper)">
  <div class="container">
    <?php if (empty($items)): ?>
      <div style="text-align:center;padding:80px 20px;color:var(--muted);font-family:'Lora',serif;font-style:italic;font-size:22px">
        <?= e(t('forsale.empty')) ?>
      </div>
    <?php else: ?>
      <div class="grid grid-2">
        <?php foreach ($items as $item):
          $img = !empty($item['images'][0]) ? 'uploads/' . rawurlencode($item['images'][0]) : null;
        ?>
          <div class="card card-light">
            <div class="card-img">
              <?php if ($img): ?>
                <img src="<?= e($img) ?>" alt="<?= e($item['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 (!empty($item['price'])): ?>
                <div class="card-tag" style="left:14px;right:auto;top:14px;bottom:auto;color:var(--ochre);background:var(--paper);border-color:var(--ochre)"><?= e($item['price']) ?></div>
              <?php endif; ?>
            </div>
            <div class="card-body">
              <div class="card-name" style="font-size:26px"><?= e($item['name']) ?></div>
              <div class="card-meta">
                <?= e($item['type'] ?? '') ?>
                <?php if (!empty($item['year'])): ?> · <?= e(t('forsale.year')) ?> <?= e($item['year']) ?><?php endif; ?>
                <?php if (!empty($item['length'])): ?> · <?= e($item['length']) ?><?php endif; ?>
              </div>
              <?php if (!empty($item['description'])): ?>
                <p class="card-text" style="margin-bottom:18px"><?= e($item['description']) ?></p>
              <?php endif; ?>
              <?php if (!empty($item['broker'])): ?>
                <div style="display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:16px;margin-top:16px">
                  <div>
                    <div style="font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-bottom:4px"><?= e(t('forsale.broker')) ?></div>
                    <div style="font-family:'Lora',serif;font-weight:500;font-size:15px"><?= e($item['broker']) ?></div>
                  </div>
                  <?php if (!empty($item['broker_url'])): ?>
                    <a href="<?= e($item['broker_url']) ?>" target="_blank" rel="noopener" style="font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--ochre)"><?= e(t('forsale.view')) ?></a>
                  <?php endif; ?>
                </div>
              <?php endif; ?>
            </div>
          </div>
        <?php endforeach; ?>
      </div>
    <?php endif; ?>
  </div>
</section>

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