site-web-targo/src/components/layout/Footer.tsx

import { Phone, Mail, MapPin } from "lucide-react";
import targoLogo from "@/assets/targo-logo.png";
const Footer = () => {
  return <footer className="bg-targo-dark text-white pt-24 pb-12 border-t border-white/5 relative overflow-hidden">
      {/* Decorative background element */}
      <div className="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 className="container">
        <div className="grid md:grid-cols-4 gap-12 mb-12">
          {/* Brand */}
          <div className="md:col-span-1 space-y-6">
            <img src={targoLogo} alt="Targo - 100% Fibre" className="h-10 mb-2 brightness-0 invert" />
            <p className="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 className="font-display font-bold mb-6 text-lg">Services</h4>
            <ul className="space-y-3 text-sm text-white/60">
              <li><a href="/internet" className="hover:text-targo-green transition-colors">Internet</a></li>
              <li><a href="/television" className="hover:text-targo-green transition-colors">Télévision</a></li>
              <li><a href="/telephone" className="hover:text-targo-green transition-colors">Téléphone</a></li>
              <li><a href="/support" className="hover:text-targo-green transition-colors">Support</a></li>
            </ul>
          </div>

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

          {/* Contact */}
          <div>
            <h4 className="font-sans font-bold mb-8 text-white uppercase tracking-widest text-xs">Nous joindre</h4>
            <ul className="space-y-5 text-sm">
              <li className="flex items-center gap-4 group">
                <div className="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 className="w-5 h-5" />
                </div>
                <div className="flex flex-col">
                  <span className="text-white/50 text-[10px] uppercase font-bold tracking-wider">Appelez-nous</span>
                  <span className="text-white/80 font-medium group-hover:text-targo-green transition-colors">514-448-0773</span>
                </div>
              </li>
              <li className="flex items-center gap-4 group">
                <div className="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 className="w-5 h-5" />
                </div>
                <div className="flex flex-col">
                  <span className="text-white/50 text-[10px] uppercase font-bold tracking-wider">Écrivez-nous</span>
                  <span className="text-white/80 font-medium group-hover:text-targo-green transition-colors">support@targo.ca</span>
                </div>
              </li>
              <li className="flex items-start gap-4 group">
                <div className="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 className="w-5 h-5" />
                </div>
                <div className="flex flex-col">
                  <span className="text-white/50 text-[10px] uppercase font-bold tracking-wider">Visitez-nous</span>
                  <span className="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 className="pt-12 border-t border-white/5 flex flex-col md:flex-row justify-between items-center gap-6">
          <p className="text-xs text-white/40 font-medium">
            © {new Date().getFullYear()} TARGO Communications. Tous droits réservés.
          </p>
          <div className="flex items-center gap-8 text-xs font-semibold uppercase tracking-wider text-white/40">
            <a href="/support" className="hover:text-targo-green transition-all">Plan d'accessibilité</a>
            <a href="/support" className="hover:text-targo-green transition-all">Conditions d'utilisation</a>
          </div>
        </div>
      </div>
    </footer>;
};
export default Footer;