<?php
/** @var int $step  current step number 1..6 */
$labels = [
  1 => t('booking.steps.artist'),
  2 => t('booking.steps.datetime'),
  3 => t('booking.steps.info'),
  4 => t('booking.steps.age'),
  5 => t('booking.steps.tattoo'),
  6 => t('booking.steps.review'),
];
?>
<section class="pt-32 pb-12 max-w-4xl mx-auto px-6">
  <div class="text-xs uppercase tracking-[0.3em] text-gold"><?= e(t('booking.kicker')) ?></div>
  <h1 class="mt-4 text-4xl md:text-5xl font-display"><?= e(t('booking.title')) ?></h1>
  <p class="mt-4 text-bone/60"><?= e(t('booking.subtitle')) ?></p>

  <div class="mt-10 flex items-center gap-1 text-xs">
    <?php foreach ($labels as $n => $label): ?>
      <div class="flex-1">
        <div class="h-1 rounded-full <?= $n <= $step ? 'bg-gold' : 'bg-white/10' ?>"></div>
        <div class="mt-2 uppercase tracking-widest <?= $n === $step ? 'text-gold' : 'text-bone/40' ?>">
          <?= $n ?>. <?= e($label) ?>
        </div>
      </div>
      <?php if ($n < 6): ?><div class="w-1"></div><?php endif; ?>
    <?php endforeach; ?>
  </div>
</section>
