(function() {
    const Bell = window.createIcon('Bell');
    const Search = window.createIcon('Search');

    const ConsoleHead = ({ title }) => {
        return (
            <div className="h-20 border-b border-white/5 flex items-center justify-between px-8 bg-[#0f0f1a]/80 backdrop-blur-md sticky top-0 z-40">
                
                {/* Page Title */}
                <h2 className="text-2xl font-bold text-white tracking-wide">{title}</h2>

                {/* Right Actions */}
                <div className="flex items-center gap-4">
                    {/* Search Bar */}
                    <div className="hidden md:flex items-center bg-white/5 border border-white/10 rounded-full px-4 py-2 w-64 focus-within:border-purple-500/50 transition">
                        <Search className="w-4 h-4 text-gray-500 mr-2" />
                        <input 
                            type="text" 
                            placeholder="Cari data..." 
                            className="bg-transparent border-none outline-none text-sm text-white placeholder-gray-600 w-full"
                        />
                    </div>

                    {/* Notification Bell */}
                    <button className="relative p-2 text-gray-400 hover:text-white transition">
                        <Bell className="w-5 h-5" />
                        <span className="absolute top-2 right-2 w-2 h-2 bg-red-500 rounded-full border border-[#0f0f1a]"></span>
                    </button>

                    {/* Link to Homepage (Exit Console) */}
                    <button 
                        onClick={() => window.useApp().navigateTo('home', '/')}
                        className="text-xs font-bold text-purple-400 hover:text-purple-300 border border-purple-500/30 px-3 py-1.5 rounded-lg transition"
                    >
                        Lihat Website &rarr;
                    </button>
                </div>
            </div>
        );
    };

    window.ConsoleHead = ConsoleHead;
})();