<?php
// ─── PAGE & CONTEXT DETECTION ────────────────────────────────────────────────
$currentPage = basename($_SERVER['PHP_SELF'], '.php');

// Map current page to product demo slug
$productPageMap = [
    'digital-wallet'                       => 'digital-wallet',
    'remittance'                           => 'remittance',
    'virtual-cards'                        => 'virtual-card',
    'fintech-core-banking'                 => 'core-banking',
    'gift-cards'                           => 'gift-cards',
    'systems-erp'                          => 'systems-erp',
    'systems-crm'                          => 'systems-crm',
    'systems-accounting'                   => 'systems-accounting',
    'systems-enterprise-operating-system'  => 'systems-enterprise-os',
];

$isProductPage = isset($productPageMap[$currentPage]);
$activeProductSlug = $isProductPage ? $productPageMap[$currentPage] : null;
$isTechTeamPage = ($currentPage === 'solutions-tech-team-for-hire');
$isUserLoggedIn = !empty($_SESSION['nesvra_user']);
$currentUser = $_SESSION['nesvra_user'] ?? null;

// ─── DATA ──────────────────────────────────────────────────────────────────

$solutions = [
    ['icon' => 'ri-team-line',              'title' => 'Tech Team for Hire',          'sub' => 'Dedicated developers, monthly',         'url' => 'solutions/tech-team-for-hire'],
    ['icon' => 'ri-code-s-slash-line',      'title' => 'Custom Development',          'sub' => 'From concept to production',            'url' => 'solutions/custom-software-development'],
    ['icon' => 'ri-rocket-line',            'title' => 'Tech Business Setup',         'sub' => 'Zero to revenue-ready',                 'url' => 'solutions/launch-tech-business'],
    ['icon' => 'ri-bank-line',              'title' => 'Fintech Infrastructure',      'sub' => 'Core banking APIs & compliance',        'url' => 'solutions/fintech-infrastructure'],
    ['icon' => 'ri-copper-coin-line',       'title' => 'Infrastructure Access',       'sub' => 'White-label platform access',           'url' => 'solutions/infrastructure-access'],
    ['icon' => 'ri-layout-masonry-line',    'title' => 'Business Operating System',   'sub' => 'Your entire ops in one system',         'url' => 'solutions/business-operating-system'],
];

$fintech = [
    ['icon' => 'ri-layout-grid-line',       'title' => 'Overview',              'sub' => 'The full Nesvra Fintech stack',         'url' => 'fintech'],
    ['icon' => 'ri-bank-card-line',         'title' => 'Virtual Cards',         'sub' => 'Issue cards globally, instantly',       'url' => 'product/virtual-cards'],
    ['icon' => 'ri-exchange-funds-line',    'title' => 'Remittance',            'sub' => 'Cross-border transfers, simplified',    'url' => 'product/remittance'],
    ['icon' => 'ri-bank-line',              'title' => 'Core Banking',          'sub' => 'Ledger, accounts & payment rails',      'url' => 'product/core-banking'],
    ['icon' => 'ri-wallet-3-line',          'title' => 'Digital Wallet',        'sub' => 'Complete wallet ecosystem',             'url' => 'product/digital-wallet'],
    ['icon' => 'ri-gift-line',              'title' => 'Airtime & Gift Cards',  'sub' => 'Digital value distribution',           'url' => 'product/gift-cards'],
];

$systems = [
    ['icon' => 'ri-layout-grid-line',       'title' => 'Overview',                    'sub' => 'Connected systems, one platform',       'url' => 'systems'],
    ['icon' => 'ri-node-tree',              'title' => 'ERP',                         'sub' => 'Operations & resource planning',        'url' => 'systems/erp'],
    ['icon' => 'ri-contacts-book-line',     'title' => 'CRM',                         'sub' => 'Customer relationships at scale',       'url' => 'systems/crm'],
    ['icon' => 'ri-calculator-line',        'title' => 'Accounting',                  'sub' => 'Automated financial management',        'url' => 'systems/accounting'],
    ['icon' => 'ri-building-4-line',        'title' => 'Enterprise Operating System', 'sub' => 'The full enterprise stack unified',     'url' => 'systems/enterprise-operating-system'],
];

$industries = [
    ['icon' => 'ri-layout-grid-line',       'title' => 'Overview',              'sub' => 'Every industry, purpose-built',         'url' => 'industries'],
    ['icon' => 'ri-bank-line',              'title' => 'Banking',               'sub' => 'Core banking & digital infra',          'url' => 'industries/banking'],
    ['icon' => 'ri-copper-coin-line',       'title' => 'Financial Services',    'sub' => 'Fintech, lending & insurance tech',     'url' => 'industries/financial-services'],
    ['icon' => 'ri-signal-tower-line',      'title' => 'Telecommunications',    'sub' => 'MVNO, eSIM & operator platforms',       'url' => 'industries/telecommunications'],
    ['icon' => 'ri-store-2-line',           'title' => 'eCommerce',             'sub' => 'Marketplace & retail infrastructure',   'url' => 'industries/ecommerce'],
    ['icon' => 'ri-heart-pulse-line',       'title' => 'Healthcare',            'sub' => 'Clinical systems & patient platforms',  'url' => 'industries/healthcare'],
    ['icon' => 'ri-graduation-cap-line',    'title' => 'Education',             'sub' => 'LMS, EdTech & campus systems',          'url' => 'industries/education'],
    ['icon' => 'ri-settings-3-line',        'title' => 'Manufacturing',         'sub' => 'Production & supply chain systems',     'url' => 'industries/manufacturing'],
    ['icon' => 'ri-truck-line',             'title' => 'Logistics',             'sub' => 'Fleet, dispatch & delivery platforms',  'url' => 'industries/logistics'],
    ['icon' => 'ri-government-line',        'title' => 'Government',            'sub' => 'Citizen services & public infra',       'url' => 'industries/government'],
];

