/**
 * @fileoverview React component for Footer.jsx
 * 
 * @module pages.HomePage.Footer
 */

import { Link } from "react-router-dom";
import { Github, BookOpen, Mail, Heart } from "lucide-react";
import logo from "../../assets/logo_decoda.svg";

const Footer = () => {
  const currentYear = new Date().getFullYear();

  return (
    <footer className="relative bg-white border-t border-gray-200">
      {/* Conteúdo do Footer */}
      <div className="mx-auto max-w-7xl px-6 py-8 lg:py-12 lg:px-8">
        {/* Header do Footer - Logo e Links */}
        <div className="sm:flex sm:items-center sm:justify-between">
          {/* Logo e Nome */}
          <Link to="/" className="flex items-center mb-4 sm:mb-0 space-x-3">
            <div className="flex items-center gap-x-3">
              {/* Logo Blockly-NT */}
              <img
                src={logo}
                alt="Decoda Logo"
                className="h-[83px] transition-transform duration-200 group-hover:scale-110"
              />
            </div>
          </Link>

          {/* Links de Navegação */}
          <ul className="flex flex-wrap items-center mb-6 sm:mb-0 gap-4 md:gap-6">
            <li>
              <Link
                to="/sobre"
                className="text-gray-600 hover:text-blue-600 dark:hover:text-brand-500 transition-colors"
              >
                Sobre Nós
              </Link>
            </li>
            <li>
              <a
                href="/docs/"
                target="_blank"
                rel="noopener noreferrer"
                className="text-gray-600 hover:text-blue-600 dark:hover:text-brand-500 transition-colors"
              >
                Documentação
              </a>
            </li>
            <li>
              <Link
                to="/faq"
                className="text-gray-600 hover:text-blue-600 dark:hover:text-brand-500 transition-colors"
              >
                FAQ
              </Link>
            </li>
            <li>
              <Link
                to="/privacy-policy"
                className="text-gray-600 hover:text-blue-600 dark:hover:text-brand-500 transition-colors"
              >
                Privacidade
              </Link>
            </li>
          </ul>
        </div>

        {/* Divider */}
        <hr className="my-8 border-gray-300 dark:border-gray-700" />

        {/* Copyright e Créditos */}
        <div className="flex flex-col sm:flex-row items-center justify-between gap-4">
          <div className="flex items-center gap-2 text-sm text-gray-600">
            <span>© {currentYear}</span>
            <Link
              to="/"
              className="hover:text-blue-600 dark:hover:text-brand-500 transition-colors"
            >
              Decoda
            </Link>
            <span>•</span>
            <span>Todos os direitos reservados</span>
          </div>

          <div className="flex items-center gap-2 text-sm text-gray-600">
            <span>Feito com</span>
            <Heart className="w-4 h-4 text-red-500 fill-red-500" />
            <span>para educação</span>
          </div>
        </div>

        {/* Licença */}
        <div className="mt-4 text-center">
          <p className="text-xs text-gray-500 dark:text-gray-500">
            Licenciado sob{" "}
            <a
              href="https://opensource.org/licenses/MIT"
              target="_blank"
              rel="noopener noreferrer"
              className="text-blue-600 dark:text-brand-500 hover:underline"
            >
              MIT License
            </a>
          </p>
        </div>
      </div>
    </footer>
  );
};

export default Footer;