@extends('layouts.public')

@section('title', $country->seo_title ?: ('Study in ' . $country->name . ' - ' . config('app.name')))
@section('meta_description', $country->seo_description ?: $country->short_description)
@if($country->hero_image)
    @section('og_image', $country->hero_url)
@endif

@push('styles')
@vite('resources/css/country-show.css')
@endpush

@push('scripts')
@vite('resources/js/country-show.js')
@endpush

@section('content')

{{-- ══════════════════════════════════════════════════════
     HERO
══════════════════════════════════════════════════════ --}}
<section class="cs-hero">
    @if($country->hero_image)
        <img src="{{ $country->hero_url }}" alt="{{ $country->name }}" class="cs-hero__bg">
    @endif
    <div class="cs-hero__overlay"></div>
    <div class="cs-wrap cs-hero__body">
        <nav class="cs-crumbs">
            <a href="{{ url('/') }}">Home</a>
            <svg width="12" height="12" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-width="2" stroke-linecap="round" d="M9 18l6-6-6-6"/></svg>
            <a href="{{ route('countries.index') }}">Countries</a>
            <svg width="12" height="12" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-width="2" stroke-linecap="round" d="M9 18l6-6-6-6"/></svg>
            <span>{{ $country->name }}</span>
        </nav>

        <div class="cs-hero__title-row">
            @if($country->flag_image)
                <img src="{{ $country->flag_url }}" alt="{{ $country->name }} flag" class="cs-hero__flag">
            @endif
            <h1>Study in<br><em>{{ $country->name }}</em></h1>
        </div>

        @if($country->short_description)
            <p class="cs-hero__sub">{{ $country->short_description }}</p>
        @endif

        <div class="cs-hero__ctas">
            <button type="button" onclick="ApplyModal.open({ countryId: {{ $country->id }}, countryName: '{{ addslashes($country->name) }}' })" class="cs-btn cs-btn--primary">
                Free Consultation
            </button>
            <a href="#cs-guide" class="cs-btn cs-btn--ghost">Explore Guide ↓</a>
        </div>
    </div>

    {{-- Floating stats strip --}}
    @if(!empty($sections['quick_facts']['items']))
    <div class="cs-hero__stats">
        <div class="cs-wrap cs-hero__stats-inner">
            @foreach(array_slice($sections['quick_facts']['items'] ?? [], 0, 4) as $fact)
                <div class="cs-hero__stat">
                    <strong>{{ $fact['value'] ?? '' }}</strong>
                    <span>{{ $fact['label'] ?? '' }}</span>
                </div>
            @endforeach
        </div>
    </div>
    @endif
</section>

<script>
document.getElementById('cs-inquiry-form')?.addEventListener('submit', function (e) {
    e.preventDefault();
    const name  = document.getElementById('cs-inquiry-name')?.value.trim()  || '';
    const email = document.getElementById('cs-inquiry-email')?.value.trim() || '';
    const phoneField = document.getElementById('cs-inquiry-phone');
    const phone = window.PhoneFieldEnhancer?.getValue(phoneField) || phoneField?.value.trim() || '';
    const error = document.getElementById('cs-inquiry-error');

    if (!name || !email || !phone) {
        if (error) error.style.display = 'block';
        return;
    }
    if (error) error.style.display = 'none';

    ApplyModal.open({
        countryId: {{ $country->id }},
        countryName: '{{ addslashes($country->name) }}',
        name,
        email,
        phone,
        startAtStep: 2, // jump to details step since we already have phone/name/email
    });
});
</script>