$casestudies = [
    ['icon' => 'ri-layout-grid-line',       'title' => 'Overview',                 'sub' => 'All client stories & results',      'url' => 'case-studies'],
    ['icon' => 'ri-copper-coin-line',       'title' => 'Fintech Launches',         'sub' => 'How businesses launched fintech products',         'url' => 'case-studies/fintech-launches'],
    ['icon' => 'ri-building-4-line',        'title' => 'Enterprise Systems',       'sub' => 'ERP and CRM deployments',       'url' => 'case-studies/enterprise-systems'],
    ['icon' => 'ri-rocket-line',            'title' => 'Startup Success Stories',  'sub' => 'Founders who launched technology businesses.',              'url' => 'case-studies/startup-success-stories'],
];

$compare = [
    ['icon' => 'ri-layout-grid-line',       'title' => 'Overview',                     'sub' => 'The full comparison breakdown',      'url' => 'compare'],
    ['icon' => 'ri-team-line',              'title' => 'In-house Team vs Nesvra',      'sub' => 'Cost, speed & quality analysis',    'url' => 'compare/in-house-team-vs-nesvra'],
    ['icon' => 'ri-building-line',          'title' => 'Agencies vs Nesvra',           'sub' => 'Accountability & outcomes',         'url' => 'compare/agencies-vs-nesvra'],
    ['icon' => 'ri-git-merge-line',         'title' => 'Multiple Vendors vs Nesvra',   'sub' => 'One platform vs fragmented tools',  'url' => 'compare/multiple-vendors-vs-nesvra'],
    ['icon' => 'ri-user-line',              'title' => 'Freelancers vs Nesvra',        'sub' => 'Reliability, IP & team depth',      'url' => 'compare/freelancer-vs-nesvra'],
];
?>

