<template>
  <footer class="w-full border-t">
    <!-- Trust Badges -->
    <div class="border-b">
      <div class="container mx-auto grid grid-cols-2 gap-6 px-4 py-8 md:grid-cols-4 md:px-6">
        <div class="flex items-center gap-3">
          <div class="flex size-10 shrink-0 items-center justify-center rounded-full bg-muted">
            <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="M5 18H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h3.19M15 6h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-3.19" /><line x1="23" x2="23" y1="13" y2="11" /><path d="M11 6l-4 6h6l-4 6" /></svg>
          </div>
          <div>
            <p class="text-sm font-medium">Free Shipping</p>
            <p class="text-xs text-muted-foreground">On orders over 50 €</p>
          </div>
        </div>
        <div class="flex items-center gap-3">
          <div class="flex size-10 shrink-0 items-center justify-center rounded-full bg-muted">
            <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="M21 12V7H5a2 2 0 0 1 0-4h14v4" /><path d="M3 5v14a2 2 0 0 0 2 2h16v-5" /><path d="M18 12a2 2 0 0 0 0 4h4v-4Z" /></svg>
          </div>
          <div>
            <p class="text-sm font-medium">Secure Payment</p>
            <p class="text-xs text-muted-foreground">SSL encrypted checkout</p>
          </div>
        </div>
        <div class="flex items-center gap-3">
          <div class="flex size-10 shrink-0 items-center justify-center rounded-full bg-muted">
            <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="m7.5 4.27 9 5.15" /><path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z" /><path d="m3.3 7 8.7 5 8.7-5" /><path d="M12 22V12" /></svg>
          </div>
          <div>
            <p class="text-sm font-medium">Easy Returns</p>
            <p class="text-xs text-muted-foreground">30-day return policy</p>
          </div>
        </div>
        <div class="flex items-center gap-3">
          <div class="flex size-10 shrink-0 items-center justify-center rounded-full bg-muted">
            <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 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197M15 6.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6 3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-13.5 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z" /></svg>
          </div>
          <div>
            <p class="text-sm font-medium">Customer Support</p>
            <p class="text-xs text-muted-foreground">Mon–Fri, 9am–5pm</p>
          </div>
        </div>
      </div>
    </div>

    <!-- Payment Methods + Links -->
    <div class="container mx-auto flex flex-col items-center gap-6 px-4 py-8 md:flex-row md:justify-between md:px-6">
      <!-- Payment Icons (simplified placeholders) -->
      <div class="flex flex-wrap items-center gap-3">
        <div class="flex h-8 w-12 items-center justify-center rounded border bg-background text-[10px] font-bold text-muted-foreground">
          VISA
        </div>
        <div class="flex h-8 w-12 items-center justify-center rounded border bg-background text-[10px] font-bold text-muted-foreground">
          MC
        </div>
        <div class="flex h-8 w-12 items-center justify-center rounded border bg-background text-[10px] font-bold text-muted-foreground">
          AMEX
        </div>
        <div class="flex h-8 w-12 items-center justify-center rounded border bg-background text-[10px] font-bold text-muted-foreground">
          PayPal
        </div>
        <div class="flex h-8 w-12 items-center justify-center rounded border bg-background text-[10px] font-bold text-muted-foreground">
          Klarna
        </div>
      </div>

      <!-- Legal Links -->
      <div class="flex flex-wrap items-center gap-4 text-sm text-muted-foreground">
        <span>&copy; {{ new Date().getFullYear() }} STORE</span>
        <a href="#" class="transition-colors hover:text-foreground">Privacy</a>
        <a href="#" class="transition-colors hover:text-foreground">Terms</a>
        <a href="#" class="transition-colors hover:text-foreground">Imprint</a>
      </div>
    </div>
  </footer>
</template>