<?php /** @var array $gallery; @var array $artists; @var string $activeArtist */ ?>

<!-- Hero header with background image -->
<section class="relative pt-32 pb-20 overflow-hidden">
  <?php if (!empty($gallery[0]['url'])): ?>
    <div class="absolute inset-0">
      <img src="<?= e(url($gallery[0]['url'])) ?>" alt="" class="w-full h-full object-cover blur-xl opacity-15 scale-110" loading="lazy">
    </div>
    <div class="absolute inset-0 bg-gradient-to-b from-ink/60 via-ink/80 to-ink"></div>
  <?php endif; ?>

  <div class="relative max-w-7xl mx-auto px-6">
    <div class="max-w-2xl">
      <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.portfolio.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.portfolio.title')) ?></h1>
      <p class="mt-6 text-bone/50 text-lg font-light animate-fade-in-up" style="animation-delay:0.2s"><?= e(t('page.portfolio.intro')) ?></p>
    </div>

    <!-- Artist filter -->
    <div class="mt-10 flex flex-wrap gap-2 animate-fade-in-up" style="animation-delay:0.3s">
      <a href="<?= url('/portfolio') ?>" class="chip <?= !$activeArtist ? 'chip-active' : '' ?>"><?= e(t('page.portfolio.filter_all')) ?></a>
      <?php foreach ($artists as $a): ?>
        <a href="<?= url('/portfolio?artist=' . e($a['id'])) ?>" class="chip <?= $activeArtist === ($a['id'] ?? '') ? 'chip-active' : '' ?>">
          <?= e($a['display_name'] ?? '') ?>
        </a>
      <?php endforeach; ?>
    </div>
  </div>
</section>

<!-- Gallery grid with scroll reveal -->
<section class="max-w-7xl mx-auto px-6 pb-32" x-data="videoLightbox()">
  <?php if (empty($gallery)): ?>
    <div class="text-center text-bone/30 py-24 text-lg"><?= e(t('page.portfolio.empty')) ?></div>
  <?php else: ?>
    <div class="columns-2 md:columns-3 lg:columns-4 gap-3 space-y-3 stagger">
      <?php foreach ($gallery as $i => $g): ?>
        <?php if (($g['kind'] ?? '') === 'VIDEO'):
          $vp = video_provider((string)($g['url'] ?? ''));
        ?>
          <button type="button"
                  @click="open(<?= htmlspecialchars(json_encode(url($vp['embed'])), ENT_QUOTES) ?>, <?= htmlspecialchars(json_encode($vp['provider']), ENT_QUOTES) ?>)"
                  class="relative break-inside-avoid w-full overflow-hidden rounded-xl bg-white/5 group text-left img-zoom reveal-scale">
            <img src="<?= e(url($g['thumb_url'] ?? $g['url'])) ?>" alt="" class="w-full object-cover" loading="lazy">
            <div class="absolute inset-0 bg-black/40 group-hover:bg-black/20 transition flex items-center justify-center">
              <div class="w-14 h-14 rounded-full bg-gold/90 text-ink flex items-center justify-center shadow-xl group-hover:scale-110 transition-transform">
                <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor"><polygon points="6 3 21 12 6 21"/></svg>
              </div>
            </div>
            <span class="absolute top-3 left-3 px-2.5 py-1 rounded-full bg-ink/70 backdrop-blur-lg text-[10px] uppercase tracking-widest text-gold border border-white/10">Video</span>
          </button>
        <?php else: ?>
          <div class="break-inside-avoid overflow-hidden rounded-xl bg-white/5 img-zoom reveal-scale">
            <img src="<?= e(url($g['url'])) ?>" alt="<?= e($g['caption'] ?? '') ?>" class="w-full object-cover" loading="lazy">
          </div>
        <?php endif; ?>
      <?php endforeach; ?>
    </div>
  <?php endif; ?>

  <?= view('partials.video-lightbox') ?>
</section>
