@extends('layouts.front')

@section('title', getSiteName() . ' — Learn from the best, at your pace')

@section('content')
<section class="page-section active" id="page-home">
<!-- ================= HERO ================= -->
<header class="lp-hero-wrap" id="lpHeroWrap">
  <div class="lp-hero-sticky" id="lpHeroSticky">
    <div class="lp-hero-bg"></div>

    @foreach (range(1, 8) as $i)
      <div class="lp-photo lp-photo-{{ $i <= 4 ? 'a' : 'b' }} lp-photo-{{ $i }}">
        @if ($url = $content->getHeroIconImageUrl($i))
          <img class="lp-photo-img" src="{{ $url }}" alt="">
        @else
          {{ $content->{"hero_icon_{$i}"} }}
        @endif
      </div>
    @endforeach

    <span class="lp-eyebrow">{!! $content->hero_eyebrow ?: __('front.home.hero_eyebrow') !!}</span>
    <h1 class="lp-hero-title">{{ $content->hero_title ?: __('front.home.hero_title') }}</h1>

    <div class="lp-hero-foot">
      <div class="lp-hero-stat">
        <div class="lp-avatars">
          <span class="lp-av" style="background:var(--gold);"></span>
          <span class="lp-av" style="background:var(--primary);"></span>
          <span class="lp-av" style="background:var(--coral);"></span>
          <span class="lp-av lp-av-plus">+</span>
        </div>
        <div><b>{{ number_format($stats['learners']) }}+</b><span>{{ __('front.home.learners_label') }}</span></div>
      </div>
      <a href="{{ route('front.courses.index') }}" data-page="courses" class="lp-hero-btn">{{ __('front.home.explore_courses') }} <span>→</span></a>
    </div>

    <div class="lp-scrollcue" id="lpScrollCue"><span>scroll</span><span class="lp-dot"></span></div>
  </div>
</header>

<!-- ================= MARQUEE 1 ================= -->
<section class="lp-marquee-wrap dark">
  <div class="lp-marquee-track">
    @for($i = 0; $i < 8; $i++)
      <span class="txt">{{ __('front.home.marquee_pace') }}</span><span class="lp-tdot"></span>
    @endfor
  </div>
</section>

<!-- ================= INTRO / WORD REVEAL ================= -->
<section class="lp-intro" id="about">
  <div class="container">
    @php
      $introText = str_replace([':count', ':site'], [$stats['courses'], getSiteName()], $content->intro_text ?: __('front.home.intro_text'));
    @endphp
    <p class="lp-intro-text" id="lpIntroText">{{ $introText }}</p>
    <a href="{{ route('front.courses.index') }}" data-page="courses" class="btn btn-ghost">{{ __('front.home.more_about', ['site' => getSiteName()]) }}</a>
  </div>
</section>

<!-- ================= FEATURED COURSES — STACKING CARDS ================= -->
@if($featuredCourses->isNotEmpty())
<section style="padding:0 0 40px;">
  <div class="lp-stack-head container">
    <span class="eyebrow" style="justify-content:center;">{{ $content->featured_eyebrow ?: __('front.home.featured_eyebrow') }}</span>
    <h2 style="margin-top:14px;">{{ $content->featured_title ?: __('front.home.featured_title') }}</h2>
  </div>
  <div class="lp-stack-list">
    @foreach($featuredCourses as $course)
      <div class="lp-stack-card">
        <div class="lp-stack-media"@if($course->getImage()) style="background-image:url('{{ $course->getImage() }}')" @endif>
          <div class="lp-stack-overlay"></div>
        </div>
        <div class="lp-stack-top">
          <div class="lp-tags"><span>{{ $course->category->name ?? __('front.courses.general') }}</span><span>{{ __('front.courses.' . $course->level) }}</span></div>
          <span class="lp-year"><svg class="lp-video-ico" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>{{ $course->lessons_count }} {{ __('front.home.lessons_suffix') }}</span>
        </div>
        <div class="lp-stack-mid" data-video-url="{{ $course->getVideoUrl() }}" data-video-type="{{ $course->video_type === 'youtube' ? 'youtube' : 'file' }}">
          <button class="lp-play" aria-label="Play preview video"><svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg></button>
        </div>
        <div class="lp-stack-bottom">
          <h3><a href="{{ route('front.courses.show', $course) }}" style="color:inherit;text-decoration:none;">{{ $course->title }}</a></h3>
          <span>{{ __('front.courses.by_instructor', ['name' => optional($course->instructor->user)->name ?? __('front.courses.unknown_instructor')]) }} · EGP {{ number_format($course->price, 0) }}</span>
        </div>
      </div>
    @endforeach
  </div>
  <div style="text-align:center;">
    <a href="{{ route('front.courses.index') }}" data-page="courses" class="btn btn-primary">{{ __('front.home.browse_all') }}</a>
  </div>
</section>
@endif

