import Link from 'next/link'
import { HiSparkles, HiMail, HiPhone, HiArrowUp } from 'react-icons/hi'

export default function Footer() {
  const scrollToTop = () => {
    window.scrollTo({ top: 0, behavior: 'smooth' })
  }

  const currentYear = new Date().getFullYear()

  return (
    <footer className="bg-gray-900 text-white" role="contentinfo">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
          {/* Brand */}
          <div className="col-span-1 md:col-span-2">
            <div className="flex items-center space-x-3 mb-4">
              <div className="bg-primary-600 p-2 rounded-xl">
                <HiSparkles className="h-6 w-6 text-white" aria-hidden="true" />
              </div>
              <div>
                <span className="text-xl font-bold">AI.Wiki.BR</span>
                <p className="text-sm text-gray-400">Por Prof. Gabriel Ramos</p>
              </div>
            </div>
            <p className="text-gray-300 mb-6 max-w-md leading-relaxed">
              Transformando a prática jurídica e administrativa através da Inteligência Artificial. 
              Aprenda como usar IA no seu dia a dia profissional e nos estudos.
            </p>
            <div className="space-y-3">
              <div className="flex items-center space-x-3 text-sm text-gray-400">
                <HiMail className="h-4 w-4 flex-shrink-0" aria-hidden="true" />
                <a 
                  href="mailto:contato@ai.wiki.br" 
                  className="hover:text-white transition-colors duration-200 focus:ring-2 focus:ring-primary-300 rounded"
                >
                  contato@ai.wiki.br
                </a>
              </div>
              <div className="flex items-center space-x-3 text-sm text-gray-400">
                <HiPhone className="h-4 w-4 flex-shrink-0" aria-hidden="true" />
                <a 
                  href="tel:+5511999999999" 
                  className="hover:text-white transition-colors duration-200 focus:ring-2 focus:ring-primary-300 rounded"
                >
                  +55 (11) 99999-9999
                </a>
              </div>
            </div>
          </div>

          {/* Quick Links */}
          <div>
            <h3 className="text-lg font-semibold mb-4">Links Rápidos</h3>
            <ul className="space-y-3">
              <li>
                <Link 
                  href="/" 
                  className="text-gray-300 hover:text-white transition-colors duration-200 focus:ring-2 focus:ring-primary-300 rounded"
                >
                  Início
                </Link>
              </li>
              <li>
                <Link 
                  href="/prompts" 
                  className="text-gray-300 hover:text-white transition-colors duration-200 focus:ring-2 focus:ring-primary-300 rounded"
                >
                  Biblioteca de Prompts
                </Link>
              </li>
              <li>
                <a 
                  href="#sobre" 
                  className="text-gray-300 hover:text-white transition-colors duration-200 focus:ring-2 focus:ring-primary-300 rounded"
                  onClick={(e) => {
                    e.preventDefault()
                    const element = document.querySelector('#sobre')
                    if (element) element.scrollIntoView({ behavior: 'smooth' })

                >
                  Sobre o Professor
                </a>
              </li>
              <li>
                <a 
                  href="#contato" 
                  className="text-gray-300 hover:text-white transition-colors duration-200 focus:ring-2 focus:ring-primary-300 rounded"
                  onClick={(e) => {
                    e.preventDefault()
                    const element = document.querySelector('#contato')
                    if (element) element.scrollIntoView({ behavior: 'smooth' })

                >
                  Contato
                </a>
              </li>
            </ul>
          </div>

          {/* Categories */}
          <div>
            <h3 className="text-lg font-semibold mb-4">Áreas de Atuação</h3>
            <ul className="space-y-3">
              <li>
                <span className="text-gray-300">Escritórios Jurídicos</span>
              </li>
              <li>
                <span className="text-gray-300">Escritórios Administrativos</span>
              </li>
              <li>
                <span className="text-gray-300">Concursos Públicos</span>
              </li>
              <li>
                <span className="text-gray-300">Estudos Avançados</span>
              </li>
            </ul>
          </div>
        </div>

        <div className="border-t border-gray-800 mt-12 pt-8">
          <div className="flex flex-col md:flex-row justify-between items-center">
            <p className="text-gray-400 text-sm">
              © {currentYear} AI.Wiki.BR. Todos os direitos reservados.
            </p>
            <p className="text-gray-400 text-sm mt-2 md:mt-0">
              Desenvolvido com ❤️ para a comunidade jurídica e administrativa brasileira
            </p>
          </div>
        </div>
      </div>

      {/* Scroll to top button */}
      <button
        onClick={scrollToTop}
        className="fixed bottom-6 right-6 bg-primary-600 hover:bg-primary-700 text-white p-3 rounded-full shadow-hard hover:shadow-medium transition-all duration-200 focus:ring-4 focus:ring-primary-200 z-40"
        aria-label="Voltar ao topo"
      >
        <HiArrowUp className="h-5 w-5" aria-hidden="true" />
      </button>
    </footer>
  )
}