<header class="fixed top-0 inset-x-0 z-50 px-4 pt-4">
    <nav class="glass max-w-6xl mx-auto rounded-2xl px-5 py-3 flex items-center justify-between shadow-lg shadow-black/30">
        <!-- Logo -->
        <a href="/" class="flex items-center gap-2.5">
            <div class="w-8 h-8 rounded-xl bg-linear-to-br from-emerald-500 to-emerald-600 flex items-center justify-center shadow-md shadow-emerald-300/40">
                <svg style="width:18px;height:18px" fill="none" stroke="white" stroke-width="2.5" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
                </svg>
            </div>
            <span class="font-bold text-white tracking-tight text-lg">Credify <span class="gradient-text font-extrabold">GO!</span></span>
        </a>

        <!-- Links desktop -->
        <div class="hidden md:flex items-center gap-1">
            <a href="/#beneficios" class="px-3.5 py-2 text-sm text-slate-300 hover:text-white hover:bg-white/10 rounded-xl transition-all">Beneficios</a>
            <a href="/#para-quien" class="px-3.5 py-2 text-sm text-slate-300 hover:text-white hover:bg-white/10 rounded-xl transition-all">Para quién</a>
            <a href="/#precios" class="px-3.5 py-2 text-sm text-slate-300 hover:text-white hover:bg-white/10 rounded-xl transition-all">Precios</a>
            <a href="/#faq" class="px-3.5 py-2 text-sm text-slate-300 hover:text-white hover:bg-white/10 rounded-xl transition-all">Preguntas</a>
            <div class="relative dropdown" data-dropdown>
                <button type="button" data-dropdown-toggle aria-haspopup="true" aria-expanded="false" class="inline-flex items-center gap-1.5 px-3.5 py-2 text-sm text-slate-300 hover:text-white hover:bg-white/10 rounded-xl transition-all cursor-pointer">
                    Recursos
                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/></svg>
                </button>
                <div class="dropdown-menu absolute left-0 mt-2 w-72 rounded-2xl bg-slate-950/95 backdrop-blur border border-white/10 shadow-xl p-2">
                    <a href="/software-para-prestamos" class="block px-3.5 py-2 text-sm rounded-xl text-slate-300 hover:text-white hover:bg-white/10 transition-all">Software para préstamos</a>
                    <a href="/software-de-cobranza" class="block px-3.5 py-2 text-sm rounded-xl text-slate-300 hover:text-white hover:bg-white/10 transition-all">Software de cobranza</a>
                    <a href="/gestion-de-cartera" class="block px-3.5 py-2 text-sm rounded-xl text-slate-300 hover:text-white hover:bg-white/10 transition-all">Gestión de cartera</a>
                    <a href="/como-administrar-negocio-de-prestamos" class="block px-3.5 py-2 text-sm rounded-xl text-slate-300 hover:text-white hover:bg-white/10 transition-all">Cómo administrar un negocio de préstamos</a>
                    <a href="/control-de-prestamos-excel" class="block px-3.5 py-2 text-sm rounded-xl text-slate-300 hover:text-white hover:bg-white/10 transition-all">Del Excel a una app</a>
                </div>
            </div>
        </div>

        <!-- CTAs -->
        <div class="flex items-center gap-2">
            <a href="/admin" class="hidden sm:block px-4 py-2 text-sm font-medium text-slate-300 hover:text-white hover:bg-white/10 rounded-xl transition-all">
                Entrar al sistema
            </a>
            <a href="{{ route('demo.request') }}"
               class="flex items-center gap-2 px-4 py-2 text-sm font-bold text-white bg-linear-to-r from-emerald-500 to-emerald-600 rounded-xl shadow-md shadow-emerald-300/30 hover:shadow-emerald-300/50 hover:brightness-110 transition-all">
                Probar demo
            </a>
        </div>
    </nav>
</header>
