<?php 
include 'header.php'; 
$subscribe_status = $_GET['subscribe'] ?? null;

// تحديد اتجاه الصفحة والمحاذاة بناءً على اللغة
$dir = ($lang == 'ar') ? 'rtl' : 'ltr';
$text_align = ($lang == 'ar') ? 'text-end' : 'text-start';
$float_align = ($lang == 'ar') ? 'ms-1' : 'me-1';
$arrow_icon = ($lang == 'ar') ? 'fa-chevron-left' : 'fa-chevron-right';
?>
<style>
/* الزر الديناميكي */
.btn-dynamic {
    background-color: var(--primary-gold, #D4AF37);
    color: #1A1A1A;
    border: none;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* حركة مرنة */
}

/* تأثير عند مرور الماوس */
.btn-dynamic:hover {
    background-color: #f1c40f !important; /* لون أفتح قليلاً لإضاءة الزر */
    transform: translateY(-3px); /* رفعة بسيطة للأعلى */
    box-shadow: 0 10px 20px rgba(212, 175, 55, 0.3) !important;
    color: #000 !important;
}

/* تحريك الأيقونة داخل الزر */
.btn-dynamic .btn-icon {
    transition: transform 0.4s ease;
}

.btn-dynamic:hover .btn-icon {
    transform: translateX(<?php echo ($lang == 'ar' ? '-5px' : '5px'); ?>) translateY(-2px) scale(1.1);
}

/* تأثير الضغط (Active) */
.btn-dynamic:active {
    transform: translateY(0);
    box-shadow: 0 5px 10px rgba(0,0,0,0.2) !important;
}

/* وميض خفيف يمر على الزر كل فترة (إضافة الروح) */
@keyframes shine {
    0% { left: -100%; }
    20% { left: 100%; }
    100% { left: 100%; }
}

.btn-dynamic::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    transition: none;
    animation: shine 5s infinite; /* وميض يمر كل 5 ثوانٍ */
}
</style>
<?php if ($subscribe_status): ?>
<section class="container-fluid p-0" id="alertWrapper" style="position: absolute; z-index: 9999; width: 100%;">
    <div class="container mt-3">
        <?php if ($subscribe_status === 'success'): ?>
            <div id="subscribeAlert" class="text-center p-3 rounded-4 shadow-lg" 
                 style="background: linear-gradient(135deg, var(--charcoal, #2d3436), #1a1a1a); 
                        color: var(--primary-gold, #ffd700); 
                        font-weight: 800; 
                        border: 2px solid var(--primary-gold, #ffd700); 
                        direction: <?php echo ($lang == 'ar' ? 'rtl' : 'ltr'); ?>;">
                <i class="fas fa-check-circle me-2 ms-2"></i>
                <?php echo ($lang == 'ar') ? 'تم الاشتراك بنجاح! يسعدنا انضمامك.' : (($lang=='tr') ? 'Abonelik başarılı! Aramıza hoş geldiniz.' : 'Subscribed successfully! Welcome aboard.'); ?>
            </div>
        <?php elseif ($subscribe_status === 'exists'): ?>
            <div id="subscribeAlert" class="text-center p-3 rounded-4 shadow-lg" 
                 style="background: linear-gradient(135deg, var(--charcoal, #2d3436), #1a1a1a); 
                        color: #ffa500; 
                        font-weight: 800; 
                        border: 2px solid #ffa500; 
                        direction: <?php echo ($lang == 'ar' ? 'rtl' : 'ltr'); ?>;">
                <i class="fas fa-exclamation-circle me-2 ms-2"></i>
                <?php echo ($lang == 'ar') ? 'هذا البريد مسجل لدينا مسبقاً.' : (($lang=='tr') ? 'E-posta zaten kayıtlı.' : 'This email is already subscribed.'); ?>
            </div>
        <?php endif; ?>
    </div>
</section>
<?php endif; ?>

<script>
    // 1. وظيفة مسح "subscribe=success" من الرابط فوراً
    if (typeof window.history.replaceState === 'function') {
        const url = new URL(window.location.href);
        url.searchParams.delete('subscribe'); 
        window.history.replaceState({}, '', url.pathname + url.search);
    }

    // 2. التخلص من التنبيه بنعومة
    setTimeout(() => {
        const alertBox = document.getElementById('subscribeAlert');
        const alertWrapper = document.getElementById('alertWrapper');
        if(alertBox) {
            alertBox.style.transition = "all 0.8s ease";
            alertBox.style.opacity = "0";
            alertBox.style.transform = "translateY(-20px)";
            setTimeout(() => {
                if(alertWrapper) alertWrapper.remove();
            }, 800);
        }
    }, 4000);
</script>

<div id="heroSlider" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-inner">
        <?php
        $slides = $conn->query("SELECT * FROM slider");
        $i = 0;
        foreach($slides as $slide):
            // نتحقق إذا كان عربي لنجبر المحاذاة لليمين
            $alignment_style = ($lang == 'ar') ? 'text-align: right !important;' : '';
        ?>
        <div class="carousel-item <?php echo ($i == 0) ? 'active' : ''; ?>">
            <section class="py-5 hero-section" style="background: linear-gradient(45deg, rgba(45,52,54,0.92), rgba(35,35,35,0.85)), url('pngegg2.jpg'); background-size: cover; min-height: 500px; display: flex; align-items: center; color: white; direction: <?php echo $dir; ?>;">
                <div class="container py-5">
                    <div class="row align-items-center">
                        
                        <div class="col-lg-7" style="<?php echo $alignment_style; ?>">
                            <h1 class="display-4 fw-bold mb-4" style="color: var(--primary-gold); text-shadow: 2px 2px 4px rgba(0,0,0,0.5);">
                                <?php echo $slide['title_'.$lang]; ?>
                            </h1>
                            <p class="lead mb-4" style="color: rgba(255,255,255,0.9); font-weight: 400;">
                                <?php echo $slide['description_'.$lang]; ?>
                            </p>
                            <button class="btn btn-gold btn-lg px-5 py-3 shadow" style="background-color: var(--primary-gold); color: #1a1a1a; border: none; font-weight: bold;">
                                <?php echo $words[$lang]['start_journey']; ?>
                            </button>
                        </div>
                        
                        <div class="col-lg-5 text-center">
                            <img src="admin/uploads/<?php echo $slide['image_path']; ?>" class="img-fluid w-75" style="filter: drop-shadow(0 0 20px rgba(255,255,255,0.6)) drop-shadow(0 0 10px rgba(212,175,55,0.4));" alt="Slider Image">
                        </div>
                    </div>
                </div>
            </section>
        </div>
        <?php $i++; endforeach; ?>
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#heroSlider" data-bs-slide="prev">
        <span class="carousel-control-prev-icon"></span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#heroSlider" data-bs-slide="next">
        <span class="carousel-control-next-icon"></span>
    </button>
</div>

<section class="container py-5" style="direction: <?php echo $dir; ?>;">
    <div class="d-flex align-items-center mb-5" style="display: grid !important; grid-template-columns: 1fr 1fr; direction: <?php echo ($lang=='ar' ? 'rtl' : 'ltr'); ?>;">
    
    <div style="text-align: <?php echo ($lang=='ar' ? 'right' : 'left'); ?>;">
        <h2 class="fw-bold m-0" style="color: var(--charcoal);">
            <?php echo $words[$lang]['courses']; ?>
        </h2>
    </div>

    <div style="text-align: <?php echo ($lang=='ar' ? 'left' : 'right'); ?>;">
        <a href="courses.php" class="text-decoration-none text-muted fw-bold d-inline-flex align-items-center">
            <?php if ($lang == 'ar'): ?>
                <i class="fas <?php echo $arrow_icon; ?> me-2" style="color: var(--primary-gold);"></i>
                <?php echo $words[$lang]['view_all']; ?>
            <?php else: ?>
                <?php echo $words[$lang]['view_all']; ?>
                <i class="fas <?php echo $arrow_icon; ?> ms-2" style="color: var(--primary-gold);"></i>
            <?php endif; ?>
        </a>
    </div>

</div>

    <div class="row g-4">
        <?php
        $courses = $conn->query("SELECT * FROM courses LIMIT 3");
        foreach($courses as $course):
        ?>
        <div class="col-md-4">
            <div class="course-card border-0 shadow-sm h-100">
                <div class="card-header-img" style="background-color: #f8f9fa; border-bottom: 3px solid var(--primary-gold); text-center;">
					
					
					<img src="admin/uploads/<?php echo $course['image']; ?>" class="img-fluid" alt="Image">
                </div>

                <div class="p-4" dir="<?php echo $dir; ?>">
                    <h4 class="fw-bold mb-2" style="text-align: <?php echo ($lang=='ar') ? 'right' : 'left'; ?>;">
                        <?php echo $course['title_'.$lang]; ?>
                    </h4>

                    <p class="text-muted small mb-3" style="text-align: <?php echo ($lang=='ar') ? 'right' : 'left'; ?>;">
                        <i class="fas fa-book-open" style="margin-<?php echo ($lang=='ar') ? 'left' : 'right'; ?>: 8px;"></i>
                        <?php echo $course['lessons_count'] . $words[$lang]['lessons_meta']; ?>
                    </p>

                    <hr class="opacity-25">

                   <div class="d-flex justify-content-center mt-3 w-100">
    <?php 
        // 1. إعداد رقم الواتساب (يرجى وضع الرقم الصحيح هنا)
        $whatsapp_number = "962775400430"; 

        // 2. جلب اسم الدورة حسب لغة الصفحة من قاعدة البيانات
        $course_name = $course['title_'.$lang]; 

        // 3. تحديد نص الرسالة المترجم حسب لغة الصفحة $lang
        if ($lang == 'ar') {
            $message_text = "مرحباً، أريد التسجيل في دورة: " . $course_name;
        } elseif ($lang == 'tr') {
            $message_text = "Merhaba, şu kursa kayıt olmak istiyorum: " . $course_name;
        } else {
            $message_text = "Hello, I would like to enroll in the course: " . $course_name;
        }

        // 4. تشفير النص ليكون صالحاً للرابط (URL)
        $wa_url = "https://wa.me/" . $whatsapp_number . "?text=" . urlencode($message_text);
    ?>

    <div class="d-flex gap-2 align-items-center justify-content-center">
        <a href="<?php echo $wa_url; ?>" target="_blank" class="btn btn-gold px-5 py-2 fw-bold shadow-sm d-flex align-items-center" 
           style="background-color: var(--primary-gold); border: none; color: #1a1a1a; border-radius: 10px;">
            <i class="fab fa-whatsapp <?php echo ($lang == 'ar' ? 'ms-2' : 'me-2'); ?>"></i>
            <?php echo $words[$lang]['subscribe_now']; ?>
        </a>

      
    </div>
</div>
                </div>

            </div>
        </div>
        <?php endforeach; ?>
    </div>
</section>

<section class="py-5" style="background-color: rgba(244,244,244,0.6); direction: <?php echo $dir; ?>;">
    <div class="container text-center">
        <h2 class="fw-bold mb-5"><?php echo $words[$lang]['success']; ?></h2>
        <div class="row justify-content-center">
            <?php
            $stories = $conn->query("SELECT * FROM testimonials ORDER BY id DESC LIMIT 2");
            foreach($stories as $story):
            ?>
            <div class="col-lg-5 m-2 p-5 rounded-4 bg-white shadow-sm border-top border-5 border-warning">
                <div class="text-warning mb-3">
                    <i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i>
                </div>
                <p class="lead italic">"<?php echo $story['content_'.$lang]; ?>"</p>
                <h6 class="fw-bold mt-4 mb-0" style="color: var(--charcoal);"><?php echo $story['student_name']; ?></h6>
                <small class="text-muted"><?php echo $words[$lang]['top_student']; ?></small>
            </div>
            <?php endforeach; ?>
        </div>
    </div>
</section>

<section class="container my-5" style="direction: <?php echo $dir; ?>;">
    <div class="p-5 rounded-4 text-center text-white shadow-lg" 
         style="background: var(--charcoal); border: 2px solid var(--primary-gold); position: relative; overflow: hidden;">
        
        <div style="position: absolute; top: -20px; left: -20px; opacity: 0.1; font-size: 150px; color: var(--primary-gold); font-family: serif;">
            <?php echo ($lang=='ar') ? 'ع' : ($lang=='tr' ? 'T' : 'A'); ?>
        </div>
        
        <!-- عنوان النشرة -->
        <h2 class="fw-bold mb-3"><?php echo $words[$lang]['news_title']; ?></h2>
        <!-- وصف النشرة -->
        <p class="mb-4 opacity-75"><?php echo $words[$lang]['news_desc']; ?></p>
        
        <!-- نموذج الاشتراك -->
        <form action="subscribe.php" method="POST" class="row justify-content-center g-2 position-relative">
            <div class="col-md-6">
                <input type="email" name="email" 
                       class="form-control py-3 border-0 shadow-none" 
                       placeholder="<?php echo $words[$lang]['email_placeholder']; ?>" 
                       style="text-align: <?php echo ($lang=='ar') ? 'right' : 'left'; ?>;" 
                       required>
            </div>

           <div class="col-md-2">
    <button type="submit" class="btn btn-dynamic w-100 py-3 fw-bold shadow-sm d-flex align-items-center justify-content-center">
        <span><?php echo $words[$lang]['subscribe_btn']; ?></span>
        <i class="fas fa-paper-plane <?php echo ($lang == 'ar' ? 'me-2' : 'ms-2'); ?> btn-icon"></i>
    </button>
</div>
        </form>
    </div>
</section>


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