Working state: Serbian at root (/), English at /en, proper i18n structure

src/components/layout/Header.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import { motion, AnimatePresence } from "framer-motion";
+import { useCartStore } from "@/stores/cartStore";
+import { formatPrice } from "@/lib/woocommerce";
+import MobileMenu from "./MobileMenu";
+import CartDrawer from "@/components/cart/CartDrawer";
+
+export default function Header() {
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+  const { items, toggleCart } = useCartStore();
+  
+  const itemCount = items.reduce((count, item) => count + item.quantity, 0);
+
+  return (
+    <>
+      <header className="fixed top-0 left-0 right-0 z-50 bg-white/90 backdrop-blur-md">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="flex items-center justify-between h-16 md:h-20">
+            <button
+              className="md:hidden p-2"
+              onClick={() => setMobileMenuOpen(true)}
+              aria-label="Open menu"
+            >
+              <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M4 6h16M4 12h16M4 18h16" />
+              </svg>
+            </button>
+
+            <Link href="/" className="flex-shrink-0">
+              <img 
+                src="/manoon-logo.jpg" 
+                alt="ManoonOils" 
+                className="h-8 w-[124px] md:h-10 md:w-[154px]"
+              />
+            </Link>
+
+            <nav className="hidden md:flex items-center space-x-8">
+              <Link href="/en/products" className="text-foreground hover:text-accent-dark transition-colors">
+                Products
+              </Link>
+              <Link href="/en/about" className="text-foreground hover:text-accent-dark transition-colors">
+                About
+              </Link>
+              <Link href="/en/contact" className="text-foreground hover:text-accent-dark transition-colors">
+                Contact
+              </Link>
+            </nav>
+
+            <button
+              className="p-2 relative"
+              onClick={toggleCart}
+              aria-label="Open cart"
+            >
+              <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
+              </svg>
+              {itemCount > 0 && (
+                <span className="absolute -top-1 -right-1 bg-accent-dark text-white text-xs w-5 h-5 rounded-full flex items-center justify-center">
+                  {itemCount}
+                </span>
+              )}
+            </button>
+          </div>
+        </div>
+      </header>
+
+      <AnimatePresence>
+        {mobileMenuOpen && (
+          <MobileMenu onClose={() => setMobileMenuOpen(false)} />
+        )}
+      </AnimatePresence>
+
+      <CartDrawer />
+    </>
+  );
+}