@extends('layouts.landing')

@section('title', 'Kenali Sistem CBT')

@section('content')
<div class="min-h-screen bg-sdn-gradient relative overflow-hidden">
    <div class="floating-shape w-64 h-64 bg-white top-10 -left-20"></div>
    <div class="floating-shape w-48 h-48 bg-purple-300 top-40 right-10 opacity-15"></div>

    <nav class="relative z-10 flex items-center justify-between px-6 lg:px-12 py-6">
        <a href="{{ route('landing') }}" class="flex items-center gap-3">
            <x-brand-logo size="md" />
            <span class="font-extrabold text-gray-900 text-lg hidden sm:block truncate max-w-xs">{{ $schoolName }}</span>
        </a>
        <div class="flex flex-wrap gap-2">
            <a href="{{ route('landing') }}" class="btn-sdn-secondary text-sm py-2 px-4">Beranda</a>
            <a href="{{ route('login') }}" class="btn-sdn-primary text-sm py-2 px-4">Masuk CBT</a>
        </div>
    </nav>

    <div class="relative z-10 max-w-4xl mx-auto px-6 pb-16 pt-4">
        <div class="text-center mb-10">
            <div class="badge-sdn mb-4 inline-block">Panduan Sistem</div>
            <h1 class="text-3xl sm:text-4xl font-extrabold text-white mb-4">Kenali Sistem CBT</h1>
            <p class="text-white/90 text-lg max-w-2xl mx-auto">
                Computer Based Test (CBT) untuk ujian online di {{ $schoolName }} — aman, mudah, dan ramah untuk siswa SD.
            </p>
        </div>

        <div class="space-y-6">
            <div class="card-sdn">
                <h2 class="text-xl font-bold text-gray-800 mb-3">Apa itu CBT?</h2>
                <p class="text-gray-600 leading-relaxed">
                    CBT memungkinkan siswa mengerjakan ujian langsung di komputer atau tablet melalui browser.
                    Guru membuat soal dan ujian, siswa login dengan NIS, mengerjakan soal, lalu melihat hasil setelah ujian selesai.
                </p>
            </div>

            <div class="card-sdn">
                <h2 class="text-xl font-bold text-gray-800 mb-4">Siapa Login dengan Apa?</h2>
                <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
                    <div class="p-4 bg-gray-50 rounded-xl border border-gray-100">
                        <p class="font-bold text-sdn-red mb-1">Super Admin</p>
                        <p class="text-sm text-gray-600">Kelola siswa, guru, kelas, pengaturan sekolah & branding.</p>
                        <p class="text-xs text-gray-500 mt-2">Login: email admin</p>
                    </div>
                    <div class="p-4 bg-gray-50 rounded-xl border border-gray-100">
                        <p class="font-bold text-sdn-orange mb-1">Guru</p>
                        <p class="text-sm text-gray-600">Buat bank soal, jadwalkan ujian, pantau siswa, koreksi esai.</p>
                        <p class="text-xs text-gray-500 mt-2">Login: username guru</p>
                    </div>
                    <div class="p-4 bg-gray-50 rounded-xl border border-gray-100">
                        <p class="font-bold text-sdn-yellow mb-1">Siswa</p>
                        <p class="text-sm text-gray-600">Ikuti ujian online sesuai jadwal dari guru.</p>
                        <p class="text-xs text-gray-500 mt-2">Login: NIS</p>
                    </div>
                </div>
            </div>

            <div class="card-sdn">
                <h2 class="text-xl font-bold text-gray-800 mb-4">Jenis Soal yang Didukung</h2>
                <ul class="grid grid-cols-1 sm:grid-cols-2 gap-3 text-sm text-gray-700">
                    <li class="flex gap-2"><span class="font-bold text-sdn-orange shrink-0">PG</span> Pilihan Ganda — satu jawaban benar</li>
                    <li class="flex gap-2"><span class="font-bold text-sdn-orange shrink-0">PG Kompleks</span> Lebih dari satu jawaban benar</li>
                    <li class="flex gap-2"><span class="font-bold text-sdn-orange shrink-0">Benar/Salah</span> Pernyataan benar atau salah</li>
                    <li class="flex gap-2"><span class="font-bold text-sdn-orange shrink-0">Esai</span> Jawaban uraian — dinilai guru</li>
                </ul>
            </div>

            <div class="card-sdn">
                <h2 class="text-xl font-bold text-gray-800 mb-4">Alur Ujian Siswa</h2>
                <ol class="space-y-3 text-sm text-gray-700">
                    <li class="flex gap-3"><span class="w-7 h-7 rounded-full bg-sdn-yellow text-gray-900 font-bold flex items-center justify-center shrink-0">1</span> Login dengan NIS dan password</li>
                    <li class="flex gap-3"><span class="w-7 h-7 rounded-full bg-sdn-yellow text-gray-900 font-bold flex items-center justify-center shrink-0">2</span> Buka dashboard — pilih ujian yang sudah dipublish guru</li>
                    <li class="flex gap-3"><span class="w-7 h-7 rounded-full bg-sdn-yellow text-gray-900 font-bold flex items-center justify-center shrink-0">3</span> Kerjakan soal — jawaban tersimpan otomatis</li>
                    <li class="flex gap-3"><span class="w-7 h-7 rounded-full bg-sdn-yellow text-gray-900 font-bold flex items-center justify-center shrink-0">4</span> Submit sebelum waktu habis</li>
                    <li class="flex gap-3"><span class="w-7 h-7 rounded-full bg-sdn-yellow text-gray-900 font-bold flex items-center justify-center shrink-0">5</span> Lihat nilai di halaman hasil (setelah dinilai)</li>
                </ol>
            </div>

            <div class="card-sdn">
                <h2 class="text-xl font-bold text-gray-800 mb-3">Keamanan Ujian</h2>
                <p class="text-gray-600 text-sm leading-relaxed mb-3">
                    Sistem membantu guru memantau ujian: watermark nama siswa di layar, pencatatan saat siswa pindah tab,
                    dan monitor real-time untuk guru. Fitur ini dirancang mendukung integritas ujian tanpa menakut-nakuti siswa SD.
                </p>
                <p class="text-xs text-gray-500">Akreditasi {{ $accreditation }} &bull; Berdiri sejak {{ $established }}</p>
            </div>

            <div class="text-center pt-4">
                <p class="text-white/90 mb-4 font-semibold">Sudah punya akun? Silakan masuk ke sistem.</p>
                <div class="flex flex-wrap gap-4 justify-center">
                    <a href="{{ route('landing') }}" class="btn-sdn-secondary shadow-lg px-8 py-3">&larr; Kembali ke Beranda</a>
                    <a href="{{ route('login') }}" class="btn-sdn-primary shadow-lg px-8 py-3">
                        Masuk CBT
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection