Devco1 Shell

Filename : index.php
back
<?php include 'includes/config.php'; ?>
<?php include 'includes/header.php'; ?>

<!-- قسم الهيرو المتحرك -->
<section class="hero-section">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6">
                <div class="hero-content">
                    <h1 class="hero-title animate-fade-in">
                        <span class="text-primary">أحدث</span> الهواتف الذكية
                    </h1>
                    <p class="hero-subtitle animate-fade-in-delay">
                        اكتشف أحدث مجموعات الهواتف الذكية بأفضل الأسعار وجودة لا تضاهى
                    </p>
                    <div class="hero-features animate-fade-in-delay-2">
                        <div class="feature-item">
                            <i class="fas fa-shipping-fast"></i>
                            <span>شحن مجاني</span>
                        </div>
                        <div class="feature-item">
                            <i class="fas fa-shield-alt"></i>
                            <span>ضمان لمدة عام</span>
                        </div>
                        <div class="feature-item">
                            <i class="fas fa-headset"></i>
                            <span>دعم فني 24/7</span>
                        </div>
                    </div>
                    <div class="hero-buttons animate-fade-in-delay-3">
                        <a href="#products" class="btn btn-primary btn-lg">
                            <i class="fas fa-shopping-bag me-2"></i>تسوق الآن
                        </a>
                        <a href="#features" class="btn btn-outline-primary btn-lg">
                            <i class="fas fa-play-circle me-2"></i>شاهد العروض
                        </a>
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="hero-image">
                    <div class="floating-phones">
                        <img src="images/hero-phone-1.png" alt="iPhone" class="phone phone-1 animate-float">
                        <img src="images/hero-phone-2.png" alt="Samsung" class="phone phone-2 animate-float-delay">
                        <img src="images/hero-phone-3.png" alt="Huawei" class="phone phone-3 animate-float-delay-2">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="hero-wave">
        <svg viewBox="0 0 1200 120" preserveAspectRatio="none">
            <path d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z" opacity=".25" class="shape-fill"></path>
            <path d="M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60.65-49.24V0Z" opacity=".5" class="shape-fill"></path>
            <path d="M0,0V5.63C149.93,59,314.09,71.32,475.83,42.57c43-7.64,84.23-20.12,127.61-26.46,59-8.63,112.48,12.24,165.56,35.4C827.93,77.22,886,95.24,951.2,90c86.53-7,172.46-45.71,248.8-84.81V0Z" class="shape-fill"></path>
        </svg>
    </div>
</section>

<!-- قسم المميزات -->
<section id="features" class="features-section py-5">
    <div class="container">
        <div class="row text-center mb-5">
            <div class="col-12">
                <h2 class="section-title">لماذا تختار متجرنا؟</h2>
                <p class="section-subtitle">نقدم لكم أفضل تجربة تسوق إلكتروني</p>
            </div>
        </div>
        <div class="row">
            <div class="col-md-3 col-sm-6 mb-4">
                <div class="feature-card animate-on-scroll">
                    <div class="feature-icon">
                        <i class="fas fa-bolt"></i>
                    </div>
                    <h4>توصيل سريع</h4>
                    <p>توصيل خلال 24 ساعة في صنعاء</p>
                </div>
            </div>
            <div class="col-md-3 col-sm-6 mb-4">
                <div class="feature-card animate-on-scroll">
                    <div class="feature-icon">
                        <i class="fas fa-lock"></i>
                    </div>
                    <h4>دفع آمن</h4>
                    <p>أنظمة دفع إلكتروني آمنة ومشفرة</p>
                </div>
            </div>
            <div class="col-md-3 col-sm-6 mb-4">
                <div class="feature-card animate-on-scroll">
                    <div class="feature-icon">
                        <i class="fas fa-sync-alt"></i>
                    </div>
                    <h4>إرجاع مجاني</h4>
                    <p>إمكانية الإرجاع خلال 14 يوم من الشراء</p>
                </div>
            </div>
            <div class="col-md-3 col-sm-6 mb-4">
                <div class="feature-card animate-on-scroll">
                    <div class="feature-icon">
                        <i class="fas.a-trophy"></i>
                    </div>
                    <h4>جودة مضمونة</h4>
                    <p>منتجات أصلية بضمان من الشركة المصنعة</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- قسم العروض الخاصة -->