{{-- ══════════════════════════════════════════════════════
     HIGHLIGHTS + QUICK FACTS
══════════════════════════════════════════════════════ --}}
<section class="cs-section cs-section--white">
    <div class="cs-wrap cs-split">
        {{-- Left: Highlights --}}
        <div class="cs-split__main">
            @if($sections['highlights']['title'] ?? '')
                <p class="cs-eyebrow">Why {{ $country->name }}?</p>
                <h2 class="cs-heading">{{ $sections['highlights']['title'] }}</h2>
                @if($sections['highlights']['subtitle'] ?? '')
                    <p class="cs-subtext">{{ $sections['highlights']['subtitle'] }}</p>
                @endif
            @endif
            <div class="cs-highlights">
                @foreach(($sections['highlights']['items'] ?? []) as $item)
                    <div class="cs-hl-item">
                        <div class="cs-hl-dot"></div>
                        <div>
                            <h3>{{ $item['title'] ?? '' }}</h3>
                            <p>{{ $item['text'] ?? '' }}</p>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>

        {{-- Right: Quick Facts sidebar --}}
        <aside class="cs-split__side cs-facts-box">
            <h3 class="cs-facts-box__title">{{ $sections['quick_facts']['title'] ?? 'Quick Facts' }}</h3>
            <div class="cs-facts-list">
                @foreach(($sections['quick_facts']['items'] ?? []) as $fact)
                    <div class="cs-fact-row">
                        <span class="cs-fact-row__label">{{ $fact['label'] ?? '' }}</span>
                        <span class="cs-fact-row__value">{{ $fact['value'] ?? '' }}</span>
                    </div>
                @endforeach
            </div>
            <form class="cs-inquiry" id="cs-inquiry-form">
                <p>Talk to an expert counselor — free of charge.</p>
                <input id="cs-inquiry-name" name="name" type="text" placeholder="Your Name" required>
                <input id="cs-inquiry-email" name="email" type="email" placeholder="Email Address" required>
                <input id="cs-inquiry-phone" name="phone" type="tel" data-phone-input autocomplete="tel" placeholder="Phone Number" required>
                <div id="cs-inquiry-error" style="display:none;color:#f43f5e;font-weight:600;font-size:13px;">Please fill in all fields.</div>
                <button type="submit">
                    Get Free Advice →
                </button>
            </form>
        </aside>
    </div>
</section>

{{-- ══════════════════════════════════════════════════════
     RICH CONTENT (moved to top as requested)
══════════════════════════════════════════════════════ --}}
@if($country->content)
<section class="cs-section cs-section--light" id="cs-guide">
    <div class="cs-wrap cs-guide-wrap">
        <div class="cs-guide-badge">Country Guide</div>
        <div class="cs-rich-body">{!! $country->content !!}</div>
    </div>
</section>
@endif

{{-- ══════════════════════════════════════════════════════
     STUDY AREAS
══════════════════════════════════════════════════════ --}}
@if(!empty($sections['courses']['items']))
<section class="cs-section cs-section--dark">
    <div class="cs-wrap">
        <p class="cs-eyebrow cs-eyebrow--light">What You Can Study</p>
        <h2 class="cs-heading cs-heading--light">{{ $sections['courses']['title'] ?? 'Popular Study Areas' }}</h2>
        <div class="cs-courses">
            @foreach($sections['courses']['items'] as $course)
                <span class="cs-course-tag">{{ $course }}</span>
            @endforeach
        </div>
    </div>
</section>
@endif

{{-- ══════════════════════════════════════════════════════
     COST OF STUDY
══════════════════════════════════════════════════════ --}}
@if(!empty($sections['costs']['tuition']) || !empty($sections['costs']['living']))
<section class="cs-section cs-section--white">
    <div class="cs-wrap">
        <p class="cs-eyebrow">Budget Planning</p>
        <h2 class="cs-heading">{{ $sections['costs']['title'] ?? 'Cost of Studying' }}</h2>
        <div class="cs-costs">
            @php
                $costItems = [
                    ['icon' => '🎓', 'label' => 'Tuition Fee',        'value' => $sections['costs']['tuition'] ?? ''],
                    ['icon' => '🏠', 'label' => 'Living Cost',        'value' => $sections['costs']['living'] ?? ''],
                    ['icon' => '📄', 'label' => 'Visa / Insurance',   'value' => $sections['costs']['visa'] ?? ''],
                    ['icon' => '🏅', 'label' => 'Scholarship',        'value' => $sections['costs']['scholarship'] ?? ''],
                ];
            @endphp
            @foreach($costItems as $ci)
                @if($ci['value'])
                    <div class="cs-cost-card">
                        <span class="cs-cost-card__icon">{{ $ci['icon'] }}</span>
                        <p class="cs-cost-card__label">{{ $ci['label'] }}</p>
                        <p class="cs-cost-card__value">{{ $ci['value'] }}</p>
                    </div>
                @endif
            @endforeach
        </div>
    </div>
