@extends('frontend.layouts.master')

@php
  $home = $home ?? \App\Data\HomeSections::defaults();
  $h = $home['hero'];
  $j = $home['journey'];
  $u = $home['universities'];
  $e = $home['eligibility'];
  $uk = $home['uk_services'];
  $f = $home['finance'];
  $v = $home['videos'];
  $a = $home['achievements'];
  $w = $home['why_fba'];
  $p = $home['process'];
  $b = $home['blog'];
  $fq = $home['faq'];
  $media = fn ($path) => \App\Support\BreadcrumbImage::mediaUrl($path) ?: ($path ?: '');
  $link = function ($url) {
      if (!$url) return '#';
      if (str_starts_with($url, 'http') || str_starts_with($url, '#') || str_starts_with($url, 'mailto:') || str_starts_with($url, 'tel:')) {
          return $url;
      }
      return url($url);
  };
@endphp

@section('title', $pageMeta['meta_title'] ?? 'FBA UK LTD | UK University Admissions & Student Recruitment Experts')
@section('meta_description', $pageMeta['meta_description'] ?? 'Start your UK university journey with FBA UK LTD.')
@section('meta_keywords', $pageMeta['meta_keywords'] ?? 'UK university admissions, student finance, FBA UK LTD')
@section('canonical', $pageMeta['canonical_url'] ?? url('/'))
@section('og_title', $pageMeta['og_title'] ?? ($pageMeta['meta_title'] ?? 'FBA UK LTD'))
@section('og_description', $pageMeta['og_description'] ?? ($pageMeta['meta_description'] ?? ''))
@section('og_image', $pageMeta['og_image'] ?? asset('frontend/assets/images/Fbalogo.webp'))

@section('content')
@php
  $heroType = $h['media_type'] ?? ((!empty($h['video_url'])) ? 'video' : 'image');
  $heroVideoSrc = !empty($h['video_url']) ? $media($h['video_url']) : null;
  $heroPoster = !empty($h['poster']) ? $media($h['poster']) : null;
@endphp
<section id="home" class="hero-section hero-section--minimal hero-section--full-media" aria-labelledby="hero-heading">
  <div class="hero-bg-media">
    @if($heroType === 'video' && $heroVideoSrc)
      <video class="hero-bg-media__video" autoplay muted loop playsinline webkit-playsinline poster="{{ $heroPoster }}" aria-label="{{ $h['title'] }}">
        <source src="{{ $heroVideoSrc }}" type="video/mp4">
      </video>
    @elseif($heroPoster)
      <img class="hero-bg-media__image" src="{{ $heroPoster }}" alt="{{ $h['title'] }}">
    @endif
    @if(!empty($h['intake_badge']))
      <div class="hero-intake-badge">
        <i class="fas fa-calendar-days" aria-hidden="true"></i>
        <span>{{ $h['intake_badge'] }}</span>
      </div>
    @endif
  </div>
  <div class="hero-fade-left" aria-hidden="true"></div>

  <div class="hero-container">
    <div class="row hero-row--fixed reveal-up g-0">
      <div class="col-lg-7">
        <div class="hero-content">
          <h1 id="hero-heading" class="hero-title hero-title--minimal">{{ $h['title'] }}</h1>
          <p class="hero-text hero-text--minimal">{{ $h['text'] }}</p>
          <ul class="hero-features">
            @foreach($h['features'] as $feat)
              <li class="hero-feature">
                <span class="hero-feature-icon" aria-hidden="true"><i class="{{ $feat['icon'] }}"></i></span>
                {{ $feat['text'] }}
              </li>
            @endforeach
          </ul>
          <div class="hero-cta hero-cta--minimal">
            <a href="{{ $link($h['cta_primary_url']) }}" class="btn btn-primary btn-lg">
              <i class="fas fa-clipboard-check" aria-hidden="true"></i> {{ $h['cta_primary_label'] }}
            </a>
            <a href="{{ $link($h['cta_secondary_url']) }}" class="btn btn-primary btn-lg">
              <i class="fas fa-paper-plane" aria-hidden="true"></i> {{ $h['cta_secondary_label'] }}
            </a>
            <a href="{{ $link($h['cta_whatsapp_url']) }}" class="btn btn-whatsapp-outline btn-lg" target="_blank" rel="noopener noreferrer">
              <i class="fab fa-whatsapp" aria-hidden="true"></i> {{ $h['cta_whatsapp_label'] }}
            </a>
          </div>
          <div class="hero-stats-bar">
            @foreach($h['stats'] as $i => $stat)
              @if($i > 0)<span class="hero-stat-divider" aria-hidden="true"></span>@endif
              <div class="hero-stat">
                <i class="{{ $stat['icon'] }}" aria-hidden="true"></i>
                <span>{{ $stat['text'] }}</span>
              </div>
            @endforeach
          </div>
        </div>
      </div>
      <div class="col-lg-5 d-none d-lg-block">
        <div class="hero-visual hero-visual--clear" aria-hidden="true"></div>
      </div>
    </div>
  </div>
