@props([
    'title',
    'subtitle',
    'description',
    'image',
    'imageAlt' => '',
    'showCta' => true,
    'features' => [],
])

<section class="hero-gradient text-primary-foreground py-16 lg:py-24">
    <div class="container mx-auto px-4">
        <div class="grid lg:grid-cols-2 gap-12 items-center">
            <div class="animate-slide-up">
                <span class="inline-block px-4 py-1.5 rounded-full bg-secondary/20 text-secondary text-sm font-medium mb-6">
                    {{ $subtitle }}
                </span>
                <h1 class="text-3xl md:text-4xl lg:text-5xl font-heading font-bold leading-tight mb-6">
                    {{ $title }}
                </h1>
                <p class="text-primary-foreground/80 text-lg leading-relaxed mb-8 max-w-lg">
                    {{ $description }}
                </p>
                @if(count($features))
                    <ul class="space-y-3 mb-8">
                        @foreach($features as $feature)
                            <li class="flex items-center gap-3 text-primary-foreground/90">
                                <i data-lucide="check" class="w-5 h-5 text-secondary shrink-0"></i>
                                <span class="text-sm">{{ $feature }}</span>
                            </li>
                        @endforeach
                    </ul>
                @endif
                @if($showCta)
                    <div class="flex flex-wrap gap-4">
                        <a href="{{ route('frontend.contact') }}" class="btn btn-lg btn-secondary font-semibold px-8">Get Free Consultation</a>
                        <a href="{{ route('frontend.pricing') }}" class="btn btn-lg btn-outline-secondary font-semibold px-8 shadow-sm">View Pricing</a>
                    </div>
                @endif
            </div>
            <div class="animate-fade-in">
                <img src="{{ $image }}" alt="{{ $imageAlt }}" class="rounded-2xl shadow-2xl w-full object-cover" loading="lazy">
            </div>
        </div>
    </div>
</section>