@extends('layouts.public')

@section('title', config('app.name') . ' - Trusted Study Abroad Partner')
@section('meta_description', 'Study abroad counseling, admission help, and visa support. Explore destinations, events, and apply with free consultation.')

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

@push('scripts')
@vite('resources/js/home.js')
@endpush

@php
    $home = $homeContent ?? \App\Models\HomePageContent::defaults();

    $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, '/'));
    };

    $fallbackImages = $home['destinations']['fallback_images'] ?? [];
    $heroImage = $toImage($home['hero']['image'] ?? ($fallbackImages[0] ?? ''));
    $whyImage = $toImage($home['why']['image'] ?? ($fallbackImages[1] ?? $fallbackImages[0] ?? ''));
    $finalImage = $toImage($home['final']['image'] ?? ($fallbackImages[2] ?? $fallbackImages[0] ?? ''));
    $eventFallbackImage = $toImage($home['hero']['image'] ?? ($fallbackImages[0] ?? ''));
    $eventCards = [];

    foreach (($events ?? collect()) as $event) {
        $eventCards[] = ['type' => 'db', 'data' => $event];
    }

    foreach (($home['events']['items'] ?? []) as $eventItem) {
        if (count($eventCards) >= 3) {
            break;
        }
        $eventCards[] = ['type' => 'fallback', 'data' => $eventItem];
    }
@endphp

@section('content')
<section class="section hero-section home-reveal">
    <div class="landing-wrap hero-grid">
        <div>
            <div class="eyebrow">Global Admissions Support</div>
            <h1 class="hero-title">{{ $home['hero']['title'] ?? '' }} <span class="accent">{{ $home['hero']['highlight'] ?? '' }}</span></h1>
            <p class="hero-text">{{ $home['hero']['text'] ?? '' }}</p>
            <div class="hero-actions">
                <button type="button" onclick="ApplyModal.open()" class="btn-main">{{ $home['hero']['primary_cta'] ?? 'Apply Now' }}</button>
                <a href="{{ route('countries.index') }}" class="btn-light">{{ $home['hero']['secondary_cta'] ?? 'Explore Countries' }}</a>
            </div>
            @if(!empty($home['why']['stats']))
                <div class="hero-metrics">
                    @foreach(array_slice($home['why']['stats'], 0, 3) as $stat)
                        <div>
                            <strong>{{ $stat['number'] ?? '' }}</strong>
                            <span>{{ $stat['label'] ?? '' }}</span>
                        </div>
                    @endforeach
                </div>
            @endif
        </div>
        <div class="hero-media">
            <div class="hero-glow"></div>
            <div class="hero-ring">
                <img src="{{ $heroImage }}" alt="Hero image">
            </div>
            <div class="hero-sticker">
                <strong>{{ $home['hero']['sticker_title'] ?? '' }}</strong>
                <span>{{ $home['hero']['sticker_text'] ?? '' }}</span>
            </div>
        </div>
    </div>
</section>

<section class="section home-reveal">
    <div class="landing-wrap why-grid">
        <div>
            <div class="section-head" style="text-align:left; margin-bottom:22px;">
                <h2>{{ $home['why']['title'] ?? '' }} <span class="accent">{{ $home['why']['highlight'] ?? '' }}</span></h2>
            </div>
            <div class="why-list">
                @foreach(($home['why']['items'] ?? []) as $index => $item)
                    <article class="why-item">
                        <div class="why-num">{{ $index + 1 }}</div>
                        <div>
                            <h3>{{ $item['title'] ?? '' }}</h3>
                            <p>{{ $item['text'] ?? '' }}</p>
                        </div>
                    </article>
                @endforeach
            </div>
        </div>
        <div class="landing-card why-image">
            <img src="{{ $whyImage }}" alt="Why us image">
            <div class="stats-strip">
                @foreach(($home['why']['stats'] ?? []) as $stat)
                    <div>
                        <strong>{{ $stat['number'] ?? '' }}</strong>
                        <span>{{ $stat['label'] ?? '' }}</span>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
</section>

<section class="section home-reveal section-tight">
    <div class="landing-wrap">
        <div class="landing-card accreditation">
            <div>
                <h2 style="margin:0 0 8px; font-size: clamp(1.6rem, 3vw, 2.4rem); line-height:1.06; font-weight:900;">{{ $home['accreditation']['title'] ?? '' }}</h2>
                <p style="margin:0; color: var(--site-muted); line-height:1.75;">{{ $home['accreditation']['text'] ?? '' }}</p>
            </div>
            <div class="seal-row">
                <div class="seal">{{ $home['accreditation']['seal_1'] ?? '' }}</div>
                <div class="seal" style="color:var(--site-red); border-color: rgba(225, 37, 43, 0.14);">{{ $home['accreditation']['seal_2'] ?? '' }}</div>
            </div>
        </div>
    </div>
