@php 
$heroInfo = $sectionData->where('section', 'hero')->first();
$heroInfo = (!empty($heroInfo->content) ? json_decode($heroInfo->content) : '');
@endphp

<section class="relative py-20 md:py-20 lg:pb-40 z-[1] overflow-hidden bg-[#0A2647]">
    <div class="absolute inset-0 z-[-1]">
        <svg class="absolute bottom-0 w-full" viewBox="0 0 1440 320" xmlns="http://www.w3.org/2000/svg">
            <path fill="#fff" fill-opacity="0.1" d="M0,160L48,165.3C96,171,192,181,288,170.7C384,160,480,128,576,133.3C672,139,768,181,864,192C960,203,1056,181,1152,149.3C1248,117,1344,75,1392,53.3L1440,32L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path>
        </svg>
    </div>

    <div class="container mx-auto px-4">
        <div class="grid lg:grid-cols-2 items-center gap-8 text-white">
            <div class="space-y-5">
                <p data-aos="fade-up" data-aos-duration="1000" class="text-base md:text-lg text-white uppercase tracking-wider font-semibold">
                    {!! !empty($heroInfo->subtitle) ? $heroInfo->subtitle : 'Performance Driven Link Building Agency' !!}
                </p>

                <h1 data-aos="fade-up" data-aos-duration="1000" class="font-extrabold text-3xl sm:text-4xl lg:text-5xl xl:text-6xl max-w-lg leading-tight">
                    {!! !empty($heroInfo->title) ? $heroInfo->title : 'Performance Driven Link Building Agency' !!}
                </h1>

                @if (!empty($heroInfo->description))
                <p data-aos="fade-up" data-aos-duration="1000" class="text-sm md:text-base max-w-lg">
                    {!! $heroInfo->description !!}
                </p>
                @endif

                <div data-aos="fade-up" data-aos-duration="1000" class="inline-block relative pt-4">
                    @if (!empty($heroInfo->button_link))
                    <a href="{{ $heroInfo->button_link }}" class="px-8 py-3 rounded-full bg-cyan-500 text-white hover:bg-cyan-600 transition-all duration-300 transform hover:scale-105 font-semibold flex items-center gap-2">
                        {{ !empty($heroInfo->button_text) ? $heroInfo->button_text : 'GET STARTED' }}
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" />
                        </svg>
                    </a>
                    @endif
                </div>
            </div>

            <div class="relative z-[1] lg:text-right">
                @if (!empty($heroInfo->image))
                <img src="{{ asset($heroInfo->image) }}" alt="{{!empty($heroInfo->title) ? $heroInfo->title : ''}}" class="max-w-full h-auto mx-auto lg:mx-0" style="max-height: 450px; width: auto;">
                @endif

                <!-- Modern Clock -->
                <div class="absolute top-4 right-4 p-4 bg-white/10 backdrop-blur-lg rounded-2xl border border-white/20 text-white text-center font-mono shadow-lg transition-transform hover:scale-105">
                    <div id="current-time" class="text-2xl md:text-3xl font-bold tracking-wider"></div>
                    <div id="current-date" class="text-xs md:text-sm opacity-80 mt-1"></div>
                </div>
            </div>
        </div>
    </div>

    <script>
        function updateClock() {
            const now = new Date();
            
            // Format time
            const hours = String(now.getHours()).padStart(2, '0');
            const minutes = String(now.getMinutes()).padStart(2, '0');
            const seconds = String(now.getSeconds()).padStart(2, '0');
            document.getElementById('current-time').textContent = `${hours}:${minutes}:${seconds}`;

            // Format date
            const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
            const formattedDate = now.toLocaleDateString('en-US', options);
            document.getElementById('current-date').textContent = formattedDate;
        }

        setInterval(updateClock, 1000);
        updateClock(); // Initial call
    </script>
</section>