<?php /** @var array $artists; @var array $gallery; @var array $settings */
$heroImages = array_slice($gallery, 0, 6);
$storyImages = array_slice($gallery, 0, 5);
?>

<!-- ═══════════════════════════════════════════════════════════════════
     HERO — full-viewport with rotating gallery background
     ═══════════════════════════════════════════════════════════════════ -->
<section class="relative min-h-screen flex items-center justify-center overflow-hidden" x-data="{ current: 0, total: <?= count($heroImages) ?> }" x-init="setInterval(() => current = (current + 1) % total, 4000)">
  <!-- Background image carousel -->
  <?php foreach ($heroImages as $i => $g): ?>
    <div class="absolute inset-0 transition-opacity duration-[2000ms]"
         :class="current === <?= $i ?> ? 'opacity-100' : 'opacity-0'">
      <img src="<?= e(url($g['url'] ?? '')) ?>" alt="" class="w-full h-full object-cover" data-parallax="0.15" loading="<?= $i === 0 ? 'eager' : 'lazy' ?>">
    </div>
  <?php endforeach; ?>

  <!-- Dark overlays for readability -->
  <div class="absolute inset-0 bg-gradient-to-b from-ink/70 via-ink/50 to-ink"></div>
  <div class="absolute inset-0 bg-gradient-to-r from-ink/60 via-transparent to-ink/60"></div>

  <!-- Film grain overlay on hero -->
  <div class="absolute inset-0 opacity-[0.04]" style="background-image:url('data:image/svg+xml,%3Csvg viewBox=%270 0 256 256%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%270.75%27 numOctaves=%274%27 stitchTiles=%27stitch%27/%3E%3C/filter%3E%3Crect width=%27100%25%27 height=%27100%25%27 filter=%27url(%23n)%27/%3E%3C/svg%3E')"></div>

  <!-- Content -->
  <div class="relative z-10 text-center px-6 max-w-4xl">
    <div class="gold-line mx-auto mb-8 animate-fade-in-up"></div>
    <div class="text-[10px] md:text-xs uppercase tracking-[0.5em] text-gold/90 animate-fade-in-up"><?= e(t('home.kicker')) ?></div>
    <h1 class="mt-6 text-5xl sm:text-6xl md:text-8xl font-display leading-[0.95] animate-fade-in-up" style="animation-delay:0.15s"><?= e(t('home.hero.title')) ?></h1>
    <p class="mt-8 text-bone/60 text-lg md:text-xl max-w-2xl mx-auto font-light leading-relaxed animate-fade-in-up" style="animation-delay:0.3s"><?= e(t('home.hero.subtitle')) ?></p>
    <div class="mt-12 flex items-center justify-center gap-5 animate-fade-in-up" style="animation-delay:0.45s">
      <a href="<?= url('/book') ?>" class="btn-gold text-sm px-8 py-4"><?= e(t('home.hero.cta_book')) ?></a>
      <a href="<?= url('/portfolio') ?>" class="btn-ghost text-sm px-8 py-4"><?= e(t('home.hero.cta_view')) ?></a>
    </div>
  </div>

  <!-- Scroll hint -->
  <div class="absolute bottom-10 left-1/2 -translate-x-1/2 flex flex-col items-center gap-2 animate-fade-in-up" style="animation-delay:0.7s">
    <span class="text-bone/30 text-[10px] uppercase tracking-[0.4em]"><?= e(t('home.hero.scroll')) ?></span>
    <div class="w-px h-8 bg-gradient-to-b from-gold/50 to-transparent animate-pulse"></div>
  </div>

  <!-- Progress dots -->
  <div class="absolute bottom-10 right-8 hidden md:flex flex-col gap-2">
    <?php foreach ($heroImages as $i => $g): ?>
      <button @click="current = <?= $i ?>"
              :class="current === <?= $i ?> ? 'bg-gold w-2 h-6' : 'bg-bone/20 w-2 h-2 hover:bg-bone/40'"
              class="rounded-full transition-all duration-500"></button>
    <?php endforeach; ?>
  </div>
</section>

<!-- ═══════════════════════════════════════════════════════════════════
     HORIZONTAL GALLERY STRIP — auto-scrolling showcase
     ═══════════════════════════════════════════════════════════════════ -->
