@extends('layouts.public')

@section('title', 'Success Stories - ' . config('app.name'))
@section('meta_description', 'Read real success stories from students and see how they achieved their study abroad goals.')

@push('styles')
@vite('resources/css/success-stories.css')
@endpush

@push('scripts')
@vite('resources/js/success-stories.js')
@endpush

@php
    $toImage = function (?string $image): string {
        if (! $image) {
            return '';
        }

        if (str_starts_with($image, 'http://') || str_starts_with($image, 'https://')) {
            return $image;
        }

        return asset('storage/' . ltrim($image, '/'));
    };
@endphp

@section('content')
<div class="ss-page">
    <section class="ss-hero">
        <div class="ss-wrap ss-hero-grid">
            <div>
                <h1>
                    <span class="accent">{{ $content['hero']['highlight'] ?? '' }}</span>
                    {{ str_replace($content['hero']['highlight'] ?? '', '', $content['hero']['title'] ?? '') }}
                </h1>
                <button class="ss-btn" type="button" onclick="ApplyModal.open()">{{ $content['hero']['button'] ?? 'Book A Free Consultation' }}</button>
            </div>
            <div class="ss-hero-media">
                <img src="{{ $toImage($content['hero']['image'] ?? '') }}" alt="Success stories hero image">
            </div>
        </div>
    </section>

    <section class="ss-section">
        <div class="ss-wrap">
            <div class="ss-heading">
                <h2>{{ $content['intro']['title'] ?? '' }}</h2>
                <p>{{ $content['intro']['text'] ?? '' }}</p>
            </div>

            <div class="ss-testimonials">
                @foreach(($content['testimonials'] ?? []) as $item)
                    <article class="ss-card ss-testimonial">
                        <p class="ss-quote">{{ $item['quote'] ?? '' }}</p>
                        <div class="ss-meta">
                            <div class="ss-avatar">{{ $item['initials'] ?? 'ST' }}</div>
                            <div>
                                <strong>{{ $item['name'] ?? '' }}</strong>
                                <span>{{ $item['meta'] ?? '' }}</span>
                            </div>
                        </div>
                    </article>
                @endforeach
            </div>
        </div>
    </section>

    <section class="ss-section">
        <div class="ss-wrap">
            <div class="ss-dark-cta ss-card">
                <h3>{{ $content['mid_cta']['title'] ?? '' }}</h3>
                <p>{{ $content['mid_cta']['text'] ?? '' }}</p>
                <button class="ss-btn" type="button" onclick="ApplyModal.open()">{{ $content['mid_cta']['button'] ?? 'Book A Free Consultation' }}</button>
            </div>
        </div>
    </section>

    @if(isset($visaStories) && $visaStories->count())
    <section class="ss-section">
        <div class="ss-wrap">
            <div class="ss-heading">
                <h2>Visa <span class="accent">Success Stories</span></h2>
                <p>{{ $content['intro']['text'] ?? 'Real students who achieved their dreams of studying abroad.' }}</p>
            </div>
            <div class="ss-visa-grid">
                @foreach($visaStories as $story)
                    <article class="ss-visa-card">
                        @if($story->image_url)
                            <div class="ss-visa-card-img">
                                <img src="{{ $story->image_url }}" alt="{{ $story->title }}">
                            </div>
                        @endif
                        <div class="ss-visa-body">
                            <h4>{{ $story->title }}</h4>
                            @if($story->description)
                                <p>{{ $story->description }}</p>
                            @endif
                            @if($story->student_name || $story->university || $story->country_name)
                                <small>
                                    {{ $story->student_name }}{{ $story->student_name && ($story->university || $story->country_name) ? ' · ' : '' }}{{ $story->university }}{{ $story->university && $story->country_name ? ' · ' : '' }}{{ $story->country_name }}
                                </small>
                            @endif
                        </div>
                    </article>
                @endforeach
            </div>
        </div>
    </section>
    @endif

    <section class="ss-section">
        <div class="ss-wrap">
            <div class="ss-heading">
                <h2>Hear From <span class="accent">{{ $content['videos']['highlight'] ?? '' }}</span></h2>
                <p>{{ $content['videos']['text'] ?? '' }}</p>
            </div>
            <div class="ss-videos">
                @if(isset($studentReviews) && $studentReviews->count())
                    @foreach($studentReviews as $review)
                        <article class="ss-card ss-video">
                            <img src="{{ $review->thumbnail_path ? asset('storage/' . $review->thumbnail_path) : ($toImage($content['videos']['items'][0]['image'] ?? '')) }}" alt="{{ $review->title }}">
                            @if($review->video_url)
                                <a href="{{ $review->video_url }}" target="_blank" rel="noopener" class="ss-play">Play</a>
                            @else
                                <div class="ss-play">Play</div>
                            @endif
                            <p class="ss-video-title">{{ $review->title }}</p>
                        </article>
                    @endforeach
                @else
                    @foreach(($content['videos']['items'] ?? []) as $video)
                        <article class="ss-card ss-video">
                            <img src="{{ $toImage($video['image'] ?? '') }}" alt="{{ $video['title'] ?? '' }}">
                            <div class="ss-play">Play</div>
                            <p class="ss-video-title">{{ $video['title'] ?? '' }}</p>
                        </article>
                    @endforeach
                @endif
            </div>
        </div>
    </section>

    @php $ctaData = $homeContent['final'] ?? []; @endphp
    @include('partials.final-cta', [
        'cta' => $ctaData,
        'outerClass' => 'ss-section',
        'wrapClass' => 'ss-wrap',
        'cardClass' => 'ss-final',
    ])

    @include('partials.visa-success-slider', ['visaStories' => $visaStories ?? collect()])
</div>

{{-- sticky apply removed per request --}}
@endsection