<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>متجر الفخامة | لتجربة تسوق فريدة</title>
    <!-- استدعاء خط تاجوول وأيقونات FontAwesome للتصميم الحديث -->
    <link rel="stylesheet" href="https://googleapis.com">
    <link rel="stylesheet" href="https://cloudflare.com">
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <!-- شريط الإعلانات العلوي متحرك -->
    <div class="top-bar">
        <p>✨ شحن مجاني للطلبات أكثر من 300 ريال + خصم 15% باستخدام كود: <span class="badge">LUX15</span></p>
    </div>

    <!-- القائمة العلوية الذكية -->
    <header class="main-header">
        <div class="container header-flex">
            <div class="logo-zone">
                <i class="fa-solid fa-gem gold-text"></i>
                <h1 class="logo">LUXURY<span class="gold-text">STORE</span></h1>
            </div>
            
            <nav class="nav-links">
                <a href="#" class="nav-item active">الرئيسية</a>
                <a href="#" class="nav-item">وصل حديثاً</a>
                <a href="#" class="nav-item">الأكثر مبيعاً</a>
                <a href="#" class="nav-item">التخفيضات <span class="hot-tag">HOT</span></a>
            </nav>

            <div class="header-actions">
                <div class="search-box">
                    <input type="text" placeholder="ابحث عن منتجك...">
                    <i class="fa-solid fa-magnifying-glass"></i>
                </div>
                <div class="action-btn cart-btn">
                    <i class="fa-solid fa-bag-shopping"></i>
                    <span class="cart-count">0</span>
                </div>
            </div>
        </div>
    </header>

    <!-- البانر الرئيسي الفاخر -->
    <section class="hero-banner">
        <div class="hero-overlay"></div>
        <div class="container hero-content">
            <span class="hero-subtitle">مجموعة صيف 2026 الحصرية</span>
            <h2 class="hero-title">التميز ليس خياراً، بل أسلوب حياة</h2>
            <p class="hero-desc">اكتشف أرقى المنتجات العالمية المصممة خصيصاً لتناسب ذوقك الرفيع مع ضمان الجودة الفائقة.</p>
            <div class="hero-btns">
                <button class="btn btn-gold">تسوق التشكيلة <i class="fa-solid fa-arrow-left"></i></button>
                <button class="btn btn-outline">استكشف المزيد</button>
            </div>
        </div>
    </section>

    <!-- أقسام المتجر السريعة -->
    <section class="categories-section container">
        <div class="section-header">
            <h3 class="section-title">تصفح حسب القسم</h3>
            <p class="section-subtitle">اختر الفئة التي تبحث عنها للوصول السريع</p>
        </div>
        <div class="categories-grid">
            <div class="cat-card">
                <i class="fa-solid fa-clock"></i>
                <h4>ساعات فاخرة</h4>
            </div>
            <div class="cat-card">
                <i class="fa-solid fa-headphones-simple"></i>
                <h4>صوتيات ذكية</h4>
            </div>
            <div class="cat-card">
                <i class="fa-solid fa-glasses"></i>
                <h4>نظارات عصرية</h4>
            </div>
            <div class="cat-card">
                <i class="fa-solid fa-briefcase"></i>
                <h4>حقائب جلدية</h4>
            </div>
        </div>
    </section>

    <!-- شبكة المنتجات الحديثة -->
    <main class="products-section container">
        <div class="section-header">
            <h3 class="section-title">المنتجات المميزة</h3>
            <p class="section-subtitle">قطع مختارة بعناية تجمع بين الأناقة والعملية</p>
        </div>
        
        <div class="products-grid">
            
            <!-- منتج 1 -->
            <div class="product-card">
                <div class="product-badge sale">خصم 20%</div>
                <div class="product-image">
                    <img src="https://unsplash.com" alt="ساعة فاخرة">
                    <div class="product-actions-overlay">
                        <button class="action-icon" title="إضافة للمفضلة"><i class="fa-regular fa-heart"></i></button>
                        <button class="action-icon" title="نظرة سريعة"><i class="fa-regular fa-eye"></i></button>
                    </div>
                </div>
                <div class="product-info">
                    <span class="product-cat">ساعات</span>
                    <h4 class="product-title">ساعة كرونوغراف كلاسيكية مطلية بالذهب</h4>
                    <div class="product-rating">
                        <i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
                        <span>(45)</span>
                    </div>
                    <div class="price-box">
                        <span class="price-current">450 ريال</span>
                        <span class="price-old">560 ريال</span>
                    </div>
                    <button class="btn-add-cart"><i class="fa-solid fa-cart-plus"></i> إضافة إلى السلة</button>
                </div>
            </div>

            <!-- منتج 2 -->
            <div class="product-card">
                <div class="product-badge hot">شائع</div>
                <div class="product-image">
                    <img src="https://unsplash.com" alt="سماعات">
                    <div class="product-actions-overlay">
                        <button class="action-icon" title="إضافة للمفضلة"><i class="fa-regular fa-heart"></i></button>
                        <button class="action-icon" title="نظرة سريعة"><i class="fa-regular fa-eye"></i></button>
                    </div>
                </div>
                <div class="product-info">
                    <span class="product-cat">إلكترونيات</span>
                    <h4 class="product-title">سماعات رأس لاسلكية عازلة للضوضاء المحيطة</h4>
                    <div class="product-rating">
                        <i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star-half-stroke"></i>
                        <span>(89)</span>
                    </div>
                    <div class="price-box">
                        <span class="price-current">299 ريال</span>
                    </div>
                    <button class="btn-add-cart"><i class="fa-solid fa-cart-plus"></i> إضافة إلى السلة</button>
                </div>
            </div>

            <!-- منتج 3 -->
            <div class="product-card">
                <div class="product-image">
                    <img src="https://unsplash.com" alt="حقيبة">
                    <div class="product-actions-overlay">
                        <button class="action-icon" title="إضافة للمفضلة"><i class="fa-regular fa-heart"></i></button>
                        <button class="action-icon" title="نظرة سريعة"><i class="fa-regular fa-eye"></i></button>
                    </div>
                </div>
                <div class="product-info">
                    <span class="product-cat">حقائب</span>
                    <h4 class="product-title">حقيبة يد نسائية من الجلد الطبيعي الفاخر</h4>
                    <div class="product-rating">
                        <i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-regular fa-star"></i>
                        <span>(12)</span>
                    </div>
                    <div class="price-box">
                        <span class="price-current">380 ريال</span>
                    </div>
                    <button class="btn-add-cart"><i class="fa-solid fa-cart-plus"></i> إضافة إلى السلة</button>
                </div>
            </div>

            <!-- منتج 4 -->
            <div class="product-card">
                <div class="product-badge sale">خصم 15%</div>
                <div class="product-image">
                    <img src="https://unsplash.com" alt="نظارة">
                    <div class="product-actions-overlay">
                        <button class="action-icon" title="إضافة للمفضلة"><i class="fa-regular fa-heart"></i></button>
                        <button class="action-icon" title="نظرة سريعة"><i class="fa-regular fa-eye"></i></button>
                    </div>
                </div>
                <div class="product-info">
                    <span class="product-cat">نظارات</span>
                    <h4 class="product-title">نظارة شمسية كلاسيكية بحماية UV400 كاملة</h4>
                    <div class="product-rating">
                        <i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
                        <span>(104)</span>
                    </div>
                    <div class="price-box">
                        <span class="price-current">190 ريال</span>
                        <span class="price-old">225 ريال</span>
                    </div>
                    <button class="btn-add-cart"><i class="fa-solid fa-cart-plus"></i> إضافة إلى السلة</button>
                </div>
            </div>

        </div>
    </main>

    <!-- ميزات المتجر (Trust Badges) -->
    <section class="features-bar">
        <div class="container features-grid">
            <div class="feature-item">
                <i class="fa-solid fa-truck-fast"></i>
                <div>
                    <h5>شحن سريع وآمن</h5>
                    <p>توصيل لباب بيتك خلال 48 ساعة</p>
                </div>
            </div>