</section>

<section id="choose-journey" class="journey-section premium-journey" aria-labelledby="journey-heading">
  <div class="journey-wrap">
    <header class="journey-header reveal-up">
      <div class="journey-heading-row">
        <span class="journey-heading-line journey-heading-line--left" aria-hidden="true"></span>
        <h2 id="journey-heading" class="journey-heading">
          {{ $j['heading'] }} <span class="journey-heading-accent">{{ $j['heading_accent'] }}</span>
        </h2>
        <span class="journey-heading-line journey-heading-line--right" aria-hidden="true"></span>
      </div>
      <p class="journey-subtitle">{{ $j['subtitle'] }}</p>
    </header>
    <div class="row g-4 journey-grid reveal-up" data-delay="100">
      @foreach($j['cards'] as $card)
        <div class="col-sm-6 col-xl-3">
          <a href="{{ $link($card['url']) }}" class="journey-card-premium journey-card-premium--{{ $card['style'] }}">
            <span class="journey-card-premium__icon" aria-hidden="true"><i class="{{ $card['icon'] }}"></i></span>
            <h3 class="journey-card-premium__title">{{ $card['title'] }}</h3>
            <p class="journey-card-premium__text">{{ $card['text'] }}</p>
            <span class="journey-card-premium__cta" aria-hidden="true"><i class="fas fa-arrow-right"></i></span>
            <span class="journey-card-premium__skyline" aria-hidden="true"></span>
          </a>
        </div>
      @endforeach
    </div>
  </div>
</section>

<section id="universities" class="universities-showcase" aria-labelledby="universities-heading">
  <div class="universities-showcase__decor" aria-hidden="true">
    <span class="universities-showcase__blur universities-showcase__blur--1"></span>
    <span class="universities-showcase__blur universities-showcase__blur--2"></span>
    <span class="universities-showcase__dots"></span>
    <span class="universities-showcase__skyline"></span>
  </div>
  <div class="universities-showcase__header-wrap">
    <header class="universities-showcase__header reveal-up">
      <span class="universities-showcase__badge"><i class="fas fa-graduation-cap" aria-hidden="true"></i> {{ $u['badge'] }}</span>
      <div class="journey-heading-row">
        <span class="journey-heading-line journey-heading-line--left" aria-hidden="true"></span>
        <h2 id="universities-heading" class="journey-heading">
          {{ $u['heading'] }} <span class="journey-heading-accent">{{ $u['heading_accent'] }}</span>
        </h2>
        <span class="journey-heading-line journey-heading-line--right" aria-hidden="true"></span>
      </div>
      <p class="journey-subtitle">{{ $u['subtitle'] }}</p>
    </header>
  </div>
  <div class="universities-showcase__carousel reveal-up" data-delay="50">
    <button type="button" class="uni-slider-btn uni-slider-btn--prev" aria-label="Previous universities" disabled><i class="fas fa-chevron-left" aria-hidden="true"></i></button>
    <div class="universities-showcase__slider">
      <span class="universities-showcase__fade universities-showcase__fade--left" aria-hidden="true"></span>
      <span class="universities-showcase__fade universities-showcase__fade--right" aria-hidden="true"></span>
      <div class="universities-showcase__track" tabindex="0" role="region" aria-label="UK partner universities">
        <div class="universities-showcase__scroll">
          @forelse(($homeUniversities ?? collect()) as $item)
            <article class="uni-card">
              <div class="uni-card__logo-wrap"><span class="uni-card__logo" aria-hidden="true">{{ $item->displayShortName() }}</span></div>
              <h3 class="uni-card__name">{{ $item->name }}</h3>
              <ul class="uni-card__details">
                @if($item->location)<li><i class="fas fa-location-dot" aria-hidden="true"></i> {{ $item->location }}</li>@endif
                @if($item->rank_label)<li><i class="fas fa-star" aria-hidden="true"></i> {{ $item->rank_label }}</li>@endif
                @if($item->intake_label)<li><i class="fas fa-calendar-days" aria-hidden="true"></i> {{ $item->intake_label }}</li>@endif
                @if($item->courses_label)<li><i class="fas fa-book-open" aria-hidden="true"></i> {{ $item->courses_label }}</li>@endif
              </ul>
              <a href="{{ route('courses.category', $item->slug) }}" class="uni-card__btn">View Courses <i class="fas fa-arrow-right" aria-hidden="true"></i></a>
            </article>
          @empty
            <p class="text-muted px-3">Partner universities coming soon.</p>
          @endforelse
        </div>
      </div>
    </div>
    <button type="button" class="uni-slider-btn uni-slider-btn--next" aria-label="Next universities"><i class="fas fa-chevron-right" aria-hidden="true"></i></button>
  </div>
