<?php /** @var array $artist; @var array $gallery */ ?>
<section class="pt-32 pb-12 max-w-7xl mx-auto px-6">
  <div class="grid md:grid-cols-[2fr_3fr] gap-10 items-start">
    <div class="aspect-[4/5] overflow-hidden rounded-lg bg-white/5">
      <?php if (!empty($artist['avatar_url'])): ?>
        <img src="<?= e(url($artist['avatar_url'])) ?>" alt="<?= e($artist['display_name'] ?? '') ?>" class="w-full h-full object-cover">
      <?php else: ?>
        <div class="w-full h-full flex items-center justify-center text-8xl font-display text-gold/20"><?= e(strtoupper(substr($artist['display_name'] ?? '?', 0, 1))) ?></div>
      <?php endif; ?>
    </div>
    <div>
      <div class="text-xs uppercase tracking-[0.3em] text-gold"><?= e(t('page.artist.kicker')) ?></div>
      <h1 class="mt-3 text-6xl font-display"><?= e($artist['display_name'] ?? '') ?></h1>
      <p class="mt-2 text-sm uppercase tracking-widest text-gold/70"><?= e(implode(' · ', (array)($artist['specialties'] ?? []))) ?></p>
      <?php if (!empty($artist['instagram_handle'])): ?>
        <a href="https://www.instagram.com/<?= e($artist['instagram_handle']) ?>/" target="_blank" rel="noopener"
           class="mt-4 inline-flex items-center gap-2 text-gold hover:underline text-sm">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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($artist['instagram_handle']) ?>
        </a>
      <?php endif; ?>
      <p class="mt-8 text-bone/70 leading-relaxed whitespace-pre-line"><?= e($artist['bio'] ?? '') ?></p>
      <a href="<?= url('/book?artist=' . e($artist['id'] ?? '')) ?>" class="btn-gold mt-10 inline-block"><?= e(t('page.artist.book_with', ['name' => $artist['display_name'] ?? ''])) ?></a>
    </div>
  </div>
</section>

<section class="max-w-7xl mx-auto px-6 py-16" x-data="videoLightbox()">
  <h2 class="text-3xl font-display mb-6"><?= e(t('page.artist.portfolio')) ?></h2>
  <div class="grid sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3">
    <?php foreach ($gallery as $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 aspect-square overflow-hidden rounded-md bg-white/5 group text-left">
          <img src="<?= e(url($g['thumb_url'] ?? $g['url'])) ?>" alt="" class="w-full h-full object-cover group-hover:scale-105 transition duration-700">
          <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">
              <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor"><polygon points="6 3 21 12 6 21"/></svg>
            </div>
          </div>
        </button>
      <?php else: ?>
        <div class="aspect-square overflow-hidden rounded-md bg-white/5">
          <img src="<?= e(url($g['url'])) ?>" alt="<?= e($g['caption'] ?? '') ?>" class="w-full h-full object-cover hover:scale-105 transition duration-700">
        </div>
      <?php endif; ?>
    <?php endforeach; ?>
    <?php if (empty($gallery)): ?>
      <div class="col-span-full text-center text-bone/40 py-12"><?= e(t('page.artist.empty_portfolio')) ?></div>
    <?php endif; ?>
  </div>

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