@extends('layouts.app')

@section('content')
    @php($facilities = $product['facilities'] ?? [])

    <x-page-hero :title="$product['name'].' - '.$product['full_name']" :subtitle="$product['tagline']" :breadcrumbs="[
        ['label' => 'Products', 'url' => route('products.index')],
        ['label' => $product['name']],
    ]">
        <a href="{{ route('book-demo') }}" class="btn-primary">Book a Demo</a>
    </x-page-hero>

    <section class="section">
        <div class="container-page grid gap-10 lg:grid-cols-3">
            <div class="space-y-4 lg:col-span-2">
                <x-section-heading title="Overview" />
                @foreach ($product['overview'] as $paragraph)
                    <p class="text-lg">{{ $paragraph }}</p>
                @endforeach
                <p><strong class="text-slate-900">Ideal for:</strong> {{ $product['ideal_for'] }}</p>
            </div>

            @if ($facilities)
                {{-- The key features follow below as icon cards, so this box only points to them --}}
                <aside class="rounded-2xl border border-sky-100 bg-gradient-to-br from-sky-50 to-white p-6">
                    <x-product-icon :product="$product" size="lg" />
                    <h2 class="mt-4 text-lg font-semibold">{{ $product['name'] }} at a glance</h2>
                    <p class="mt-1 text-sm text-slate-600">{{ count($facilities) }} key features, each explained below.</p>
                    <div class="mt-5 grid gap-2">
                        <a href="#facilities" class="btn-outline">See the key features</a>
                        @if (! empty($product['catalogue']))
                            <a href="#catalogue" class="btn-outline">Full feature catalogue</a>
                        @endif
                        <a href="{{ route('book-demo') }}" class="btn-primary">Book a {{ $product['name'] }} demo</a>
                    </div>
                </aside>
            @endif
        </div>
    </section>

    {{-- Overview picture (config/products.php -> image) --}}
    @isset($product['image'])
        <section class="pb-12 sm:pb-16">
            <div class="container-page">
                <figure>
                    <img src="{{ \App\Support\Assets::url($product['image']) }}" alt="{{ $product['image_alt'] }}" width="1536" height="1024" loading="lazy" decoding="async"
                         class="mx-auto w-full max-w-5xl rounded-2xl shadow-xl shadow-brand-700/10 ring-1 ring-slate-200">
                </figure>
            </div>
        </section>
    @endisset

    {{-- Key features: an icon, a name and a description for each (config/products.php -> facilities) --}}
    @if ($facilities)
        @php($count = count($facilities))
        @php($cols = $count % 4 === 0 ? 4 : 3)
        {{-- With 3 columns and one card left over (7 cards), the last card runs the full width --}}
        @php($wideLast = $cols === 3 && $count % 3 === 1)

        <section id="facilities" class="section scroll-mt-20 bg-slate-50">
            <div class="container-page">
                <x-section-heading title="Key features" :subtitle="$product['summary']" :eyebrow="$product['name'].' facilities'" />

                <ul @class([
                    'grid gap-4 sm:grid-cols-2',
                    'lg:grid-cols-4' => $cols === 4,
                    'lg:grid-cols-3' => $cols === 3,
                ])>
                    @foreach ($facilities as $facility)
                        @php($wide = $wideLast && $loop->last)

                        <li data-reveal @class([
                            'group flex gap-4 rounded-2xl border border-slate-200 bg-white p-6 shadow-sm transition hover:border-sky-200 hover:shadow-lg hover:shadow-sky-500/10',
                            'flex-col' => ! $wide,
                            'sm:col-span-2 lg:col-span-3 lg:items-center lg:gap-6' => $wide,
                        ])>
                            <span class="icon-tile h-14 w-14 rounded-2xl transition-colors duration-200 group-hover:bg-sky-500 group-hover:text-white group-hover:ring-sky-500">
                                <x-icon :name="$facility['icon']" class="h-7 w-7" />
                            </span>
                            <span>
                                <span class="block text-base font-semibold text-slate-900">{{ $facility['title'] }}</span>
                                <span class="mt-1.5 block text-sm leading-relaxed text-slate-600">{{ $facility['text'] }}</span>
                            </span>
                        </li>
                    @endforeach
                </ul>

                <div class="mt-8 text-center">
                    <a href="{{ route('book-demo') }}" class="btn-primary px-6 py-3 text-base"><x-icon name="calendar" class="h-5 w-5" />Book a {{ $product['name'] }} demo</a>
                </div>
            </div>
        </section>
    @endif

    {{-- Feature catalogue: short tiles with an icon, a name and one line (config/products.php -> catalogue) --}}
    @if (! empty($product['catalogue']))
        @php($catalogue = $product['catalogue'])
        @php($moduleNumber = 0)

        <section id="catalogue" class="section scroll-mt-20">
            <div class="container-page">
                <x-section-heading :title="$catalogue['title']" :subtitle="$catalogue['text']" :eyebrow="$catalogue['eyebrow']" />

                <nav aria-label="Feature areas" class="-mt-2 mb-8 flex flex-wrap gap-2">
                    @foreach ($catalogue['groups'] as $group)
                        <a href="#catalogue-{{ $group['id'] }}" class="chip">
                            <span class="font-bold text-brand-700">{{ $group['letter'] }}</span> {{ $group['label'] }}
                        </a>
                    @endforeach
                </nav>

                {{--
                    Equal tiles: 1 across on phones, then 2, 3 and 4. Tiles wrap in a centred flex row (not a grid), so an
                    unfinished last row sits in the middle instead of leaning left.
                --}}
                <div class="space-y-10">
                    @foreach ($catalogue['groups'] as $group)
                        <div id="catalogue-{{ $group['id'] }}" class="scroll-mt-24">
                            <h3 class="flex items-center gap-3 text-lg font-bold tracking-tight text-slate-900">
                                <span class="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-brand-600 text-sm font-bold text-white" aria-hidden="true">{{ $group['letter'] }}</span>
                                {{ $group['label'] }}
                            </h3>

                            <ul class="mt-4 flex flex-wrap justify-center gap-3 [&>li]:w-full sm:[&>li]:w-[calc((100%-0.75rem)/2)] lg:[&>li]:w-[calc((100%-1.5rem)/3)] xl:[&>li]:w-[calc((100%-2.25rem)/4)]">
                                @foreach ($group['modules'] as $module)
                                    @php($moduleNumber++)

                                    <x-module-card :icon="$module['icon']" :title="$module['title']" :label="'Module '.sprintf('%02d', $moduleNumber)">
                                        <p class="mt-2 text-sm leading-snug text-slate-600">{{ $module['text'] }}</p>
                                    </x-module-card>
                                @endforeach
                            </ul>
                        </div>
                    @endforeach
                </div>
            </div>
        </section>

        {{-- Hospital modules beyond a stand-alone laboratory --}}
        @if (! empty($catalogue['hmis']))
            @php($hmisPart = $catalogue['hmis'])

            <section id="hmis-modules" class="section scroll-mt-20 bg-slate-50">
                <div class="container-page">
                    <x-section-heading :title="$hmisPart['title']" :subtitle="$hmisPart['text']" :eyebrow="$hmisPart['eyebrow']" />

                    <ul class="flex flex-wrap justify-center gap-3 [&>li]:w-full sm:[&>li]:w-[calc((100%-0.75rem)/2)] lg:[&>li]:w-[calc((100%-1.5rem)/3)] xl:[&>li]:w-[calc((100%-2.25rem)/4)]">
                        @foreach ($hmisPart['items'] as $item)
                            @php($moduleNumber++)

                            <x-module-card :icon="$item['icon']" :title="$item['title']" :label="'Module '.sprintf('%02d', $moduleNumber)">
                                <p class="mt-2 text-sm leading-snug text-slate-600">{{ $item['text'] }}</p>
                            </x-module-card>
                        @endforeach
                    </ul>

                    <div class="mt-8 text-center">
                        <a href="{{ route('hmis') }}" class="btn-outline">See the full HMIS<x-icon name="arrow" class="h-4 w-4" /></a>
                    </div>
                </div>
            </section>
        @endif

        {{-- Standards: a name and one line each --}}
        @if (! empty($catalogue['standards']))
            @php($standards = $catalogue['standards'])

            <section id="standards" class="section scroll-mt-20">
                <div class="container-page">
                    <x-section-heading :title="$standards['title']" :subtitle="$standards['text']" :eyebrow="$standards['eyebrow']" />

                    <dl class="flex flex-wrap justify-center gap-3 [&>div]:w-[calc((100%-0.75rem)/2)] lg:[&>div]:w-[calc((100%-2.25rem)/4)] xl:[&>div]:w-[calc((100%-3rem)/5)]">
                        @foreach ($standards['items'] as $standard)
                            <div data-reveal class="rounded-2xl border border-slate-200 bg-white px-3 py-4 text-center shadow-sm">
                                <dt class="text-base font-bold tracking-tight text-slate-900">{{ $standard['name'] }}</dt>
                                <dd class="mt-1 text-xs leading-snug text-slate-600">{{ $standard['use'] }}</dd>
                            </div>
                        @endforeach
                    </dl>

                    @if (! empty($standards['note']))
                        <p class="mx-auto mt-6 max-w-3xl text-center text-sm text-slate-500">{{ $standards['note'] }}</p>
                    @endif
                </div>
            </section>
        @endif

        {{-- Editions --}}
        @if (! empty($catalogue['editions']))
            @php($editions = $catalogue['editions'])

            <section id="editions" class="section scroll-mt-20 bg-slate-50">
                <div class="container-page">
                    <x-section-heading :title="$editions['title']" :subtitle="$editions['text']" :eyebrow="$editions['eyebrow']" />

                    <ul class="grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
                        @foreach ($editions['items'] as $edition)
                            <li data-reveal class="group flex flex-col rounded-2xl border border-slate-200 bg-white p-5 shadow-sm transition hover:border-sky-200 hover:shadow-lg hover:shadow-sky-500/10">
                                <span class="icon-tile h-12 w-12 rounded-2xl transition-colors duration-200 group-hover:bg-sky-500 group-hover:text-white group-hover:ring-sky-500">
                                    <x-icon :name="$edition['icon']" class="h-6 w-6" />
                                </span>
                                <h3 class="mt-3 text-base font-semibold text-slate-900">{{ $edition['name'] }}</h3>
                                <p class="mt-1 text-sm leading-snug text-slate-600">{{ $edition['text'] }}</p>
                            </li>
                        @endforeach
                    </ul>

                    @if (! empty($editions['note']))
                        <p class="mx-auto mt-6 max-w-3xl text-center text-sm text-slate-500">{{ $editions['note'] }}</p>
                    @endif

                    <div class="mt-8 text-center">
                        <a href="{{ route('book-demo') }}" class="btn-primary px-6 py-3 text-base"><x-icon name="calendar" class="h-5 w-5" />Book a {{ $product['name'] }} demo</a>
                    </div>
                </div>
            </section>
        @endif
    @endif

    {{-- Other products --}}
    <section class="section {{ $facilities ? '' : 'bg-slate-50' }}">
        <div class="container-page">
            <x-section-heading title="Other products" />
            <div class="grid gap-6 md:grid-cols-2">
                @foreach (collect(config('products.items'))->except($slug) as $otherSlug => $other)
                    <x-card :title="$other['name']" :eyebrow="$other['full_name']" :href="route('products.show', $otherSlug)">
                        <x-slot:icon><x-product-icon :product="$other" /></x-slot:icon>
                        {{ $other['summary'] }}
                    </x-card>
                @endforeach
            </div>
        </div>
    </section>
@endsection