@props(['sliders' => collect(), 'heroCards' => collect(), 'stats' => []])

{{-- ============================================================
     HERO SECTION — Dynamic Slider + Info Cards
     Requirements: 1.1–1.8, 2.1–2.9

     Data flow:
       HomeController → SliderService::getPublished()  → $sliders
       HomeController → HeroCardService::getActive()   → $heroCards

     Slider fields used: title (string 191), image_url (string 500)
     HeroCard fields used: title (string 191), content (text), background_color (string 50)
============================================================ --}}

@php
    $hasSliders  = $sliders->isNotEmpty();
    $sliderCount = $sliders->count();

    // Fallback info cards — used when no active HeroCard records exist in DB
    $fallbackCards = [
        [
            'title'            => 'SSHIA Membership',
            'content'          => 'Join a growing network of digital health professionals across South Sudan.',
            'background_color' => 'bg-red-600',
        ],
        [
            'title'            => 'Training Programmes',
            'content'          => 'Build capacity through expert-led health informatics training and workshops.',
            'background_color' => 'bg-green-600',
        ],
        [
            'title'            => 'Knowledge Base',
            'content'          => 'Access curated resources, guides, and research for health informatics.',
            'background_color' => 'bg-yellow-500',
        ],
    ];

    // Use DB cards if available, otherwise fall back to hardcoded defaults
    $cards = $heroCards->isNotEmpty()
        ? $heroCards->map(fn ($c) => [
            'title'            => $c->title,
            'content'          => $c->content,
            'background_color' => $c->background_color,
          ])->toArray()
        : $fallbackCards;
@endphp

<div>

    {{-- ================================================================
         SLIDER SECTION
         Req 1.1: full viewport width, 400px height
         Req 1.2: auto-cycles every 4 seconds, published only, asc order
         Req 1.3: dark cloud overlay gradient
         Req 1.4: large bold centered white title
         Req 1.5: no navigation buttons
         Req 1.6: fallback when no published sliders
         Req 1.8: smooth crossfade transition
    ================================================================ --}}

    @if($hasSliders)

        {{-- Alpine.js slider wrapper --}}
        <div
            class="relative w-full overflow-hidden"
            style="height: 400px;"
            x-data="{
                current: 0,
                total: {{ $sliderCount }},
                timer: null,
                init() {
                    this.timer = setInterval(() => {
                        this.current = (this.current + 1) % this.total;
                    }, 4000);
                },
                destroy() {
                    clearInterval(this.timer);
                }
            }"
        >
            @foreach($sliders as $index => $slider)

                {{-- Each slide is absolutely stacked; Alpine fades between them --}}
                <div
                    class="absolute inset-0 w-full h-full"
                    x-show="current === {{ $index }}"
                    x-transition:enter="transition-opacity ease-in-out duration-700"
                    x-transition:enter-start="opacity-0"
                    x-transition:enter-end="opacity-100"
                    x-transition:leave="transition-opacity ease-in-out duration-700"
                    x-transition:leave-start="opacity-100"
                    x-transition:leave-end="opacity-0"
                    @if($index !== 0) x-cloak @endif
                >
                    {{-- Background image — covers full slide area --}}
                    <div
                        class="absolute inset-0 bg-cover bg-center bg-no-repeat"
                        style="background-image: url('{{ e($slider->image_url) }}');"
                        role="img"
                        aria-label="{{ e($slider->title) }}"
                    ></div>

                    {{-- Dark cloud overlay gradient
                         Req 1.3: darker at top & outer edges, lighter/transparent at center
                         Image remains clearly visible; white title text is fully legible --}}
                    <div
                        class="absolute inset-0"
                        style="background:
                            radial-gradient(ellipse at center, rgba(0,0,0,0.12) 0%, rgba(0,0,0,0.58) 100%),
                            linear-gradient(to bottom, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.18) 45%, rgba(0,0,0,0.52) 100%);"
                        aria-hidden="true"
                    ></div>

                    {{-- Slide title — Req 1.4: text-4xl+, bold, centered, white --}}
                    {{-- Green pill background wraps title text only — Requirements: 1.1, 1.2, 1.3, 1.5, 1.6 --}}
                    <div class="absolute inset-0 flex items-center justify-center px-6 z-10">
                        <h2 class="text-4xl md:text-5xl font-bold text-white text-center leading-tight max-w-4xl">
                            <span class="inline-block bg-green-600/65 backdrop-blur-sm rounded-xl px-6 py-2 drop-shadow-lg">
                                {{ $slider->title }}
                            </span>
                        </h2>
                    </div>

                </div>

            @endforeach

            {{-- Req 1.5: NO navigation buttons, NO dot indicators --}}

        </div>

    @else

        {{-- ── FALLBACK — no published sliders (Req 1.6) ──────── --}}
        <div
            class="relative w-full overflow-hidden flex items-center justify-center"
            style="height: 400px; background: linear-gradient(135deg, #1e3a5f 0%, #0f766e 100%);"
        >
            {{-- Same cloud overlay style for visual consistency --}}
            <div
                class="absolute inset-0"
                style="background: radial-gradient(ellipse at center, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.45) 100%);"
                aria-hidden="true"
            ></div>
            <div class="relative z-10 text-center px-6">
                <h2 class="text-4xl md:text-5xl font-bold text-white leading-tight drop-shadow-lg">
                    South Sudan Health Informatics Association
                </h2>
                <p class="mt-3 text-white/80 text-lg">Advancing Digital Health in South Sudan</p>
            </div>
        </div>

    @endif

    {{-- ================================================================
         INFO CARDS SECTION — immediately below slider
         Req 2.1: three-column grid, gap-0, immediately below slider
         Req 2.2: Card 1 = bg-red-600  (SSHIA Membership)
         Req 2.3: Card 2 = bg-green-600 (Training Programmes)
         Req 2.4: Card 3 = bg-yellow-500 (Knowledge Base)
         Req 2.5: title bold white, content smaller white — no icons, no CTAs
         Req 2.6: renders from DB $heroCards when available
         Req 2.7: falls back to hardcoded cards when DB is empty
         Req 2.8: responsive — single column on mobile
         Req 2.9: equal height, generous vertical padding
    ================================================================ --}}
    <div class="grid grid-cols-1 md:grid-cols-3 gap-0 border-0 m-0 p-0" style="border:none; outline:none;">
        @foreach($cards as $card)
            <div class="{{ $card['background_color'] }} py-8 px-8 text-white text-center flex flex-col justify-center min-h-[130px] border-0"
                 style="border:none; outline:none;">
                {{-- Title: embossed/raised effect using text-shadow with the same bg tone --}}
                <h3 class="text-2xl font-bold mb-2 leading-tight"
                    style="text-shadow: 0 1px 0 rgba(255,255,255,0.25), 0 -1px 0 rgba(0,0,0,0.35), 1px 0 0 rgba(0,0,0,0.15), -1px 0 0 rgba(0,0,0,0.15);">
                    {{ $card['title'] }}
                </h3>
                <p class="text-sm leading-relaxed opacity-90">
                    {{ $card['content'] }}
                </p>
            </div>
        @endforeach
    </div>

</div>
