<?php /** @var array $state */ $step = 5; include __DIR__ . '/_wizard-shell.php'; $td = $state['tattoo_details'] ?? []; ?>
<section class="max-w-2xl mx-auto px-6 pb-28">
  <h2 class="text-2xl font-display mb-6"><?= e(t('booking.step_5.title')) ?></h2>
  <form method="POST" action="<?= url('/book/step/5') ?>" class="space-y-4">
    <?= csrf_field() ?>
    <div>
      <label class="label"><?= e(t('booking.step_5.description')) ?></label>
      <textarea name="description" rows="4" class="input" placeholder="<?= e(t('booking.step_5.description_hint')) ?>"><?= e($td['description'] ?? '') ?></textarea>
    </div>
    <div class="grid grid-cols-2 gap-4">
      <div>
        <label class="label"><?= e(t('booking.step_5.size')) ?></label>
        <input name="size" value="<?= e($td['size'] ?? '') ?>" class="input" placeholder="e.g. 4 in">
      </div>
      <div>
        <label class="label"><?= e(t('booking.step_5.placement')) ?></label>
        <input name="placement" value="<?= e($td['placement'] ?? '') ?>" class="input" placeholder="e.g. forearm">
      </div>
    </div>
    <div class="mt-6 flex justify-between">
      <a href="<?= url('/book/step/4') ?>" class="text-sm text-bone/50 hover:text-bone">← <?= e(t('booking.back')) ?></a>
      <button class="btn-gold"><?= e(t('booking.next')) ?> →</button>
    </div>
  </form>
</section>
