<?php /** @var array $state */ $step = 4; include __DIR__ . '/_wizard-shell.php'; $gi = $state['general_info'] ?? []; ?>
<section class="max-w-2xl mx-auto px-6 pb-28">
  <h2 class="text-2xl font-display mb-6"><?= e(t('booking.step_4.title')) ?></h2>
  <form method="POST" action="<?= url('/book/step/4') ?>" x-data="{ over: <?= !empty($gi['over_18']) ? 'true' : 'null' ?> }">
    <?= csrf_field() ?>
    <div class="space-y-4">
      <div>
        <label class="label"><?= e(t('form.dob')) ?></label>
        <input type="date" name="date_of_birth" value="<?= e($gi['date_of_birth'] ?? '') ?>" class="input">
      </div>
      <div class="border border-white/10 rounded-lg p-5 bg-ink/40">
        <div class="text-sm text-bone/80 mb-3"><?= e(t('booking.step_4.over_18_question')) ?></div>
        <div class="flex gap-3">
          <label class="flex-1">
            <input type="radio" name="over_18" value="1" class="sr-only" :checked="over === true" @change="over = true">
            <div :class="over === true ? 'border-gold bg-gold/10 text-gold' : 'border-white/10'"
                 class="border rounded-md px-4 py-3 text-center cursor-pointer"><?= e(t('common.yes')) ?></div>
          </label>
          <label class="flex-1">
            <input type="radio" name="over_18" value="" class="sr-only" :checked="over === false" @change="over = false">
            <div :class="over === false ? 'border-red-400 bg-red-400/10 text-red-200' : 'border-white/10'"
                 class="border rounded-md px-4 py-3 text-center cursor-pointer"><?= e(t('common.no')) ?></div>
          </label>
        </div>
      </div>
      <div x-show="over === false" x-transition class="border border-red-500/40 bg-red-500/5 rounded-lg p-5" style="display:none">
        <h3 class="text-red-300 font-display text-lg mb-2"><?= e(t('booking.step_4.guardian_title')) ?></h3>
        <p class="text-bone/70 text-sm leading-relaxed"><?= e(t('booking.step_4.guardian_body')) ?></p>
        <label class="flex items-start gap-2 mt-4 text-sm">
          <input type="checkbox" name="guardian_ack" value="1" class="mt-1">
          <span><?= e(t('booking.step_4.guardian_ack')) ?></span>
        </label>
      </div>
    </div>
    <div class="mt-8 flex justify-between">
      <a href="<?= url('/book/step/3') ?>" 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>
