<script lang="ts">
interface FooterLinkGroup {
  title: string
  links: { label: string; href: string }[]
}

interface SocialLink {
  label: string
  href: string
  icon: 'instagram' | 'x' | 'facebook' | 'youtube' | 'pinterest' | 'tiktok'
}
</script>

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

withDefaults(defineProps<{
  /** Brand name displayed in the footer */
  brandName?: string
  /** Brand logo src. When set, overrides brandName text. */
  logoSrc?: string
  /** Short brand description */
  tagline?: string
  /** Link groups displayed as columns */
  linkGroups?: FooterLinkGroup[]
  /** Newsletter heading */
  newsletterHeading?: string
  /** Newsletter description */
  newsletterDescription?: string
  /** Social media links */
  socialLinks?: SocialLink[]
  /** Copyright text. Use {year} placeholder for current year. */
  copyright?: string
  /** Legal links shown in the copyright bar */
  legalLinks?: { label: string; href: string }[]
}>(), {
  brandName: 'STORE',
  logoSrc: '',
  tagline: 'Crafted with care. Worn with confidence.',
  linkGroups: () => [
    {
      title: 'Shop',
      links: [
        { label: 'Women', href: '#' },
        { label: 'Men', href: '#' },
        { label: 'Kids', href: '#' },
        { label: 'Accessories', href: '#' },
        { label: 'New Arrivals', href: '#' },
        { label: 'Sale', href: '#' },
      ],
    },
    {
      title: 'Company',
      links: [
        { label: 'About Us', href: '#' },
        { label: 'Careers', href: '#' },
        { label: 'Press', href: '#' },
        { label: 'Sustainability', href: '#' },
        { label: 'Blog', href: '#' },
      ],
    },
    {
      title: 'Support',
      links: [
        { label: 'Customer Service', href: '#' },
        { label: 'Shipping & Returns', href: '#' },
        { label: 'Size Guide', href: '#' },
        { label: 'FAQ', href: '#' },
        { label: 'Contact Us', href: '#' },
      ],
    },
    {
      title: 'Legal',
      links: [
        { label: 'Privacy Policy', href: '#' },
        { label: 'Terms of Service', href: '#' },
        { label: 'Cookie Policy', href: '#' },
        { label: 'Accessibility', href: '#' },
      ],
    },
  ],
  newsletterHeading: 'Subscribe to our newsletter',
  newsletterDescription: 'Be the first to know about new collections, exclusive offers, and style tips.',
  socialLinks: () => [
    { label: 'Instagram', href: '#', icon: 'instagram' },
    { label: 'X', href: '#', icon: 'x' },
    { label: 'Facebook', href: '#', icon: 'facebook' },
    { label: 'YouTube', href: '#', icon: 'youtube' },
  ],
  copyright: '© {year} STORE. All rights reserved.',
  legalLinks: () => [
    { label: 'Privacy Policy', href: '#' },
    { label: 'Terms of Service', href: '#' },
    { label: 'Cookie Settings', href: '#' },
  ],
})

const currentYear = new Date().getFullYear()

function formatCopyright(text: string) {
  return text.replace('{year}', String(currentYear))
}