<section class="offers-section py-5 bg-light">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6">
                <div class="offer-content">
                    <span class="offer-badge">عرض خاص</span>
                    <h2 class="offer-title">خصم يصل إلى 30%</h2>
                    <p class="offer-description">
                        استفد من عروضنا الخاصة على أحدث الهواتف الذكية. عروض محدودة لفترة قصيرة!
                    </p>
                    <div class="countdown-timer">
                        <div class="countdown-item">
                            <span class="countdown-number" id="days">00</span>
                            <span class="countdown-label">أيام</span>
                        </div>
                        <div class="countdown-item">
                            <span class="countdown-number" id="hours">00</span>
                            <span class="countdown-label">ساعات</span>
                        </div>
                        <div class="countdown-item">
                            <span class="countdown-number" id="minutes">00</span>
                            <span class="countdown-label">دقائق</span>
                        </div>
                        <div class="countdown-item">
                            <span class="countdown-number" id="seconds">00</span>
                            <span class="countdown-label">ثواني</span>
                        </div>
                    </div>
                    <a href="#products" class="btn btn-danger btn-lg mt-3">
                        <i class="fas fa-fire me-2"></i>استفد من العرض
                    </a>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="offer-image">
                    <img src="images/special-offer.png" alt="عرض خاص" class="img-fluid animate-pulse">
                    <div class="discount-circle">
                        <span>30%</span>
                        <small>خصم</small>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- قسم المنتجات -->
