---
import { link } from "fs";

const {
    text
    } = Astro.props;

const categories = [
    {
        name: 'Conócenos',
        link: '#',
        subcategories: [{name: 'Quiénes somos', link: '#'}, {name: 'Nuestra cultura', link: '#'}, {name: 'Equipo', link: '#'}],
    },
    {
        name: 'GenIA-L',
        link: '#',
        subcategories: [],
    },
    {
        name: 'Ecosistema de productos',
        link: '#',
        subcategories: [{name: 'Descubrimiento', link: '#'}, {name: 'Implementación', link: '#'}],
    },
    {
        name: 'Soluciones para profesionales',
        link: '#',
        subcategories: [{name: 'Descubrimiento', link: '#'}, {name: 'Implementación', link: '#'}],
    },
    {
        name: 'Formación',
        link: '#',
        subcategories: [],
    },
    {
        name: 'Actualidad',
        link: '#',
        subcategories: [{name: 'Descubrimiento', link: '#'}, {name: 'Implementación', link: '#'}],
    },
    ];
---

<header class="sticky top-0 w-full bg-white z-50 flex flex-col justify-center align-center items-center p-0">
    <nav class="px-4 py-2 w-full border-b-1 border-gray-400">
        
        <div class="w-1/2 flex items-center justify-between py-2 mx-auto">
            <img src="https://assets.lefebvre.es/media/logos-2/svg/lefebvre.svg" alt="Logo" class="h-[55px]" loading="lazy" />
            
            <div class="flex items-center gap-4">
                <a href="https://lefebvre.es/tienda" class="underline flex items-center gap-1  cursor-pointer">
                    <span>
                        Tienda
                    </span>
                    <img src="https://assets.lefebvre.es/media/icons-2/svg/icon-basket.svg" class="w-5" loading="lazy"></a>
                <a href="https://espaciolefebvre.lefebvre.es/login/" class="px-4 py-3 border-1 border-black text-black hover:bg-black hover:text-white transition-all duration-300 rounded-lg font-semibold cursor-pointer">Entrar</a>
            </div>

        </div>
    </nav>
    <nav class="w-full flex items-center border-b-1 border-gray-300">
        <ul class="w-1/2 flex items-center justify-start gap-8 py-2 mx-auto">
            {categories.map(category => (
                <li class="relative group py-4">
                    <a href={category.link} class="flex items-center">
                        <span class="hover:underline">
                            {category.name}
                        </span>
                        {category.subcategories.length > 0 && (
                            <span class="ml-1 text-xs">∨</span>
                        )}
                    </a>
                    {category.subcategories.length > 0 && (
                        <ul class="absolute left-0 mt-1 bg-white border border-gray-300 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all z-10 min-w-[280px]"
                           
                        >
                            {category.subcategories.map(sub => (
                                <li class="hover:text-indigo-900 hover:font-semibold">
                                    <a href={sub.link} class="block px-4 py-3 hover:bg-gray-100">{sub.name}</a>
                                </li>
                            ))}
                        </ul>
                    )}
                </li>
            ))}
        </ul>
    </nav>
   
</header>