<template>
  <footer class="w-full border-t">
    <div class="container mx-auto flex flex-col items-center justify-between gap-4 px-4 py-8 md:flex-row md:px-6">
      <!-- Logo + Copyright -->
      <div class="flex items-center gap-3">
        <a href="#" class="text-lg font-bold tracking-tight">STORE</a>
        <span class="text-sm text-muted-foreground">&copy; {{ new Date().getFullYear() }}</span>
      </div>

      <!-- Links -->
      <nav class="flex flex-wrap items-center gap-6">
        <a href="#" class="text-sm text-muted-foreground transition-colors hover:text-foreground">Shop</a>
        <a href="#" class="text-sm text-muted-foreground transition-colors hover:text-foreground">About</a>
        <a href="#" class="text-sm text-muted-foreground transition-colors hover:text-foreground">Help</a>
        <a href="#" class="text-sm text-muted-foreground transition-colors hover:text-foreground">Privacy</a>
        <a href="#" class="text-sm text-muted-foreground transition-colors hover:text-foreground">Terms</a>
      </nav>

      <!-- Social -->
      <div class="flex items-center gap-3">
        <a href="#" class="text-muted-foreground transition-colors hover:text-foreground" aria-label="Instagram">
          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="20" x="2" y="2" rx="5" ry="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" x2="17.51" y1="6.5" y2="6.5" /></svg>
        </a>
        <a href="#" class="text-muted-foreground transition-colors hover:text-foreground" aria-label="X">
          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4l11.733 16h4.267l-11.733 -16h-4.267z" /><path d="M4 20l6.768 -6.768m2.46 -2.46l6.772 -6.772" /></svg>
        </a>
        <a href="#" class="text-muted-foreground transition-colors hover:text-foreground" aria-label="Facebook">
          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" /></svg>
        </a>
      </div>
    </div>
  </footer>
</template>