<!-- ════════════════════════════════════════════════════════════════ -->
<!--  DESKTOP NAVBAR                                                  -->
<!-- ════════════════════════════════════════════════════════════════ -->
<header class="fixed hidden lg:block top-5 left-0 w-full z-[100] px-[3%] pointer-events-none">
    <nav id="mainNav"
        class="relative w-full mx-auto rounded-[16px] transition-all duration-500 py-3.5 px-8 flex items-center justify-between text-white pointer-events-auto">

        <!-- Logo -->
        <a href="home" class="flex items-center shrink-0">
            <img id="logoLight" src="Asset/logo-colored.png" alt="Nesvra" class="h-8 w-auto block transition-opacity duration-300">
            <img id="logoDark"  src="Asset/logo.png"         alt="Nesvra" class="h-8 w-auto hidden transition-opacity duration-300">
        </a>

        <!-- Nav Links -->
        <div class="flex items-center gap-4 xl:gap-6">
            <a href="about"       class="nav-link text-[11.5px] tracking-[0.1px] hover:opacity-50 transition-opacity uppercase whitespace-nowrap">About</a>

            <button class="nav-trigger nav-link text-[11.5px] tracking-[0.1px] hover:opacity-50 transition-opacity uppercase flex items-center gap-1 group whitespace-nowrap" data-pane="0">
                Solutions <i class="ri-arrow-down-s-line opacity-40 transition-transform duration-300 group-hover:rotate-180"></i>
            </button>
            <button class="nav-trigger nav-link text-[11.5px] tracking-[0.1px] hover:opacity-50 transition-opacity uppercase flex items-center gap-1 group whitespace-nowrap" data-pane="1">
                Fintech <i class="ri-arrow-down-s-line opacity-40 transition-transform duration-300 group-hover:rotate-180"></i>
            </button>
            <button class="nav-trigger nav-link text-[11.5px] tracking-[0.1px] hover:opacity-50 transition-opacity uppercase flex items-center gap-1 group whitespace-nowrap" data-pane="2">
                Systems <i class="ri-arrow-down-s-line opacity-40 transition-transform duration-300 group-hover:rotate-180"></i>
            </button>
            <button class="nav-trigger nav-link text-[11.5px] tracking-[0.1px] hover:opacity-50 transition-opacity uppercase flex items-center gap-1 group whitespace-nowrap" data-pane="3">
                Industries <i class="ri-arrow-down-s-line opacity-40 transition-transform duration-300 group-hover:rotate-180"></i>
            </button>
            <button class="nav-trigger nav-link text-[11.5px] tracking-[0.1px] hover:opacity-50 transition-opacity uppercase flex items-center gap-1 group whitespace-nowrap" data-pane="4">
                Case Studies <i class="ri-arrow-down-s-line opacity-40 transition-transform duration-300 group-hover:rotate-180"></i>
            </button>
            <button class="nav-trigger nav-link text-[11.5px] tracking-[0.1px] hover:opacity-50 transition-opacity uppercase flex items-center gap-1 group whitespace-nowrap" data-pane="5">
                Compare <i class="ri-arrow-down-s-line opacity-40 transition-transform duration-300 group-hover:rotate-180"></i>
            </button>
            <a href="blog"        class="nav-link text-[11.5px] tracking-[0.1px] hover:opacity-50 transition-opacity uppercase whitespace-nowrap">Blog</a>
            <a href="contact"     class="nav-link text-[11.5px] tracking-[0.1px] hover:opacity-50 transition-opacity uppercase whitespace-nowrap">Contact</a>
        </div>

        <!-- CTA & Auth -->
        <div class="flex items-center gap-2.5 shrink-0">
            <?php if ($isUserLoggedIn): ?>
                <a href="auth" class="nav-auth-btn inline-flex items-center gap-1.5 px-3.5 py-1.5 rounded-full border border-white/20 hover:border-white/40 bg-white/5 hover:bg-white/10 text-white text-[11px] font-semibold tracking-tight uppercase transition-all">
                    <i class="ri-user-smile-line text-brandOrange text-xs"></i>
                    <span><?= htmlspecialchars(explode(' ', $currentUser['fullname'] ?? 'Portal')[0]) ?></span>
                </a>
            <?php else: ?>
                <a href="auth" class="nav-link text-[11.5px] tracking-[0.1px] hover:opacity-50 transition-opacity uppercase font-semibold px-2.5 py-2 whitespace-nowrap inline-flex items-center gap-1.5">
                    <i class="ri-user-line text-xs"></i>
                    <span>Sign In</span>
                </a>
            <?php endif; ?>

            <?php if ($isProductPage): ?>
                <a href="get-demo?product=<?= urlencode($activeProductSlug) ?>"
                   class="group relative inline-flex items-center justify-center px-5 py-2.5 bg-brandOrange text-white rounded-full transition-all duration-300 hover:-translate-y-[2px] active:translate-y-[1px] overflow-hidden shrink-0 shadow-sm shadow-brandOrange/20">
                    <div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent -translate-x-full group-hover:animate-[shimmer_1.5s_infinite] pointer-events-none"></div>
                    <div class="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-white/40 to-transparent"></div>
                    <span class="relative z-10 text-[11.5px] font-semibold tracking-tight uppercase flex items-center gap-1.5">
                        Request Demo
                        <i class="ri-play-circle-line transition-transform duration-300 group-hover:translate-x-0.5 group-hover:-translate-y-0.5"></i>
                    </span>
                </a>
            <?php elseif ($isTechTeamPage): ?>
                <a href="#pricing"
                   class="group relative inline-flex items-center justify-center px-5 py-2.5 bg-brandOrange text-white rounded-full transition-all duration-300 hover:-translate-y-[2px] active:translate-y-[1px] overflow-hidden shrink-0 shadow-sm shadow-brandOrange/20">
                    <div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent -translate-x-full group-hover:animate-[shimmer_1.5s_infinite] pointer-events-none"></div>
                    <div class="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-white/40 to-transparent"></div>
                    <span class="relative z-10 text-[11.5px] font-semibold tracking-tight uppercase flex items-center gap-1.5">
                        See Plans & Pricing
                        <i class="ri-arrow-down-line transition-transform duration-300 group-hover:translate-y-0.5"></i>
                    </span>
                </a>
            <?php else: ?>
                <a href="book-strategy-call"
                   class="group relative inline-flex items-center justify-center px-5 py-2.5 bg-brandOrange text-white rounded-full transition-all duration-300 hover:-translate-y-[2px] active:translate-y-[1px] overflow-hidden shrink-0 shadow-sm shadow-brandOrange/20">
                    <div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent -translate-x-full group-hover:animate-[shimmer_1.5s_infinite] pointer-events-none"></div>
                    <div class="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-white/40 to-transparent"></div>
                    <span class="relative z-10 text-[11.5px] font-semibold tracking-tight uppercase flex items-center gap-1.5">
                        Book Strategy Call
                        <i class="ri-arrow-right-up-line transition-transform duration-300 group-hover:translate-x-0.5 group-hover:-translate-y-0.5"></i>
                    </span>
                </a>
            <?php endif; ?>
        </div>

        <!-- ─── MEGA DROPDOWN ─── -->
        <div id="globalDropdown"
            class="absolute top-[calc(100%+10px)] left-1/2 -translate-x-1/2 w-full max-w-[1100px] bg-white rounded-[28px] shadow-[0_40px_100px_-20px_rgba(0,0,0,0.18)] border border-zinc-100 opacity-0 invisible translate-y-3 transition-all duration-400 ease-[cubic-bezier(0.23,1,0.32,1)] overflow-hidden">

            <!-- Pane clip: controls natural height + slide animation -->
            <div id="paneClip" class="relative overflow-hidden" style="height:0;">

            <!-- PANE 0: Solutions (6 items · 3-col) -->
            <div class="dropdown-pane px-10 pt-8 pb-6" data-pane="0" style="position:absolute;top:0;left:0;right:0;opacity:0;transform:translateX(0);transition:transform 350ms cubic-bezier(0.23,1,0.32,1),opacity 300ms ease;">
                <p class="font-mono text-[10px] uppercase tracking-[0.3em] text-soft mb-5">Solutions <span class="text-zinc-300 font-sans normal-case tracking-normal text-[11px]">— How Nesvra builds for you</span></p>
                <div class="grid grid-cols-3 gap-x-4 gap-y-1">
                    <?php foreach ($solutions as $item): ?>
                        <a href="<?= $item['url'] ?>" class="flex items-start gap-3.5 p-3 rounded-[16px] hover:bg-[#F8F9FA] transition-all duration-200 group/item">
                            <div class="w-10 h-10 shrink-0 flex items-center justify-center bg-[#F8F9FA] rounded-xl group-hover/item:bg-royal transition-all duration-300">
                                <i class="<?= $item['icon'] ?> text-base text-soft group-hover/item:text-white transition-colors"></i>
                            </div>
                            <div class="pt-0.5 min-w-0">
                                <p class="text-[13.5px] font-medium text-dark group-hover/item:text-royal transition-colors leading-tight"><?= $item['title'] ?></p>
                                <p class="text-[11.5px] text-soft leading-snug mt-0.5"><?= $item['sub'] ?></p>
                            </div>
                        </a>
                    <?php endforeach; ?>
                </div>
            </div>

            <!-- PANE 1: Fintech (6 items · 3-col) -->
            <div class="dropdown-pane px-10 pt-8 pb-6" data-pane="1" style="position:absolute;top:0;left:0;right:0;opacity:0;transform:translateX(40px);transition:transform 350ms cubic-bezier(0.23,1,0.32,1),opacity 300ms ease;">
                <p class="font-mono text-[10px] uppercase tracking-[0.3em] text-soft mb-5">Fintech <span class="text-zinc-300 font-sans normal-case tracking-normal text-[11px]">— Nesvra's financial product suite</span></p>
                <div class="grid grid-cols-3 gap-x-4 gap-y-1">
                    <?php foreach ($fintech as $item): ?>
                        <a href="<?= $item['url'] ?>" class="flex items-start gap-3.5 p-3 rounded-[16px] hover:bg-[#F8F9FA] transition-all duration-200 group/item">
                            <div class="w-10 h-10 shrink-0 flex items-center justify-center bg-[#F8F9FA] rounded-xl group-hover/item:bg-royal transition-all duration-300">
                                <i class="<?= $item['icon'] ?> text-base text-soft group-hover/item:text-white transition-colors"></i>
                            </div>
                            <div class="pt-0.5 min-w-0">
                                <p class="text-[13.5px] font-medium text-dark group-hover/item:text-royal transition-colors leading-tight"><?= $item['title'] ?></p>
                                <p class="text-[11.5px] text-soft leading-snug mt-0.5"><?= $item['sub'] ?></p>
                            </div>
                        </a>
                    <?php endforeach; ?>
                </div>
            </div>

            <!-- PANE 2: Systems (5 items · 3-col) -->
            <div class="dropdown-pane px-10 pt-8 pb-6" data-pane="2" style="position:absolute;top:0;left:0;right:0;opacity:0;transform:translateX(40px);transition:transform 350ms cubic-bezier(0.23,1,0.32,1),opacity 300ms ease;">
                <p class="font-mono text-[10px] uppercase tracking-[0.3em] text-soft mb-5">Systems <span class="text-zinc-300 font-sans normal-case tracking-normal text-[11px]">— Enterprise-grade business systems</span></p>
                <div class="grid grid-cols-3 gap-x-4 gap-y-1">
                    <?php foreach ($systems as $item): ?>
                        <a href="<?= $item['url'] ?>" class="flex items-start gap-3.5 p-3 rounded-[16px] hover:bg-[#F8F9FA] transition-all duration-200 group/item">
                            <div class="w-10 h-10 shrink-0 flex items-center justify-center bg-[#F8F9FA] rounded-xl group-hover/item:bg-royal transition-all duration-300">
                                <i class="<?= $item['icon'] ?> text-base text-soft group-hover/item:text-white transition-colors"></i>
                            </div>
                            <div class="pt-0.5 min-w-0">
                                <p class="text-[13.5px] font-medium text-dark group-hover/item:text-royal transition-colors leading-tight"><?= $item['title'] ?></p>
                                <p class="text-[11.5px] text-soft leading-snug mt-0.5"><?= $item['sub'] ?></p>
                            </div>
                        </a>
                    <?php endforeach; ?>
                </div>
            </div>

            <!-- PANE 3: Industries (10 items · 3-col) -->
            <div class="dropdown-pane px-10 pt-8 pb-6" data-pane="3" style="position:absolute;top:0;left:0;right:0;opacity:0;transform:translateX(40px);transition:transform 350ms cubic-bezier(0.23,1,0.32,1),opacity 300ms ease;">
                <p class="font-mono text-[10px] uppercase tracking-[0.3em] text-soft mb-5">Industries <span class="text-zinc-300 font-sans normal-case tracking-normal text-[11px]">— Nesvra built for your sector</span></p>
                <div class="grid grid-cols-3 gap-x-4 gap-y-0.5">
                    <?php foreach ($industries as $item): ?>
                        <a href="<?= $item['url'] ?>" class="flex items-start gap-3.5 p-3 rounded-[16px] hover:bg-[#F8F9FA] transition-all duration-200 group/item">
                            <div class="w-10 h-10 shrink-0 flex items-center justify-center bg-[#F8F9FA] rounded-xl group-hover/item:bg-royal transition-all duration-300">
                                <i class="<?= $item['icon'] ?> text-base text-soft group-hover/item:text-white transition-colors"></i>
                            </div>
                            <div class="pt-0.5 min-w-0">
                                <p class="text-[13.5px] font-medium text-dark group-hover/item:text-royal transition-colors leading-tight"><?= $item['title'] ?></p>
                                <p class="text-[11.5px] text-soft leading-snug mt-0.5"><?= $item['sub'] ?></p>
                            </div>
                        </a>
                    <?php endforeach; ?>
                </div>
            </div>

            <!-- PANE 4: Case Studies (4 items · 2-col) -->
            <div class="dropdown-pane px-10 pt-8 pb-6" data-pane="4" style="position:absolute;top:0;left:0;right:0;opacity:0;transform:translateX(40px);transition:transform 350ms cubic-bezier(0.23,1,0.32,1),opacity 300ms ease;">
                <p class="font-mono text-[10px] uppercase tracking-[0.3em] text-soft mb-5">Case Studies <span class="text-zinc-300 font-sans normal-case tracking-normal text-[11px]">— Real outcomes, real businesses</span></p>
                <div class="grid grid-cols-3 gap-x-4 gap-y-1 ">
                    <?php foreach ($casestudies as $item): ?>
                        <a href="<?= $item['url'] ?>" class="flex items-start gap-3.5 p-3 rounded-[16px] hover:bg-[#F8F9FA] transition-all duration-200 group/item">
                            <div class="w-10 h-10 shrink-0 flex items-center justify-center bg-[#F8F9FA] rounded-xl group-hover/item:bg-royal transition-all duration-300">
                                <i class="<?= $item['icon'] ?> text-base text-soft group-hover/item:text-white transition-colors"></i>
                            </div>
                            <div class="pt-0.5 min-w-0">
                                <p class="text-[13.5px] font-medium text-dark group-hover/item:text-royal transition-colors leading-tight"><?= $item['title'] ?></p>
                                <p class="text-[11.5px] text-soft leading-snug mt-0.5"><?= $item['sub'] ?></p>
                            </div>
                        </a>
                    <?php endforeach; ?>
                </div>
            </div>

            <!-- PANE 5: Compare (5 items · 2-col) -->
            <div class="dropdown-pane px-10 pt-8 pb-6" data-pane="5" style="position:absolute;top:0;left:0;right:0;opacity:0;transform:translateX(40px);transition:transform 350ms cubic-bezier(0.23,1,0.32,1),opacity 300ms ease;">
                <p class="font-mono text-[10px] uppercase tracking-[0.3em] text-soft mb-5">Compare <span class="text-zinc-300 font-sans normal-case tracking-normal text-[11px]">— Why Nesvra wins every comparison</span></p>
                <div class="grid grid-cols-3 gap-x-4 gap-y-1 ">
                    <?php foreach ($compare as $item): ?>
                        <a href="<?= $item['url'] ?>" class="flex items-start gap-3.5 p-3 rounded-[16px] hover:bg-[#F8F9FA] transition-all duration-200 group/item">
                            <div class="w-10 h-10 shrink-0 flex items-center justify-center bg-[#F8F9FA] rounded-xl group-hover/item:bg-royal transition-all duration-300">
                                <i class="<?= $item['icon'] ?> text-base text-soft group-hover/item:text-white transition-colors"></i>
                            </div>
                            <div class="pt-0.5 min-w-0">
                                <p class="text-[13.5px] font-medium text-dark group-hover/item:text-royal transition-colors leading-tight"><?= $item['title'] ?></p>
                                <p class="text-[11.5px] text-soft leading-snug mt-0.5"><?= $item['sub'] ?></p>
                            </div>
                        </a>
                    <?php endforeach; ?>
                </div>
            </div>

            </div><!-- /paneClip -->

            <!-- Footer bar -->
            <div id="dropdownFooter" class="hidden border-t border-zinc-100 bg-[#FAFAFA] px-10 py-4 items-center justify-between">
                <p class="font-mono text-[10px] uppercase tracking-widest text-soft">Nesvra — Build what matters</p>
                <a href="book-strategy-call" class="inline-flex items-center gap-2 text-[11px] font-semibold text-royal uppercase tracking-widest hover:text-brandOrange transition-colors">
                    Book Strategy Call <i class="ri-arrow-right-line"></i>
                </a>
            </div>

        </div><!-- /globalDropdown -->
    </nav>
