import {
  FiFacebook,
  FiTwitter,
  FiInstagram,
  FiLinkedin,
  FiYoutube,
  FiArrowUpRight,
} from 'react-icons/fi'

const colResources = ['FAQ', 'Guides', 'Lexique', 'Documents']

const colDiscover = [
  'À propos',
  'Fonctionnement',
  'Revue de presse',
  'Nous rejoindre',
  'Nos partenaires',
  'Espace presse',
]

const colLegal = [
  'Mentions légales',
  'Politique de confidentialité',
  'Gestion des cookies',
  "Conditions générales d'utilisation",
]

const socials = [
  { Icon: FiFacebook,  label: 'Facebook'   },
  { Icon: FiTwitter,   label: 'Twitter / X' },
  { Icon: FiInstagram, label: 'Instagram'   },
  { Icon: FiLinkedin,  label: 'LinkedIn'    },
  { Icon: FiYoutube,   label: 'YouTube'     },
]

export default function Footer() {
  return (
    <footer className="bg-[#F2F8EE] text-slate-500 border-t border-[#9CCC8A]/20">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">

        {/* Main grid */}
        <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-10 py-16">

          {/* Brand */}
          <div className="sm:col-span-2 lg:col-span-1">
            <div className="flex items-center gap-2.5 mb-5">
              <img
                src="/img/ico.webp"
                alt="AssurezMoi"
                className="w-9 h-9 rounded-xl object-contain"
              />
              <span className="font-extrabold text-xl text-slate-900 tracking-tight">
                Assurez<span className="text-[#9CCC8A]">Moi</span>
              </span>
            </div>
            <address className="not-italic text-sm text-slate-500 leading-relaxed mb-4">
              Votre comparateur d'assurances<br />
              1 Rue john doe<br />
              59100 Roubaix, France
            </address>
            <a
              href="mailto:contact@assurezmoi.com"
              className="text-sm text-slate-500 hover:text-[#9CCC8A] transition-colors"
            >
              contact@assurezmoi.com
            </a>
            <div className="mt-2">
              <a
                href="tel:+33180891030"
                className="text-sm text-slate-500 hover:text-[#9CCC8A] transition-colors"
              >
                01 02 03 04 05
              </a>
            </div>
          </div>

          {/* Resources */}
          <div>
            <h4 className="text-slate-700 font-bold text-sm uppercase tracking-widest mb-5">
              Ressources
            </h4>
            <ul className="space-y-3">
              {colResources.map((r) => (
                <li key={r}>
                  <a
                    href="#"
                    className="text-sm text-slate-500 hover:text-slate-900 transition-colors flex items-center gap-1 group"
                  >
                    {r}
                    <FiArrowUpRight size={11} className="opacity-0 group-hover:opacity-100 transition-opacity" />
                  </a>
                </li>
              ))}
            </ul>
          </div>

          {/* Discover */}
          <div>
            <h4 className="text-slate-700 font-bold text-sm uppercase tracking-widest mb-5">
              Nous découvrir
            </h4>
            <ul className="space-y-3">
              {colDiscover.map((d) => (
                <li key={d}>
                  <a
                    href="#"
                    className="text-sm text-slate-500 hover:text-slate-900 transition-colors flex items-center gap-1 group"
                  >
                    {d}
                    <FiArrowUpRight size={11} className="opacity-0 group-hover:opacity-100 transition-opacity" />
                  </a>
                </li>
              ))}
            </ul>
          </div>

          {/* Legal */}
          <div>
            <h4 className="text-slate-700 font-bold text-sm uppercase tracking-widest mb-5">
              Informations légales
            </h4>
            <ul className="space-y-3">
              {colLegal.map((l) => (
                <li key={l}>
                  <a href="#" className="text-sm text-slate-500 hover:text-slate-900 transition-colors">
                    {l}
                  </a>
                </li>
              ))}
            </ul>
          </div>
        </div>

        {/* Bottom bar */}
        <div className="border-t border-[#9CCC8A]/20 py-6 flex flex-col sm:flex-row items-center justify-between gap-4">
          <p className="text-xs text-slate-400 text-center sm:text-left">
            © 2026 AssurezMoi — Tous droits réservés.
            <span className="mx-2 text-[#9CCC8A]/50">·</span>
            Comparateur de mutuelles santé & assurances
          </p>

          <div className="flex items-center gap-2">
            {socials.map(({ Icon, label }) => (
              <a
                key={label}
                href="#"
                aria-label={label}
                className="w-8 h-8 rounded-lg bg-[#9CCC8A]/15 hover:bg-[#9CCC8A] text-slate-500 hover:text-white flex items-center justify-center transition-all hover:-translate-y-0.5"
              >
                <Icon size={14} />
              </a>
            ))}
          </div>
        </div>
      </div>
    </footer>
  )
}
