<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FitPro - منصة التمارين</title>

    <!-- إعدادات PWA وشعار التطبيق -->
    <link rel="manifest" href="manifest.json">
    <link rel="icon" type="image/png" href="icon.png">
    <link rel="apple-touch-icon" href="icon.png">
    <meta name="theme-color" content="#0f172a">

    <style>
        :root {
            --bg-dark: #0f172a;
            --card-bg: #1e293b;
            --accent-green: #10b981;
            --text-main: #f8fafc;
            --text-sub: #94a3b8;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: system-ui, -apple-system, sans-serif;
        }

        body {
            background-color: var(--bg-dark);
            color: var(--text-main);
            padding: 15px;
            direction: rtl;
        }

        /* هيدر يحتوي على الشعار وشريط علوي أنيق */
        .app-header {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            margin-bottom: 20px;
            padding: 10px;
            background: var(--card-bg);
            border-radius: 12px;
        }

        .app-header img {
            width: 45px;
            height: 45px;
            border-radius: 8px;
            object-fit: contain;
            background: #ffffff;
            padding: 2px;
        }

        .app-header h1 {
            font-size: 22px;
            color: var(--text-main);
            letter-spacing: 0.5px;
        }

        .categories-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            margin-bottom: 20px;
        }

        .cat-card {
            background: var(--card-bg);
            border: 2px solid transparent;
            border-radius: 12px;
            padding: 15px 5px;
            text-align: center;
            cursor: pointer;
            transition: all 0.2s;
        }

        .cat-card.active {
            border-color: var(--accent-green);
        }

        .cat-icon {
            font-size: 24px;
            margin-bottom: 5px;
        }

        .cat-title {
            font-size: 14px;
            font-weight: bold;
        }

        .section-header {
            background: var(--card-bg);
            padding: 15px;
            border-radius: 12px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        .unlock-btn {
            background: var(--accent-green);
            color: #000;
            border: none;
            padding: 10px 15px;
            border-radius: 8px;
            font-weight: bold;
            cursor: pointer;
        }

        .exercises-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
        }

        .ex-card {
            background: var(--card-bg);
            border-radius: 12px;
            overflow: hidden;
            position: relative;
            cursor: pointer;
            height: 180px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* تنسيق الفيديو داخل البطاقة ليظهر كمعاينة حية ومغطية للمساحة */
        .card-video-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 0.6; /* جعل الفيديو خافتاً قليلاً لتبدو الأيقونات واضحة فوقه */
            pointer-events: none;
        }

        .play-preview-btn {
            width: 50px;
            height: 50px;
            background: rgba(16, 185, 129, 0.9);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 20px;
            color: #000;
            z-index: 2;
        }

        .badge {
            position: absolute;
            top: 8px;
            right: 8px;
            padding: 4px 8px;
            border-radius: 6px;
            font-size: 11px;
            font-weight: bold;
            z-index: 3;
        }

        .badge-free {
            background: var(--accent-green);
            color: #000;
        }

        .badge-locked {
            background: #ef4444;
            color: #fff;
        }

        .locked-overlay {
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(15, 23, 42, 0.85);
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 30px;
            z-index: 2;
        }

        /* نافذة العرض المنبثقة (Modal Player) */
        .modal {
            display: none;
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0, 0, 0, 0.9);
            z-index: 100;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            padding: 15px;
        }

        .modal.active {
            display: flex;
        }

        .modal-content {
            width: 100%;
            max-width: 500px;
            background: var(--card-bg);
            border-radius: 16px;
            overflow: hidden;
            position: relative;
        }

        .modal-content video {
            width: 100%;
            max-height: 350px;
            display: block;
        }

        .modal-controls {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px;
            background: #111827;
        }

        .nav-btn {
            background: var(--accent-green);
            color: #000;
            border: none;
            padding: 8px 16px;
            border-radius: 8px;
            font-weight: bold;
            cursor: pointer;
        }

        .close-btn {
            position: absolute;
            top: 10px;
            left: 10px;
            background: rgba(0,0,0,0.6);
            color: #fff;
            border: none;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            font-size: 18px;
            cursor: pointer;
            z-index: 10;
        }
    </style>
