components/Header.js

import { useState, useEffect } from 'react'
import Link from 'next/link'
import { useRouter } from 'next/router'
import { FiMenu, FiX, FiSearch } from 'react-icons/fi'
import { HiSparkles, HiBookOpen } from 'react-icons/hi'

export default function Header() {
  const [isMenuOpen, setIsMenuOpen] = useState(false)
  const [isScrolled, setIsScrolled] = useState(false)
  const router = useRouter()

  // Handle scroll effect for header
  useEffect(() => {
    const handleScroll = () => {
      setIsScrolled(window.scrollY > 20)
    }
    window.addEventListener('scroll', handleScroll)
    return () => window.removeEventListener('scroll', handleScroll)
  }, [])

  const navigation = [
    { 
      name: 'Início', 
      href: '/',
      icon: HiSparkles,
      description: 'Página principal com visão geral'
    },
    { 
      name: 'Biblioteca de Prompts', 
      href: '/prompts',
      icon: HiBookOpen,
      description: 'Prompts especializados para sua área'
    },
    { 
      name: 'Sobre', 
      href: '#sobre',
      description: 'Conheça o Prof. Gabriel Ramos'
    },
    { 
      name: 'Contato', 
      href: '#contato',
      description: 'Entre em contato conosco'
    },
  ]

  const handleNavClick = (href) => {
    setIsMenuOpen(false)
    if (href.startsWith('#')) {
      const element = document.querySelector(href)
      if (element) {
        element.scrollIntoView({ behavior: 'smooth' })
      }
    }
  }

  return (
    <header 
      className={`sticky top-0 z-50 transition-all duration-300 ${
        isScrolled 
          ? 'bg-white/95 backdrop-blur-md shadow-medium' 
          : 'bg-white shadow-soft'
      }`}
      role="banner"
    >
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex justify-between items-center py-4">
          {/* Logo */}
          <Link 
            href="/" 
            className="flex items-center space-x-3 group"
            aria-label="AI.Wiki.BR - Voltar ao início"
          >
            <div className="bg-primary-600 p-2 rounded-xl group-hover:bg-primary-700 transition-colors duration-200">
              <HiSparkles className="h-6 w-6 text-white" aria-hidden="true" />
            </div>
            <div>
              <span className="text-xl font-bold text-primary-700 group-hover:text-primary-800 transition-colors duration-200">
                AI.Wiki.BR
              </span>
              <p className="text-xs text-gray-600 -mt-1">Por Prof. Gabriel Ramos</p>
            </div>
          </Link>

          {/* Desktop Navigation */}
          <nav 
            className="hidden md:flex space-x-1"
            role="navigation"
            aria-label="Navegação principal"
          >
            {navigation.map((item) => (
              <Link
                key={item.name}
                href={item.href}
                onClick={(e) => {
                  if (item.href.startsWith('#')) {
                    e.preventDefault()
                    handleNavClick(item.href)
                  }

                className={`relative px-4 py-2 rounded-lg font-medium transition-all duration-200 group ${
                  router.pathname === item.href || (item.href.startsWith('#') && router.asPath === '/')
                    ? 'text-primary-700 bg-primary-50' 
                    : 'text-gray-700 hover:text-primary-600 hover:bg-primary-50'
                }`}
                aria-label={item.description}
              >
                <span className="flex items-center space-x-2">
                  {item.icon && <item.icon className="h-4 w-4" aria-hidden="true" />}
                  <span>{item.name}</span>
                </span>
                
                {/* Active indicator */}
                {(router.pathname === item.href || (item.href.startsWith('#') && router.asPath === '/')) && (
                  <div className="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-1 h-1 bg-primary-600 rounded-full" />
                )}
              </Link>
            ))}
          </nav>

          {/* Mobile menu button */}
          <button
            onClick={() => setIsMenuOpen(!isMenuOpen)}
            className="md:hidden p-2 rounded-lg text-gray-600 hover:text-primary-600 hover:bg-gray-100 focus:ring-4 focus:ring-primary-200 transition-all duration-200"
            aria-expanded={isMenuOpen}
            aria-label={isMenuOpen ? 'Fechar menu' : 'Abrir menu'}
          >
            {isMenuOpen ? <FiX className="h-6 w-6" /> : <FiMenu className="h-6 w-6" />}
          </button>
        </div>

        {/* Mobile Navigation */}
        {isMenuOpen && (
          <div className="md:hidden border-t border-gray-200 py-4 animate-slide-up">
            <nav 
              className="flex flex-col space-y-2"
              role="navigation"
              aria-label="Menu mobile"
            >
              {navigation.map((item) => (
                <Link
                  key={item.name}
                  href={item.href}
                  onClick={(e) => {
                    if (item.href.startsWith('#')) {
                      e.preventDefault()
                      handleNavClick(item.href)
                    }

                  className={`flex items-center space-x-3 p-3 rounded-lg font-medium transition-all duration-200 ${
                    router.pathname === item.href || (item.href.startsWith('#') && router.asPath === '/')
                      ? 'text-primary-700 bg-primary-50' 
                      : 'text-gray-700 hover:text-primary-600 hover:bg-primary-50'
                  }`}
                  aria-label={item.description}
                >
                  {item.icon && <item.icon className="h-5 w-5" aria-hidden="true" />}
                  <span>{item.name}</span>
                </Link>
              ))}
            </nav>
          </div>
        )}
      </div>
      
      {/* Built with anycoder link */}
      <div className="bg-primary-50 border-t border-primary-100">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-2">
          <p className="text-center text-sm">
            <a 
              href="https://huggingface.co/spaces/akhaliq/anycoder" 
              target="_blank" 
              rel="noopener noreferrer"
              className="text-primary-600 hover:text-primary-700 font-medium transition-colors duration-200 focus:ring-2 focus:ring-primary-300 rounded"
              aria-label="Built with anycoder - Link externo"
            >
              Built with anycoder
            </a>
          </p>
        </div>
      </div>
    </header>
  )
}