@php
    $routes = [
        // ['name' => 'Home', 'route' => 'home'],
        // ['name' => 'Quem somos', 'route' => 'quem-somos'],
        // ['name' => 'Venezianas industriais', 'route' => 'venezianas-industriais'],
        // ['name' => 'Telhas de fibra', 'route' => 'telhas-de-fibra'],
        // ['name' => 'Obras', 'route' => 'fotos'],
        // ['name' => 'Blog', 'route' => 'blog.index'],
        // ['name' => 'Fale conosco', 'route' => 'contato'],
    ];

    $currentRoute = Route::currentRouteName();
@endphp

@if(isset($mobile) && $mobile)
    {{-- Mobile Menu Items --}}
    <div class="space-y-2 px-2">
        @foreach($routes as $item)
            @if(isset($item['submenu']))
                {{-- Item com submenu --}}
                <div x-data="{ open: false }" class="relative">
                    <button
                        @click="open = !open"
                        class="flex items-center justify-between w-full px-3 py-2 rounded-md text-base font-medium uppercase transition-colors duration-200 {{ $currentRoute === $item['route'] ? 'text-primary bg-primary/10' : 'text-gray-700 hover:bg-blue-50 hover:text-secondary' }}"
                    >
                        {{ $item['name'] }}
                        <svg class="w-4 h-4 transition-transform duration-200" :class="{ 'rotate-180': open }" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                        </svg>
                    </button>

                    <div x-show="open"
                         x-transition:enter="transition ease-out duration-200"
                         x-transition:enter-start="opacity-0 transform scale-95"
                         x-transition:enter-end="opacity-100 transform scale-100"
                         x-transition:leave="transition ease-in duration-150"
                         x-transition:leave-start="opacity-100 transform scale-100"
                         x-transition:leave-end="opacity-0 transform scale-95"
                         class="ml-4 mt-2 space-y-1">
                        @foreach($item['submenu'] as $subitem)
                            <a href="{{ route($subitem['route'], $subitem['params']) }}"
                               class="block px-3 py-2 rounded-md text-sm font-medium uppercase transition-colors duration-200 text-gray-600 hover:bg-blue-50 hover:text-secondary">
                                {{ $subitem['name'] }}
                            </a>
                        @endforeach
                    </div>
                </div>
            @else
                {{-- Item simples --}}
                <a href="{{ route($item['route']) }}"
                   class="block px-3 py-2 rounded-md text-base font-medium uppercase transition-colors duration-200 {{ $currentRoute === $item['route'] ? 'text-primary bg-primary/10' : 'text-gray-700 hover:bg-blue-50 hover:text-secondary' }}">
                    {{ $item['name'] }}
                </a>
            @endif
        @endforeach
    </div>
@else
    {{-- Desktop Menu Items --}}
    @foreach($routes as $item)
        @if(isset($item['submenu']))
            {{-- Item com submenu --}}
            <div x-data="{ open: false }" class="relative group">
                <button
                    @click="open = !open"
                    @mouseenter="open = true"
                    @mouseleave="open = false"
                    class="flex items-center text-base font-medium uppercase transition-colors duration-200 rounded-md px-3 py-2 {{ $currentRoute === $item['route'] ? 'text-primary bg-primary/10' : 'text-gray-700 hover:bg-primary hover:text-white' }}"
                >
                    {{ $item['name'] }}
                    <svg class="w-4 h-4 ml-1 transition-transform duration-200" :class="{ 'rotate-180': open }" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                    </svg>
                </button>

                <div x-show="open"
                     @mouseenter="open = true"
                     @mouseleave="open = false"
                     x-transition:enter="transition ease-out duration-200"
                     x-transition:enter-start="opacity-0 transform scale-95"
                     x-transition:enter-end="opacity-100 transform scale-100"
                     x-transition:leave="transition ease-in duration-150"
                     x-transition:leave-start="opacity-100 transform scale-100"
                     x-transition:leave-end="opacity-0 transform scale-95"
                     class="absolute left-0 mt-2 w-56 bg-gray-100 rounded-md shadow-sm z-50">
                    <div class="py-1">
                        @foreach($item['submenu'] as $subitem)
                            <a href="{{ route($subitem['route'], $subitem['params']) }}"
                               class="block px-4 py-2 text-base uppercase text-gray-700 hover:bg-secondary rounded-md hover:text-white transition-colors duration-200">
                                {{ $subitem['name'] }}
                            </a>
                        @endforeach
                    </div>
                </div>
            </div>
        @else
            {{-- Item simples --}}
            <a href="{{ route($item['route']) }}"
               class="text-base font-medium uppercase transition-colors duration-200 rounded-md px-3 py-2 {{ $currentRoute === $item['route'] ? 'text-primary bg-primary/10' : 'text-gray-700 hover:bg-primary hover:text-white' }}">
                {{ $item['name'] }}
            </a>
        @endif
    @endforeach
@endif

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Smooth scroll para links com âncora
    document.querySelectorAll('.smooth-scroll').forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault();

            const targetId = this.getAttribute('href');
            const targetElement = document.querySelector(targetId);

            if (targetElement) {
                // Offset de 120px para header fixo (exceto para home)
                const offset = targetId === '#home' ? 0 : 120;

                const elementPosition = targetElement.offsetTop;
                const offsetPosition = elementPosition - offset;

                window.scrollTo({
                    top: offsetPosition,
                    behavior: 'smooth'
                });
            }
        });
    });

    // Função para verificar qual seção está visível
    function checkActiveSection() {
        const sections = document.querySelectorAll('[id]');
        const menuItems = document.querySelectorAll('.menu-item');

        let activeSection = '';

        // Verifica se estamos no topo da página (home)
        if (window.scrollY < 50) {
            activeSection = 'home';
        } else {
            // Verifica outras seções
            sections.forEach(section => {
                const rect = section.getBoundingClientRect();
                const sectionId = section.getAttribute('id');

                // Pula o home para não conflitar
                if (sectionId === 'home') return;

                // Verifica se a seção está visível na tela
                if (rect.top <= 200 && rect.bottom >= 200) {
                    activeSection = sectionId;
                }
            });
        }

        // Remove a classe ativa de todos os itens
        menuItems.forEach(item => {
            const section = item.getAttribute('data-section');
            item.classList.remove('text-primary', 'bg-primary', 'text-white', 'bg-primary');

            // Adiciona a classe ativa para o item correspondente
            if (section === activeSection) {
                if (item.closest('.xl\\:flex')) {
                    // Desktop: texto vermelho
                    item.classList.add('text-primary');
                } else {
                    // Mobile: fundo vermelho claro
                    item.classList.add('text-primary', 'bg-primary');
                }
            }
        });
    }

    // Verifica a seção ativa no scroll
    window.addEventListener('scroll', checkActiveSection);

    // Verifica a seção ativa no carregamento da página
    checkActiveSection();
});
</script>