</head>
<body>

    <!-- هيدر التطبيق مع اللوجو الشعار الجديد -->
    <div class="app-header">
        <img src="icon.png" alt="FitPro Logo">
        <h1>FITPRO</h1>
    </div>

    <div class="categories-grid">
        <div class="cat-card active" onclick="selectCategory('abs', this)"><div class="cat-icon">🎯</div><div class="cat-title">Abs</div></div>
        <div class="cat-card" onclick="selectCategory('pushups', this)"><div class="cat-icon">🏃</div><div class="cat-title">Push-Ups</div></div>
        <div class="cat-card" onclick="selectCategory('legs', this)"><div class="cat-icon">🦵</div><div class="cat-title">Legs</div></div>
        <div class="cat-card" onclick="selectCategory('cardio', this)"><div class="cat-icon">❤️</div><div class="cat-title">Cardio</div></div>
        <div class="cat-card" onclick="selectCategory('pullups', this)"><div class="cat-icon">🧘</div><div class="cat-title">Pull-Ups</div></div>
        <div class="cat-card" onclick="selectCategory('trx', this)"><div class="cat-icon">👓</div><div class="cat-title">TRX</div></div>
    </div>

    <div class="section-header">
        <div>
            <h2 id="cat-display-title">ABS EXERCISES</h2>
            <small style="color: var(--text-sub)">معاينة مجانية</small>
        </div>
        <button class="unlock-btn" onclick="unlockAll()">🔑 فتح جميع التمارين ($9.99)</button>
    </div>

    <div class="exercises-grid" id="exercises-container"></div>

    <!-- نافذة المشغل المكبرة -->
    <div class="modal" id="video-modal">
        <div class="modal-content">
            <button class="close-btn" onclick="closeModal()">✕</button>
            <video id="modal-video" controls loop autoplay playsinline preload="none"></video>
            <div class="modal-controls">
                <button class="nav-btn" onclick="prevVideo()">◀ السابق</button>
                <span id="video-title" style="font-weight: bold;">تمرين 1</span>
                <button class="nav-btn" onclick="nextVideo()">التالي ▶</button>
            </div>
        </div>
    </div>

    <script>
        let currentCategory = 'abs';
        let currentVideoIndex = 1;

        function selectCategory(cat, element) {
            currentCategory = cat;
            document.querySelectorAll('.cat-card').forEach(c => c.classList.remove('active'));
            if(element) element.classList.add('active');
            
            document.getElementById('cat-display-title').innerText = cat.toUpperCase() + ' EXERCISES';
            renderExercises();
        }

        function renderExercises() {
            const container = document.getElementById('exercises-container');
            container.innerHTML = '';
            const isUnlocked = localStorage.getItem('fitpro_unlocked') === 'true';

            for (let i = 1; i <= 20; i++) {
                const isFree = i <= 2 || isUnlocked;
                const card = document.createElement('div');
                card.className = 'ex-card';
                card.onclick = () => openVideo(i, isFree);

                const videoUrl = `https://res.cloudinary.com/ec8x6eto/video/upload/v1/${currentCategory}_${i}.mp4`;

                card.innerHTML = `
                    <video class="card-video-bg" src="${videoUrl}" preload="metadata" muted playsinline></video>
                    <span class="badge ${isFree ? 'badge-free' : 'badge-locked'}">
                        ${isFree ? 'تمرين ' + i + ' مجاني' : 'تمرين ' + i + ' 🔒'}
                    </span>
                    ${!isFree ? '<div class="locked-overlay">🔒</div>' : ''}
                    <div class="play-preview-btn">▶</div>
                `;
                container.appendChild(card);
            }
        }

        function openVideo(index, isFree) {
            if (!isFree) {
                alert('هذا التمرين مقفل، اضغط على زر الفتح لإلغاء القفل!');
                return;
            }
            currentVideoIndex = index;
            loadModalVideo();
            document.getElementById('video-modal').classList.add('active');
        }

        function loadModalVideo() {
            const videoElement = document.getElementById('modal-video');
            const videoPath = `https://res.cloudinary.com/ec8x6eto/video/upload/v1/${currentCategory}_${currentVideoIndex}.mp4`;
            videoElement.src = videoPath;
            document.getElementById('video-title').innerText = `تمرين ${currentVideoIndex}`;
            videoElement.play();
        }

        function closeModal() {
            const videoElement = document.getElementById('modal-video');
            videoElement.pause();
            videoElement.src = '';
            document.getElementById('video-modal').classList.remove('active');
        }

        function nextVideo() {
            const isUnlocked = localStorage.getItem('fitpro_unlocked') === 'true';
            if (currentVideoIndex < 20) {
                if (currentVideoIndex + 1 > 2 && !isUnlocked) {
                    alert('التمرين التالي مقفل!');
                    return;
                }
                currentVideoIndex++;
                loadModalVideo();
            }
        }

        function prevVideo() {
            if (currentVideoIndex > 1) {
                currentVideoIndex--;
                loadModalVideo();
            }
        }

        function unlockAll() {
            localStorage.setItem('fitpro_unlocked', 'true');
            alert('🎉 تم فتح جميع التمارين بنجاح!');
            renderExercises();
        }

        renderExercises();
    </script>
</body>
</html>
