import { Globe, Rocket, Shield } from 'lucide-react';
import React from 'react';

const Footer: React.FC = () => {
  return (
    <div className="bg-white dark:bg-background-dark border-y border-[#dbe0e6] dark:border-gray py-16">
      <div className="px-6 md:px-20 lg:px-40 max-w-300 mx-auto grid grid-cols-1 md:grid-cols-4 gap-12">
        <div className="col-span-1 md:col-span-1 flex flex-col gap-4">
          <div className="flex items-center gap-2">
            <div className="size-6 px-4 py-4 bg-primary rounded flex items-center justify-center text-white">
              <span className="material-symbols-outlined text-sm">
                <Rocket />
              </span>
            </div>
            <span className="text-lg font-black tracking-tight">SCPro360</span>
          </div>
          <p className="text-sm text-black dark:text-gray-800">
            Favoriser l'employabilité mondiale grâce à une technologie
            accessible.
          </p>
        </div>
        <div>
          <h4 className="font-bold mb-6">Produit</h4>
          <ul className="flex flex-col gap-4 text-sm text-black dark:text-gray-800">
            <li>
              <a className="hover:text-primary transition-colors" href="#">
                Plateforme
              </a>
            </li>
            <li>
              <a className="hover:text-primary transition-colors" href="#">
                Mode Hors-ligne
              </a>
            </li>
            <li>
              <a className="hover:text-primary transition-colors" href="#">
                Tarifs
              </a>
            </li>
          </ul>
        </div>
        <div>
          <h4 className="font-bold mb-6">Support</h4>
          <ul className="flex flex-col gap-4 text-sm text-black dark:text-gray-800">
            <li>
              <a className="hover:text-primary transition-colors" href="#">
                Documentation
              </a>
            </li>
            <li>
              <a className="hover:text-primary transition-colors" href="#">
                Centre d'aide
              </a>
            </li>
            <li>
              <a className="hover:text-primary transition-colors" href="#">
                Contactez-nous
              </a>
            </li>
          </ul>
        </div>
        <div>
          <h4 className="font-bold mb-6">Entreprise</h4>
          <ul className="flex flex-col gap-4 text-sm text-black dark:text-gray-800">
            <li>
              <a className="hover:text-primary transition-colors" href="#">
                À propos
              </a>
            </li>
            <li>
              <a className="hover:text-primary transition-colors" href="#">
                Carrières
              </a>
            </li>
            <li>
              <a className="hover:text-primary transition-colors" href="#">
                Conditions d'utilisation
              </a>
            </li>
          </ul>
        </div>
      </div>
      <div className="px-6 md:px-20 lg:px-40 max-w-300 mx-auto mt-16 pt-8 border-t border-[#dbe0e6] dark:border-gray flex flex-col md:flex-row justify-between items-center gap-6">
        <p className="text-xs text-black">
          © 2026 SCPro360. Tous droits réservés.
        </p>
        <div className="flex gap-6">
          
          <a  className="text-[#617589] hover:text-primary transition-colors"
            href="#">
            <span className="material-symbols-outlined"> <Globe /> </span>
          </a>
          
          <a  className="text-[#617589] hover:text-primary transition-colors"
            href="#">
            <span className="material-symbols-outlined"> <Shield /> </span>
          </a>
        </div>
      </div>
    </div>
  );
};

export default Footer;