azuriraj mi kod i poboljsaj, nakon toga mi posalji ceo kod sa komentarima, imam dosta problema sa ovim kodom da nije responsive i da ne koristi default theme tailwinda ""use client";

import React, { useState, useRef, useEffect, useMemo } from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import Image from "next/image";
import {
  Home,
  BookOpen,
  Users,
  Phone,
  Send,
  Menu,
  X,
  Sun,
  Moon,
  ChevronDown,
  Code,
  Smartphone,
  Globe,
  Search,
} from "lucide-react";
import {
  motion,
  AnimatePresence,
  useScroll,
  useTransform,
  MotionValue,
} from "framer-motion";
import { useTheme } from "next-themes";

type NavItem = {
  href: string;
  icon: React.ReactNode;
  text: string;
  subItems?: { href: string; text: string; icon: React.ReactNode }[];
};

type NavState = {
  opacity: number;
  left: number;
  width: number;
};

const Header: React.FC = () => {
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
  const [mounted, setMounted] = useState(false);
  const [activeNavItem, setActiveNavItem] = useState<string | null>(null);
  const [navState, setNavState] = useState<NavState>({
    opacity: 0,
    left: 0,
    width: 0,
  });
  const headerRef = useRef<HTMLElement>(null);
  const navRef = useRef<HTMLDivElement>(null);
  const { theme, setTheme } = useTheme();
  const pathname = usePathname();

  const { scrollY } = useScroll();
  const isScrolled = useTransform(scrollY, [0, 50], [0, 1]);
  const headerMaxWidth = useTransform(scrollY, [0, 50], ["100%", "90%"]);
  const headerBorderRadius = useTransform(scrollY, [0, 50], [0, 20]);
  const logoSize = useTransform(scrollY, [0, 50], [90, 70]);
  const headerPadding = useTransform(scrollY, [0, 50], ["0.75rem", "0.5rem"]);
  const headerTop = useTransform(scrollY, [0, 50], ["0rem", "0.5rem"]);

  const backgroundColor = useTransform(
    isScrolled,
    [0, 1],
    [
      theme === "dark" ? "rgba(17, 24, 39, 0.5)" : "rgba(255, 255, 255, 0.5)",
      theme === "dark" ? "rgba(17, 24, 39, 0.9)" : "rgba(255, 255, 255, 0.9)",
    ]
  );

  const boxShadow = useTransform(
    isScrolled,
    [0, 1],
    [
      "none",
      "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
    ]
  );

  const navItems: NavItem[] = useMemo(
    () => [
      { href: "/", icon: <Home className="w-4 h-4" />, text: "Početna" },
      {
        href: "/usluge",
        icon: <Code className="w-4 h-4" />,
        text: "Usluge",
        subItems: [
          {
            href: "/usluge/web-development",
            text: "Web Development",
            icon: <Globe className="w-4 h-4" />,
          },
          {
            href: "/usluge/mobile-development",
            text: "Mobile Development",
            icon: <Smartphone className="w-4 h-4" />,
          },
          {
            href: "/usluge/seo",
            text: "SEO Optimizacija",
            icon: <Search className="w-4 h-4" />,
          },
        ],
      },
      { href: "/blog", icon: <BookOpen className="w-4 h-4" />, text: "Blog" },
      { href: "/o-nama", icon: <Users className="w-4 h-4" />, text: "O nama" },
      {
        href: "/kontakt",
        icon: <Phone className="w-4 h-4" />,
        text: "Kontakt",
      },
    ],
    []
  );

  useEffect(() => {
    setMounted(true);
  }, []);

  useEffect(() => {
    if (mounted) {
      const activeItem = navItems.find(
        (item) =>
          item.href === pathname ||
          item.subItems?.some((subItem) => subItem.href === pathname)
      );
      setActiveNavItem(activeItem?.href || null);
    }
  }, [pathname, navItems, mounted]);

  const handleMouseEnter = (event: React.MouseEvent<HTMLElement>) => {
    if (!navRef.current) return;

    const { width } = event.currentTarget.getBoundingClientRect();
    const left = event.currentTarget.offsetLeft;
    setNavState({
      width,
      opacity: 1,
      left,
    });
  };

  const handleMouseLeave = () =>
    setNavState((prev) => ({
      ...prev,
      opacity: 0,
    }));

  const motionValueToString = (value: MotionValue<number>) =>
    `${value.get()}px`;

  if (!mounted) return null;

  return (
    <motion.header
      ref={headerRef}
      className="font-sans fixed left-0 right-0 z-40 transition-all duration-300 w-full flex justify-center"
      style={{
        top: headerTop,
        padding: headerPadding,
      }}
    >
      <motion.nav
        className="transition-all duration-300 w-full"
        style={{
          maxWidth: headerMaxWidth,
          borderRadius: headerBorderRadius,
          backgroundColor,
          backdropFilter: "blur(10px)",
          boxShadow,
        }}
      >
        <motion.div
          className="mx-auto flex justify-between items-center px-4"
          style={{ maxWidth: "1200px" }}
        >
          <Link href="/" className="flex-shrink-0">
            <Image
              src="https://cdn.zerox.rs/wp-content/uploads/2024/06/zerox-logo.svg"
              alt="ZEROX Logo"
              width={90}
              height={90}
              className="transition-all duration-300"
              style={{ width: motionValueToString(logoSize), height: "auto" }}
              priority
            />
          </Link>

          <div ref={navRef} className="hidden lg:flex space-x-1 relative">
            {navItems.map((item) => (
              <NavLink
                key={item.href}
                {...item}
                isActive={activeNavItem === item.href}
                onClick={() => setActiveNavItem(item.href)}
                onMouseEnter={handleMouseEnter}
                onMouseLeave={handleMouseLeave}
              />
            ))}
            <motion.div
              animate={navState}
              className="absolute bg-primary/10 dark:bg-primary/20 rounded-md z-0 h-9 top-1/2 -translate-y-1/2"
              transition={{ type: "spring", stiffness: 500, damping: 30 }}
            />
          </div>

          <MobileMenuButton
            isMobileMenuOpen={isMobileMenuOpen}
            setIsMobileMenuOpen={setIsMobileMenuOpen}
          />

          <DesktopActions theme={theme} setTheme={setTheme} />
        </motion.div>
      </motion.nav>

      <MobileMenu
        isOpen={isMobileMenuOpen}
        navItems={navItems}
        activeNavItem={activeNavItem}
        setActiveNavItem={setActiveNavItem}
        theme={theme}
        setTheme={setTheme}
      />
    </motion.header>
  );
};

