@php
    $stories = collect($visaStories ?? [])->filter(function ($story) {
        return !empty($story->title) || !empty($story->description) || !empty($story->student_name);
    })->values();

    $countryFilters = $stories
        ->pluck('country_name')
        ->filter()
        ->unique()
        ->values();
@endphp

@if($stories->count())
<section class="vss-global-section">
    <div class="public-shell">
        <div class="vss-global-head">
            <h2>Visa <span class="accent">Success</span> Stories</h2>
            <p>Real stories from successful students who achieved their dreams of studying abroad.</p>
        </div>

        <div class="vss-global-filters">
            <button type="button" class="vss-filter-btn is-active" data-vss-filter="all">All Countries</button>
            @foreach($countryFilters as $countryName)
                <button
                    type="button"
                    class="vss-filter-btn"
                    data-vss-filter="{{ \Illuminate\Support\Str::slug($countryName) }}"
                >{{ $countryName }}</button>
            @endforeach
        </div>

        <div class="vss-global-slider" data-vss-slider>
            <button type="button" class="vss-arrow vss-arrow-prev" data-vss-prev aria-label="Previous story">←</button>
            <button type="button" class="vss-arrow vss-arrow-next" data-vss-next aria-label="Next story">→</button>

            <div class="vss-slides-wrap">
                @foreach($stories as $story)
                    @php
                        $countryName = $story->country_name ?: 'Unknown';
                        $studentName = $story->student_name ?: $story->title ?: 'Our Student';
                        $firstLine = trim((string) ($story->description ?: 'Visa and admission successfully completed with our support.'));
                        $imageUrl = $story->image_url ?? $story->image_path ?? '';
                    @endphp
                    <article
                        class="vss-slide {{ $loop->first ? 'is-active' : '' }}"
                        data-vss-slide
                        data-country="{{ \Illuminate\Support\Str::slug($countryName) }}"
                    >
                        <div class="vss-slide-media">
                            @if($imageUrl)
                                <img src="{{ $imageUrl }}" alt="{{ $story->title ?: $studentName }}">
                            @endif
                        </div>
                        <div class="vss-slide-content">
                            <p class="vss-slide-copy">
                                Meet <span>{{ $studentName }}</span>, {{ $firstLine }}
                            </p>
                            <ul class="vss-slide-meta">
                                @if(!empty($story->university))
                                    <li><strong>University:</strong> {{ $story->university }}</li>
                                @endif
                                <li><strong>Country:</strong> {{ $countryName }}</li>
                                @if(!empty($story->program))
                                    <li><strong>Program:</strong> {{ $story->program }}</li>
                                @endif
                            </ul>
                            <a href="{{ route('success-stories') }}" class="vss-slide-link">See More Stories →</a>
                        </div>
                    </article>
                @endforeach
            </div>

            <div class="vss-dots" data-vss-dots></div>
        </div>
    </div>
</section>
@endif