<?php
/** @var array $state; @var array $artists */
$step = 1;
include __DIR__ . '/_wizard-shell.php';
// Build id→name map for display
$nameMap = [];
foreach ($artists as $a) {
    $nameMap[(string)($a['id'] ?? '')] = $a['display_name'] ?? '';
}
?>
<section class="max-w-4xl mx-auto px-6 pb-28">
  <form method="POST" action="<?= url('/book/step/1') ?>"
        x-data="{ picked: <?= htmlspecialchars(json_encode((string)($state['artist_id'] ?? '')), ENT_QUOTES) ?>, names: <?= htmlspecialchars(json_encode($nameMap), ENT_QUOTES) ?> }">
    <?= csrf_field() ?>
    <input type="hidden" name="artist_id" :value="picked">

    <h2 class="text-2xl font-display mb-6"><?= e(t('booking.step_1.pick_artist')) ?></h2>

    <div class="grid sm:grid-cols-2 md:grid-cols-3 gap-4">

      <button type="button"
              class="text-left w-full rounded-xl overflow-hidden cursor-pointer transition-all duration-200"
              :style="picked === '' ? 'border: 3px solid #d4af37; box-shadow: 0 0 0 4px rgba(212,175,55,0.25), 0 20px 50px -10px rgba(212,175,55,0.5); transform: translateY(-4px) scale(1.02); background: rgba(212,175,55,0.08);' : 'border: 2px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.03);'"
              @click="picked = ''">
        <div class="aspect-[4/5] flex flex-col items-center justify-center p-6 text-center relative">
          <div class="text-5xl font-display text-gold">✶</div>
          <div class="mt-4 text-xl font-display"><?= e(t('booking.no_preference')) ?></div>
          <div class="mt-2 text-xs text-bone/50 uppercase tracking-widest"><?= e(t('booking.no_preference_hint')) ?></div>
          <div class="absolute top-3 right-3 w-9 h-9 rounded-full border-2 flex items-center justify-center transition"
               :style="picked === '' ? 'background: #d4af37; border-color: #d4af37; color: #0a0a0a;' : 'border-color: rgba(255,255,255,0.3); color: transparent; background: rgba(10,10,10,0.5);'">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
          </div>
        </div>
      </button>

      <?php foreach ($artists as $a):
        $aid  = (string)($a['id'] ?? '');
        $aJs  = "'" . addslashes($aid) . "'";
      ?>
        <button type="button"
                class="text-left w-full rounded-xl overflow-hidden cursor-pointer transition-all duration-200 relative"
                :style="picked === <?= $aJs ?> ? 'border: 3px solid #d4af37; box-shadow: 0 0 0 4px rgba(212,175,55,0.25), 0 20px 50px -10px rgba(212,175,55,0.5); transform: translateY(-4px) scale(1.02);' : 'border: 2px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.03);'"
                @click="picked = <?= $aJs ?>">
          <div class="aspect-[4/5] overflow-hidden relative">
            <?php if (!empty($a['avatar_url'])): ?>
              <img src="<?= e(url($a['avatar_url'])) ?>" class="w-full h-full object-cover">
            <?php else: ?>
              <div class="w-full h-full flex items-center justify-center text-6xl font-display text-gold/20"><?= e(strtoupper(substr($a['display_name'] ?? '?', 0, 1))) ?></div>
            <?php endif; ?>
            <div class="absolute inset-0 bg-gradient-to-t from-ink via-transparent"></div>
            <div class="absolute bottom-4 left-4 right-4">
              <div class="text-xl font-display text-bone"><?= e($a['display_name'] ?? '') ?></div>
              <div class="text-[10px] uppercase tracking-widest text-gold/80"><?= e(implode(' · ', (array)($a['specialties'] ?? []))) ?></div>
            </div>
            <!-- Selection badge -->
            <div class="absolute top-3 right-3 w-9 h-9 rounded-full border-2 flex items-center justify-center transition"
                 :style="picked === <?= $aJs ?> ? 'background: #d4af37; border-color: #d4af37; color: #0a0a0a; transform: scale(1.15);' : 'border-color: rgba(255,255,255,0.4); color: transparent; background: rgba(10,10,10,0.6);'">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
            </div>
            <!-- Giant SELECTED banner so we can see at a glance -->
            <div class="absolute top-3 left-3 px-3 py-1 rounded-full text-[10px] uppercase tracking-widest font-bold"
                 x-show="picked === <?= $aJs ?>"
                 style="background:#d4af37;color:#0a0a0a">
              Selected
            </div>
          </div>
        </button>
      <?php endforeach; ?>
    </div>

    <div class="mt-10 flex items-center justify-between">
      <p class="text-sm">
        <span class="text-bone/40"><?= e(t('booking.step_1.current_selection')) ?>:</span>
        <span class="text-gold font-semibold ml-2" x-text="picked === '' ? '<?= e(t('booking.no_preference')) ?>' : (names[picked] || picked)"></span>
      </p>
      <button class="btn-gold"><?= e(t('booking.next')) ?> →</button>
    </div>
  </form>
</section>
