<?php /** @var array $matches; @var string $q; @var array $artists */ ?>
<div class="p-5 md:p-8 max-w-3xl">
  <a href="<?= url('/hub/appointments') ?>" class="text-xs text-bone/50 hover:text-bone flex items-center gap-1 mb-4">
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 18l-6-6 6-6"/></svg>
    <?= e(t('hub.back_to_list')) ?>
  </a>

  <div class="text-xs uppercase tracking-[0.3em] text-gold"><?= e(t('hub.new_appt.kicker')) ?></div>
  <h1 class="mt-1 text-2xl md:text-3xl font-display mb-6"><?= e(t('hub.new_appt.title')) ?></h1>

  <!-- ── STEP 1: Search existing customer ── -->
  <section class="bg-ink/50 border border-white/10 rounded-2xl p-5 mb-4">
    <h2 class="text-xs uppercase tracking-widest text-gold mb-3"><?= e(t('hub.new_appt.returning')) ?></h2>
    <form method="POST" action="<?= url('/hub/new-appointment/lookup') ?>" class="flex gap-2">
      <?= csrf_field() ?>
      <input name="q" value="<?= e($q) ?>"
             placeholder="<?= e(t('hub.walkin.search_placeholder')) ?>"
             class="input flex-1" autofocus>
      <button class="btn-gold px-4 py-2.5 text-xs"><?= e(t('common.search')) ?></button>
    </form>

    <?php if (!empty($matches)): ?>
      <ul class="mt-3 divide-y divide-white/5 border border-white/10 rounded-xl overflow-hidden">
        <?php foreach ($matches as $m): ?>
          <li x-data="{ open: false }" class="bg-ink/30">
            <div class="flex items-center justify-between px-4 py-3">
              <div>
                <div class="font-medium text-sm"><?= e(trim(($m['first_name'] ?? '') . ' ' . ($m['last_name'] ?? ''))) ?></div>
                <div class="text-xs text-bone/40 mt-0.5"><?= e($m['email'] ?? '') ?> <?= $m['phone'] ? ('· ' . e($m['phone'])) : '' ?></div>
              </div>
              <button type="button" @click="open = !open"
                      class="text-xs text-gold hover:text-gold/70 font-medium transition-colors">
                <?= e(t('hub.new_appt.use_customer')) ?> →
              </button>
            </div>
            <div x-show="open" x-cloak class="border-t border-white/5 px-4 pb-4 pt-3">
              <form method="POST" action="<?= url('/hub/new-appointment/create') ?>">
                <?= csrf_field() ?>
                <input type="hidden" name="customer_id" value="<?= e($m['id']) ?>">
                <?php include MAT_ROOT . '/src/Views/partials/new-appt-fields.php'; ?>
              </form>
            </div>
          </li>
        <?php endforeach; ?>
      </ul>
    <?php elseif ($q): ?>
      <p class="mt-3 text-bone/40 text-sm"><?= e(t('hub.walkin.no_matches')) ?></p>
    <?php endif; ?>
  </section>

  <!-- ── STEP 2: New customer ── -->
  <section class="bg-ink/50 border border-white/10 rounded-2xl p-5">
    <h2 class="text-xs uppercase tracking-widest text-gold mb-3"><?= e(t('hub.new_appt.new_customer')) ?></h2>
    <form method="POST" action="<?= url('/hub/new-appointment/create') ?>">
      <?= csrf_field() ?>
      <div class="grid grid-cols-2 gap-3 mb-4">
        <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" class="input"></div>
      </div>
      <?php include MAT_ROOT . '/src/Views/partials/new-appt-fields.php'; ?>
    </form>
  </section>
</div>
