Cta code

@props([
    'title',
    'description' => null,
    'spotlight' => false,
    'variant' => 'solid',
])

@php
    /*
    | Call-to-action panel. Use the `subtle` variant for a quieter, theme-tinted
    | closing section; use the `actions` slot for buttons.
    |
    | Usage:
    |   <x-ui.cta variant="subtle" title="Ready to start?" description="No credit card required.">
    |       <x-slot:actions><x-ui.button variant="accent">Sign up</x-ui.button></x-slot:actions>
    |   </x-ui.cta>
    */
    $isSubtle = $variant === 'subtle';
    $surfaceClasses = $isSubtle
        ? 'border border-brand-200 bg-brand-50 px-6 py-14 sm:px-16 sm:py-16 text-center dark:border-brand-800/70 dark:bg-brand-950/40'
        : 'bg-gradient-to-br from-brand-600 to-brand-800 px-6 py-16 sm:px-16 text-center';
    $titleClasses = $isSubtle ? 'text-gray-950 dark:text-white' : 'text-white';
    $descriptionClasses = $isSubtle ? 'text-gray-600 dark:text-gray-300' : 'text-brand-100';
@endphp

<div
    @if ($spotlight)
        x-data="{
            gx: '30%', gy: '20%',
            move($event) {
                const r = $el.getBoundingClientRect();
                this.gx = (($event.clientX - r.left) / r.width * 100) + '%';
                this.gy = (($event.clientY - r.top) / r.height * 100) + '%';
            },
            reset() { this.gx = '30%'; this.gy = '20%'; },
        }"
        @mousemove="move($event)"
        @mouseleave="reset()"
        style="--cta-glow-x: 30%; --cta-glow-y: 20%"
        :style="`--cta-glow-x: ${gx}; --cta-glow-y: ${gy}`"
    @endif
    {{ $attributes->merge(['class' => 'group/cta relative overflow-hidden rounded-3xl '.$surfaceClasses]) }}
>
    @if ($spotlight)
        <div
            class="pointer-events-none absolute inset-0 opacity-25 transition-opacity duration-200 motion-reduce:transition-none group-hover/cta:opacity-[0.48]"
            style="background: radial-gradient(520px circle at var(--cta-glow-x) var(--cta-glow-y), rgba(255,255,255,0.78), rgba(125,214,196,0.28) 30%, transparent 62%);"
            aria-hidden="true"
        ></div>
    @elseif (! $isSubtle)
        <div class="absolute inset-0 opacity-20 [background-image:radial-gradient(circle_at_30%_20%,white,transparent_40%)]" aria-hidden="true"></div>
    @endif

    <div class="relative mx-auto max-w-2xl">
        <h2 class="text-3xl font-semibold tracking-tight text-balance sm:text-4xl {{ $titleClasses }}">{{ $title }}</h2>
        @if ($description)
            <p class="mt-4 text-lg text-pretty {{ $descriptionClasses }}">{{ $description }}</p>
        @endif

        @isset($actions)
            <div class="mt-8 flex flex-col sm:flex-row items-center justify-center gap-3">{{ $actions }}</div>
        @endisset
    </div>
</div>