{{-- ============================================================
     WHAT WE DO — Hero banner + redesigned activity cards.
     $whatWeDoImages: keyed array slot (int) → image_path (string|null)
     Requirements: 2, 3, 4, 5
============================================================ --}}

@props(['whatWeDoImages' => []])

@php
// ----------------------------------------------------------------
// Activities array — slot key (1–9) maps to canonical card data.
// theme_color and link_color cycle red/blue/green per design doc.
// Requirements: 3.7, 5.2
// ----------------------------------------------------------------
$activities = [
    [
        'slot'        => 1,
        'title'       => 'Annual Conferences',
        'description' => 'Prepare and organize annual conferences and meetings that unite digital health professionals across South Sudan.',
        'link'        => '/pages/annual-conferences',
        'theme_color' => 'bg-red-600',
        'link_color'  => 'text-red-600',
    ],
    [
        'slot'        => 2,
        'title'       => 'National & International Programs',
        'description' => 'Coordinate national and international programs that advance digital health adoption and best practices.',
        'link'        => '/pages/national-international-programs',
        'theme_color' => 'bg-blue-700',
        'link_color'  => 'text-blue-700',
    ],
    [
        'slot'        => 3,
        'title'       => 'Governing Board & Membership',
        'description' => 'Formation of a governing board and active membership recruitment to strengthen organizational leadership.',
        'link'        => '/pages/governing-board-membership',
        'theme_color' => 'bg-green-700',
        'link_color'  => 'text-green-700',
    ],
    [
        'slot'        => 4,
        'title'       => 'Workshops & Seminars',
        'description' => 'Organizing workshops, seminars, and conferences on digital health topics for practitioners and stakeholders.',
        'link'        => '/pages/workshops-seminars',
        'theme_color' => 'bg-red-600',
        'link_color'  => 'text-red-600',
    ],
    [
        'slot'        => 5,
        'title'       => 'Guidelines & Standards',
        'description' => 'Developing national guidelines and standards for digital health practices, and regulating digital solution providers in South Sudan.',
        'link'        => '/pages/guidelines-standards',
        'theme_color' => 'bg-blue-700',
        'link_color'  => 'text-blue-700',
    ],
    [
        'slot'        => 6,
        'title'       => 'International Partnerships',
        'description' => 'Establishing partnerships with international and regional digital health bodies to amplify our impact.',
        'link'        => '/pages/international-partnerships',
        'theme_color' => 'bg-green-700',
        'link_color'  => 'text-green-700',
    ],
    [
        'slot'        => 7,
        'title'       => 'Capacity Building',
        'description' => 'Implementing capacity-building programs and certification courses to grow a skilled digital health workforce.',
        'link'        => '/pages/capacity-building',
        'theme_color' => 'bg-red-600',
        'link_color'  => 'text-red-600',
    ],
    [
        'slot'        => 8,
        'title'       => 'Policy Advocacy',
        'description' => 'Advocacy for supportive digital health policies and sustainable funding at national and regional levels.',
        'link'        => '/pages/policy-advocacy',
        'theme_color' => 'bg-blue-700',
        'link_color'  => 'text-blue-700',
    ],
    [
        'slot'        => 9,
        'title'       => 'Fundraising',
        'description' => "Conducting fundraising activities for the Organization's proposed projects and strategic investments.",
        'link'        => '/pages/fundraising',
        'theme_color' => 'bg-green-700',
        'link_color'  => 'text-green-700',
    ],
];

// ----------------------------------------------------------------
// Hardcoded default Unsplash images per slot.
// Requirements: 5.1, 5.2, 5.4
// ----------------------------------------------------------------
$defaultImages = [
    1 => 'https://images.unsplash.com/photo-1540575467063-178a50c2df87?w=800&q=80',
    2 => 'https://images.unsplash.com/photo-1521791136064-7986c2920216?w=800&q=80',
    3 => 'https://images.unsplash.com/photo-1556761175-5973dc0f32e7?w=800&q=80',
    4 => 'https://images.unsplash.com/photo-1524178232363-1fb2b075b655?w=800&q=80',
    5 => 'https://images.unsplash.com/photo-1450101499163-c8848c66ca85?w=800&q=80',
    6 => 'https://images.unsplash.com/photo-1529156069898-49953e39b3ac?w=800&q=80',
    7 => 'https://images.unsplash.com/photo-1522202176988-66273c2fd55f?w=800&q=80',
    8 => 'https://images.unsplash.com/photo-1551836022-d5d88e9218df?w=800&q=80',
    9 => 'https://images.unsplash.com/photo-1532629345422-7515f3d16bb6?w=800&q=80',
];

$row1 = array_slice($activities, 0, 3); // slots 1–3 (overlap hero)
$row2 = array_slice($activities, 3, 6); // slots 4–9 (normal flow)
@endphp