<section id="products" class="products-section py-5">
    <div class="container">
        <div class="row mb-4">
            <div class="col-12">
                <div class="search-filter bg-white p-4 rounded shadow-sm">
                    <div class="row g-3">
                        <div class="col-md-4">
                            <div class="search-box">
                                <i class="fas fa-search search-icon"></i>
                                <input type="text" class="form-control search-input" placeholder="ابحث عن هاتف..." id="searchInput">
                            </div>
                        </div>
                        <div class="col-md-3">
                            <select class="form-control select-custom" id="brandFilter">
                                <option value="">جميع الماركات</option>
                                <option value="Apple">Apple</option>
                                <option value="Samsung">Samsung</option>
                                <option value="Huawei">Huawei</option>
                                <option value="Xiaomi">Xiaomi</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <select class="form-control select-custom" id="priceFilter">
                                <option value="">جميع الأسعار</option>
                                <option value="0-2000">أقل من 2000</option>
                                <option value="2000-3000">2000 - 3000</option>
                                <option value="3000-5000">3000 - 5000</option>
                                <option value="5000-10000">أكثر من 5000</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <button class="btn btn-primary w-100 filter-btn" id="filterBtn">
                                <i class="fas fa-filter me-2"></i>تصفية
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row" id="productsContainer">
            <?php
            try {
                $stmt = $pdo->query("
                    SELECT p.*, pi.image_url 
                    FROM products p 
                    LEFT JOIN product_images pi ON p.id = pi.product_id AND pi.is_main = 1 
                    WHERE p.stock_quantity > 0
                    ORDER BY p.created_at DESC
                ");
                
                while ($product = $stmt->fetch()) {
                    $discount = '';
                    if ($product['old_price'] && $product['old_price'] > $product['price']) {
                        $discount_percent = round((($product['old_price'] - $product['price']) / $product['old_price']) * 100);
                        $discount = '<span class="discount-badge">خصم ' . $discount_percent . '%</span>';
                    }
            ?>
            <div class="col-lg-3 col-md-4 col-sm-6 mb-4">
                <div class="product-card animate-on-scroll">
                    <?php if ($discount): ?>
                    <div class="product-badges">
                        <?php echo $discount; ?>
                        <span class="new-badge">جديد</span>
                    </div>
                    <?php endif; ?>
                    
                    <div class="product-image">
                        <img src="<?php echo $product['image_url'] ?: 'images/placeholder.jpg'; ?>" 
                             class="product-img" 
                             alt="<?php echo htmlspecialchars($product['name']); ?>"
                             onerror="this.src='images/placeholder.jpg'">
                        <div class="product-overlay">
                            <button class="btn btn-primary quick-view" data-product-id="<?php echo $product['id']; ?>">
                                <i class="fas fa-eye"></i>
                            </button>
                            <button class="btn btn-success add-to-cart-btn" data-product-id="<?php echo $product['id']; ?>">
                                <i class="fas fa-cart-plus"></i>
                            </button>
                        </div>
                    </div>
                    
                    <div class="product-info">
                        <h5 class="product-title"><?php echo htmlspecialchars($product['name']); ?></h5>
                        <p class="product-brand"><?php echo htmlspecialchars($product['brand']); ?></p>
                        
                        <div class="product-price">
                            <?php if ($product['old_price']): ?>
                            <span class="old-price">$<?php echo $product['old_price']; ?></span>
                            <?php endif; ?>
                            <span class="current-price">$<?php echo $product['price']; ?></span>
                        </div>
                        
                        <div class="product-meta">
                            <div class="stock-info">
                                <i class="fas fa-box <?php echo $product['stock_quantity'] > 10 ? 'text-success' : 'text-warning'; ?>"></i>
                                <span><?php echo $product['stock_quantity']; ?> متوفر</span>
                            </div>
                            <div class="rating">
                                <i class="fas fa-star text-warning"></i>
                                <span>4.5</span>
                            </div>
                        </div>
                        
                        <div class="product-actions">
                            <a href="product.php?id=<?php echo $product['id']; ?>" class="btn btn-outline-primary btn-sm">
                                <i class="fas fa-eye me-1"></i> التفاصيل
                            </a>
                            <button class="btn btn-primary btn-sm add-to-cart" data-product-id="<?php echo $product['id']; ?>">
                                <i class="fas fa-cart-plus me-1"></i> أضف للسلة
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <?php
                }
            } catch (PDOException $e) {
                echo '<div class="col-12"><div class="alert alert-danger">خطأ في تحميل المنتجات: ' . $e->getMessage() . '</div></div>';
            }
            ?>
        </div>
        
        <?php if (empty($products)): ?>
        <div class="row">
            <div class="col-12 text-center py-5">
                <div class="empty-state">
                    <i class="fas fa-mobile-alt fa-4x text-muted mb-3"></i>
                    <h4 class="text-muted">لا توجد منتجات حالياً</h4>
                    <p class="text-muted">سيتم إضافة منتجات جديدة قريباً</p>
                </div>
            </div>
        </div>
        <?php endif; ?>
    </div>
</section>

<!-- قسم العلامات التجارية -->
<section class="brands-section py-4 bg-white">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="brands-slider">
                    <div class="brand-item">
                        <img src="images/brands/apple.png" alt="Apple">
                    </div>
                    <div class="brand-item">
                        <img src="images/brands/samsung.png" alt="Samsung">
                    </div>
                    <div class="brand-item">
                        <img src="images/brands/huawei.png" alt="Huawei">
                    </div>
                    <div class="brand-item">
                        <img src="images/brands/xiaomi.png" alt="Xiaomi">
                    </div>
                    <div class="brand-item">
                        <img src="images/brands/oppo.png" alt="Oppo">
                    </div>
                    <div class="brand-item">
                        <img src="images/brands/nokia.png" alt="Nokia">
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- قسم الإحصائيات -->
<section class="stats-section py-5 bg-primary text-white">
    <div class="container">
        <div class="row text-center">
            <div class="col-md-3 col-sm-6 mb-4">
                <div class="stat-item">
                    <i class="fas fa-mobile-alt fa-3x mb-3"></i>
                    <h3 class="stat-number" data-count="500">0</h3>
                    <p class="stat-label">منتج متوفر</p>
                </div>
            </div>
            <div class="col-md-3 col-sm-6 mb-4">
                <div class="stat-item">
                    <i class="fas fa-users fa-3x mb-3"></i>
                    <h3 class="stat-number" data-count="2500">0</h3>
                    <p class="stat-label">عميل سعيد</p>
                </div>
            </div>
            <div class="col-md-3 col-sm-6 mb-4">
                <div class="stat-item">
                    <i class="fas fa-shopping-cart fa-3x mb-3"></i>
                    <h3 class="stat-number" data-count="1500">0</h3>
                    <p class="stat-label">طلب مكتمل</p>
                </div>
            </div>
            <div class="col-md-3 col-sm-6 mb-4">
                <div class="stat-item">
                    <i class="fas fa-truck fa-3x mb-3"></i>
                    <h3 class="stat-number" data-count="24">0</h3>
                    <p class="stat-label">ساعة توصيل</p>
                </div>
            </div>
        </div>
    </div>
</section>

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

<style>
/* التصميم الجديد */
.hero-section {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 100px 0 80px;
    position: relative;
    overflow: hidden;
}

.hero-title {
    font-size: 3.5rem;
    font-weight: bold;
    margin-bottom: 1rem;
}

.hero-subtitle {
    font-size: 1.3rem;
    margin-bottom: 2rem;
    opacity: 0.9;
}

.hero-features {
    display: flex;
    gap: 2rem;
    margin-bottom: 2rem;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.feature-item i {
    color: #ffd700;
}

.hero-image {
    position: relative;
    height: 400px;
}

.floating-phones {
    position: relative;
    height: 100%;
}

.phone {
    position: absolute;
    max-height: 300px;
    transition: transform 0.3s ease;
}

.phone-1 {
    left: 10%;
    top: 10%;
    z-index: 3;
}

.phone-2 {
    right: 20%;
    top: 20%;
    z-index: 2;
}

.phone-3 {
    left: 30%;
    bottom: 10%;
    z-index: 1;
}

.hero-wave {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.hero-wave svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 80px;
}

.hero-wave .shape-fill {
    fill: #FFFFFF;
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.animate-fade-in { animation: fadeIn 1s ease-out; }
.animate-fade-in-delay { animation: fadeIn 1s ease-out 0.3s both; }
.animate-fade-in-delay-2 { animation: fadeIn 1s ease-out 0.6s both; }
.animate-fade-in-delay-3 { animation: fadeIn 1s ease-out 0.9s both; }

.animate-float { animation: float 3s ease-in-out infinite; }
.animate-float-delay { animation: float 3s ease-in-out 1s infinite; }
.animate-float-delay-2 { animation: float 3s ease-in-out 2s infinite; }

.animate-pulse { animation: pulse 2s ease-in-out infinite; }

.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease-out;
}

.animate-on-scroll.animated {
    opacity: 1;
    transform: translateY(0);
}

/* Features Section */
.features-section {
    background: #f8f9fa;
}

.feature-card {
    background: white;
    padding: 2rem 1rem;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-10px);
}

.feature-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

.feature-icon i {
    font-size: 2rem;
    color: white;
}

/* Product Cards */
.product-card {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    position: relative;
}

.product-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.2);
}

