@extends('layouts.users')

@section('meta_title', 'Home NP Academy')

@section('meta_description', 'Platform pembelajaran untuk meningkatkan kompetensi')

@section('content')

    <!-- Hero Section -->
    <!-- TIP: To enable full-screen hero, uncomment "min-height: 100vh" in the .hero CSS -->
    <section class="hero">
        <div class="hero-container">
            <div class="hero-content">
                <div class="hero-badge" data-aos="fade-up" data-aos-delay="0">
                    <span>●</span> New: Digital Learning Platform PLN NP
                </div>
                <h1 data-aos="fade-up" data-aos-delay="100">
                    Tingkatkan kompetensi dengan <span class="highlight">digital learning</span>
                </h1>
                <p class="hero-description" data-aos="fade-up" data-aos-delay="200">
                    NP Digital Academy adalah platform pembelajaran internal
                    untuk karyawan dan peserta magang PLN Nusantara Power.
                    Akses materi, modul, dan evaluasi kapan saja, di satu sistem terintegrasi.
                </p>
                <div class="hero-buttons" data-aos="fade-up" data-aos-delay="300">
                    <a href="{{ route('learning-path.index') }}" class="btn-primary">
                        Mulai Belajar →
                    </a>
                    <a href="#articles" class="btn-secondary">
                        Lihat Article Trending
                    </a>
                </div>
                <div class="hero-stats">
                    <div class="stat" data-aos="fade-up" data-aos-delay="400">
                        <div class="stat-value">50K+</div>
                        <div class="stat-label">Active Students</div>
                    </div>
                    <div class="stat" data-aos="fade-up" data-aos-delay="500">
                        <div class="stat-value">200+</div>
                        <div class="stat-label">Video Lessons</div>
                    </div>
                    <div class="stat" data-aos="fade-up" data-aos-delay="600">
                        <div class="stat-value">4.9</div>
                        <div class="stat-label">App Rating</div>
                    </div>
                </div>

            </div>

            <!-- Hero Preview Image -->
            <div class="hero-media" data-aos="zoom-in" data-aos-delay="200">
                <div class="hero-media-card">
                    <img src="{{ asset('users/assets/images/bg-hero.gif') }}" alt="NP Digital Academy Preview"
                        class="hero-gif">
                </div>
            </div>
        </div>
    </section>

    <section class="learning-path" id="learning-path">
        <div class="section-container">
            <div class="section-header">
                <div class="section-label" data-aos="fade-up">
                    Learning Path
                </div>

                <h2 class="section-title" data-aos="fade-up" data-aos-delay="100">
                    Jalur Pembelajaran Pilihan Anda
                </h2>

                <p class="section-description" data-aos="fade-up" data-aos-delay="200">
                    Pilih jalur pembelajaran di <strong>NP Digital Academy</strong> PLN Nusantara Power yang dirancang
                    secara terstruktur.
                </p>
            </div>

            <div class="learning-path-grid">
                @forelse($learningPaths as $path)
                    <div class="learning-path-card" data-aos="fade-up" data-aos-delay="{{ $loop->index * 100 }}">

                        <h3>{{ $path->title }}</h3>
                        <p>{{ Str::limit($path->description, 100) }}</p>

                        <a href="{{ route('learning-path.show', $path->slug) }}" class="btn-learning-path">
                            Mulai Belajar
                        </a>
                    </div>
                @empty
                    <p data-aos="fade-up" style="text-align: center w-100">
                        Data Kosong
                    </p>
                @endforelse
            </div>
        </div>
    </section>

    <!-- Trending Articles Section -->
    <section class="articles" id="articles">
        <div class="section-container" id="articles-container">
            <div class="section-header">
                <div class="section-label" data-aos="fade-up">Articles</div>
                <h2 class="section-title" data-aos="fade-up" data-aos-delay="100">Trending Articles</h2>
                <p class="section-description" data-aos="fade-up" data-aos-delay="200">
                    Baca Article terbaru dan terpopuler dari admin PLN Nusantara Power.
                </p>
            </div>

            <div class="articles-grid">
                @forelse($trendingArticles as $article)
                    <div class="articles-card" data-aos="fade-up" data-aos-delay="{{ $loop->index * 100 }}">

                        <div class="card-image-wrapper position-relative">
                            @if ($article->articleDetail && $article->articleDetail->thumbnail)
                                <img src="{{ asset('storage/' . $article->articleDetail->thumbnail) }}" class="card-image">
                            @else
                                <img src="{{ asset('users/assets/img/notfond.png') }}" class="card-image">
                            @endif

                            <!-- Badge Trending -->
                            @if($article->is_trending)
                                <span class="badge-trending ">Trending</span>
                            @endif
                        </div>

                        <div class="card-body">
                            <h2 class="card-title">{{ $article->title }}</h2>
                            <p class="card-text">
                                {{ Str::limit(strip_tags($article->articleDetail->content ?? ''), 90) }}
                            </p>

                            <a href="{{ route('article.show', $article->slug) }}" class="btn-article">
                                Baca Article
                            </a>
                        </div>
                    </div>
                @empty
                    <p data-aos="fade-up" style="text-align: center">
                        Data Kosong
                    </p>
                @endforelse
            </div>

            <div class="pagination-wrapper" data-aos="fade-up" data-aos-delay="200">
                {{ $trendingArticles->links() }}
            </div>
        </div>
    </section>

    <!-- Testimonials Section -->
    <section class="testimonials" id="testimonials">
        <div class="section-container">
            <div class="section-header">
                <div class="section-label">FAQ</div>
                <h2 class="section-title">Apa yang Anda Dapatkan</h2>
            </div>

            <div class="faq-list">

                <details class="faq-item">
                    <summary>
                        Apa manfaat mengikuti pembelajaran di NP Digital Academy?
                    </summary>
                    <p>
                        NP Digital Academy menyediakan materi pembelajaran digital yang terstruktur dan relevan dengan
                        kebutuhan operasional serta pengembangan kompetensi di lingkungan PLN Nusantara Power.
                    </p>
                </details>

                <details class="faq-item">
                    <summary>
                        Siapa saja yang dapat mengikuti pembelajaran di platform ini?
                    </summary>
                    <p>
                        Platform ini dapat diakses oleh pegawai PLN Nusantara Power yang ingin meningkatkan kompetensi
                        digital sesuai dengan bidang dan kebutuhan masing-masing.
                    </p>
                </details>

                <details class="faq-item">
                    <summary>
                        Apakah materi pembelajaran disusun sesuai kebutuhan industri?
                    </summary>
                    <p>
                        Ya, seluruh materi disusun dengan mengacu pada kebutuhan industri dan perkembangan teknologi
                        untuk mendukung transformasi digital perusahaan.
                    </p>
                </details>

                <details class="faq-item">
                    <summary>
                        Bagaimana sistem pembelajaran di NP Digital Academy?
                    </summary>
                    <p>
                        Pembelajaran dilakukan secara mandiri dan fleksibel, sehingga peserta dapat mengakses materi
                        kapan saja tanpa mengganggu aktivitas kerja utama.
                    </p>
                </details>

                <details class="faq-item">
                    <summary>
                        Apakah tersedia jalur pembelajaran yang terstruktur?
                    </summary>
                    <p>
                        Tersedia berbagai jalur pembelajaran yang dirancang secara bertahap, mulai dari tingkat dasar
                        hingga lanjutan untuk mendukung pengembangan kompetensi secara berkelanjutan.
                    </p>
                </details>

            </div>
        </div>
    </section>

    <!-- CTA Section -->
    <section class="cta">
        <div class="section-container cta-content">
            <h2 data-aos="fade-up">
                Siap meningkatkan kompetensi digital?
            </h2>

            <p data-aos="fade-up" data-aos-delay="100">
                Bergabung bersama ribuan karyawan dan peserta magang PLN Nusantara Power
                dalam satu platform pembelajaran digital yang terintegrasi.
            </p>

            <a href="{{ route('learning-path.index') }}" class="btn-primary" data-aos="fade-up" data-aos-delay="200">
                Mulai Belajar Sekarang →
            </a>
        </div>
    </section>

@endsection