<?php /** @var array $settings */
$galleryItems = \App\Repositories\Container::gallery()->all();
?>

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

  <div class="relative max-w-5xl 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.about.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.about.title')) ?></h1>
  </div>
</section>

<!-- Content with side image -->
<section class="max-w-7xl mx-auto px-6 pb-28">
  <div class="grid md:grid-cols-5 gap-16 items-start">
    <div class="md:col-span-3 reveal-left">
      <p class="text-xl md:text-2xl font-light text-bone/70 leading-relaxed"><?= e(t('page.about.p1')) ?></p>
      <div class="gold-line my-10"></div>
      <p class="text-lg text-bone/50 leading-relaxed"><?= e(t('page.about.p2')) ?></p>
      <p class="text-lg text-bone/50 leading-relaxed mt-6"><?= e(t('page.about.p3')) ?></p>
      <a href="<?= url('/book') ?>" class="btn-gold mt-10 inline-block"><?= e(t('nav.book')) ?></a>
    </div>
    <div class="md:col-span-2 reveal-right">
      <?php if (!empty($galleryItems[5]['url'])): ?>
        <div class="rounded-2xl overflow-hidden img-zoom sticky top-28">
          <img src="<?= e(url($galleryItems[5]['url'])) ?>" alt="Studio" class="w-full aspect-[3/4] object-cover" loading="lazy">
        </div>
      <?php endif; ?>
    </div>
  </div>
</section>

<!-- Info cards -->
<section class="border-y border-white/5 py-20">
  <div class="max-w-6xl mx-auto px-6 grid md:grid-cols-3 gap-8 stagger">
    <div class="bg-white/[0.02] border border-white/5 rounded-2xl p-8 reveal-scale">
      <div class="text-[10px] uppercase tracking-[0.3em] text-gold mb-4"><?= e(t('footer.visit')) ?></div>
      <p class="text-bone/60 whitespace-pre-line leading-relaxed"><?= e($settings['address'] ?? '') ?></p>
      <?php if (!empty($settings['address'])): ?>
        <a href="https://www.google.com/maps?q=<?= urlencode($settings['address']) ?>" target="_blank" rel="noopener"
           class="mt-4 inline-flex items-center gap-2 text-xs text-gold/60 hover:text-gold transition-colors">
          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"/><circle cx="12" cy="10" r="3"/></svg>
          <?= e(t('common.directions')) ?>
        </a>
      <?php endif; ?>
    </div>
    <div class="bg-white/[0.02] border border-white/5 rounded-2xl p-8 reveal-scale">
      <div class="text-[10px] uppercase tracking-[0.3em] text-gold mb-4"><?= e(t('footer.hours')) ?></div>
      <ul class="text-bone/60 space-y-2 text-sm">
        <?php foreach (($settings['hours'] ?? []) as $day => $hrs): ?>
          <li class="flex justify-between gap-4">
            <span class="uppercase text-bone/40 text-xs"><?= e(t('day.' . $day)) ?></span>
            <span class="<?= $hrs ? '' : 'text-bone/25' ?>"><?= e(fmt_hours($hrs)) ?></span>
          </li>
        <?php endforeach; ?>
      </ul>
    </div>
    <div class="bg-white/[0.02] border border-white/5 rounded-2xl p-8 reveal-scale">
      <div class="text-[10px] uppercase tracking-[0.3em] text-gold mb-4"><?= e(t('page.about.contact')) ?></div>
      <?php if (!empty($settings['phone'])): ?>
        <a href="tel:<?= e($settings['phone']) ?>" class="block text-bone/60 hover:text-gold transition-colors mb-2"><?= e($settings['phone']) ?></a>
      <?php endif; ?>
      <?php if (!empty($settings['email'])): ?>
        <a href="mailto:<?= e($settings['email']) ?>" class="block text-bone/60 hover:text-gold transition-colors"><?= e($settings['email']) ?></a>
      <?php endif; ?>
      <div class="flex items-center gap-3 mt-6">
        <?php if (!empty($settings['socials']['instagram'])): ?>
          <a href="<?= e($settings['socials']['instagram']) ?>" target="_blank" rel="noopener" class="text-bone/40 hover:text-gold transition-colors">
            <svg width="20" height="20" 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>
          </a>
        <?php endif; ?>
        <?php if (!empty($settings['socials']['facebook'])): ?>
          <a href="<?= e($settings['socials']['facebook']) ?>" target="_blank" rel="noopener" class="text-bone/40 hover:text-gold transition-colors">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>
          </a>
        <?php endif; ?>
      </div>
    </div>
  </div>
</section>
