import React, { useState, useEffect } from 'react';
import { Search, ShoppingCart, Heart, User, Menu, X, ChevronDown, ChevronRight, ArrowRight, 
         LogOut, Home, Package, Layers, Image, Settings, Users, BarChart2, PlusCircle, Edit, 
         Trash2, Eye, Save, Upload, Grid, List, FileText, MessageSquare, Calendar, DollarSign } from 'lucide-react';

export default function MibosWebsiteWithAdmin() {
  // State for admin panel
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [loginError, setLoginError] = useState('');
  const [currentAdminPage, setCurrentAdminPage] = useState('dashboard');
  const [showAdminPanel, setShowAdminPanel] = useState(false);
  const [sidebarOpen, setSidebarOpen] = useState(true);
  
  // State for category management
  const [categories, setCategories] = useState([
    { id: 'assortment', name: 'Asortiman', subcategories: ['Women', 'Men', 'Kids', 'Accessories'] },
    { id: 'home', name: 'Početna', subcategories: ['Furniture', 'Decor', 'Kitchen', 'Textiles'] },
    { id: 'bobb', name: 'Bobb', subcategories: ['Smartphones', 'Computers', 'Audio', 'Accessories'] },
    { id: 'news', name: 'Novosti', subcategories: ['Smartphones', 'Computers', 'Audio', 'Accessories'] },
  ]);
  const [editingCategory, setEditingCategory] = useState(null);
  const [newCategory, setNewCategory] = useState({ name: '', id: '', subcategories: [] });
  const [newSubcategory, setNewSubcategory] = useState('');
  
  // State for product management
  const [products, setProducts] = useState([
    { id: 1, name: 'Premium Wool Coat', category: 'assortment', subcategory: 'Women', brand: 'BOBB', price: '129,99 €', image: 'https://images.unsplash.com/photo-1591047139829-d91aecb6caea?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80', rating: 4.8, featured: true, stock: 25 },
    { id: 2, name: 'Casual Linen Shirt', category: 'assortment', subcategory: 'Men', brand: 'BOBB', price: '49,99 €', image: 'https://images.unsplash.com/photo-1596755094514-f87e34085b2c?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80', rating: 4.6, featured: false, stock: 42 },
    { id: 3, name: 'Modern Coffee Table', category: 'home', subcategory: 'Furniture', brand: 'Mibos Home', price: '199,99 €', image: 'https://images.unsplash.com/photo-1634712282287-14ed57b9cc89?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80', rating: 4.9, featured: true, stock: 10 },
    { id: 4, name: 'Kids Denim Jacket', category: 'assortment', subcategory: 'Kids', brand: 'BOBB KIDS', price: '39,99 €', image: 'https://images.unsplash.com/photo-1519238263530-99bdd11df2ea?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80', rating: 4.7, featured: false, stock: 18 },
  ]);
  const [editingProduct, setEditingProduct] = useState(null);
  const [newProduct, setNewProduct] = useState({ 
    name: '', category: '', subcategory: '', brand: '', 
    price: '', image: '', rating: 5, featured: false, stock: 0 
  });
  
  // State for content management
  const [content, setContent] = useState([
    { id: 1, title: 'Summer Fashion Trends 2023', category: 'fashion', image: 'https://images.unsplash.com/photo-1469334031218-e382a71b716b?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80', date: '2023-06-15', content: 'Discover the latest summer fashion trends for 2023...', featured: true },
    { id: 2, title: 'Home Decor Ideas for Small Spaces', category: 'home', image: 'https://images.unsplash.com/photo-1616486338812-3dadae4b4ace?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80', date: '2023-05-28', content: 'Make the most of your small living space with these creative ideas...', featured: false },
    { id: 3, title: 'Back to School Essentials', category: 'bobb', image: 'https://images.unsplash.com/photo-1503676260728-1c00da094a0b?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80', date: '2023-07-02', content: 'Get ready for the new school year with our essential picks...', featured: true },
    { id: 4, title: 'New BOBB Collection Launch', category: 'news', image: 'https://images.unsplash.com/photo-1558769132-cb1aea458c5e?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80', date: '2023-07-15', content: 'Explore our latest BOBB collection featuring premium designs...', featured: true },
  ]);
  const [editingContent, setEditingContent] = useState(null);
  const [newContent, setNewContent] = useState({ 
    title: '', category: '', image: '', date: '', content: '', featured: false 
  });
  
  // State for gallery management
  const [gallery, setGallery] = useState([
    { id: 1, title: 'Summer Collection', category: 'fashion', image: 'https://images.unsplash.com/photo-1515886657613-9f3515b0c78f?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80', featured: true },
    { id: 2, title: 'Modern Living Room', category: 'home', image: 'https://images.unsplash.com/photo-1583847268964-b28dc8f51f92?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80', featured: false },
    { id: 3, title: 'BOBB Tech Gadgets', category: 'bobb', image: 'https://images.unsplash.com/photo-1468495244123-6c6c332eeece?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80', featured: true },
    { id: 4, title: 'Store Opening Event', category: 'news', image: 'https://images.unsplash.com/photo-1511795409834-ef04bbd61622?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80', featured: false },
  ]);
  const [editingGallery, setEditingGallery] = useState(null);
  const [newGallery, setNewGallery] = useState({ 
    title: '', category: '', image: '', featured: false 
  });
  
  // State for main website
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const [isSearchOpen, setIsSearchOpen] = useState(false);
  const [isCartOpen, setIsCartOpen] = useState(false);
  const [activeCategory, setActiveCategory] = useState(null);
  const [scrolled, setScrolled] = useState(false);
  const [cartItems, setCartItems] = useState([]);
  const [wishlistCount, setWishlistCount] = useState(0);

  // Handle scroll effect for sticky header
  useEffect(() => {
    const handleScroll = () => {
      setScrolled(window.scrollY > 80);
    };
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  // Sample testimonials
  const testimonials = [
    { id: 1, name: 'Ana Kovačić', image: 'https://randomuser.me/api/portraits/women/44.jpg', text: 'Mibos has been my go-to store for years. The quality of their products is consistently excellent, and the prices are always reasonable.' },
    { id: 2, name: 'Marko Horvat', image: 'https://randomuser.me/api/portraits/men/32.jpg', text: 'I recently furnished my entire apartment with items from Mibos Home collection. The quality is outstanding, and the designs are modern yet timeless.' },
    { id: 3, name: 'Ivana Novak', image: 'https://randomuser.me/api/portraits/women/68.jpg', text: 'BOBB KIDS clothing has been perfect for my children. Durable, stylish, and affordable - everything a parent could ask for!' },
  ];

  // Sample store locations
  const storeLocations = [
    { id: 1, name: 'Mibos City Center', address: 'Trg bana Josipa Jelačića 10, Zagreb', hours: 'Mon-Sat: 9:00-21:00, Sun: 10:00-18:00' },
    { id: 2, name: 'Mibos Mall of Split', address: 'Vukovarska 207, Split', hours: 'Mon-Sun: 9:00-22:00' },
    { id: 3, name: 'Mibos Rijeka', address: 'Riva 15, Rijeka', hours: 'Mon-Sat: 9:00-20:00, Sun: 10:00-18:00' },
  ];

  // Website functions
  const toggleMenu = () => setIsMenuOpen(!isMenuOpen);
  const toggleSearch = () => setIsSearchOpen(!isSearchOpen);
  const toggleCart = () => setIsCartOpen(!isCartOpen);

  const addToCart = (product) => {
    setCartItems([...cartItems, product]);
    // Show a brief notification
    const notification = document.getElementById('notification');
    notification.classList.remove('opacity-0');
    notification.classList.add('opacity-100');
    setTimeout(() => {
      notification.classList.remove('opacity-100');
      notification.classList.add('opacity-0');
    }, 2000);
  };

  const addToWishlist = () => {
    setWishlistCount(wishlistCount + 1);
    // Show a brief notification
    const notification = document.getElementById('wishlist-notification');
    notification.classList.remove('opacity-0');
    notification.classList.add('opacity-100');
    setTimeout(() => {
      notification.classList.remove('opacity-100');
      notification.classList.add('opacity-0');
    }, 2000);
  };

  // Admin panel functions
  const handleLogin = (e) => {
    e.preventDefault();
    if (username === 'admin' && password === 'password') {
      setIsLoggedIn(true);
      setLoginError('');
      setShowAdminPanel(true);
    } else {
      setLoginError('Invalid username or password');
    }
  };

  const handleLogout = () => {
    setIsLoggedIn(false);
    setShowAdminPanel(false);
    setUsername('');
    setPassword('');
  };

  const toggleSidebar = () => {
    setSidebarOpen(!sidebarOpen);
  };

  // Category management functions
  const handleAddCategory = () => {
    if (newCategory.name && newCategory.id) {
      setCategories([...categories, { ...newCategory, subcategories: newCategory.subcategories || [] }]);
      setNewCategory({ name: '', id: '', subcategories: [] });
    }
  };

  const handleEditCategory = (category) => {
    setEditingCategory(category);
  };

  const handleUpdateCategory = () => {
    if (editingCategory) {
      setCategories(categories.map(cat => cat.id === editingCategory.id ? editingCategory : cat));
      setEditingCategory(null);
    }
  };

  const handleDeleteCategory = (categoryId) => {
    setCategories(categories.filter(cat => cat.id !== categoryId));
  };

  const handleAddSubcategory = () => {
    if (newSubcategory && editingCategory) {
      const updatedCategory = {
        ...editingCategory,
        subcategories: [...editingCategory.subcategories, newSubcategory]
      };
      setEditingCategory(updatedCategory);
      setNewSubcategory('');
    }
  };

  const handleRemoveSubcategory = (subcategory) => {
    if (editingCategory) {
      const updatedCategory = {
        ...editingCategory,
        subcategories: editingCategory.subcategories.filter(sub => sub !== subcategory)
      };
      setEditingCategory(updatedCategory);
    }
  };

  // Product management functions
  const handleAddProduct = () => {
    if (newProduct.name && newProduct.category) {
      const productId = products.length > 0 ? Math.max(...products.map(p => p.id)) + 1 : 1;
      setProducts([...products, { ...newProduct, id: productId }]);
      setNewProduct({ 
        name: '', category: '', subcategory: '', brand: '', 
        price: '', image: '', rating: 5, featured: false, stock: 0 
      });
    }
  };

  const handleEditProduct = (product) => {
    setEditingProduct(product);
  };

  const handleUpdateProduct = () => {
    if (editingProduct) {
      setProducts(products.map(prod => prod.id === editingProduct.id ? editingProduct : prod));
      setEditingProduct(null);
    }
  };

  const handleDeleteProduct = (productId) => {
    setProducts(products.filter(prod => prod.id !== productId));
  };

  // Content management functions
  const handleAddContent = () => {
    if (newContent.title && newContent.category) {
      const contentId = content.length > 0 ? Math.max(...content.map(c => c.id)) + 1 : 1;
      setContent([...content, { ...newContent, id: contentId }]);
      setNewContent({ 
        title: '', category: '', image: '', date: '', content: '', featured: false 
      });
    }
  };

  const handleEditContent = (contentItem) => {
    setEditingContent(contentItem);
  };

  const handleUpdateContent = () => {
    if (editingContent) {
      setContent(content.map(item => item.id === editingContent.id ? editingContent : item));
      setEditingContent(null);
    }
  };

  const handleDeleteContent = (contentId) => {
    setContent(content.filter(item => item.id !== contentId));
  };

  // Gallery management functions
  const handleAddGallery = () => {
    if (newGallery.title && newGallery.category) {
      const galleryId = gallery.length > 0 ? Math.max(...gallery.map(g => g.id)) + 1 : 1;
      setGallery([...gallery, { ...newGallery, id: galleryId }]);
      setNewGallery({ 
        title: '', category: '', image: '', featured: false 
      });
    }
  };

  const handleEditGallery = (galleryItem) => {
    setEditingGallery(galleryItem);
  };

  const handleUpdateGallery = () => {
    if (editingGallery) {
      setGallery(gallery.map(item => item.id === editingGallery.id ? editingGallery : item));
      setEditingGallery(null);
    }
  };

  const handleDeleteGallery = (galleryId) => {
    setGallery(gallery.filter(item => item.id !== galleryId));
  };

  // Render admin panel
  const renderAdminPanel = () => {
    if (!isLoggedIn) {
      return (
        <div className="min-h-screen flex items-center justify-center bg-gray-100">
          <div className="bg-white p-8 rounded-lg shadow-md w-full max-w-md">
            <div className="text-center mb-8">
              <h2 className="text-2xl font-bold mb-2">
                <span className="text-[#E63946]">M</span><span className="text-[#457B9D]">ibos</span> Admin
              </h2>
              <p className="text-gray-600">Sign in to manage your website</p>
            </div>
            
            {loginError && (
              <div className="bg-red-50 text-red-800 p-3 rounded-md mb-4">
                {loginError}
              </div>
            )}
            
            <form onSubmit={handleLogin}>
              <div className="mb-4">
                <label htmlFor="username" className="block text-gray-700 font-medium mb-2">Username</label>
                <input
                  type="text"
                  id="username"
                  value={username}
                  onChange={(e) => setUsername(e.target.value)}
                  className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#457B9D]"
                  placeholder="Enter your username"
                  required
                />
              </div>
              
              <div className="mb-6">
                <label htmlFor="password" className="block text-gray-700 font-medium mb-2">Password</label>
                <input
                  type="password"
                  id="password"
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                  className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#457B9D]"
                  placeholder="Enter your password"
                  required
                />
              </div>
              
              <button
                type="submit"
                className="w-full py-3 bg-[#457B9D] text-white rounded-lg hover:bg-[#3D6E8C] transition-colors"
              >
                Sign In
              </button>
            </form>
            
            <div className="mt-6 text-center">
              <a href="#" className="text-[#457B9D] hover:text-[#E63946] transition-colors" onClick={() => setShowAdminPanel(false)}>
                Return to Website
              </a>
            </div>
          </div>
        </div>
      );
    }

    return (
      <div className="min-h-screen bg-gray-100 flex">
        {/* Sidebar */}
        <div className={`bg-[#1E293B] text-white transition-all duration-300 ${sidebarOpen ? 'w-64' : 'w-20'} fixed h-full z-10`}>
          <div className="p-4 flex items-center justify-between">
            {sidebarOpen ? (
              <h2 className="text-xl font-bold">
                <span className="text-[#E63946]">M</span><span className="text-white">ibos</span> Admin
              </h2>
            ) : (
              <span className="text-xl font-bold mx-auto">
                <span className="text-[#E63946]">M</span>
              </span>
            )}
            <button onClick={toggleSidebar} className="text-gray-400 hover:text-white">
              {sidebarOpen ? <ChevronLeft size={20} /> : <ChevronRight size={20} />}
            </button>
          </div>
          
          <nav className="mt-6">
            <ul className="space-y-2">
              <li>
                <button
                  onClick={() => setCurrentAdminPage('dashboard')}
                  className={`flex items-center w-full px-4 py-3 ${currentAdminPage === 'dashboard' ? 'bg-[#2D3748] text-white' : 'text-gray-300 hover:bg-[#2D3748] hover:text-white'} transition-colors`}
                >
                  <BarChart2 size={20} className="flex-shrink-0" />
                  {sidebarOpen && <span className="ml-3">Dashboard</span>}
                </button>
              </li>
              <li>
                <button
                  onClick={() => setCurrentAdminPage('categories')}
                  className={`flex items-center w-full px-4 py-3 ${currentAdminPage === 'categories' ? 'bg-[#2D3748] text-white' : 'text-gray-300 hover:bg-[#2D3748] hover:text-white'} transition-colors`}
                >
                  <Layers size={20} className="flex-shrink-0" />
                  {sidebarOpen && <span className="ml-3">Categories</span>}
                </button>
              </li>
              <li>
                <button
                  onClick={() => setCurrentAdminPage('products')}
                  className={`flex items-center w-full px-4 py-3 ${currentAdminPage === 'products' ? 'bg-[#2D3748] text-white' : 'text-gray-300 hover:bg-[#2D3748] hover:text-white'} transition-colors`}
                >
                  <Package size={20} className="flex-shrink-0" />
                  {sidebarOpen && <span className="ml-3">Products</span>}
                </button>
              </li>
              <li>
                <button
                  onClick={() => setCurrentAdminPage('content')}
                  className={`flex items-center w-full px-4 py-3 ${currentAdminPage === 'content' ? 'bg-[#2D3748] text-white' : 'text-gray-300 hover:bg-[#2D3748] hover:text-white'} transition-colors`}
                >
                  <FileText size={20} className="flex-shrink-0" />
                  {sidebarOpen && <span className="ml-3">Content</span>}
                </button>
              </li>
              <li>
                <button
                  onClick={() => setCurrentAdminPage('gallery')}
                  className={`flex items-center w-full px-4 py-3 ${currentAdminPage === 'gallery' ? 'bg-[#2D3748] text-white' : 'text-gray-300 hover:bg-[#2D3748] hover:text-white'} transition-colors`}
                >
                  <Image size={20} className="flex-shrink-0" />
                  {sidebarOpen && <span className="ml-3">Gallery</span>}
                </button>
              </li>
              <li>
                <button
                  onClick={() => setCurrentAdminPage('users')}
                  className={`flex items-center w-full px-4 py-3 ${currentAdminPage === 'users' ? 'bg-[#2D3748] text-white' : 'text-gray-300 hover:bg-[#2D3748] hover:text-white'} transition-colors`}
                >
                  <Users size={20} className="flex-shrink-0" />
                  {sidebarOpen && <span className="ml-3">Users</span>}
                </button>
              </li>
              <li>
                <button
                  onClick={() => setCurrentAdminPage('settings')}
                  className={`flex items-center w-full px-4 py-3 ${currentAdminPage === 'settings' ? 'bg-[#2D3748] text-white' : 'text-gray-300 hover:bg-[#2D3748] hover:text-white'} transition-colors`}
                >
                  <Settings size={20} className="flex-shrink-0" />
                  {sidebarOpen && <span className="ml-3">Settings</span>}
                </button>
              </li>
            </ul>
          </nav>
          
          <div className="absolute bottom-0 w-full p-4">
            <button
              onClick={handleLogout}
              className="flex items-center w-full px-4 py-3 text-gray-300 hover:bg-[#2D3748] hover:text-white transition-colors"
            >
              <LogOut size={20} className="flex-shrink-0" />
              {sidebarOpen && <span className="ml-3">Logout</span>}
            </button>
          </div>
        </div>
        
        {/* Main Content */}
        <div className={`transition-all duration-300 ${sidebarOpen ? 'ml-64' : 'ml-20'} flex-1`}>
          <header className="bg-white shadow-sm">
            <div className="px-6 py-4 flex justify-between items-center">
              <h1 className="text-2xl font-bold text-gray-800">
                {currentAdminPage.charAt(0).toUpperCase() + currentAdminPage.slice(1)}
              </h1>
              
              <div className="flex items-center space-x-4">
                <button
                  onClick={() => setShowAdminPanel(false)}
                  className="flex items-center text-gray-600 hover:text-[#457B9D] transition-colors"
                >
                  <Home size={20} className="mr-2" />
                  <span>View Website</span>
                </button>
                
                <div className="flex items-center">
                  <img
                    src="https://randomuser.me/api/portraits/men/32.jpg"
                    alt="Admin User"
                    className="w-8 h-8 rounded-full object-cover mr-2"
                  />
                  <span className="text-gray-800 font-medium">Admin User</span>
                </div>
              </div>
            </div>
          </header>
          
          <main className="p-6">
            {currentAdminPage === 'dashboard' && (
              <div className="space-y-6">
                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                  <div className="bg-white rounded-lg shadow-sm p-6">
                    <div className="flex items-center">
                      <div className="p-3 rounded-full bg-blue-100 text-blue-600 mr-4">
                        <Package size={24} />
                      </div>
                      <div>
                        <p className="text-gray-500 text-sm">Total Products</p>
                        <h3 className="text-2xl font-bold">{products.length}</h3>
                      </div>
                    </div>
                  </div>
                  
                  <div className="bg-white rounded-lg shadow-sm p-6">
                    <div className="flex items-center">
                      <div className="p-3 rounded-full bg-green-100 text-green-600 mr-4">
                        <DollarSign size={24} />
                      </div>
                      <div>
                        <p className="text-gray-500 text-sm">Total Sales</p>
                        <h3 className="text-2xl font-bold">€12,543</h3>
                      </div>
                    </div>
                  </div>
                  
                  <div className="bg-white rounded-lg shadow-sm p-6">
                    <div className="flex items-center">
                      <div className="p-3 rounded-full bg-purple-100 text-purple-600 mr-4">
                        <Users size={24} />
                      </div>
                      <div>
                        <p className="text-gray-500 text-sm">Total Customers</p>
                        <h3 className="text-2xl font-bold">1,243</h3>
                      </div>
                    </div>
                  </div>
                  
                  <div className="bg-white rounded-lg shadow-sm p-6">
                    <div className="flex items-center">
                      <div className="p-3 rounded-full bg-yellow-100 text-yellow-600 mr-4">
                        <MessageSquare size={24} />
                      </div>
                      <div>
                        <p className="text-gray-500 text-sm">New Messages</p>
                        <h3 className="text-2xl font-bold">18</h3>
                      </div>
                    </div>
                  </div>
                </div>
                
                <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
                  <div className="lg:col-span-2 bg-white rounded-lg shadow-sm p-6">
                    <h2 className="text-lg font-semibold mb-4">Sales Overview</h2>
                    <div className="h-64 bg-gray-100 rounded flex items-center justify-center">
                      <p className="text-gray-500">Sales chart would be displayed here</p>
                    </div>
                  </div>
                  
                  <div className="bg-white rounded-lg shadow-sm p-6">
                    <h2 className="text-lg font-semibold mb-4">Recent Activity</h2>
                    <div className="space-y-4">
                      <div className="flex items-start">
                        <div className="p-2 rounded-full bg-blue-100 text-blue-600 mr-3">
                          <Package size={16} />
                        </div>
                        <div>
                          <p className="text-sm">New product added: <span className="font-medium">Premium Wool Coat</span></p>
                          <p className="text-xs text-gray-500">2 hours ago</p>
                        </div>
                      </div>
                      
                      <div className="flex items-start">
                        <div className="p-2 rounded-full bg-green-100 text-green-600 mr-3">
                          <DollarSign size={16} />
                        </div>
                        <div>
                          <p className="text-sm">New order: <span className="font-medium">#12345</span></p>
                          <p className="text-xs text-gray-500">3 hours ago</p>
                        </div>
                      </div>
                      
                      <div className="flex items-start">
                        <div className="p-2 rounded-full bg-purple-100 text-purple-600 mr-3">
                          <Users size={16} />
                        </div>
                        <div>
                          <p className="text-sm">New customer: <span className="font-medium">Marko Horvat</span></p>
                          <p className="text-xs text-gray-500">5 hours ago</p>
                        </div>
                      </div>
                      
                      <div className="flex items-start">
                        <div className="p-2 rounded-full bg-yellow-100 text-yellow-600 mr-3">
                          <MessageSquare size={16} />
                        </div>
                        <div>
                          <p className="text-sm">New message from: <span className="font-medium">Ana Kovačić</span></p>
                          <p className="text-xs text-gray-500">6 hours ago</p>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                
                <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                  <div className="bg-white rounded-lg shadow-sm p-6">
                    <div className="flex justify-between items-center mb-4">
                      <h2 className="text-lg font-semibold">Top Selling Products</h2>
                      <a href="#" className="text-[#457B9D] hover:text-[#E63946] transition-colors text-sm">View All</a>
                    </div>
                    
                    <div className="space-y-4">
                      {products.slice(0, 3).map((product) => (
                        <div key={product.id} className="flex items-center">
                          <img src={product.image} alt={product.name} className="w-12 h-12 object-cover rounded-md mr-4" />
                          <div className="flex-grow">
                            <h3 className="font-medium">{product.name}</h3>
                            <p className="text-sm text-gray-500">{product.brand}</p>
                          </div>
                          <div className="text-right">
                            <p className="font-semibold">{product.price}</p>
                            <p className="text-sm text-gray-500">42 sold</p>
                          </div>
                        </div>
                      ))}
                    </div>
                  </div>
                  
                  <div className="bg-white rounded-lg shadow-sm p-6">
                    <div className="flex justify-between items-center mb-4">
                      <h2 className="text-lg font-semibold">Recent Orders</h2>
                      <a href="#" className="text-[#457B9D] hover:text-[#E63946] transition-colors text-sm">View All</a>
                    </div>
                    
                    <div className="space-y-4">
                      {[
                        { id: '12345', customer: 'Ana Kovačić', date: '2023-07-20', status: 'Delivered', total: '€179.98' },
                        { id: '12344', customer: 'Marko Horvat', date: '2023-07-19', status: 'Processing', total: '€249.99' },
                        { id: '12343', customer: 'Ivana Novak', date: '2023-07-18', status: 'Shipped', total: '€89.97' },
                      ].map((order) => (
                        <div key={order.id} className="flex items-center">
                          <div className="p-2 rounded-full bg-gray-100 text-gray-600 mr-4">
                            <Package size={16} />
                          </div>
                          <div className="flex-grow">
                            <h3 className="font-medium">Order #{order.id}</h3>
                            <p className="text-sm text-gray-500">{order.customer}</p>
                          </div>
                          <div className="text-right">
                            <p className="font-semibold">{order.total}</p>
                            <p className="text-sm text-gray-500">{order.status}</p>
                          </div>
                        </div>
                      ))}
                    </div>
                  </div>
                </div>
              </div>
            )}
            
            {currentAdminPage === 'categories' && (
              <div className="space-y-6">
                <div className="bg-white rounded-lg shadow-sm p-6">
                  <h2 className="text-lg font-semibold mb-4">Add New Category</h2>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                      <label className="block text-gray-700 font-medium mb-2">Category Name</label>
                      <input
                        type="text"
                        value={newCategory.name}
                        onChange={(e) => setNewCategory({ ...newCategory, name: e.target.value })}
                        className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#457B9D]"
                        placeholder="e.g. Fashion"
                      />
                    </div>
                    
                    <div>
                      <label className="block text-gray-700 font-medium mb-2">Category ID</label>
                      <input
                        type="text"
                        value={newCategory.id}
                        onChange={(e) => setNewCategory({ ...newCategory, id: e.target.value })}
                        className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#457B9D]"
                        placeholder="e.g. fashion"
                      />
                    </div>
                  </div>
                  
                  <div className="mt-4">
                    <button
                      onClick={handleAddCategory}
                      className="px-4 py-2 bg-[#457B9D] text-white rounded-lg hover:bg-[#3D6E8C] transition-colors"
                    >
                      Add Category
                    </button>
                  </div>
                </div>
                
                <div className="bg-white rounded-lg shadow-sm p-6">
                  <h2 className="text-lg font-semibold mb-4">Manage Categories</h2>
                  <div className="overflow-x-auto">
                    <table className="min-w-full divide-y divide-gray-200">
                      <thead className="bg-gray-50">
                        <tr>
                          <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ID</th>
                          <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
                          <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Subcategories</th>
                          <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                        </tr>
                      </thead>
                      <tbody className="bg-white divide-y divide-gray-200">
                        {categories.map((category) => (
                          <tr key={category.id}>
                            <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{category.id}</td>
                            <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{category.name}</td>
                            <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                              {category.subcategories.join(', ')}
                            </td>
                            <td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
                              <button
                                onClick={() => handleEditCategory(category)}
                                className="text-[#457B9D] hover:text-[#3D6E8C] mr-3"
                              >
                                <Edit size={18} />
                              </button>
                              <button
                                onClick={() => handleDeleteCategory(category.id)}
                                className="text-red-500 hover:text-red-700"
                              >
                                <Trash2 size={18} />
                              </button>
                            </td>
                          </tr>
                        ))}
                      </tbody>
                    </table>
                  </div>
                </div>
                
                {editingCategory && (
                  <div className="bg-white rounded-lg shadow-sm p-6">
                    <h2 className="text-lg font-semibold mb-4">Edit Category: {editingCategory.name}</h2>
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
                      <div>
                        <label className="block text-gray-700 font-medium mb-2">Category Name</label>
                        <input
                          type="text"
                          value={editingCategory.name}
                          onChange={(e) => setEditingCategory({ ...editingCategory, name: e.target.value })}
                          className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#457B9D]"
                        />
                      </div>
                      
                      <div>
                        <label className="block text-gray-700 font-medium mb-2">Category ID</label>
                        <input
                          type="text"
                          value={editingCategory.id}
                          onChange={(e) => setEditingCategory({ ...editingCategory, id: e.target.value })}
                          className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#457B9D]"
                          disabled
                        />
                      </div>
                    </div>
                    
                    <div className="mb-6">
                      <h3 className="text-md font-medium mb-2">Subcategories</h3>
                      <div className="flex flex-wrap gap-2 mb-4">
                        {editingCategory.subcategories.map((subcategory, index) => (
                          <div key={index} className="flex items-center bg-gray-100 rounded-full px-3 py-1">
                            <span className="text-sm">{subcategory}</span>
                            <button
                              onClick={() => handleRemoveSubcategory(subcategory)}
                              className="ml-2 text-gray-500 hover:text-red-500"
                            >
                              <X size={14} />
                            </button>
                          </div>
                        ))}
                      </div>
                      
                      <div className="flex">
                        <input
                          type="text"
                          value={newSubcategory}
                          onChange={(e) => setNewSubcategory(e.target.value)}
                          className="flex-grow px-4 py-2 border border-gray-300 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-[#457B9D]"
                          placeholder="Add new subcategory"
                        />
                        <button
                          onClick={handleAddSubcategory}
                          className="px-4 py-2 bg-[#457B9D] text-white rounded-r-lg hover:bg-[#3D6E8C] transition-colors"
                        >
                          Add
                        </button>
                      </div>
                    </div>
                    
                    <div className="flex space-x-3">
                      <button
                        onClick={handleUpdateCategory}
                        className="px-4 py-2 bg-[#457B9D] text-white rounded-lg hover:bg-[#3D6E8C] transition-colors"
                      >
                        Update Category
                      </button>
                      <button
                        onClick={() => setEditingCategory(null)}
                        className="px-4 py-2 bg-gray-200 text-gray-800 rounded-lg hover:bg-gray-300 transition-colors"
                      >
                        Cancel
                      </button>
                    </div>
                  </div>
                )}
              </div>
            )}
            
            {currentAdminPage === 'products' && (
              <div className="space-y-6">
                <div className="bg-white rounded-lg shadow-sm p-6">
                  <h2 className="text-lg font-semibold mb-4">Add New Product</h2>
                  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                    <div>
                      <label className="block text-gray-700 font-medium mb-2">Product Name</label>
                      <input
                        type="text"
                        value={newProduct.name}
                        onChange={(e) => setNewProduct({ ...newProduct, name: e.target.value })}
                        className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#457B9D]"
                        placeholder="e.g. Premium Wool Coat"
                      />
                    </div>
                    
                    <div>
                      <label className="block text-gray-700 font-medium mb-2">Category</label>
                      <select
                        value={newProduct.category}
                        onChange={(e) => setNewProduct({ ...newProduct, category: e.target.value })}
                        className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#457B9D]"
                      >
                        <option value="">Select Category</option>
                        {categories.map((category) => (
                          <option key={category.id} value={category.id}>{category.name}</option>
                        ))}
                      </select>
                    </div>
                    
                    <div>
                      <label className="block text-gray-700 font-medium mb-2">Subcategory</label>
                      <select
                        value={newProduct.subcategory}
                        onChange={(e) => setNewProduct({ ...newProduct, subcategory: e.target.value })}
                        className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#457B9D]"
                      >
                        <option value="">Select Subcategory</option>
                        {categories.find(cat => cat.id === newProduct.category)?.subcategories.map((subcat, index) => (
                          <option key={index} value={subcat}>{subcat}</option>
                        ))}
                      </select>
                    </div>
                    
                    <div>
                      <label className="block text-gray-700 font-medium mb-2">Brand</label>
                      <input
                        type="text"
                        value={newProduct.brand}
                        onChange={(e) => setNewProduct({ ...newProduct, brand: e.target.value })}
                        className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#457B9D]"
                        placeholder="e.g. BOBB"
                      />
                    </div>
                    
                    <div>
                      <label className="block text-gray-700 font-medium mb-2">Price</label>
                      <input
                        type="text"
                        value={newProduct.price}
                        onChange={(e) => setNewProduct({ ...newProduct, price: e.target.value })}
                        className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#457B9D]"
                        placeholder="e.g. 129,99 €"
                      />
                    </div>
                    
                    <div>
                      <label className="block text-gray-700 font-medium mb-2">Stock</label>
                      <input
                        type="number"
                        value={newProduct.stock}
                        onChange={(e) => setNewProduct({ ...newProduct, stock: parseInt(e.target.value) })}
                        className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#457B9D]"
                        placeholder="e.g. 25"
                      />
                    </div>
                    
                    <div>
                      <label className="block text-gray-700 font-medium mb-2">Image URL</label>
                      <input
                        type="text"
                        value={newProduct.image}
                        onChange={(e) => setNewProduct({ ...newProduct, image: e.target.value })}
                        className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#457B9D]"
                        placeholder="Enter image URL"
                      />
                    </div>
                    
                    <div>
                      <label className="block text-gray-700 font-medium mb-2">Rating</label>
                      <input
                        type="number"
                        min="0"
                        max="5"
                        step="0.1"
                        value={newProduct.rating}
                        onChange={(e) => setNewProduct({ ...newProduct, rating: parseFloat(e.target.value) })}
                        className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#457B9D]"
                      />
                    </div>
                    
                    <div className="flex items-center">
                      <input
                        type="checkbox"
                        id="featured"
                        checked={newProduct.featured}
                        onChange={(e) => setNewProduct({ ...newProduct, featured: e.target.checked })}
                        className="h-4 w-4 text-[#457B9D] focus:ring-[#457B9D] border-gray-300 rounded"
                      />
                      <label htmlFor="featured" className="ml-2 block text-gray-700">
                        Featured Product
                      </label>
                    </div>
                  </div>
                  
                  <div className="mt-6">
                    <button
                      onClick={handleAddProduct}
                      className="px-4 py-2 bg-[#457B9D] text-white rounded-lg hover:bg-[#3D6E8C] transition-colors"
                    >
                      Add Product
                    </button>
                  </div>
                </div>
                
                <div className="bg-white rounded-lg shadow-sm p-6">
                  <div className="flex justify-between items-center mb-4">
                    <h2 className="text-lg font-semibold">Manage Products</h2>
                    <div className="flex space-x-2">
                      <button className="p-2 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors">
                        <Grid size={18} />
                      </button>
                      <button className="p-2 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors">
                        <List size={18} />
                      </button>
                    </div>
                  </div>
                  
                  <div className="overflow-x-auto">
                    <table className="min-w-full divide-y divide-gray-200">
                      <thead className="bg-gray-50">
                        <tr>
                          <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Product</th>
                          <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Category</th>
                          <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Price</th>
                          <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Stock</th>
                          <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Featured</th>
                          <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                        </tr>
                      </thead>
                      <tbody className="bg-white divide-y divide-gray-200">
                        {products.map((product) => (
                          <tr key={product.id}>
                            <td className="px-6 py-4 whitespace-nowrap">
                              <div className="flex items-center">
                                <img src={product.image} alt={product.name} className="w-10 h-10 object-cover rounded-md mr-3" />
                                <div>
                                  <div className="text-sm font-medium text-gray-900">{product.name}</div>
                                  <div className="text-sm text-gray-500">{product.brand}</div>
                                </div>
                              </div>
                            </td>
                            <td className="px-6 py-4 whitespace-nowrap">
                              <div className="text-sm text-gray-900">{categories.find(cat => cat.id === product.category)?.name || product.category}</div>
                              <div className="text-sm text-gray-500">{product.subcategory}</div>
                            </td>
                            <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{product.price}</td>
                            <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{product.stock}</td>
                            <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                              {product.featured ? (
                                <span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                                  Yes
                                </span>
                              ) : (
                                <span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">
                                  No
                                </span>
                              )}
                            </td>
                            <td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
                              <button
                                onClick={() => handleEditProduct(product)}
                                className="text-[#457B9D] hover:text-[#3D6E8C] mr-3"
                              >
                                <Edit size={18} />
                              </button>
                              <button
                                onClick={() => handleDeleteProduct(product.id)}
                                className="text-red-500 hover:text-red-700"
                              >
                                <Trash2 size={18} />
                              </button>
                            </td>
                          </tr>
                        ))}
                      </tbody>
                    </table>
                  </div>
                </div>
                
                {editingProduct && (
                  <div className="bg-white rounded-lg shadow-sm p-6">
                    <h2 className="text-lg font-semibold mb-4">Edit Product: {editingProduct.name}</h2>
                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                      <div>
                        <label className="block text-gray-700 font-medium mb-2">Product Name</label>
                        <input
                          type="text"
                          value={editingProduct.name}
                          onChange={(e) => setEditingProduct({ ...editingProduct, name: e.target.value })}
                          className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#457B9D]"
                        />
                      </div>
                      
                      <div>
                        <label className="block text-gray-700 font-medium mb-2">Category</label>
                        <select
                          value={editingProduct.category}
                          onChange={(e) => setEditingProduct({ ...editingProduct, category: e.target.value })}
                          className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#457B9D]"
                        >
                          {categories.map((category) => (
                            <option key={category.id} value={category.id}>{category.name}</option>
                          ))}
                        </select>
                      </div>
                      
                      <div>
                        <label className="block text-gray-700 font-medium mb-2">Subcategory</label>
                        <select
                          value={editingProduct.subcategory}
                          onChange={(e) => setEditingProduct({ ...editingProduct, subcategory: e.target.value })}
                          className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#457B9D]"
                        >
                          {categories.find(cat => cat.id === editingProduct.category)?.subcategories.map((subcat, index) => (
                            <option key={index} value={subcat}>{subcat}</option>
                          ))}
                        </select>
                      </div>
                      
                      <div>
                        <label className="block text-gray-700 font-medium mb-2">Brand</label>
                        <input
                          type="text"
                          value={editingProduct.brand}
                          onChange={(e) => setEditingProduct({ ...editingProduct, brand: e.target.value })}
                          className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#457B9D]"
                        />
                      </div>
                      
                      <div>
                        <label className="block text-gray-700 font-medium mb-2">Price</label>
                        <input
                          type="text"
                          value={editingProduct.price}
                          onChange={(e) => setEditingProduct({ ...editingProduct, price: e.target.value })}
                          className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#457B9D]"
                        />
                      </div>
                      
                      <div>
                        <label className="block text-gray-700 font-medium mb-2">Stock</label>
                        <input
                          type="number"
                          value={editingProduct.stock}
                          onChange={(e) => setEditingProduct({ ...editingProduct, stock: parseInt(e.target.value) })}
                          className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#457B9D]"
                        />
                      </div>
                      
                      <div>
                        <label className="block text-gray-700 font-medium mb-2">Image URL</label>
                        <input
                          type="text"
                          value={editingProduct.image}
                          onChange={(e) => setEditingProduct({ ...editingProduct, image: e.target.value })}
                          className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#457B9D]"
                        />
                      </div>
                      
                      <div>
                        <label className="block text-gray-700 font-medium mb-2">Rating</label>
                        <input
                          type="number"
                          min="0"
                          max="5"
                          step="0.1"
                          value={editingProduct.rating}
                          onChange={(e) => setEditingProduct({ ...editingProduct, rating: parseFloat(e.target.value) })}
                          className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#457B9D]"
                        />
                      </div>
                      
                      <div className="flex items-center">
                        <input
                          type="checkbox"
                          id="editFeatured"
                          checked={editingProduct.featured}
                          onChange={(e) => setEditingProduct({ ...editingProduct, featured: e.target.checked })}
                          className="h-4 w-4 text-[#457B9D] focus:ring-[#457B9D] border-gray-300 rounded"
                        />
                        <label htmlFor="editFeatured" className="ml-2 block text-gray-700">
                          Featured Product
                        </label>
                      </div>
                    </div>
                    
                    <div className="mt-6 flex space-x-3">
                      <button
                        onClick={handleUpdateProduct}
                        className="px-4 py-2 bg-[#457B9D] text-white rounded-lg hover:bg-[#3D6E8C] transition-colors"
                      >
                        Update Product
                      </button>
                      <button
                        onClick={() => setEditingProduct(null)}
                        className="px-4 py-2 bg-gray-200 text-gray-800 rounded-lg hover:bg-gray-300 transition-colors"
                      >
                        Cancel
                      </button>
                    </div>
                  </div>
                )}
              </div>
            )}
            
            {currentAdminPage === 'content' && (
              <div className="space-y-6">
                <div className="bg-white rounded-lg shadow-sm p-6">
                  <h2 className="text-lg font-semibold mb-4">Add New Content</h2>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                      <label className="block text-gray-700 font-medium mb-2">Title</label>
                      <input
                        type="text"
                        value={newContent.title}
                        onChange={(e) => setNewContent({ ...newContent, title: e.target.value })}
                        className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#457B9D]"
                        placeholder="e.g. Summer Fashion Trends 2023"
                      />
                    </div>
                    
                    <div>
                      <label className="block text-gray-700 font-medium mb-2">Category</label>
                      <select
                        value={newContent.category}
                        onChange={(e) => setNewContent({ ...newContent, category: e.target.value })}
                        className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#457B9D]"
                      >
                        <option value="">Select Category</option>
                        <option value="fashion">Fashion</option>
                        <option value="home">Home</option>
                        <option value="bobb">Bobb</option>
                        <option value="news">News</option>
                      </select>
                    </div>
                    
                    <div>
                      <label className="block text-gray-700 font-medium mb-2">Image URL</label>
                      <input
                        type="text"
                        value={newContent.image}
                        onChange={(e) => setNewContent({ ...newContent, image: e.target.value })}
                        className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#457B9D]"
                        placeholder="Enter image URL"
                      />
                    </div>
                    
                    <div>
                      <label className="block text-gray-700 font-medium mb-2">Date</label>
                      <input
                        type="date"
                        value={newContent.date}
                        onChange={(e) => setNewContent({ ...newContent, date: e.target.value })}
                        className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#457B9D]"
                      />
                    </div>
                    
                    <div className="md:col-span-2">
                      <label className="block text-gray-700 font-medium mb-2">Content</label>
                      <textarea
                        value={newContent.content}
                        onChange={(e) => setNewContent({ ...newContent, content: e.target.value })}
                        className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#457B9D] h-32"
                        placeholder="Enter content here..."
                      ></textarea>
                    </div>
                    
                    <div className="flex items-center">
                      <input
                        type="checkbox"
                        id="contentFeatured"
                        checked={newContent.featured}
                        onChange={(e) => setNewContent({ ...newContent, featured: e.target.checked })}
                        className="h-4 w-4 text-[#457B9D] focus:ring-[#457B9D] border-gray-300 rounded"
                      />
                      <label htmlFor="contentFeatured" className="ml-2 block text-gray-700">
                        Featured Content
                      </label>
                    </div>
                  </div>
                  
                  <div className="mt-6">
                    <button
                      onClick={handleAddContent}
                      className="px-4 py-2 bg-[#457B9D] text-white rounded-lg hover:bg-[#3D6E8C] transition-colors"
                    >
                      Add Content
                    </button>
                  </div>
                </div>
                
                <div className="bg-white rounded-lg shadow-sm p-6">
                  <div className="flex justify-between items-center mb-4">
                    <h2 className="text-lg font-semibold">Manage Content</h2>
                    <div className="flex space-x-2">
                      <select className="px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#457B9D]">
                        <option value="all">All Categories</option>
                        <option value="fashion">Fashion</option>
                        <option value="home">Home</option>
                        <option value="bobb">Bobb</option>
                        <option value="news">News</option>
                      </select>
                    </div>
                  </div>
                  
                  <div className="overflow-x-auto">
                    <table className="min-w-full divide-y divide-gray-200">
                      <thead className="bg-gray-50">
                        <tr>
                          <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Title</th>
                          <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Category</th>
                          <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
                          <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Featured</th>
                          <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                        </tr>
                      </thead>
                      <tbody className="bg-white divide-y divide-gray-200">
                        {content.map((item) => (
                          <tr key={item.id}>
                            <td className="px-6 py-4 whitespace-nowrap">
                              <div className="flex items-center">
                                <img src={item.image} alt={item.title} className="w-10 h-10 object-cover rounded-md mr-3" />
                                <div className="text-sm font-medium text-gray-900">{item.title}</div>
                              </div>
                            </td>
                            <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                              {item.category.charAt(0).toUpperCase() + item.category.slice(1)}
                            </td>
                            <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{item.date}</td>
                            <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                              {item.featured ? (
                                <span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                                  Yes
                                </span>
                              ) : (
                                <span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">
                                  No
                                </span>
                              )}
                            </td>
                            <td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
                              <button
                                onClick={() => handleEditContent(item)}
                                className="text-[#457B9D] hover:text-[#3D6E8C] mr-3"
                              >
                                <Edit size={18} />
                              </button>
                              <button
                                className="text-gray-500 hover:text-gray-700 mr-3"
                              >
                                <Eye size={18} />
                              </button>
                              <button
                                onClick={() => handleDeleteContent(item.id)}
                                className="text-red-500 hover:text-red-700"
                              >
                                <Trash2 size={18} />
                              </button>
                            </td>
                          </tr>
                        ))}
                      </tbody>
                    </table>
                  </div>
                </div>
                
                {editingContent && (
                  <div className="bg-white rounded-lg shadow-sm p-6">
                    <h2 className="text-lg font-semibold mb-4">Edit Content: {editingContent.title}</h2>
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                      <div>
                        <label className="block text-gray-700 font-medium mb-2">Title</label>
                        <input
                          type="text"
                          value={editingContent.title}
                          onChange={(e) => setEditingContent({ ...editingContent, title: e.target.value })}
                          className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#457B9D]"
                        />
                      </div>
                      
                      <div>
                        <label className="block text-gray-700 font-medium mb-2">Category</label>
                        <select
                          value={editingContent.category}
                          onChange={(e) => setEditingContent({ ...editingContent, category: e.target.value })}
                          className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#457B9D]"
                        >
                          <option value="fashion">Fashion</option>
                          <option value="home">Home</option>
                          <option value="bobb">Bobb</option>
                          <option value="news">News</option>
                        </select>
                      </div>
                      
                      <div>
                        <label className="block text-gray-700 font-medium mb-2">Image URL</label>
                        <input
                          type="text"
                          value={editingContent.image}
                          onChange={(e) => setEditingContent({ ...editingContent, image: e.target.value })}
                          className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#457B9D]"
                        />
                      </div>
                      
                      <div>
                        <label className="block text-gray-700 font-medium mb-2">Date</label>
                        <input
                          type="date"
                          value={editingContent.date}
                          onChange={(e) => setEditingContent({ ...editingContent, date: e.target.value })}
                          className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#457B9D]"
                        />
                      </div>
                      
                      <div className="md:col-span-2">
                        <label className="block text-gray-700 font-medium mb-2">Content</label>
                        <textarea
                          value={editingContent.content}
                          onChange={(e) => setEditingContent({ ...editingContent, content: e.target.value })}
                          className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#457B9D] h-32"
                        ></textarea>
                      </div>
                      
                      <div className="flex items-center">
                        <input
                          type="checkbox"
                          id="editContentFeatured"
                          checked={editingContent.featured}
                          onChange={(e) => setEditingContent({ ...editingContent, featured: e.target.checked })}
                          className="h-4 w-4 text-[#457B9D] focus:ring-[#457B9D] border-gray-300 rounded"
                        />
                        <label htmlFor="editContentFeatured" className="ml-2 block text-gray-700">
                          Featured Content
                        </label>
                      </div>
                    </div>
                    
                    <div className="mt-6 flex space-x-3">
                      <button
                        onClick={handleUpdateContent}
                        className="px-4 py-2 bg-[#457B9D] text-white rounded-lg hover:bg-[#3D6E8C] transition-colors"
                      >
                        Update Content
                      </button>
                      <button
                        onClick={() => setEditingContent(null)}
                        className="px-4 py-2 bg-gray-200 text-gray-800 rounded-lg hover:bg-gray-300 transition-colors"
                      >
                        Cancel
                      </button>
                    </div>
                  </div>
                )}
              </div>
            )}
            
            {currentAdminPage === 'gallery' && (
              <div className="space-y-6">
                <div className="bg-white rounded-lg shadow-sm p-6">
                  <h2 className="text-lg font-semibold mb-4">Add New Gallery Item</h2>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                      <label className="block text-gray-700 font-medium mb-2">Title</label>
                      <input
                        type="text"
                        value={newGallery.title}
                        onChange={(e) => setNewGallery({ ...newGallery, title: e.target.value })}
                        className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#457B9D]"
                        placeholder="e.g. Summer Collection"
                      />
                    </div>
                    
                    <div>
                      <label className="block text-gray-700 font-medium mb-2">Category</label>
                      <select
                        value={newGallery.category}
                        onChange={(e) => setNewGallery({ ...newGallery, category: e.target.value })}
                        className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#457B9D]"
                      >
                        <option value="">Select Category</option>
                        <option value="fashion">Fashion</option>
                        <option value="home">Home</option>
                        <option value="bobb">Bobb</option>
                        <option value="news">News</option>
                      </select>
                    </div>
                    
                    <div>
                      <label className="block text-gray-700 font-medium mb-2">Image URL</label>
                      <input
                        type="text"
                        value={newGallery.image}
                        onChange={(e) => setNewGallery({ ...newGallery, image: e.target.value })}
                        className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#457B9D]"
                        placeholder="Enter image URL"
                      />
                    </div>
                    
                    <div className="flex items-center">
                      <input
                        type="checkbox"
                        id="galleryFeatured"
                        checked={newGallery.featured}
                        onChange={(e) => setNewGallery({ ...newGallery, featured: e.target.checked })}
                        className="h-4 w-4 text-[#457B9D] focus:ring-[#457B9D] border-gray-300 rounded"
                      />
                      <label htmlFor="galleryFeatured" className="ml-2 block text-gray-700">
                        Featured Image
                      </label>
                    </div>
                  </div>
                  
                  <div className="mt-6">
                    <button
                      onClick={handleAddGallery}
                      className="px-4 py-2 bg-[#457B9D] text-white rounded-lg hover:bg-[#3D6E8C] transition-colors"
                    >
                      Add to Gallery
                    </button>
                  </div>
                </div>
                
                <div className="bg-white rounded-lg shadow-sm p-6">
                  <div className="flex justify-between items-center mb-4">
                    <h2 className="text-lg font-semibold">Manage Gallery</h2>
                    <div className="flex space-x-2">
                      <select className="px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#457B9D]">
                        <option value="all">All Categories</option>
                        <option value="fashion">Fashion</option>
                        <option value="home">Home</option>
                        <option value="bobb">Bobb</option>
                        <option value="news">News</option>
                      </select>
                      <button className="p-2 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors">
                        <Grid size={18} />
                      </button>
                      <button className="p-2 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors">
                        <List size={18} />
                      </button>
                    </div>
                  </div>
                  
                  <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
                    {gallery.map((item) => (
                      <div key={item.id} className="bg-gray-50 rounded-lg overflow-hidden">
                        <div className="relative">
                          <img src={item.image} alt={item.title} className="w-full h-48 object-cover" />
                          {item.featured && (
                            <div className="absolute top-2 right-2 px-2 py-1 bg-green-500 text-white text-xs rounded-full">
                              Featured
                            </div>
                          )}
                        </div>
                        <div className="p-4">
                          <h3 className="font-medium mb-1">{item.title}</h3>
                          <p className="text-sm text-gray-500 mb-3">
                            {item.category.charAt(0).toUpperCase() + item.category.slice(1)}
                          </p>
                          <div className="flex space-x-2">
                            <button
                              onClick={() => handleEditGallery(item)}
                              className="p-1 text-[#457B9D] hover:text-[#3D6E8C]"
                            >
                              <Edit size={16} />
                            </button>
                            <button
                              className="p-1 text-gray-500 hover:text-gray-700"
                            >
                              <Eye size={16} />
                            </button>
                            <button
                              onClick={() => handleDeleteGallery(item.id)}
                              className="p-1 text-red-500 hover:text-red-700"
                            >
                              <Trash2 size={16} />
                            </button>
                          </div>
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
                
                {editingGallery && (
                  <div className="bg-white rounded-lg shadow-sm p-6">
                    <h2 className="text-lg font-semibold mb-4">Edit Gallery Item: {editingGallery.title}</h2>
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                      <div>
                        <label className="block text-gray-700 font-medium mb-2">Title</label>
                        <input
                          type="text"
                          value={editingGallery.title}
                          onChange={(e) => setEditingGallery({ ...editingGallery, title: e.target.value })}
                          className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#457B9D]"
                        />
                      </div>
                      
                      <div>
                        <label className="block text-gray-700 font-medium mb-2">Category</label>
                        <select
                          value={editingGallery.category}
                          onChange={(e) => setEditingGallery({ ...editingGallery, category: e.target.value })}
                          className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#457B9D]"
                        >
                          <option value="fashion">Fashion</option>
                          <option value="home">Home</option>
                          <option value="bobb">Bobb</option>
                          <option value="news">News</option>
                        </select>
                      </div>
                      
                      <div>
                        <label className="block text-gray-700 font-medium mb-2">Image URL</label>
                        <input
                          type="text"
                          value={editingGallery.image}
                          onChange={(e) => setEditingGallery({ ...editingGallery, image: e.target.value })}
                          className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#457B9D]"
                        />
                      </div>
                      
                      <div className="flex items-center">
                        <input
                          type="checkbox"
                          id="editGalleryFeatured"
                          checked={editingGallery.featured}
                          onChange={(e) => setEditingGallery({ ...editingGallery, featured: e.target.checked })}
                          className="h-4 w-4 text-[#457B9D] focus:ring-[#457B9D] border-gray-300 rounded"
                        />
                        <label htmlFor="editGalleryFeatured" className="ml-2 block text-gray-700">
                          Featured Image
                        </label>
                      </div>
                    </div>
                    
                    <div className="mt-6 flex space-x-3">
                      <button
                        onClick={handleUpdateGallery}
                        className="px-4 py-2 bg-[#457B9D] text-white rounded-lg hover:bg-[#3D6E8C] transition-colors"
                      >
                        Update Gallery Item
                      </button>
                      <button
                        onClick={() => setEditingGallery(null)}
                        className="px-4 py-2 bg-gray-200 text-gray-800 rounded-lg hover:bg-gray-300 transition-colors"
                      >
                        Cancel
                      </button>
                    </div>
                  </div>
                )}
              </div>
            )}
            
            {currentAdminPage === 'users' && (
              <div className="space-y-6">
                <div className="bg-white rounded-lg shadow-sm p-6">
                  <h2 className="text-lg font-semibold mb-4">Add New User</h2>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                      <label className="block text-gray-700 font-medium mb-2">Full Name</label>
                      <input
                        type="text"
                        className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#457B9D]"
                        placeholder="e.g. John Doe"
                      />
                    </div>
                    
                    <div>
                      <label className="block text-gray-700 font-medium mb-2">Email</label>
                      <input
                        type="email"
                        className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#457B9D]"
                        placeholder="e.g. john@example.com"
                      />
                    </div>
                    
                    <div>
                      <label className="block text-gray-700 font-medium mb-2">Username</label>
                      <input
                        type="text"
                        className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#457B9D]"
                        placeholder="e.g. johndoe"
                      />
                    </div>
                    
                    <div>
                      <label className="block text-gray-700 font-medium mb-2">Password</label>
                      <input
                        type="password"
                        className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#457B9D]"
                        placeholder="Enter password"
                      />
                    </div>
                    
                    <div>
                      <label className="block text-gray-700 font-medium mb-2">Role</label>
                      <select
                        className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#457B9D]"
                      >
                        <option value="admin">Administrator</option>
                        <option value="editor">Editor</option>
                        <option value="viewer">Viewer</option>
                      </select>
                    </div>
                  </div>
                  
                  <div className="mt-6">
                    <button
                      className="px-4 py-2 bg-[#457B9D] text-white rounded-lg hover:bg-[#3D6E8C] transition-colors"
                    >
                      Add User
                    </button>
                  </div>
                </div>
                
                <div className="bg-white rounded-lg shadow-sm p-6">
                  <h2 className="text-lg font-semibold mb-4">Manage Users</h2>
                  <div className="overflow-x-auto">
                    <table className="min-w-full divide-y divide-gray-200">
                      <thead className="bg-gray-50">
                        <tr>
                          <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">User</th>
                          <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Email</th>
                          <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Role</th>
                          <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                          <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                        </tr>
                      </thead>
                      <tbody className="bg-white divide-y divide-gray-200">
                        {[
                          { id: 1, name: 'Admin User', email: 'admin@mibos.com', role: 'Administrator', status: 'Active', avatar: 'https://randomuser.me/api/portraits/men/32.jpg' },
                          { id: 2, name: 'Editor User', email: 'editor@mibos.com', role: 'Editor', status: 'Active', avatar: 'https://randomuser.me/api/portraits/women/44.jpg' },
                          { id: 3, name: 'Viewer User', email: 'viewer@mibos.com', role: 'Viewer', status: 'Inactive', avatar: 'https://randomuser.me/api/portraits/men/68.jpg' },
                        ].map((user) => (
                          <tr key={user.id}>
                            <td className="px-6 py-4 whitespace-nowrap">
                              <div className="flex items-center">
                                <img src={user.avatar} alt={user.name} className="w-8 h-8 rounded-full object-cover mr-3" />
                                <div className="text-sm font-medium text-gray-900">{user.name}</div>
                              </div>
                            </td>
                            <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{user.email}</td>
                            <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{user.role}</td>
                            <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                              {user.status === 'Active' ? (
                                <span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                                  Active
                                </span>
                              ) : (
                                <span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">
                                  Inactive
                                </span>
                              )}
                            </td>
                            <td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
                              <button
                                className="text-[#457B9D] hover:text-[#3D6E8C] mr-3"
                              >
                                <Edit size={18} />
                              </button>
                              <button
                                className="text-red-500 hover:text-red-700"
                              >
                                <Trash2 size={18} />
                              </button>
                            </td>
                          </tr>
                        ))}
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            )}
            
            {currentAdminPage === 'settings' && (
              <div className="space-y-6">
                <div className="bg-white rounded-lg shadow-sm p-6">
                  <h2 className="text-lg font-semibold mb-4">General Settings</h2>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                      <label className="block text-gray-700 font-medium mb-2">Site Name</label>
                      <input
                        type="text"
                        defaultValue="Mibos Robna Kuća"
                        className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#457B9D]"
                      />
                    </div>
                    
                    <div>
                      <label className="block text-gray-700 font-medium mb-2">Tagline</label>
                      <input
                        type="text"
                        defaultValue="Excellent quality, affordable prices"
                        className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#457B9D]"
                      />
                    </div>
                    
                    <div>
                      <label className="block text-gray-700 font-medium mb-2">Email Address</label>
                      <input
                        type="email"
                        defaultValue="info@mibos.com"
                        className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#457B9D]"
                      />
                    </div>
                    
                    <div>
                      <label className="block text-gray-700 font-medium mb-2">Phone Number</label>
                      <input
                        type="text"
                        defaultValue="+385 1 234 5678"
                        className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#457B9D]"
                      />
                    </div>
                    
                    <div className="md:col-span-2">
                      <label className="block text-gray-700 font-medium mb-2">Address</label>
                      <textarea
                        defaultValue="Trg bana Josipa Jelačića 10, 10000 Zagreb, Croatia"
                        className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#457B9D] h-20"
                      ></textarea>
                    </div>
                  </div>
                  
                  <div className="mt-6">
                    <button
                      className="px-4 py-2 bg-[#457B9D] text-white rounded-lg hover:bg-[#3D6E8C] transition-colors"
                    >
                      Save Settings
                    </button>
                  </div>
                </div>
                
                <div className="bg-white rounded-lg shadow-sm p-6">
                  <h2 className="text-lg font-semibold mb-4">Social Media</h2>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                      <label className="block text-gray-700 font-medium mb-2">Facebook</label>
                      <input
                        type="text"
                        defaultValue="https://facebook.com/mibos"
                        className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#457B9D]"
                      />
                    </div>
                    
                    <div>
                      <label className="block text-gray-700 font-medium mb-2">Instagram</label>
                      <input
                        type="text"
                        defaultValue="https://instagram.com/mibos"
                        className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#457B9D]"
                      />
                    </div>
                    
                    <div>
                      <label className="block text-gray-700 font-medium mb-2">Twitter</label>
                      <input
                        type="text"
                        defaultValue="https://twitter.com/mibos"
                        className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#457B9D]"
                      />
                    </div>
                    
                    <div>
                      <label className="block text-gray-700 font-medium mb-2">LinkedIn</label>
                      <input
                        type="text"
                        defaultValue="https://linkedin.com/company/mibos"
                        className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#457B9D]"
                      />
                    </div>
                  </div>
                  
                  <div className="mt-6">
                    <button
                      className="px-4 py-2 bg-[#457B9D] text-white rounded-lg hover:bg-[#3D6E8C] transition-colors"
                    >
                      Save Social Media
                    </button>
                  </div>
                </div>
                
                <div className="bg-white rounded-lg shadow-sm p-6">
                  <h2 className="text-lg font-semibold mb-4">SEO Settings</h2>
                  <div className="space-y-4">
                    <div>
                      <label className="block text-gray-700 font-medium mb-2">Meta Title</label>
                      <input
                        type="text"
                        defaultValue="Mibos Robna Kuća | Excellent Quality, Affordable Prices"
                        className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#457B9D]"
                      />
                    </div>
                    
                    <div>
                      <label className="block text-gray-700 font-medium mb-2">Meta Description</label>
                      <textarea
                        defaultValue="Discover premium quality products at affordable prices at Mibos Robna Kuća. Shop fashion, home decor, and more with our trusted brand for over 23 years."
                        className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#457B9D] h-20"
                      ></textarea>
                    </div>
                    
                    <div>
                      <label className="block text-gray-700 font-medium mb-2">Meta Keywords</label>
                      <input
                        type="text"
                        defaultValue="mibos, robna kuća, fashion, home decor, affordable, quality, croatia"
                        className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#457B9D]"
                      />
                    </div>
                  </div>
                  
                  <div className="mt-6">
                    <button
                      className="px-4 py-2 bg-[#457B9D] text-white rounded-lg hover:bg-[#3D6E8C] transition-colors"
                    >
                      Save SEO Settings
                    </button>
                  </div>
                </div>
              </div>
            )}
          </main>
        </div>
      </div>
    );
  };

  // Render main website
  const renderWebsite = () => {
    return (
      <div className="font-sans bg-white text-gray-800">
        {/* Notification */}
        <div id="notification" className="fixed top-24 right-4 bg-green-50 border border-green-200 text-green-800 px-4 py-3 rounded shadow-lg transition-opacity duration-300 opacity-0 z-50">
          Product added to cart!
        </div>
        
        <div id="wishlist-notification" className="fixed top-24 right-4 bg-red-50 border border-red-200 text-red-800 px-4 py-3 rounded shadow-lg transition-opacity duration-300 opacity-0 z-50">
          Product added to wishlist!
        </div>

        {/* Header */}
        <header className={`w-full transition-all duration-300 ${scrolled ? 'py-2 shadow-md bg-white' : 'py-4 bg-white'} fixed top-0 left-0 right-0 z-40`}>
          <div className="container mx-auto px-4">
            <div className="flex items-center justify-between">
              {/* Mobile menu button */}
              <button className="lg:hidden p-2" onClick={toggleMenu}>
                {isMenuOpen ? <X size={24} /> : <Menu size={24} />}
              </button>
              
              {/* Logo */}
              <div className="flex-shrink-0">
                <a href="#" className="text-2xl font-bold tracking-tighter">
                  <span className="text-[#E63946]">M</span><span className="text-[#457B9D]">ibos</span>
                </a>
              </div>
              
              {/* Desktop Navigation */}
              <nav className="hidden lg:flex space-x-8">
                {categories.map((category) => (
                  <div key={category.id} className="relative group" 
                       onMouseEnter={() => setActiveCategory(category.id)}
                       onMouseLeave={() => setActiveCategory(null)}>
                    <button className="flex items-center space-x-1 py-2 font-medium hover:text-[#E63946] transition-colors">
                      <span>{category.name}</span>
                      <ChevronDown size={16} />
                    </button>
                    
                    {/* Mega Menu */}
                    <div className={`absolute top-full left-0 w-[600px] bg-white shadow-lg rounded-b-lg p-6 grid grid-cols-2 gap-6 transition-all duration-200 ${activeCategory === category.id ? 'opacity-100 visible' : 'opacity-0 invisible'}`}>
                      <div>
                        <h3 className="text-lg font-semibold mb-4">{category.name} Categories</h3>
                        <ul className="space-y-2">
                          {category.subcategories.map((subcat, idx) => (
                            <li key={idx}>
                              <a href="#" className="flex items-center hover:text-[#E63946] transition-colors">
                                <ChevronRight size={16} className="mr-2" />
                                <span>{subcat}</span>
                              </a>
                            </li>
                          ))}
                        </ul>
                      </div>
                      <div>
                        <h3 className="text-lg font-semibold mb-4">Featured</h3>
                        <div className="bg-gray-50 rounded-lg p-4">
                          <img 
                            src={`https://images.unsplash.com/photo-${category.id === 'assortment' ? '1551488831-00ddcb6c6bd3' : 
                                  category.id === 'home' ? '1616486338812-3dadae4b4ace' : 
                                  category.id === 'bobb' ? '1596462118800-11a29fd31b50' : 
                                  '1593642632823-8f785ba67e45'}?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80`} 
                            alt={`${category.name} featured`}
                            className="w-full h-32 object-cover rounded-md mb-3"
                          />
                          <h4 className="font-medium">New Arrivals</h4>
                          <p className="text-sm text-gray-600 mt-1">Discover the latest in {category.name.toLowerCase()}</p>
                          <a href="#" className="text-[#457B9D] text-sm font-medium flex items-center mt-2 hover:text-[#E63946] transition-colors">
                            Shop Now <ArrowRight size={14} className="ml-1" />
                          </a>
                        </div>
                      </div>
                    </div>
                  </div>
                ))}
                <a href="#" className="py-2 font-medium hover:text-[#E63946] transition-colors">Sale</a>
                <a href="#" className="py-2 font-medium hover:text-[#E63946] transition-colors">About Us</a>
              </nav>
              
              {/* Header Icons */}
              <div className="flex items-center space-x-4">
                <button className="p-2 hover:text-[#E63946] transition-colors" onClick={toggleSearch}>
                  <Search size={20} />
                </button>
                <button className="p-2 hover:text-[#E63946] transition-colors relative" onClick={() => addToWishlist()}>
                  <Heart size={20} />
                  {wishlistCount > 0 && (
                    <span className="absolute -top-1 -right-1 bg-[#E63946] text-white text-xs rounded-full w-4 h-4 flex items-center justify-center">
                      {wishlistCount}
                    </span>
                  )}
                </button>
                <button className="p-2 hover:text-[#E63946] transition-colors relative" onClick={toggleCart}>
                  <ShoppingCart size={20} />
                  {cartItems.length > 0 && (
                    <span className="absolute -top-1 -right-1 bg-[#E63946] text-white text-xs rounded-full w-4 h-4 flex items-center justify-center">
                      {cartItems.length}
                    </span>
                  )}
                </button>
                <button 
                  className="p-2 hover:text-[#E63946] transition-colors"
                  onClick={() => setShowAdminPanel(true)}
                >
                  <User size={20} />
                </button>
              </div>
            </div>
          </div>
        </header>

        {/* Mobile Menu */}
        <div className={`fixed inset-0 bg-white z-30 transform transition-transform duration-300 lg:hidden ${isMenuOpen ? 'translate-x-0' : '-translate-x-full'}`}>
          <div className="container mx-auto px-4 py-20">
            <div className="space-y-6">
              {categories.map((category) => (
                <div key={category.id} className="border-b border-gray-100 pb-4">
                  <button className="flex items-center justify-between w-full py-2 font-medium" 
                          onClick={() => setActiveCategory(activeCategory === category.id ? null : category.id)}>
                    <span>{category.name}</span>
                    <ChevronDown size={16} className={`transition-transform duration-200 ${activeCategory === category.id ? 'rotate-180' : ''}`} />
                  </button>
                  
                  {activeCategory === category.id && (
                    <div className="mt-2 ml-4 space-y-2">
                      {category.subcategories.map((subcat, idx) => (
                        <a key={idx} href="#" className="block py-1 hover:text-[#E63946] transition-colors">
                          {subcat}
                        </a>
                      ))}
                    </div>
                  )}
                </div>
              ))}
              <a href="#" className="block py-2 font-medium hover:text-[#E63946] transition-colors">Sale</a>
              <a href="#" className="block py-2 font-medium hover:text-[#E63946] transition-colors">About Us</a>
              <button 
                className="block py-2 font-medium hover:text-[#E63946] transition-colors"
                onClick={() => {
                  setShowAdminPanel(true);
                  setIsMenuOpen(false);
                }}
              >
                Admin Panel
              </button>
            </div>
          </div>
        </div>

        {/* Search Overlay */}
        <div className={`fixed inset-0 bg-black bg-opacity-50 z-50 transition-opacity duration-300 ${isSearchOpen ? 'opacity-100 visible' : 'opacity-0 invisible'}`}>
          <div className="container mx-auto px-4 pt-32">
            <div className="bg-white rounded-lg p-6 max-w-2xl mx-auto">
              <div className="flex justify-between items-center mb-4">
                <h2 className="text-xl font-semibold">Search Products</h2>
                <button onClick={toggleSearch}>
                  <X size={24} />
                </button>
              </div>
              <div className="relative">
                <input 
                  type="text" 
                  placeholder="What are you looking for?" 
                  className="w-full border border-gray-300 rounded-lg py-3 px-4 focus:outline-none focus:ring-2 focus:ring-[#457B9D]"
                  autoFocus
                />
                <button className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-[#E63946]">
                  <Search size={20} />
                </button>
              </div>
              <div className="mt-4">
                <h3 className="font-medium mb-2">Popular Searches</h3>
                <div className="flex flex-wrap gap-2">
                  <a href="#" className="px-3 py-1 bg-gray-100 rounded-full text-sm hover:bg-gray-200 transition-colors">Summer dresses</a>
                  <a href="#" className="px-3 py-1 bg-gray-100 rounded-full text-sm hover:bg-gray-200 transition-colors">Coffee tables</a>
                  <a href="#" className="px-3 py-1 bg-gray-100 rounded-full text-sm hover:bg-gray-200 transition-colors">BOBB shirts</a>
                  <a href="#" className="px-3 py-1 bg-gray-100 rounded-full text-sm hover:bg-gray-200 transition-colors">Kids shoes</a>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* Cart Sidebar */}
        <div className={`fixed inset-y-0 right-0 w-full sm:w-96 bg-white shadow-xl z-50 transform transition-transform duration-300 ${isCartOpen ? 'translate-x-0' : 'translate-x-full'}`}>
          <div className="h-full flex flex-col">
            <div className="p-4 border-b border-gray-100 flex justify-between items-center">
              <h2 className="text-xl font-semibold">Your Cart ({cartItems.length})</h2>
              <button onClick={toggleCart}>
                <X size={24} />
              </button>
            </div>
            
            <div className="flex-grow overflow-y-auto p-4">
              {cartItems.length === 0 ? (
                <div className="text-center py-12">
                  <ShoppingCart size={48} className="mx-auto text-gray-300 mb-4" />
                  <p className="text-gray-500">Your cart is empty</p>
                  <button 
                    className="mt-4 px-6 py-2 bg-[#457B9D] text-white rounded-lg hover:bg-[#3D6E8C] transition-colors"
                    onClick={toggleCart}
                  >
                    Continue Shopping
                  </button>
                </div>
              ) : (
                <div className="space-y-4">
                  {cartItems.map((item, index) => (
                    <div key={index} className="flex gap-4 border-b border-gray-100 pb-4">
                      <img src={item.image} alt={item.name} className="w-20 h-20 object-cover rounded-md" />
                      <div className="flex-grow">
                        <h3 className="font-medium">{item.name}</h3>
                        <p className="text-sm text-gray-500">{item.brand}</p>
                        <div className="flex justify-between items-center mt-2">
                          <span className="font-semibold">{item.price}</span>
                          <div className="flex items-center border border-gray-200 rounded">
                            <button className="px-2 py-1 text-gray-500">-</button>
                            <span className="px-2 py-1">1</span>
                            <button className="px-2 py-1 text-gray-500">+</button>
                          </div>
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </div>
            
            {cartItems.length > 0 && (
              <div className="p-4 border-t border-gray-100">
                <div className="flex justify-between mb-4">
                  <span>Subtotal</span>
                  <span className="font-semibold">219,97 €</span>
                </div>
                <button className="w-full py-3 bg-[#E63946] text-white rounded-lg hover:bg-[#D32836] transition-colors">
                  Proceed to Checkout
                </button>
              </div>
            )}
          </div>
        </div>

        {/* Main Content */}
        <main className="pt-24">
          {/* Hero Section */}
          <section className="relative h-[80vh] overflow-hidden">
            <img 
              src="https://images.unsplash.com/photo-1555529669-e69e7aa0ba9a?ixlib=rb-4.0.3&auto=format&fit=crop&w=1600&q=80" 
              alt="Mibos lifestyle" 
              className="w-full h-full object-cover"
            />
            <div className="absolute inset-0 bg-gradient-to-r from-black/60 to-transparent flex items-center">
              <div className="container mx-auto px-4">
                <div className="max-w-lg text-white">
                  <h1 className="text-4xl md:text-5xl font-bold leading-tight mb-4">Elevate Your Lifestyle</h1>
                  <p className="text-lg mb-8">Discover premium quality at affordable prices. From fashion to home decor, find everything you need at Mibos.</p>
                  <div className="flex flex-wrap gap-4">
                    <a href="#" className="px-8 py-3 bg-[#E63946] text-white rounded-lg hover:bg-[#D32836] transition-colors">
                      Shop New Arrivals
                    </a>
                    <a href="#" className="px-8 py-3 bg-white text-gray-800 rounded-lg hover:bg-gray-100 transition-colors">
                      Explore Collections
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </section>

          {/* Category Cards */}
          <section className="py-16 bg-gray-50">
            <div className="container mx-auto px-4">
              <h2 className="text-3xl font-bold text-center mb-12">Shop by Category</h2>
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                {[
                  { name: 'Women', image: 'https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80' },
                  { name: 'Men', image: 'https://images.unsplash.com/photo-1617137968427-85924c800a22?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80' },
                  { name: 'Home', image: 'https://images.unsplash.com/photo-1616486338812-3dadae4b4ace?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80' },
                  { name: 'Kids', image: 'https://images.unsplash.com/photo-1622290291468-a28f7a7dc6a8?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80' },
                ].map((category, index) => (
                  <div key={index} className="group relative overflow-hidden rounded-lg shadow-md transition-transform duration-300 hover:-translate-y-2">
                    <img 
                      src={category.image} 
                      alt={category.name} 
                      className="w-full h-80 object-cover transition-transform duration-500 group-hover:scale-105"
                    />
                    <div className="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end p-6">
                      <div>
                        <h3 className="text-xl font-semibold text-white mb-2">{category.name}</h3>
                        <a href="#" className="inline-flex items-center text-white hover:text-[#E63946] transition-colors">
                          Shop Now <ArrowRight size={16} className="ml-1" />
                        </a>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </section>

          {/* Featured Products */}
          <section className="py-16">
            <div className="container mx-auto px-4">
              <div className="flex justify-between items-center mb-12">
                <h2 className="text-3xl font-bold">Featured Products</h2>
                <a href="#" className="text-[#457B9D] hover:text-[#E63946] transition-colors flex items-center">
                  View All <ArrowRight size={16} className="ml-1" />
                </a>
              </div>
              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
                {products.filter(p => p.featured).map((product) => (
                  <div key={product.id} className="group">
                    <div className="relative overflow-hidden rounded-lg mb-4">
                      <img 
                        src={product.image} 
                        alt={product.name} 
                        className="w-full h-80 object-cover transition-transform duration-500 group-hover:scale-105"
                      />
                      <div className="absolute inset-0 bg-black bg-opacity-20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
                        <div className="flex space-x-2">
                          <button 
                            className="p-3 bg-white rounded-full shadow-md hover:bg-[#E63946] hover:text-white transition-colors"
                            onClick={() => addToCart(product)}
                          >
                            <ShoppingCart size={18} />
                          </button>
                          <button 
                            className="p-3 bg-white rounded-full shadow-md hover:bg-[#E63946] hover:text-white transition-colors"
                            onClick={() => addToWishlist()}
                          >
                            <Heart size={18} />
                          </button>
                        </div>
                      </div>
                    </div>
                    <div>
                      <div className="flex items-center mb-1">
                        <div className="flex text-yellow-400">
                          {[...Array(5)].map((_, i) => (
                            <Star key={i} size={14} fill={i < Math.floor(product.rating) ? "currentColor" : "none"} />
                          ))}
                        </div>
                        <span className="text-xs text-gray-500 ml-1">{product.rating}</span>
                      </div>
                      <h3 className="font-medium">{product.name}</h3>
                      <p className="text-sm text-gray-500 mb-2">{product.brand}</p>
                      <p className="font-semibold">{product.price}</p>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </section>

          {/* Brand Story Banner */}
          <section className="py-16 bg-[#457B9D] text-white">
            <div className="container mx-auto px-4">
              <div className="flex flex-col lg:flex-row items-center">
                <div className="lg:w-1/2 mb-8 lg:mb-0">
                  <h2 className="text-3xl font-bold mb-4">Our Story</h2>
                  <p className="text-lg mb-6">For over 23 years, Mibos Robna Kuća has been a trusted destination for quality products at affordable prices. What started as a small family business has grown into one of the region's most beloved retailers.</p>
                  <p className="mb-8">Our commitment to excellence and customer satisfaction remains at the heart of everything we do. From our BOBB fashion line to our extensive home collection, we strive to bring you the best products at prices that make sense.</p>
                  <a href="#" className="inline-block px-8 py-3 bg-white text-[#457B9D] rounded-lg hover:bg-gray-100 transition-colors">
                    Learn More About Us
                  </a>
                </div>
                <div className="lg:w-1/2 lg:pl-12">
                  <img 
                    src="https://images.unsplash.com/photo-1472851294608-062f824d29cc?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" 
                    alt="Mibos store" 
                    className="rounded-lg shadow-lg"
                  />
                </div>
              </div>
            </div>
          </section>

          {/* Testimonials */}
          <section className="py-16">
            <div className="container mx-auto px-4">
              <h2 className="text-3xl font-bold text-center mb-12">What Our Customers Say</h2>
              <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
                {testimonials.map((testimonial) => (
                  <div key={testimonial.id} className="bg-white p-6 rounded-lg shadow-md">
                    <div className="flex items-center mb-4">
                      <img 
                        src={testimonial.image} 
                        alt={testimonial.name} 
                        className="w-12 h-12 rounded-full object-cover mr-4"
                      />
                      <div>
                        <h3 className="font-medium">{testimonial.name}</h3>
                        <div className="flex text-yellow-400">
                          {[...Array(5)].map((_, i) => (
                            <Star key={i} size={14} fill="currentColor" />
                          ))}
                        </div>
                      </div>
                    </div>
                    <p className="text-gray-600">{testimonial.text}</p>
                  </div>
                ))}
              </div>
            </div>
          </section>

          {/* Blog/News Section */}
          <section className="py-16 bg-gray-50">
            <div className="container mx-auto px-4">
              <div className="flex justify-between items-center mb-12">
                <h2 className="text-3xl font-bold">Latest Articles</h2>
                <a href="#" className="text-[#457B9D] hover:text-[#E63946] transition-colors flex items-center">
                  View All <ArrowRight size={16} className="ml-1" />
                </a>
              </div>
              <div className="grid grid-cols-1 md:grid-<ant_artifact identifier="mibos_website_component" title="Mibos E-commerce Website Component">
import React, { useState, useEffect } from 'react';
import { Search, ShoppingCart, Heart, User, Menu, X, ChevronDown, ChevronRight, MapPin, Star, ArrowRight, Instagram, Facebook, Twitter } from 'lucide-react';

export default function MibosWebsite() {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const [isSearchOpen, setIsSearchOpen] = useState(false);
  const [isCartOpen, setIsCartOpen] = useState(false);
  const [activeCategory, setActiveCategory] = useState(null);
  const [scrolled, setScrolled] = useState(false);
  const [cartItems, setCartItems] = useState([]);
  const [wishlistCount, setWishlistCount] = useState(0);

  // Handle scroll effect for sticky header
  useEffect(() => {
    const handleScroll = () => {
      setScrolled(window.scrollY > 80);
    };
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  // Sample product data
  const featuredProducts = [
    { id: 1, name: 'Premium Wool Coat', brand: 'BOBB', price: '129,99 €', image: 'https://images.unsplash.com/photo-1591047139829-d91aecb6caea?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80', rating: 4.8 },
    { id: 2, name: 'Casual Linen Shirt', brand: 'BOBB', price: '49,99 €', image: 'https://images.unsplash.com/photo-1596755094514-f87e34085b2c?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80', rating: 4.6 },
    { id: 3, name: 'Modern Coffee Table', brand: 'Mibos Home', price: '199,99 €', image: 'https://images.unsplash.com/photo-1634712282287-14ed57b9cc89?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80', rating: 4.9 },
    { id: 4, name: 'Kids Denim Jacket', brand: 'BOBB KIDS', price: '39,99 €', image: 'https://images.unsplash.com/photo-1519238263530-99bdd11df2ea?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80', rating: 4.7 },
  ];

  // Sample categories
  const categories = [
    { id: 'fashion', name: 'Fashion', subcategories: ['Women', 'Men', 'Kids', 'Accessories'] },
    { id: 'home', name: 'Home', subcategories: ['Furniture', 'Decor', 'Kitchen', 'Textiles'] },
    { id: 'beauty', name: 'Beauty', subcategories: ['Skincare', 'Makeup', 'Fragrance', 'Bath & Body'] },
    { id: 'electronics', name: 'Electronics', subcategories: ['Smartphones', 'Computers', 'Audio', 'Accessories'] },
  ];

  // Sample testimonials
  const testimonials = [
    { id: 1, name: 'Ana Kovačić', image: 'https://randomuser.me/api/portraits/women/44.jpg', text: 'Mibos has been my go-to store for years. The quality of their products is consistently excellent, and the prices are always reasonable.' },
    { id: 2, name: 'Marko Horvat', image: 'https://randomuser.me/api/portraits/men/32.jpg', text: 'I recently furnished my entire apartment with items from Mibos Home collection. The quality is outstanding, and the designs are modern yet timeless.' },
    { id: 3, name: 'Ivana Novak', image: 'https://randomuser.me/api/portraits/women/68.jpg', text: 'BOBB KIDS clothing has been perfect for my children. Durable, stylish, and affordable - everything a parent could ask for!' },
  ];

  // Sample blog posts
  const blogPosts = [
    { id: 1, title: 'Summer Fashion Trends 2023', image: 'https://images.unsplash.com/photo-1469334031218-e382a71b716b?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80', date: 'June 15, 2023' },
    { id: 2, title: 'Home Decor Ideas for Small Spaces', image: 'https://images.unsplash.com/photo-1616486338812-3dadae4b4ace?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80', date: 'May 28, 2023' },
    { id: 3, title: 'Back to School Essentials', image: 'https://images.unsplash.com/photo-1503676260728-1c00da094a0b?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80', date: 'July 2, 2023' },
  ];

  // Sample store locations
  const storeLocations = [
    { id: 1, name: 'Mibos City Center', address: 'Trg bana Josipa Jelačića 10, Zagreb', hours: 'Mon-Sat: 9:00-21:00, Sun: 10:00-18:00' },
    { id: 2, name: 'Mibos Mall of Split', address: 'Vukovarska 207, Split', hours: 'Mon-Sun: 9:00-22:00' },
    { id: 3, name: 'Mibos Rijeka', address: 'Riva 15, Rijeka', hours: 'Mon-Sat: 9:00-20:00, Sun: 10:00-18:00' },
  ];

  const toggleMenu = () => setIsMenuOpen(!isMenuOpen);
  const toggleSearch = () => setIsSearchOpen(!isSearchOpen);
  const toggleCart = () => setIsCartOpen(!isCartOpen);

  const addToCart = (product) => {
    setCartItems([...cartItems, product]);
    // Show a brief notification
    const notification = document.getElementById('notification');
    notification.classList.remove('opacity-0');
    notification.classList.add('opacity-100');
    setTimeout(() => {
      notification.classList.remove('opacity-100');
      notification.classList.add('opacity-0');
    }, 2000);
  };

  const addToWishlist = () => {
    setWishlistCount(wishlistCount + 1);
    // Show a brief notification
    const notification = document.getElementById('wishlist-notification');
    notification.classList.remove('opacity-0');
    notification.classList.add('opacity-100');
    setTimeout(() => {
      notification.classList.remove('opacity-100');
      notification.classList.add('opacity-0');
    }, 2000);
  };

  return (
    <div className="font-sans bg-white text-gray-800">
      {/* Notification */}
      <div id="notification" className="fixed top-24 right-4 bg-green-50 border border-green-200 text-green-800 px-4 py-3 rounded shadow-lg transition-opacity duration-300 opacity-0 z-50">
        Product added to cart!
      </div>
      
      <div id="wishlist-notification" className="fixed top-24 right-4 bg-red-50 border border-red-200 text-red-800 px-4 py-3 rounded shadow-lg transition-opacity duration-300 opacity-0 z-50">
        Product added to wishlist!
      </div>

      {/* Header */}
      <header className={`w-full transition-all duration-300 ${scrolled ? 'py-2 shadow-md bg-white' : 'py-4 bg-white'} fixed top-0 left-0 right-0 z-40`}>
        <div className="container mx-auto px-4">
          <div className="flex items-center justify-between">
            {/* Mobile menu button */}
            <button className="lg:hidden p-2" onClick={toggleMenu}>
              {isMenuOpen ? <X size={24} /> : <Menu size={24} />}
            </button>
            
            {/* Logo */}
            <div className="flex-shrink-0">
              <a href="#" className="text-2xl font-bold tracking-tighter">
                <span className="text-[#E63946]">M</span><span className="text-[#457B9D]">ibos</span>
              </a>
            </div>
            
            {/* Desktop Navigation */}
            <nav className="hidden lg:flex space-x-8">
              {categories.map((category) => (
                <div key={category.id} className="relative group" 
                     onMouseEnter={() => setActiveCategory(category.id)}
                     onMouseLeave={() => setActiveCategory(null)}>
                  <button className="flex items-center space-x-1 py-2 font-medium hover:text-[#E63946] transition-colors">
                    <span>{category.name}</span>
                    <ChevronDown size={16} />
                  </button>
                  
                  {/* Mega Menu */}
                  <div className={`absolute top-full left-0 w-[600px] bg-white shadow-lg rounded-b-lg p-6 grid grid-cols-2 gap-6 transition-all duration-200 ${activeCategory === category.id ? 'opacity-100 visible' : 'opacity-0 invisible'}`}>
                    <div>
                      <h3 className="text-lg font-semibold mb-4">{category.name} Categories</h3>
                      <ul className="space-y-2">
                        {category.subcategories.map((subcat, idx) => (
                          <li key={idx}>
                            <a href="#" className="flex items-center hover:text-[#E63946] transition-colors">
                              <ChevronRight size={16} className="mr-2" />
                              <span>{subcat}</span>
                            </a>
                          </li>
                        ))}
                      </ul>
                    </div>
                    <div>
                      <h3 className="text-lg font-semibold mb-4">Featured</h3>
                      <div className="bg-gray-50 rounded-lg p-4">
                        <img 
                          src={`https://images.unsplash.com/photo-${category.id === 'fashion' ? '1551488831-00ddcb6c6bd3' : 
                                category.id === 'home' ? '1616486338812-3dadae4b4ace' : 
                                category.id === 'beauty' ? '1596462118800-11a29fd31b50' : 
                                '1593642632823-8f785ba67e45'}?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80`} 
                          alt={`${category.name} featured`}
                          className="w-full h-32 object-cover rounded-md mb-3"
                        />
                        <h4 className="font-medium">New Arrivals</h4>
                        <p className="text-sm text-gray-600 mt-1">Discover the latest in {category.name.toLowerCase()}</p>
                        <a href="#" className="text-[#457B9D] text-sm font-medium flex items-center mt-2 hover:text-[#E63946] transition-colors">
                          Shop Now <ArrowRight size={14} className="ml-1" />
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
              ))}
              <a href="#" className="py-2 font-medium hover:text-[#E63946] transition-colors">Sale</a>
              <a href="#" className="py-2 font-medium hover:text-[#E63946] transition-colors">About Us</a>
            </nav>
            
            {/* Header Icons */}
            <div className="flex items-center space-x-4">
              <button className="p-2 hover:text-[#E63946] transition-colors" onClick={toggleSearch}>
                <Search size={20} />
              </button>
              <button className="p-2 hover:text-[#E63946] transition-colors relative" onClick={() => addToWishlist()}>
                <Heart size={20} />
                {wishlistCount > 0 && (
                  <span className="absolute -top-1 -right-1 bg-[#E63946] text-white text-xs rounded-full w-4 h-4 flex items-center justify-center">
                    {wishlistCount}
                  </span>
                )}
              </button>
              <button className="p-2 hover:text-[#E63946] transition-colors relative" onClick={toggleCart}>
                <ShoppingCart size={20} />
                {cartItems.length > 0 && (
                  <span className="absolute -top-1 -right-1 bg-[#E63946] text-white text-xs rounded-full w-4 h-4 flex items-center justify-center">
                    {cartItems.length}
                  </span>
                )}
              </button>
              <a href="#" className="p-2 hover:text-[#E63946] transition-colors">
                <User size={20} />
              </a>
            </div>
          </div>
        </div>
      </header>

      {/* Mobile Menu */}
      <div className={`fixed inset-0 bg-white z-30 transform transition-transform duration-300 lg:hidden ${isMenuOpen ? 'translate-x-0' : '-translate-x-full'}`}>
        <div className="container mx-auto px-4 py-20">
          <div className="space-y-6">
            {categories.map((category) => (
              <div key={category.id} className="border-b border-gray-100 pb-4">
                <button className="flex items-center justify-between w-full py-2 font-medium" 
                        onClick={() => setActiveCategory(activeCategory === category.id ? null : category.id)}>
                  <span>{category.name}</span>
                  <ChevronDown size={16} className={`transition-transform duration-200 ${activeCategory === category.id ? 'rotate-180' : ''}`} />
                </button>
                
                {activeCategory === category.id && (
                  <div className="mt-2 ml-4 space-y-2">
                    {category.subcategories.map((subcat, idx) => (
                      <a key={idx} href="#" className="block py-1 hover:text-[#E63946] transition-colors">
                        {subcat}
                      </a>
                    ))}
                  </div>
                )}
              </div>
            ))}
            <a href="#" className="block py-2 font-medium hover:text-[#E63946] transition-colors">Sale</a>
            <a href="#" className="block py-2 font-medium hover:text-[#E63946] transition-colors">About Us</a>
          </div>
        </div>
      </div>

      {/* Search Overlay */}
      <div className={`fixed inset-0 bg-black bg-opacity-50 z-50 transition-opacity duration-300 ${isSearchOpen ? 'opacity-100 visible' : 'opacity-0 invisible'}`}>
        <div className="container mx-auto px-4 pt-32">
          <div className="bg-white rounded-lg p-6 max-w-2xl mx-auto">
            <div className="flex justify-between items-center mb-4">
              <h2 className="text-xl font-semibold">Search Products</h2>
              <button onClick={toggleSearch}>
                <X size={24} />
              </button>
            </div>
            <div className="relative">
              <input 
                type="text" 
                placeholder="What are you looking for?" 
                className="w-full border border-gray-300 rounded-lg py-3 px-4 focus:outline-none focus:ring-2 focus:ring-[#457B9D]"
                autoFocus
              />
              <button className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-[#E63946]">
                <Search size={20} />
              </button>
            </div>
            <div className="mt-4">
              <h3 className="font-medium mb-2">Popular Searches</h3>
              <div className="flex flex-wrap gap-2">
                <a href="#" className="px-3 py-1 bg-gray-100 rounded-full text-sm hover:bg-gray-200 transition-colors">Summer dresses</a>
                <a href="#" className="px-3 py-1 bg-gray-100 rounded-full text-sm hover:bg-gray-200 transition-colors">Coffee tables</a>
                <a href="#" className="px-3 py-1 bg-gray-100 rounded-full text-sm hover:bg-gray-200 transition-colors">BOBB shirts</a>
                <a href="#" className="px-3 py-1 bg-gray-100 rounded-full text-sm hover:bg-gray-200 transition-colors">Kids shoes</a>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Cart Sidebar */}
      <div className={`fixed inset-y-0 right-0 w-full sm:w-96 bg-white shadow-xl z-50 transform transition-transform duration-300 ${isCartOpen ? 'translate-x-0' : 'translate-x-full'}`}>
        <div className="h-full flex flex-col">
          <div className="p-4 border-b border-gray-100 flex justify-between items-center">
            <h2 className="text-xl font-semibold">Your Cart ({cartItems.length})</h2>
            <button onClick={toggleCart}>
              <X size={24} />
            </button>
          </div>
          
          <div className="flex-grow overflow-y-auto p-4">
            {cartItems.length === 0 ? (
              <div className="text-center py-12">
                <ShoppingCart size={48} className="mx-auto text-gray-300 mb-4" />
                <p className="text-gray-500">Your cart is empty</p>
                <button 
                  className="mt-4 px-6 py-2 bg-[#457B9D] text-white rounded-lg hover:bg-[#3D6E8C] transition-colors"
                  onClick={toggleCart}
                >
                  Continue Shopping
                </button>
              </div>
            ) : (
              <div className="space-y-4">
                {cartItems.map((item, index) => (
                  <div key={index} className="flex gap-4 border-b border-gray-100 pb-4">
                    <img src={item.image} alt={item.name} className="w-20 h-20 object-cover rounded-md" />
                    <div className="flex-grow">
                      <h3 className="font-medium">{item.name}</h3>
                      <p className="text-sm text-gray-500">{item.brand}</p>
                      <div className="flex justify-between items-center mt-2">
                        <span className="font-semibold">{item.price}</span>
                        <div className="flex items-center border border-gray-200 rounded">
                          <button className="px-2 py-1 text-gray-500">-</button>
                          <span className="px-2 py-1">1</span>
                          <button className="px-2 py-1 text-gray-500">+</button>
                        </div>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            )}
          </div>
          
          {cartItems.length > 0 && (
            <div className="p-4 border-t border-gray-100">
              <div className="flex justify-between mb-4">
                <span>Subtotal</span>
                <span className="font-semibold">219,97 €</span>
              </div>
              <button className="w-full py-3 bg-[#E63946] text-white rounded-lg hover:bg-[#D32836] transition-colors">
                Proceed to Checkout
              </button>
            </div>
          )}
        </div>
      </div>

      {/* Main Content */}
      <main className="pt-24">
        {/* Hero Section */}
        <section className="relative h-[80vh] overflow-hidden">
          <img 
            src="https://images.unsplash.com/photo-1555529669-e69e7aa0ba9a?ixlib=rb-4.0.3&auto=format&fit=crop&w=1600&q=80" 
            alt="Mibos lifestyle" 
            className="w-full h-full object-cover"
          />
          <div className="absolute inset-0 bg-gradient-to-r from-black/60 to-transparent flex items-center">
            <div className="container mx-auto px-4">
              <div className="max-w-lg text-white">
                <h1 className="text-4xl md:text-5xl font-bold leading-tight mb-4">Elevate Your Lifestyle</h1>
                <p className="text-lg mb-8">Discover premium quality at affordable prices. From fashion to home decor, find everything you need at Mibos.</p>
                <div className="flex flex-wrap gap-4">
                  <a href="#" className="px-8 py-3 bg-[#E63946] text-white rounded-lg hover:bg-[#D32836] transition-colors">
                    Shop New Arrivals
                  </a>
                  <a href="#" className="px-8 py-3 bg-white text-gray-800 rounded-lg hover:bg-gray-100 transition-colors">
                    Explore Collections
                  </a>
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* Category Cards */}
        <section className="py-16 bg-gray-50">
          <div className="container mx-auto px-4">
            <h2 className="text-3xl font-bold text-center mb-12">Shop by Category</h2>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
              {[
                { name: 'Women', image: 'https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80' },
                { name: 'Men', image: 'https://images.unsplash.com/photo-1617137968427-85924c800a22?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80' },
                { name: 'Home', image: 'https://images.unsplash.com/photo-1616486338812-3dadae4b4ace?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80' },
                { name: 'Kids', image: 'https://images.unsplash.com/photo-1622290291468-a28f7a7dc6a8?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80' },
              ].map((category, index) => (
                <div key={index} className="group relative overflow-hidden rounded-lg shadow-md transition-transform duration-300 hover:-translate-y-2">
                  <img 
                    src={category.image} 
                    alt={category.name} 
                    className="w-full h-80 object-cover transition-transform duration-500 group-hover:scale-105"
                  />
                  <div className="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end p-6">
                    <div>
                      <h3 className="text-xl font-semibold text-white mb-2">{category.name}</h3>
                      <a href="#" className="inline-flex items-center text-white hover:text-[#E63946] transition-colors">
                        Shop Now <ArrowRight size={16} className="ml-1" />
                      </a>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* Featured Products */}
        <section className="py-16">
          <div className="container mx-auto px-4">
            <div className="flex justify-between items-center mb-12">
              <h2 className="text-3xl font-bold">Featured Products</h2>
              <a href="#" className="text-[#457B9D] hover:text-[#E63946] transition-colors flex items-center">
                View All <ArrowRight size={16} className="ml-1" />
              </a>
            </div>
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
              {featuredProducts.map((product) => (
                <div key={product.id} className="group">
                  <div className="relative overflow-hidden rounded-lg mb-4">
                    <img 
                      src={product.image} 
                      alt={product.name} 
                      className="w-full h-80 object-cover transition-transform duration-500 group-hover:scale-105"
                    />
                    <div className="absolute inset-0 bg-black bg-opacity-20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
                      <div className="flex space-x-2">
                        <button 
                          className="p-3 bg-white rounded-full shadow-md hover:bg-[#E63946] hover:text-white transition-colors"
                          onClick={() => addToCart(product)}
                        >
                          <ShoppingCart size={18} />
                        </button>
                        <button 
                          className="p-3 bg-white rounded-full shadow-md hover:bg-[#E63946] hover:text-white transition-colors"
                          onClick={() => addToWishlist()}
                        >
                          <Heart size={18} />
                        </button>
                      </div>
                    </div>
                  </div>
                  <div>
                    <div className="flex items-center mb-1">
                      <div className="flex text-yellow-400">
                        {[...Array(5)].map((_, i) => (
                          <Star key={i} size={14} fill={i < Math.floor(product.rating) ? "currentColor" : "none"} />
                        ))}
                      </div>
                      <span className="text-xs text-gray-500 ml-1">{product.rating}</span>
                    </div>
                    <h3 className="font-medium">{product.name}</h3>
                    <p className="text-sm text-gray-500 mb-2">{product.brand}</p>
                    <p className="font-semibold">{product.price}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* Brand Story Banner */}
        <section className="py-16 bg-[#457B9D] text-white">
          <div className="container mx-auto px-4">
            <div className="flex flex-col lg:flex-row items-center">
              <div className="lg:w-1/2 mb-8 lg:mb-0">
                <h2 className="text-3xl font-bold mb-4">Our Story</h2>
                <p className="text-lg mb-6">For over 23 years, Mibos Robna Kuća has been a trusted destination for quality products at affordable prices. What started as a small family business has grown into one of the region's most beloved retailers.</p>
                <p className="mb-8">Our commitment to excellence and customer satisfaction remains at the heart of everything we do. From our BOBB fashion line to our extensive home collection, we strive to bring you the best products at prices that make sense.</p>
                <a href="#" className="inline-block px-8 py-3 bg-white text-[#457B9D] rounded-lg hover:bg-gray-100 transition-colors">
                  Learn More About Us
                </a>
              </div>
              <div className="lg:w-1/2 lg:pl-12">
                <img 
                  src="https://images.unsplash.com/photo-1472851294608-062f824d29cc?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" 
                  alt="Mibos store" 
                  className="rounded-lg shadow-lg"
                />
              </div>
            </div>
          </div>
        </section>

        {/* Testimonials */}
        <section className="py-16">
          <div className="container mx-auto px-4">
            <h2 className="text-3xl font-bold text-center mb-12">What Our Customers Say</h2>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
              {testimonials.map((testimonial) => (
                <div key={testimonial.id} className="bg-white p-6 rounded-lg shadow-md">
                  <div className="flex items-center mb-4">
                    <img 
                      src={testimonial.image} 
                      alt={testimonial.name} 
                      className="w-12 h-12 rounded-full object-cover mr-4"
                    />
                    <div>
                      <h3 className="font-medium">{testimonial.name}</h3>
                      <div className="flex text-yellow-400">
                        {[...Array(5)].map((_, i) => (
                          <Star key={i} size={14} fill="currentColor" />
                        ))}
                      </div>
                    </div>
                  </div>
                  <p className="text-gray-600">{testimonial.text}</p>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* Blog/News Section */}
        <section className="py-16 bg-gray-50">
          <div className="container mx-auto px-4">
            <div className="flex justify-between items-center mb-12">
              <h2 className="text-3xl font-bold">Latest Articles</h2>
              <a href="#" className="text-[#457B9D] hover:text-[#E63946] transition-colors flex items-center">
                View All <ArrowRight size={16} className="ml-1" />
              </a>
            </div>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
              {blogPosts.map((post) => (
                <article key={post.id} className="bg-white rounded-lg overflow-hidden shadow-md">
                  <img 
                    src={post.image} 
                    alt={post.title} 
                    className="w-full h-48 object-cover"
                  />
                  <div className="p-6">
                    <p className="text-sm text-gray-500 mb-2">{post.date}</p>
                    <h3 className="text-xl font-semibold mb-3">{post.title}</h3>
                    <a href="#" className="text-[#457B9D] hover:text-[#E63946] transition-colors flex items-center">
                      Read More <ArrowRight size={16} className="ml-1" />
                    </a>
                  </div>
                </article>
              ))}
            </div>
          </div>
        </section>

        {/* Store Locator */}
        <section className="py-16">
          <div className="container mx-auto px-4">
            <h2 className="text-3xl font-bold text-center mb-12">Find a Store Near You</h2>
            <div className="flex flex-col lg:flex-row gap-8">
              <div className="lg:w-1/2">
                <div className="bg-gray-200 rounded-lg h-full min-h-[400px] flex items-center justify-center">
                  <div className="text-center">
                    <MapPin size={48} className="mx-auto text-gray-400 mb-4" />
                    <p className="text-gray-500">Interactive map would be displayed here</p>
                  </div>
                </div>
              </div>
              <div className="lg:w-1/2">
                <div className="space-y-6">
                  {storeLocations.map((location) => (
                    <div key={location.id} className="bg-white p-6 rounded-lg shadow-md">
                      <h3 className="text-xl font-semibold mb-2">{location.name}</h3>
                      <p className="flex items-start mb-2">
                        <MapPin size={18} className="mr-2 mt-1 flex-shrink-0 text-[#E63946]" />
                        <span>{location.address}</span>
                      </p>
                      <p className="text-sm text-gray-600 ml-6">{location.hours}</p>
                      <div className="mt-4 ml-6">
                        <a href="#" className="text-[#457B9D] hover:text-[#E63946] transition-colors">
                          Get Directions
                        </a>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* Newsletter */}
        <section className="py-16 bg-gray-900 text-white">
          <div className="container mx-auto px-4 text-center">
            <h2 className="text-3xl font-bold mb-4">Stay Updated</h2>
            <p className="text-lg text-gray-300 mb-8 max-w-2xl mx-auto">Subscribe to our newsletter and be the first to know about new arrivals, exclusive offers, and seasonal sales.</p>
            <form className="max-w-md mx-auto flex">
              <input 
                type="email" 
                placeholder="Your email address" 
                className="flex-grow px-4 py-3 rounded-l-lg text-gray-800 focus:outline-none"
              />
              <button className="px-6 py-3 bg-[#E63946] rounded-r-lg hover:bg-[#D32836] transition-colors">
                Subscribe
              </button>
            </form>
          </div>
        </section>
      </main>

      {/* Footer */}
      <footer className="bg-gray-800 text-white pt-16 pb-8">
        <div className="container mx-auto px-4">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12">
            <div>
              <h3 className="text-xl font-bold mb-4">Mibos</h3>
              <p className="text-gray-400 mb-6">Excellent quality, affordable prices. Your trusted retailer for over 23 years.</p>
              <div className="flex space-x-4">
                <a href="#" className="text-gray-400 hover:text-white transition-colors">
                  <Facebook size={20} />
                </a>
                <a href="#" className="text-gray-400 hover:text-white transition-colors">
                  <Instagram size={20} />
                </a>
                <a href="#" className="text-gray-400 hover:text-white transition-colors">
                  <Twitter size={20} />
                </a>
              </div>
            </div>
            
            <div>
              <h3 className="text-lg font-semibold mb-4">Shop</h3>
              <ul className="space-y-2">
                <li><a href="#" className="text-gray-400 hover:text-white transition-colors">Women</a></li>
                <li><a href="#" className="text-gray-400 hover:text-white transition-colors">Men</a></li>
                <li><a href="#" className="text-gray-400 hover:text-white transition-colors">Kids</a></li>
                <li><a href="#" className="text-gray-400 hover:text-white transition-colors">Home</a></li>
                <li><a href="#" className="text-gray-400 hover:text-white transition-colors">Beauty</a></li>
                <li><a href="#" className="text-gray-400 hover:text-white transition-colors">Sale</a></li>
              </ul>
            </div>
            
            <div>
              <h3 className="text-lg font-semibold mb-4">About</h3>
              <ul className="space-y-2">
                <li><a href="#" className="text-gray-400 hover:text-white transition-colors">Our Story</a></li>
                <li><a href="#" className="text-gray-400 hover:text-white transition-colors">Careers</a></li>
                <li><a href="#" className="text-gray-400 hover:text-white transition-colors">Corporate Responsibility</a></li>
                <li><a href="#" className="text-gray-400 hover:text-white transition-colors">Store Locations</a></li>
              </ul>
            </div>
            
            <div>
              <h3 className="text-lg font-semibold mb-4">Customer Service</h3>
              <ul className="space-y-2">
                <li><a href="#" className="text-gray-400 hover:text-white transition-colors">Contact Us</a></li>
                <li><a href="#" className="text-gray-400 hover:text-white transition-colors">FAQs</a></li>
                <li><a href="#" className="text-gray-400 hover:text-white transition-colors">Shipping & Returns</a></li>
                <li><a href="#" className="text-gray-400 hover:text-white transition-colors">Size Guide</a></li>
                <li><a href="#" className="text-gray-400 hover:text-white transition-colors">Privacy Policy</a></li>
                <li><a href="#" className="text-gray-400 hover:text-white transition-colors">Terms & Conditions</a></li>
              </ul>
            </div>
          </div>
          
          <div className="border-t border-gray-700 pt-8">
            <div className="flex flex-col md:flex-row justify-between items-center">
              <p className="text-gray-400 mb-4 md:mb-0">© 2023 Mibos Robna Kuća. All rights reserved.</p>
              <div className="flex space-x-4">
                <a href="#" className="text-gray-400 hover:text-white transition-colors">Privacy Policy</a>
                <a href="#" className="text-gray-400 hover:text-white transition-colors">Terms of Service</a>
                <a href="#" className="text-gray-400 hover:text-white transition-colors">Cookie Policy</a>
              </div>
            </div>
          </div>
        </div>
      </footer>
    </div>
  );
}