</header>

<style>
    @keyframes shimmer { 100% { transform: translateX(100%); } }
</style>

<script>
document.addEventListener('DOMContentLoaded', () => {
    const nav       = document.getElementById('mainNav');
    const dropdown  = document.getElementById('globalDropdown');
    const triggers  = document.querySelectorAll('.nav-trigger');
    const logoLight = document.getElementById('logoLight');
    const logoDark  = document.getElementById('logoDark');

    const panes    = document.querySelectorAll('.dropdown-pane');
    const clip     = document.getElementById('paneClip');
    const footer   = document.getElementById('dropdownFooter');
    let activePane = null;
    let hideTimer  = null;

    // ── Scroll theme ──────────────────────────────────────────────
    const applyScrollTheme = () => {
        const authPills = document.querySelectorAll('.nav-auth-btn');
        if (window.scrollY > 60) {
            nav.classList.add('bg-white/85', 'backdrop-blur-md', 'border', 'border-zinc-200/80', 'shadow-lg');
            nav.classList.remove('text-white');
            nav.classList.add('text-dark');
            document.querySelectorAll('.nav-link').forEach(l => l.classList.add('text-dark'));
            authPills.forEach(b => {
                b.classList.remove('border-white/20', 'text-white', 'bg-white/5');
                b.classList.add('border-zinc-200', 'text-zinc-800', 'bg-zinc-100/80');
            });
            logoLight.classList.add('hidden');
            logoDark.classList.remove('hidden');
        } else {
            nav.classList.remove('bg-white/85', 'backdrop-blur-md', 'border', 'border-zinc-200/80', 'shadow-lg', 'text-dark');
            nav.classList.add('text-white');
            document.querySelectorAll('.nav-link').forEach(l => l.classList.remove('text-dark'));
            authPills.forEach(b => {
                b.classList.remove('border-zinc-200', 'text-zinc-800', 'bg-zinc-100/80');
                b.classList.add('border-white/20', 'text-white', 'bg-white/5');
            });
            logoLight.classList.remove('hidden');
            logoDark.classList.add('hidden');
        }
    };
    window.addEventListener('scroll', applyScrollTheme);
    applyScrollTheme();

    // ── Animate pane switch ───────────────────────────────────────
    const switchPane = (nextIndex) => {
        const incoming = document.querySelector(`.dropdown-pane[data-pane="${nextIndex}"]`);
        if (!incoming) return;

        const isFirst   = activePane === null;
        const goingRight = activePane !== null && nextIndex > activePane;

        // Position incoming off-screen (right or left depending on direction)
        const enterFrom = isFirst ? '0px' : (goingRight ? '40px' : '-40px');
        const exitTo    = goingRight ? '-40px' : '40px';

        // Exit current pane (if there is one)
        if (activePane !== null) {
            const outgoing = document.querySelector(`.dropdown-pane[data-pane="${activePane}"]`);
            if (outgoing) {
                outgoing.style.transform = `translateX(${exitTo})`;
                outgoing.style.opacity   = '0';
                outgoing.style.position  = 'absolute';
                outgoing.style.zIndex    = '0';
            }
        }

        // Set clip height to incoming pane's natural height
        // First make it relative to measure, then go absolute again
        incoming.style.position  = 'relative';
        incoming.style.opacity   = '0';
        incoming.style.transform = `translateX(${enterFrom})`;
        incoming.style.zIndex    = '1';

        const targetH = incoming.scrollHeight;
        clip.style.height = targetH + 'px';
        clip.style.transition = 'height 350ms cubic-bezier(0.23,1,0.32,1)';

        // Now animate in
        requestAnimationFrame(() => {
            requestAnimationFrame(() => {
                incoming.style.transition = 'transform 350ms cubic-bezier(0.23,1,0.32,1), opacity 300ms ease';
                incoming.style.transform  = 'translateX(0)';
                incoming.style.opacity    = '1';
            });
        });

        activePane = nextIndex;
    };

    // ── Open / close ──────────────────────────────────────────────
    const openDropdown = (paneIndex) => {
        clearTimeout(hideTimer);

        const isNew = activePane !== paneIndex;
        if (isNew) switchPane(paneIndex);

        // Show footer
        footer.classList.remove('hidden');
        footer.classList.add('flex');

        dropdown.classList.remove('opacity-0', 'invisible', 'translate-y-3');
        dropdown.classList.add('opacity-100', 'visible', 'translate-y-0');
    };

    const closeDropdown = () => {
        hideTimer = setTimeout(() => {
            dropdown.classList.add('opacity-0', 'invisible', 'translate-y-3');
            dropdown.classList.remove('opacity-100', 'visible', 'translate-y-0');

            // After fade-out finishes, reset state
            setTimeout(() => {
                panes.forEach(p => {
                    p.style.opacity   = '0';
                    p.style.transform = 'translateX(40px)';
                    p.style.position  = 'absolute';
                    p.style.zIndex    = '0';
                });
                clip.style.height = '0';
                footer.classList.add('hidden');
                footer.classList.remove('flex');
                activePane = null;
            }, 400);
        }, 150);
    };

    triggers.forEach(t => t.addEventListener('mouseenter', () => openDropdown(parseInt(t.dataset.pane))));
    document.querySelector('header').addEventListener('mouseleave', closeDropdown);
    dropdown.addEventListener('mouseenter', () => clearTimeout(hideTimer));
    dropdown.addEventListener('mouseleave', closeDropdown);
});
</script>


