<?php $settings = \App\Repositories\Container::settings()->get(); ?>
<footer class="relative mt-0 border-t border-white/5 bg-ink text-bone overflow-hidden">
  <!-- Background texture -->
  <div class="absolute inset-0 opacity-[0.02]" style="background-image:url('data:image/svg+xml,%3Csvg width=%2760%27 height=%2760%27 viewBox=%270 0 60 60%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cg fill=%27none%27 fill-rule=%27evenodd%27%3E%3Cg fill=%27%23d4af37%27 fill-opacity=%271%27%3E%3Cpath d=%27M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z%27/%3E%3C/g%3E%3C/g%3E%3C/svg%3E')"></div>

  <div class="relative max-w-7xl mx-auto px-6">
    <!-- Main footer content -->
    <div class="py-20 grid md:grid-cols-12 gap-12">
      <!-- Brand column -->
      <div class="md:col-span-4">
        <div class="flex items-center gap-3">
          <img src="<?= asset('img/logo/mystic-art.png') ?>" alt="Mystic Art Tattoo" class="h-12 w-auto opacity-80">
        </div>
        <p class="mt-4 text-sm text-bone/50 leading-relaxed max-w-xs"><?= e(locale() === 'es' ? ($settings['tagline_es'] ?? '') : ($settings['tagline_en'] ?? '')) ?></p>
        <!-- Social icons -->
        <div class="mt-6 flex items-center gap-3">
          <?php if (!empty($settings['socials']['instagram'])): ?>
            <a href="<?= e($settings['socials']['instagram']) ?>" target="_blank" rel="noopener"
               class="w-10 h-10 rounded-full border border-white/10 flex items-center justify-center text-bone/40 hover:text-gold hover:border-gold/40 transition-all">
              <svg width="16" height="16" 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="w-10 h-10 rounded-full border border-white/10 flex items-center justify-center text-bone/40 hover:text-gold hover:border-gold/40 transition-all">
              <svg width="16" height="16" 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; ?>
          <?php if (!empty($settings['socials']['tiktok'])): ?>
            <a href="<?= e($settings['socials']['tiktok']) ?>" target="_blank" rel="noopener"
               class="w-10 h-10 rounded-full border border-white/10 flex items-center justify-center text-bone/40 hover:text-gold hover:border-gold/40 transition-all">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-2.88 2.5 2.89 2.89 0 0 1 0-5.78 2.92 2.92 0 0 1 .88.13v-3.5a6.37 6.37 0 0 0-.88-.07A6.34 6.34 0 0 0 3.15 15.3 6.34 6.34 0 0 0 9.49 21.65a6.34 6.34 0 0 0 6.34-6.34V9.05a8.16 8.16 0 0 0 4.76 1.51V7.19a4.83 4.83 0 0 1-1-.5z"/></svg>
            </a>
          <?php endif; ?>
        </div>
      </div>

      <!-- Visit column -->
      <div class="md:col-span-3">
        <h4 class="text-[10px] uppercase tracking-[0.3em] text-gold mb-5"><?= e(t('footer.visit')) ?></h4>
        <address class="not-italic text-sm text-bone/50 leading-relaxed space-y-2">
          <p class="whitespace-pre-line"><?= e($settings['address'] ?? '') ?></p>
          <?php if (!empty($settings['phone'])): ?>
            <a href="tel:<?= e($settings['phone']) ?>" class="block hover:text-gold transition-colors"><?= e($settings['phone']) ?></a>
          <?php endif; ?>
          <?php if (!empty($settings['email'])): ?>
            <a href="mailto:<?= e($settings['email']) ?>" class="block hover:text-gold transition-colors"><?= e($settings['email']) ?></a>
          <?php endif; ?>
        </address>
        <?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>

      <!-- Hours column -->
      <div class="md:col-span-3">
        <h4 class="text-[10px] uppercase tracking-[0.3em] text-gold mb-5"><?= e(t('footer.hours')) ?></h4>
        <ul class="text-sm text-bone/50 space-y-1.5">
          <?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/60' : 'text-bone/25' ?>"><?= e(fmt_hours($hrs)) ?></span>
            </li>
          <?php endforeach; ?>
        </ul>
      </div>

      <!-- Quick links -->
      <div class="md:col-span-2">
        <h4 class="text-[10px] uppercase tracking-[0.3em] text-gold mb-5"><?= e(t('footer.navigate')) ?></h4>
        <ul class="text-sm text-bone/50 space-y-2">
          <li><a href="<?= url('/') ?>" class="hover:text-gold transition-colors"><?= e(t('nav.home')) ?></a></li>
          <li><a href="<?= url('/artists') ?>" class="hover:text-gold transition-colors"><?= e(t('nav.artists')) ?></a></li>
          <li><a href="<?= url('/portfolio') ?>" class="hover:text-gold transition-colors"><?= e(t('nav.portfolio')) ?></a></li>
          <li><a href="<?= url('/book') ?>" class="hover:text-gold transition-colors"><?= e(t('nav.book')) ?></a></li>
          <li><a href="<?= url('/aftercare') ?>" class="hover:text-gold transition-colors"><?= e(t('nav.aftercare')) ?></a></li>
          <li><a href="<?= url('/contact') ?>" class="hover:text-gold transition-colors"><?= e(t('nav.contact')) ?></a></li>
        </ul>
      </div>
    </div>
  </div>

  <!-- Bottom bar -->
  <div class="border-t border-white/5">
    <div class="max-w-7xl mx-auto px-6 py-6 flex flex-col sm:flex-row items-center justify-between gap-4 text-xs text-bone/30">
      <span>&copy; <?= date('Y') ?> Mystic Art Tattoo · <?= e(t('footer.rights')) ?></span>
      <?= view('partials.lang-toggle') ?>
    </div>
  </div>
</footer>
