import Link from "next/link";
import { Shield, Mail, Linkedin, Github } from "lucide-react";

const footerLinks = {
  services: [
    { name: "Audit IAM", href: "/services#audit" },
    { name: "Intégration OIDC", href: "/services#oidc" },
    { name: "Migration Zero Trust", href: "/services#zero-trust" },
    { name: "Sécurisation AD / Entra", href: "/services#ad-entra" },
  ],
  resources: [
    { name: "Articles", href: "/articles" },
    { name: "Démo OIDC", href: "/demos/oidc-flow" },
    { name: "Démo OAuth", href: "/demos/oauth-playground" },
    { name: "Démo Zero Trust", href: "/demos/zero-trust" },
  ],
};

export function Footer() {
  return (
    <footer className="bg-cosmos-950 border-t border-cosmos-800">
      <div className="mx-auto max-w-7xl px-6 py-12 lg:px-8">
        <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
          <div className="md:col-span-1">
            <Link href="/" className="flex items-center gap-3">
              <div className="w-9 h-9 rounded-lg bg-araucaria-500 flex items-center justify-center">
                <Shield className="w-5 h-5 text-cosmos-950" />
              </div>
              <span className="text-lg font-bold text-nieve">Der-topogo</span>
            </Link>
            <p className="mt-4 text-sm text-cosmos-400 leading-relaxed">
              Consulting senior en Identity & Access Management et sécurité
              informatique. Expert OIDC, OAuth, Zero Trust, AD, Entra ID.
            </p>
          </div>

          <div>
            <h3 className="text-sm font-semibold text-araucaria-400 uppercase tracking-wider">
              Services
            </h3>
            <ul className="mt-4 space-y-3">
              {footerLinks.services.map((link) => (
                <li key={link.name}>
                  <Link
                    href={link.href}
                    className="text-sm text-cosmos-300 hover:text-nieve transition-colors"
                  >
                    {link.name}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          <div>
            <h3 className="text-sm font-semibold text-araucaria-400 uppercase tracking-wider">
              Ressources
            </h3>
            <ul className="mt-4 space-y-3">
              {footerLinks.resources.map((link) => (
                <li key={link.name}>
                  <Link
                    href={link.href}
                    className="text-sm text-cosmos-300 hover:text-nieve transition-colors"
                  >
                    {link.name}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          <div>
            <h3 className="text-sm font-semibold text-araucaria-400 uppercase tracking-wider">
              Contact
            </h3>
            <div className="mt-4 space-y-3">
              <a
                href="mailto:contact@your-domain.com"
                className="flex items-center gap-2 text-sm text-cosmos-300 hover:text-nieve transition-colors"
              >
                <Mail className="w-4 h-4" />
                contact@your-domain.com
              </a>
              <div className="flex gap-4 pt-2">
                <a
                  href="#"
                  className="text-cosmos-400 hover:text-nieve transition-colors"
                  aria-label="LinkedIn"
                >
                  <Linkedin className="w-5 h-5" />
                </a>
                <a
                  href="#"
                  className="text-cosmos-400 hover:text-nieve transition-colors"
                  aria-label="GitHub"
                >
                  <Github className="w-5 h-5" />
                </a>
              </div>
            </div>
          </div>
        </div>

        <div className="mt-12 pt-8 border-t border-cosmos-800">
          <p className="text-xs text-cosmos-500 text-center">
            &copy; {new Date().getFullYear()} Der-topogo. Tous droits réservés.
          </p>
        </div>
      </div>
    </footer>
  );
}