@extends('layouts.admin')
@section('title', 'Bantuan')
@section('page-title', 'Bantuan')
@section('content')
<h1 class="section-title">Pusat Bantuan Admin</h1>
<p class="section-sub">Panduan penggunaan panel administrasi PBPMD.</p>
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem;margin-bottom:2rem">
    @php $helps=[['📖','Panduan Admin','Cara mengelola pendaftaran dan verifikasi','var(--g100)','var(--g700)'],['🎥','Video Tutorial','Panduan visual penggunaan sistem','#dbeafe','#2563eb'],['💬','Hubungi Developer','Laporkan bug atau minta fitur baru','#fef3c7','#d97706'],['📋','Changelog','Riwayat pembaruan sistem','#f3e8ff','#9333ea']]; @endphp
    @foreach($helps as $h)
    <div class="card" style="cursor:pointer;text-align:center;transition:all .2s">
        <div style="width:48px;height:48px;background:{{ $h[3] }};border-radius:12px;display:flex;align-items:center;justify-content:center;margin:0 auto .75rem;font-size:1.25rem">{{ $h[0] }}</div>
        <h4 style="font-size:.9rem;font-weight:600;color:{{ $h[4] }};margin-bottom:.25rem">{{ $h[1] }}</h4>
        <p style="font-size:.78rem;color:var(--gr500)">{{ $h[2] }}</p>
    </div>
    @endforeach
</div>
<div class="card" style="text-align:center;background:var(--g50);border-color:var(--g200)">
    <p style="font-size:.88rem;font-weight:500;color:var(--g800);margin-bottom:.75rem">Butuh bantuan teknis?</p>
    <div style="display:flex;gap:.75rem;justify-content:center"><a href="mailto:dev@pbpmd.ac.id" class="btn-outline-sm">📧 Email Developer</a><a href="#" class="btn-action" style="font-size:.82rem">💬 Live Chat</a></div>
</div>
@endsection