<?php 
include 'header.php'; 

// مصفوفة الألوان الفرعونية المستوحاة من الأحجار الكريمة الملكية
$card_colors = ['#1b263b', '#0f4c5c', '#7a2021', '#143d28', '#3d2b1f', '#83630c'];

// مصفوفة التماثيل الحقيقية التي قمت بتنزيلها داخل فولدر statues
$statue_images = ['tut.png', 'anubis.png', 'horus.png', 'obelisk.png'];
?>

<!-- استعادة الخط الفرعوني Reem Kufi والـ Cairo معاً -->
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700&family=Reem+Kufi:wght@500;700&display=swap" rel="stylesheet">

<style>
    body { 
        background-color: #070a0e; /* أسود بازلتي ناعم ومريح للعين */
        font-family: 'Cairo', sans-serif;
        position: relative;
        min-height: 100vh;
        overflow-x: hidden;
    }
    
    /* ─── حاوي الشعلة والدخان ─── */
    .torch-wrapper {
        position: fixed;
        top: 50%;
        transform: translateY(-50%);
        width: 130px; 
        z-index: 10;
        pointer-events: none;
    }
    
    .torch-wrapper.left { left: 25px; }
    .torch-wrapper.right { right: 25px; }
    
    /* الشعلة الحقيقية المضيئة */
    .side-torch {
        width: 100%;
        height: auto;
        opacity: 0.9;
        /* أنيميشن التوهج الاهتزازي للنار الحقيقية */
        animation: fireGlow 2.5s ease-in-out infinite;
    }
    
    .torch-wrapper.right .side-torch {
        transform: scaleX(-1); /* قلب اتجاه الشعلة اليمين للتناسق الهندسي */
    }

    @keyframes fireGlow {
        0% { filter: drop-shadow(0 0 15px rgba(239, 68, 68, 0.5)) drop-shadow(0 0 30px rgba(245, 158, 11, 0.3)) brightness(1); }
        50% { filter: drop-shadow(0 0 25px rgba(239, 68, 68, 0.8)) drop-shadow(0 0 45px rgba(245, 158, 11, 0.6)) brightness(1.15); }
        100% { filter: drop-shadow(0 0 15px rgba(239, 68, 68, 0.5)) drop-shadow(0 0 30px rgba(245, 158, 11, 0.3)) brightness(1); }
    }

    /* ─── تأثير الدخان المتصاعد الفرعوني ─── */
    .smoke-container {
        position: absolute;
        top: -35px; /* مكان خروج الدخان أعلى اللهب */
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 100px;
    }
    
    .smoke-particle {
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 12px;
        height: 12px;
        background: rgba(120, 130, 140, 0.18);
        border-radius: 50%;
        filter: blur(5px);
        animation: smokeRise 3.5s infinite linear;
    }
    
    /* تفاوت خروج جزيئات الدخان لتبدو طبيعية */
    .sm1 { animation-delay: 0s; left: 35%; }
    .sm2 { animation-delay: 1.2s; left: 45%; }
    .sm3 { animation-delay: 2.4s; left: 55%; }

    @keyframes smokeRise {
        0% { transform: translateY(0) scale(1); opacity: 0; }
        10% { opacity: 0.5; }
        50% { background: rgba(140, 150, 160, 0.12); transform: translateY(-50px) scale(3) translateX(-5px); }
        100% { transform: translateY(-110px) scale(5) translateX(10px); opacity: 0; }
    }

    /* ─── شبكة الكروت النظيفة الفخمة ─── */
    .app-launcher {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 25px;
        padding: 40px;
        max-width: 1200px;
        margin: 0 auto;
        position: relative;
        z-index: 2;
    }

    .app-card {
        background: #11161d; /* أسود ملكي مصمت ونظيف */
        border-radius: 12px; 
        height: 180px; /* زيادة الطول قليلاً ليعطي التمثال مساحة مريحة */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        border: 1px solid rgba(212, 175, 55, 0.15); /* خط ذهبي رفيع وناعم جداً */
        box-shadow: 0 10px 25px rgba(0,0,0,0.4);
        overflow: visible; /* للسماح للتمثال بالبروز أثناء الحركة */
    }

    .app-card:hover {
        transform: translateY(-8px);
        border-color: #d4af37; /* الإطار ينور ذهبي صريح عند الهوفر */
        box-shadow: 0 15px 30px rgba(212, 175, 55, 0.2); 
        text-decoration: none;
    }

    /* قاعدة عرض التمثال الدائرية */
    .app-icon {
        width: 75px;
        height: 75px;
        border-radius: 50%; /* قاعدة دائرية فخمة للتماثيل */
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 12px;
        transition: all 0.3s ease;
        position: relative;
        overflow: visible;
        border: 1px solid rgba(212, 175, 55, 0.3);
    }

    .app-card:hover .app-icon {
        box-shadow: 0 0 20px rgba(212, 175, 55, 0.4);
        border-color: #d4af37;
    }

    /* تنسيق صورة التمثال الحقيقي الـ 3D */
    .statue-img {
        max-width: 85%;
        max-height: 85%;
        object-fit: contain;
        /* تأثير ظل ثلاثي الأبعاد حقيقي تحت التمثال */
        filter: drop-shadow(0px 8px 6px rgba(0, 0, 0, 0.6));
        transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    /* أنيميشن بروز التمثال وتوهجه بالذهب عند الهوفر */
    .app-card:hover .statue-img {
        transform: scale(1.25) translateY(-8px);
        filter: drop-shadow(0px 12px 12px rgba(212, 175, 55, 0.65));
    }

    .app-title {
        color: #d4af37; /* ذهبي فرعوني مطفي راقي وثابت */
        font-family: 'Reem Kufi', serif; /* استعادة الخط الفرعوني الأصيل */
        font-weight: 500;
        font-size: 16px;
        transition: color 0.3s ease;
        text-align: center;
        padding: 0 10px;
        margin-top: 5px;
    }

    .app-card:hover .app-title {
        color: #ffffff; /* الاسم يقلب أبيض ناصع عشان يوضح تماماً وقت الاختيار */
        text-shadow: 0 0 8px rgba(212, 175, 55, 0.5);
    }

    /* أنيميشن دخول هادئ للكروت */
    .app-card {
        animation: fadeIn 0.4s ease backwards;
    }
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
    }
