<script setup lang="ts">
import { Button } from '@/components/ui/button'

const footerLinks = [
  {
    title: 'Shop',
    links: [
      { label: 'Women', href: '#' },
      { label: 'Men', href: '#' },
      { label: 'Kids', href: '#' },
      { label: 'Accessories', href: '#' },
      { label: 'New Arrivals', href: '#' },
      { label: 'Sale', href: '#' },
    ],
  },
  {
    title: 'Help',
    links: [
      { label: 'Customer Service', href: '#' },
      { label: 'Shipping & Returns', href: '#' },
      { label: 'Size Guide', href: '#' },
      { label: 'FAQ', href: '#' },
      { label: 'Contact Us', href: '#' },
    ],
  },
  {
    title: 'Company',
    links: [
      { label: 'About Us', href: '#' },
      { label: 'Careers', href: '#' },
      { label: 'Press', href: '#' },
      { label: 'Sustainability', href: '#' },
    ],
  },
]
</script>

<template>
  <footer class="w-full">
    <!-- Main Footer -->
    <div class="bg-muted">
      <div class="container mx-auto grid gap-8 px-4 py-12 md:grid-cols-2 md:px-6 lg:grid-cols-5">
        <!-- Newsletter -->
        <div class="lg:col-span-2">
          <h3 class="text-lg font-semibold">
            Stay in the loop
          </h3>
          <p class="mt-1 text-sm text-muted-foreground">
            Subscribe to get special offers, new arrivals, and style tips.
          </p>
          <form class="mt-4 flex gap-2" @submit.prevent>
            <input
              type="email"
              placeholder="Enter your email"
              class="h-10 flex-1 rounded-md border bg-background px-3 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
            />
            <Button type="submit">
              Subscribe
            </Button>
          </form>
          <!-- Social Icons -->
          <div class="mt-6 flex 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="20" height="20" 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="20" height="20" 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="20" height="20" 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>
            <a href="#" class="text-muted-foreground transition-colors hover:text-foreground" aria-label="Pinterest">
              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" x2="12" y1="17" y2="22" /><path d="M5 17h14v-1.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V6h1a2 2 0 0 0 0-4H8a2 2 0 0 0 0 4h1v4.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24Z" /></svg>
            </a>
          </div>
        </div>

        <!-- Link Columns -->
        <div
          v-for="group in footerLinks"
          :key="group.title"
          class="space-y-3"
        >
          <h3 class="text-sm font-semibold">
            {{ group.title }}
          </h3>
          <ul class="space-y-2">
            <li v-for="link in group.links" :key="link.label">
              <a
                :href="link.href"
                class="text-sm text-muted-foreground transition-colors hover:text-foreground"
              >
                {{ link.label }}
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <!-- Legal Bar -->
    <div class="bg-foreground text-background">
      <div class="container mx-auto flex flex-col items-center justify-between gap-4 px-4 py-6 text-sm md:flex-row md:px-6">
        <div class="flex items-center gap-2">
          <span class="font-bold">STORE</span>
          <span class="text-background/70">&copy; {{ new Date().getFullYear() }} All rights reserved.</span>
        </div>
        <div class="flex flex-wrap items-center gap-4 text-background/70">
          <a href="#" class="transition-colors hover:text-background">Privacy Policy</a>
          <a href="#" class="transition-colors hover:text-background">Terms of Service</a>
          <a href="#" class="transition-colors hover:text-background">Cookie Settings</a>
        </div>
      </div>
    </div>
  </footer>
</template>