</section>
@endif

{{-- ══════════════════════════════════════════════════════
     ENTRY REQUIREMENTS (simple list)
══════════════════════════════════════════════════════ --}}
@if(!empty($sections['requirements']['items']))
<section class="cs-section cs-section--accent">
    <div class="cs-wrap cs-req-wrap">
        <div class="cs-req-left">
            <p class="cs-eyebrow cs-eyebrow--light">Before You Apply</p>
            <h2 class="cs-heading cs-heading--light">{{ $sections['requirements']['title'] ?? 'Entry Requirements' }}</h2>
            <p class="cs-subtext cs-subtext--light">Make sure you have these documents and qualifications ready before submitting your application.</p>
        </div>
        <ul class="cs-req-list">
            @foreach($sections['requirements']['items'] as $req)
                <li class="cs-req-item">
                    <span class="cs-req-tick">
                        <svg width="13" height="13" 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>
                    {{ $req }}
                </li>
            @endforeach
        </ul>
    </div>
</section>
@endif

{{-- ══════════════════════════════════════════════════════
     APPLICATION ROADMAP
══════════════════════════════════════════════════════ --}}
@if(!empty($sections['timeline']['items']))
<section class="cs-section cs-section--white">
    <div class="cs-wrap">
        <p class="cs-eyebrow">Step by Step</p>
        <h2 class="cs-heading">{{ $sections['timeline']['title'] ?? 'Application Roadmap' }}</h2>
        <div class="cs-steps">
            @foreach($sections['timeline']['items'] as $i => $step)
                <div class="cs-step">
                    <div class="cs-step__num">{{ str_pad($i+1, 2, '0', STR_PAD_LEFT) }}</div>
                    <div class="cs-step__body">
                        <p>{{ $step }}</p>
                    </div>
                    @if(!$loop->last)
                        <div class="cs-step__arrow">→</div>
                    @endif
                </div>
            @endforeach
        </div>
    </div>
</section>
@endif

{{-- ══════════════════════════════════════════════════════
     MAJOR ADMISSION INTAKES (countrySections)
══════════════════════════════════════════════════════ --}}
@if(!empty($countrySections['intakes']['items']))
<section class="cs-section cs-section--light">
    <div class="cs-wrap">
        <p class="cs-eyebrow">Admission Calendar</p>
        <h2 class="cs-heading">{{ $countrySections['intakes']['title'] ?? 'Major Admission Intakes' }}</h2>
        <div class="cs-intakes">
            @foreach(($countrySections['intakes']['items'] ?? []) as $item)
                <div class="cs-intake-card">
                    <strong>{{ $item['title'] ?? '' }}</strong>
                    <p>{{ $item['text'] ?? '' }}</p>
                </div>
            @endforeach
        </div>
    </div>
</section>
@endif