<!-- ================= MARQUEE 2 — CATEGORIES ================= -->
@if($categories->isNotEmpty())
<div class="lp-cat-head container">
  <span class="eyebrow" style="justify-content:center;">{{ $content->categories_eyebrow ?: __('front.home.categories_eyebrow') }}</span>
  <h2 style="margin-top:14px; text-align:center;">{{ $content->categories_title ?: __('front.home.categories_title') }}</h2>
</div>
<section class="lp-marquee-wrap light">
  <div class="lp-marquee-track">
    @foreach($categories as $category)
      <span class="txt">{{ $category->name }}</span><span class="lp-tdot"></span>
    @endforeach
    @foreach($categories as $category)
      <span class="txt">{{ $category->name }}</span><span class="lp-tdot"></span>
    @endforeach
  </div>
</section>
<p class="lp-cat-hint">{!! __('front.home.categories_hint', ['link' => '<a href="' . route('front.courses.index') . '" data-page="courses">' . __('front.home.categories_hint_link') . '</a>']) !!}</p>
@endif

<!-- ================= FUN FACTS — NUMBERS THAT SPEAK VOLUMES ================= -->
<section class="lp-facts">
  <div class="container">
    <div class="nv-top">
      <div>
        <span class="eyebrow">{{ $content->facts_eyebrow ?: __('front.home.facts_eyebrow') }}</span>
        <h2 class="nv-title">{{ $content->facts_title ?: __('front.home.facts_title') }}</h2>
      </div>
      <div class="nv-right">
        <p class="nv-desc">{{ $content->facts_desc ?: __('front.home.facts_desc') }}</p>
        <div class="nv-list">
          <div class="nv-row">
            <div class="nv-num"><span class="nv-dot"></span><span class="nv-count" data-target="{{ $stats['courses'] }}" data-suffix="+">0+</span></div>
            <div class="nv-info"><span class="nv-tag">[ Nice! ]</span><h3 class="nv-heading">{{ __('front.home.fact_courses') }}</h3></div>
          </div>
          <div class="nv-row">
            <div class="nv-num"><span class="nv-dot"></span><span class="nv-count" data-target="{{ $stats['instructors'] }}" data-suffix="">0</span></div>
            <div class="nv-info"><span class="nv-tag">[ Holy moly! ]</span><h3 class="nv-heading">{{ __('front.home.fact_instructors') }}</h3></div>
          </div>
          <div class="nv-row">
            <div class="nv-num"><span class="nv-dot"></span><span class="nv-count" data-target="{{ $stats['learners'] }}" data-suffix="">0</span></div>
            <div class="nv-info"><span class="nv-tag">[ Whoa! ]</span><h3 class="nv-heading">{{ __('front.home.fact_learners') }}</h3></div>
          </div>
          <div class="nv-row">
            <div class="nv-num"><span class="nv-dot"></span><span class="nv-count" data-target="{{ number_format($stats['avgRating'], 1) }}" data-suffix="">0.0</span></div>
            <div class="nv-info"><span class="nv-tag">[ Love it! ]</span><h3 class="nv-heading">{{ __('front.home.fact_rating') }}</h3></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- ================= MASTER REAL SKILLS (ORBIT HERO) ================= -->
<section class="mh-hero">
  <div class="container mh-grid">
    <div class="mh-copy">
      <span class="eyebrow">{{ $content->master_eyebrow ?: __('front.home.master_eyebrow') }}</span>
      <h2>{{ $content->master_title ?: __('front.home.master_title') }} <span class="hl">{{ $content->master_title_hl ?: __('front.home.master_title_hl') }}</span></h2>
      <p>{{ $content->master_desc ?: __('front.home.master_desc') }}</p>
      <div class="mh-cta">
        <a href="{{ route('front.courses.index') }}" data-page="courses" class="btn btn-primary">{{ __('front.home.explore_courses') }}</a>
        <a href="{{ route('front.reels.index') }}" data-page="reels" class="btn btn-ghost">{{ __('front.home.watch_free_lessons') }}</a>
      </div>
      <div class="mh-stats">
        <div class="mh-stat"><span>{{ __('front.home.mh_stat_courses') }}</span></div>
        <div class="mh-stat"><span>{{ __('front.home.mh_stat_instructors') }}</span></div>
        <div class="mh-stat"><span>{{ __('front.home.mh_stat_learners') }}</span></div>
        <div class="mh-stat"><span>{{ __('front.home.mh_stat_rating') }}</span></div>
      </div>
    </div>

    <div class="mh-orbit-wrap parallax" id="mhHeroParallax" aria-hidden="true">
      <div class="mh-orbit-ring r1"></div>
      <div class="mh-orbit-ring r2"></div>
      <div class="mh-orbit-ring r3"></div>

      <div class="mh-float-badge b1"><span class="dot">★</span>+15 XP · lesson done</div>
      <div class="mh-float-badge b2"><span class="dot">🏆</span>Badge unlocked</div>

      <div class="mh-orbit-center"><b>{{ __('front.home.orbit_start') }}</b><span>{{ __('front.home.orbit_journey') }}</span></div>

      @php
        $orbitSizes = [260, 400, 520];
        $orbitDurations = ['22s', '32s', '40s'];
        $orbitPositions = [['top' => '-24px', 'left' => '96px'], ['top' => '186px', 'left' => '-70px'], ['top' => '410px', 'left' => '270px']];
        $orbitColors = [['bg' => 'var(--primary-soft)', 'ink' => 'var(--primary-ink)'], ['bg' => 'var(--gold-soft)', 'ink' => 'var(--gold-ink)'], ['bg' => 'rgba(255,107,91,.14)', 'ink' => 'var(--coral)']];
      @endphp
      @foreach($orbitCourses as $i => $course)
        <div class="mh-orbiter" style="width:{{ $orbitSizes[$i] }}px;height:{{ $orbitSizes[$i] }}px;">
          <div class="mh-spin" style="animation-duration:{{ $orbitDurations[$i] }};{{ $i === 1 ? ' animation-direction:reverse;' : '' }}">
            <div class="mh-o-card" style="top:{{ $orbitPositions[$i]['top'] }}; left:{{ $orbitPositions[$i]['left'] }};">
              <div class="mh-o-ico" style="background:{{ $orbitColors[$i]['bg'] }}; color:{{ $orbitColors[$i]['ink'] }};">{{ mb_substr($course->title, 0, 2) }}</div>
              <div><b>{{ $course->title }}</b><span>{{ $course->lessons_count }} {{ __('front.home.lessons_suffix') }}</span></div>
            </div>
          </div>
        </div>
      @endforeach
    </div>
  </div>
