---
import { SITE } from '../data/site';

const base = import.meta.env.BASE_URL;
const year = new Date().getFullYear();
---

<footer class="bg-gray-50 border-t border-gray-200 mt-20">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
      <!-- Brand -->
      <div>
        <p class="font-bold text-ink text-sm">{SITE.name}</p>
        <p class="text-sm text-ink-secondary mt-1">{SITE.role}</p>
        <p class="text-sm text-ink-secondary mt-0.5">{SITE.location}</p>
      </div>

      <!-- Links -->
      <div>
        <p class="eyebrow mb-3">Navigation</p>
        <ul class="flex flex-col gap-2">
          <li><a href={`${base}#work`} class="text-sm text-ink-secondary hover:text-ink transition-colors">Work</a></li>
          <li><a href={`${base}stories/`} class="text-sm text-ink-secondary hover:text-ink transition-colors">Stories</a></li>
          <li><a href={`${base}#about`} class="text-sm text-ink-secondary hover:text-ink transition-colors">About</a></li>
          <li><a href={`${base}#contact`} class="text-sm text-ink-secondary hover:text-ink transition-colors">Contact</a></li>
        </ul>
      </div>

      <!-- Socials -->
      <div>
        <p class="eyebrow mb-3">Connect</p>
        <ul class="flex flex-col gap-2">
          <li>
            <a href={SITE.socials.linkedin} class="text-sm text-ink-secondary hover:text-ink transition-colors" rel="noopener noreferrer" target="_blank">
              LinkedIn
            </a>
          </li>
          <li>
            <a href={SITE.socials.instagram} class="text-sm text-ink-secondary hover:text-ink transition-colors" rel="noopener noreferrer" target="_blank">
              Instagram
            </a>
          </li>
          <li>
            <a href={SITE.socials.github} class="text-sm text-ink-secondary hover:text-ink transition-colors" rel="noopener noreferrer" target="_blank">
              GitHub
            </a>
          </li>
          <li>
            <a href={SITE.socials.kofi} class="text-sm text-ink-secondary hover:text-ink transition-colors" rel="noopener noreferrer" target="_blank">
              Support on Ko-fi
            </a>
          </li>
        </ul>
      </div>
    </div>

    <div class="mt-10 pt-6 border-t border-gray-200 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
      <p class="text-xs text-ink-secondary">
        &copy; {year} {SITE.name}. All photographs are copyright of the photographer.
      </p>
      <p class="text-xs text-ink-secondary">
        Built with <a href="https://astro.build" class="underline hover:text-ink transition-colors" rel="noopener noreferrer" target="_blank">Astro</a>
      </p>
    </div>
  </div>
</footer>