</style>

<!-- الشعلة اليسرى بالدخان الخاص بها -->
<div class="torch-wrapper left">
    <div class="smoke-container">
        <span class="smoke-particle sm1"></span>
        <span class="smoke-particle sm2"></span>
        <span class="smoke-particle sm3"></span>
    </div>
    <img src="torch.png" class="side-torch" alt="Torch">
</div>

<!-- الشعلة اليمنى بالدخان الخاص بها -->
<div class="torch-wrapper right">
    <div class="smoke-container">
        <span class="smoke-particle sm1"></span>
        <span class="smoke-particle sm2"></span>
        <span class="smoke-particle sm3"></span>
    </div>
    <img src="torch.png" class="side-torch" alt="Torch">
</div>

<div class="container">
    <div class="app-launcher">
        <?php 
        $i = 0;
        $total_statues = count($statue_images);

        foreach($my_pages as $page): 
            $color = $card_colors[$i % count($card_colors)];
            // اختيار التمثال التالي في المصفوفة بناءً على العداد الدوري
            $current_statue = $statue_images[$i % $total_statues];
            $i++;
        ?>
            <a href="<?= $page['page_url'] ?>" class="app-card" style="animation-delay: <?= $i * 0.05 ?>s">
                <div class="app-icon" style="background-color: <?= $color ?>;">
                    <!-- طباعة صورة التمثال الحقيقي المفرغ -->
                    <img src="statues/<?= $current_statue ?>" class="statue-img" alt="Statue">
                </div>
                <div class="app-title"><?= $page['page_name'] ?></div>
            </a>
        <?php endforeach; ?>

        <?php if($_SESSION['username'] == 'admin'): 
            // اختيار التمثال التالي في الترتيب المتبقي لكرت الإعدادات
            $admin_statue = $statue_images[$i % $total_statues];
        ?>
        <a href="settings.php" class="app-card" style="animation-delay: <?= ($i+1) * 0.05 ?>s">
            <div class="app-icon" style="background-color: #242b35; border: 1px solid #3d4654;">
                <!-- كرت الإعدادات يأخذ تمثال فرعوني حقيقي مكمل للمجموعة -->
                <img src="statues/<?= $admin_statue ?>" class="statue-img" alt="Statue">
            </div>
            <div class="app-title">الإعدادات</div>
        </a>
        <?php endif; ?>
    </div>
</div>

<?php include 'footer.php'; ?>