<?php $__template->layout('Layout.main'); ?>
<?php $__template->section('title'); ?>الشروحات<?php $__template->endSection(); ?>

<?php $__template->section('content'); ?>
<div style="max-width:1000px;margin:0 auto;">

    <div style="text-align:center;margin-bottom:40px;">
        <div style="width:80px;height:80px;background:linear-gradient(135deg,#8B5CF6,#6366F1);border-radius:20px;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;">
            <i data-lucide="graduation-cap" style="width:40px;height:40px;color:#fff;"></i>
        </div>
        <h2 style="font-size:28px;font-weight:800;color:#1A1A2E;margin:0 0 8px;">مركز الشروحات</h2>
        <p style="font-size:15px;color:#6B7280;margin:0;">شروحات تفصيلية خطوة بخطوة لكل أقسام النظام — مرتبة حسب القائمة الجانبية</p>
    </div>

    <?php foreach ($groups as $groupLabel => $modules): ?>
    <div style="margin-bottom:36px;">
        <div style="display:flex;align-items:center;gap:10px;margin-bottom:16px;padding-bottom:8px;border-bottom:2px solid #F3F4F6;">
            <span style="font-size:13px;font-weight:700;color:#6B7280;text-transform:uppercase;letter-spacing:0.5px;"><?= e($groupLabel) ?></span>
        </div>
        <div style="display:grid;grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));gap:16px;">
            <?php foreach ($modules as $key => $module): ?>
            <a href="/tutorials/<?= e($key) ?>" class="card" style="padding:24px;text-decoration:none;color:inherit;transition:all .2s;border:2px solid transparent;position:relative;overflow:hidden;">
                <div style="position:absolute;top:0;right:0;width:80px;height:80px;background:<?= e($module['color']) ?>;opacity:0.05;border-radius:0 0 0 80px;"></div>
                <div style="display:flex;align-items:flex-start;gap:14px;">
                    <div style="width:48px;height:48px;background:<?= e($module['color']) ?>15;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                        <i data-lucide="<?= e($module['icon']) ?>" style="width:24px;height:24px;color:<?= e($module['color']) ?>;"></i>
                    </div>
                    <div style="flex:1;">
                        <h3 style="font-size:16px;font-weight:700;color:#1A1A2E;margin:0 0 4px;"><?= e($module['title']) ?></h3>
                        <p style="font-size:12px;color:#6B7280;margin:0 0 10px;"><?= e($module['subtitle']) ?></p>
                        <span style="display:inline-flex;align-items:center;gap:4px;background:<?= e($module['color']) ?>15;color:<?= e($module['color']) ?>;padding:3px 8px;border-radius:16px;font-size:11px;font-weight:600;">
                            <i data-lucide="book-open" style="width:11px;height:11px;"></i>
                            <?= (int) $module['count'] ?> شرح
                        </span>
                    </div>
                </div>
            </a>
            <?php endforeach; ?>
        </div>
    </div>
    <?php endforeach; ?>

</div>

<script>document.addEventListener('DOMContentLoaded', function() { if (typeof lucide !== 'undefined') lucide.createIcons(); });</script>
<?php $__template->endSection(); ?>