</section>

<section class="section home-reveal" id="destinations">
    <div class="landing-wrap">
        <div class="section-head">
            <h2>{{ $home['destinations']['title'] ?? '' }} <span class="accent">{{ $home['destinations']['highlight'] ?? '' }}</span></h2>
            <p>{{ $home['destinations']['text'] ?? '' }}</p>
        </div>
        <div class="dest-grid">
            @if($countries->count())
                @foreach($countries as $country)
                    @php
                        $fallback = $fallbackImages[$loop->index % max(count($fallbackImages), 1)] ?? '';
                        $image = $country->hero_image ? $country->hero_url : $fallback;
                    @endphp
                    <a href="{{ route('countries.show', $country->slug) }}" class="landing-card dest-card">
                        <img src="{{ $toImage($image) }}" alt="{{ $country->name }}">
                        <span>{{ $country->name }}</span>
                    </a>
                @endforeach
            @else
                @foreach($fallbackImages as $index => $image)
                    <article class="landing-card dest-card">
                        <img src="{{ $toImage($image) }}" alt="Destination {{ $index + 1 }}">
                        <span>Destination {{ $index + 1 }}</span>
                    </article>
                @endforeach
            @endif
        </div>
    </div>
</section>

<section class="section home-reveal" id="events">
    <div class="landing-wrap">
        <div class="section-head">
            <h2>{{ $home['events']['title'] ?? '' }} <span class="accent">{{ $home['events']['highlight'] ?? '' }}</span></h2>
            <p>{{ $home['events']['text'] ?? '' }}</p>
        </div>
        <div class="events-grid">
            @forelse($eventCards as $eventCard)
                @if(($eventCard['type'] ?? '') === 'db')
                    @php $event = $eventCard['data']; @endphp
                    <article class="landing-card event-card event-card-rich">
                        <a href="{{ route('events.show', $event->slug) }}" class="event-card-media">
                            <img src="{{ $event->cover_url ?: $eventFallbackImage }}" alt="{{ $event->title }}">
                            @if($event->starts_at)
                                <span class="event-date-badge">
                                    <strong>{{ $event->starts_at->format('d') }}</strong>
                                    <small>{{ strtoupper($event->starts_at->format('M')) }}</small>
                                </span>
                            @endif
                        </a>
                        <div class="event-card-body">
                            <p class="event-card-meta">{{ $event->starts_at ? $event->starts_at->format('D, d M Y · h:i A') : 'Upcoming Event' }}</p>
                            <h3>{{ $event->title }}</h3>
                            <p>{{ $event->excerpt ?: 'Event details are available on the event page.' }}</p>
                            <a href="{{ route('events.show', $event->slug) }}" class="event-card-btn">View Details →</a>
                        </div>
                    </article>
                @else
                    @php $event = $eventCard['data']; @endphp
                    <article class="landing-card event-card event-card-rich">
                        <div class="event-card-media">
                            <img src="{{ $eventFallbackImage }}" alt="{{ $event['title'] ?? 'Event' }}">
                        </div>
                        <div class="event-card-body">
                            <p class="event-card-meta">{{ $event['date'] ?? 'Upcoming Event' }}</p>
                            <h3>{{ $event['title'] ?? '' }}</h3>
                            <p>{{ $event['text'] ?? '' }}</p>
                        </div>
                    </article>
                @endif
            @empty
                <article class="landing-card event-card event-card-rich">
                    <div class="event-card-media">
                        <img src="{{ $eventFallbackImage }}" alt="Upcoming Event">
                    </div>
                    <div class="event-card-body">
                        <p class="event-card-meta">Upcoming Event</p>
                        <h3>New event will be announced soon</h3>
                        <p>Check back shortly for seminar dates and application support sessions.</p>
                    </div>
                </article>
            @endforelse
        </div>
        <div style="text-align:center; margin-top:16px;">
            <a href="{{ route('events.index') }}" class="btn-dark">Browse All Events</a>
        </div>
    </div>
</section>

<section class="section home-reveal" id="institutions">
    <div class="landing-wrap">
        <div class="section-head">
            <h2>{{ $home['institutions']['title'] ?? '' }} <span class="accent">{{ $home['institutions']['highlight'] ?? '' }}</span></h2>
            <p>{{ $home['institutions']['text'] ?? '' }}</p>
        </div>
        <div class="institution-grid">
            @php
                $institutionCards = isset($partnerInstitutions) && $partnerInstitutions->count()
                    ? $partnerInstitutions
                    : collect($home['institutions']['items'] ?? [])->map(fn ($name) => (object) ['name' => $name, 'logo_url' => null]);
            @endphp
            @foreach($institutionCards as $institution)
                <div class="institution-card">
                    <div class="institution-card__media">
                        @if(!empty($institution->logo_url))
                            <img src="{{ $institution->logo_url }}" alt="{{ $institution->name }}">
                        @else
                            <span>{{ strtoupper(substr($institution->name ?? 'PI', 0, 2)) }}</span>
                        @endif
                    </div>
                    <strong>{{ $institution->name }}</strong>
                </div>
            @endforeach
        </div>
    </div>
