@props([
    'themeClasses' => [],
])

<section id="hero"
    class="relative pt-24 pb-32 md:pt-40 md:pb-56 overflow-hidden text-center {{ $themeClasses['sectionBg'] ?? 'bg-gray-900' }}">
    <!-- Subtle background element - dark blue radial gradient - hidden in light mode -->
    <div id="hero-background"
        class="absolute inset-0 z-0 opacity-10 {{ isset($themeClasses['isLight']) && $themeClasses['isLight'] ? 'hidden' : '' }}">
    </div>
    <div class="relative max-w-5xl mx-auto px-6 lg:px-8 z-10 hero-animate-onload">
        <!-- Brand Logo -->
        <div class="mb-10">
            <span class="text-4xl font-extrabold tracking-tight text-orange-400">
                OA<span class="{{ $themeClasses['textNormal'] ?? 'text-white' }}">MediaKraft</span>
            </span>
        </div>

        <h1 class="text-6xl md:text-8xl font-extrabold leading-none tracking-tighter mb-6">
            <span class="block {{ $themeClasses['textNormal'] ?? 'text-white' }}">The Art of Digital</span>
            <!-- Text Gradient - Orange to Blue -->
            <span
                class="block text-transparent bg-clip-text bg-gradient-to-r from-orange-500 to-blue-500 mt-2">MediaKraft.</span>
        </h1>
        <p class="text-xl md:text-2xl {{ $themeClasses['textSecondary'] ?? 'text-gray-400' }} mb-12 max-w-3xl mx-auto">
            Where technical mastery meets creative ambition. We architect visuals that define brands and captivate
            audiences.
        </p>
        <button onclick="scrollToSection('contact')"
            class="inline-flex items-center space-x-2 bg-gradient-to-r from-orange-600 to-blue-600 hover:from-orange-700 hover:to-blue-700 text-white font-bold py-4 px-10 rounded-full shadow-2xl shadow-orange-500/50 transform hover:scale-[1.03] transition duration-500 ease-in-out text-lg">
            @include('partials.icon', ['name' => 'Code', 'size' => 'w-5 h-5'])
            <span>Begin Your Project</span>
        </button>
    </div>
</section>

@push('scripts')
    <script>
        function scrollToSection(id) {
            const element = document.getElementById(id);
            if (element) {
                element.scrollIntoView({
                    behavior: 'smooth'
                });
            }
        }
    </script>
@endpush