<section class="py-3 bg-ink border-y border-white/5 overflow-hidden">
  <div class="flex animate-marquee gap-3" style="width:max-content">
    <?php foreach (array_merge($gallery, $gallery) as $g): ?>
      <div class="w-48 h-28 md:w-64 md:h-36 rounded-lg overflow-hidden shrink-0 opacity-60 hover:opacity-100 transition-opacity">
        <img src="<?= e(url($g['url'] ?? '')) ?>" alt="" class="w-full h-full object-cover" loading="lazy">
      </div>
    <?php endforeach; ?>
  </div>
  <style>
    @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
    .animate-marquee { animation: marquee 30s linear infinite; }
    .animate-marquee:hover { animation-play-state: paused; }
  </style>
</section>

<!-- ═══════════════════════════════════════════════════════════════════
     STORY — split layout with staggered image grid
     ═══════════════════════════════════════════════════════════════════ -->
<section class="max-w-7xl mx-auto px-6 py-32 md:py-40">
  <div class="grid md:grid-cols-2 gap-16 lg:gap-24 items-center">
    <div class="reveal-left">
      <div class="gold-line mb-6"></div>
      <div class="text-[10px] uppercase tracking-[0.4em] text-gold/80"><?= e(t('home.story.kicker')) ?></div>
      <h2 class="mt-4 text-4xl md:text-5xl lg:text-6xl font-display leading-[1.05]"><?= e(t('home.story.title')) ?></h2>
      <p class="mt-8 text-bone/60 text-lg leading-relaxed font-light"><?= e(t('home.story.body')) ?></p>
      <a href="<?= url('/about') ?>" class="mt-10 inline-flex items-center gap-3 text-gold hover:gap-4 transition-all group">
        <span class="text-sm uppercase tracking-widest"><?= e(t('home.story.learn_more')) ?></span>
        <svg class="w-5 h-5 transition-transform group-hover:translate-x-1" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
      </a>
    </div>

    <!-- Staggered masonry-style image grid -->
    <div class="reveal-right">
      <div class="grid grid-cols-12 gap-3">
        <?php if (!empty($storyImages[0])): ?>
          <div class="col-span-7 aspect-[3/4] img-zoom rounded-xl">
            <img src="<?= e(url($storyImages[0]['url'])) ?>" alt="" class="w-full h-full object-cover rounded-xl" loading="lazy">
          </div>
        <?php endif; ?>
        <div class="col-span-5 flex flex-col gap-3">
          <?php if (!empty($storyImages[1])): ?>
            <div class="aspect-square img-zoom rounded-xl">
              <img src="<?= e(url($storyImages[1]['url'])) ?>" alt="" class="w-full h-full object-cover rounded-xl" loading="lazy">
            </div>
          <?php endif; ?>
          <?php if (!empty($storyImages[2])): ?>
            <div class="aspect-[4/3] img-zoom rounded-xl">
              <img src="<?= e(url($storyImages[2]['url'])) ?>" alt="" class="w-full h-full object-cover rounded-xl" loading="lazy">
            </div>
          <?php endif; ?>
        </div>
        <?php if (!empty($storyImages[3])): ?>
          <div class="col-span-5 aspect-[4/3] img-zoom rounded-xl">
            <img src="<?= e(url($storyImages[3]['url'])) ?>" alt="" class="w-full h-full object-cover rounded-xl" loading="lazy">
          </div>
        <?php endif; ?>
        <?php if (!empty($storyImages[4])): ?>
          <div class="col-span-7 aspect-[3/2] img-zoom rounded-xl">
            <img src="<?= e(url($storyImages[4]['url'])) ?>" alt="" class="w-full h-full object-cover rounded-xl" loading="lazy">
          </div>
        <?php endif; ?>
      </div>
    </div>
  </div>
</section>

<!-- ═══════════════════════════════════════════════════════════════════
     ARTISTS — dramatic full-bleed cards
     ═══════════════════════════════════════════════════════════════════ -->
