@php
    $services = [
        [
            'id' => '001',
            'title' => 'Strategic Advisory',
            'icon' => '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="size-4 mr-1" viewBox="0 0 256 256">
                    <path d="M214.86,180.12a8,8,0,0,1-11,2.74L136,142.13V216a8,8,0,0,1-16,0V142.13L52.12,182.86a8,8,0,1,1-8.23-13.72L112.45,128,43.89,86.86a8,8,0,1,1,8.23-13.72L120,113.87V40a8,8,0,0,1,16,0v73.87l67.88-40.73a8,8,0,1,1,8.23,13.72L143.55,128l68.56,41.14A8,8,0,0,1,214.86,180.12Z"></path>
                  </svg>',
        ],
        [
            'id' => '002',
            'title' => 'Ethical Leadership Development',
            'icon' => '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="size-4 mr-1" viewBox="0 0 256 256">
                    <path d="M214.86,180.12a8,8,0,0,1-11,2.74L136,142.13V216a8,8,0,0,1-16,0V142.13L52.12,182.86a8,8,0,1,1-8.23-13.72L112.45,128,43.89,86.86a8,8,0,1,1,8.23-13.72L120,113.87V40a8,8,0,0,1,16,0v73.87l67.88-40.73a8,8,0,1,1,8.23,13.72L143.55,128l68.56,41.14A8,8,0,0,1,214.86,180.12Z"></path>
                  </svg>',
        ],
        [
            'id' => '003',
            'title' => 'Governance and Risk Excellence',
            'icon' => '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="size-4 mr-1" viewBox="0 0 256 256">
                    <path d="M214.86,180.12a8,8,0,0,1-11,2.74L136,142.13V216a8,8,0,0,1-16,0V142.13L52.12,182.86a8,8,0,1,1-8.23-13.72L112.45,128,43.89,86.86a8,8,0,1,1,8.23-13.72L120,113.87V40a8,8,0,0,1,16,0v73.87l67.88-40.73a8,8,0,1,1,8.23,13.72L143.55,128l68.56,41.14A8,8,0,0,1,214.86,180.12Z"></path>
                  </svg>',
        ],
    ];

@endphp
<section class="relative text-white max-w-[80rem] mx-auto md:rounded-3xl overflow-hidden">
    <!-- Background image with overlay -->
    <div class="absolute inset-0 z-0 bg-center  overflow-hidden">
        <img src="/hero_1.webp" class="w-full h-full top-0 left-0 absolute object-cover object-center opacity-60" alt="cover hero section"
            width="1500" height="1000">
        <span class="absolute inset-0 bg-primary-950/40"></span>
        <span
            class="absolute w-1/2 h-full left-0 top-0  bg-gradient-to-tl from-primary-950/20 to-transparent to-50%  rounded-full"></span>
    </div>

    <div class="relative z-10 sm:max-w-6xl sm:mx-auto px-6 lg:px-4  py-16 sm:py-20 lg:py-24">
        <div class="flex flex-col justify-center max-w-5xl">
            <h1 class="text-3xl min-[390px]:text-4xl sm:text-5xl md:text-6xl font-bold sm:text-balance leading-tight mb-6">
                Empowering 
                <span class="word-animation">
                    <span class="word-animation-item visible">Leadership</span>
                    <span class="word-animation-item">Governance</span>
                    <span class="word-animation-item">Management</span>
                </span> 
                for Sustainable Resilience.
            </h1>
            <p class="text-sm min-[390px]:text-base sm:text-lg mb-8 max-w-xl md:text-balance">
                We help organisations transform governance, leadership, and risk management into strategic assets for
                responsible growth and sustainable success.
            </p>
            <div class="mb-8 flex flex-wrap gap-3">
                <a href="/schedule"
                    class="inline-flex items-center btn btn-md md:btn-lg pr-3.5 rounded-xl btn-solid btn-solid-primary transition-colors ">
                    Schedule a free consultant
                    <span class="ml-3">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
                            fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                            stroke-linejoin="round" class="size-3.5">
                            <path d="M5 12h14"></path>
                            <path d="m12 5 7 7-7 7"></path>
                        </svg>
                    </span>
                </a>
                <a href="/services"
                    class="inline-flex items-center bg-white/80 text-black btn btn-md md:btn-lg pr-3.5 rounded-xl hover:bg-gray-100 transition-colors">
                    Discover Our Services
                </a>
            </div>
        </div>
        <div
            class="relative z-10 flex mt-8 sm:mt-12 md:mt-20 flex-col md:flex-row md:items-end md:justify-between gap-10 mx-auto max-w-7xl">
            <div class="flex flex-wrap gap-3">
                @foreach ($services as $service)
                    <span wire:key="servih-{{ $service['id'] }}"
                        class="inline-flex items-center px-2 sm:px-4 py-1 sm:py-2 rounded-xl bg-white/10 border border-white/20 backdrop-blur-sm text-sm">
                        {!! $service['icon'] !!}
                        {{ $service['title'] }}
                    </span>
                @endforeach
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            initWordAnimation();
        });

        document.addEventListener('livewire:navigated', function() {
            initWordAnimation();
        });

        function initWordAnimation() {
            const words = document.querySelectorAll('.word-animation-item');
            if (!words.length) return;
            
            let currentIndex = 0;
            function rotateWords() {
                words[currentIndex].classList.remove('visible');
                currentIndex = (currentIndex + 1) % words.length;   
                words[currentIndex].classList.add('visible');
            }
            
            // Clear any existing intervals to prevent multiple animations
            if (window.wordAnimationInterval) {
                clearInterval(window.wordAnimationInterval);
            }
            
            // Store the interval ID globally
            window.wordAnimationInterval = setInterval(rotateWords, 3000);
        }
    </script>
</section>