@extends('frontend.layouts.master')

@php
  $about = $about ?? \App\Data\AboutSections::defaults();
  $hero = $about['hero'];
  $story = $about['story'];
  $mvv = $about['mvv'];
  $stats = $about['stats'];
  $timeline = $about['timeline'];
  $team = $about['team'];
  $why = $about['why'];
  $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);
  };
  $heroTitle = e($hero['title']);
  if (!empty($hero['title_accent'])) {
      $heroTitle .= ' <span class="text-gradient">'.e($hero['title_accent']).'</span>';
  }
@endphp

@section('title', $pageMeta['meta_title'] ?? 'About Us | FBA UK LTD')
@section('meta_description', $pageMeta['meta_description'] ?? 'Learn about FBA UK LTD — trusted UK education consultancy for Home and International students.')
@section('meta_keywords', $pageMeta['meta_keywords'] ?? 'about fba uk, education consultancy, uk admissions')
@section('meta_robots', $pageMeta['meta_robots'] ?? 'index, follow')
@section('canonical', $pageMeta['canonical_url'] ?? url()->current())
@section('og_title', $pageMeta['og_title'] ?? ($pageMeta['meta_title'] ?? 'About Us | 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')
@include('frontend.partials.page-hero', [
  'currentPage' => 'About Us',
  'title' => $heroTitle,
  'subtitle' => $hero['subtitle'],
  'bgImage' => $pageMeta['breadcrumb_image'] ?? null,
])

    <!-- Our Story -->
    <section class="section about-story-section" aria-labelledby="story-heading">
      <div class="container">
        <div class="row align-items-start g-4">
          <div class="col-lg-6 reveal-up">
            <div class="about-image-wrapper">
              <img src="{{ $media($story['image']) }}"
                   alt="{{ $story['image_alt'] }}"
                   width="600" height="500" loading="lazy" class="about-image lazy-img">
              @if(!empty($story['badge_title']) || !empty($story['badge_text']))
                <div class="about-image-badge glass-card">
                  @if(!empty($story['badge_title']))<strong>{{ $story['badge_title'] }}</strong>@endif
                  @if(!empty($story['badge_text']))<span>{{ $story['badge_text'] }}</span>@endif
                </div>
              @endif
            </div>
          </div>
          <div class="col-lg-6 reveal-up about-story-content" data-delay="100">
            <span class="section-label">{{ $story['label'] }}</span>
            <h2 id="story-heading" class="section-title">{{ $story['title'] }}</h2>
            @foreach($story['paragraphs'] as $para)
              <p>{{ $para }}</p>
            @endforeach
            <ul class="about-checklist">
              @foreach($story['checklist'] as $item)
                <li><i class="fas fa-check-circle" aria-hidden="true"></i> {{ $item }}</li>
              @endforeach
            </ul>
            @if(!empty($story['cta_label']))
              <a href="{{ $link($story['cta_url']) }}" class="btn btn-primary">
                <i class="fas fa-comments" aria-hidden="true"></i> {{ $story['cta_label'] }}
              </a>
            @endif
          </div>
        </div>
      </div>
    </section>

    <!-- Mission, Vision, Values -->
    <section class="about-mvv-section" aria-labelledby="mvv-heading">
      <div class="about-mvv-section__decor" aria-hidden="true">
        <span class="about-mvv-section__orb about-mvv-section__orb--1"></span>
        <span class="about-mvv-section__orb about-mvv-section__orb--2"></span>
        <span class="about-mvv-section__grid"></span>
      </div>

      <div class="container about-mvv-wrap">
        <div class="about-mvv-header reveal-up">
          <span class="about-mvv-label">{{ $mvv['label'] }}</span>
          <h2 id="mvv-heading" class="about-mvv-title">{{ $mvv['heading'] }} <span class="text-gradient">{{ $mvv['heading_accent'] }}</span></h2>
          <p class="about-mvv-subtitle">{{ $mvv['subtitle'] }}</p>
        </div>

        <div class="about-mvv-showcase reveal-up">
          <div class="about-mvv-cards">
            @foreach($mvv['cards'] as $card)
              <article class="mvv-card mvv-card--{{ $card['style'] }}">
                <span class="mvv-card__watermark" aria-hidden="true">{{ $card['number'] }}</span>
                @if(($card['style'] ?? '') === 'vision')
                  <span class="mvv-card__glow" aria-hidden="true"></span>
                @elseif(($card['style'] ?? '') === 'values')
                  <span class="mvv-card__accent mvv-card__accent--teal" aria-hidden="true"></span>
                @else
                  <span class="mvv-card__accent" aria-hidden="true"></span>
                @endif
                <div class="mvv-card__icon mvv-card__icon--{{ $card['icon_style'] ?: 'blue' }}">
                  <i class="{{ $card['icon'] }}" aria-hidden="true"></i>
                </div>
                <h3>{{ $card['title'] }}</h3>
                <p>{{ $card['text'] }}</p>
                <span class="mvv-card__tag @if(!empty($card['tag_style'])) mvv-card__tag--{{ $card['tag_style'] }} @endif">{{ $card['tag'] }}</span>
              </article>
            @endforeach
          </div>
        </div>
      </div>
    </section>

    <!-- Stats -->
    <section class="trust-section achievements-panel reveal-up" aria-labelledby="about-stats-heading">
      <div class="achievements-bg" aria-hidden="true">
        <div class="achievements-bg-map">
          <i class="fas fa-globe" aria-hidden="true"></i>
        </div>
        <svg class="achievements-bg-city" viewBox="0 0 400 120" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
          <path fill="currentColor" d="M0 120V90h30l15-35 20 10 25-50 15 30 20-15 25 40 20-25 30 45 15-20 25 35 20-30 35 55 25-40 20 25 15-15 25 30 0 30H0z" opacity="0.12"/>
        </svg>
      </div>

      <div class="container achievements-content">
        <div class="achievements-header text-center">
          <span class="achievements-badge">{{ $stats['badge'] }}</span>
          <h2 id="about-stats-heading" class="achievements-title">{{ $stats['heading'] }}</h2>
        </div>

        <div class="achievements-grid">
          @foreach($stats['items'] as $i => $item)
            <div class="achievements-stat reveal-up" @if($i) data-delay="{{ $i * 100 }}" @endif>
              <div class="achievements-number"
                   data-count="{{ $item['count'] }}"
                   data-suffix="{{ $item['suffix'] }}"
                   @if(!empty($item['format'])) data-format="{{ $item['format'] }}" @endif>0{{ $item['suffix'] }}</div>
              <div class="achievements-label">{{ $item['label'] }}</div>
              <p class="achievements-desc">{{ $item['desc'] }}</p>
            </div>
          @endforeach
        </div>
      </div>
    </section>

    <!-- Timeline -->
    <section class="about-timeline-section" aria-labelledby="timeline-heading">
      <div class="container">
        <div class="about-timeline-header reveal-up">
          <span class="about-timeline-label">{{ $timeline['label'] }}</span>
          <h2 id="timeline-heading" class="about-timeline-title">{{ $timeline['heading'] }} <span class="text-gradient">{{ $timeline['heading_accent'] }}</span></h2>
        </div>

        <div class="journey-rail reveal-up">
          <div class="journey-rail__line" aria-hidden="true"></div>
          <div class="journey-rail__steps">
            @foreach($timeline['items'] as $item)
              <article class="journey-step {{ !empty($item['active']) ? 'journey-step--active' : '' }}">
                <div class="journey-step__node"><span class="journey-step__year">{{ $item['year'] }}</span></div>
                <div class="journey-step__card">
                  <span class="journey-step__icon"><i class="{{ $item['icon'] }}" aria-hidden="true"></i></span>
                  <h3>{{ $item['title'] }}</h3>
                  <p>{{ $item['text'] }}</p>
                </div>
              </article>
            @endforeach
          </div>
        </div>
      </div>
    </section>

    <!-- Team -->
    <section class="about-team-section" aria-labelledby="team-heading">
      <div class="about-team-section__decor" aria-hidden="true">
        <span class="about-team-section__orb"></span>
      </div>
      <div class="container">
        <div class="about-team-header reveal-up">
          <span class="about-team-label">{{ $team['label'] }}</span>
          <h2 id="team-heading" class="about-team-title">{{ $team['heading'] }} <span class="text-gradient">{{ $team['heading_accent'] }}</span></h2>
          <p class="about-team-subtitle">{{ $team['subtitle'] }}</p>
        </div>

        <div class="advisor-grid reveal-up">
          @forelse(($teamMembers ?? collect()) as $member)
            <article class="advisor-card">
              <div class="advisor-card__media">
                @if($member->imageUrl())
                  <img src="{{ $member->imageUrl() }}" alt="{{ $member->name }}" width="400" height="480" loading="lazy" class="lazy-img">
                @endif
                <span class="advisor-card__shine" aria-hidden="true"></span>
              </div>
              <div class="advisor-card__body">
                <h3>{{ $member->name }}</h3>
                @if($member->role)<span class="advisor-card__role">{{ $member->role }}</span>@endif
                @if($member->bio)<p>{{ $member->bio }}</p>@endif
              </div>
            </article>
          @empty
            <p class="text-muted">Our advisory team details will appear here soon.</p>
          @endforelse
        </div>
      </div>
    </section>

    <!-- Why Choose -->
    <section class="about-why-section" aria-labelledby="why-about-heading">
      <div class="about-why-section__decor" aria-hidden="true">
        <span class="about-why-section__orb about-why-section__orb--1"></span>
        <span class="about-why-section__orb about-why-section__orb--2"></span>
      </div>
      <div class="container">
        <div class="about-why-header reveal-up">
          <span class="about-why-label">{{ $why['label'] }}</span>
          <h2 id="why-about-heading" class="about-why-title">{{ $why['heading'] }} <span class="text-gradient">{{ $why['heading_accent'] }}</span></h2>
        </div>

        <div class="about-why-showcase reveal-up">
          <div class="about-usps">
            @foreach($why['cards'] as $card)
              <article class="usp-card usp-card--{{ $card['style'] }} {{ !empty($card['featured']) ? 'usp-card--featured' : '' }}">
                <span class="usp-card__watermark" aria-hidden="true">{{ $card['number'] }}</span>
                <span class="usp-card__accent @if(($card['style'] ?? '') !== 'blue') usp-card__accent--{{ $card['style'] }} @endif" aria-hidden="true"></span>
                <div class="usp-card__icon"><i class="{{ $card['icon'] }}" aria-hidden="true"></i></div>
                <h3>{{ $card['title'] }}</h3>
                <p>{{ $card['text'] }}</p>
              </article>
            @endforeach
          </div>
        </div>
      </div>
    </section>
@endsection