</section>

<!-- ================= PRICING ================= -->
<section id="pricing">
  <div class="container">
    <div class="section-head center reveal" style="text-align:center;">
      <span class="eyebrow" style="justify-content:center;">{{ __('front.home.pricing_eyebrow') }}</span>
      <h2>{{ __('front.home.pricing_title') }}</h2>
      <p class="center">{{ __('front.home.pricing_subtitle') }}</p>
    </div>
    <div class="lp-price-grid stagger">
      @php
        $homePlans = [
          'monthly'     => ['price' => $monthlyPrice,    'label' => __('front.subscriptions.monthly'),     'per' => __('front.subscriptions.per_month')],
          'quarterly'   => ['price' => $quarterlyPrice,  'label' => __('front.subscriptions.quarterly'),   'per' => __('front.subscriptions.per_quarter')],
          'half_yearly' => ['price' => $halfYearlyPrice, 'label' => __('front.subscriptions.half_yearly'), 'per' => __('front.subscriptions.per_half_year')],
          'yearly'      => ['price' => $yearlyPrice,     'label' => __('front.subscriptions.yearly'),      'per' => __('front.subscriptions.per_year')],
        ];
      @endphp
      @foreach ($homePlans as $planKey => $plan)
        <div class="card lp-price-card reveal-scale {{ $planKey === 'monthly' ? 'pop' : '' }}">
          @if ($planKey === 'monthly')
            <span class="lp-pop-tag">{{ __('front.home.most_popular') }}</span>
          @endif
          <h3>{{ $plan['label'] }}</h3>
          <div class="amt">EGP {{ number_format($plan['price'], 0) }}<span>{{ $plan['per'] }}</span></div>
          <ul>
            <li><span class="ck">✓</span>{{ __('front.home.monthly_li1') }}</li>
            <li><span class="ck">✓</span>{{ __('front.home.monthly_li2') }}</li>
            <li><span class="ck">✓</span>{{ __('front.home.monthly_li3') }}</li>
          </ul>
          <a href="{{ route('front.subscriptions.index') }}" class="btn {{ $planKey === 'monthly' ? 'btn-primary' : 'btn-ghost' }}">{{ __('front.subscriptions.subscribe') }}</a>
        </div>
      @endforeach
    </div>
  </div>
</section>

<!-- ================= FINAL CTA ================= -->
<section class="lp-final">
  <div class="lp-final-card">
    <div class="lp-final-top">
      <span>{{ getSiteName() }}</span>
      <span>{{ $content->final_tagline ?: __('front.home.final_tagline') }}</span>
    </div>
    <div class="lp-final-mid">
      <span class="eyebrow" style="justify-content:center;">{{ $content->final_eyebrow ?: __('front.home.final_eyebrow') }}</span>
      <h2 class="lp-final-title" id="lpFinalTitle">{{ $content->final_title ?: __('front.home.final_title') }}</h2>
    </div>
    <div class="lp-final-bottom">
      <a href="{{ route('front.courses.index') }}" data-page="courses" class="lp-hero-btn">{{ __('front.home.explore_courses') }}</a>
      <div class="lp-final-links">
        <a href="{{ route('front.courses.index') }}" data-page="courses">{{ __('front.nav.courses') }}</a>
        <a href="{{ route('front.reels.index') }}" data-page="reels">{{ __('front.nav.reels') }}</a>
        <a href="#" data-page="auth" data-sub="signup">{{ __('front.nav.start_free') }}</a>
      </div>
    </div>
  </div>
</section>
</section>
@endsection