{{-- Dark "AI & Analytics" banner (text from config('hmis.ai')). Usage: <x-ai-banner href="#modules" /> --}}
@props(['href'])

@php($ai = config('hmis.ai'))

<div data-reveal class="relative overflow-hidden rounded-3xl bg-gradient-to-br from-slate-900 via-[#0b1f4d] to-[#12307a] p-6 text-white shadow-xl shadow-brand-900/20 sm:p-8 lg:flex lg:items-center lg:gap-8">
    <div class="pointer-events-none absolute -right-16 -top-20 h-64 w-64 rounded-full bg-sky-500/25 blur-3xl" aria-hidden="true"></div>
    <div class="pointer-events-none absolute -bottom-24 left-1/3 h-64 w-64 rounded-full bg-violet-500/20 blur-3xl" aria-hidden="true"></div>

    <div class="relative flex items-center gap-5 lg:w-[22rem] lg:shrink-0">
        <svg viewBox="0 0 72 72" class="h-16 w-16 shrink-0 sm:h-[4.5rem] sm:w-[4.5rem]" aria-hidden="true">
            <defs><linearGradient id="ai-chip" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#38bdf8"/><stop offset="1" stop-color="#a78bfa"/></linearGradient></defs>
            <path d="M24 6v10M36 6v10M48 6v10M24 56v10M36 56v10M48 56v10M6 24h10M6 36h10M6 48h10M56 24h10M56 36h10M56 48h10" fill="none" stroke="url(#ai-chip)" stroke-width="3" stroke-linecap="round"/>
            <rect x="16" y="16" width="40" height="40" rx="9" fill="#0b1f4d" stroke="url(#ai-chip)" stroke-width="3"/>
            <text x="36" y="43" text-anchor="middle" font-size="20" font-weight="800" font-family="ui-sans-serif, system-ui, sans-serif" fill="#7dd3fc">AI</text>
        </svg>
        <div>
            <p class="text-sm font-medium text-sky-200">{{ $ai['eyebrow'] }}</p>
            <h2 class="text-2xl font-bold text-white sm:text-3xl">{{ $ai['title'] }}</h2>
            <p class="mt-1 text-sm text-slate-300">{{ $ai['text'] }}</p>
        </div>
    </div>

    <ul class="relative mt-6 grid flex-1 gap-2 sm:grid-cols-2 lg:mt-0">
        @foreach ($ai['points'] as $point)
            <li class="flex items-center gap-3 rounded-xl bg-white/5 px-4 py-3 text-sm font-medium ring-1 ring-white/10">
                <span class="flex h-5 w-5 shrink-0 items-center justify-center rounded bg-sky-500 text-white"><x-icon name="check" class="h-3.5 w-3.5" /></span>
                {{ $point }}
            </li>
        @endforeach
    </ul>

    <a href="{{ $href }}" class="btn-light relative mt-6 w-full px-6 py-3 text-base shadow-lg shadow-sky-900/30 lg:mt-0 lg:w-auto lg:shrink-0">
        {{ $ai['button'] }} <x-icon name="arrow" class="ml-2 h-4 w-4" />
    </a>
</div>