<script setup lang="ts">
import { Phone, Mail, MapPin } from "lucide-vue-next";
import targoLogo from "@/assets/targo-logo.png";

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

<template>
  <footer class="bg-targo-dark text-white pt-24 pb-12 border-t border-white/5 relative overflow-hidden">
    <!-- Decorative background element -->
    <div class="absolute top-0 right-0 w-[500px] h-[500px] bg-targo-green/5 rounded-full blur-[120px] -translate-y-1/2 translate-x-1/2 pointer-events-none" />

    <div class="container">
      <div class="grid md:grid-cols-4 gap-12 mb-12">
        <!-- Brand -->
        <div class="md:col-span-1 space-y-6">
          <img :src="targoLogo" alt="Targo - 100% Fibre" class="h-10 mb-2 brightness-0 invert" />
          <p class="text-white/60 text-sm leading-relaxed max-w-xs">La puissance de la fibre locale.
La fiabilité, la performance et l'expertise à proximité pour propulser vos communications.</p>
        </div>

        <!-- Quick links -->
        <div>
          <h4 class="font-display font-bold mb-6 text-lg">Services</h4>
          <ul class="space-y-3 text-sm text-white/60">
            <li><RouterLink to="/internet" class="hover:text-targo-green transition-colors">Internet</RouterLink></li>
            <li><RouterLink to="/television" class="hover:text-targo-green transition-colors">Télévision</RouterLink></li>
            <li><RouterLink to="/telephone" class="hover:text-targo-green transition-colors">Téléphone</RouterLink></li>
            <li><RouterLink to="/support" class="hover:text-targo-green transition-colors">Support</RouterLink></li>
          </ul>
        </div>

        <!-- Company -->
        <div>
          <h4 class="font-display font-bold mb-6 text-lg">Plus</h4>
          <ul class="space-y-3 text-sm text-white/60">
            <li><a href="#apropos" class="hover:text-targo-green transition-colors">À propos</a></li>
            <li><a href="#contact" class="hover:text-targo-green transition-colors">Contact</a></li>
            <li><a href="https://store.targo.ca/clients" class="hover:text-targo-green transition-colors">Mon compte</a></li>
            <li><RouterLink to="/politique-de-confidentialite" class="hover:text-targo-green transition-colors">Politique de confidentialité</RouterLink></li>
          </ul>
        </div>

        <!-- Contact -->
        <div>
          <h4 class="font-sans font-bold mb-8 text-white uppercase tracking-widest text-xs">Nous joindre</h4>
          <ul class="space-y-5 text-sm">
            <li class="flex items-center gap-4 group">
              <div class="w-10 h-10 rounded-xl bg-white/5 flex items-center justify-center group-hover:bg-targo-green group-hover:text-white transition-all duration-300">
                <Phone class="w-5 h-5" />
              </div>
              <div class="flex flex-col">
                <span class="text-white/50 text-[10px] uppercase font-bold tracking-wider">Appelez-nous</span>
                <span class="text-white/80 font-medium group-hover:text-targo-green transition-colors">514-448-0773</span>
              </div>
            </li>
            <li class="flex items-center gap-4 group">
              <div class="w-10 h-10 rounded-xl bg-white/5 flex items-center justify-center group-hover:bg-targo-green group-hover:text-white transition-all duration-300">
                <Mail class="w-5 h-5" />
              </div>
              <div class="flex flex-col">
                <span class="text-white/50 text-[10px] uppercase font-bold tracking-wider">Écrivez-nous</span>
                <span class="text-white/80 font-medium group-hover:text-targo-green transition-colors">support@targo.ca</span>
              </div>
            </li>
            <li class="flex items-start gap-4 group">
              <div class="w-10 h-10 rounded-xl bg-white/5 flex items-center justify-center group-hover:bg-targo-green group-hover:text-white transition-all duration-300 mt-1">
                <MapPin class="w-5 h-5" />
              </div>
              <div class="flex flex-col">
                <span class="text-white/50 text-[10px] uppercase font-bold tracking-wider">Visitez-nous</span>
                <span class="text-white/80 font-medium leading-relaxed group-hover:text-targo-green transition-colors">
                  1867 chemin de la rivière<br />Ste-Clotilde, Québec
                </span>
              </div>
            </li>
          </ul>
        </div>
      </div>

      <!-- Bottom -->
      <div class="pt-12 border-t border-white/5 flex flex-col md:flex-row justify-between items-center gap-6">
        <p class="text-xs text-white/40 font-medium">
          © {{ currentYear }} TARGO Communications. Tous droits réservés.
        </p>
        <div class="flex items-center gap-8 text-xs font-semibold uppercase tracking-wider text-white/40">
          <RouterLink to="/accessibilite" class="hover:text-targo-green transition-all">Plan d'accessibilité</RouterLink>
          <RouterLink to="/politique-de-confidentialite" class="hover:text-targo-green transition-all">Conditions d'utilisation</RouterLink>
        </div>
      </div>
    </div>
  </footer>
</template>
