poboljsaj mi moj header dizajn i performanse za nextjs 14 app router kod ""use client";

import React, { useState, useEffect } from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { motion, AnimatePresence } from "framer-motion";
import { FaBars, FaTimes, FaEnvelope, FaPhone } from "react-icons/fa";

interface NavItemProps {
  href: string;
  children: React.ReactNode;
  isActive: boolean;
}

const navItems = [
  { name: "Početna", href: "/" },
  { name: "Naši proizvodi", href: "/proizvodi" },
  { name: "Proces izrade", href: "/proces-izrade" },
  { name: "Materijali", href: "/materijali" },
  { name: "Tradicija", href: "/tradicija" },
  { name: "O nama", href: "/o-nama" },
];

const NavItem: React.FC<NavItemProps> = ({ href, children, isActive }) => (
  <Link
    href={href}
    className={`px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200
      ${
        isActive
          ? "bg-wood-600 text-wood-100"
          : "text-wood-100 hover:bg-wood-600 hover:text-wood-100"
      }`}
  >
    {children}
  </Link>
);

export default function Header() {
  const [isScrolled, setIsScrolled] = useState(false);
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
  const pathname = usePathname();

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

  return (
    <>
      <div className="bg-gradient-to-r from-wood-900 to-wood-800 text-wood-100">
        <div className="container mx-auto px-4 py-2 flex justify-between items-center text-sm">
          <div className="flex items-center space-x-4">
            <span className="flex items-center">
              <FaEnvelope className="mr-2 text-accent" />
              <a
                href="mailto:info@rajkovic.com"
                className="hover:text-wood-300 transition-colors"
              >
                info@rajkovic.com
              </a>
            </span>
            <span className="flex items-center">
              <FaPhone className="mr-2 text-accent" />
              <a
                href="tel:<PRESIDIO_ANONYMIZED_PHONE_NUMBER>"
                className="hover:text-wood-300 transition-colors"
              >
                <PRESIDIO_ANONYMIZED_PHONE_NUMBER>
              </a>
            </span>
          </div>
          <div className="hidden md:flex space-x-4">
            <a href="#" className="hover:text-wood-300 transition-colors">
              Facebook
            </a>
            <a href="#" className="hover:text-wood-300 transition-colors">
              Instagram
            </a>
            <a href="#" className="hover:text-wood-300 transition-colors">
              LinkedIn
            </a>
          </div>
        </div>
      </div>
      <header
        className={`sticky top-0 z-50 transition-all duration-300 ${
          isScrolled
            ? "bg-gradient-to-r from-wood-800/95 to-wood-700/95 backdrop-blur-md shadow-lg"
            : "bg-gradient-to-r from-wood-800 to-wood-700"
        }`}
      >
        <nav className="container mx-auto px-4">
          <div className="flex justify-between items-center py-4">
            <Link href="/" className="text-2xl font-bold text-wood-100">
              RAJKOVIĆ
            </Link>
            <div className="hidden md:flex space-x-4">
              {navItems.map((item) => (
                <NavItem
                  key={item.href}
                  href={item.href}
                  isActive={pathname === item.href}
                >
                  {item.name}
                </NavItem>
              ))}
            </div>
            <div className="hidden md:block">
              <Link
                href="/kontakt"
                className="bg-accent hover:bg-accent-dark text-wood-100 px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200"
              >
                Zatražite ponudu
              </Link>
            </div>
            <button
              className="md:hidden text-wood-100 focus:outline-none"
              onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
            >
              {isMobileMenuOpen ? <FaTimes size={24} /> : <FaBars size={24} />}
            </button>
          </div>
        </nav>
      </header>
      <AnimatePresence>
        {isMobileMenuOpen && (
          <motion.div
            initial={{ opacity: 0, y: -10 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: -10 }}
            transition={{ duration: 0.2 }}
            className="md:hidden bg-wood-800 shadow-lg"
          >
            <div className="container mx-auto px-4 py-4">
              {navItems.map((item) => (
                <NavItem
                  key={item.href}
                  href={item.href}
                  isActive={pathname === item.href}
                >
                  {item.name}
                </NavItem>
              ))}
              <Link
                href="/kontakt"
                className="block mt-4 bg-accent hover:bg-accent-dark text-wood-100 px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200"
                onClick={() => setIsMobileMenuOpen(false)}
              >
                Zatražite ponudu
              </Link>
            </div>
          </motion.div>
        )}
      </AnimatePresence>
    </>
  );
}
"