@extends('layouts.landing')
@section('title', 'Sistem Akademik - Landing')

@section('content')
<!-- Hero Section -->
<section class="hero-section" style="background: linear-gradient(135deg, #4a90d9 0%, #6c5ce7 100%); color: #fff; padding: 80px 0;">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6">
                <h1 class="display-4 fw-bold" style="font-weight: 700;">Sistem Akademik Terpadu</h1>
                <p class="lead mt-3" style="font-size: 1.25rem; opacity: 0.9;">
                    Kelola data mahasiswa, dosen, matakuliah, program studi, pembimbing, dan rekap nilai secara efisien dan terintegrasi.
                </p>
                <div class="mt-4">
                    @auth
                        <a href="{{ route('dashboard') }}" class="btn btn-light btn-lg waves-effect waves-light" style="border-radius: 30px; padding: 12px 40px; font-weight: 600;">Go to Dashboard</a>
                    @else
                        <a href="{{ route('login') }}" class="btn btn-light btn-lg waves-effect waves-light" style="border-radius: 30px; padding: 12px 40px; font-weight: 600;">Login Sekarang</a>
                        <a href="{{ route('register') }}" class="btn btn-outline-light btn-lg waves-effect waves-light" style="border-radius: 30px; padding: 12px 40px; font-weight: 600; margin-left: 10px;">Daftar</a>
                    @endauth
                </div>
            </div>
            <div class="col-lg-6 text-center">
                <img src="{{ asset('assets/images/logo.png') }}" alt="Logo" class="img-fluid" style="max-width: 300px; filter: drop-shadow(0 10px 20px rgba(0,0,0,0.2));">
            </div>
        </div>
    </div>
</section>

<!-- Fitur Section -->
<section class="features-section" style="padding: 60px 0; background: #fff;">
    <div class="container">
        <div class="text-center mb-5">
            <h2 class="fw-bold" style="color: #333;">Fitur Utama</h2>
            <p class="text-muted" style="font-size: 1.1rem;">Kelola semua data akademik dalam satu platform</p>
        </div>
        <div class="row">
            <div class="col-md-4 col-sm-6 mb-4">
                <div class="card text-center h-100 shadow-sm" style="border: none; border-radius: 15px; transition: transform 0.3s;">
                    <div class="card-body">
                        <div class="icon-box" style="background: #eef2ff; width: 70px; height: 70px; line-height: 70px; border-radius: 50%; margin: 0 auto 20px;">
                            <i class="ti-user f-30 text-c-purple"></i>
                        </div>
                        <h5 class="card-title">Manajemen Mahasiswa</h5>
                        <p class="card-text text-muted">Data mahasiswa lengkap dengan NIM, nama, program studi, dan kontak.</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4 col-sm-6 mb-4">
                <div class="card text-center h-100 shadow-sm" style="border: none; border-radius: 15px; transition: transform 0.3s;">
                    <div class="card-body">
                        <div class="icon-box" style="background: #e8f5e9; width: 70px; height: 70px; line-height: 70px; border-radius: 50%; margin: 0 auto 20px;">
                            <i class="ti-id-badge f-30 text-c-green"></i>
                        </div>
                        <h5 class="card-title">Manajemen Dosen</h5>
                        <p class="card-text text-muted">Kelola data dosen, NIDN, email, dan jabatan dengan mudah.</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4 col-sm-6 mb-4">
                <div class="card text-center h-100 shadow-sm" style="border: none; border-radius: 15px; transition: transform 0.3s;">
                    <div class="card-body">
                        <div class="icon-box" style="background: #fff3e0; width: 70px; height: 70px; line-height: 70px; border-radius: 50%; margin: 0 auto 20px;">
                            <i class="ti-book f-30 text-c-red"></i>
                        </div>
                        <h5 class="card-title">Manajemen Matakuliah</h5>
                        <p class="card-text text-muted">Daftar matakuliah dengan kode, nama, dan SKS yang terstruktur.</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4 col-sm-6 mb-4">
                <div class="card text-center h-100 shadow-sm" style="border: none; border-radius: 15px; transition: transform 0.3s;">
                    <div class="card-body">
                        <div class="icon-box" style="background: #e3f2fd; width: 70px; height: 70px; line-height: 70px; border-radius: 50%; margin: 0 auto 20px;">
                            <i class="ti-layout f-30 text-c-blue"></i>
                        </div>
                        <h5 class="card-title">Program Studi</h5>
                        <p class="card-text text-muted">Data program studi dengan nama dan jumlah mahasiswa.</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4 col-sm-6 mb-4">
                <div class="card text-center h-100 shadow-sm" style="border: none; border-radius: 15px; transition: transform 0.3s;">
                    <div class="card-body">
                        <div class="icon-box" style="background: #fce4ec; width: 70px; height: 70px; line-height: 70px; border-radius: 50%; margin: 0 auto 20px;">
                            <i class="ti-briefcase f-30 text-c-pink"></i>
                        </div>
                        <h5 class="card-title">Pembimbing Akademik</h5>
                        <p class="card-text text-muted">Kelola pembimbing mahasiswa per kelas dan program studi.</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4 col-sm-6 mb-4">
                <div class="card text-center h-100 shadow-sm" style="border: none; border-radius: 15px; transition: transform 0.3s;">
                    <div class="card-body">
                        <div class="icon-box" style="background: #e8eaf6; width: 70px; height: 70px; line-height: 70px; border-radius: 50%; margin: 0 auto 20px;">
                            <i class="ti-stats-up f-30 text-c-indigo"></i>
                        </div>
                        <h5 class="card-title">Rekap Nilai</h5>
                        <p class="card-text text-muted">Rekapitulasi nilai UTS, UAS, dan nilai kategori per mahasiswa.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Call to Action -->
