import React from 'react';

export const Footer: React.FC = () => (
  <footer className="bg-banquise-blue-dark text-white py-16 px-8 pt-16 relative z-3 border-t border-white/10 w-full box-border">
    <div className="flex flex-wrap justify-between max-w-6xl mx-auto">
      <div className="flex-1 min-w-64 mb-8 text-left px-6">
        <h4 className="text-xl mb-6 text-banquise-blue-lightest relative pb-3 after:content-[''] after:absolute after:bottom-0 after:left-0 after:w-10 after:h-0.5 after:bg-banquise-blue-lightest">
          Services
        </h4>
        <ul className="list-none p-0 m-0">
          <li className="mb-3">
            <a href="https://wiki.labanquise.org" className="text-banquise-gray/80 no-underline transition-all duration-200 inline-flex items-center hover:text-banquise-gray hover:translate-x-1">
              Wiki
            </a>
          </li>
          <li className="mb-3">
            <a href="https://git.labanquise.org" className="text-banquise-gray/80 no-underline transition-all duration-200 inline-flex items-center hover:text-banquise-gray hover:translate-x-1">
              Gitea
            </a>
          </li>
          <li className="mb-3">
            <a href="https://panel.labanquise.org" className="text-banquise-gray/80 no-underline transition-all duration-200 inline-flex items-center hover:text-banquise-gray hover:translate-x-1">
              Panel
            </a>
          </li>
        </ul>
      </div>
      
      <div className="flex-1 min-w-64 mb-8 text-left px-6">
        <h4 className="text-xl mb-6 text-banquise-blue-lightest relative pb-3 after:content-[''] after:absolute after:bottom-0 after:left-0 after:w-10 after:h-0.5 after:bg-banquise-blue-lightest">
          Communauté
        </h4>
        <ul className="list-none p-0 m-0">
          <li className="mb-3">
            <a href="https://discord.gg/labanquise" className="text-banquise-gray/80 no-underline transition-all duration-200 inline-flex items-center hover:text-banquise-gray hover:translate-x-1">
              Discord
            </a>
          </li>
        </ul>
      </div>
      
      <div className="flex-1 min-w-64 mb-8 text-left px-6">
        <h4 className="text-xl mb-6 text-banquise-blue-lightest relative pb-3 after:content-[''] after:absolute after:bottom-0 after:left-0 after:w-10 after:h-0.5 after:bg-banquise-blue-lightest">
          Support
        </h4>
        <ul className="list-none p-0 m-0">
          <li className="mb-3">
            <a href="#" className="text-banquise-gray/80 no-underline transition-all duration-200 inline-flex items-center hover:text-banquise-gray hover:translate-x-1">
              Documentation
            </a>
          </li>
          <li className="mb-3">
            <a href="#" className="text-banquise-gray/80 no-underline transition-all duration-200 inline-flex items-center hover:text-banquise-gray hover:translate-x-1">
              Contact
            </a>
          </li>
        </ul>
      </div>
    </div>
    
    <div className="border-t border-white/10 pt-6 mt-8 text-center text-sm text-white/70 max-w-6xl mx-auto">
      © 2024 La Banquise. Tous droits réservés.
    </div>
  </footer>
);