<!-- ════════════════════════════════════════════════════════════════ -->
<!--  MOBILE NAVBAR                                                   -->
<!-- ════════════════════════════════════════════════════════════════ -->
<nav id="mobileHeader"
    class="lg:hidden fixed top-0 left-0 w-full z-[110] px-5 py-4 flex items-center justify-between transition-all duration-400 text-white">

    <a href="home" class="relative h-8 w-28 shrink-0">
        <img id="mobileLogoLight" src="Asset/logo-colored.png" alt="Nesvra" class="absolute inset-0 h-full w-auto object-contain transition-opacity duration-300 opacity-100">
        <img id="mobileLogoDark"  src="Asset/logo.png"         alt="Nesvra" class="absolute inset-0 h-full w-auto object-contain transition-opacity duration-300 opacity-0">
    </a>

    <button id="menuToggle" aria-label="Toggle menu"
        class="w-10 h-10 flex flex-col items-center justify-center gap-[5px] relative z-[120] shrink-0">
        <span id="bar1" class="block w-6 h-[1.5px] bg-current rounded-full transition-all duration-300 origin-center"></span>
        <span id="bar2" class="block w-4 h-[1.5px] bg-current rounded-full transition-all duration-300 origin-center self-end"></span>
        <span id="bar3" class="block w-6 h-[1.5px] bg-current rounded-full transition-all duration-300 origin-center"></span>
    </button>
