'use client';

import Image from 'next/image';
import Link from 'next/link';
import { useState } from 'react';
import { FaBars, FaTimes } from 'react-icons/fa';

const NAV_LINKS = [
  { href: '/#program', label: 'Programm' },
  { href: '/#info', label: 'Infos' },
  { href: '/#contact', label: 'Anfahrt' },
  { href: '/impressum', label: 'Impressum' },
];

export default function Header() {
  const [isOpen, setIsOpen] = useState(false);

  const toggleMenu = () => {
    setIsOpen(!isOpen);
  };

  return (
    <header className="sticky top-0 left-0 w-full z-50">
      <div className="absolute inset-0 -z-10 bg-flyer-black [clip-path:polygon(0_0,100%_0,100%_100%,0_82%)] [filter:drop-shadow(0_4px_0_#DEE213)]" />

      <div className="container mx-auto px-4 pt-3 pb-8 md:pb-10 flex justify-between items-center">
        <Link href="/" className="flex items-center gap-2 md:gap-3 group" onClick={() => setIsOpen(false)}>
          <Image
            src="/images/android-chrome-512x512.png"
            alt="FF Friedberg"
            width={40}
            height={40}
            className="group-hover:scale-110 transition-transform"
          />
          <span className="font-stick uppercase leading-tight text-white text-[11px] sm:text-sm md:text-lg">
            Freiwillige<br />Feuerwehr<br />Friedberg
          </span>
        </Link>

        <button
          onClick={toggleMenu}
          className="md:hidden text-2xl text-white z-50 relative"
          aria-label="Menü öffnen"
        >
          {isOpen ? <FaTimes /> : <FaBars />}
        </button>

        <nav
          className={`fixed md:relative top-0 left-0 w-full h-screen md:h-auto md:w-auto bg-flyer-black md:bg-transparent z-40 transition-transform duration-300 ${
            isOpen ? 'translate-x-0' : '-translate-x-full md:translate-x-0'
          }`}
        >
          <ul className="flex flex-col md:flex-row items-center justify-center h-full md:h-auto gap-8 md:gap-6 p-4 md:p-0">
            {NAV_LINKS.map((link) => (
              <li key={link.href}>
                <Link
                  href={link.href}
                  onClick={toggleMenu}
                  className="text-lg md:text-base font-bold uppercase tracking-wide text-white hover:text-flyer-yellow transition-colors border-b-2 border-transparent hover:border-flyer-yellow pb-1"
                >
                  {link.label}
                </Link>
              </li>
            ))}
          </ul>
        </nav>
      </div>
    </header>
  );
}
