@extends('layouts.app')

@section('content')
    @php($hero = config('hmis.hero'))

    {{-- ============ Hero ============ --}}
    <section class="relative overflow-hidden bg-gradient-to-br from-brand-50 via-white to-indigo-50">
        <div class="pointer-events-none absolute inset-0 opacity-60" style="background-image: radial-gradient(#bae6fd 1px, transparent 1px); background-size: 22px 22px;" aria-hidden="true"></div>
        <div class="pointer-events-none absolute -right-24 -top-24 h-96 w-96 rounded-full bg-brand-200/60 blur-3xl" aria-hidden="true"></div>

        <div class="container-page relative grid items-center gap-10 py-6 sm:py-8 lg:grid-cols-2">
            <div>
                <h1 class="text-4xl font-extrabold leading-tight tracking-tight sm:text-5xl">
                    {{ $hero['title'] }}
                    <span class="bg-gradient-to-r from-brand-600 to-indigo-500 bg-clip-text text-transparent">{{ $hero['highlight'] }}</span>
                </h1>

                <p class="mt-6 max-w-xl text-lg text-slate-600">{{ $hero['text'] }}</p>

                <div class="mt-8 flex flex-wrap gap-3">
                    <a href="{{ route('book-demo') }}" class="btn-primary px-6 py-3 text-base">Book a Demo</a>
                    <a href="#modules" class="btn-outline px-6 py-3 text-base">Explore Features</a>
                </div>

                <ul class="mt-10 grid grid-cols-2 gap-4 sm:grid-cols-4">
                    @foreach ($hero['chips'] as $chip)
                        <li class="flex flex-col items-center gap-2 text-center text-xs font-medium text-slate-600 sm:items-start sm:text-left">
                            <span class="flex h-9 w-9 items-center justify-center rounded-full bg-white text-brand-700 shadow-sm ring-1 ring-brand-100"><x-icon :name="$chip['icon']" class="h-5 w-5" /></span>
                            {{ $chip['label'] }}
                        </li>
                    @endforeach
                </ul>
            </div>

            <figure class="relative">
                <img src="{{ \App\Support\Assets::url($hero['image']) }}" alt="{{ $hero['image_alt'] }}" width="602" height="467" fetchpriority="high" decoding="async"
                     class="mx-auto w-full max-w-xl rounded-2xl shadow-2xl shadow-brand-700/10 ring-1 ring-slate-200">
            </figure>
        </div>
    </section>

    {{-- ============ Integrations strip ============ --}}
    <section class="border-y border-slate-100 bg-white">
        <div class="container-page py-6">
            <p class="text-center text-sm font-medium text-slate-500">{{ config('hmis.integrations.title') }}</p>
            <ul class="mt-4 flex flex-wrap justify-center gap-3">
                @foreach (config('hmis.integrations.items') as $item)
                    <li class="flex w-[calc(50%-0.375rem)] flex-col items-center justify-center rounded-xl border border-slate-100 bg-slate-50/60 px-2 py-3 text-center sm:w-40 xl:w-[calc((100%-5.25rem)/8)]">
                        <span class="flex h-12 w-full items-center justify-center">
                            @if (! empty($item['logo']))
                                <img src="{{ \App\Support\Assets::url($item['logo']) }}" alt="{{ $item['name'] }}" width="{{ $item['width'] }}" height="{{ $item['height'] }}" loading="lazy" decoding="async" class="max-h-12 w-auto max-w-full object-contain">
                            @else
                                <span class="text-base font-bold tracking-tight text-slate-700">{{ $item['name'] }}</span>
                            @endif
                        </span>
                        <span class="mt-1 text-[11px] leading-tight text-slate-500">{{ $item['caption'] }}</span>
                    </li>
                @endforeach
            </ul>
        </div>
    </section>

    {{-- ============ Modules ============ --}}
    <section id="modules" class="section scroll-mt-20">
        @php($modules = config('hmis.modules'))
        @php($groupLabels = collect($modules['groups'])->pluck('label', 'id'))

        <div class="container-page">
            <x-section-heading :title="$modules['title']" :subtitle="$modules['text']" :eyebrow="$modules['eyebrow']" />

            {{-- Search and area buttons. Hidden until JavaScript runs (app.js); the grid works without them. --}}
            <div data-module-filter class="mb-5 hidden flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">
                <label class="relative block w-full lg:max-w-xs lg:shrink-0">
                    <span class="sr-only">Search modules</span>
                    <svg class="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="M20 20l-3.5-3.5"/></svg>
                    <input type="search" data-module-search autocomplete="off" placeholder="Search modules, e.g. lab or claims" class="form-input rounded-full py-1.5 pl-9">
                </label>

                <div class="flex flex-wrap gap-2" role="group" aria-label="Filter modules by area">
                    <button type="button" class="chip" data-module-group="all" aria-pressed="true">All</button>
                    @foreach ($modules['groups'] as $group)
                        <button type="button" class="chip" data-module-group="{{ $group['id'] }}" aria-pressed="false">{{ $group['label'] }}</button>
                    @endforeach
                </div>
            </div>

            <p class="sr-only" role="status" aria-live="polite" data-module-status></p>

            <div hidden data-module-empty class="mb-3 rounded-2xl border border-dashed border-slate-300 bg-slate-50 px-6 py-10 text-center text-slate-600">
                No modules match &ldquo;<span data-module-term></span>&rdquo;.
                <button type="button" data-module-reset class="font-semibold text-brand-700 underline underline-offset-2 hover:text-brand-800">Show all modules</button>
            </div>

            {{--
                Rows of equal boxes: 2 on phones, 3, 4, then 6 across. Boxes wrap in a centred flex row (not a grid), so an
                unfinished last row, or a short list after searching or filtering, sits in the middle instead of leaning left.
            --}}
            <ul class="flex flex-wrap justify-center gap-3 [&>li]:w-[calc((100%-0.75rem)/2)] sm:[&>li]:w-[calc((100%-1.5rem)/3)] lg:[&>li]:w-[calc((100%-2.25rem)/4)] xl:[&>li]:w-[calc((100%-3.75rem)/6)]">
                @foreach ($modules['items'] as $module)
                    <x-module-card :icon="$module['icon']" :title="$module['title']" :label="$groupLabels[$module['group']] ?? null"
                        data-module-card :data-group="$module['group']"
                        :data-search="\Illuminate\Support\Str::lower($module['title'].' '.($module['keywords'] ?? '').' '.($groupLabels[$module['group']] ?? ''))" />
                @endforeach
            </ul>
        </div>
    </section>

    {{-- ============ AI & Analytics banner (off unless config('hmis.ai.enabled') is true) ============ --}}
    @if (config('hmis.ai.enabled'))
        <section class="pb-12 sm:pb-16">
            <div class="container-page">
                <x-ai-banner href="#modules" />
            </div>
        </section>
    @endif

@endsection