<?php
/**
 * CBH Agency - Unified Premium Cyberpunk Navigation
 * Drei perfekt sortierte Dropdowns (Lab, Partners, Kontakt) mit originalen CBH-Markenfarben im Logo
 */

// Aktive Seite erkennen
$active_page = basename($_SERVER['PHP_SELF']);

// Active States für die Dropdowns ermitteln
$is_active_lab = ($active_page == 'lab.php');
$is_active_partners = ($active_page == 'partner.php' || $active_page == 'it-recht.php' || $active_page == 'lexware.php' || $active_page == 'whmcs.php' || $active_page == 'cloudpanel.php' || $active_page == 'google.php' || $active_page == 'wmd.php');
$is_active_contact_drop = ($active_page == 'info.php' || $active_page == 'kontakt.php' || $active_page == 'support.php' || $active_page == 'termin.php');
?>
<header class="fixed top-0 left-0 right-0 z-50 transition-all duration-300 bg-slate-950/80 backdrop-blur-xl border-b border-slate-900/60 shadow-[0_4px_30px_rgba(0,0,0,0.5)]">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex items-center justify-between h-20">
            
            <!-- LOGO BEREICH (Deine echten CBH Agency Markenfarben!) -->
            <div class="flex-shrink-0">
                <a href="index.php" class="flex items-center gap-3 group">
                    <div class="h-10 w-24 bg-white/5 border border-slate-800 rounded-xl p-1.5 flex items-center justify-center overflow-hidden transition-all duration-300 group-hover:border-emerald-500/30">
                        <img src="./assets/img/logo/cbh_a_logo.png" alt="CBH Agency Logo" class="h-full object-contain">
                    </div>
                    <div class="inline-flex items-center text-sm font-black tracking-widest uppercase transition-all duration-300">
                        <span class="text-green-500 group-hover:brightness-125 transition duration-300">C</span>
                        <span class="text-yellow-400 group-hover:brightness-125 transition duration-300">B</span>
                        <span class="text-red-600 group-hover:brightness-125 transition duration-300">H</span>
                        <span class="ml-1.5 text-blue-400 group-hover:brightness-125 transition duration-300">Agency</span>
                    </div>
                </a>
            </div>

            <!-- DESKTOP NAV-MENÜ -->
            <nav class="hidden lg:flex items-center gap-1 text-[11px] font-mono font-bold">
                <a href="index.php" class="px-2.5 py-2 rounded-lg <?= ($active_page == 'index.php') ? 'text-emerald-400 bg-emerald-950/20' : 'text-slate-300 hover:text-white hover:bg-white/5'; ?> transition-colors">Start</a>
                <a href="ueber-mich.php" class="px-2.5 py-2 rounded-lg <?= ($active_page == 'ueber-mich.php') ? 'text-emerald-400 bg-emerald-950/20' : 'text-slate-300 hover:text-white hover:bg-white/5'; ?> transition-colors">Ueber mich</a>
                <a href="leistungen.php" class="px-2.5 py-2 rounded-lg <?= ($active_page == 'leistungen.php') ? 'text-emerald-400 bg-emerald-950/20' : 'text-slate-300 hover:text-white hover:bg-white/5'; ?> transition-colors">Leistungen</a>
                <a href="showcase.php" class="px-2.5 py-2 rounded-lg <?= ($active_page == 'showcase.php') ? 'text-emerald-400 bg-emerald-950/20' : 'text-slate-300 hover:text-white hover:bg-white/5'; ?> transition-colors">Showcase</a>
                <a href="pakete.php" class="px-2.5 py-2 rounded-lg <?= ($active_page == 'pakete.php') ? 'text-emerald-400 bg-emerald-950/20' : 'text-slate-300 hover:text-white hover:bg-white/5'; ?> transition-colors">Pakete</a>
                <a href="projekte.php" class="px-2.5 py-2 rounded-lg <?= ($active_page == 'projekte.php') ? 'text-emerald-400 bg-emerald-950/20' : 'text-slate-300 hover:text-white hover:bg-white/5'; ?> transition-colors">Projekte</a>

                <!-- DROPDOWN 1: CBH - LAB -->
                <div class="relative group/lab">
                    <button class="flex items-center gap-1 px-3 py-2 rounded-lg transition-all <?= $is_active_lab ? 'text-amber-400 bg-amber-950/20 border border-amber-500/20' : 'text-slate-300 hover:text-white hover:bg-white/5'; ?>">
                        <span>CBH - Lab</span>
                        <i class="fa-solid fa-chevron-down text-[9px] transition-transform duration-300 group-hover/lab:rotate-180"></i>
                    </button>

                    <div class="absolute left-0 top-full w-80 mt-2 origin-top-left rounded-3xl border border-slate-800 bg-slate-950/95 p-6 shadow-2xl opacity-0 scale-95 pointer-events-none group-hover/lab:opacity-100 group-hover/lab:scale-100 group-hover/lab:pointer-events-auto transition-all duration-200">
                        <span class="text-[9px] font-mono text-slate-500 uppercase tracking-widest block mb-4 border-b border-slate-900/60 pb-2">Lab-Netzwerk &amp; Cloud</span>
                        <div class="flex flex-col gap-4">
                            <a href="lab.php" class="flex items-start gap-3 group/item">
                                <span class="w-2.5 h-2.5 rounded-full bg-amber-400 shadow-[0_0_10px_rgba(245,158,11,0.5)] mt-1.5 shrink-0 transition-transform group-hover/item:scale-125"></span>
                                <div>
                                    <h4 class="text-xs font-bold text-white group-hover/item:text-amber-400 transition-colors">Lab Portal</h4>
                                    <p class="text-[10px] text-slate-500 font-mono mt-0.5">Übersicht aller CBH-Lab-Projekte</p>
                                </div>
                            </a>
                            <a href="https://cbhdns.net" target="_blank" rel="noopener" class="flex items-start gap-3 group/item">
                                <span class="w-2.5 h-2.5 rounded-full bg-cyan-400 shadow-[0_0_10px_rgba(6,182,212,0.5)] mt-1.5 shrink-0 transition-transform group-hover/item:scale-125"></span>
                                <div>
                                    <h4 class="text-xs font-bold text-white group-hover/item:text-cyan-400 transition-colors">CBHDNS.NET</h4>
                                    <p class="text-[10px] text-slate-500 font-mono mt-0.5">Anycast DNS &amp; Failback Security</p>
                                </div>
                            </a>
                            <a href="https://cbhcloud.net" target="_blank" rel="noopener" class="flex items-start gap-3 group/item">
                                <span class="w-2.5 h-2.5 rounded-full bg-blue-500 shadow-[0_0_10px_rgba(59,130,246,0.5)] mt-1.5 shrink-0 transition-transform group-hover/item:scale-125"></span>
                                <div>
                                    <h4 class="text-xs font-bold text-white group-hover/item:text-blue-400 transition-colors">CBHCLOUD.NET</h4>
                                    <p class="text-[10px] text-slate-500 font-mono mt-0.5">Bare-Metal Server im deutschen Rechenzentrum</p>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>

                <!-- DROPDOWN 2: PARTNERS -->
                <div class="relative group/dropdown">
                    <button class="flex items-center gap-1 px-3 py-2 rounded-lg transition-all <?= $is_active_partners ? 'text-emerald-400 bg-emerald-950/20 border border-emerald-500/20' : 'text-slate-300 hover:text-white hover:bg-white/5'; ?>">
                        <span>Partners</span>
                        <i class="fa-solid fa-chevron-down text-[9px] transition-transform duration-300 group-hover/dropdown:rotate-180"></i>
                    </button>

                    <div class="absolute right-0 top-full w-80 mt-2 origin-top-right rounded-3xl border border-slate-800 bg-slate-950/95 p-6 shadow-2xl opacity-0 scale-95 pointer-events-none group-hover/dropdown:opacity-100 group-hover/dropdown:scale-100 group-hover/dropdown:pointer-events-auto transition-all duration-200">
                        <span class="text-[9px] font-mono text-slate-500 uppercase tracking-widest block mb-4 border-b border-slate-900/60 pb-2">Zertifizierte Integrationen</span>
                        <div class="flex flex-col gap-4">
                            <a href="partner.php" class="flex items-start gap-3 group/item">
                                <span class="w-2.5 h-2.5 rounded-full bg-emerald-500 shadow-[0_0_10px_rgba(16,185,129,0.5)] mt-1.5 shrink-0 transition-transform group-hover/item:scale-125"></span>
                                <div>
                                    <h4 class="text-xs font-bold text-white group-hover/item:text-emerald-400 transition-colors">Partner Portal</h4>
                                    <p class="text-[10px] text-slate-500 font-mono mt-0.5">Übersicht aller CBH-Partner</p>
                                </div>
                            </a>
                            <a href="lexware.php" class="flex items-start gap-3 group/item">
                                <span class="w-2.5 h-2.5 rounded-full bg-red-500 shadow-[0_0_10px_rgba(239,68,68,0.5)] mt-1.5 shrink-0 transition-transform group-hover/item:scale-125"></span>
                                <div>
                                    <h4 class="text-xs font-bold text-white group-hover/item:text-red-400 transition-colors">Lexware Office</h4>
                                    <p class="text-[10px] text-slate-500 font-mono mt-0.5">Buchhaltung, XRechnung &amp; Lohn</p>
                                </div>
                            </a>
                            <a href="it-recht.php" class="flex items-start gap-3 group/item">
                                <span class="w-2.5 h-2.5 rounded-full bg-emerald-500 shadow-[0_0_10px_rgba(16,185,129,0.5)] mt-1.5 shrink-0 transition-transform group-hover/item:scale-125"></span>
                                <div>
                                    <h4 class="text-xs font-bold text-white group-hover/item:text-emerald-400 transition-colors">IT-Recht Kanzlei</h4>
                                    <p class="text-[10px] text-slate-500 font-mono mt-0.5">Rechtstexte &amp; DSGVO-Schutz</p>
                                </div>
                            </a>
                            <a href="whmcs.php" class="flex items-start gap-3 group/item">
                                <span class="w-2.5 h-2.5 rounded-full bg-blue-500 shadow-[0_0_10px_rgba(59,130,246,0.5)] mt-1.5 shrink-0 transition-transform group-hover/item:scale-125"></span>
                                <div>
                                    <h4 class="text-xs font-bold text-white group-hover/item:text-blue-500 transition-colors">WHMCS</h4>
                                    <p class="text-[10px] text-slate-500 font-mono mt-0.5">Partner-Portal &amp; Registrierung</p>
                                </div>
                            </a>
                            <a href="cloudpanel.php" class="flex items-start gap-3 group/item">
                                <span class="w-2.5 h-2.5 rounded-full bg-cyan-400 shadow-[0_0_10px_rgba(6,182,212,0.5)] mt-1.5 shrink-0 transition-transform group-hover/item:scale-125"></span>
                                <div>
                                    <h4 class="text-xs font-bold text-white group-hover/item:text-cyan-400 transition-colors">CloudPanel HighSpeed</h4>
                                    <p class="text-[10px] text-slate-500 font-mono mt-0.5">HTTP/3 Speed-Server Matrix</p>
                                </div>
                            </a>
                            <a href="google.php" class="flex items-start gap-3 group/item">
                                <span class="w-2.5 h-2.5 rounded-full bg-emerald-500 shadow-[0_0_10px_rgba(16,185,129,0.5)] mt-1.5 shrink-0 transition-transform group-hover/item:scale-125"></span>
                                <div>
                                    <h4 class="text-xs font-bold text-white group-hover/item:text-emerald-400 transition-colors">Google Workspace</h4>
                                    <p class="text-[10px] text-slate-500 font-mono mt-0.5">G-Suite &amp; Domain-Mails</p>
                                </div>
                            </a>
                            <a href="wmd.php" class="flex items-start gap-3 group/item">
                                <span class="w-2.5 h-2.5 rounded-full bg-amber-500 shadow-[0_0_10px_rgba(245,158,11,0.5)] mt-1.5 shrink-0 transition-transform group-hover/item:scale-125"></span>
                                <div>
                                    <h4 class="text-xs font-bold text-white group-hover/item:text-amber-400 transition-colors">Wir machen Druck</h4>
                                    <p class="text-[10px] text-slate-500 font-mono mt-0.5">Automatisierter Print-On-Demand</p>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>

                <!-- DROPDOWN 3: KONTAKT -->
                <div class="relative group/contact">
                    <button class="flex items-center gap-1 px-3 py-2 rounded-lg transition-all <?= $is_active_contact_drop ? 'text-emerald-400 bg-emerald-950/20 border border-emerald-500/20' : 'text-slate-300 hover:text-white hover:bg-white/5'; ?>">
                        <span>Kontakt</span>
                        <i class="fa-solid fa-chevron-down text-[9px] transition-transform duration-300 group-hover/contact:rotate-180"></i>
                    </button>

                    <div class="absolute right-0 top-full w-80 mt-2 origin-top-right rounded-3xl border border-slate-800 bg-slate-950/95 p-6 shadow-2xl opacity-0 scale-95 pointer-events-none group-hover/contact:opacity-100 group-hover/contact:scale-100 group-hover/contact:pointer-events-auto transition-all duration-200">
                        <span class="text-[9px] font-mono text-slate-500 uppercase tracking-widest block mb-4 border-b border-slate-900/60 pb-2">Support &amp; Connect</span>
                        <div class="flex flex-col gap-4">
                            <!-- 1. Info (beratung.php) -->
                            <a href="beratung.php" class="flex items-start gap-3 group/item">
                                <span class="w-2.5 h-2.5 rounded-full bg-blue-500 shadow-[0_0_10px_rgba(59,130,246,0.5)] mt-1.5 shrink-0 transition-transform group-hover/item:scale-125"></span>
                                <div>
                                    <h4 class="text-xs font-bold text-white group-hover/item:text-blue-400 transition-colors">Kontakt</h4>
                                    <p class="text-[10px] text-slate-500 font-mono mt-0.5">Klassisches B2B Anfrageformular (Info)</p>
                                </div>
                            </a>
                            <!-- 2. Beratung (kontakt.php) -->
                            <a href="kontakt.php" class="flex items-start gap-3 group/item">
                                <span class="w-2.5 h-2.5 rounded-full bg-emerald-500 shadow-[0_0_10px_rgba(16,185,129,0.5)] mt-1.5 shrink-0 transition-transform group-hover/item:scale-125"></span>
                                <div>
                                    <h4 class="text-xs font-bold text-white group-hover/item:text-emerald-400 transition-colors">Beratung</h4>
                                    <p class="text-[10px] text-slate-500 font-mono mt-0.5">Interaktive flippende Kontaktkarten</p>
                                </div>
                            </a>
                            <!-- 3. Support (support.php) -->
                            <a href="support.php" class="flex items-start gap-3 group/item">
                                <span class="w-2.5 h-2.5 rounded-full bg-amber-500 shadow-[0_0_10px_rgba(245,158,11,0.5)] mt-1.5 shrink-0 transition-transform group-hover/item:scale-125"></span>
                                <div>
                                    <h4 class="text-xs font-bold text-white group-hover/item:text-amber-400 transition-colors">Support</h4>
                                    <p class="text-[10px] text-slate-500 font-mono mt-0.5">Kunden-Helpdesk &amp; Ticketsystem</p>
                                </div>
                            </a>
                            <!-- 4. Termin (termin.php) -->
                            <a href="termin.php" class="flex items-start gap-3 group/item">
                                <span class="w-2.5 h-2.5 rounded-full bg-cyan-400 shadow-[0_0_10px_rgba(6,182,212,0.5)] mt-1.5 shrink-0 transition-transform group-hover/item:scale-125"></span>
                                <div>
                                    <h4 class="text-xs font-bold text-white group-hover/item:text-cyan-400 transition-colors">Termin</h4>
                                    <p class="text-[10px] text-slate-500 font-mono mt-0.5">Erstberatung &amp; Kalender-Buchung</p>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
            </nav>

            <!-- STATUS OUTPUT ANSTELLE DES QUETSCHENDEN CTA BUTTONS -->
            <div class="hidden lg:flex items-center">
                <span class="text-[10px] font-mono text-emerald-400 animate-pulse uppercase tracking-widest">// SPEZOPS SUITE v4.2</span>
            </div>

            <!-- MOBILE MENU BUTTON -->
            <div class="flex lg:hidden">
                <button id="menu-btn" type="button" class="inline-flex items-center justify-center p-2 rounded-xl text-slate-400 hover:text-white hover:bg-white/5 focus:outline-none transition-all">
                    <i class="fa-solid fa-bars text-lg"></i>
                </button>
            </div>

        </div>
    </div>

    <!-- MOBILE NAVIGATION OVERLAY -->
    <div id="mobile-menu" class="fixed inset-x-0 top-20 bg-slate-950 border-b border-slate-900 shadow-2xl transition-transform duration-300 -translate-y-full lg:hidden z-40 p-4 max-h-[80vh] overflow-y-auto">
        <nav class="flex flex-col gap-2 text-xs font-mono font-bold">
            <a href="index.php" class="p-3 rounded-xl hover:bg-white/5 transition-all flex items-center gap-3 text-slate-300 hover:text-white"><i class="fa-solid fa-house"></i> Start</a>
            <a href="ueber-mich.php" class="p-3 rounded-xl hover:bg-white/5 transition-all flex items-center gap-3 text-slate-300 hover:text-white"><i class="fa-solid fa-user"></i> Ueber mich</a>
            <a href="leistungen.php" class="p-3 rounded-xl hover:bg-white/5 transition-all flex items-center gap-3 text-slate-300 hover:text-white"><i class="fa-solid fa-list-check"></i> Leistungen</a>
            <a href="showcase.php" class="p-3 rounded-xl hover:bg-white/5 transition-all flex items-center gap-3 text-slate-300 hover:text-white"><i class="fa-solid fa-folder-open"></i> Showcase</a>
            <a href="pakete.php" class="p-3 rounded-xl hover:bg-white/5 transition-all flex items-center gap-3 text-slate-300 hover:text-white"><i class="fa-solid fa-box"></i> Pakete</a>
            <a href="projekte.php" class="p-3 rounded-xl hover:bg-white/5 transition-all flex items-center gap-3 text-slate-300 hover:text-white"><i class="fa-solid fa-diagram-project"></i> Projekte</a>
            
            <div class="border-t border-slate-900 my-2"></div>
            <span class="px-3 text-[10px] text-slate-500 uppercase tracking-widest block mb-1">CBH - Lab</span>
            <a href="lab.php" class="p-2.5 rounded-xl hover:bg-white/5 transition-all flex items-center gap-3 text-slate-400 hover:text-white"><i class="fa-solid fa-flask text-amber-400"></i> Lab Portal</a>
            <a href="https://cbhdns.net" target="_blank" rel="noopener" class="p-2.5 rounded-xl hover:bg-white/5 transition-all flex items-center gap-3 text-slate-400 hover:text-white"><i class="fa-solid fa-shield-halved text-cyan-400"></i> CBHDNS.NET Anycast</a>
            <a href="https://cbhcloud.net" target="_blank" rel="noopener" class="p-2.5 rounded-xl hover:bg-white/5 transition-all flex items-center gap-3 text-slate-400 hover:text-white"><i class="fa-solid fa-server text-blue-400"></i> CBHCLOUD.NET Cloud</a>

            <div class="border-t border-slate-900 my-2"></div>
            <span class="px-3 text-[10px] text-slate-500 uppercase tracking-widest block mb-1">Partnerschnittstellen</span>
            <a href="partner.php" class="p-2.5 rounded-xl hover:bg-white/5 transition-all flex items-center gap-3 text-slate-400 hover:text-white"><i class="fa-solid fa-network-wired text-emerald-400"></i> All Partners</a>
            <a href="it-recht.php" class="p-2.5 rounded-xl hover:bg-white/5 transition-all flex items-center gap-3 text-slate-400 hover:text-white"><i class="fa-solid fa-shield-halved text-orange-400"></i> IT-Recht Kanzlei</a>
            <a href="lexware.php" class="p-2.5 rounded-xl hover:bg-white/5 transition-all flex items-center gap-3 text-slate-400 hover:text-white"><i class="fa-solid fa-file-invoice-dollar text-red-400"></i> Lexware Office</a>
            <a href="whmcs.php" class="p-2.5 rounded-xl hover:bg-white/5 transition-all flex items-center gap-3 text-slate-400 hover:text-white"><i class="fa-solid fa-server text-blue-400"></i> WHMCS Billing</a>
            <a href="cloudpanel.php" class="p-2.5 rounded-xl hover:bg-white/5 transition-all flex items-center gap-3 text-slate-400 hover:text-white"><i class="fa-solid fa-cloud text-cyan-400"></i> CloudPanel HighSpeed</a>
            <a href="google.php" class="p-2.5 rounded-xl hover:bg-white/5 transition-all flex items-center gap-3 text-slate-400 hover:text-white"><i class="fa-brands fa-google text-emerald-400"></i> Google Workspace</a>
            
            <div class="border-t border-slate-900 my-2"></div>
            <span class="px-3 text-[10px] text-slate-500 uppercase tracking-widest block mb-1">Support &amp; Connect</span>
            <a href="beratung.php" class="p-2.5 rounded-xl hover:bg-white/5 transition-all flex items-center gap-3 text-slate-400 hover:text-white"><i class="fa-solid fa-paper-plane text-blue-400"></i> Kontakt (Info)</a>
            <a href="kontakt.php" class="p-2.5 rounded-xl hover:bg-white/5 transition-all flex items-center gap-3 text-slate-400 hover:text-white"><i class="fa-solid fa-phone text-emerald-400"></i> Beratung</a>
            <a href="support.php" class="p-2.5 rounded-xl hover:bg-white/5 transition-all flex items-center gap-3 text-slate-400 hover:text-white"><i class="fa-solid fa-circle-info text-amber-400"></i> Support</a>
            <a href="termin.php" class="p-2.5 rounded-xl hover:bg-white/5 transition-all flex items-center gap-3 text-slate-400 hover:text-white"><i class="fa-solid fa-calendar-days text-cyan-400"></i> Termin buchen</a>
        </nav>
    </div>
</header>

