<div>
    <!-- Header & Breadcrumb -->
    <div class="mb-6 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
            <nav class="flex text-xs text-slate-400 mb-1" aria-label="Breadcrumb">
                <ol class="inline-flex items-center space-x-1 md:space-x-2">
                    <li class="inline-flex items-center">
                        <a href="{{ route('dashboard') }}" class="text-slate-400 hover:text-white">Home</a>
                    </li>
                    <li>
                        <div class="flex items-center">
                            <svg class="w-4 h-4 text-slate-600" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 010-1.414 0z" clip-rule="evenodd"></path></svg>
                            <span class="ml-1 text-slate-300 font-medium">Panduan Pengguna Awam</span>
                        </div>
                    </li>
                </ol>
            </nav>
            <h1 class="text-2xl font-bold text-white tracking-tight">❓ Panduan & Petunjuk Penggunaan Sistem</h1>
            <p class="text-xs text-slate-400 mt-1">Panduan langkah-demi-langkah mudah diidentifikasi untuk pengguna awam (Staf TU, Wali Kelas, Kepala Sekolah).</p>
        </div>
    </div>

    <!-- Stepper Navigation Header -->
    <div class="bg-slate-900 border border-slate-800 rounded-2xl p-4 mb-6 shadow-sm overflow-x-auto">
        <div class="flex items-center justify-between min-w-[700px] gap-2 text-xs">
            <button wire:click="setStep('step1')" class="flex-1 p-3 rounded-xl border text-left transition-all {{ $activeStep === 'step1' ? 'bg-sky-600 border-sky-500 text-white font-bold shadow-lg' : 'bg-slate-950 border-slate-800 text-slate-400 hover:text-white' }}">
                <span class="text-[10px] opacity-75 uppercase block mb-0.5">Langkah 1</span>
                <span>1. Profil & Kop Sekolah</span>
            </button>
            <button wire:click="setStep('step2')" class="flex-1 p-3 rounded-xl border text-left transition-all {{ $activeStep === 'step2' ? 'bg-sky-600 border-sky-500 text-white font-bold shadow-lg' : 'bg-slate-950 border-slate-800 text-slate-400 hover:text-white' }}">
                <span class="text-[10px] opacity-75 uppercase block mb-0.5">Langkah 2</span>
                <span>2. Mesin Fingerprint</span>
            </button>
            <button wire:click="setStep('step3')" class="flex-1 p-3 rounded-xl border text-left transition-all {{ $activeStep === 'step3' ? 'bg-sky-600 border-sky-500 text-white font-bold shadow-lg' : 'bg-slate-950 border-slate-800 text-slate-400 hover:text-white' }}">
                <span class="text-[10px] opacity-75 uppercase block mb-0.5">Langkah 3</span>
                <span>3. Data Guru & Siswa</span>
            </button>
            <button wire:click="setStep('step4')" class="flex-1 p-3 rounded-xl border text-left transition-all {{ $activeStep === 'step4' ? 'bg-sky-600 border-sky-500 text-white font-bold shadow-lg' : 'bg-slate-950 border-slate-800 text-slate-400 hover:text-white' }}">
                <span class="text-[10px] opacity-75 uppercase block mb-0.5">Langkah 4</span>
                <span>4. Broadcast WhatsApp</span>
            </button>
            <button wire:click="setStep('step5')" class="flex-1 p-3 rounded-xl border text-left transition-all {{ $activeStep === 'step5' ? 'bg-sky-600 border-sky-500 text-white font-bold shadow-lg' : 'bg-slate-950 border-slate-800 text-slate-400 hover:text-white' }}">
                <span class="text-[10px] opacity-75 uppercase block mb-0.5">Langkah 5</span>
                <span>5. Laporan & Surat SP</span>
            </button>
        </div>
    </div>

    <!-- Step Content Body -->
    <div class="bg-slate-900 border border-slate-800 rounded-2xl p-6 shadow-sm min-h-[400px]">
        @if($activeStep === 'step1')
            <div class="space-y-4">
                <div class="flex items-center gap-3">
                    <div class="w-10 h-10 rounded-xl bg-sky-500/10 border border-sky-500/20 text-sky-400 flex items-center justify-center font-bold text-lg">1</div>
                    <div>
                        <h2 class="text-base font-bold text-white">Langkah 1: Pengaturan Profil, Logo & Kop Surat Sekolah</h2>
                        <p class="text-xs text-slate-400">Menyesuaikan identitas sekolah untuk header laporan dan surat PDF.</p>
                    </div>
                </div>

                <div class="p-4 rounded-xl bg-slate-950 border border-slate-800 text-xs text-slate-300 space-y-3">
                    <p><strong>Cara Pengaturan:</strong></p>
                    <ol class="list-decimal pl-5 space-y-2 leading-relaxed">
                        <li>Buka menu <strong>Pengaturan Sekolah</strong> dari navigasi sebelah kiri.</li>
                        <li>Isi data nama sekolah formal, NPSN, alamat, telepon, dan nama Kepala Sekolah beserta NIP.</li>
                        <li>Unggah logo sekolah, favicon, dan gambar Tanda Tangan Digital Kepala Sekolah.</li>
                        <li>Klik <strong>Simpan Pengaturan</strong>. Seluruh Kop Surat dan Laporan PDF akan otomatis terisi identitas sekolah Anda.</li>
                    </ol>
                </div>
            </div>
        @elseif($activeStep === 'step2')
            <div class="space-y-4">
                <div class="flex items-center gap-3">
                    <div class="w-10 h-10 rounded-xl bg-emerald-500/10 border border-emerald-500/20 text-emerald-400 flex items-center justify-center font-bold text-lg">2</div>
                    <div>
                        <h2 class="text-base font-bold text-white">Langkah 2: Menghubungkan Mesin Fingerprint (Fingerspot Revo W-230N)</h2>
                        <p class="text-xs text-slate-400">Panduan lengkap koneksi mesin biometrik tanpa biaya langganan cloud Fingerspot.</p>
                    </div>
                </div>

                {{-- Local Connector Agent --}}
                <div class="p-5 rounded-2xl bg-slate-950 border border-sky-900/40 text-xs text-slate-300 space-y-4">
                    <div class="flex items-center justify-between pb-3 border-b border-slate-800/80">
                        <div class="flex items-center gap-2">
                            <span class="px-2.5 py-1 rounded-lg bg-sky-500/15 text-sky-400 font-bold text-[11px] border border-sky-500/30">AGENT LOCAL CONNECTOR</span>
                            <h3 class="text-sm font-bold text-white">Integrasi Push via Node.js Agent</h3>
                        </div>
                    </div>

                    <p class="text-slate-300 leading-relaxed">
                        Metode modern "Pull & Push" membaca data secara mandiri dari mesin IP menggunakan Node.js dan mengunggahnya secara real-time ke web server Anda.
                    </p>

                    <div class="grid grid-cols-1 gap-4 pt-1">
                        <div class="p-4 rounded-xl bg-slate-900/80 border border-slate-800 space-y-2.5">
                            <ol class="list-decimal pl-4 space-y-2 text-slate-300 text-[11px] leading-relaxed">
                                <li>Siapkan PC di jaringan lokal sekolah yang terhubung dengan mesin absensi Fingerspot.</li>
                                <li>Buka terminal/CMD di folder <code>local-connector</code>.</li>
                                <li>Jalankan perintah <code class="text-emerald-400 font-bold">node src/agent.js</code> (Anda bisa menggunakan PM2 untuk menjalankannya di background).</li>
                                <li>Daftarkan mesin baru di aplikasi ini dan masukkan Cloud ID/SN dari mesin Anda agar data tidak tertukar.</li>
                                <li>Agent akan mulai mengirimkan data absensi (push log) secara terus menerus ke Dashboard Anda.</li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
        @elseif($activeStep === 'step3')
            <div class="space-y-4">
                <div class="flex items-center gap-3">
                    <div class="w-10 h-10 rounded-xl bg-amber-500/10 border border-amber-500/20 text-amber-400 flex items-center justify-center font-bold text-lg">3</div>
                    <div>
                        <h2 class="text-base font-bold text-white">Langkah 3: Pengelolaan Data Guru & Siswa (Import Excel)</h2>
                        <p class="text-xs text-slate-400">Menambahkan atau mengimpor data personil secara massal.</p>
                    </div>
                </div>

                <div class="p-4 rounded-xl bg-slate-950 border border-slate-800 text-xs text-slate-300 space-y-3">
                    <p><strong>Cara Import Massal:</strong></p>
                    <ol class="list-decimal pl-5 space-y-2 leading-relaxed">
                        <li>Buka menu <strong>Data Personil</strong>.</li>
                        <li>Klik tombol <strong>Import Data Personil (Excel/CSV)</strong>.</li>
                        <li>Unduh format CSV/Excel contoh yang sudah disediakan.</li>
                        <li>Isi data nama, NIS/NIP, kelas, dan nomor HP orang tua. Unggah file dan klik <strong>Mulai Import</strong>.</li>
                    </ol>
                </div>
            </div>
        @elseif($activeStep === 'step4')
            <div class="space-y-4">
                <div class="flex items-center gap-3">
                    <div class="w-10 h-10 rounded-xl bg-purple-500/10 border border-purple-500/20 text-purple-400 flex items-center justify-center font-bold text-lg">4</div>
                    <div>
                        <h2 class="text-base font-bold text-white">Langkah 4: Menghubungkan Broadcast WhatsApp Orang Tua</h2>
                        <p class="text-xs text-slate-400">Notifikasi otomatis harian ke grup WA orang tua murid per kelas.</p>
                    </div>
                </div>

                <div class="p-4 rounded-xl bg-slate-950 border border-slate-800 text-xs text-slate-300 space-y-3">
                    <p><strong>Cara Konfigurasi WA:</strong></p>
                    <ol class="list-decimal pl-5 space-y-2 leading-relaxed">
                        <li>Buka menu <strong>WA Gateway Anti-Block</strong>.</li>
                        <li>Masukkan Token Fonnte / Gateway WA Anda dan klik <strong>Simpan Token</strong>.</li>
                        <li>Hubungkan grup WA kelas dengan memasukkan ID Grup WA.</li>
                        <li>Sistem akan mengirimkan laporan rekap siswa Terlambat/Alpha secara otomatis setiap jam 15:00 WIB.</li>
                    </ol>
                </div>
            </div>
        @elseif($activeStep === 'step5')
            <div class="space-y-4">
                <div class="flex items-center gap-3">
                    <div class="w-10 h-10 rounded-xl bg-rose-500/10 border border-rose-500/20 text-rose-400 flex items-center justify-center font-bold text-lg">5</div>
                    <div>
                        <h2 class="text-base font-bold text-white">Langkah 5: Mengunduh Rekap Absensi & Surat Peringatan PDF</h2>
                        <p class="text-xs text-slate-400">Laporan matriks per kelas dan generasi otomatis SP1, SP2, Surat Panggilan Ortu.</p>
                    </div>
                </div>

                <div class="p-4 rounded-xl bg-slate-950 border border-slate-800 text-xs text-slate-300 space-y-3">
                    <p><strong>Fitur Pelaporan:</strong></p>
                    <ol class="list-decimal pl-5 space-y-2 leading-relaxed">
                        <li><strong>Rekap Per Kelas</strong>: Buka menu Rekap Per Kelas untuk melihat tabel matriks tanggal 1-31 dan ekspor ke Excel.</li>
                        <li><strong>Surat Peringatan</strong>: Buka menu Surat Peringatan & Panggilan untuk melihat rekomendasi otomatis siswa dengan Alpha ≥ 3x dan langsung cetak PDF resmi.</li>
                        <li><strong>Cetak ID Card</strong>: Buka menu Cetak ID Card Siswa untuk mencetak kartu ber-QR Code.</li>
                    </ol>
                </div>
            </div>
        @endif
    </div>
</div>
