import React from 'react';
import { URLS, SITE_CONFIG } from '../../config/constants';

export const Footer: React.FC = () => (
  <footer className="bg-banquise-blue-dark text-white py-12 sm:py-16 md:py-20 px-4 sm:px-6 md:px-8 relative z-10 border-t border-banquise-blue-lightest/20 w-full box-border">
    <div className="flex flex-col md:flex-row justify-between max-w-6xl mx-auto gap-6 sm:gap-8">
      <div className="flex-1 min-w-0 mb-6 sm:mb-8 md:mb-0 text-left">
        <h4 className="text-lg sm:text-xl mb-6 sm:mb-8 text-banquise-blue-lightest relative pb-3 sm:pb-4 after:content-[''] after:absolute after:bottom-0 after:left-0 after:w-12 after:h-0.5 after:bg-gradient-to-r after:from-banquise-blue-lightest after:to-banquise-blue">
          Services
        </h4>
        <ul className="list-none p-0 m-0 space-y-2 sm:space-y-3">
          <li>
            <a href={URLS.services.wiki} className="text-banquise-gray/80 no-underline transition-all duration-200 inline-flex items-center hover:text-banquise-gray hover:translate-x-1 text-sm sm:text-base">
              Wiki
            </a>
          </li>
          <li>
            <a href={URLS.services.gitea} className="text-banquise-gray/80 no-underline transition-all duration-200 inline-flex items-center hover:text-banquise-gray hover:translate-x-1 text-sm sm:text-base">
              Gitea
            </a>
          </li>
          <li>
            <a href={URLS.services.panel} className="text-banquise-gray/80 no-underline transition-all duration-200 inline-flex items-center hover:text-banquise-gray hover:translate-x-1 text-sm sm:text-base">
              Panel
            </a>
          </li>
        </ul>
      </div>
      
      <div className="flex-1 min-w-0 mb-6 sm:mb-8 md:mb-0 text-left">
        <h4 className="text-lg sm:text-xl mb-6 sm:mb-8 text-banquise-blue-lightest relative pb-3 sm:pb-4 after:content-[''] after:absolute after:bottom-0 after:left-0 after:w-12 after:h-0.5 after:bg-gradient-to-r after:from-banquise-blue-lightest after:to-banquise-blue">
          Communauté
        </h4>
        <ul className="list-none p-0 m-0 space-y-2 sm:space-y-3">
          <li>
            <a href={URLS.social.discord} className="text-banquise-gray/80 no-underline transition-all duration-200 inline-flex items-center hover:text-banquise-gray hover:translate-x-1 text-sm sm:text-base">
              Discord
            </a>
          </li>
        </ul>
      </div>
      
      <div className="flex-1 min-w-0 mb-6 sm:mb-8 md:mb-0 text-left">
        <h4 className="text-lg sm:text-xl mb-6 sm:mb-8 text-banquise-blue-lightest relative pb-3 sm:pb-4 after:content-[''] after:absolute after:bottom-0 after:left-0 after:w-12 after:h-0.5 after:bg-gradient-to-r after:from-banquise-blue-lightest after:to-banquise-blue">
          Support
        </h4>
        <ul className="list-none p-0 m-0 space-y-2 sm:space-y-3">
          <li>
            <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 text-sm sm:text-base">
              Documentation
            </a>
          </li>
          <li>
            <a href={URLS.contact.email} className="text-banquise-gray/80 no-underline transition-all duration-200 inline-flex items-center hover:text-banquise-gray hover:translate-x-1 text-sm sm:text-base">
              Contact
            </a>
          </li>
        </ul>
      </div>
    </div>
    
    <div className="border-t border-banquise-blue-lightest/20 pt-6 sm:pt-8 mt-8 sm:mt-12 text-center text-xs sm:text-sm text-banquise-gray/70 max-w-6xl mx-auto">
      © 2024 {SITE_CONFIG.name}. Tous droits réservés.
    </div>
  </footer>
);