<?php /** @var array $artists */ ?>

<section class="pt-32 pb-16 max-w-7xl mx-auto px-6">
  <div class="gold-line mb-6 animate-fade-in-up"></div>
  <div class="text-[10px] uppercase tracking-[0.4em] text-gold/80 animate-fade-in-up"><?= e(t('page.artists.kicker')) ?></div>
  <h1 class="mt-4 text-5xl md:text-7xl font-display animate-fade-in-up" style="animation-delay:0.1s"><?= e(t('page.artists.title')) ?></h1>
  <p class="mt-6 text-bone/50 text-lg font-light max-w-2xl animate-fade-in-up" style="animation-delay:0.2s"><?= e(t('page.artists.intro')) ?></p>
</section>

<section class="max-w-7xl mx-auto px-6 pb-32">
  <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6 stagger">
    <?php foreach ($artists as $a): ?>
      <div class="group relative reveal-scale">
        <a href="<?= url('/artists/' . e($a['slug'] ?? '')) ?>" class="block">
          <div class="aspect-[3/4] overflow-hidden rounded-2xl bg-white/5 relative">
            <?php if (!empty($a['avatar_url'])): ?>
              <img src="<?= e(url($a['avatar_url'])) ?>" alt="<?= e($a['display_name'] ?? '') ?>" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-[1200ms]" loading="lazy">
            <?php else: ?>
              <div class="w-full h-full flex items-center justify-center text-8xl font-display text-gold/10"><?= e(strtoupper(substr($a['display_name'] ?? '?', 0, 1))) ?></div>
            <?php endif; ?>
            <div class="absolute inset-0 bg-gradient-to-t from-ink via-ink/20 to-transparent opacity-80"></div>
            <div class="absolute inset-0 bg-gold/0 group-hover:bg-gold/5 transition-colors duration-500"></div>
            <div class="absolute bottom-0 left-0 right-0 p-6">
              <div class="gold-line mb-4 transition-all duration-500 group-hover:w-20"></div>
              <h3 class="text-2xl md:text-3xl font-display"><?= e($a['display_name'] ?? '') ?></h3>
              <p class="text-xs uppercase tracking-[0.2em] text-gold/70 mt-2"><?= e(implode(' · ', (array)($a['specialties'] ?? []))) ?></p>
            </div>
          </div>
        </a>
        <?php if (!empty($a['instagram_handle'])): ?>
          <a href="https://www.instagram.com/<?= e($a['instagram_handle']) ?>/" target="_blank" rel="noopener"
             class="absolute top-4 right-4 flex items-center gap-1.5 px-3 py-2 rounded-full bg-ink/70 backdrop-blur-lg border border-white/10 text-bone/60 hover:text-gold hover:border-gold/30 transition-all text-[11px]">
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="2" width="20" height="20" rx="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/></svg>
            @<?= e($a['instagram_handle']) ?>
          </a>
        <?php endif; ?>
      </div>
    <?php endforeach; ?>
    <?php if (empty($artists)): ?>
      <div class="col-span-full text-center text-bone/30 py-20 text-lg"><?= e(t('home.artists.empty')) ?></div>
    <?php endif; ?>
  </div>
</section>
