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

<?php $__template->section('styles'); ?>
<style>
.tut-hero { text-align:center; margin-bottom:36px; padding:30px 20px; background:linear-gradient(135deg,<?= e($section['color']) ?>10,<?= e($section['color']) ?>05); border-radius:20px; border:1px solid <?= e($section['color']) ?>20; }
.tut-hero-icon { width:64px;height:64px;background:<?= e($section['color']) ?>;border-radius:16px;display:inline-flex;align-items:center;justify-content:center;margin-bottom:14px; }
.tut-category { margin-bottom:32px; }
.tut-category-header { display:flex;align-items:center;gap:12px;margin-bottom:14px;padding-bottom:10px;border-bottom:2px solid #F3F4F6; }
.tut-category-icon { width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center; }
.tut-category-label { font-size:17px;font-weight:700;color:#1A1A2E; }
.tut-grid { display:grid;grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));gap:14px; }
.tut-card { display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:12px;border:1px solid #E5E7EB;background:#fff;text-decoration:none;color:inherit;transition:all .15s ease; }
.tut-card:hover { border-color:var(--card-color);box-shadow:0 4px 12px rgba(0,0,0,.06);transform:translateY(-1px); }
.tut-card-icon { width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.tut-card-title { font-size:14px;font-weight:600;color:#1A1A2E;margin:0 0 2px; }
.tut-card-sub { font-size:12px;color:#6B7280;margin:0; }
.tut-card-num { font-size:11px;font-weight:700;color:#fff;background:var(--card-color);width:22px;height:22px;border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.tut-breadcrumb { display:flex;align-items:center;gap:8px;margin-bottom:20px;font-size:13px; }
.tut-breadcrumb a { color:#6B7280;text-decoration:none; }
.tut-breadcrumb a:hover { color:#8B5CF6; }
.tut-breadcrumb span { color:#9CA3AF; }
</style>
<?php $__template->endSection(); ?>

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

    <div class="tut-breadcrumb">
        <a href="/tutorials"><i data-lucide="graduation-cap" style="width:14px;height:14px;"></i></a>
        <span>/</span>
        <span style="color:#1A1A2E;font-weight:600;"><?= e($section['title']) ?></span>
    </div>

    <div class="tut-hero">
        <div class="tut-hero-icon">
            <i data-lucide="<?= e($section['icon']) ?>" style="width:32px;height:32px;color:#fff;"></i>
        </div>
        <h2 style="font-size:24px;font-weight:800;color:#1A1A2E;margin:0 0 6px;">شروحات <?= e($section['title']) ?></h2>
        <p style="font-size:14px;color:#6B7280;margin:0;"><?= (int) $totalCount ?> شرح تفصيلي</p>
    </div>

    <?php $num = 1; foreach ($categories as $catKey => $cat): ?>
    <div class="tut-category">
        <div class="tut-category-header">
            <div class="tut-category-icon" style="background:<?= e($cat['color']) ?>15;">
                <i data-lucide="<?= e($cat['icon']) ?>" style="width:18px;height:18px;color:<?= e($cat['color']) ?>;"></i>
            </div>
            <span class="tut-category-label"><?= e($cat['label']) ?></span>
            <span style="font-size:12px;color:#9CA3AF;margin-right:auto;"><?= count($cat['tutorials']) ?> شرح</span>
        </div>
        <div class="tut-grid">
            <?php foreach ($cat['tutorials'] as $slug => $tut): ?>
            <a href="/tutorials/<?= e($sectionKey) ?>/<?= e($slug) ?>" class="tut-card" style="--card-color:<?= e($tut['color']) ?>;">
                <div class="tut-card-num" style="background:<?= e($tut['color']) ?>;"><?= $num ?></div>
                <div class="tut-card-icon" style="background:<?= e($tut['color']) ?>12;">
                    <i data-lucide="<?= e($tut['icon']) ?>" style="width:20px;height:20px;color:<?= e($tut['color']) ?>;"></i>
                </div>
                <div style="flex:1;min-width:0;">
                    <p class="tut-card-title"><?= e($tut['title']) ?></p>
                    <p class="tut-card-sub"><?= e($tut['subtitle']) ?></p>
                </div>
                <i data-lucide="chevron-left" style="width:16px;height:16px;color:#D1D5DB;flex-shrink:0;"></i>
            </a>
            <?php $num++; endforeach; ?>
        </div>
    </div>
    <?php endforeach; ?>

</div>

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