@props([
    'urlImageMobile' => '/img/ai/pool-design-banner.jpg?width=412&height=235&format=webp',
    'urlImageDesktop' => '/img/ai/pool-design-banner.jpg?width=1200&height=400&format=webp',
    'content' => 'before:absolute before:bottom-0 before:left-0 before:right-0 before:top-0 before:bg-gradient-to-r before:from-[#0d74b9e6] before:from-20% before:to-transparent before:content-[\'\']',
])

@php
    // Generate a unique ID for the banner to scope the styles
    $bannerId = 'try-ai-banner-' . uniqid();
@endphp

<style>
    #{{ $bannerId }} {
        background-image: url('{{ $urlImageMobile }}');
    }

    @media (min-width: 768px) { /* Corresponds to md: breakpoint in Tailwind */
        #{{ $bannerId }} {
            background-image: url('{{ $urlImageDesktop }}');
        }
    }
</style>

<a id="{{ $bannerId }}" href="{{ route('ai') }}"
   class="{{ $content }} relative flex flex-col items-center justify-between gap-2 bg-cover bg-center bg-no-repeat p-6 text-white sm:flex-row md:flex-col lg:flex-row lg:gap-4">
    {{-- Content --}}
    <div
        class="relative z-10 flex w-full flex-1 flex-col items-center sm:items-start md:items-center lg:w-auto lg:items-start">
        <h3
            class="mb-2 w-full max-w-80 text-pretty text-center text-2xl font-bold leading-none sm:text-left md:text-center md:text-3xl lg:w-auto lg:!max-w-none lg:text-left">
            See your project in your yard now!</h3>
        <p class="font-semibold">Upload a picture and select options.</p>
    </div>
    {{-- Button --}}
    <div class="relative z-10 flex-none">
        <button
            class="btn btn-secondary flex items-center justify-center gap-2 px-4 py-2 text-lg font-semibold leading-snug">
            <img src="{{ asset('estimates/assets/images/icon-magic-wand-blue.svg') }}" alt="Magic Wand"
                 class="inline-block w-5">
            <span>Build before you buy</span>
        </button>

    </div>
</a>