@inject('SectionService', 'App\Services\SectionService')

@php
$param = 'villain';
$villainContent = $SectionService->get($param);
@endphp

<!-- Villain Section -->
<section class="container" id="villain" >
    <!-- First Row: Headline -->
    <div class="row">
        <div class="col">
            <h1 class="text-center">{{ $villainContent['headline'] ?? 'Default Headline' }}</h1>
        </div>
    </div>

    <!-- Second Row: Two Buttons -->
    <div class="row my-4">
        <div class="col-12 text-center">
            <!-- Loop through buttons and display them -->
            @foreach ($villainContent['buttons'] ?? [] as $button)
                <a href="{{ $button['link'] }}" class="btn btn-warning">{{ $button['text'] }}</a>
            @endforeach
        </div>
    </div>

    <!-- ... Rest of the Section ... -->

    <!-- Fourth Row: Three Rows of Content (Stacked on Small Screens) -->
    <div class="row">
        <!-- Loop through challenges and display them -->
        @foreach ($villainContent['challenges'] ?? [] as $challenge)
            <div class="col-12 col-md-6 mb-4">
                <p>{{ $challenge['text'] }}</p>
                <a href="{{ $challenge['readMoreLink'] }}" class="link-danger">Read More</a>
            </div>
        @endforeach
    </div>
</section>