const NavLink: React.FC<
  NavItem & {
    isActive: boolean;
    onClick: () => void;
    onMouseEnter: (event: React.MouseEvent<HTMLElement>) => void;
    onMouseLeave: () => void;
  }
> = ({
  href,
  icon,
  text,
  subItems,
  isActive,
  onClick,
  onMouseEnter,
  onMouseLeave,
}) => {
  const [isHovered, setIsHovered] = useState(false);

  const handleMouseEnter = (event: React.MouseEvent<HTMLElement>) => {
    setIsHovered(true);
    onMouseEnter(event);
  };

  const handleMouseLeave = () => {
    setIsHovered(false);
    onMouseLeave();
  };

  const linkClasses = `flex items-center text-gray-700 dark:text-gray-300 hover:text-primary dark:hover:text-primary transition-colors relative z-10 px-3 py-2 text-sm rounded-md ${
    isActive || isHovered
      ? "text-primary dark:text-primary font-semibold bg-primary/10 dark:bg-primary/20"
      : ""
  }`;

  if (subItems) {
    return (
      <div
        className="relative group"
        onMouseEnter={handleMouseEnter}
        onMouseLeave={handleMouseLeave}
      >
        <button className={linkClasses} onClick={onClick}>
          <span className="flex items-center">
            {icon}
            <span className="ml-2">{text}</span>
            <ChevronDown
              className={`w-4 h-4 ml-1 transition-transform duration-200 ${
                isHovered ? "transform rotate-180" : ""
              }`}
            />
          </span>
        </button>
        <AnimatePresence>
          {isHovered && (
            <motion.div
              initial={{ opacity: 0, y: -10 }}
              animate={{ opacity: 1, y: 0 }}
              exit={{ opacity: 0, y: -10 }}
              transition={{ duration: 0.2 }}
              className="absolute left-0 mt-2 w-48 rounded-md shadow-lg bg-background text-foreground ring-1 ring-black ring-opacity-5"
            >
              <div className="py-1">
                {subItems.map((subItem) => (
                  <Link
                    key={subItem.href}
                    href={subItem.href}
                    className={`flex items-center px-4 py-2 text-sm ${linkClasses}`}
                  >
                    {subItem.icon}
                    <span className="ml-2">{subItem.text}</span>
                  </Link>
                ))}
              </div>
            </motion.div>
          )}
        </AnimatePresence>
      </div>
    );
  }

  return (
    <Link
      href={href}
      className={linkClasses}
      onClick={onClick}
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}
      aria-current={isActive ? "page" : undefined}
    >
      <span className="flex items-center">
        {icon}
        <span className="ml-2">{text}</span>
      </span>
    </Link>
  );
};

const MobileMenuButton: React.FC<{
  isMobileMenuOpen: boolean;
  setIsMobileMenuOpen: React.Dispatch<React.SetStateAction<boolean>>;
}> = ({ isMobileMenuOpen, setIsMobileMenuOpen }) => (
  <div className="lg:hidden">
    <button
      onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
      className="text-gray-700 dark:text-gray-300"
      aria-label={isMobileMenuOpen ? "Close menu" : "Open menu"}
    >
      {isMobileMenuOpen ? (
        <X className="h-6 w-6" />
      ) : (
        <Menu className="h-6 w-6" />
      )}
    </button>
  </div>
);