{{-- ══════════════════════════════════════════════════════
     ENTRY REQUIREMENTS TABS (countrySections)
══════════════════════════════════════════════════════ --}}
@if(!empty($countrySections['entry']['items']))
<section class="cs-section cs-entry-section">
    <div class="cs-wrap">
        <p class="cs-eyebrow">Detailed Requirements</p>
        <h2 class="cs-heading">{{ $countrySections['entry']['title'] ?? 'Entry Requirements' }}</h2>
        <div class="entry-reqs-wrap" data-entry-rotate-ms="{{ $countrySections['entry']['rotate_ms'] ?? 3500 }}">

            {{-- Left: vertical sidebar tabs --}}
            <div class="entry-req-tabs" role="tablist">
                @foreach(($countrySections['entry']['items'] ?? []) as $item)
                    <button type="button"
                        class="entry-req-tab {{ $loop->first ? 'is-active' : '' }}"
                        role="tab"
                        data-entry-tab="{{ $loop->index }}"
                        aria-selected="{{ $loop->first ? 'true' : 'false' }}">
                        <span class="entry-tab-icon">{{ $item['icon'] ?? ($loop->index + 1) }}</span>
                        <span class="entry-tab-label">{{ $item['title'] ?? '' }}</span>
                    </button>
                @endforeach
            </div>

            {{-- Right: content area --}}
            <div class="entry-req-panels">
                @foreach(($countrySections['entry']['items'] ?? []) as $item)
                    <article class="entry-req-card {{ $loop->first ? 'is-active' : '' }}" data-entry-panel="{{ $loop->index }}">
                        <div class="entry-req-card__body">
                            <div class="entry-req-card__num">{{ str_pad($loop->index + 1, 2, '0', STR_PAD_LEFT) }}</div>
                            <h3>{{ $item['title'] ?? '' }}</h3>
                            <p>{{ $item['text'] ?? '' }}</p>
                        </div>
                        @if(!empty($item['image']))
                            <div class="entry-req-card__img">
                                <img src="{{ $item['image'] }}" alt="{{ $item['title'] ?? '' }}">
                            </div>
                        @endif
                    </article>
                @endforeach
                <div class="entry-req-progress" aria-hidden="true">
                    @foreach(($countrySections['entry']['items'] ?? []) as $item)
                        <div class="entry-req-progress-dot {{ $loop->first ? 'is-active' : '' }}" data-entry-dot="{{ $loop->index }}">
                            <div class="entry-req-progress-fill"></div>
                        </div>
                    @endforeach
                </div>
            </div>

        </div>
    </div>
</section>
@endif

{{-- ══════════════════════════════════════════════════════
     SUBJECTS (countrySections)
══════════════════════════════════════════════════════ --}}
@if(!empty($countrySections['subjects']['items']))
<section class="cs-section cs-section--light">
    <div class="cs-wrap">
        <p class="cs-eyebrow">Disciplines</p>
        <h2 class="cs-heading">{{ $countrySections['subjects']['title'] ?? '' }}</h2>
        <div class="cs-subjects">
            @foreach(($countrySections['subjects']['items'] ?? []) as $subject)
                <div class="cs-subject-card">
                    @if(!empty($subject['image']))
                        <img src="{{ $subject['image'] }}" alt="{{ $subject['title'] ?? '' }}">
                    @endif
                    <span>{{ $subject['title'] ?? '' }}</span>
                </div>
            @endforeach
        </div>
    </div>
</section>
@endif

{{-- ══════════════════════════════════════════════════════
     PROCESS (countrySections)
══════════════════════════════════════════════════════ --}}
@if(!empty($countrySections['process']['items']))
<section class="cs-section cs-section--white">
    <div class="cs-wrap">
        <p class="cs-eyebrow">Our Process</p>
        <h2 class="cs-heading">{{ $countrySections['process']['title'] ?? '' }}</h2>
        @if($countrySections['process']['subtitle'] ?? '')
            <p class="cs-subtext">{{ $countrySections['process']['subtitle'] }}</p>
        @endif
        <div class="cs-process">
            @foreach(($countrySections['process']['items'] ?? []) as $item)
                <div class="cs-process-item">
                    @if(!empty($item['image']))
                        <img src="{{ $item['image'] }}" alt="{{ $item['title'] ?? '' }}">
                    @endif
                    <div class="cs-process-item__body">
                        <h3>{{ $item['title'] ?? '' }}</h3>
                        <p>{{ $item['text'] ?? '' }}</p>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</section>
@endif