<section class="cta-section" style="background: linear-gradient(135deg, #6c5ce7 0%, #4a90d9 100%); color: #fff; padding: 60px 0;">
    <div class="container text-center">
        <h2 class="fw-bold">Siap Mengelola Akademik dengan Lebih Baik?</h2>
        <p class="lead" style="opacity: 0.9; margin-top: 10px;">Mulai sekarang dan rasakan kemudahan sistem terintegrasi.</p>
        <div class="mt-4">
            @auth
                <a href="{{ route('dashboard') }}" class="btn btn-light btn-lg waves-effect waves-light" style="border-radius: 30px; padding: 12px 40px; font-weight: 600;">Dashboard</a>
            @else
                <a href="{{ route('register') }}" class="btn btn-light btn-lg waves-effect waves-light" style="border-radius: 30px; padding: 12px 40px; font-weight: 600;">Daftar Sekarang</a>
            @endauth
        </div>
    </div>
</section>

<!-- Statistik (opsional) -->
<section class="stats-section" style="padding: 50px 0; background: #f9f9f9;">
    <div class="container">
        <div class="row text-center">
            <div class="col-md-3 col-6">
                <h3 class="fw-bold" style="color: #4a90d9;">{{ \App\Models\Mahasiswa::count() }}</h3>
                <p class="text-muted">Mahasiswa</p>
            </div>
            <div class="col-md-3 col-6">
                <h3 class="fw-bold" style="color: #6c5ce7;">{{ \App\Models\Dosen::count() }}</h3>
                <p class="text-muted">Dosen</p>
            </div>
            <div class="col-md-3 col-6">
                <h3 class="fw-bold" style="color: #f39c12;">{{ \App\Models\Matakuliah::count() }}</h3>
                <p class="text-muted">Matakuliah</p>
            </div>
            <div class="col-md-3 col-6">
                <h3 class="fw-bold" style="color: #e74c3c;">{{ \App\Models\ProgramStudi::count() }}</h3>
                <p class="text-muted">Program Studi</p>
            </div>
        </div>
    </div>
</section>

<style>
    .card:hover {
        transform: translateY(-8px);
        box-shadow: 0 15px 30px rgba(0,0,0,0.1) !important;
    }
    .icon-box i {
        line-height: 70px;
    }
    .hero-section {
        padding: 100px 0 80px;
    }
    @media (max-width: 768px) {
        .hero-section {
            padding: 60px 0 40px;
            text-align: center;
        }
        .hero-section .col-lg-6:first-child {
            margin-bottom: 30px;
        }
    }
</style>
@endsection