@props(['title', 'subtitle', 'theme' => 'businessportal24'])

<section
    class="hero-gradient relative overflow-hidden text-white py-6 animate-fade-in border-b border-zinc-100 dark:border-zinc-900">
    <div class="container mx-auto px-4">
        <div class="mx-auto">
            <h1
                class="hero-title text-2xl md:text-3xl lg:text-4xl text-white font-bold mb-4 animate-fade-in-up text-center">
                {!! $title !!}
            </h1>
            <p class="hero-subtitle text-base md:text-lg text-white animate-fade-in-up animation-delay-200 text-center">
                {{ $subtitle }}
            </p>
        </div>
    </div>

    @if ($theme === 'businessportal24')
        <!-- Decorative Pattern -->
        <div class="absolute top-0 right-0 opacity-10">
            <svg width="404" height="384" fill="none" viewBox="0 0 404 384">
                <defs>
                    <pattern id="pattern-hero" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
                        <rect x="0" y="0" width="4" height="4" fill="currentColor" />
                    </pattern>
                </defs>
                <rect width="404" height="384" fill="url(#pattern-hero)" />
            </svg>
        </div>
    @endif
</section>