</nav>

<!-- Mobile Drawer -->
<div id="mobileMenu"
    class="fixed inset-0 bg-white z-[105] translate-x-full transition-transform duration-500 ease-[cubic-bezier(0.23,1,0.32,1)] flex flex-col overflow-y-auto overscroll-contain">

    <div class="flex flex-col px-5 pt-24 pb-4 gap-0 flex-1">

        <a href="about" class="flex items-center justify-between py-4 border-b border-zinc-100 text-[16px] font-medium tracking-tight text-dark hover:text-royal transition-colors">
            About <i class="ri-arrow-right-line text-zinc-300"></i>
        </a>

        <?php
        $mobileAccordions = [
            ['label' => 'Solutions',    'sub' => 'How Nesvra builds for you',           'items' => $solutions],
            ['label' => 'Fintech',      'sub' => "Nesvra's financial product suite",    'items' => $fintech],
            ['label' => 'Systems',      'sub' => 'Enterprise-grade business systems',   'items' => $systems],
            ['label' => 'Industries',   'sub' => 'Nesvra built for your sector',        'items' => $industries],
            ['label' => 'Case Studies', 'sub' => 'Real outcomes, real businesses',      'items' => $casestudies],
            ['label' => 'Compare',      'sub' => 'Why Nesvra wins every comparison',    'items' => $compare],
        ];
        foreach ($mobileAccordions as $acc):
        ?>
            <div class="border-b border-zinc-100">
                <button class="accordion-trigger flex items-center justify-between w-full py-4 text-left group">
                    <div>
                        <p class="text-[16px] font-medium tracking-tight text-dark"><?= $acc['label'] ?></p>
                        <p class="font-mono text-[9.5px] uppercase tracking-widest text-soft mt-0.5"><?= $acc['sub'] ?></p>
                    </div>
                    <div class="acc-icon-wrap w-7 h-7 rounded-full border border-zinc-200 flex items-center justify-center shrink-0 ml-3 transition-all duration-300">
                        <i class="ri-add-line text-soft text-sm transition-all duration-300"></i>
                    </div>
                </button>
                <div class="accordion-content hidden flex-col gap-0.5 pb-3">
                    <?php foreach ($acc['items'] as $item): ?>
                        <a href="<?= $item['url'] ?>"
                            class="flex items-center gap-3.5 px-2 py-3 rounded-[14px] hover:bg-[#F8F9FA] transition-all duration-200 group">
                            <div class="w-9 h-9 flex items-center justify-center bg-[#F8F9FA] rounded-xl group-hover:bg-royal transition-all duration-300 shrink-0">
                                <i class="<?= $item['icon'] ?> text-soft group-hover:text-white text-sm transition-colors"></i>
                            </div>
                            <div class="flex flex-col min-w-0 flex-1">
                                <span class="text-[13.5px] font-semibold text-dark tracking-tight leading-tight"><?= $item['title'] ?></span>
                                <span class="text-[11px] text-soft mt-0.5 leading-snug"><?= $item['sub'] ?></span>
                            </div>
                            <i class="ri-arrow-right-line text-zinc-200 text-sm shrink-0"></i>
                        </a>
                    <?php endforeach; ?>
                </div>
            </div>
        <?php endforeach; ?>

        <a href="blog" class="flex items-center justify-between py-4 border-b border-zinc-100 text-[16px] font-medium tracking-tight text-dark hover:text-royal transition-colors">
            Blog <i class="ri-arrow-right-line text-zinc-300"></i>
        </a>
        <a href="contact" class="flex items-center justify-between py-4 border-b border-zinc-100 text-[16px] font-medium tracking-tight text-dark hover:text-royal transition-colors">
            Contact <i class="ri-arrow-right-line text-zinc-300"></i>
        </a>
        <a href="auth" class="flex items-center justify-between py-4 border-b border-zinc-100 text-[16px] font-medium tracking-tight text-dark hover:text-royal transition-colors">
            <span class="flex items-center gap-2">
                <i class="ri-user-line text-brandOrange"></i>
                <?= $isUserLoggedIn ? 'Client Portal ('.htmlspecialchars(explode(' ', $currentUser['fullname'] ?? 'Account')[0]).')' : 'Sign In' ?>
            </span>
            <i class="ri-arrow-right-line text-zinc-300"></i>
        </a>

    </div>

    <!-- Sticky bottom CTA -->
    <div class="sticky bottom-0 px-5 pb-8 pt-5 bg-white border-t border-zinc-100 flex flex-col gap-2.5">
        <?php if ($isProductPage): ?>
            <a href="get-demo?product=<?= urlencode($activeProductSlug) ?>"
                class="w-full py-3.5 bg-brandOrange text-white rounded-full font-semibold text-sm tracking-tight text-center transition-colors duration-300 hover:bg-royal shadow-[0_8px_24px_-4px_rgba(255,138,0,0.35)] flex items-center justify-center gap-1.5">
                <i class="ri-play-circle-line text-lg"></i> Request Live Demo
            </a>
            <a href="book-strategy-call"
                class="w-full py-3 border border-royal/20 text-royal rounded-full font-semibold text-sm tracking-tight text-center hover:bg-royal hover:text-white transition-all flex items-center justify-center gap-1.5">
                <i class="ri-calendar-line text-brandOrange"></i> Talk to Strategy Team
            </a>
        <?php elseif ($isTechTeamPage): ?>
            <a href="#pricing"
                class="w-full py-3.5 bg-brandOrange text-white rounded-full font-semibold text-sm tracking-tight text-center transition-colors duration-300 hover:bg-royal shadow-[0_8px_24px_-4px_rgba(255,138,0,0.35)] flex items-center justify-center gap-1.5">
                See Plans & Pricing →
            </a>
            <a href="book-strategy-call"
                class="w-full py-3 border border-royal/20 text-royal rounded-full font-semibold text-sm tracking-tight text-center hover:bg-royal hover:text-white transition-all flex items-center justify-center gap-1.5">
                <i class="ri-calendar-line text-brandOrange"></i> Book Strategy Call
            </a>
        <?php else: ?>
            <a href="book-strategy-call"
                class="w-full py-3.5 bg-brandOrange text-white rounded-full font-semibold text-sm tracking-tight text-center transition-colors duration-300 hover:bg-royal shadow-[0_8px_24px_-4px_rgba(255,138,0,0.35)] flex items-center justify-center gap-1.5">
                Book Strategy Call <i class="ri-arrow-right-up-line"></i>
            </a>
            <a href="get-demo"
                class="w-full py-3 border border-royal/20 text-royal rounded-full font-semibold text-sm tracking-tight text-center hover:bg-royal hover:text-white transition-all flex items-center justify-center gap-1.5">
                <i class="ri-play-circle-line text-brandOrange"></i> Explore Product Demos
            </a>
        <?php endif; ?>
    </div>

