"use client";

import { CookiePreferencesButton } from "@/components/cookie-consent/CookiePreferencesButton";
import {
  directLinks,
  navigation,
  type NavigationItem,
} from "@/data/links/navigation";
import {
  IconBrandLinkedin,
} from "@tabler/icons-react";
import Link from "next/link";
import { CalButton } from "./cal-button";
import { Logo } from "./logo";

export function Footer() {
  const socials = [
    { title: "LinkedIn", href: "https://www.linkedin.com/company/acieb-courtage-electricité-gaz", icon: IconBrandLinkedin },
  ];

  const legal = [
    { title: "Mentions légales", href: "/mentions-legales/" },
    {
      title: "Politique de confidentialité",
      href: "/politique-confidentialite/",
    },
    { title: "CGU", href: "/cgu/" },
  ];

  return (
    <footer
      className="w-full max-w-7xl mx-auto rounded-xl m-10"
      itemScope
      itemType="https://schema.org/Organization"
      role="contentinfo"
    >
      <div className="max-w-7xl mx-auto px-8 py-20">
        <div className="flex flex-col md:flex-row justify-between gap-12">
          <div className="flex items-start flex-col">
            <Logo />
            <p className="text-2xl font-medium mt-8 max-w-md" itemProp="description">
              Votre partenaire pour optimiser vos contrats d&apos;énergie
              professionnels.
            </p>
            {/* CTA Rendez-vous */}
            <CalButton location="footer" className="mt-6 px-5 py-2.5">
              Prendre rendez-vous
            </CalButton>
          </div>

          <div className="grid justify-self-end grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-8">
            {/* Sections de navigation */}
            {navigation.map((section, idx) => (
              <nav
                key={idx}
                className="space-y-6"
                aria-labelledby={`footer-nav-heading-${idx}`}
              >
                <h2
                  id={`footer-nav-heading-${idx}`}
                  className="font-semibold text-gray-900"
                >
                  {section.label}
                </h2>
                <ul className="space-y-3" role="list">
                  {section.children?.map(
                    (item: NavigationItem, childIdx: number) => (
                      <li key={childIdx}>
                        <Link
                          href={item.href || "#"}
                          className="text-gray-700 hover:text-orange-700 text-sm transition-colors"
                        >
                          {item.label}
                        </Link>
                      </li>
                    )
                  )}
                </ul>
              </nav>
            ))}

            {/* Liens directs + Légal */}
            <nav className="space-y-6" aria-labelledby="footer-links-heading">
              <h2
                id="footer-links-heading"
                className="font-semibold text-gray-900"
              >
                Liens utiles
              </h2>
              <ul className="space-y-3" role="list">
                {directLinks.map((item, idx) => (
                  <li key={idx}>
                    <Link
                      href={item.href || "#"}
                      className="text-gray-700 hover:text-orange-700 text-sm transition-colors"
                    >
                      {item.label}
                    </Link>
                  </li>
                ))}
                {legal.map((item, idx) => (
                  <li key={`legal-${idx}`}>
                    <Link
                      href={item.href}
                      className="text-gray-700 hover:text-orange-700 text-sm transition-colors"
                    >
                      {item.title}
                    </Link>
                  </li>
                ))}
                <li>
                  <CookiePreferencesButton />
                </li>
              </ul>
            </nav>
          </div>
        </div>

        <div className="flex flex-col md:flex-row justify-between items-center pt-16 border-t border-gray-200 mt-12">
          <p className="text-sm text-gray-700">
            © {new Date().getFullYear()}{" "}
            <span itemProp="name">ACIEB Énergie</span>. Tous droits réservés.
          </p>
          <nav aria-label="Réseaux sociaux">
            <ul className="flex gap-4 mt-4 md:mt-0" role="list">
              {socials.map((social, idx) => (
                <li key={idx}>
                  <Link
                    href={social.href}
                    aria-label={`Suivez ACIEB Énergie sur ${social.title}`}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="text-gray-700 hover:text-orange-700 transition-colors focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 rounded"
                  >
                    <social.icon size={20} aria-hidden="true" />
                  </Link>
                </li>
              ))}
            </ul>
          </nav>
        </div>
      </div>
    </footer>
  );
}