.product-badges {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
}

.discount-badge, .new-badge {
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: bold;
    margin-bottom: 5px;
    display: block;
}

.discount-badge {
    background: #dc3545;
    color: white;
}

.new-badge {
    background: #28a745;
    color: white;
}

.product-image {
    position: relative;
    overflow: hidden;
    height: 200px;
}

.product-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.product-card:hover .product-img {
    transform: scale(1.1);
}

.product-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.product-card:hover .product-overlay {
    opacity: 1;
}

.product-info {
    padding: 1.5rem;
}

.product-title {
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.product-brand {
    color: #6c757d;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.product-price {
    margin-bottom: 1rem;
}

.old-price {
    text-decoration: line-through;
    color: #6c757d;
    margin-left: 0.5rem;
}

.current-price {
    font-size: 1.3rem;
    font-weight: bold;
    color: #dc3545;
}

.product-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

/* Offers Section */
.offers-section {
    position: relative;
}

.offer-badge {
    background: #dc3545;
    color: white;
    padding: 5px 15px;
    border-radius: 20px;
    font-weight: bold;
}

.offer-title {
    font-size: 2.5rem;
    font-weight: bold;
    margin: 1rem 0;
}

.countdown-timer {
    display: flex;
    gap: 1rem;
    margin: 2rem 0;
}

.countdown-item {
    background: white;
    padding: 1rem;
    border-radius: 10px;
    text-align: center;
    min-width: 80px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.countdown-number {
    font-size: 2rem;
    font-weight: bold;
    display: block;
}

.countdown-label {
    font-size: 0.8rem;
    color: #6c757d;
}

.offer-image {
    position: relative;
}

.discount-circle {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 100px;
    height: 100px;
    background: #dc3545;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    animation: pulse 2s infinite;
}

/* Brands Section */
.brands-slider {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    gap: 2rem;
}

.brand-item {
    opacity: 0.6;
    transition: opacity 0.3s ease;
    filter: grayscale(100%);
}

.brand-item:hover {
    opacity: 1;
    filter: grayscale(0%);
}

.brand-item img {
    height: 40px;
    width: auto;
}

/* Stats Section */
.stat-item {
    padding: 1rem;
}

.stat-number {
    font-size: 3rem;
    font-weight: bold;
    margin: 1rem 0;
}

/* Search Box */
.search-box {
    position: relative;
}

.search-icon {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #6c757d;
}

.search-input {
    padding-right: 45px;
}

.select-custom {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: left 0.75rem center;
    background-repeat: no-repeat;
    background-size: 16px 12px;
    padding-left: 2.5rem;
}

/* Responsive */
@media (max-width: 768px) {
    .hero-title {
        font-size: 2.5rem;
    }
    
    .hero-features {
        flex-direction: column;
        gap: 1rem;
    }
    
    .countdown-timer {
        justify-content: center;
    }
    
    .phone {
        max-height: 200px;
    }
}
</style>

<script>
// Countdown Timer
function updateCountdown() {
    const targetDate = new Date();
    targetDate.setDate(targetDate.getDate() + 7); // 7 days from now
    
    const now = new Date().getTime();
    const distance = targetDate - now;
    
    const days = Math.floor(distance / (1000 * 60 * 60 * 24));
    const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = Math.floor((distance % (1000 * 60)) / 1000);
    
    document.getElementById('days').textContent = days.toString().padStart(2, '0');
    document.getElementById('hours').textContent = hours.toString().padStart(2, '0');
    document.getElementById('minutes').textContent = minutes.toString().padStart(2, '0');
    document.getElementById('seconds').textContent = seconds.toString().padStart(2, '0');
}

// Animate numbers
function animateNumbers() {
    const counters = document.querySelectorAll('.stat-number');
    
    counters.forEach(counter => {
        const target = parseInt(counter.getAttribute('data-count'));
        const increment = target / 100;
        let current = 0;
        
        const timer = setInterval(() => {
            current += increment;
            if (current >= target) {
                current = target;
                clearInterval(timer);
            }
            counter.textContent = Math.floor(current);
        }, 20);
    });
}

// Scroll animations
function checkScroll() {
    const elements = document.querySelectorAll('.animate-on-scroll');
    
    elements.forEach(element => {
        const elementTop = element.getBoundingClientRect().top;
        const windowHeight = window.innerHeight;
        
        if (elementTop < windowHeight - 100) {
            element.classList.add('animated');
        }
    });
}

// Initialize
document.addEventListener('DOMContentLoaded', function() {
    updateCountdown();
    setInterval(updateCountdown, 1000);
    
    // Start number animation when stats section is in view
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                animateNumbers();
                observer.unobserve(entry.target);
            }
        });
    });
    
    const statsSection = document.querySelector('.stats-section');
    if (statsSection) {
        observer.observe(statsSection);
    }
    
    // Check scroll on load and scroll
    checkScroll();
    window.addEventListener('scroll', checkScroll);
    
    // Add to cart functionality
    document.querySelectorAll('.add-to-cart, .add-to-cart-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            const productId = this.dataset.productId;
            // Add your add to cart logic here
            alert('تمت إضافة المنتج إلى السلة');
        });
    });
});
</script>