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

<?php $__template->section('content'); ?>
<div style="max-width:900px;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>

    <div style="display:grid;grid-template-columns:repeat(auto-fill, minmax(320px, 1fr));gap:20px;">
        <?php foreach ($modules as $key => $module): ?>
        <a href="/tutorials/<?= e($key) ?>" class="card" style="padding:28px;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:100px;height:100px;background:<?= e($module['color']) ?>;opacity:0.05;border-radius:0 0 0 100px;"></div>
            <div style="display:flex;align-items:flex-start;gap:16px;">
                <div style="width:56px;height:56px;background:<?= e($module['color']) ?>15;border-radius:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                    <i data-lucide="<?= e($module['icon']) ?>" style="width:28px;height:28px;color:<?= e($module['color']) ?>;"></i>
                </div>
                <div style="flex:1;">
                    <h3 style="font-size:18px;font-weight:700;color:#1A1A2E;margin:0 0 4px;"><?= e($module['title']) ?></h3>
                    <p style="font-size:13px;color:#6B7280;margin:0 0 12px;"><?= e($module['subtitle']) ?></p>
                    <span style="display:inline-flex;align-items:center;gap:4px;background:<?= e($module['color']) ?>15;color:<?= e($module['color']) ?>;padding:4px 10px;border-radius:20px;font-size:12px;font-weight:600;">
                        <i data-lucide="book-open" style="width:12px;height:12px;"></i>
                        <?= (int) $module['count'] ?> شرح
                    </span>
                </div>
            </div>
        </a>
        <?php endforeach; ?>
    </div>

</div>

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