</section>


<section class="section home-reveal section-tight">
    <div class="landing-wrap">
        <div class="landing-card promo-band">
            <div>
                <h2>{{ $home['promo']['title'] ?? '' }}</h2>
                <p>{{ $home['promo']['text'] ?? '' }}</p>
            </div>
            <button type="button" onclick="ApplyModal.open()" class="btn-dark">{{ $home['promo']['button'] ?? 'Book Free Consultation' }}</button>
        </div>
    </div>
</section>

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

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

<section class="section home-reveal">
    <div class="landing-wrap">
        <div class="section-head">
            <h2>{{ $home['partners']['title'] ?? '' }} <span class="accent">{{ $home['partners']['highlight'] ?? '' }}</span></h2>
            <p>{{ $home['partners']['text'] ?? '' }}</p>
        </div>
        @php
            $partnerItems = isset($ourPartners) && $ourPartners->count()
                ? $ourPartners
                : collect($home['partners']['items'] ?? [])->map(fn ($n) => (object) ['name' => $n, 'logo_url' => null, 'website_url' => null]);
        @endphp
        <div class="partner-marquee-wrap">
            <div class="partner-marquee-track">
                {{-- render twice for seamless loop --}}
                @foreach([1,2] as $_)
                    @foreach($partnerItems as $p)
                        @if(!empty($p->website_url))
                            <a href="{{ $p->website_url }}" target="_blank" rel="noopener" class="partner-chip landing-card">
                        @else
                            <div class="partner-chip landing-card">
                        @endif
                            @if(!empty($p->logo_url))
                                <img src="{{ $p->logo_url }}" alt="{{ $p->name }}" class="partner-chip__logo">
                            @endif
                            <span class="partner-chip__name">{{ $p->name }}</span>
                        @if(!empty($p->website_url))
                            </a>
                        @else
                            </div>
                        @endif
                    @endforeach
                @endforeach
            </div>
        </div>
    </div>
</section>

<section class="section home-reveal">
    <div class="landing-wrap">
        <div class="section-head">
            <h2>{{ $home['steps']['title'] ?? '' }} <span class="accent">{{ $home['steps']['highlight'] ?? '' }}</span></h2>
            <p>{{ $home['steps']['text'] ?? '' }}</p>
        </div>
        <div class="steps-grid">
            @foreach(($home['steps']['items'] ?? []) as $step)
                <article class="landing-card step-card">
                    <h3>{{ $step['title'] ?? '' }}</h3>
                    <ul>
                        @foreach(($step['lines'] ?? []) as $line)
                            <li>{{ $line }}</li>
                        @endforeach
                    </ul>
                </article>
            @endforeach
        </div>
    </div>
</section>

<section class="section home-reveal" id="faq">
    <div class="landing-wrap">
        <div class="section-head">
            <h2>{{ $home['faq']['title'] ?? '' }} <span class="accent">{{ $home['faq']['highlight'] ?? '' }}</span></h2>
            <p>{{ $home['faq']['text'] ?? '' }}</p>
        </div>
        <div class="faq-grid">
            @if(isset($faqs) && $faqs->count())
                @foreach($faqs as $faq)
                    <details class="faq-item">
                        <summary>{{ $faq->question }}</summary>
                        <p>{{ $faq->answer }}</p>
                    </details>
                @endforeach
            @else
                @foreach(($home['faq']['items'] ?? []) as $faq)
                    <details class="faq-item">
                        <summary>{{ $faq['q'] ?? '' }}</summary>
                        <p>{{ $faq['a'] ?? '' }}</p>
                    </details>
                @endforeach
            @endif
        </div>
    </div>
</section>

<section class="section home-reveal section-tight" id="contact-cta">
    <div class="landing-wrap">
        <div class="landing-card final-cta">
            <div>
                <h3>{{ $home['final']['title'] ?? '' }}</h3>
                <p>{{ $home['final']['text'] ?? '' }}</p>
                <div style="margin-top:16px;">
                    <button type="button" onclick="ApplyModal.open()" class="btn-dark">{{ $home['final']['button'] ?? 'Book Free Consultation' }}</button>
                </div>
            </div>
            <img src="{{ $finalImage }}" alt="Final CTA image">
        </div>
    </div>
</section>

@endsection