const socialIcons: Record<string, string> = {
  instagram: 'M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4a5.8 5.8 0 0 1-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8A5.8 5.8 0 0 1 7.8 2m-.2 2A3.6 3.6 0 0 0 4 7.6v8.8C4 18.39 5.61 20 7.6 20h8.8a3.6 3.6 0 0 0 3.6-3.6V7.6C20 5.61 18.39 4 16.4 4H7.6m9.65 1.5a1.25 1.25 0 0 1 1.25 1.25A1.25 1.25 0 0 1 17.25 8 1.25 1.25 0 0 1 16 6.75a1.25 1.25 0 0 1 1.25-1.25M12 7a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3z',
  x: 'M4 4l11.733 16h4.267l-11.733-16zM4 20l6.768-6.768m2.46-2.46L20 4',
  facebook: 'M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z',
  youtube: 'M2.5 17a24.12 24.12 0 0 1 0-10 2 2 0 0 1 1.4-1.4 49.56 49.56 0 0 1 16.2 0A2 2 0 0 1 21.5 7a24.12 24.12 0 0 1 0 10 2 2 0 0 1-1.4 1.4 49.55 49.55 0 0 1-16.2 0A2 2 0 0 1 2.5 17M10 15l5-3-5-3z',
  pinterest: 'M12 2a10 10 0 0 0-3.64 19.33c-.1-.94-.2-2.4 0-3.43l1.45-6.15s-.37-.74-.37-1.84c0-1.72 1-3 2.24-3 1.06 0 1.57.8 1.57 1.75 0 1.06-.68 2.65-1.03 4.12-.29 1.23.62 2.24 1.84 2.24 2.21 0 3.9-2.33 3.9-5.68 0-2.97-2.13-5.04-5.18-5.04-3.53 0-5.6 2.64-5.6 5.38 0 1.06.41 2.2.92 2.82.1.12.11.23.08.35l-.34 1.4c-.06.23-.18.28-.42.17-1.56-.73-2.54-3-2.54-4.82C4.33 7.12 7.53 4.2 12.28 4.2c3.78 0 6.72 2.7 6.72 6.3 0 3.76-2.37 6.78-5.66 6.78-1.1 0-2.14-.58-2.5-1.26l-.68 2.6c-.25.95-.92 2.14-1.37 2.86A10 10 0 0 0 12 2z',
  tiktok: 'M9 12a4 4 0 1 0 4 4V4a5 5 0 0 0 5 5',
}
</script>

<template>
  <footer class="w-full bg-muted/50">
    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
      <!-- Main Footer Content -->
      <div class="grid gap-8 py-12 lg:grid-cols-6 lg:gap-12 lg:py-16">
        <!-- Brand + Newsletter — spans 2 cols -->
        <div class="lg:col-span-2">
          <!-- Brand -->
          <a href="#" class="inline-block">
            <span v-if="!logoSrc" class="text-xl font-bold tracking-tight">{{ brandName }}</span>
            <img v-else :src="logoSrc" alt="" class="h-8 w-auto" />
          </a>
          <p v-if="tagline" class="mt-2 text-sm text-muted-foreground">
            {{ tagline }}
          </p>

          <!-- Newsletter -->
          <div class="mt-8">
            <h3 class="text-sm font-semibold">
              {{ newsletterHeading }}
            </h3>
            <p class="mt-1 text-sm text-muted-foreground">
              {{ newsletterDescription }}
            </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>
          </div>

          <!-- Social Icons -->
          <div v-if="socialLinks.length" class="mt-6 flex gap-3">
            <a
              v-for="social in socialLinks"
              :key="social.label"
              :href="social.href"
              :aria-label="social.label"
              class="text-muted-foreground transition-colors hover:text-foreground"
            >
              <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="socialIcons[social.icon]" />
              </svg>
            </a>
          </div>
        </div>

        <!-- Link Columns — 4 cols -->
        <div class="grid grid-cols-2 gap-8 sm:grid-cols-4 lg:col-span-4">
          <div
            v-for="group in linkGroups"
            :key="group.title"
            class="space-y-3"
          >
            <h3 class="text-sm font-semibold">
              {{ group.title }}
            </h3>
            <ul class="space-y-2.5">
              <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>

      <Separator />

      <!-- Copyright Bar -->
      <div class="flex flex-col items-center justify-between gap-4 py-6 text-sm sm:flex-row">
        <p class="text-muted-foreground">
          {{ formatCopyright(copyright) }}
        </p>
        <div v-if="legalLinks.length" class="flex flex-wrap items-center gap-4">
          <a
            v-for="link in legalLinks"
            :key="link.label"
            :href="link.href"
            class="text-muted-foreground transition-colors hover:text-foreground"
          >
            {{ link.label }}
          </a>
        </div>
      </div>
    </div>
  </footer>
</template>