{% load static %}
<!-- TOP BANNER -->
<div id="top-announcement-banner" class="bg-white border-b-4 border-[#f5b522] py-2 relative z-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex flex-col lg:flex-row items-center justify-between gap-4 pr-10">
            <!-- Left Info (Agregado lg:flex-nowrap y ajustado gap-x-3) -->
            <div class="flex-1 flex flex-wrap lg:flex-nowrap items-center justify-center lg:justify-start gap-x-3 gap-y-1 text-[11px] sm:text-xs text-center lg:text-left leading-tight">
                <div class="flex items-center gap-1.5 text-[#044d29] font-black uppercase text-sm shrink-0">
                    <c-lbi n="rmx.flask" w="1.1rem" h="1.1rem" />
                    <span>PrecisPure</span>
                </div>
                <div class="font-bold text-zinc-600 shrink-0 hidden 2xl:block">Material de Referencia Acreditado</div>
                <div class="font-semibold text-zinc-600 shrink-0">
                    <span class="text-[#f5b522] font-black">PRODUCIDOS EN PERÚ</span>
                </div>
                <div class="flex items-center gap-2 font-bold text-emerald-700 shrink-0">
                    <span class="flex items-center gap-0.5"><c-lbi.rmx.check w="0.8rem" h="0.8rem" /> Nacional</span>
                    <span class="flex items-center gap-0.5"><c-lbi.rmx.check w="0.8rem" h="0.8rem" /> Menor tiempo</span>
                </div>
            </div>

            <!-- Middle Promos -->
            <div class="flex flex-col sm:flex-row items-center gap-2 shrink-0">
                <div class="bg-red-600 text-white flex items-center gap-2 rounded-lg px-3 py-1.5 shadow-md shadow-red-600/20">
                    <div class="flex items-baseline justify-center gap-1">
                        <span class="text-lg font-black leading-none">5%</span>
                        <span class="text-[9px] uppercase font-bold tracking-wider opacity-90">DSCTO.</span>
                    </div>
                    <div class="text-[10px] font-black text-amber-200">2 a 5 MRC</div>
                </div>
                <div class="bg-red-600 text-white flex items-center gap-2 rounded-lg px-3 py-1.5 shadow-md shadow-red-600/20">
                    <div class="flex items-baseline justify-center gap-1">
                        <span class="text-lg font-black leading-none">10%</span>
                        <span class="text-[9px] uppercase font-bold tracking-wider opacity-90">DSCTO.</span>
                    </div>
                    <div class="text-[10px] font-black text-amber-200">6 a 10 MRC</div>
                </div>
            </div>

            <!-- Right CTA -->
            <div class="shrink-0 mt-2 lg:mt-0">
                <a href="https://api.whatsapp.com/send?phone=51998636350&text=Hola%20%F0%9F%91%8B%20%2C%20vi%20su%20promoci%C3%B3n%20de%20Materiales%20de%20Referencia%20Certificados%20y%20deseo%20recibir%20una%20cotizaci%C3%B3n.%F0%9F%98%8A" target="_blank" rel="noopener noreferrer" class="inline-flex items-center justify-center gap-1.5 bg-[#f5b522] hover:bg-[#e0a21a] text-[#044d29] font-black px-4 py-2 rounded-lg shadow-md shadow-[#f5b522]/30 hover:-translate-y-0.5 transition-all text-xs uppercase tracking-wider">
                    <span>Cotizar</span>
                    <c-lbi n="rmx.arrow-right-up" w="1rem" h="1rem" />
                </a>
            </div>
        </div>
    </div>
    <button onclick="document.getElementById('top-announcement-banner').style.display = 'none';" class="absolute right-2 top-2 p-1.5 hover:bg-zinc-100 rounded-full transition-colors text-zinc-400 hover:text-zinc-700">
        <c-lbi.rmx.close w="1.25rem" h="1.25rem" />
    </button>
</div>

<header class="bg-white border-b border-zinc-100 h-20 shadow-sm text-zinc-800 sticky top-0 z-40 transition-colors">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-full flex items-center justify-between gap-6">
        <!-- Logo -->
        <a href="{% url 'core:landing' %}" class="flex items-center group decoration-0 shrink-0">
            <img src="{% static 'img/logo.png' %}" alt="Lo Justo Learning" class="h-10 sm:h-12 w-auto object-contain transition-transform duration-300 group-hover:scale-105 shrink-0" />
        </a>

        <!-- Buscador Elegante -->
        <form action="{% url 'courses:catalog' %}" method="get" class="hidden md:flex flex-1 max-w-xl mx-4">
            <div class="relative w-full group">
                <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none transition-colors group-focus-within:text-[#044d29] text-zinc-400">
                    <c-lbi.rmx.search w="1.15rem" h="1.15rem" />
                </div>
                <input type="text" name="q" value="{{ request.GET.q|default:'' }}" placeholder="¿Qué quieres aprender hoy? (Ej: ISO 17025, Incertidumbre, Calibración)" class="block w-full pl-11 pr-4 py-2.5 rounded-full border border-zinc-200 bg-zinc-50 hover:bg-zinc-100 focus:bg-white placeholder-zinc-400 focus:outline-none focus:ring-2 focus:ring-[#044d29]/20 focus:border-[#044d29] sm:text-sm transition-all shadow-sm font-medium text-zinc-800">
            </div>
        </form>

        <!-- Acciones -->
        <div class="flex items-center space-x-5 sm:space-x-8 shrink-0">
            <a href="{% url 'courses:catalog' %}" class="flex items-center space-x-2 text-[#044d29] hover:text-[#044d29]/70 font-bold uppercase text-xs tracking-widest transition-colors">
                <span>COMPRAR</span>
                <c-lbi.rmx.shopping-cart-2 w="1.25rem" h="1.25rem" />
            </a>

            <a href="{% url 'users:login' %}" class="bg-[#044d29] hover:bg-[#03361d] text-white font-bold uppercase tracking-widest text-xs px-6 py-2.5 rounded-full shadow-md shadow-[#044d29]/20 transition-all flex items-center space-x-2 hover:-translate-y-0.5">
                <span>INGRESAR</span>
                <c-lbi.rmx.arrow-right w="1.1rem" h="1.1rem" />
            </a>
        </div>
    </div>
</header>