<template>
  <footer class="mt-32 pb-16 px-8 md:px-12 lg:px-16">
    <!-- Minimal footer content -->
    <div class="max-w-4xl">
      <div
        class="flex flex-col md:flex-row justify-between items-start md:items-end gap-8"
      >
        <!-- Left: Copyright and minimal info -->
        <div>
          <p class="text-ghost-500 text-xs mb-2">
            © {{ currentYear }} Ghost Guild
          </p>
        </div>

        <!-- Right: Contact links -->
        <div class="flex flex-wrap gap-6 text-xs">
          <a
            href="mailto:hello@ghostguild.org"
            class="text-ghost-500 hover:text-ghost-300 transition-colors"
          >
            Contact
          </a>
        </div>
      </div>
    </div>
  </footer>
</template>

<script setup>
const currentYear = new Date().getFullYear();
</script>
