'use client';

import Image from 'next/image';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import * as React from 'react';

import IconWhite from '../assets/logo/Icon White Transparent.svg';

export const Header: React.FC = () => {
  const pathname = usePathname();
  const [, setIsScrolled] = React.useState(false);

  React.useEffect(() => {
    const handleScroll = () => {
      setIsScrolled(window.scrollY > 20);
    };
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  const isActive = (path: string) => pathname === path;

  return (
    <header className="bg-white/80 backdrop-blur-md sticky top-0 z-50 border-b border-slate-50">
      <div className="narrow-container py-4 flex items-center justify-between">
        <Link href="/" className="flex items-center gap-4 group">
          <div className="flex items-center gap-3">
            <div className="w-12 h-12 bg-black rounded-xl flex items-center justify-center group-hover:scale-105 transition-all duration-500 shadow-sm shrink-0">
              <Image
                src={IconWhite}
                alt="Marc Mintel Icon"
                width={32}
                height={32}
                className="w-8 h-8"
              />
            </div>
          </div>
        </Link>
        
        <nav className="flex items-center gap-8">
          <Link 
            href="/websites" 
            className={`text-xs font-bold uppercase tracking-widest transition-colors ${
              isActive('/websites') ? 'text-slate-900' : 'text-slate-400 hover:text-slate-900'
            }`}
          >
            Websites
          </Link>
          <Link 
            href="/blog" 
            className={`text-xs font-bold uppercase tracking-widest transition-colors ${
              isActive('/blog') || pathname?.startsWith('/blog/') ? 'text-slate-900' : 'text-slate-400 hover:text-slate-900'
            }`}
          >
            Blog
          </Link>
          <Link
            href="/contact"
            className="text-[10px] font-bold uppercase tracking-[0.2em] text-slate-900 border border-slate-200 px-5 py-2.5 rounded-full hover:border-slate-400 hover:bg-slate-50 transition-all duration-500 ease-[cubic-bezier(0.23,1,0.32,1)] hover:-translate-y-0.5 hover:shadow-lg hover:shadow-slate-100"
          >
            Anfrage
          </Link>
        </nav>
      </div>
    </header>
  );
};