<section class="relative py-32 overflow-hidden">
  <!-- Background image (blurred, from gallery) -->
  <?php if (!empty($gallery[3]['url'])): ?>
    <div class="absolute inset-0">
      <img src="<?= e(url($gallery[3]['url'])) ?>" alt="" class="w-full h-full object-cover blur-2xl opacity-10 scale-110" loading="lazy">
    </div>
  <?php endif; ?>
  <div class="absolute inset-0 bg-ink/80"></div>

  <div class="relative max-w-7xl mx-auto px-6">
    <div class="flex items-end justify-between mb-16 reveal">
      <div>
        <div class="gold-line mb-6"></div>
        <div class="text-[10px] uppercase tracking-[0.4em] text-gold/80"><?= e(t('home.artists.kicker')) ?></div>
        <h2 class="mt-3 text-4xl md:text-6xl font-display"><?= e(t('home.artists.title')) ?></h2>
      </div>
      <a href="<?= url('/artists') ?>" class="hidden md:inline text-sm text-gold hover:underline uppercase tracking-wider"><?= e(t('home.artists.view_all')) ?> →</a>
    </div>

    <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>

              <!-- Name + details -->
              <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-16"><?= e(t('home.artists.empty')) ?></div>
      <?php endif; ?>
    </div>
    <a href="<?= url('/artists') ?>" class="md:hidden mt-8 inline-block text-sm text-gold hover:underline uppercase tracking-wider"><?= e(t('home.artists.view_all')) ?> →</a>
  </div>
</section>

<!-- ═══════════════════════════════════════════════════════════════════
     PORTFOLIO PREVIEW — big dramatic images
     ═══════════════════════════════════════════════════════════════════ -->
<?php if (count($gallery) >= 4): ?>
<section class="py-32 max-w-7xl mx-auto px-6">
  <div class="text-center mb-16 reveal">
    <div class="gold-line mx-auto mb-6"></div>
    <div class="text-[10px] uppercase tracking-[0.4em] text-gold/80"><?= e(t('home.portfolio.kicker')) ?></div>
    <h2 class="mt-3 text-4xl md:text-6xl font-display"><?= e(t('home.portfolio.title')) ?></h2>
  </div>

  <!-- Asymmetric grid -->
  <div class="grid grid-cols-2 md:grid-cols-4 gap-3 stagger">
    <?php foreach (array_slice($gallery, 0, 8) as $i => $g):
      $span = ($i === 0 || $i === 5) ? 'md:col-span-2 md:row-span-2' : '';
      $aspect = ($i === 0 || $i === 5) ? 'aspect-square' : 'aspect-[3/4]';
    ?>
      <div class="<?= $span ?> <?= $aspect ?> img-zoom rounded-xl reveal-scale">
        <img src="<?= e(url($g['url'] ?? '')) ?>" alt="<?= e($g['caption'] ?? '') ?>" class="w-full h-full object-cover rounded-xl" loading="lazy">
      </div>
    <?php endforeach; ?>
  </div>

  <div class="text-center mt-12 reveal">
    <a href="<?= url('/portfolio') ?>" class="btn-ghost text-sm px-8 py-4 inline-flex items-center gap-3">
      <?= e(t('home.portfolio.view_all')) ?>
      <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
    </a>
  </div>
</section>
<?php endif; ?>

<!-- ═══════════════════════════════════════════════════════════════════
     FINAL CTA — with background image
     ═══════════════════════════════════════════════════════════════════ -->
<section class="relative py-40 overflow-hidden">
  <?php if (!empty($gallery[2]['url'])): ?>
    <div class="absolute inset-0">
      <img src="<?= e(url($gallery[2]['url'])) ?>" alt="" class="w-full h-full object-cover" data-parallax="0.1" loading="lazy">
    </div>
  <?php endif; ?>
  <div class="absolute inset-0 bg-ink/85"></div>
  <div class="absolute inset-0 bg-gradient-to-r from-ink via-transparent to-ink"></div>

  <div class="relative text-center px-6 reveal">
    <div class="gold-line mx-auto mb-8"></div>
    <div class="text-[10px] uppercase tracking-[0.4em] text-gold/80"><?= e(t('home.cta.kicker')) ?></div>
    <h2 class="mt-4 text-4xl md:text-7xl font-display max-w-3xl mx-auto leading-[1.05]"><?= e(t('home.cta.title')) ?></h2>
    <p class="mt-8 text-bone/50 text-lg max-w-xl mx-auto font-light"><?= e(t('home.cta.body')) ?></p>
    <a href="<?= url('/book') ?>" class="btn-gold mt-12 inline-block text-sm px-10 py-5"><?= e(t('home.cta.button')) ?></a>
  </div>
</section>