</section>

@include('frontend.partials.home.eligibility', ['e' => $e])

<section id="uk-services" class="uk-showcase" aria-labelledby="uk-showcase-heading">
  <div class="uk-showcase-bg" aria-hidden="true">
    <div class="uk-showcase-watermark">UK</div>
    <i class="fas fa-plane uk-showcase-plane" aria-hidden="true"></i>
  </div>
  <div class="container uk-showcase-container">
    <div class="row align-items-center g-5">
      <div class="col-lg-7">
        <div class="uk-showcase-content reveal-up">
          <span class="uk-showcase-tag"><i class="fas fa-flag" aria-hidden="true"></i> {{ $uk['tag'] }}</span>
          <h2 id="uk-showcase-heading" class="uk-showcase-title">{{ $uk['title'] }}</h2>
          <p class="uk-showcase-desc">{{ $uk['text'] }}</p>
          <ul class="uk-showcase-list">
            @foreach($uk['items'] as $item)
              <li>
                <span class="uk-showcase-list-icon" aria-hidden="true"><i class="fas fa-arrow-right"></i></span>
                <span>{{ $item }}</span>
              </li>
            @endforeach
          </ul>
          <a href="{{ $link($uk['cta_url']) }}" class="uk-showcase-cta">
            <span>{{ $uk['cta_label'] }}</span>
            <span class="uk-showcase-cta-icon" aria-hidden="true"><i class="fas fa-arrow-right"></i></span>
          </a>
        </div>
      </div>
      <div class="col-lg-5">
        @php
          $orbitCountries = array_values(array_filter(
            $uk['countries'] ?? [],
            fn ($c) => filled($c['code'] ?? null)
          ));
          $orbitCount = max(count($orbitCountries), 1);
          $orbitStep = 360 / $orbitCount;
        @endphp
        <div class="uk-showcase-orbit reveal-up" data-delay="150" aria-hidden="true">
          <div class="uk-orbit-ring uk-orbit-ring-outer"></div>
          <div class="uk-orbit-ring uk-orbit-ring-inner"></div>
          <div class="uk-orbit-hub">
            <div class="uk-orbit-hub-badge"><span>{{ $uk['hub_code'] ?? 'UK' }}</span></div>
            <span class="uk-orbit-hub-label">{{ $uk['tag'] }}</span>
          </div>
          @if(count($orbitCountries))
            <div class="uk-orbit-track">
              @foreach($orbitCountries as $i => $country)
                <div class="uk-orbit-node" style="--orbit-angle: {{ $i * $orbitStep }}deg;">
                  <div class="uk-orbit-flag" title="{{ $country['name'] ?? $country['code'] }}">
                    @if(filled($country['flag'] ?? null))
                      <span class="uk-orbit-flag-emoji">{{ $country['flag'] }}</span>
                    @else
                      <span class="uk-orbit-flag-code">{{ $country['code'] }}</span>
                    @endif
                  </div>
                </div>
              @endforeach
            </div>
          @endif
        </div>
      </div>
    </div>
  </div>
</section>

<!-- @include('frontend.partials.home.finance', compact('f', 'link')) -->
@include('frontend.partials.home.videos', ['v' => $v, 'media' => $media, 'testimonials' => $testimonials ?? collect()])
@include('frontend.partials.home.achievements', compact('a'))
@include('frontend.partials.home.why-fba', compact('w'))
@include('frontend.partials.home.process', compact('p'))
@include('frontend.partials.home.blog', ['b' => $b, 'latestBlogs' => $latestBlogs ?? collect(), 'link' => $link, 'media' => $media])
@include('frontend.partials.home.faq', ['fq' => $fq, 'homeFaqs' => $homeFaqs ?? collect()])
@endsection