'use client'

import { useState, useEffect } from 'react'
import Image from 'next/image'

const navLinks = [
  { label: 'Benefícios', href: '#beneficios' },
  { label: 'Perfil Ideal', href: '#requisitos' },
  { label: 'Inscrição', href: '#inscricao' },
  { label: 'FAQ', href: '#faq' },
]

export default function TopNav() {
  const [menuOpen, setMenuOpen] = useState(false)

  const handleNavClick = (href: string) => {
    setMenuOpen(false)
    const el = document.querySelector(href)
    el?.scrollIntoView({ behavior: 'smooth' })
  }

  return (
    <header
      className="fixed top-0 left-0 right-0 z-50"
      style={{
        background: '#472813',
        borderBottom: '2px solid rgba(255,187,28,0.2)',
        boxShadow: '0 4px 24px rgba(0,0,0,0.25)',
      }}
      role="banner"
    >
      <div className="max-w-6xl mx-auto px-5 sm:px-8 h-16 flex items-center justify-between">

        {/* Logo */}
        <a
          href="#"
          onClick={e => { e.preventDefault(); window.scrollTo({ top: 0, behavior: 'smooth' }) }}
          className="flex-shrink-0 focus:outline-none focus-visible:ring-2 focus-visible:ring-[#ffbb1c] rounded-xl"
          aria-label="Fast'n Crew — ir para o topo"
        >
          <Image
            src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/LOGO%20FASTN%20CREW%402x-XJlWqTokAR2adS09dQLrlidTEFrj3Z.png"
            alt="Fast'n Crew"
            width={160}
            height={48}
            className="h-10 w-auto object-contain"
            priority
          />
        </a>

        {/* Desktop nav */}
        <nav className="hidden md:flex items-center gap-1" aria-label="Navegação principal">
          {navLinks.map(link => (
            <button
              key={link.href}
              onClick={() => handleNavClick(link.href)}
              className="px-4 py-2 rounded-xl font-bold transition-all duration-150 hover:text-[#ffbb1c] focus:outline-none focus-visible:ring-2 focus-visible:ring-[#ffbb1c]"
              style={{ color: '#ffffff', fontSize: '1rem' }}
            >
              {link.label}
            </button>
          ))}
          <button
            onClick={() => handleNavClick('#inscricao')}
            className="ml-3 relative group focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[#ffbb1c]"
            aria-label="Quero ser FAST CREW"
          >
            <span
              className="absolute inset-0 rounded-xl"
              style={{ background: 'rgba(255,255,255,0.25)', transform: 'translate(3px, 3px)', borderRadius: 12 }}
            />
            <span
              className="relative flex items-center gap-1.5 px-4 py-2 rounded-xl font-display font-black text-white uppercase tracking-wide
                transition-all duration-150 group-hover:-translate-y-0.5 group-active:translate-y-0.5"
              style={{ background: '#7918d6', borderRadius: 12, border: '2px solid rgba(255,255,255,0.2)', fontSize: '1rem' }}
            >
              Quero ser FAST CREW
            </span>
          </button>
        </nav>

        {/* Mobile hamburger */}
        <button
          className="md:hidden flex flex-col gap-1.5 p-2 rounded-xl focus:outline-none focus-visible:ring-2 focus-visible:ring-[#ffbb1c]"
          onClick={() => setMenuOpen(v => !v)}
          aria-expanded={menuOpen}
          aria-label={menuOpen ? 'Fechar menu' : 'Abrir menu'}
        >
          <span
            className="block w-6 h-0.5 rounded transition-all duration-200"
            style={{ background: '#ffffff', transform: menuOpen ? 'rotate(45deg) translate(4px, 4px)' : 'none' }}
          />
          <span
            className="block w-6 h-0.5 rounded transition-all duration-200"
            style={{ background: '#ffffff', opacity: menuOpen ? 0 : 1 }}
          />
          <span
            className="block w-6 h-0.5 rounded transition-all duration-200"
            style={{ background: '#ffffff', transform: menuOpen ? 'rotate(-45deg) translate(4px, -4px)' : 'none' }}
          />
        </button>
      </div>

      {/* Mobile menu dropdown */}
      <div
        className="md:hidden overflow-hidden transition-all duration-300"
        style={{
          maxHeight: menuOpen ? '320px' : '0',
          background: '#3a1f0e',
          borderTop: menuOpen ? '1.5px solid rgba(255,187,28,0.2)' : '1.5px solid transparent',
        }}
        aria-hidden={!menuOpen}
      >
        <nav className="px-5 py-4 flex flex-col gap-1" aria-label="Navegação mobile">
          {navLinks.map(link => (
            <button
              key={link.href}
              onClick={() => handleNavClick(link.href)}
              className="w-full text-left px-4 py-3 rounded-xl font-bold transition-all duration-150 hover:text-[#ffbb1c] focus:outline-none"
              style={{ color: '#ffffff', fontSize: '1rem' }}
            >
              {link.label}
            </button>
          ))}
          <button
            onClick={() => handleNavClick('#inscricao')}
            className="mt-2 w-full py-3 rounded-xl font-display font-black text-white uppercase tracking-wide text-center"
            style={{ background: '#7918d6', border: '2px solid rgba(255,255,255,0.2)', fontSize: '1rem' }}
          >
            Quero ser FAST CREW
          </button>
        </nav>
      </div>
    </header>
  )
}