@extends('layouts.app')
@section('title', 'Beranda')

@section('content')

<style>
    @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=DM+Sans:wght@300;400;500;600&display=swap');
    .edu-font-display { font-family: 'Playfair Display', serif; }
    .edu-font-body { font-family: 'DM Sans', sans-serif; }
    :root { --navy:#0f1e38; --navy-mid:#1a3259; --gold:#c9a84c; --gold-light:#f5e9cc; --cream:#faf8f4; --text-muted:#6b7280; --border:#e8e4dc; }
    .section-label { font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--text-muted); font-weight:500; }
    .stat-pill { background:white; border:1px solid var(--border); border-radius:16px; padding:1.25rem; text-align:center; transition:all .2s; }
    .stat-pill:hover { box-shadow:0 6px 20px rgba(15,30,56,.08); transform:translateY(-1px); }
    .course-card { background:white; border:1px solid var(--border); border-radius:20px; overflow:hidden; transition:all .25s; }
    .course-card:hover { border-color:#c7bfb0; box-shadow:0 12px 32px rgba(15,30,56,.10); transform:translateY(-3px); }
    .cat-pill { display:inline-flex; align-items:center; justify-content:space-between; gap:.75rem; background:white; border:1.5px solid var(--border); border-radius:14px; padding:.625rem 1rem; font-size:13px; font-weight:500; color:var(--navy); cursor:pointer; transition:all .15s; }
    .cat-pill:hover { border-color:var(--gold); background:var(--gold-light); }
    .hero-bg { background:linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 60%, #243b6e 100%); border-radius:24px; padding:3rem 2.5rem; position:relative; overflow:hidden; }
    .hero-bg::before { content:''; position:absolute; top:-60px; right:-60px; width:280px; height:280px; border-radius:50%; background:rgba(201,168,76,.08); }
    .hero-bg::after { content:''; position:absolute; bottom:-80px; right:80px; width:200px; height:200px; border-radius:50%; background:rgba(201,168,76,.05); }
    .btn-cta { display:inline-flex; align-items:center; gap:8px; background:var(--gold); color:var(--navy); font-size:14px; font-weight:700; padding:.875rem 1.75rem; border-radius:16px; text-decoration:none; transition:opacity .2s; font-family:'DM Sans',sans-serif; }
    .btn-cta:hover { opacity:.9; }
    .btn-ghost { display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.12); color:white; font-size:13px; font-weight:500; padding:.75rem 1.5rem; border-radius:14px; border:1px solid rgba(255,255,255,.2); text-decoration:none; transition:background .15s; }
    .btn-ghost:hover { background:rgba(255,255,255,.2); }
    .count-badge { display:inline-flex; align-items:center; justify-content:center; min-width:22px; height:22px; background:var(--gold-light); color:#92742a; border-radius:100px; font-size:11px; font-weight:700; padding:0 6px; }
</style>

<div class="edu-font-body space-y-8">

    {{-- ===== HERO ===== --}}
    <div class="hero-bg">
        <div class="relative z-10 max-w-xl">
            <span style="display:inline-flex; align-items:center; gap:6px; background:rgba(201,168,76,.2); color:var(--gold); font-size:11px; font-weight:600; padding:.375rem .875rem; border-radius:100px; margin-bottom:1.25rem;">
                <span style="width:6px; height:6px; border-radius:50%; background:var(--gold); display:inline-block;"></span>
                Platform Pembelajaran Digital
            </span>
            <h1 class="edu-font-display text-white font-bold leading-tight mb-3" style="font-size:clamp(1.75rem, 4vw, 2.75rem);">
                Belajar Lebih Mudah,<br>
                <span style="color:var(--gold);">Lebih Cerdas</span>
            </h1>
            <p class="text-sm leading-relaxed mb-7" style="color:rgba(255,255,255,.7); max-width:400px;">
                Akses materi pelajaran, kerjakan tugas, dan ikuti kuis kapan saja dan di mana saja bersama guru terbaik.
            </p>
            <div class="flex flex-wrap items-center gap-3">
                <a href="{{ route('login') }}" class="btn-cta">
                    Mulai Belajar
                </a>
                <a href="{{ route('register') }}" class="btn-ghost">
                    Daftar Gratis
                </a>
            </div>
        </div>

        {{-- Decorative icons --}}
        <div class="absolute right-8 top-1/2 -translate-y-1/2 hidden lg:flex flex-col gap-3 opacity-30 z-0">
            @foreach(['fa-book-open','fa-graduation-cap','fa-pencil-alt','fa-star'] as $icon)
            <div style="width:44px; height:44px; border-radius:14px; background:rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center;">
                <i class="fa {{ $icon }} text-white" style="font-size:18px;"></i>
            </div>
            @endforeach
        </div>
    </div>

    {{-- ===== STATS ===== --}}
    <div class="grid grid-cols-3 gap-4">
        <div class="stat-pill">
            <i class="fa fa-book-open mb-2 block" style="font-size:20px; color:var(--gold);"></i>
            <p class="edu-font-display text-2xl font-bold" style="color:var(--navy);">{{ $courses->count() }}</p>
            <p class="text-xs mt-0.5" style="color:var(--text-muted);">Kursus Aktif</p>
        </div>
        <div class="stat-pill">
            <i class="fa fa-layer-group mb-2 block" style="font-size:20px; color:var(--gold);"></i>
            <p class="edu-font-display text-2xl font-bold" style="color:var(--navy);">{{ $categories->count() }}</p>
            <p class="text-xs mt-0.5" style="color:var(--text-muted);">Kategori</p>
        </div>
        <div class="stat-pill">
            <i class="fa fa-users mb-2 block" style="font-size:20px; color:var(--gold);"></i>
            <p class="edu-font-display text-2xl font-bold" style="color:var(--navy);">{{ $courses->sum('enrollments_count') }}</p>
            <p class="text-xs mt-0.5" style="color:var(--text-muted);">Siswa Belajar</p>
        </div>
    </div>

    {{-- ===== KATEGORI ===== --}}
    @if($categories->isNotEmpty())
    <div>
        <div class="flex items-center justify-between mb-4">
            <div>
                <span class="section-label">Jelajahi</span>
                <h2 class="edu-font-display text-xl font-semibold mt-0.5" style="color:var(--navy);">Kategori Kursus</h2>
            </div>
        </div>
        <div class="flex flex-wrap gap-2">
            @foreach($categories as $cat)
            <div class="cat-pill">
                <span>{{ $cat->name }}</span>
                <span class="count-badge">{{ $cat->courses_count }}</span>
            </div>
            @endforeach
        </div>
    </div>
    @endif

    {{-- ===== KURSUS ===== --}}
    <div>
        <div class="flex items-center justify-between mb-5">
            <div>
                <span class="section-label">Tersedia untuk kamu</span>
                <h2 class="edu-font-display text-xl font-semibold mt-0.5" style="color:var(--navy);">Kursus Tersedia</h2>
            </div>
            <span class="text-xs font-medium px-3 py-1 rounded-full" style="background:var(--gold-light); color:#92742a;">{{ $courses->count() }} kursus</span>
        </div>

        @if($courses->isEmpty())
            <div style="background:white; border:1px solid var(--border); border-radius:24px; padding:4rem 2rem; text-align:center;">
                <i class="fa fa-book-open text-3xl mb-3 block opacity-20" style="color:var(--navy);"></i>
                <p class="text-sm" style="color:var(--text-muted);">Belum ada kursus yang dipublikasikan.</p>
            </div>
        @else
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5">
                @foreach($courses as $course)
                <div class="course-card">
                    {{-- Thumbnail --}}
                    <div style="height:160px; overflow:hidden; background:var(--cream);">
                        @if($course->thumbnail)
                            <img src="{{ Storage::url($course->thumbnail) }}" alt="{{ $course->title }}"
                                 style="width:100%; height:100%; object-fit:cover; transition:transform .3s;">
                        @else
                            <div style="width:100%; height:100%; background:linear-gradient(135deg,var(--navy),var(--navy-mid)); display:flex; align-items:center; justify-content:center;">
                                <i class="fa fa-book-open text-3xl text-white opacity-30"></i>
                            </div>
                        @endif
                    </div>

                    <div style="padding:1.125rem;">
                        <span class="text-xs font-semibold" style="color:var(--gold);">{{ $course->category->name }}</span>
                        <h3 class="edu-font-display text-base font-semibold mt-1.5 leading-snug" style="color:var(--navy); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;">
                            {{ $course->title }}
                        </h3>
                        <p class="text-xs mt-1" style="color:var(--text-muted);">{{ $course->teacher->name }}</p>
                        <div class="flex items-center justify-between mt-3 pt-3" style="border-top:1px solid var(--border);">
                            <span class="text-xs" style="color:var(--text-muted);">
                                <i class="fa fa-users mr-1" style="color:var(--gold);"></i>{{ $course->enrollments_count }} siswa
                            </span>
                            <a href="{{ route('login') }}" class="text-xs font-semibold hover:underline" style="color:var(--gold);">
                                Daftar
                            </a>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        @endif
    </div>

    {{-- ===== CTA FOOTER ===== --}}
    <div style="background:var(--navy); border-radius:24px; padding:2.5rem; text-align:center;">
        <span class="section-label" style="color:rgba(255,255,255,.4);">Bergabung sekarang</span>
        <h2 class="edu-font-display text-2xl font-bold text-white mt-1 mb-2">Siap Mulai Belajar?</h2>
        <p class="text-sm mb-6" style="color:rgba(255,255,255,.6);">Daftarkan dirimu dan akses semua materi secara gratis.</p>
        <a href="{{ route('register') }}" class="btn-cta">
            Daftar Sekarang
        </a>
    </div>

</div>
@endsection