@extends('layouts.public')

@section('title', $pageContent['seo']['title'] ?? ('Study Abroad Destinations - ' . config('app.name')))
@section('meta_description', $pageContent['seo']['description'] ?? 'Explore top study abroad destinations and compare opportunities for your higher education journey.')

@push('styles')
@vite('resources/css/countries.css')
@endpush

@section('content')
<div class="countries-page">

    {{-- Hero --}}
    <section class="ctry-hero">
        <div class="countries-shell">
            <div class="ctry-hero-grid">
                <div>
                    @if($pageContent['hero']['eyebrow'] ?? '')
                        <span class="ctry-eyebrow">{{ $pageContent['hero']['eyebrow'] }}</span>
                    @endif
                    <h1>
                        {{ $pageContent['hero']['title'] ?? 'Choose your dream' }}
                        <span class="ctry-accent">{{ $pageContent['hero']['highlight'] ?? 'destination' }}</span>
                    </h1>
                    <p>{{ $pageContent['hero']['text'] ?? 'Explore study opportunities in top countries around the world. From Australia to Japan, find your perfect study destination with our expert guidance.' }}</p>

                    <button type="button" onclick="ApplyModal.open()" class="ctry-hero-btn">
                        Book A Free Consultation
                        <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
                    </button>
                </div>
                <div class="ctry-hero-media">
                    @php
                        $heroImg = $pageContent['hero']['image'] ?? '';
                        $heroSrc = $heroImg ? (str_starts_with($heroImg, 'http') ? $heroImg : asset('storage/' . ltrim($heroImg, '/'))) : '';
                    @endphp
                    @if($heroSrc)
                        <img src="{{ $heroSrc }}" alt="Study abroad student">
                    @else
                        <div class="ctry-hero-placeholder">
                            <svg width="80" height="80" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="color:var(--country-brand); opacity:0.25;"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064"/></svg>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </section>

    {{-- Destination Grid --}}
    <section class="ctry-dest-section">
        <div class="countries-shell">
            <div class="ctry-section-head">
                <h2>{{ $pageContent['listing']['title'] ?? 'Choose your dream' }} <span class="ctry-accent">{{ 'destination' }}</span></h2>
                @if($pageContent['listing']['text'] ?? '')
                    <p>{{ $pageContent['listing']['text'] }}</p>
                @endif
            </div>

            @if($countries->isEmpty())
                <div class="ctry-empty">
                    {{ $pageContent['listing']['empty_text'] ?? 'No destinations listed yet. Check back soon.' }}
                </div>
            @else
                <div class="ctry-img-grid">
                    @foreach($countries as $country)
                        <a href="{{ $country->public_url }}" class="ctry-img-card">
                            @if($country->hero_image)
                                <img src="{{ $country->hero_url }}" alt="{{ $country->name }}">
                            @else
                                <div class="ctry-img-card-fallback"></div>
                            @endif
                            <div class="ctry-img-overlay"></div>
                            @if($country->flag_image)
                                <img src="{{ $country->flag_url }}" alt="{{ $country->name }} flag" class="ctry-img-flag">
                            @endif
                            <span class="ctry-img-name">{{ $country->name }}</span>
                        </a>
                    @endforeach
                </div>

                @if(request('search'))
                    <div style="text-align:center; margin-top:18px;">
                        <a href="{{ route('countries.index') }}" class="ctry-clear-link">Clear search</a>
                    </div>
                @endif
            @endif

            {{-- Trust Section --}}
            @if(!empty($pageContent['trust']['title']))
            <div class="ctry-trust">
                <div class="ctry-trust__text">
                    <h3>{{ $pageContent['trust']['title'] }}</h3>
                    @if(!empty($pageContent['trust']['text']))
                        <p>{{ $pageContent['trust']['text'] }}</p>
                    @endif
                </div>
                @if(!empty($pageContent['trust']['points']))
                <ul class="ctry-trust__points">
                    @foreach($pageContent['trust']['points'] as $point)
                        <li>
                            <span class="ctry-trust__tick">
                                <svg width="12" height="12" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
                            </span>
                            {{ $point }}
                        </li>
                    @endforeach
                </ul>
                @endif
                <button type="button" onclick="ApplyModal.open()" class="ctry-trust__btn">
                    Book Free Consultation →
                </button>
            </div>
            @endif

            @php $ctaData = $homeContent['final'] ?? []; @endphp
            @include('partials.final-cta', ['cta' => $ctaData])
        </div>
    </section>
</div>
@endsection