{{-- ══════════════════════════════════════════════════════
     PARTNER INSTITUTIONS
══════════════════════════════════════════════════════ --}}
@if(!empty($partnerInstitutions) && $partnerInstitutions->count())
<section class="cs-section cs-section--light">
    <div class="cs-wrap">
        <p class="cs-eyebrow">Trusted Partners</p>
        <h2 class="cs-heading">Our Partner Institutions</h2>
        <div class="cs-institutions">
            @foreach($partnerInstitutions as $inst)
                <div class="cs-inst-card">
                    @if(!empty($inst->logo_url))
                        <img src="{{ $inst->logo_url }}" alt="{{ $inst->name }}">
                    @else
                        <span class="cs-inst-card__initials">{{ strtoupper(substr($inst->name ?? 'PI', 0, 2)) }}</span>
                    @endif
                    <p>{{ $inst->name }}</p>
                </div>
            @endforeach
        </div>
    </div>
</section>
@endif

{{-- ══════════════════════════════════════════════════════
     FAQ
══════════════════════════════════════════════════════ --}}
@if(!empty($sections['faq']['items']))
<section class="cs-section cs-section--white">
    <div class="cs-wrap cs-faq-wrap">
        <div class="cs-faq-header">
            <p class="cs-eyebrow">Got Questions?</p>
            <h2 class="cs-heading">{{ $sections['faq']['title'] ?? 'Common Questions' }}</h2>
        </div>
        <div class="cs-faq">
            @foreach(($sections['faq']['items'] ?? []) as $i => $faq)
                <details class="cs-faq__item" {{ $i === 0 ? 'open' : '' }}>
                    <summary>
                        <span>{{ $faq['q'] ?? '' }}</span>
                        <span class="cs-faq__icon"></span>
                    </summary>
                    <div class="cs-faq__answer">{{ $faq['a'] ?? '' }}</div>
                </details>
            @endforeach
        </div>
    </div>
</section>
@endif

{{-- ══════════════════════════════════════════════════════
     STUDENT REVIEWS
══════════════════════════════════════════════════════ --}}
@if(($studentReviews ?? collect())->count())
<section class="cs-section cs-section--light">
    <div class="cs-wrap">
        <p class="cs-eyebrow">Real Students</p>
        <h2 class="cs-heading">Hear From Our Students</h2>
        <div class="cs-videos">
            @foreach($studentReviews as $review)
                <div class="cs-video-card">
                    @if($review->thumbnail_path)
                        <div class="cs-video-card__thumb">
                            <img src="{{ asset('storage/' . $review->thumbnail_path) }}" alt="{{ $review->title }}">
                            @if($review->video_url)
                                <a href="{{ $review->video_url }}" target="_blank" rel="noopener" class="cs-video-card__play">
                                    <svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
                                </a>
                            @endif
                        </div>
                    @endif
                    <div class="cs-video-card__info">
                        <strong>{{ $review->title }}</strong>
                        @if($review->video_url)
                            <a href="{{ $review->video_url }}" target="_blank" rel="noopener">Watch video →</a>
                        @endif
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</section>
@endif

{{-- ══════════════════════════════════════════════════════
     FINAL CTA
══════════════════════════════════════════════════════ --}}
<section class="cs-cta-band">
    @if($country->hero_image)
        <img src="{{ $country->hero_url }}" alt="" class="cs-cta-band__bg">
    @endif
    <div class="cs-cta-band__overlay"></div>
    <div class="cs-wrap cs-cta-band__body">
        <h2>{{ $sections['cta']['title'] ?? 'Ready to Study in '.$country->name.'?' }}</h2>
        <p>{{ $sections['cta']['text'] ?? '' }}</p>
        <button type="button" onclick="ApplyModal.open({ countryId: {{ $country->id }}, countryName: '{{ addslashes($country->name) }}' })" class="cs-btn cs-btn--primary">
            {{ $sections['cta']['button'] ?? 'Book Free Consultation' }}
        </button>
    </div>
</section>

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

<div class="cs-mobile-cta">
    <button type="button" onclick="ApplyModal.open({ countryId: {{ $country->id }}, countryName: '{{ addslashes($country->name) }}' })">
        Apply For {{ $country->name }}
    </button>
</div>

@endsection