function Sidebar({ currentView, onChangeView, user, onLogout }) {
  const menuItems = [
    { id: 'dashboard', icon: 'icon-layout-dashboard', label: 'Dashboard', roles: ['admin'] },
    { id: 'pos', icon: 'icon-shopping-cart', label: 'POS Terminal', roles: ['admin', 'cashier'] },
    { id: 'returns', icon: 'icon-rotate-ccw', label: 'Returns & Exchange', roles: ['admin', 'cashier'] },
    { id: 'promotions', icon: 'icon-percent', label: 'Promotions', roles: ['admin'] },
    { id: 'label-print', icon: 'icon-printer', label: 'Label Print Center', roles: ['admin'] },
    { id: 'products', icon: 'icon-tag', label: 'Products', roles: ['admin'] },
    { id: 'inventory', icon: 'icon-package', label: 'Inventory', roles: ['admin'] },
    { id: 'suppliers', icon: 'icon-truck', label: 'Suppliers', roles: ['admin'] },
    { id: 'expenses', icon: 'icon-receipt-text', label: 'Expenses', roles: ['admin'] },
    { id: 'customers', icon: 'icon-users', label: 'Customers', roles: ['admin', 'cashier'] },
    { id: 'reports', icon: 'icon-chart-bar', label: 'Reports', roles: ['admin'] },
    { id: 'settings', icon: 'icon-settings', label: 'Settings', roles: ['admin'] },
  ];

  const filteredMenu = menuItems.filter(item => item.roles.includes(user.role));

  // Get initials
  const initials = user.name.split(' ').map(n => n[0]).join('').substring(0, 2).toUpperCase();

  return (
    <aside className="fixed top-0 left-0 h-full bg-[#1e293b] text-slate-300 w-[var(--sidebar-width)] flex flex-col z-30 transition-all">
      <div className="h-[var(--header-height)] flex items-center px-6 border-b border-slate-700 bg-[#0f172a]">
        <div className="flex items-center gap-3">
          <img src="components/Logo.png" alt="Logo" className="w-10 h-10 object-contain" />
          <div>
            <span className="text-white font-bold text-xl tracking-tight block leading-none">NOAHVELLE</span>
            <span className="text-[10px] uppercase text-slate-400 tracking-wider">Retail POS</span>
          </div>
        </div>
      </div>

      <div className="flex-1 overflow-y-auto py-6 no-scrollbar">
        <nav className="space-y-1">
          {filteredMenu.map(item => (
            <button
              key={item.id}
              onClick={() => onChangeView(item.id)}
              className={`w-full sidebar-link mb-1 ${currentView === item.id ? 'active' : ''}`}
            >
              <span className={`${item.icon} mr-3 text-xl`}></span>
              <span className="font-medium">{item.label}</span>
            </button>
          ))}
        </nav>
      </div>

      <div className="p-4 border-t border-slate-700 bg-[#0f172a]">
        <div className="bg-slate-800 rounded-lg p-3 flex items-center gap-3 border border-slate-700 mb-3">
          <div className="w-10 h-10 rounded-full bg-slate-600 flex items-center justify-center text-white font-bold tracking-widest border border-slate-500">
            {initials}
          </div>
          <div className="flex-1 min-w-0">
            <p className="text-sm font-medium text-white truncate">{user.name}</p>
            <p className="text-xs text-emerald-400 capitalize flex items-center gap-1">
              <span className="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>
              {user.role}
            </p>
          </div>
        </div>
        <button
          onClick={onLogout}
          className="w-full flex items-center justify-center gap-2 py-2 rounded-lg bg-slate-800 hover:bg-slate-700 text-slate-400 hover:text-white transition-colors text-sm font-medium border border-slate-700"
        >
          <span className="icon-log-out"></span> Sign Out
        </button>
      </div>
    </aside>
  );
}

function Header({ user }) {
  return (
    <header className="fixed top-0 right-0 left-[var(--sidebar-width)] h-[var(--header-height)] bg-white border-b border-gray-200 z-20 px-8 flex items-center justify-between shadow-sm">
      <div className="flex items-center gap-4">
        <h2 className="text-lg font-semibold text-gray-700 flex items-center gap-2">
          <span className="icon-calendar text-gray-400"></span>
          {new Date().toLocaleDateString('en-GB', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })}
        </h2>
      </div>

      <div className="flex items-center gap-4">
        <div className="flex items-center gap-2 bg-slate-50 rounded-full p-1 pr-4 border border-slate-100">
          <div className="px-3 py-1 rounded-full bg-white shadow-sm text-xs font-bold text-gray-500 uppercase tracking-wider">Session</div>
          <span className="text-sm font-medium text-gray-700">Active</span>
        </div>

        <button className="relative w-10 h-10 rounded-full bg-white border border-gray-200 hover:bg-gray-50 flex items-center justify-center text-gray-600 transition-colors shadow-sm">
          <span className="icon-bell text-xl"></span>
          <span className="absolute top-2 right-2 w-2.5 h-2.5 bg-red-500 rounded-full border-2 border-white"></span>
        </button>
      </div>
    </header>
  );
}

function Layout({ children, currentView, onChangeView, user, onLogout }) {
  return (
    <div className="min-h-screen bg-[var(--bg-body)]">
      <Sidebar currentView={currentView} onChangeView={onChangeView} user={user} onLogout={onLogout} />
      <Header user={user} />

      <main className="pl-[var(--sidebar-width)] pt-[var(--header-height)] min-h-screen transition-all">
        <div className="p-8 max-w-[1600px] mx-auto">
          {children}
        </div>
      </main>
    </div>
  );
}