<?php /** @var array $matches; @var string $q */ ?>
<div class="p-8 max-w-3xl">
  <div class="text-xs uppercase tracking-[0.3em] text-gold"><?= e(t('hub.walkin.kicker')) ?></div>
  <h1 class="mt-2 text-3xl font-display"><?= e(t('hub.walkin.title')) ?></h1>
  <p class="mt-2 text-bone/60"><?= e(t('hub.walkin.intro')) ?></p>

  <section class="mt-8 bg-ink/40 border border-white/10 rounded-xl p-6">
    <h2 class="text-sm uppercase tracking-widest text-gold mb-4"><?= e(t('hub.walkin.search_existing')) ?></h2>
    <form method="POST" action="<?= url('/hub/walkin/lookup') ?>" class="flex gap-2">
      <?= csrf_field() ?>
      <input name="q" value="<?= e($q) ?>" placeholder="<?= e(t('hub.walkin.search_placeholder')) ?>" class="input flex-1">
      <button class="btn-gold"><?= e(t('common.search')) ?></button>
    </form>
    <?php if (!empty($matches)): ?>
      <ul class="mt-4 divide-y divide-white/5 border border-white/10 rounded-md">
        <?php foreach ($matches as $m): ?>
          <li class="p-3 hover:bg-white/5" x-data="{ open: false }">
            <div class="flex items-center justify-between">
              <div>
                <div class="font-medium"><?= e(trim(($m['first_name'] ?? '') . ' ' . ($m['last_name'] ?? ''))) ?></div>
                <div class="text-xs text-bone/50"><?= e($m['email'] ?? '') ?> · <?= e($m['phone'] ?? '') ?></div>
              </div>
              <button type="button" @click="open = !open" class="text-gold text-xs hover:underline"><?= e(t('hub.walkin.use_existing')) ?> →</button>
            </div>
            <div x-show="open" x-cloak class="mt-3 pt-3 border-t border-white/10">
              <form method="POST" action="<?= url('/hub/walkin/create') ?>" class="grid grid-cols-2 gap-3">
                <?= csrf_field() ?>
                <input type="hidden" name="customer_id" value="<?= e($m['id']) ?>">
                <p class="col-span-2 text-[10px] uppercase tracking-widest text-gold"><?= e(t('hub.pin.staff_confirmation')) ?></p>
                <div><label class="label"><?= e(t('hub.pin.username')) ?></label><input name="username" required class="input" autocomplete="off"></div>
                <div><label class="label"><?= e(t('hub.pin.pin')) ?></label><input name="pin" type="password" inputmode="numeric" maxlength="20" required class="input text-center tracking-[0.5em]" autocomplete="off"></div>
                <div class="col-span-2"><button class="btn-gold w-full"><?= e(t('hub.walkin.start')) ?></button></div>
              </form>
            </div>
          </li>
        <?php endforeach; ?>
      </ul>
    <?php elseif ($q): ?>
      <p class="mt-4 text-bone/40 text-sm"><?= e(t('hub.walkin.no_matches')) ?></p>
    <?php endif; ?>
  </section>

  <section class="mt-6 bg-ink/40 border border-white/10 rounded-xl p-6">
    <h2 class="text-sm uppercase tracking-widest text-gold mb-4"><?= e(t('hub.walkin.new_customer')) ?></h2>
    <form method="POST" action="<?= url('/hub/walkin/create') ?>" class="grid grid-cols-2 gap-4">
      <?= csrf_field() ?>
      <div><label class="label"><?= e(t('form.first_name')) ?></label><input name="first_name" required class="input"></div>
      <div><label class="label"><?= e(t('form.last_name')) ?></label><input name="last_name" required class="input"></div>
      <div><label class="label"><?= e(t('form.email')) ?></label><input name="email" type="email" class="input"></div>
      <div><label class="label"><?= e(t('form.phone')) ?></label><input name="phone" required class="input"></div>

      <div class="col-span-2 pt-3 mt-2 border-t border-white/10">
        <p class="text-[10px] uppercase tracking-widest text-gold mb-3"><?= e(t('hub.pin.staff_confirmation')) ?></p>
        <div class="grid grid-cols-2 gap-3">
          <div><label class="label"><?= e(t('hub.pin.username')) ?></label><input name="username" required class="input" autocomplete="off"></div>
          <div><label class="label"><?= e(t('hub.pin.pin')) ?></label><input name="pin" type="password" inputmode="numeric" maxlength="20" required class="input text-center tracking-[0.5em]" autocomplete="off"></div>
        </div>
      </div>

      <div class="col-span-2"><button class="btn-gold"><?= e(t('hub.walkin.start')) ?></button></div>
    </form>
  </section>

  <div class="mt-6 text-xs text-bone/40 text-center">
    🔒 <?= e(t('hub.walkin.staff_only_notice')) ?>
  </div>
</div>