{{-- ================================================================
     HERO BANNER — forest green, dot texture, red label, green accent
     Requirements: 2.1, 2.2, 2.3, 2.4, 2.5, 2.6
================================================================ --}}
<section id="what-we-do" class="relative text-center pb-48 md:pb-56 overflow-hidden" style="margin-top: 0; background-color: #1a4731;">

    {{-- Dot texture overlay — 10% opacity on forest green --}}
    <div class="absolute inset-0 opacity-10"
         style="background-image: radial-gradient(circle, #ffffff 1px, transparent 1px); background-size: 24px 24px;">
    </div>

    <div class="relative z-10 max-w-3xl mx-auto px-6 pt-14 md:pt-16">

        {{-- Small red label above title — Requirements: 2.5 --}}
        <p class="text-red-400 text-sm font-semibold tracking-widest uppercase mb-2">
            Our Mission in Action
        </p>

        {{-- Main title: "What We" bold white + "DO" italic serif green — Requirements: 2.2 --}}
        <h2 class="text-4xl md:text-5xl font-extrabold text-white leading-tight mb-6">
            What We
            <em class="not-italic font-extrabold text-green-400"
                style="font-family: Georgia, serif; font-style: italic;">DO</em>
        </h2>

        {{-- Description paragraph — Requirements: 2.3, 2.4 --}}
        <p class="text-white/75 text-base md:text-lg leading-relaxed max-w-5xl mx-auto">
            SSHIA drives digital health transformation in South Sudan through conferences,
            capacity building, policy advocacy, and international partnerships. We unite health
            informatics professionals, develop national standards, and champion sustainable
            digital health solutions that strengthen healthcare delivery and improve lives across
            the nation.
        </p>

    </div>
</section>

{{-- ================================================================
     ROW 1 — Cards 1–3 overlap the hero banner halfway
     Mobile: -mt-36 | Desktop md: -mt-40 (per design spec section 4)
     Requirements: 4.1, 4.2, 4.4
================================================================ --}}
<div class="relative z-10 -mt-36 md:-mt-40 px-4 max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-6">
    @foreach($row1 as $card)
        @php
            $slot   = $card['slot'];
            $imgSrc = isset($whatWeDoImages[$slot]) && $whatWeDoImages[$slot]
                        ? asset('storage/' . $whatWeDoImages[$slot])
                        : $defaultImages[$slot];
        @endphp

        {{-- Card wrapper: overflow-hidden for flat layout — Requirements: 3.3 --}}
        <div class="bg-white rounded-2xl shadow-lg overflow-hidden flex flex-col">

            {{-- Image block — Requirements: 3.1, 3.5 --}}
            <div class="relative overflow-hidden">
                <img src="{{ $imgSrc }}"
                     alt="{{ $card['title'] }}"
                     class="w-full h-48 object-cover">
            </div>

            {{-- Title block — flat colored bar directly below image — Requirements: 3.2, 3.3 --}}
            <div class="px-4 py-3 text-white text-center {{ $card['theme_color'] }}">
                <h3 class="text-base font-bold leading-snug">{{ $card['title'] }}</h3>
            </div>

            {{-- Card body — description + Learn More link — Requirements: 3.4 --}}
            <div class="px-5 pt-4 pb-6 flex flex-col flex-1 text-center">
                <p class="text-slate-500 text-sm leading-relaxed flex-1">{{ $card['description'] }}</p>
                <a href="{{ $card['link'] }}"
                   class="mt-4 inline-block text-sm font-semibold {{ $card['link_color'] }} hover:underline">
                    Learn More →
                </a>
            </div>

        </div>
    @endforeach
</div>

{{-- ================================================================
     ROWS 2–3 — Cards 4–9 in normal document flow below row 1
     Requirements: 4.3
================================================================ --}}
<div class="mt-6 px-4 max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-6 pb-16">
    @foreach($row2 as $card)
        @php
            $slot   = $card['slot'];
            $imgSrc = isset($whatWeDoImages[$slot]) && $whatWeDoImages[$slot]
                        ? asset('storage/' . $whatWeDoImages[$slot])
                        : $defaultImages[$slot];
        @endphp

        <div class="bg-white rounded-2xl shadow-lg overflow-hidden flex flex-col">

            <div class="relative overflow-hidden">
                <img src="{{ $imgSrc }}"
                     alt="{{ $card['title'] }}"
                     class="w-full h-48 object-cover">
            </div>

            {{-- Flat colored title bar --}}
            <div class="px-4 py-3 text-white text-center {{ $card['theme_color'] }}">
                <h3 class="text-base font-bold leading-snug">{{ $card['title'] }}</h3>
            </div>

            <div class="px-5 pt-4 pb-6 flex flex-col flex-1 text-center">
                <p class="text-slate-500 text-sm leading-relaxed flex-1">{{ $card['description'] }}</p>
                <a href="{{ $card['link'] }}"
                   class="mt-4 inline-block text-sm font-semibold {{ $card['link_color'] }} hover:underline">
                    Learn More →
                </a>
            </div>

        </div>
    @endforeach
</div>