{{ $headline := .Get "headline" }}
{{ $sub_headline := .Get "sub_headline" }}
{{ $primary_button_text := .Get "primary_button_text" }}
{{ $primary_button_url := .Get "primary_button_url" }}
{{ $secondary_button_text := .Get "secondary_button_text" }}
{{ $secondary_button_url := .Get "secondary_button_url" }}
{{ $hero_image := .Get "hero_image" }}
{{ $background_image := .Get "background_image" }}
{{ $background_color_gradient := .Get "background_color_gradient" | default "from-gray-50 to-white" }}

<section class="relative overflow-hidden bg-gradient-to-b {{ $background_color_gradient }}">
    {{ if $background_image }}
    <div class="absolute inset-0">
        <img src="{{ $background_image | relURL }}" alt="Background" class="w-full h-full object-cover">
    </div>
    {{ end }}
    <div class="container pt-16 pb-20 md:pt-24 md:pb-28">
        <div class="grid lg:grid-cols-2 gap-12 items-center">
            <div class="space-y-8">
                <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight">
                    {{ $headline | safeHTML }}
                </h1>
                <p class="text-xl text-gray-600">
                    {{ $sub_headline | safeHTML }}
                </p>
                <div class="flex flex-col sm:flex-row gap-4">
                    {{ if and $primary_button_text $primary_button_url }}
                    <a href="{{ $primary_button_url }}" class="btn-primary text-center">
                        {{ $primary_button_text }}
                    </a>
                    {{ end }}
                    {{ if and $secondary_button_text $secondary_button_url }}
                    <a href="{{ $secondary_button_url }}" class="btn-outline text-center">
                        {{ $secondary_button_text }}
                    </a>
                    {{ end }}
                </div>
            </div>
            <div class="relative">
                {{ if $hero_image }}
                <div class="relative z-10">
                    <img src="{{ $hero_image | relURL }}" alt="Hero Image" class="rounded-xl shadow-elevation">
                </div>
                {{ end }}
                <!-- Background decoration -->
                <div class="absolute -top-20 -right-20 w-64 h-64 bg-primary-100 rounded-full filter blur-3xl opacity-50"></div>
                <div class="absolute -bottom-20 -left-20 w-64 h-64 bg-secondary-100 rounded-full filter blur-3xl opacity-50"></div>
            </div>
        </div>
    </div>
</section>