</div>

<script>
document.addEventListener('DOMContentLoaded', () => {
    const mobileHeader    = document.getElementById('mobileHeader');
    const mobileMenu      = document.getElementById('mobileMenu');
    const menuToggle      = document.getElementById('menuToggle');
    const mobileLogoLight = document.getElementById('mobileLogoLight');
    const mobileLogoDark  = document.getElementById('mobileLogoDark');
    const bar1 = document.getElementById('bar1');
    const bar2 = document.getElementById('bar2');
    const bar3 = document.getElementById('bar3');
    let menuOpen = false;

    const applyMobileTheme = () => {
        if (menuOpen) return;
        if (window.scrollY > 50) {
            mobileHeader.classList.add('bg-white/90', 'backdrop-blur-md', 'border-b', 'border-zinc-100', 'shadow-sm');
            mobileHeader.classList.remove('text-white');
            mobileHeader.classList.add('text-dark');
            mobileLogoLight.style.opacity = '0';
            mobileLogoDark.style.opacity  = '1';
        } else {
            mobileHeader.classList.remove('bg-white/90', 'backdrop-blur-md', 'border-b', 'border-zinc-100', 'shadow-sm', 'text-dark');
            mobileHeader.classList.add('text-white');
            mobileLogoLight.style.opacity = '1';
            mobileLogoDark.style.opacity  = '0';
        }
    };
    window.addEventListener('scroll', applyMobileTheme);
    applyMobileTheme();

    menuToggle.addEventListener('click', () => {
        menuOpen = !menuOpen;
        if (menuOpen) {
            mobileMenu.classList.replace('translate-x-full', 'translate-x-0');
            document.body.style.overflow = 'hidden';
            mobileHeader.classList.remove('text-white');
            mobileHeader.classList.add('text-dark');
            mobileLogoLight.style.opacity = '0';
            mobileLogoDark.style.opacity  = '1';
            bar1.classList.add('rotate-45', 'translate-y-[7px]');
            bar2.classList.add('opacity-0', 'scale-x-0');
            bar3.classList.add('-rotate-45', '-translate-y-[7px]');
        } else {
            mobileMenu.classList.replace('translate-x-0', 'translate-x-full');
            document.body.style.overflow = '';
            bar1.classList.remove('rotate-45', 'translate-y-[7px]');
            bar2.classList.remove('opacity-0', 'scale-x-0');
            bar3.classList.remove('-rotate-45', '-translate-y-[7px]');
            setTimeout(applyMobileTheme, 10);
        }
    });

    // Accordion — one open at a time
    document.querySelectorAll('.accordion-trigger').forEach(trigger => {
        trigger.addEventListener('click', () => {
            const content  = trigger.nextElementSibling;
            const iconWrap = trigger.querySelector('.acc-icon-wrap');
            const icon     = trigger.querySelector('i');
            const isOpen   = !content.classList.contains('hidden');

            // Close all
            document.querySelectorAll('.accordion-content').forEach(c => {
                c.classList.add('hidden');
                c.classList.remove('flex');
            });
            document.querySelectorAll('.acc-icon-wrap').forEach(w => {
                w.classList.remove('bg-royal', 'border-royal');
                w.classList.add('border-zinc-200');
            });
            document.querySelectorAll('.accordion-trigger i').forEach(i => {
                i.classList.remove('rotate-45', 'text-white');
                i.classList.add('text-soft');
            });

            // Open clicked (if was closed)
            if (!isOpen) {
                content.classList.remove('hidden');
                content.classList.add('flex');
                iconWrap.classList.add('bg-royal', 'border-royal');
                iconWrap.classList.remove('border-zinc-200');
                icon.classList.add('rotate-45', 'text-white');
                icon.classList.remove('text-soft');
            }
        });
    });
});
</script>