const DesktopActions: React.FC<{
  theme: string | undefined;
  setTheme: (theme: string) => void;
}> = ({ theme, setTheme }) => (
  <div className="hidden lg:flex items-center space-x-4">
    <ThemeToggle theme={theme} setTheme={setTheme} />
    <SendInquiryButton />
  </div>
);

const ThemeToggle: React.FC<{
  theme: string | undefined;
  setTheme: (theme: string) => void;
}> = ({ theme, setTheme }) => (
  <button
    onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
    className="p-2 rounded-full bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
    aria-label={
      theme === "dark" ? "Switch to light mode" : "Switch to dark mode"
    }
  >
    {theme === "dark" ? (
      <Sun className="h-5 w-5 text-yellow-400" />
    ) : (
      <Moon className="h-5 w-5 text-indigo-600" />
    )}
  </button>
);

const SendInquiryButton: React.FC = () => (
  <motion.button
    className="bg-primary text-primary-foreground px-4 py-2 rounded-full hover:bg-primary/90 transition-all duration-300 flex items-center shadow-md text-sm"
    whileHover={{ scale: 1.05 }}
    whileTap={{ scale: 0.95 }}
  >
    <Send className="w-4 h-4 mr-2" />
    Pošalji upit
  </motion.button>
);

const MobileMenu: React.FC<{
  isOpen: boolean;
  navItems: NavItem[];
  activeNavItem: string | null;
  setActiveNavItem: (href: string | null) => void;
  theme: string | undefined;
  setTheme: (theme: string) => void;
}> = ({
  isOpen,
  navItems,
  activeNavItem,
  setActiveNavItem,
  theme,
  setTheme,
}) => (
  <AnimatePresence>
    {isOpen && (
      <motion.div
        initial={{ opacity: 0, height: 0 }}
        animate={{ opacity: 1, height: "auto" }}
        exit={{ opacity: 0, height: 0 }}
        transition={{ duration: 0.3 }}
        className="lg:hidden bg-background text-foreground border-t border-gray-200 dark:border-gray-700 absolute top-full left-0 right-0"
      >
        <div className="px-2 pt-2 pb-3 space-y-1 sm:px-3">
          {navItems.map((item) => (
            <MobileNavLink
              key={item.href}
              {...item}
              isActive={activeNavItem === item.href}
              onClick={() => setActiveNavItem(item.href)}
            />
          ))}
        </div>
        <div className="px-4 py-3 border-t border-gray-200 dark:border-gray-700 flex justify-between items-center">
          <ThemeToggle theme={theme} setTheme={setTheme} />
          <SendInquiryButton />
        </div>
      </motion.div>
    )}
  </AnimatePresence>
);

const MobileNavLink: React.FC<
  NavItem & { isActive: boolean; onClick: () => void }
> = ({ href, text, icon, subItems, isActive, onClick }) => {
  const [isSubMenuOpen, setIsSubMenuOpen] = useState(false);

  const linkClasses = `flex items-center px-3 py-2 rounded-md text-base font-medium 
    ${
      isActive
        ? "text-primary bg-primary/10"
        : "text-gray-700 dark:text-gray-300 hover:text-primary dark:hover:text-primary hover:bg-gray-100 dark:hover:bg-gray-800"
    } 
    transition-all duration-300`;

  if (subItems) {
    return (
      <div>
        <button
          onClick={() => setIsSubMenuOpen(!isSubMenuOpen)}
          className={`w-full ${linkClasses} justify-between`}
        >
          <span className="flex items-center">
            {icon}
            <span className="ml-2">{text}</span>
          </span>
          <ChevronDown
            className={`w-4 h-4 transition-transform duration-200 ${
              isSubMenuOpen ? "transform rotate-180" : ""
            }`}
          />
        </button>
        <AnimatePresence>
          {isSubMenuOpen && (
            <motion.div
              initial={{ opacity: 0, height: 0 }}
              animate={{ opacity: 1, height: "auto" }}
              exit={{ opacity: 0, height: 0 }}
              transition={{ duration: 0.2 }}
              className="pl-4"
            >
              {subItems.map((subItem) => (
                <Link
                  key={subItem.href}
                  href={subItem.href}
                  className={linkClasses}
                  onClick={onClick}
                >
                  {subItem.icon}
                  <span className="ml-2">{subItem.text}</span>
                </Link>
              ))}
            </motion.div>
          )}
        </AnimatePresence>
      </div>
    );
  }

  return (
    <Link href={href} className={linkClasses} onClick={onClick}>
      {icon}
      <span className="ml-2">{text}</span>
    </Link>
  );
};

export default Header;
"