<?php /** @var array $list; @var string $q */ ?>
<div class="p-5 md:p-8">
  <div class="flex items-start justify-between mb-6">
    <div>
      <div class="text-xs uppercase tracking-[0.3em] text-gold"><?= e(t('hub.customers.kicker')) ?></div>
      <h1 class="mt-1 text-2xl md:text-3xl font-display"><?= e(t('hub.customers.title')) ?></h1>
    </div>
  </div>

  <form class="mb-5" method="GET" action="<?= url('/hub/customers') ?>">
    <div class="relative max-w-xl">
      <svg class="absolute left-3 top-1/2 -translate-y-1/2 text-bone/30 w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
      <input name="q" value="<?= e($q) ?>"
             placeholder="<?= e(t('hub.customers.search_placeholder')) ?>"
             class="input pl-9" autofocus>
    </div>
  </form>

  <?php if (empty($list)): ?>
    <div class="bg-ink/40 border border-white/10 rounded-2xl p-16 text-center">
      <div class="text-4xl mb-3">👤</div>
      <div class="text-bone/40 text-sm"><?= e($q ? t('hub.customers.no_results') : t('hub.customers.empty')) ?></div>
    </div>
  <?php else: ?>
    <!-- Desktop table -->
    <div class="hidden md:block bg-ink/40 border border-white/10 rounded-2xl overflow-hidden">
      <table class="w-full text-sm">
        <thead class="bg-white/5 text-xs uppercase tracking-widest text-bone/40">
          <tr>
            <th class="text-left px-5 py-3"><?= e(t('form.name')) ?></th>
            <th class="text-left px-5 py-3"><?= e(t('form.email')) ?></th>
            <th class="text-left px-5 py-3"><?= e(t('form.phone')) ?></th>
          </tr>
        </thead>
        <tbody>
          <?php foreach ($list as $c): ?>
            <a href="<?= url('/hub/customers/' . e($c['id'])) ?>" class="contents">
              <tr class="border-t border-white/5 hover:bg-white/5 cursor-pointer" onclick="location.href='<?= url('/hub/customers/' . e($c['id'])) ?>'">
                <td class="px-5 py-3 font-medium"><?= e(trim(($c['first_name'] ?? '') . ' ' . ($c['last_name'] ?? ''))) ?></td>
                <td class="px-5 py-3 text-bone/50"><?= e($c['email'] ?? '') ?></td>
                <td class="px-5 py-3 text-bone/50"><?= e($c['phone'] ?? '') ?></td>
              </tr>
            </a>
          <?php endforeach; ?>
        </tbody>
      </table>
    </div>

    <!-- Mobile card list -->
    <div class="md:hidden space-y-2">
      <?php foreach ($list as $c): ?>
        <a href="<?= url('/hub/customers/' . e($c['id'])) ?>"
           class="flex items-center gap-3 bg-ink/50 border border-white/10 rounded-xl p-4 hover:border-white/20 transition-colors">
          <div class="w-10 h-10 rounded-full bg-gold/15 border border-gold/25 flex items-center justify-center text-gold font-semibold text-sm shrink-0">
            <?= strtoupper(substr($c['first_name'] ?? '?', 0, 1)) ?>
          </div>
          <div class="flex-1 min-w-0">
            <div class="font-medium text-sm truncate"><?= e(trim(($c['first_name'] ?? '') . ' ' . ($c['last_name'] ?? ''))) ?></div>
            <div class="text-xs text-bone/40 mt-0.5"><?= e($c['phone'] ?? $c['email'] ?? '') ?></div>
          </div>
          <svg class="w-4 h-4 text-bone/20 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
        </a>
      <?php endforeach; ?>
    </div>
  <?php endif; ?>
</div>
