import React, { useMemo, useState } from 'react';
import { Link } from '@inertiajs/react';
import { usePage } from '@inertiajs/react';
import { useLocalizedRoutes } from '@/hooks/useLocalizedRoutes';

const MarketingHeader: React.FC = () => {
  const [isOpen, setIsOpen] = useState(false);
  usePage();
  const { localizedPath } = useLocalizedRoutes();

  const occasions = useMemo(
    () => [
      { href: localizedPath('/anlaesse/hochzeit'), label: 'Hochzeiten' },
      { href: localizedPath('/anlaesse/geburtstag'), label: 'Geburtstage' },
      { href: localizedPath('/anlaesse/firmenevent'), label: 'Firmenevents' },
    ],
    [localizedPath]
  );

  return (
    <header className="bg-white shadow-md sticky top-0 z-50">
      <div className="container mx-auto px-4 py-4 flex items-center justify-between">
        <div className="flex items-center space-x-2">
          <Link href="/" className="text-2xl font-bold text-gray-900">
            Die Fotospiel.App
          </Link>
          <svg className="w-6 h-6 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
          </svg>
        </div>
        <nav className="hidden md:flex space-x-6 items-center">
          <Link href="/#how-it-works" className="text-gray-600 hover:text-gray-900">
            So funktioniert es
          </Link>
          <Link href="/#features" className="text-gray-600 hover:text-gray-900">
            Features
          </Link>
          <div className="relative">
            <button
              onClick={() => setIsOpen(!isOpen)}
              className="text-gray-600 hover:text-gray-900"
            >
              Anlässe
            </button>
            {isOpen && (
              <div className="absolute top-full left-0 mt-2 bg-white border rounded shadow-lg z-10">
                {occasions.map((occasion) => (
                  <Link
                    key={occasion.href}
                    href={occasion.href}
                    className="block px-4 py-2 text-gray-600 hover:text-gray-900 hover:bg-gray-50 transition"
                    onClick={() => setIsOpen(false)}
                  >
                    {occasion.label}
                  </Link>
                ))}
              </div>
            )}
          </div>
          <Link href="/blog" className="text-gray-600 hover:text-gray-900">
            Blog
          </Link>
          <Link href="/packages" className="text-gray-600 hover:text-gray-900">
            Packages
          </Link>
          <Link href="/kontakt" className="text-gray-600 hover:text-gray-900">
            Kontakt
          </Link>
          <Link
            href="/packages"
            className="bg-[#FFB6C1] text-white px-6 py-2 rounded-full font-semibold hover:bg-[#FF69B4] transition"
          >
            Packages entdecken
          </Link>
        </nav>
        <button className="md:hidden text-gray-600">☰</button>
      </div>
    </header>
  );
};

export default MarketingHeader;