window.Header = ({ onMenu, loading, activeEmail, isDark, toggleTheme, user, onProfile }) => {
    return (
        <header className={`h-16 px-4 md:px-8 flex items-center justify-between sticky top-0 z-40 border-b transition-all duration-500
            ${isDark 
                ? 'bg-[#050505]/40 backdrop-blur-xl border-white/5 shadow-[0_4px_30px_rgba(0,0,0,0.1)]' 
                : 'bg-white/60 backdrop-blur-xl border-white/40 shadow-sm'}
        `}>
            
            {/* Left Section: Mobile Menu & Logo */}
            <div className="flex items-center gap-4">
                <button 
                    onClick={onMenu}
                    className={`md:hidden w-10 h-10 rounded-xl border flex items-center justify-center active:scale-95 transition-transform
                        ${isDark ? 'bg-white/5 border-white/10 text-white hover:bg-white/10' : 'bg-slate-100 border-slate-200 text-slate-600 hover:bg-slate-200'}
                    `}
                >
                    <i className="fa-solid fa-bars text-lg"></i>
                </button>

                {/* 🔥 MOBILE LOGO (JPG FORMAT + Fallback) */}
                <div className="md:hidden flex items-center">
                    <img 
                        src={isDark ? "/logo-dark.jpg" : "/logo-light.jpg"} 
                        alt="Infinity Mail" 
                        className="h-8 w-auto object-contain"
                        onError={(e) => {
                            // যদি ইমেজ না পায়, তখন টেক্সট দেখাবে
                            e.target.style.display = 'none';
                            e.target.nextSibling.style.display = 'flex';
                        }}
                    />
                    
                    {/* Fallback Text */}
                    <div className="hidden items-center gap-2" style={{display: 'none'}}> 
                        <div className="w-8 h-8 rounded-lg bg-gradient-to-tr from-blue-600 to-purple-600 flex items-center justify-center shadow-lg">
                            <i className="fa-solid fa-infinity text-white text-xs"></i>
                        </div>
                        <span className={`text-lg font-bold brand-font tracking-tight ${isDark ? 'text-white' : 'text-slate-800'}`}>Infinity</span>
                    </div>
                </div>

                {/* Desktop Status Text */}
                <div className="hidden md:flex items-center gap-2 text-gray-500">
                    <i className={`fa-solid fa-circle-nodes ${loading ? 'animate-spin' : ''}`}></i>
                    <span className="text-xs font-mono uppercase tracking-widest opacity-70">
                        {loading ? 'Establishing Link...' : 'Encrypted Connection Active'}
                    </span>
                </div>
            </div>

            {/* Right Section: Actions & Profile */}
            <div className="flex items-center gap-3 md:gap-4">
                
                {/* 1. Status Badge */}
                <div className={`hidden sm:flex items-center gap-2 px-3 py-1.5 rounded-full border shadow-inner backdrop-blur-md
                    ${isDark ? 'bg-black/40 border-white/5' : 'bg-slate-100/50 border-white/50'}
                `}>
                    <div className="relative flex h-2 w-2">
                      <span className={`animate-ping absolute inline-flex h-full w-full rounded-full opacity-75 ${loading ? 'bg-yellow-400' : 'bg-green-400'}`}></span>
                      <span className={`relative inline-flex rounded-full h-2 w-2 ${loading ? 'bg-yellow-500' : 'bg-green-500'}`}></span>
                    </div>
                    <span className={`text-[10px] font-bold uppercase tracking-wider ${loading ? 'text-yellow-500' : 'text-green-500'}`}>
                        {loading ? 'SYNCING' : 'ONLINE'}
                    </span>
                </div>

                {/* 2. Theme Toggle */}
                <button 
                    onClick={toggleTheme}
                    className={`w-9 h-9 rounded-full flex items-center justify-center transition-all duration-300 border
                        ${isDark 
                            ? 'bg-yellow-400/10 text-yellow-400 border-yellow-400/20 hover:bg-yellow-400/20' 
                            : 'bg-indigo-600/10 text-indigo-600 border-indigo-600/20 hover:bg-indigo-600/20'}
                    `}
                >
                    {isDark ? <i className="fa-solid fa-sun"></i> : <i className="fa-solid fa-moon"></i>}
                </button>

                {/* 3. 🔥 NEW: Profile Button (Triggers Modal) */}
                <button 
                    onClick={onProfile}
                    className={`relative w-9 h-9 rounded-full border-2 p-0.5 transition-transform active:scale-95 group
                        ${isDark ? 'border-white/10 hover:border-blue-500' : 'border-slate-200 hover:border-blue-500'}
                    `}
                    title="Edit Profile"
                >
                    {user?.isAnonymous ? (
                        <div className={`w-full h-full rounded-full flex items-center justify-center ${isDark ? 'bg-[#111] text-yellow-500' : 'bg-slate-100 text-slate-600'}`}>
                            <i className="fa-solid fa-user-secret"></i>
                        </div>
                    ) : (
                        <img 
                            src={user?.photoURL || "https://ui-avatars.com/api/?name=" + (user?.displayName || 'User')} 
                            className="w-full h-full rounded-full object-cover" 
                            alt="Profile"
                            onError={(e) => e.target.src = "https://ui-avatars.com/api/?name=User"}
                        />
                    )}
                    
                    {/* Settings Icon Overlay (Hover) */}
                    <div className="absolute inset-0 bg-black/50 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
                        <i className="fa-solid fa-gear text-white text-[10px]"></i>
                    </div>
                </button>

            </div>
        </header>
    );
};