<?php
/**
 * الصفحة الرئيسية - Roz Skin E-Commerce
 * Pinterest & iPhone Inspired Design
 */

session_start();
require_once '../includes/product-card.php';
require_once '../config/database.php';
require_once '../models/user.php';

$database = new Database();
$conn = $database->getConnection();

// جلب إعدادات الموقع
try {
    $query = "SELECT setting_key, setting_value FROM settings";
    $stmt = $conn->prepare($query);
    $stmt->execute();
    $settings = $stmt->fetchAll(PDO::FETCH_KEY_PAIR);

    $site_name = $settings['site_name'] ?? 'Roz Skin';
    $logo_text = $settings['logo_text'] ?? 'Roz Skin';
    $currency = $settings['default_currency'] ?? 'EGP';
    
    // بيانات التواصل
    $store_name = $settings['store_name'] ?? 'روز سكين';
    $store_description = $settings['store_description'] ?? 'متجر إلكتروني متخصص في منتجات العناية بالبشرة والجمال الطبيعية 100%';
    $contact_phone = $settings['contact_phone'] ?? '01234567890';
    $contact_email = $settings['contact_email'] ?? 'info@rozskin.com';
    $contact_address = $settings['contact_address'] ?? 'القاهرة، مصر';
    
    // روابط السوشيال ميديا
    $facebook_link = $settings['facebook_link'] ?? 'https://facebook.com';
    $instagram_link = $settings['instagram_link'] ?? 'https://instagram.com';
    $twitter_link = $settings['twitter_link'] ?? 'https://twitter.com';
    $whatsapp_link = $settings['whatsapp_link'] ?? 'https://wa.me/201234567890';
    
    // إعدادات الصفحة الرئيسية (Hero Section)
    $hero_title = $settings['hero_title'] ?? 'اكتشفي جمالك الطبيعي ✨';
    $hero_description = $settings['hero_description'] ?? 'منتجات عناية بالبشرة والجمال طبيعية 100% مع خدمات متخصصة في مركزنا';
    $hero_bg_image = $settings['hero_bg_image'] ?? 'https://images.unsplash.com/photo-1596462502278-27bfdc403348?w=1600&h=900&fit=crop&q=80';
    $hero_overlay_color = $settings['hero_overlay_color'] ?? '#E57393'; // اللون الأساسي للـ overlay
    $hero_overlay_opacity = $settings['hero_overlay_opacity'] ?? '0.7'; // شفافية الـ overlay (0.0 - 1.0)
    
    // Vertical Cover Slideshow Settings
    $home_vertical_slides = [];
    for ($i = 1; $i <= 3; $i++) {
        if (!empty($settings['home_vertical_cover_' . $i])) {
            $home_vertical_slides[] = [
                'image' => $settings['home_vertical_cover_' . $i],
                'category' => $settings['home_vertical_cover_category_' . $i] ?? ''
            ];
        }
    }
    $home_vertical_cover_speed = $settings['home_vertical_cover_speed'] ?? '3';
} catch (PDOException $e) {
    $site_name = 'Roz Skin';
    $logo_text = 'Roz Skin';
    $currency = 'EGP';
    $store_name = 'روز سكين';
    $store_description = 'متجر إلكتروني متخصص في منتجات العناية بالبشرة والجمال الطبيعية 100%';
    $contact_phone = '01234567890';
    $contact_email = 'info@rozskin.com';
    $contact_address = 'القاهرة، مصر';
    $facebook_link = 'https://facebook.com';
    $instagram_link = 'https://instagram.com';
    $twitter_link = 'https://twitter.com';
    $whatsapp_link = 'https://wa.me/201234567890';
}

$currency_symbols = ['EGP' => 'ج.م', 'USD' => '$', 'EUR' => '€', 'AED' => 'د.إ'];
$currency_symbol = $currency_symbols[$currency] ?? 'ج.م';

// جلب عدد السلة
$cart_count = 0;
$user_data = null;
$show_location_reminder = false;

if (isset($_SESSION['user_id'])) {
    try {
        require_once '../models/cart.php';
        $cart_model = new Cart($conn);
        $cart_count = $cart_model->getCartCount($_SESSION['user_id']);
        
        // جلب بيانات المستخدم للتحقق من الموقع
        $user_stmt = $conn->prepare("SELECT name, latitude, longitude FROM users WHERE id = ?");
        $user_stmt->execute([$_SESSION['user_id']]);
        $user_data = $user_stmt->fetch(PDO::FETCH_ASSOC);
        
        // التحقق إذا كان المستخدم ليس لديه موقع
        if ($user_data && (empty($user_data['latitude']) || empty($user_data['longitude']))) {
            // التحقق من وجود عناوين محفوظة
            $check_addresses = $conn->prepare("SELECT COUNT(*) as count FROM user_addresses WHERE user_id = ? AND latitude IS NOT NULL AND longitude IS NOT NULL");
            $check_addresses->execute([$_SESSION['user_id']]);
            $addresses_count = $check_addresses->fetch(PDO::FETCH_ASSOC)['count'];
            
            // إظهار الرسالة فقط إذا لم يكن هناك عناوين محفوظة
            if ($addresses_count == 0) {
                $show_location_reminder = true;
            }
        }
    } catch (Exception $e) {
        $cart_count = 0;
    }
} elseif (isset($_SESSION['guest_cart'])) {
    $cart_count = array_sum($_SESSION['guest_cart']);
}

// جلب المنتجات
try {
    $query = "SELECT id, name, description, price, discount_price, image FROM products 
              WHERE stock_quantity > 0 ORDER BY created_at DESC LIMIT 20";
    $productsStmt = $conn->prepare($query);
    $productsStmt->execute();
    $products = $productsStmt->fetchAll(PDO::FETCH_ASSOC);
} catch (PDOException $e) {
    $products = [];
}

// جلب الفئات
try {
    $categoriesStmt = $conn->prepare("
        SELECT c.id, c.name, c.image, COUNT(p.id) as product_count
        FROM categories c
        LEFT JOIN products p ON c.id = p.category_id AND p.stock_quantity > 0
        WHERE c.type = 'product' AND c.is_active = 1
        GROUP BY c.id, c.name, c.image
        ORDER BY c.name
    ");
    $categoriesStmt->execute();
    $categories = $categoriesStmt->fetchAll(PDO::FETCH_ASSOC);
} catch(PDOException $e) {
    $categories = [];
    error_log("Categories fetch error: " . $e->getMessage());
}

// جلب آخر المنشورات
try {
    $postsStmt = $conn->prepare("
        SELECT id, title, excerpt, content, featured_image, category, published_at, created_at
        FROM posts
        WHERE status = 'published'
        ORDER BY published_at DESC, created_at DESC
        LIMIT 3
    ");
    $postsStmt->execute();
    $latest_posts = $postsStmt->fetchAll(PDO::FETCH_ASSOC);
} catch (PDOException $e) {
    $latest_posts = [];
}

// جلب الخدمات (3 خدمات فقط للصفحة الرئيسية)
try {
    $servicesStmt = $conn->prepare("
        SELECT id, name, description, price, duration, image, category
        FROM beauty_services
        WHERE is_active = 1
        ORDER BY created_at DESC
        LIMIT 3
    ");
    $servicesStmt->execute();
    $services = $servicesStmt->fetchAll(PDO::FETCH_ASSOC);
} catch (PDOException $e) {
    $services = [];
}

// جلب التقييمات المعتمدة
try {
    $query = "SELECT r.rating, r.comment, u.name as customer_name
              FROM reviews r
              JOIN users u ON r.user_id = u.id
              WHERE r.is_approved = 1 AND r.is_visible = 1
              ORDER BY r.created_at DESC
              LIMIT 6";
    $testimonialsStmt = $conn->prepare($query);
    $testimonialsStmt->execute();
    $testimonials = $testimonialsStmt->fetchAll(PDO::FETCH_ASSOC);
} catch (PDOException $e) {
    $testimonials = [];
}

if (empty($testimonials)) {
    $testimonials = [];
}
?>
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">
    <title><?php echo htmlspecialchars($site_name); ?> - متجر العناية بالجمال</title>
    
    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700&display=swap" rel="stylesheet">
    
    <!-- Styles -->
    <link rel="stylesheet" href="../assets/css/pinterest-style.css">
    
    <style>
        /* Additional RTL Adjustments */
        * {
            font-family: 'Tajawal', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
        }
        
        html {
            scroll-behavior: smooth;
        }
        
        body {
            font-family: 'Tajawal', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            background: linear-gradient(135deg, #fff5f7 0%, #ffe8f0 50%, #ffd6e8 100%);
            background-attachment: fixed;
            min-height: 100vh;
        }
        
        .search-input {
            padding: 12px 16px 12px 44px; /* RTL: Icon on left */
        }
        
        .search-icon {
            position: absolute;
            left: 16px; /* RTL: Icon on left side */
            top: 50%;
            transform: translateY(-50%);
            color: var(--text-tertiary);
        }
        
        /* Smooth transitions for all interactive elements */
        button, a, .product-card, .action-btn {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        /* Focus states for accessibility */
        button:focus, a:focus, input:focus {
            outline: 2px solid #E57393;
            outline-offset: 2px;
        }
        
        /* Loading skeleton */
        .skeleton {
            background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
            background-size: 200% 100%;
            animation: loading 1.5s infinite;
        }
        
        @keyframes loading {
            0% { background-position: 200% 0; }
            100% { background-position: -200% 0; }
        }
    </style>
    <link rel="stylesheet" href="../assets/css/product-cards.css">
</head>
<body>
    <!-- Announcement Bar -->
    <?php include '../includes/announcement-bar.php'; ?>

    <!-- Navigation -->
    <nav id="mainNav" style="background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid rgba(229, 115, 147, 0.08); position: fixed; top: 0; left: 0; right: 0; z-index: 1000; transition: transform 0.3s ease;">
        <div style="max-width: 1400px; margin: 0 auto; padding: 0 24px;">
            <div style="display: flex; align-items: center; justify-content: space-between; height: 60px;">
                
                <!-- Actions - Right Side -->
                <div style="display: flex; align-items: center; gap: 20px;">
                    <!-- Burger Menu -->
                    <button id="burgerBtn" onclick="toggleBurgerMenu()" style="background: transparent; border: none; padding: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s;" onmouseover="this.style.opacity='0.7'" onmouseout="this.style.opacity='1'">
                        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#E57393" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <line x1="3" y1="12" x2="21" y2="12"></line>
                            <line x1="3" y1="6" x2="21" y2="6"></line>
                            <line x1="3" y1="18" x2="21" y2="18"></line>
                        </svg>
                    </button>
                </div>

                <!-- Logo - Left Side -->
                <a href="index.php" style="font-size: 22px; font-weight: 800; background: linear-gradient(135deg, #E57393 0%, #D1537A 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-decoration: none; letter-spacing: -0.3px;">
                    <?php echo htmlspecialchars($logo_text); ?>
                </a>
            </div>
        </div>
    </nav>

    <!-- Floating Cart Button -->
    <button onclick="window.location.href='cart.php'" title="السلة" style="position: fixed; bottom: 24px; right: 24px; z-index: 999; background: linear-gradient(135deg, #E57393 0%, #D1537A 100%); border: none; width: 56px; height: 56px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(229, 115, 147, 0.4); transition: all 0.3s;" onmouseover="this.style.transform='scale(1.1)'; this.style.boxShadow='0 6px 24px rgba(229, 115, 147, 0.5)'" onmouseout="this.style.transform='scale(1)'; this.style.boxShadow='0 4px 16px rgba(229, 115, 147, 0.4)'">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <circle cx="9" cy="21" r="1"></circle>
            <circle cx="20" cy="21" r="1"></circle>
            <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
        </svg>
        <?php if ($cart_count > 0): ?>
            <span id="cartBadge" style="position: absolute; top: -4px; right: -4px; background: white; color: #E57393; font-size: 11px; font-weight: 800; min-width: 22px; height: 22px; border-radius: 11px; display: flex; align-items: center; justify-content: center; padding: 0 6px; box-shadow: 0 2px 8px rgba(0,0,0,0.15);"><?php echo $cart_count; ?></span>
        <?php else: ?>
            <span id="cartBadge" style="display: none;"></span>
        <?php endif; ?>
    </button>

    <script>
        // Hide/Show navbar on scroll
        let lastScrollTop = 0;
        const navbar = document.getElementById('mainNav');
        
        window.addEventListener('scroll', function() {
            let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
            
            if (scrollTop > lastScrollTop && scrollTop > 100) {
                // Scrolling down
                navbar.style.transform = 'translateY(-100%)';
            } else {
                // Scrolling up
                navbar.style.transform = 'translateY(0)';
            }
            
            lastScrollTop = scrollTop;
        });
    </script>

    <div style="height: 60px;"></div>

    <!-- Burger Menu Overlay -->
    <div id="burgerMenu" style="position: fixed; top: 0; right: -100%; width: 320px; height: 100vh; background: white; box-shadow: -4px 0 20px rgba(0,0,0,0.1); z-index: 9999; transition: right 0.3s ease; overflow-y: auto;">
        <div style="padding: 20px;">
            <!-- Close Button -->
            <button onclick="toggleBurgerMenu()" style="background: rgba(229, 115, 147, 0.1); border: none; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; margin-bottom: 30px; transition: all 0.3s;" onmouseover="this.style.background='rgba(229, 115, 147, 0.2)'" onmouseout="this.style.background='rgba(229, 115, 147, 0.1)'">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#E57393" stroke-width="2.5">
                    <line x1="18" y1="6" x2="6" y2="18"></line>
                    <line x1="6" y1="6" x2="18" y2="18"></line>
                </svg>
            </button>

            <!-- Menu Items -->
            <div style="display: flex; flex-direction: column; gap: 8px;">
                <?php if (isset($_SESSION['user_id'])): ?>
                    <a href="account.php" style="display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 12px; text-decoration: none; color: #333; font-weight: 600; transition: all 0.3s;" onmouseover="this.style.background='rgba(229, 115, 147, 0.1)'" onmouseout="this.style.background='transparent'">
                        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#E57393" stroke-width="2">
                            <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
                            <circle cx="12" cy="7" r="4"></circle>
                        </svg>
                        حسابي
                    </a>
                <?php else: ?>
                    <a href="#" onclick="showLoginModal(); toggleBurgerMenu(); return false;" style="display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 12px; text-decoration: none; color: #333; font-weight: 600; transition: all 0.3s;" onmouseover="this.style.background='rgba(229, 115, 147, 0.1)'" onmouseout="this.style.background='transparent'">
                        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#E57393" stroke-width="2">
                            <path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"></path>
                            <polyline points="10 17 15 12 10 7"></polyline>
                            <line x1="15" y1="12" x2="3" y2="12"></line>
                        </svg>
                        تسجيل الدخول
                    </a>
                <?php endif; ?>

                <a href="blog.php" style="display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 12px; text-decoration: none; color: #333; font-weight: 600; transition: all 0.3s;" onmouseover="this.style.background='rgba(229, 115, 147, 0.1)'" onmouseout="this.style.background='transparent'">
                    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#E57393" stroke-width="2">
                        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
                        <polyline points="14 2 14 8 20 8"></polyline>
                        <line x1="16" y1="13" x2="8" y2="13"></line>
                        <line x1="16" y1="17" x2="8" y2="17"></line>
                    </svg>
                    روز فيد
                </a>

                <div style="height: 1px; background: rgba(229, 115, 147, 0.1); margin: 12px 0;"></div>

                <a href="products.php" style="display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 12px; text-decoration: none; color: #333; font-weight: 600; transition: all 0.3s;" onmouseover="this.style.background='rgba(229, 115, 147, 0.1)'" onmouseout="this.style.background='transparent'">
                    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#E57393" stroke-width="2">
                        <circle cx="9" cy="21" r="1"></circle>
                        <circle cx="20" cy="21" r="1"></circle>
                        <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
                    </svg>
                    المنتجات
                </a>

                <a href="services.php" style="display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 12px; text-decoration: none; color: #333; font-weight: 600; transition: all 0.3s;" onmouseover="this.style.background='rgba(229, 115, 147, 0.1)'" onmouseout="this.style.background='transparent'">
                    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#E57393" stroke-width="2">
                        <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
                        <line x1="16" y1="2" x2="16" y2="6"></line>
                        <line x1="8" y1="2" x2="8" y2="6"></line>
                        <line x1="3" y1="10" x2="21" y2="10"></line>
                    </svg>
                    الخدمات
                </a>
            </div>
        </div>
    </div>

    <!-- Burger Menu Backdrop -->
    <div id="burgerBackdrop" onclick="toggleBurgerMenu()" style="position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(0,0,0,0.5); z-index: 9998; display: none; opacity: 0; transition: opacity 0.3s;"></div>

    <script>
        function toggleBurgerMenu() {
            const menu = document.getElementById('burgerMenu');
            const backdrop = document.getElementById('burgerBackdrop');
            const isOpen = menu.style.right === '0px';
            
            if (isOpen) {
                menu.style.right = '-100%';
                backdrop.style.display = 'none';
                backdrop.style.opacity = '0';
                document.body.style.overflow = '';
            } else {
                menu.style.right = '0';
                backdrop.style.display = 'block';
                setTimeout(() => backdrop.style.opacity = '1', 10);
                document.body.style.overflow = 'hidden';
            }
        }
    </script>


    <!-- Hero Section with Stats -->
    <section style="padding: 40px 10px; background: white;">
        <div style="max-width: 1400px; margin: 0 auto; padding: 0 20px;">
            <?php
            // تحويل اللون من HEX إلى RGB
            $hex = str_replace('#', '', $hero_overlay_color);
            $r = hexdec(substr($hex, 0, 2));
            $g = hexdec(substr($hex, 2, 2));
            $b = hexdec(substr($hex, 4, 2));
            $opacity1 = floatval($hero_overlay_opacity);
            $opacity2 = $opacity1 - 0.05;
            ?>
            
            <div style="
                position: relative;
                background: linear-gradient(135deg, rgba(<?php echo "$r, $g, $b, $opacity1"; ?>) 0%, rgba(<?php echo "$r, $g, $b, $opacity2"; ?>) 100%),
                            url('<?php echo htmlspecialchars($hero_bg_image); ?>') center/cover;
                min-height: 520px;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                overflow: hidden;
                border-radius: 28px;
                box-shadow: 0 8px 32px rgba(229, 115, 147, 0.2);
            ">
                <!-- Main Content -->
                <div style="position: relative; z-index: 2; width: 100%; padding: 50px 40px 30px;">
                    <div style="max-width: 650px; margin: 0 auto; text-align: center;">
                        <!-- Main Title -->
                        <h1 style="color: white; text-shadow: 0 2px 20px rgba(0,0,0,0.3); font-size: clamp(32px, 5vw, 52px); margin-bottom: 18px; line-height: 1.2; font-weight: 800;">
                            <?php echo htmlspecialchars($hero_title); ?>
                        </h1>
                        
                        <!-- Description -->
                        <p style="color: rgba(255,255,255,0.95); font-size: clamp(15px, 2.5vw, 19px); margin-bottom: 35px; text-shadow: 0 1px 10px rgba(0,0,0,0.2); line-height: 1.6; font-weight: 500;">
                            <?php echo htmlspecialchars($hero_description); ?>
                        </p>
                        
                        <!-- CTA Buttons -->
                        <div class="hero-buttons" style="display: flex; gap: 12px; justify-content: center; align-items: center; flex-wrap: wrap; margin-bottom: 40px;">
                            <button onclick="window.location.href='services.php'" class="hero-btn-primary" style="
                                background: white;
                                color: #E57393;
                                padding: 15px 40px;
                                font-size: 17px;
                                font-weight: 700;
                                border: none;
                                border-radius: 50px;
                                cursor: pointer;
                                display: inline-flex;
                                align-items: center;
                                justify-content: center;
                                gap: 8px;
                                box-shadow: 0 4px 16px rgba(0,0,0,0.15);
                                transition: all 0.3s ease;
                                white-space: nowrap;
                            " onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 6px 20px rgba(0,0,0,0.2)'" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 4px 16px rgba(0,0,0,0.15)'">
                                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
                                    <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
                                    <line x1="16" y1="2" x2="16" y2="6"></line>
                                    <line x1="8" y1="2" x2="8" y2="6"></line>
                                    <line x1="3" y1="10" x2="21" y2="10"></line>
                                </svg>
                                احجزي موعد
                            </button>
                        </div>
                        
                        <!-- Stats - Compact -->
                        <div class="stats-compact" style="display: flex; gap: 24px; justify-content: center; align-items: center; flex-wrap: wrap;">
                            <div style="text-align: center;">
                                <div style="font-size: 28px; font-weight: 800; color: white; text-shadow: 0 2px 10px rgba(0,0,0,0.3); line-height: 1;">
                                    <span class="counter" data-target="5000">0</span>+
                                </div>
                                <div style="color: rgba(255,255,255,0.9); font-size: 12px; font-weight: 600; margin-top: 4px; text-shadow: 0 1px 5px rgba(0,0,0,0.2);">عميلة سعيدة</div>
                            </div>
                            
                            <div style="width: 1px; height: 40px; background: rgba(255,255,255,0.3);"></div>
                            
                            <div style="text-align: center;">
                                <div style="font-size: 28px; font-weight: 800; color: white; text-shadow: 0 2px 10px rgba(0,0,0,0.3); line-height: 1;">
                                    <span class="counter" data-target="4.9" data-decimal="true">0</span> ⭐
                                </div>
                                <div style="color: rgba(255,255,255,0.9); font-size: 12px; font-weight: 600; margin-top: 4px; text-shadow: 0 1px 5px rgba(0,0,0,0.2);">تقييم العملاء</div>
                            </div>
                            
                            <div style="width: 1px; height: 40px; background: rgba(255,255,255,0.3);"></div>
                            
                            <div style="text-align: center;">
                                <div style="font-size: 28px; font-weight: 800; color: white; text-shadow: 0 2px 10px rgba(0,0,0,0.3); line-height: 1;">
                                    <span class="counter" data-target="10">0</span>+
                                </div>
                                <div style="color: rgba(255,255,255,0.9); font-size: 12px; font-weight: 600; margin-top: 4px; text-shadow: 0 1px 5px rgba(0,0,0,0.2);">سنوات خبرة</div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Stories Section - Inside Hero -->
                <div style="position: relative; z-index: 3; padding: 0 40px 25px; background: linear-gradient(to top, rgba(0,0,0,0.15) 0%, transparent 100%);">
                    <?php include '../includes/stories-component.php'; ?>
                </div>
            </div>
        </div>
        
        <!-- Counter Animation Script -->
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                const counters = document.querySelectorAll('.counter');
                let animated = false;
                
                function animateCounters() {
                    if (animated) return;
                    animated = true;
                    
                    counters.forEach(counter => {
                        const target = parseFloat(counter.getAttribute('data-target'));
                        const isDecimal = counter.getAttribute('data-decimal') === 'true';
                        const duration = 2000;
                        const steps = 60;
                        const increment = target / steps;
                        let current = 0;
                        
                        const timer = setInterval(() => {
                            current += increment;
                            if (current >= target) {
                                counter.textContent = isDecimal ? target.toFixed(1) : Math.ceil(target);
                                clearInterval(timer);
                            } else {
                                counter.textContent = isDecimal ? current.toFixed(1) : Math.ceil(current);
                            }
                        }, duration / steps);
                    });
                }
                
                // Trigger animation immediately
                setTimeout(animateCounters, 500);
            });
        </script>
        
        <style>
            /* Stories inside Hero styling */
            .stories-container {
                justify-content: center !important;
                background: transparent !important;
                padding: 0 !important;
            }
            
            .story-circle {
                background: transparent !important;
                border: none !important;
                box-shadow: none !important;
            }
            
            .story-avatar {
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
            }
            
            .story-circle:hover {
                transform: scale(1.08) !important;
            }
            
            .story-circle:hover .story-avatar {
                box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4) !important;
            }
            
            .story-title {
                display: none !important;
            }
            
            .story-avatar {
                background: linear-gradient(45deg, #E57393 0%, #D1537A 50%, #f5a5c0 100%) !important;
            }
            
            @media (max-width: 768px) {
                .stats-compact {
                    gap: 16px !important;
                }
                
                .stats-compact > div:nth-child(1),
                .stats-compact > div:nth-child(3),
                .stats-compact > div:nth-child(5) {
                    flex: 1;
                    min-width: 80px;
                }
                
                .stats-compact > div:nth-child(2),
                .stats-compact > div:nth-child(4) {
                    display: none;
                }
                
                .stats-compact > div > div:first-child {
                    font-size: 24px !important;
                }
                
                .stats-compact > div > div:last-child {
                    font-size: 11px !important;
                }
            }
            
            @media (max-width: 640px) {
                .hero-buttons {
                    width: 100%;
                    max-width: 280px;
                    margin: 0 auto 30px !important;
                }
                
                .hero-btn-primary {
                    width: 100%;
                    min-width: auto !important;
                    padding: 14px 32px !important;
                    font-size: 16px !important;
                }
                
                /* Adjust stories on mobile */
                .stories-container {
                    gap: 12px !important;
                }
                
                .story-circle {
                    width: 65px !important;
                }
                
                .story-avatar {
                    width: 65px !important;
                    height: 65px !important;
                }
                
                .story-title {
                    display: none !important;
                }
            }
        </style>
    </section>
    
    <!-- Skin Quiz Banner - Elegant Design -->
    <section class="skin-quiz-section" style="padding: 30px 20px; background: transparent;">
        <div class="container-pinterest" style="max-width: 700px; margin: 0 auto;">
            <div style="position: relative; background: white; border-radius: 24px; padding: 32px 28px; text-align: center; box-shadow: 0 6px 24px rgba(229, 115, 147, 0.12); overflow: hidden;">
                
                <!-- Free Badge -->
                <div style="position: absolute; top: 16px; right: 16px; background: linear-gradient(135deg, #E57393 0%, #D1537A 100%); color: white; padding: 6px 14px; border-radius: 20px; font-size: 12px; font-weight: 700; box-shadow: 0 2px 8px rgba(229, 115, 147, 0.3); z-index: 3;">
                    مجاني 🎁
                </div>
                
                <!-- Decorative Elements -->
                <div style="position: absolute; top: -40px; right: -40px; width: 140px; height: 140px; background: linear-gradient(135deg, rgba(229, 115, 147, 0.15) 0%, rgba(255, 182, 193, 0.15) 100%); border-radius: 50%; filter: blur(40px);"></div>
                <div style="position: absolute; bottom: -40px; left: -40px; width: 140px; height: 140px; background: linear-gradient(135deg, rgba(255, 192, 203, 0.15) 0%, rgba(229, 115, 147, 0.15) 100%); border-radius: 50%; filter: blur(40px);"></div>
                
                <!-- Content -->
                <div style="position: relative; z-index: 2;">
                    <!-- Icon with Animation -->
                    <div class="quiz-icon-float" style="width: 60px; height: 60px; background: linear-gradient(135deg, #E57393 0%, #D1537A 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; box-shadow: 0 6px 16px rgba(229, 115, 147, 0.3); animation: quizFloat 3s ease-in-out infinite;">
                        <svg width="28" height="32" viewBox="0 0 24 28" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z" fill="white"/>
                        </svg>
                    </div>
                    
                    <!-- Title -->
                    <h2 style="font-size: 24px; font-weight: 800; background: linear-gradient(135deg, #E57393 0%, #D1537A 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin: 0 0 10px; line-height: 1.2;">
                        اكتشفي روتين بشرتك المثالي
                    </h2>
                    
                    <!-- Description -->
                    <p style="color: #6b7280; font-size: 14px; margin: 0 0 20px; line-height: 1.5;">
                        اختبار ذكي 🧪 • توصيات مخصصة 💝 • نتائج فورية ⚡
                    </p>
                    
                    <!-- CTA Button -->
                    <a href="skin-quiz.php" style="
                        display: inline-flex;
                        align-items: center;
                        gap: 8px;
                        background: linear-gradient(135deg, #E57393 0%, #D1537A 100%);
                        color: white;
                        padding: 14px 32px;
                        border-radius: 50px;
                        font-size: 16px;
                        font-weight: 700;
                        text-decoration: none;
                        box-shadow: 0 4px 16px rgba(229, 115, 147, 0.3);
                        transition: all 0.3s;
                    " onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 6px 20px rgba(229, 115, 147, 0.4)'" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 4px 16px rgba(229, 115, 147, 0.3)'">
                        ابدأي الآن
                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
                            <path d="M5 12h14M12 5l7 7-7 7"/>
                        </svg>
                    </a>
                </div>
            </div>
        </div>
    </section>
    
    <style>
        @keyframes quizFloat {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-8px); }
        }
        
        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
        }
        
        @keyframes shine {
            0% { left: -100%; }
            50%, 100% { left: 100%; }
        }
    </style>
    
    <style>
        /* Quiz Banner Mobile Responsive */
        @media (max-width: 768px) {
            .skin-quiz-section {
                padding: 30px 15px !important;
            }
            
            .quiz-banner-simple {
                padding: 32px 20px !important;
            }
            
            .quiz-cta-btn-simple {
                width: 100% !important;
                max-width: 100% !important;
                padding: 14px 28px !important;
            }
        }
        
        @media (max-width: 480px) {
            .quiz-banner-simple {
                padding: 28px 16px !important;
            }
        }
        
        /* Testimonials Mobile - Simple Fix */
        @media (max-width: 768px) {
            /* Customer name - Better visibility on mobile */
            .testimonial-slide > div > div:last-child > p:first-child {
                font-size: 17px !important;
                line-height: 1.4 !important;
            }
        }
        
        /* Cart Animations */
        @keyframes cartShake {
            0%, 100% { transform: translateX(0) rotate(0deg); }
            10%, 30%, 50%, 70%, 90% { transform: translateX(-5px) rotate(-5deg); }
            20%, 40%, 60%, 80% { transform: translateX(5px) rotate(5deg); }
        }
        
        @keyframes confettiBurst {
            0% {
                transform: translate(-50%, -50%) scale(0) rotate(0deg);
                opacity: 1;
            }
            50% {
                opacity: 1;
            }
            100% {
                transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(1.5) rotate(360deg);
                opacity: 0;
            }
        }
        
        /* Branches Mobile - Keep in One Row */
        @media (max-width: 768px) {
            .branches-row {
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
                scrollbar-width: none;
                padding-bottom: 10px;
            }
            
            .branches-row::-webkit-scrollbar {
                display: none;
            }
            
            .branches-row > div {
                min-width: 140px !important;
                max-width: 140px !important;
                flex-shrink: 0;
                padding: 16px 12px !important;
            }
            
            .branch-icon {
                width: 36px !important;
                height: 36px !important;
                margin-bottom: 10px !important;
            }
            
            .branch-icon svg {
                width: 18px !important;
                height: 18px !important;
            }
            
            .branch-name {
                font-size: 14px !important;
                margin-bottom: 4px !important;
            }
            
            .branch-address {
                font-size: 11px !important;
                display: none !important;
            }
        }
    </style>
    
    <style>
        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-20px); }
        }
        
        /* Services Section Responsive */
        @media (max-width: 768px) {
            .services-grid {
                grid-template-columns: 1fr !important;
            }
        }
    </style>

    <!-- Horizontal Cover Slideshow Section -->
    <?php if (!empty($home_vertical_slides)): ?>
    <section style="padding: 20px 0; background: linear-gradient(135deg, #ffffff 0%, #fff9f5 100%);">
        <div class="container-pinterest">
            <div class="vertical-slideshow-container" style="
                position: relative; 
                border-radius: 20px; 
                overflow: hidden; 
                box-shadow: 0 10px 30px rgba(0,0,0,0.1); 
                /* Fixed height to match Offers Card (approx 220px) */
                height: 220px;
                width: 100%;
            ">
                <?php foreach ($home_vertical_slides as $index => $slide): ?>
                <a href="<?php echo !empty($slide['category']) ? 'products.php?category=' . $slide['category'] : '#'; ?>" 
                   class="vertical-slide" 
                   style="
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        opacity: <?php echo $index === 0 ? '1' : '0'; ?>;
                        transition: opacity 0.8s ease-in-out;
                        z-index: <?php echo $index === 0 ? '2' : '1'; ?>;
                        display: block;
                   ">
                    <img src="../<?php echo htmlspecialchars($slide['image']); ?>" 
                         alt="Cover <?php echo $index + 1; ?>" 
                         style="width: 100%; height: 100%; object-fit: cover; object-position: center;">

                </a>
                <?php endforeach; ?>
                
                <!-- Navigation Dots -->
                <?php if (count($home_vertical_slides) > 1): ?>
                <div style="position: absolute; bottom: 10px; left: 0; width: 100%; text-align: center; z-index: 10;">
                    <?php foreach ($home_vertical_slides as $index => $slide): ?>
                    <span class="dot" onclick="currentSlide(<?php echo $index; ?>)" style="
                        height: 8px; 
                        width: 8px; 
                        margin: 0 4px; 
                        background-color: <?php echo $index === 0 ? '#E57393' : 'rgba(255,255,255,0.5)'; ?>; 
                        border-radius: 50%; 
                        display: inline-block; 
                        cursor: pointer;
                        transition: background-color 0.3s;
                    "></span>
                    <?php endforeach; ?>
                </div>
                <?php endif; ?>
            </div>
        </div>
    </section>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            let slides = document.querySelectorAll('.vertical-slide');
            let dots = document.querySelectorAll('.dot');
            let currentSlideIndex = 0;
            let slideInterval = <?php echo floatval($home_vertical_cover_speed) * 1000; ?>;
            let slideTimer;

            function showSlide(index) {
                // Reset all slides
                slides.forEach((slide, i) => {
                    slide.style.opacity = '0';
                    slide.style.zIndex = '1';
                    if(dots[i]) dots[i].style.backgroundColor = 'rgba(255,255,255,0.5)';
                });

                // Show current slide
                slides[index].style.opacity = '1';
                slides[index].style.zIndex = '2';
                if(dots[index]) dots[index].style.backgroundColor = '#E57393';
                
                currentSlideIndex = index;
            }

            function nextSlide() {
                let nextIndex = (currentSlideIndex + 1) % slides.length;
                showSlide(nextIndex);
            }

            // Start slideshow if more than 1 slide
            if (slides.length > 1) {
                slideTimer = setInterval(nextSlide, slideInterval);
                
                // Optional: Pause on hover
                let container = document.querySelector('.vertical-slideshow-container');
                container.addEventListener('mouseenter', () => clearInterval(slideTimer));
                container.addEventListener('mouseleave', () => slideTimer = setInterval(nextSlide, slideInterval));
            }
            
            // Expose function for dots
            window.currentSlide = function(index) {
                clearInterval(slideTimer);
                showSlide(index);
                if (slides.length > 1) {
                    slideTimer = setInterval(nextSlide, slideInterval);
                }
            };
        });
    </script>
    <?php endif; ?>

    <!-- Skin Hydration Calculator Section (Compact) -->
    <section style="padding: 15px 0; background: linear-gradient(135deg, #fff5f7 0%, #ffe8f0 100%);">
        <div class="container-pinterest" style="max-width: 900px;">
            <div class="hydration-bar" style="
                position: relative;
                background: transparent;
                border: 1px solid rgba(229, 115, 147, 0.15);
                border-radius: 24px;
                padding: 18px 24px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 20px;
                box-shadow: 0 6px 24px rgba(229, 115, 147, 0.08);
                flex-wrap: wrap;
                overflow: hidden;
            ">
                <!-- Water Fill Background with Ocean Waves -->
                <div id="cardWaterFill" style="position: absolute; bottom: 0; left: 0; right: 0; height: 0%; transition: height 1s cubic-bezier(0.34, 1.56, 0.64, 1); z-index: 0; pointer-events: none;">
                    <!-- Base Gradient -->
                    <div style="position: absolute; inset: 0; background: linear-gradient(to top, rgba(229, 115, 147, 0.15) 0%, rgba(255, 182, 193, 0.08) 100%);"></div>
                    
                    <!-- Wave Container -->
                    <div style="position: absolute; top: -2px; left: 0; right: 0; height: 50px; overflow: hidden;">
                        <!-- Wave 1 -->
                        <div style="position: absolute; top: 0; left: 0; width: 200%; height: 100%;">
                            <svg style="width: 100%; height: 100%;" viewBox="0 0 2880 100" preserveAspectRatio="none">
                                <path d="M0,50 Q360,20 720,50 T1440,50 T2160,50 T2880,50 L2880,100 L0,100 Z" fill="rgba(229, 115, 147, 0.25)" style="animation: waveMove1 1.2s linear infinite;"/>
                            </svg>
                        </div>
                        
                        <!-- Wave 2 -->
                        <div style="position: absolute; top: 5px; left: 0; width: 200%; height: 100%;">
                            <svg style="width: 100%; height: 100%;" viewBox="0 0 2880 100" preserveAspectRatio="none">
                                <path d="M0,40 Q480,60 960,40 T1920,40 T2880,40 L2880,100 L0,100 Z" fill="rgba(255, 182, 193, 0.3)" style="animation: waveMove2 0.8s linear infinite;"/>
                            </svg>
                        </div>
                        
                        <!-- Wave 3 -->
                        <div style="position: absolute; top: 10px; left: 0; width: 200%; height: 100%;">
                            <svg style="width: 100%; height: 100%;" viewBox="0 0 2880 100" preserveAspectRatio="none">
                                <path d="M0,45 Q600,25 1200,45 T2400,45 T2880,45 L2880,100 L0,100 Z" fill="rgba(229, 115, 147, 0.2)" style="animation: waveMove3 1.5s linear infinite;"/>
                            </svg>
                        </div>
                    </div>
                </div>
                
                <!-- Title -->
                <div style="position: relative; z-index: 1;">
                    <h3 style="font-size: 14px; font-weight: 800; color: #E57393; margin: 0; line-height: 1.2;">حاسبة المياه 💧</h3>
                    <p style="font-size: 10px; color: #94a3b8; margin: 0;">لبشرة صحية ومشرقة</p>
                </div>

                <!-- Inputs Group -->
                <div style="position: relative; z-index: 1; display: flex; align-items: center; gap: 25px; flex: 1; justify-content: center; flex-wrap: wrap;">
                    <!-- Weight -->
                    <div style="display: flex; align-items: center; gap: 12px; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); padding: 10px 18px; border-radius: 50px; border: 1px solid rgba(229, 115, 147, 0.2); box-shadow: 0 2px 8px rgba(229, 115, 147, 0.1);">
                        <span style="font-size: 12px; font-weight: 700; color: #1e293b;">الوزن</span>
                        <input type="range" id="weightInput" min="40" max="150" value="70" step="1" 
                               style="width: 110px; height: 5px; border-radius: 10px; background: rgba(229, 115, 147, 0.15); outline: none; -webkit-appearance: none; cursor: pointer;">
                        <span style="font-size: 14px; font-weight: 800; color: #E57393; min-width: 48px; text-align: center;"><span id="weightValue">70</span> <small style="font-size: 10px; color: #94a3b8;">كجم</small></span>
                    </div>
                </div>

                <!-- Result Wrapper -->
                <div class="result-wrapper" style="position: relative; z-index: 1; display: flex; align-items: center; gap: 20px; justify-content: center;">
                    <!-- Result -->
                    <div style="text-align: center; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); padding: 12px 20px; border-radius: 16px; box-shadow: 0 2px 8px rgba(229, 115, 147, 0.1);">
                        <div id="litersResult" style="font-size: 32px; font-weight: 900; color: #E57393; line-height: 1;">0</div>
                        <div style="font-size: 11px; color: #94a3b8; font-weight: 700; margin-top: 4px;">لتر</div>
                    </div>
                    
                    <!-- Cups -->
                    <div style="text-align: center; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); padding: 12px 20px; border-radius: 16px; box-shadow: 0 2px 8px rgba(229, 115, 147, 0.1);">
                        <div id="cupsResult" style="font-size: 32px; font-weight: 900; color: #E57393; line-height: 1;">0</div>
                        <div style="font-size: 11px; color: #94a3b8; font-weight: 700; margin-top: 4px;">كوب</div>
                    </div>
                </div>

            </div>
        </div>

        <style>
            /* Slider Styling - Enhanced */
            #weightInput {
                background: linear-gradient(to right, 
                    rgba(229, 115, 147, 0.3) 0%, 
                    rgba(229, 115, 147, 0.15) 100%);
                height: 6px;
                border-radius: 10px;
            }
            #weightInput::-webkit-slider-thumb {
                -webkit-appearance: none;
                appearance: none;
                width: 22px;
                height: 22px;
                border-radius: 50%;
                background: linear-gradient(135deg, #E57393 0%, #D1537A 100%);
                cursor: pointer;
                box-shadow: 0 4px 12px rgba(229, 115, 147, 0.5);
                border: 4px solid white;
                transition: all 0.3s ease;
            }
            #weightInput::-webkit-slider-thumb:hover {
                transform: scale(1.2);
                box-shadow: 0 6px 16px rgba(229, 115, 147, 0.6);
            }
            #weightInput::-webkit-slider-thumb:active {
                transform: scale(1.1);
            }
            
            /* Wave Animations - 10x Faster */
            @keyframes waveMove1 {
                0% { transform: translateX(0); }
                100% { transform: translateX(-50%); }
            }
            @keyframes waveMove2 {
                0% { transform: translateX(0); }
                100% { transform: translateX(-50%); }
            }
            @keyframes waveMove3 {
                0% { transform: translateX(0); }
                100% { transform: translateX(-50%); }
            }


            /* Responsive */
            @media (max-width: 768px) {
                .hydration-bar {
                    flex-direction: column !important;
                    padding: 16px !important;
                    gap: 14px !important;
                }
                
                /* Title & Icon - Full Width */
                .hydration-bar > div:nth-child(1) {
                    width: 100% !important;
                    justify-content: center !important;
                }
                
                .hydration-title-text h3 {
                    font-size: 15px !important;
                }
                
                .hydration-title-text p {
                    font-size: 10px !important;
                }
                
                /* Inputs Group - Stack Vertically */
                .hydration-bar > div:nth-child(2) {
                    width: 100% !important;
                    flex-direction: column !important;
                    gap: 12px !important;
                }
                
                /* Weight Input - Full Width */
                .hydration-bar > div:nth-child(2) > div:first-child {
                    width: 100% !important;
                    justify-content: space-between !important;
                }
                
                #weightInput {
                    width: 140px !important;
                }
                

                /* Result Wrapper - Center */
                .result-wrapper {
                    width: 100% !important;
                    justify-content: center !important;
                    gap: 20px !important;
                }
                
                .result-wrapper > div {
                    padding: 10px 16px !important;
                }
                
                #litersResult {
                    font-size: 26px !important;
                }
                
                #cupsResult {
                    font-size: 26px !important;
                }
            }
            
            @media (max-width: 480px) {
                .hydration-bar {
                    padding: 14px !important;
                    gap: 12px !important;
                }
                
                .hydration-bar > div:nth-child(1) > div:first-child {
                    width: 40px !important;
                    height: 40px !important;
                    font-size: 18px !important;
                }
                
                .hydration-title-text h3 {
                    font-size: 14px !important;
                }
                
                #weightInput {
                    width: 100px !important;
                }
                

                .result-wrapper {
                    flex-direction: column !important;
                    gap: 12px !important;
                }
                
                .result-wrapper > div {
                    padding: 8px 14px !important;
                }
                
                #litersResult {
                    font-size: 24px !important;
                }
                
                #cupsResult {
                    font-size: 24px !important;
                }
            }
        </style>

        <script>
            document.addEventListener('DOMContentLoaded', function() {
                const weightInput = document.getElementById('weightInput');
                const weightValue = document.getElementById('weightValue');
                const cupsResult = document.getElementById('cupsResult');
                const litersResult = document.getElementById('litersResult');
                const cardWaterFill = document.getElementById('cardWaterFill');
                
                function calculateHydration() {
                    const weight = parseInt(weightInput.value);
                    weightValue.textContent = weight;
                    
                    // Formula: Weight * 35ml + 500ml (moderate activity)
                    let waterNeededML = (weight * 35) + 500;
                    
                    const liters = (waterNeededML / 1000).toFixed(1);
                    const cups = Math.ceil(waterNeededML / 250);
                    
                    // Animate Numbers
                    animateValue(cupsResult, parseInt(cupsResult.textContent) || 0, cups, 500);
                    animateValue(litersResult, parseFloat(litersResult.textContent) || 0, liters, 500, true);
                    
                    // Update Card Water Fill (max 4L = 100%)
                    const maxLiters = 4;
                    const percentage = Math.min((liters / maxLiters) * 100, 100);
                    cardWaterFill.style.height = percentage + '%';
                }
                
                function animateValue(obj, start, end, duration, isFloat = false) {
                    let startTimestamp = null;
                    const step = (timestamp) => {
                        if (!startTimestamp) startTimestamp = timestamp;
                        const progress = Math.min((timestamp - startTimestamp) / duration, 1);
                        let val = progress * (end - start) + start;
                        obj.innerHTML = isFloat ? val.toFixed(1) : Math.floor(val);
                        if (progress < 1) {
                            window.requestAnimationFrame(step);
                        }
                    };
                    window.requestAnimationFrame(step);
                }
                
                // Initialize
                weightInput.addEventListener('input', calculateHydration);
                
                // Initial Calc
                calculateHydration();
            });
        </script>
    </section>


    <!-- Offers Section -->
    <?php
    // جلب العروض النشطة
    $now = date('Y-m-d H:i:s');
    $offers_query = "SELECT * FROM offers 
                     WHERE is_active = 1 
                     AND start_date <= ? 
                     AND end_date >= ?
                     ORDER BY priority ASC 
                     LIMIT 3";
    try {
        $offers_stmt = $conn->prepare($offers_query);
        $offers_stmt->execute([$now, $now]);
        $active_offers = $offers_stmt->fetchAll();
    } catch (Exception $e) {
        $active_offers = [];
    }
    
    if (!empty($active_offers)):
    ?>
    <section style="padding: 20px 0; background: linear-gradient(135deg, #fff9f5 0%, #ffebf0 100%); position: relative; overflow: hidden;">
        <!-- Balloons Container -->
        <div id="balloonsContainer" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1;"></div>
        
        <div class="container-pinterest" style="position: relative; z-index: 2;">
            <!-- Horizontal Scrolling Container -->
            <div id="offersCarousel" class="offers-scroll-container" style="
                overflow-x: auto;
                padding: 20px 5px 40px 5px;
                -webkit-overflow-scrolling: touch;
                display: flex;
                gap: 20px;
                scrollbar-width: none;
                scroll-behavior: smooth;
            ">
                <?php foreach($active_offers as $offer): 
                    // Calculate discount percentage
                    $discount = 0;
                    $original_price = $offer['original_price'] ?? 0;
                    $offer_price = $offer['offer_price'] ?? 0;
                    
                    if ($original_price > 0 && $offer_price < $original_price) {
                        $discount = round((($original_price - $offer_price) / $original_price) * 100);
                    }
                    
                    // Calculate Time Left
                    $days_left = ceil((strtotime($offer['end_date']) - time()) / 86400);
                ?>
                
                <!-- Coupon Card -->
                <a href="product.php?id=<?php echo $offer['product_id'] ?? 0; ?>" class="coupon-card">
                    <!-- Left Side: Info -->
                    <div class="coupon-info">
                        <div class="coupon-header">
                            <span class="brand-tag">ROZ SKIN</span>
                            <?php if ($days_left <= 7): ?>
                                <span class="time-tag">⏳ باقي <?php echo $days_left; ?> يوم</span>
                            <?php endif; ?>
                        </div>
                        
                        <h3 class="coupon-title"><?php echo htmlspecialchars($offer['title']); ?></h3>
                        <p class="coupon-desc"><?php echo htmlspecialchars($offer['description'] ?: 'تسوق الآن واحصل على أفضل العروض'); ?></p>
                        
                        <div class="coupon-price">
                            <?php if ($offer_price > 0): ?>
                                <span class="new-price"><?php echo number_format($offer_price, 0); ?> <?php echo $currency; ?></span>
                                <?php if ($original_price > $offer_price): ?>
                                    <span class="old-price"><?php echo number_format($original_price, 0); ?></span>
                                <?php endif; ?>
                            <?php else: ?>
                                <span class="new-price" style="font-size: 14px; color: #E57393;">عرض خاص</span>
                            <?php endif; ?>
                        </div>
                    </div>

                    <!-- Divider (Perforated Line) -->
                    <div class="coupon-divider">
                        <div class="notch-top"></div>
                        <div class="line"></div>
                        <div class="notch-bottom"></div>
                    </div>

                    <!-- Right Side: Discount Stub -->
                    <div class="coupon-stub">
                        <?php if ($discount > 0): ?>
                            <div class="discount-circle">
                                <span class="off-text">خصم</span>
                                <span class="percent"><?php echo $discount; ?>%</span>
                            </div>
                        <?php else: ?>
                            <div class="discount-circle">
                                <span class="percent" style="font-size: 24px;">🎁</span>
                            </div>
                        <?php endif; ?>
                        
                        <span class="get-btn">
                            تسوق
                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
                        </span>
                    </div>
                </a>
                <?php endforeach; ?>
            </div>
        </div>
    </section>
    
    <script>
    // Auto-scroll Offers Carousel
    (function() {
        const carousel = document.getElementById('offersCarousel');
        if (!carousel) return;
        
        let scrollAmount = 0;
        const scrollStep = 360; // Width of one card + gap
        let isUserScrolling = false;
        let scrollTimeout;
        
        // Detect user scrolling
        carousel.addEventListener('scroll', function() {
            isUserScrolling = true;
            clearTimeout(scrollTimeout);
            scrollTimeout = setTimeout(function() {
                isUserScrolling = false;
            }, 3000);
        });
        
        // Auto-scroll function
        function autoScroll() {
            if (isUserScrolling) return;
            
            scrollAmount += scrollStep;
            
            // Reset to start if reached end
            if (scrollAmount >= carousel.scrollWidth - carousel.clientWidth) {
                scrollAmount = 0;
            }
            
            carousel.scrollTo({
                left: scrollAmount,
                behavior: 'smooth'
            });
        }
        
        // Start auto-scrolling every 3 seconds
        setInterval(autoScroll, 3000);
    })();
    
    // Balloons Effect
    (function() {
        const container = document.getElementById('balloonsContainer');
        if (!container) return;
        
        const balloonColors = ['#E57393', '#F2A8C0', '#D1537A', '#f4a582', '#ffc4d6'];
        
        function createBalloon() {
            const balloon = document.createElement('div');
            const size = Math.random() * 30 + 20; // 20-50px
            const left = Math.random() * 100; // 0-100%
            const duration = Math.random() * 3 + 4; // 4-7s
            const color = balloonColors[Math.floor(Math.random() * balloonColors.length)];
            
            balloon.style.cssText = `
                position: absolute;
                bottom: -60px;
                left: ${left}%;
                width: ${size}px;
                height: ${size * 1.2}px;
                background: ${color};
                border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
                opacity: 0.7;
                animation: floatUp ${duration}s ease-in forwards;
                box-shadow: inset -10px -10px 20px rgba(0,0,0,0.1);
            `;
            
            // Add string
            const string = document.createElement('div');
            string.style.cssText = `
                position: absolute;
                bottom: -20px;
                left: 50%;
                width: 1px;
                height: 20px;
                background: rgba(0,0,0,0.2);
            `;
            balloon.appendChild(string);
            
            container.appendChild(balloon);
            
            // Remove after animation
            setTimeout(() => {
                balloon.style.opacity = '0';
                setTimeout(() => balloon.remove(), 500);
            }, duration * 1000);
        }
        
        // Create balloons periodically
        setInterval(createBalloon, 800);
        
        // Initial balloons
        for (let i = 0; i < 3; i++) {
            setTimeout(createBalloon, i * 300);
        }
    })();
    </script>
    
    <style>
    /* Balloon Animation - Complete Float Up */
    @keyframes floatUp {
        0% {
            transform: translateY(0) rotate(0deg);
            opacity: 0.7;
        }
        30% {
            opacity: 0.9;
        }
        70% {
            opacity: 0.8;
        }
        100% {
            transform: translateY(-150vh) rotate(-15deg);
            opacity: 0;
        }
    }
    
    /* Coupon Card Styles */
    @keyframes cardFloat {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-3px); }
    }
    
    @keyframes shimmer {
        0% { background-position: -200% center; }
        100% { background-position: 200% center; }
    }
    
    .coupon-card {
        flex: 0 0 340px;
        background: white;
        border-radius: 24px;
        display: flex;
        position: relative;
        box-shadow: 0 8px 24px rgba(229, 115, 147, 0.15);
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        cursor: pointer;
        overflow: hidden;
        border: 2px solid rgba(229, 115, 147, 0.1);
        height: 180px;
        text-decoration: none;
        color: inherit;
        animation: cardFloat 3s ease-in-out infinite;
    }
    
    .coupon-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: -200%;
        width: 200%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
        animation: shimmer 3s infinite;
    }
    
    .coupon-card:hover {
        transform: translateY(-8px) scale(1.02);
        box-shadow: 0 16px 40px rgba(229, 115, 147, 0.25);
        border-color: rgba(229, 115, 147, 0.3);
    }

    /* Left Side */
    .coupon-info {
        flex: 1;
        padding: 20px;
        display: flex;
        flex-direction: column;
        background: linear-gradient(135deg, #ffffff 0%, #fff9f5 100%);
        justify-content: space-between;
    }
    
    .coupon-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 8px;
    }
    .brand-tag {
        font-size: 10px;
        font-weight: 800;
        color: #E57393;
        letter-spacing: 1px;
        text-transform: uppercase;
        background: rgba(229, 115, 147, 0.08);
        padding: 4px 8px;
        border-radius: 4px;
    }
    .time-tag {
        font-size: 10px;
        color: #ff6b6b;
        font-weight: 600;
    }

    .coupon-title {
        font-size: 16px;
        font-weight: 800;
        color: #2d3436;
        margin: 0 0 4px 0;
        line-height: 1.4;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .coupon-desc {
        font-size: 11px;
        color: #636e72;
        margin: 0;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .coupon-price {
        margin-top: auto;
        display: flex;
        align-items: baseline;
        gap: 8px;
    }
    .new-price {
        font-size: 18px;
        font-weight: 800;
        color: #2d3436;
    }
    .old-price {
        font-size: 12px;
        color: #b2bec3;
        text-decoration: line-through;
    }

    /* Divider */
    .coupon-divider {
        width: 24px;
        background: white;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        z-index: 1;
    }
    .coupon-divider .line {
        height: 70%;
        border-left: 2px dashed #dfe6e9;
        opacity: 0.6;
    }
    .notch-top, .notch-bottom {
        position: absolute;
        width: 20px;
        height: 20px;
        background: #fff5f7; /* Matches section background */
        border-radius: 50%;
        left: 50%;
        transform: translateX(-50%);
        z-index: 2;
    }
    /* Add inset shadow to simulate hole depth */
    .notch-top { 
        top: -12px; 
        box-shadow: inset 0 -3px 3px rgba(0,0,0,0.05);
    }
    .notch-bottom { 
        bottom: -12px; 
        box-shadow: inset 0 3px 3px rgba(0,0,0,0.05);
    }

    /* Right Side (Stub) */
    .coupon-stub {
        width: 90px;
        background: linear-gradient(135deg, #E57393 0%, #D1537A 100%);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 10px;
        color: white;
        position: relative;
        gap: 10px;
    }
    
    .discount-circle {
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .off-text {
        display: block;
        font-size: 11px;
        opacity: 0.9;
        margin-bottom: 2px;
    }
    .percent {
        display: block;
        font-size: 26px;
        font-weight: 800;
        line-height: 1;
        text-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }

    .get-btn {
        background: rgba(255, 255, 255, 0.2);
        color: white;
        border: 1px solid rgba(255, 255, 255, 0.4);
        padding: 6px 14px;
        border-radius: 20px;
        font-size: 11px;
        font-weight: 700;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 4px;
        transition: all 0.2s;
        backdrop-filter: blur(5px);
    }
    .get-btn:hover {
        background: white;
        color: #E57393;
        transform: scale(1.05);
    }

    /* Scrollbar */
    .offers-scroll-container::-webkit-scrollbar {
        display: none;
    }
    </style>
    <?php endif; ?>

    <!-- Testimonials Section -->
    <section style="padding: var(--space-2xl) 0; background: linear-gradient(135deg, #fff9f5 0%, #ffebf0 100%);">
        <div class="container-pinterest">
            <!-- Testimonials with Vertical Title -->
            <div style="display: flex; gap: 30px; align-items: center; max-width: 1000px; margin: 0 auto;">
                
                <!-- Vertical Title on Right -->
                <div style="display: flex; flex-direction: column; align-items: center; gap: 20px;">
                    <h2 style="
                        writing-mode: vertical-rl;
                        text-orientation: mixed;
                        transform: rotate(180deg);
                        font-size: 32px;
                        font-weight: 800;
                        background: linear-gradient(180deg, #E57393 0%, #D1537A 100%);
                        -webkit-background-clip: text;
                        -webkit-text-fill-color: transparent;
                        background-clip: text;
                        margin: 0;
                        letter-spacing: 2px;
                        white-space: nowrap;
                    ">آراء عملائنا</h2>
                    
                    <!-- Elegant Plus Button -->
                    <button onclick="showReviewModal()" class="testimonials-plus-btn" style="
                        width: 48px;
                        height: 48px;
                        background: #E57393;
                        border: none;
                        border-radius: 50%;
                        color: white;
                        font-size: 28px;
                        font-weight: 300;
                        cursor: pointer;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        box-shadow: 0 4px 12px rgba(229, 115, 147, 0.3);
                        transition: all 0.3s ease;
                        flex-shrink: 0;
                    " onmouseover="this.style.transform='rotate(90deg) scale(1.1)'; this.style.boxShadow='0 6px 16px rgba(229, 115, 147, 0.4)'" onmouseout="this.style.transform='rotate(0deg) scale(1)'; this.style.boxShadow='0 4px 12px rgba(229, 115, 147, 0.3)'" title="أضف رأيك">
                        +
                    </button>
                </div>

                <!-- Testimonials Carousel -->
                <div style="flex: 1; position: relative;">
                <div id="testimonialsCarousel" style="overflow: hidden; position: relative; min-height: 280px;">
                    <?php foreach($testimonials as $index => $testimonial): ?>
                        <div class="testimonial-slide" data-index="<?php echo $index; ?>" style="position: absolute; width: 100%; opacity: <?php echo $index === 0 ? '1' : '0'; ?>; transition: opacity 0.6s ease; padding: 0 var(--space-md);">
                            <div style="background: white; border-radius: 20px; padding: 32px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); text-align: right; position: relative; overflow: hidden;">
                                
                                <!-- Stars -->
                                <div style="display: flex; gap: 6px; margin-bottom: 20px;">
                                    <?php for($i = 1; $i <= 5; $i++): ?>
                                        <svg width="20" height="20" viewBox="0 0 24 24" fill="<?php echo $i <= $testimonial['rating'] ? '#E57393' : '#e0e0e0'; ?>" stroke="none">
                                            <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
                                        </svg>
                                    <?php endfor; ?>
                                </div>
                                
                                <!-- Comment -->
                                <p style="color: #1f2937; line-height: 1.8; margin-bottom: 24px; font-size: 17px; font-weight: 500;">
                                    <?php echo htmlspecialchars($testimonial['comment']); ?>
                                </p>
                                
                                <!-- Customer Name -->
                                <div style="border-top: 2px solid #f3f4f6; padding-top: 16px;">
                                    <p style="font-weight: 700; color: #E57393; margin: 0; font-size: 16px;">
                                        <?php echo htmlspecialchars($testimonial['customer_name']); ?>
                                    </p>
                                    <p style="font-size: 13px; color: #9ca3af; margin: 4px 0 0;">عميلة مميزة</p>
                                </div>
                            </div>
                        </div>
                    <?php endforeach; ?>
                </div>
            </div>
        </div>
    </section>

    <script>
        // Testimonials Auto-Rotate (Fade Effect)
        let currentTestimonialIndex = 0;
        const testimonialSlides = document.querySelectorAll('.testimonial-slide');
        const totalTestimonialSlides = testimonialSlides.length;

        function showNextTestimonial() {
            if (totalTestimonialSlides <= 1) return;
            
            // Hide current
            testimonialSlides[currentTestimonialIndex].style.opacity = '0';
            
            // Move to next
            currentTestimonialIndex = (currentTestimonialIndex + 1) % totalTestimonialSlides;
            
            // Show next
            testimonialSlides[currentTestimonialIndex].style.opacity = '1';
        }

        // Auto-rotate every 2 seconds
        if (totalTestimonialSlides > 1) {
            setInterval(showNextTestimonial, 2000);
        }
    </script>

    <!-- Products Grid -->
    <section style="padding: var(--space-2xl) 0; background: linear-gradient(135deg, #ffffff 0%, #fff9f5 100%);">
        <div class="container-pinterest">
            <div class="section-header" style="margin-bottom: var(--space-2xl); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px;">
                <div style="text-align: right;">
                    <h2 class="section-title" style="background: linear-gradient(135deg, #E57393 0%, #D1537A 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 8px;">منتجاتنا المميزة</h2>
                    <p class="section-subtitle" style="font-size: 16px; color: var(--text-secondary); margin: 0;">اكتشفي مجموعتنا الحصرية من منتجات العناية بالجمال الطبيعية</p>
                </div>
                
                <!-- View All Products Link -->
                <a href="products.php" style="
                    display: inline-flex;
                    align-items: center;
                    gap: 8px;
                    color: #E57393;
                    text-decoration: none;
                    font-weight: 600;
                    font-size: 15px;
                    padding: 10px 20px;
                    border: 2px solid #E57393;
                    border-radius: 50px;
                    transition: all 0.3s ease;
                " onmouseover="this.style.background='#E57393'; this.style.color='white'" onmouseout="this.style.background='transparent'; this.style.color='#E57393'">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <rect x="3" y="3" width="7" height="7"></rect>
                        <rect x="14" y="3" width="7" height="7"></rect>
                        <rect x="14" y="14" width="7" height="7"></rect>
                        <rect x="3" y="14" width="7" height="7"></rect>
                    </svg>
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M5 12h14M12 5l7 7-7 7"/>
                    </svg>
                </a>
            </div>

            <div class="products-grid" id="productsGrid">
                <?php foreach($products as $product): 
                    // Fix image path
                    if (!empty($product['image'])) {
                        if (strpos($product['image'], 'uploads/') === 0) {
                            $imageUrl = '../' . htmlspecialchars($product['image']);
                        } else {
                            $imageUrl = '../uploads/products/' . htmlspecialchars($product['image']);
                        }
                    } else {
                        $imageUrl = 'https://images.unsplash.com/photo-1556228578-8c89e6adf883?w=400&h=500&fit=crop';
                    }
                ?>
                    <div class="product-card" onclick="window.location.href='product.php?id=<?php echo $product['id']; ?>'">
                        <?php 
                        $hasDiscount = !empty($product['discount_price']) && $product['discount_price'] < $product['price'];
                        if ($hasDiscount):
                            $discountPercent = round((($product['price'] - $product['discount_price']) / $product['price']) * 100);
                        ?>
                            <div style="position: absolute; top: 12px; right: 12px; background: linear-gradient(135deg, #E57393 0%, #D1537A 100%); color: white; padding: 6px 12px; border-radius: 20px; font-weight: 700; font-size: 13px; z-index: 2; box-shadow: 0 2px 8px rgba(229, 115, 147, 0.4);">
                                -<?php echo $discountPercent; ?>%
                            </div>
                        <?php endif; ?>
                        <div class="product-image-wrapper">
                            <img src="<?php echo $imageUrl; ?>" 
                                 alt="<?php echo htmlspecialchars($product['name']); ?>"
                                 class="product-image"
                                 loading="lazy">
                            <div class="product-overlay"></div>
                            <div class="product-actions" onclick="event.stopPropagation();">
                                <button class="action-btn" 
                                        onclick="toggleWishlist(<?php echo $product['id']; ?>)"
                                        data-product-id="<?php echo $product['id']; ?>"
                                        title="إضافة للمفضلة">
                                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                        <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
                                    </svg>
                                </button>
                            </div>
                        </div>
                        <div class="product-info">
                            <h3 class="product-title" style="color: #E57393 !important;"><?php echo htmlspecialchars($product['name']); ?></h3>
                            <?php if (!empty($product['size'])): ?>
                                <p style="font-size: 12px; color: #6B7280; margin: 4px 0;">
                                    <i class="fas fa-ruler-horizontal"></i> <?php echo htmlspecialchars($product['size']); ?>
                                </p>
                            <?php endif; ?>
                            <p class="product-description">
                                <?php 
                                $desc = !empty($product['short_description']) ? $product['short_description'] : $product['description'];
                                echo htmlspecialchars(mb_substr($desc, 0, 80)) . (mb_strlen($desc) > 80 ? '...' : ''); 
                                ?>
                            </p>
                            <div class="product-footer">
                                <?php 
                                $hasDiscount = !empty($product['discount_price']) && $product['discount_price'] < $product['price'];
                                if ($hasDiscount): 
                                ?>
                                    <div style="display: flex; align-items: center; gap: 8px;">
                                        <span class="product-price" style="text-decoration: line-through; opacity: 0.6; font-size: 14px;">
                                            <?php echo $currency_symbol; ?> <?php echo number_format($product['price'], 0); ?>
                                        </span>
                                        <span class="product-price" style="color: #E57393; font-weight: 700;">
                                            <?php echo $currency_symbol; ?> <?php echo number_format($product['discount_price'], 0); ?>
                                        </span>
                                    </div>
                                <?php else: ?>
                                    <span class="product-price">
                                        <?php echo $currency_symbol; ?> <?php echo number_format($product['price'], 0); ?>
                                    </span>
                                <?php endif; ?>
                                <button class="add-to-cart-btn" 
                                        onclick="event.stopPropagation(); addToCart(<?php echo $product['id']; ?>);"
                                        title="إضافة للسلة"
                                        style="background: #E57393 !important;">
                                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">
                                        <line x1="12" y1="5" x2="12" y2="19"></line>
                                        <line x1="5" y1="12" x2="19" y2="12"></line>
                                    </svg>
                                </button>
                            </div>
                        </div>
                    </div>
                <?php endforeach; ?>
            </div>

            <?php if (empty($products)): ?>
                <div style="text-align: center; padding: var(--space-2xl); color: var(--text-secondary);">
                    <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" style="margin: 0 auto 16px; opacity: 0.3;">
                        <circle cx="12" cy="12" r="10"></circle>
                        <line x1="12" y1="8" x2="12" y2="12"></line>
                        <line x1="12" y1="16" x2="12.01" y2="16"></line>
                    </svg>
                    <p>لا توجد منتجات متاحة حالياً</p>
                </div>
            <?php endif; ?>
        </div>
    </section>


    <!-- Services/Bookings Section -->
    <?php if (!empty($services)): ?>
    <section style="padding: 60px 0; background: linear-gradient(135deg, #fff9f5 0%, #ffebf0 100%);">
        <div class="container-pinterest">
            <div class="section-header" style="text-align: center; margin-bottom: 48px;">
                <h2 style="font-size: 36px; font-weight: 800; background: linear-gradient(135deg, #E57393 0%, #D1537A 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 12px;">
                    خدماتنا المتخصصة
                </h2>
                <p style="color: #666; font-size: 16px; max-width: 600px; margin: 0 auto;">
                    احجزي موعدك في بيوتي سنتر روز سكين واستمتعي بتجربة فريدة
                </p>
            </div>

            <!-- Services Carousel -->
            <div style="position: relative; max-width: 350px; margin: 0 auto;">
                <div id="servicesCarousel" style="position: relative; min-height: 500px; overflow: hidden;">
                    <style>
                        .service-card {
                            position: absolute;
                            width: 100%;
                            opacity: 0;
                            transform: scale(0.85) translateX(50px);
                            transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
                        }
                        .service-card.active {
                            opacity: 1;
                            transform: scale(1) translateX(0);
                            z-index: 2;
                        }
                        .service-card.prev {
                            opacity: 0;
                            transform: scale(0.85) translateX(-50px);
                        }
                    </style>
                <?php 
                $gradients = [
                    'linear-gradient(135deg, #E57393 0%, #f4a582 100%)',
                    'linear-gradient(135deg, #ffd4c4 0%, #ffc4d6 100%)',
                    'linear-gradient(135deg, #E57393 0%, #D1537A 100%)'
                ];
                foreach($services as $index => $service): 
                    $gradient = $gradients[$index % 3];
                    $serviceImage = !empty($service['image']) ? '../' . htmlspecialchars($service['image']) : 'https://images.unsplash.com/photo-1540555700478-4be289fbecef?w=600&h=400&fit=crop';
                ?>
                <div class="service-card <?php echo $index === 0 ? 'active' : ''; ?>" data-service-index="<?php echo $index; ?>" style="background: linear-gradient(135deg, #fff9f5 0%, #ffebf0 100%); border-radius: 24px; overflow: hidden; box-shadow: 0 6px 24px rgba(229, 115, 147, 0.15); padding: 20px;"
                     onmouseover="this.style.transform='translateY(-8px)'; this.style.boxShadow='0 12px 32px rgba(0,0,0,0.12)'"
                     onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 6px 24px rgba(0,0,0,0.08)'">
                    
                    <!-- Service Image -->
                    <div style="position: relative; height: 160px; background: <?php echo $gradient; ?>; border-radius: 18px; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; margin-bottom: 14px;">
                        <img src="<?php echo $serviceImage; ?>" 
                             alt="<?php echo htmlspecialchars($service['name']); ?>"
                             style="width: 100%; height: 100%; object-fit: cover;">
                    </div>
                    
                    <!-- Service Info -->
                    <div style="margin-bottom: 14px;">
                        <h3 style="font-size: 17px; font-weight: 800; color: #1f2937; margin-bottom: 4px; line-height: 1.3;">
                            <?php echo htmlspecialchars($service['name']); ?>
                        </h3>
                        <?php if (!empty($service['category'])): ?>
                        <p style="color: #6b7280; font-size: 12px; font-weight: 500; margin-bottom: 8px;">
                            <?php echo htmlspecialchars($service['category']); ?>
                        </p>
                        <?php endif; ?>
                        
                        <p style="color: #9ca3af; font-size: 11px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;">
                            <?php echo htmlspecialchars($service['description'] ?: 'خدمة متميزة لعناية فائقة بجمالك'); ?>
                        </p>
                    </div>
                    
                    <!-- Duration -->
                    <?php if (!empty($service['duration'])): ?>
                    <div style="background: linear-gradient(135deg, rgba(255, 212, 196, 0.3) 0%, rgba(255, 196, 214, 0.3) 100%); padding: 10px; border-radius: 12px; text-align: center; margin-bottom: 14px; border: 1px solid rgba(229, 115, 147, 0.2);">
                        <div style="font-size: 10px; color: #E57393; margin-bottom: 3px; font-weight: 600;">مدة الجلسة</div>
                        <div style="font-size: 16px; font-weight: 700; color: #D1537A;">
                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#E57393" stroke-width="2" style="display: inline-block; vertical-align: middle; margin-left: 4px;">
                                <circle cx="12" cy="12" r="10"></circle>
                                <polyline points="12 6 12 12 16 14"></polyline>
                            </svg>
                            <?php echo $service['duration']; ?> دقيقة
                        </div>
                    </div>
                    <?php endif; ?>
                    
                    <!-- Price & Book Button -->
                    <div style="background: rgba(255,255,255,0.95); padding: 12px; border-radius: 16px; display: flex; align-items: center; justify-content: space-between; box-shadow: 0 2px 8px rgba(229, 115, 147, 0.1);">
                        <div>
                            <div style="font-size: 19px; font-weight: 800; color: #E57393;">
                                ~<?php echo number_format($service['price'], 0); ?>
                            </div>
                            <div style="font-size: 9px; color: #9ca3af;">لكل جلسة</div>
                        </div>
                        
                        <button onclick="showBookingModal(<?php echo $service['id']; ?>, '<?php echo addslashes($service['name']); ?>')" 
                                style="background: linear-gradient(135deg, #E57393 0%, #D1537A 100%); color: white; border: none; padding: 10px 18px; border-radius: 14px; font-size: 13px; font-weight: 700; cursor: pointer; transition: all 0.3s; box-shadow: 0 3px 12px rgba(229, 115, 147, 0.3);"
                                onmouseover="this.style.transform='scale(1.05)'; this.style.boxShadow='0 5px 18px rgba(229, 115, 147, 0.4)'"
                                onmouseout="this.style.transform='scale(1)'; this.style.boxShadow='0 3px 12px rgba(229, 115, 147, 0.3)'">
                            احجزي
                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" style="display: inline-block; margin-right: 4px; vertical-align: middle;">
                                <path d="M5 12h14M12 5l7 7-7 7"/>
                            </svg>
                        </button>
                    </div>
                </div>
                <?php endforeach; ?>
            </div>
            
            <!-- Carousel Indicators -->
            <div style="text-align: center; margin-top: 20px;">
                <div id="servicesIndicators" style="display: inline-flex; gap: 8px;"></div>
            </div>
            </div>

            <!-- View All Services Link -->
            <div style="text-align: center; margin-top: 32px;">
                <a href="services.php" style="display: inline-flex; align-items: center; gap: 10px; padding: 14px 32px; background: transparent; color: #E57393; text-decoration: none; font-size: 16px; font-weight: 700; border: 2.5px solid #E57393; border-radius: 50px; transition: all 0.3s;"
                   onmouseover="this.style.background='#E57393'; this.style.color='white'; this.style.transform='translateY(-2px)'"
                   onmouseout="this.style.background='transparent'; this.style.color='#E57393'; this.style.transform='translateY(0)'">
                    <span>شاهدي المزيد من الخدمات</span>
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
                        <circle cx="12" cy="12" r="1"></circle>
                        <circle cx="19" cy="12" r="1"></circle>
                        <circle cx="5" cy="12" r="1"></circle>
                    </svg>
                </a>
            </div>
        </div>
    </section>
    
    <script>
    // Services Carousel Auto-Rotate (1 card at a time, every 2 seconds)
    let currentServiceIndex = 0;
    const serviceCards = document.querySelectorAll('.service-card');
    const totalServices = serviceCards.length;
    
    function showServiceCard(index) {
        serviceCards.forEach((card, i) => {
            card.classList.remove('active', 'prev');
            if (i === index) {
                card.classList.add('active');
            } else if (i === (index - 1 + totalServices) % totalServices) {
                card.classList.add('prev');
            }
        });
        
        // Update indicators
        updateServicesIndicators();
    }
    
    function updateServicesIndicators() {
        const indicatorsContainer = document.getElementById('servicesIndicators');
        if (!indicatorsContainer) return;
        
        let html = '';
        for (let i = 0; i < totalServices; i++) {
            const isActive = i === currentServiceIndex;
            html += `<div style="width: ${isActive ? '24px' : '8px'}; height: 8px; background: ${isActive ? '#E57393' : 'rgba(229, 115, 147, 0.3)'}; border-radius: 4px; transition: all 0.3s; cursor: pointer;" onclick="goToServiceCard(${i})"></div>`;
        }
        indicatorsContainer.innerHTML = html;
    }
    
    function nextServiceCard() {
        currentServiceIndex = (currentServiceIndex + 1) % totalServices;
        showServiceCard(currentServiceIndex);
    }
    
    function goToServiceCard(index) {
        currentServiceIndex = index;
        showServiceCard(currentServiceIndex);
    }
    
    // Auto-rotate every 2 seconds
    if (totalServices > 1) {
        setInterval(nextServiceCard, 2000);
        updateServicesIndicators();
    }
    </script>
    <?php endif; ?>

    <!-- Consultations Section -->
    <?php include '../includes/consultations-section.php'; ?>

    <!-- Service Booking Modal -->
    <div id="bookingModal" style="display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(8px); z-index: 99999; align-items: center; justify-content: center;">
        <div style="background: linear-gradient(135deg, #fff9f5 0%, #ffffff 100%); border-radius: 28px; max-width: 480px; width: 90%; max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,0.3); position: relative; padding: 32px;">
            
            <!-- Close Button -->
            <button onclick="closeBookingModal()" style="position: absolute; top: 16px; left: 16px; background: rgba(0,0,0,0.05); border: none; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s; color: #666; font-size: 24px;" onmouseover="this.style.background='rgba(0,0,0,0.1)'" onmouseout="this.style.background='rgba(0,0,0,0.05)'">
                ×
            </button>
            
            <!-- Header -->
            <div style="text-align: center; margin-bottom: 28px;">
                <div style="width: 80px; height: 80px; background: linear-gradient(135deg, #E57393 0%, #D1537A 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; box-shadow: 0 8px 24px rgba(229, 115, 147, 0.3);">
                    <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">
                        <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
                        <line x1="16" y1="2" x2="16" y2="6"></line>
                        <line x1="8" y1="2" x2="8" y2="6"></line>
                        <line x1="3" y1="10" x2="21" y2="10"></line>
                    </svg>
                </div>
                <h3 style="font-size: 24px; font-weight: 800; color: #1f2937; margin-bottom: 8px;">احجزي موعدك</h3>
                <p style="font-size: 14px; color: #6b7280;" id="bookingServiceName">خدمة متخصصة</p>
            </div>
            
            <form id="bookingForm" onsubmit="handleBooking(event)">
                <input type="hidden" id="serviceId" name="service_id">
                
                <!-- Select Date -->
                <div style="margin-bottom: 20px;">
                    <label style="display: block; font-size: 13px; font-weight: 700; color: #374151; margin-bottom: 8px;">اختاري التاريخ</label>
                    <div style="background: white; padding: 16px; border-radius: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.06);">
                        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;">
                            <button type="button" onclick="changeServiceMonth(-1)" style="background: none; border: none; color: #E57393; font-size: 20px; cursor: pointer;">‹</button>
                            <span style="font-weight: 700; color: #1f2937;" id="currentServiceMonth">يناير 2025</span>
                            <button type="button" onclick="changeServiceMonth(1)" style="background: none; border: none; color: #E57393; font-size: 20px; cursor: pointer;">›</button>
                        </div>
                        <div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;" id="serviceDateGrid">
                            <!-- Dates will be generated by JS -->
                        </div>
                    </div>
                </div>
                
                <!-- Select Time -->
                <div style="margin-bottom: 20px;">
                    <label style="display: block; font-size: 13px; font-weight: 700; color: #374151; margin-bottom: 8px;">اختاري الوقت</label>
                    <div style="background: white; padding: 16px; border-radius: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.06);">
                        <div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;" id="serviceTimeGrid">
                            <!-- Times will be generated by JS -->
                        </div>
                    </div>
                </div>
                
                <!-- Notes -->
                <div style="margin-bottom: 24px;">
                    <label style="display: block; font-size: 13px; font-weight: 700; color: #374151; margin-bottom: 8px;">ملاحظات (اختياري)</label>
                    <textarea name="notes" rows="3" style="width: 100%; padding: 12px; border: 2px solid #e5e7eb; border-radius: 12px; font-size: 14px; resize: none;" placeholder="أي ملاحظات أو استفسارات..."></textarea>
                </div>
                
                <button type="submit" style="width: 100%; background: linear-gradient(135deg, #E57393 0%, #D1537A 100%); color: white; border: none; padding: 16px; border-radius: 16px; font-size: 16px; font-weight: 700; cursor: pointer; transition: all 0.3s; box-shadow: 0 4px 16px rgba(229, 115, 147, 0.3);" onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 6px 24px rgba(229, 115, 147, 0.4)'" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 4px 16px rgba(229, 115, 147, 0.3)'">
                    تأكيد الحجز
                </button>
            </form>
        </div>
    </div>

    <script>
    // Generate dates for next 14 days for services
    function generateServiceDates() {
        const dateGrid = document.getElementById('serviceDateGrid');
        const today = new Date();
        let html = '';
        
        for (let i = 0; i < 14; i++) {
            const date = new Date(today);
            date.setDate(today.getDate() + i);
            const dayNum = date.getDate();
            const dayName = ['الأحد', 'الإثنين', 'الثلاثاء', 'الأربعاء', 'الخميس', 'الجمعة', 'السبت'][date.getDay()];
            const dateStr = date.toISOString().split('T')[0];
            
            html += `<div onclick="selectServiceDate(this, '${dateStr}')" data-date="${dateStr}" style="background: ${i === 0 ? 'linear-gradient(135deg, #E57393 0%, #f4a582 100%)' : 'rgba(229, 115, 147, 0.1)'}; padding: 12px 8px; border-radius: 12px; text-align: center; cursor: pointer; transition: all 0.3s; color: ${i === 0 ? 'white' : '#1f2937'};" class="service-date-option">
                <div style="font-size: 18px; font-weight: 700; color: #1f2937;">${dayNum}</div>
                <div style="font-size: 10px; color: #6b7280;">${dayName}</div>
            </div>`;
        }
        
        dateGrid.innerHTML = html;
    }

    // Generate time slots for services
    function generateServiceTimes() {
        const timeGrid = document.getElementById('serviceTimeGrid');
        const times = ['9:00', '10:00', '11:00', '12:00', '1:00', '2:00', '3:00', '4:00'];
        let html = '';
        
        times.forEach((time, i) => {
            html += `<div onclick="selectServiceTime(this, '${time}')" data-time="${time}:00" style="background: ${i === 2 ? 'linear-gradient(135deg, #E57393 0%, #f4a582 100%)' : 'rgba(229, 115, 147, 0.1)'}; padding: 10px; border-radius: 10px; text-align: center; cursor: pointer; transition: all 0.3s; font-size: 13px; font-weight: 600; color: ${i === 2 ? 'white' : '#1f2937'};" class="service-time-option">${time}</div>`;
        });
        
        timeGrid.innerHTML = html;
    }

    function selectServiceDate(element, date) {
        document.querySelectorAll('.service-date-option').forEach(el => {
            el.style.background = 'rgba(229, 115, 147, 0.1)';
            el.style.color = '#1f2937';
        });
        element.style.background = 'linear-gradient(135deg, #E57393 0%, #f4a582 100%)';
        element.style.color = 'white';
        element.dataset.date = date;
    }

    function selectServiceTime(element, time) {
        document.querySelectorAll('.service-time-option').forEach(el => {
            el.style.background = 'rgba(229, 115, 147, 0.1)';
            el.style.color = '#1f2937';
        });
        element.style.background = 'linear-gradient(135deg, #E57393 0%, #f4a582 100%)';
        element.style.color = 'white';
        element.dataset.time = time;
    }

    function changeServiceMonth(direction) {
        // Placeholder for month navigation
        console.log('Change month:', direction);
    }

    // Close on background click
    document.getElementById('bookingModal').addEventListener('click', function(e) {
        if (e.target === this) closeBookingModal();
    });

    // Initialize dates and times when modal opens
    function showBookingModal(serviceId, serviceName) {
        <?php if (!isset($_SESSION['user_id'])): ?>
            alert('يجب تسجيل الدخول أولاً للحجز');
            window.location.href = 'account.php';
            return;
        <?php endif; ?>
        
        document.getElementById('serviceId').value = serviceId;
        document.getElementById('bookingServiceName').textContent = serviceName;
        document.getElementById('bookingModal').style.display = 'flex';
        
        // Generate dates and times
        generateServiceDates();
        generateServiceTimes();
    }

    function closeBookingModal() {
        document.getElementById('bookingModal').style.display = 'none';
        document.getElementById('bookingForm').reset();
    }
    </script>

    <!-- Login Modal -->
    <div id="loginModal" class="modal-overlay hidden" onclick="if(event.target === this) closeLoginModal()">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">تسجيل الدخول</h3>
                <button class="modal-close" onclick="closeLoginModal()">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <line x1="18" y1="6" x2="6" y2="18"></line>
                        <line x1="6" y1="6" x2="18" y2="18"></line>
                    </svg>
                </button>
            </div>
            <div class="modal-body">
                <form id="loginForm" onsubmit="handleLogin(event)">
                    <div class="form-group">
                        <label class="form-label">رقم الهاتف</label>
                        <input type="tel" name="phone" class="form-input" placeholder="01234567890" required>
                    </div>
                    <div class="form-group">
                        <label class="form-label">كلمة المرور</label>
                        <input type="password" name="password" class="form-input" placeholder="••••••••" required>
                    </div>
                    <button type="submit" class="btn-primary" style="width: 100%; justify-content: center;">
                        تسجيل الدخول
                    </button>
                    <div style="text-align: center; margin-top: var(--space-md);">
                        <a href="register.php" style="color: var(--text-secondary); font-size: 14px;">
                            ليس لديك حساب؟ سجل الآن
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Review Modal -->
    <div id="reviewModal" class="modal-overlay hidden" onclick="if(event.target === this) closeReviewModal()">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">شارك رأيك معنا</h3>
                <button class="modal-close" onclick="closeReviewModal()">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <line x1="18" y1="6" x2="6" y2="18"></line>
                        <line x1="6" y1="6" x2="18" y2="18"></line>
                    </svg>
                </button>
            </div>
            <div class="modal-body">
                <form id="reviewForm" onsubmit="handleReviewSubmit(event)">
                    <div class="form-group">
                        <label class="form-label">الاسم</label>
                        <input type="text" name="name" class="form-input" placeholder="اسمك الكامل" required>
                    </div>
                    
                    <div class="form-group">
                        <label class="form-label">البريد الإلكتروني (اختياري)</label>
                        <input type="email" name="email" class="form-input" placeholder="email@example.com">
                    </div>
                    
                    <div class="form-group">
                        <label class="form-label">التقييم</label>
                        <div style="display: flex; gap: 8px; justify-content: center; margin: 12px 0;">
                            <input type="radio" name="rating" value="5" id="star5" required style="display: none;">
                            <input type="radio" name="rating" value="4" id="star4" style="display: none;">
                            <input type="radio" name="rating" value="3" id="star3" style="display: none;">
                            <input type="radio" name="rating" value="2" id="star2" style="display: none;">
                            <input type="radio" name="rating" value="1" id="star1" style="display: none;">
                            <div class="star-rating">
                                <svg class="star" data-rating="1" width="32" height="32" viewBox="0 0 24 24" fill="#e0e0e0" stroke="none" style="cursor: pointer;">
                                    <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
                                </svg>
                                <svg class="star" data-rating="2" width="32" height="32" viewBox="0 0 24 24" fill="#e0e0e0" stroke="none" style="cursor: pointer;">
                                    <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
                                </svg>
                                <svg class="star" data-rating="3" width="32" height="32" viewBox="0 0 24 24" fill="#e0e0e0" stroke="none" style="cursor: pointer;">
                                    <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
                                </svg>
                                <svg class="star" data-rating="4" width="32" height="32" viewBox="0 0 24 24" fill="#e0e0e0" stroke="none" style="cursor: pointer;">
                                    <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
                                </svg>
                                <svg class="star" data-rating="5" width="32" height="32" viewBox="0 0 24 24" fill="#e0e0e0" stroke="none" style="cursor: pointer;">
                                    <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
                                </svg>
                            </div>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label class="form-label">رأيك</label>
                        <textarea name="comment" class="form-input" rows="4" placeholder="شاركنا تجربتك مع منتجاتنا..." required></textarea>
                    </div>
                    
                    <button type="submit" class="btn-primary" style="width: 100%; justify-content: center;">
                        إرسال الرأي
                    </button>
                    <p style="text-align: center; margin-top: 12px; font-size: 13px; color: var(--text-secondary);">
                        سيتم مراجعة رأيك قبل نشره
                    </p>
                </form>
            </div>
        </div>
    </div>

    <!-- Toast Notification -->
    <div id="toast" class="toast-notification hidden"></div>

    <!-- Blog Posts Section -->
    <?php if (!empty($latest_posts)): ?>
    <section style="padding: 80px 0; background: linear-gradient(135deg, #fff9f5 0%, #ffebf0 100%);">
        <div class="container-pinterest">
            <div class="section-header" style="margin-bottom: 50px;">
                <h2 class="section-title" style="background: linear-gradient(135deg, #E57393 0%, #D1537A 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 8px; font-size: 36px; font-weight: 800; letter-spacing: -0.5px; text-align: center;">أسرار الجمال</h2>
                <p class="section-subtitle" style="font-size: 15px; color: #6b7280; margin: 0; font-weight: 500; text-align: center;">نصائح العناية بالبشرة من خبرائنا</p>
            </div>

            <!-- X-Style Tweets Feed -->
            <style>
                @keyframes fadeSlideUp {
                    from {
                        opacity: 0;
                        transform: translateY(30px);
                    }
                    to {
                        opacity: 1;
                        transform: translateY(0);
                    }
                }
                
                .tweet-card {
                    animation: fadeSlideUp 0.6s ease-out forwards;
                    opacity: 0;
                }
                
                .tweet-card:nth-child(1) {
                    animation-delay: 0.1s;
                }
                
                .tweet-card:nth-child(2) {
                    animation-delay: 0.3s;
                }
                
                .tweet-card:nth-child(3) {
                    animation-delay: 0.5s;
                }
            </style>
            
            <div style="max-width: 650px; margin: 0 auto;">
                <?php foreach ($latest_posts as $post): 
                    $image = $post['featured_image'] ?: '';
                    $excerpt = $post['excerpt'] ?: strip_tags(substr($post['content'], 0, 280));
                    $date = $post['published_at'] ?: $post['created_at'];
                ?>
                <article class="tweet-card" style="background: white; border-radius: 16px; padding: 20px; margin-bottom: 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); border: 1px solid rgba(229, 115, 147, 0.1); transition: all 0.3s; cursor: pointer;" 
                         onclick="window.location.href='blog-post.php?id=<?php echo $post['id']; ?>'"
                         onmouseover="this.style.boxShadow='0 4px 12px rgba(229, 115, 147, 0.15)'; this.style.borderColor='rgba(229, 115, 147, 0.3)'" 
                         onmouseout="this.style.boxShadow='0 1px 3px rgba(0,0,0,0.08)'; this.style.borderColor='rgba(229, 115, 147, 0.1)'">
                    
                    <!-- Header: Avatar + Name + Time -->
                    <div style="display: flex; align-items: start; gap: 12px; margin-bottom: 12px;">
                        <!-- Avatar -->
                        <div style="width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, #E57393 0%, #f4a582 100%); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 2px 8px rgba(229, 115, 147, 0.2);">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="white">
                                <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"/>
                            </svg>
                        </div>
                        
                        <div style="flex: 1;">
                            <div style="display: flex; align-items: center; gap: 6px; margin-bottom: 2px;">
                                <span style="font-weight: 700; color: #1f2937; font-size: 15px;">روز سكين</span>
                                <svg width="18" height="18" viewBox="0 0 24 24" fill="#E57393">
                                    <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
                                </svg>
                                <?php if (!empty($post['category'])): ?>
                                <span style="color: #E57393; font-size: 13px; font-weight: 600;">• <?php echo htmlspecialchars($post['category']); ?></span>
                                <?php endif; ?>
                            </div>
                            <div style="color: #6b7280; font-size: 14px;">
                                @RozSkin • <?php echo date('d M', strtotime($date)); ?>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Tweet Content -->
                    <div style="margin-bottom: 12px; padding-right: 60px;">
                        <h3 style="font-size: 16px; font-weight: 700; color: #1f2937; margin-bottom: 8px; line-height: 1.5;">
                            <?php echo htmlspecialchars($post['title']); ?>
                        </h3>
                        <p style="color: #1f2937; font-size: 15px; line-height: 1.6; margin: 0;">
                            <?php echo htmlspecialchars($excerpt); ?>
                        </p>
                    </div>
                    
                    <!-- Image (if exists) -->
                    <?php if (!empty($image)): ?>
                    <div style="margin-bottom: 12px; padding-right: 60px;">
                        <img src="../<?php echo htmlspecialchars($image); ?>" 
                             alt="<?php echo htmlspecialchars($post['title']); ?>"
                             style="width: 100%; border-radius: 16px; border: 1px solid rgba(229, 115, 147, 0.1); max-height: 400px; object-fit: cover;">
                    </div>
                    <?php endif; ?>
                    
                    <!-- Actions Bar (Like X) -->
                    <div style="display: flex; align-items: center; gap: 24px; padding-right: 60px; padding-top: 8px; border-top: 1px solid rgba(229, 115, 147, 0.08);">
                        <!-- Comment -->
                        <div onclick="event.stopPropagation(); window.location.href='blog-post.php?id=<?php echo $post['id']; ?>#comments'" 
                             style="display: flex; align-items: center; gap: 6px; color: #6b7280; font-size: 13px; transition: all 0.2s; cursor: pointer; padding: 6px 10px; border-radius: 8px;" 
                             onmouseover="this.style.color='#E57393'; this.style.background='rgba(229, 115, 147, 0.08)'" 
                             onmouseout="this.style.color='#6b7280'; this.style.background='transparent'">
                            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
                            </svg>
                            <span id="comment-count-<?php echo $post['id']; ?>"><?php echo rand(5, 25); ?></span>
                        </div>
                        
                        <!-- Like -->
                        <div onclick="event.stopPropagation(); togglePostLike(<?php echo $post['id']; ?>, this)" 
                             class="like-btn-<?php echo $post['id']; ?>"
                             style="display: flex; align-items: center; gap: 6px; color: #6b7280; font-size: 13px; transition: all 0.2s; cursor: pointer; padding: 6px 10px; border-radius: 8px;" 
                             onmouseover="this.style.background='rgba(229, 115, 147, 0.08)'" 
                             onmouseout="if(!this.classList.contains('liked')) this.style.background='transparent'">
                            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="heart-icon">
                                <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
                            </svg>
                            <span id="like-count-<?php echo $post['id']; ?>"><?php echo rand(15, 150); ?></span>
                        </div>
                        
                        <!-- Read More -->
                        <div style="margin-right: auto; color: #E57393; font-weight: 600; font-size: 13px; display: flex; align-items: center; gap: 4px;">
                            اقرأ المزيد
                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
                                <path d="M5 12h14M12 5l7 7-7 7"/>
                            </svg>
                        </div>
                    </div>
                </article>
                <?php endforeach; ?>
            </div>
            
            <script>
            // Toggle Post Like Function
            function togglePostLike(postId, element) {
                const likeCountSpan = document.getElementById('like-count-' + postId);
                const heartIcon = element.querySelector('.heart-icon');
                let currentCount = parseInt(likeCountSpan.textContent);
                
                // Check if already liked
                if (element.classList.contains('liked')) {
                    // Unlike
                    element.classList.remove('liked');
                    element.style.color = '#6b7280';
                    element.style.background = 'transparent';
                    heartIcon.setAttribute('fill', 'none');
                    heartIcon.setAttribute('stroke', 'currentColor');
                    likeCountSpan.textContent = currentCount - 1;
                    
                    // Remove from localStorage
                    let likedPosts = JSON.parse(localStorage.getItem('likedPosts') || '[]');
                    likedPosts = likedPosts.filter(id => id !== postId);
                    localStorage.setItem('likedPosts', JSON.stringify(likedPosts));
                } else {
                    // Like with animation
                    element.classList.add('liked');
                    element.style.color = '#E57393';
                    element.style.background = 'rgba(229, 115, 147, 0.08)';
                    heartIcon.setAttribute('fill', '#E57393');
                    heartIcon.setAttribute('stroke', '#E57393');
                    likeCountSpan.textContent = currentCount + 1;
                    
                    // Animate heart
                    element.style.transform = 'scale(1.2)';
                    setTimeout(() => {
                        element.style.transform = 'scale(1)';
                    }, 200);
                    
                    // Save to localStorage
                    let likedPosts = JSON.parse(localStorage.getItem('likedPosts') || '[]');
                    likedPosts.push(postId);
                    localStorage.setItem('likedPosts', JSON.stringify(likedPosts));
                }
            }
            
            // Load liked posts from localStorage on page load
            document.addEventListener('DOMContentLoaded', function() {
                const likedPosts = JSON.parse(localStorage.getItem('likedPosts') || '[]');
                likedPosts.forEach(postId => {
                    const likeBtn = document.querySelector('.like-btn-' + postId);
                    if (likeBtn) {
                        const heartIcon = likeBtn.querySelector('.heart-icon');
                        likeBtn.classList.add('liked');
                        likeBtn.style.color = '#E57393';
                        likeBtn.style.background = 'rgba(229, 115, 147, 0.08)';
                        heartIcon.setAttribute('fill', '#E57393');
                        heartIcon.setAttribute('stroke', '#E57393');
                    }
                });
            });
            </script>

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

    <!-- Branches Section -->
    <section style="padding: 50px 0; background: linear-gradient(135deg, #ffffff 0%, #fff9f5 100%);">
        <div class="container-pinterest">
            <!-- Section Header -->
            <div style="text-align: center; margin-bottom: 40px;">
                <h2 style="font-size: 28px; font-weight: 800; background: linear-gradient(135deg, #E57393 0%, #D1537A 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 8px;">فروعنا</h2>
                <p style="font-size: 14px; color: #6b7280; font-weight: 500;">زوري أقرب فرع ليكِ</p>
            </div>

            <!-- Branches Row -->
            <div class="branches-row" style="display: flex; gap: 20px; max-width: 900px; margin: 0 auto; justify-content: center; flex-wrap: wrap;">
                
                <!-- Branch 1: Alexandria -->
                <div style="background: white; border-radius: 16px; padding: 20px; box-shadow: 0 4px 12px rgba(229, 115, 147, 0.1); transition: all 0.3s ease; flex: 1; min-width: 200px; max-width: 280px; text-align: center;" onmouseover="this.style.transform='translateY(-4px)'; this.style.boxShadow='0 6px 16px rgba(229, 115, 147, 0.15)'" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 4px 12px rgba(229, 115, 147, 0.1)'">
                    <!-- Icon -->
                    <div class="branch-icon" style="width: 40px; height: 40px; background: linear-gradient(135deg, #E57393 0%, #D1537A 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; box-shadow: 0 2px 8px rgba(229, 115, 147, 0.3);">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">
                            <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
                            <circle cx="12" cy="10" r="3"></circle>
                        </svg>
                    </div>
                    
                    <!-- Branch Name -->
                    <h3 class="branch-name" style="font-size: 16px; font-weight: 800; color: #E57393; margin-bottom: 6px;">الإسكندرية</h3>
                    
                    <!-- Address -->
                    <p class="branch-address" style="font-size: 13px; color: #6b7280; margin: 0;">الإسكندرية، مصر</p>
                </div>

                <!-- Branch 2: Shubra -->
                <div style="background: white; border-radius: 16px; padding: 20px; box-shadow: 0 4px 12px rgba(229, 115, 147, 0.1); transition: all 0.3s ease; flex: 1; min-width: 200px; max-width: 280px; text-align: center;" onmouseover="this.style.transform='translateY(-4px)'; this.style.boxShadow='0 6px 16px rgba(229, 115, 147, 0.15)'" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 4px 12px rgba(229, 115, 147, 0.1)'">
                    <div class="branch-icon" style="width: 40px; height: 40px; background: linear-gradient(135deg, #E57393 0%, #D1537A 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; box-shadow: 0 2px 8px rgba(229, 115, 147, 0.3);">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">
                            <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
                            <circle cx="12" cy="10" r="3"></circle>
                        </svg>
                    </div>
                    
                    <h3 class="branch-name" style="font-size: 16px; font-weight: 800; color: #E57393; margin-bottom: 6px;">شبرا الخيمة</h3>
                    
                    <p class="branch-address" style="font-size: 13px; color: #6b7280; margin: 0;">شبرا الخيمة، القاهرة</p>
                </div>

                <!-- Branch 3: 6th October -->
                <div style="background: white; border-radius: 16px; padding: 20px; box-shadow: 0 4px 12px rgba(229, 115, 147, 0.1); transition: all 0.3s ease; flex: 1; min-width: 200px; max-width: 280px; text-align: center;" onmouseover="this.style.transform='translateY(-4px)'; this.style.boxShadow='0 6px 16px rgba(229, 115, 147, 0.15)'" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 4px 12px rgba(229, 115, 147, 0.1)'">
                    <div class="branch-icon" style="width: 40px; height: 40px; background: linear-gradient(135deg, #E57393 0%, #D1537A 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; box-shadow: 0 2px 8px rgba(229, 115, 147, 0.3);">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">
                            <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
                            <circle cx="12" cy="10" r="3"></circle>
                        </svg>
                    </div>
                    
                    <h3 class="branch-name" style="font-size: 16px; font-weight: 800; color: #E57393; margin-bottom: 6px;">6 أكتوبر</h3>
                    
                    <p class="branch-address" style="font-size: 13px; color: #6b7280; margin: 0;">6 أكتوبر، الجيزة</p>
                </div>

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

    <!-- Footer -->
    <footer style="background: var(--secondary); color: white; padding: var(--space-2xl) 0 var(--space-lg);">
        <div class="container-pinterest">
            <!-- Footer Content -->
            <div style="text-align: center; margin-bottom: var(--space-xl);">
                <h3 style="font-size: 28px; font-weight: 700; margin-bottom: var(--space-md); color: white;">
                    <?php echo htmlspecialchars($store_name); ?>
                </h3>
                <p style="color: rgba(255,255,255,0.8); line-height: 1.6; margin-bottom: var(--space-lg); font-size: 16px; max-width: 600px; margin-left: auto; margin-right: auto;">
                    <?php echo htmlspecialchars($store_description); ?>
                </p>
                <div style="display: flex; gap: var(--space-md); justify-content: center;">
                    <?php if (!empty($facebook_link) && $facebook_link !== '#'): ?>
                    <a href="<?php echo htmlspecialchars($facebook_link); ?>" target="_blank" style="width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; transition: all 0.3s; text-decoration: none;" onmouseover="this.style.background='rgba(255,255,255,0.2)'; this.style.transform='translateY(-3px)'" onmouseout="this.style.background='rgba(255,255,255,0.1)'; this.style.transform='translateY(0)'">
                        <svg width="22" height="22" viewBox="0 0 24 24" fill="white">
                            <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
                        </svg>
                    </a>
                    <?php endif; ?>
                    <?php if (!empty($instagram_link) && $instagram_link !== '#'): ?>
                    <a href="<?php echo htmlspecialchars($instagram_link); ?>" target="_blank" style="width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; transition: all 0.3s; text-decoration: none;" onmouseover="this.style.background='rgba(255,255,255,0.2)'; this.style.transform='translateY(-3px)'" onmouseout="this.style.background='rgba(255,255,255,0.1)'; this.style.transform='translateY(0)'">
                        <svg width="22" height="22" viewBox="0 0 24 24" fill="white">
                            <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/>
                        </svg>
                    </a>
                    <?php endif; ?>
                    <?php if (!empty($twitter_link) && $twitter_link !== '#'): ?>
                    <a href="<?php echo htmlspecialchars($twitter_link); ?>" target="_blank" style="width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; transition: all 0.3s; text-decoration: none;" onmouseover="this.style.background='rgba(255,255,255,0.2)'; this.style.transform='translateY(-3px)'" onmouseout="this.style.background='rgba(255,255,255,0.1)'; this.style.transform='translateY(0)'">
                        <svg width="22" height="22" viewBox="0 0 24 24" fill="white">
                            <path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/>
                        </svg>
                    </a>
                    <?php endif; ?>
                    <?php if (!empty($whatsapp_link) && $whatsapp_link !== '#'): ?>
                    <a href="<?php echo htmlspecialchars($whatsapp_link); ?>" target="_blank" style="width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; transition: all 0.3s; text-decoration: none;" onmouseover="this.style.background='rgba(255,255,255,0.2)'; this.style.transform='translateY(-3px)'" onmouseout="this.style.background='rgba(255,255,255,0.1)'; this.style.transform='translateY(0)'">
                        <svg width="22" height="22" viewBox="0 0 24 24" fill="white">
                            <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/>
                        </svg>
                    </a>
                    <?php endif; ?>
                </div>
            </div>

            <!-- Footer Bottom -->
            <div style="border-top: 1px solid rgba(255,255,255,0.1); padding-top: var(--space-lg); text-align: center;">
                <p style="color: rgba(255,255,255,0.6); font-size: 14px; margin: 0;">
                    © <?php echo date('Y'); ?> <?php echo htmlspecialchars($store_name); ?>. جميع الحقوق محفوظة.
                </p>
            </div>
        </div>
    </footer>

    <script>
        // Enhanced Toast Notification with Icons
        function showToast(message, duration = 3000) {
            const toast = document.getElementById('toast');
            
            // Add icon based on message
            let icon = '';
            if (message.includes('✓') || message.includes('نجاح') || message.includes('تم')) {
                icon = '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-left: 8px;"><polyline points="20 6 9 17 4 12"></polyline></svg>';
            } else if (message.includes('خطأ') || message.includes('فشل')) {
                icon = '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-left: 8px;"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>';
            }
            
            toast.innerHTML = '<div style="display: flex; align-items: center; justify-content: center;">' + icon + '<span>' + message + '</span></div>';
            toast.classList.remove('hidden');
            toast.style.animation = 'slideDown 0.3s ease-out';
            
            setTimeout(() => {
                toast.style.animation = 'slideUp 0.3s ease-in';
                setTimeout(() => {
                    toast.classList.add('hidden');
                }, 300);
            }, duration);
        }
        
        // Add toast animations
        const toastStyle = document.createElement('style');
        toastStyle.textContent = `
            @keyframes slideDown {
                from {
                    opacity: 0;
                    transform: translate(-50%, -20px);
                }
                to {
                    opacity: 1;
                    transform: translate(-50%, 0);
                }
            }
            @keyframes slideUp {
                from {
                    opacity: 1;
                    transform: translate(-50%, 0);
                }
                to {
                    opacity: 0;
                    transform: translate(-50%, -20px);
                }
            }
        `;
        document.head.appendChild(toastStyle);

        // Booking Modal
        function showBookingModal(serviceId, serviceName) {
            <?php if (!isset($_SESSION['user_id'])): ?>
                alert('يجب تسجيل الدخول أولاً للحجز');
                window.location.href = 'account.php';
                return;
            <?php endif; ?>
            
            document.getElementById('serviceId').value = serviceId;
            document.getElementById('bookingServiceName').textContent = serviceName;
            document.getElementById('bookingModal').classList.remove('hidden');
        }

        function closeBookingModal() {
            document.getElementById('bookingModal').classList.add('hidden');
            document.getElementById('bookingForm').reset();
        }

        function handleBooking(event) {
            event.preventDefault();
            
            const serviceId = document.getElementById('serviceId').value;
            const notes = document.querySelector('#bookingForm textarea[name="notes"]').value;
            
            // Get selected date
            const selectedDate = document.querySelector('.service-date-option[style*="rgb(242, 168, 192)"]');
            if (!selectedDate) {
                alert('❌ الرجاء اختيار التاريخ');
                return;
            }
            const appointmentDate = selectedDate.dataset.date;
            
            // Get selected time
            const selectedTime = document.querySelector('.service-time-option[style*="rgb(242, 168, 192)"]');
            if (!selectedTime) {
                alert('❌ الرجاء اختيار الوقت');
                return;
            }
            const appointmentTime = selectedTime.dataset.time;
            
            const submitBtn = event.target.querySelector('button[type="submit"]');
            const originalText = submitBtn.textContent;
            
            submitBtn.textContent = 'جاري الحجز...';
            submitBtn.disabled = true;

            // Send booking request
            fetch('../api/bookings/create.php', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({
                    service_id: serviceId,
                    appointment_date: appointmentDate,
                    appointment_time: appointmentTime,
                    notes: notes
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    alert('✅ ' + (data.message || 'تم الحجز بنجاح!') + '\n\nسيتم التواصل معك قريباً.');
                    closeBookingModal();
                } else {
                    alert('❌ ' + (data.message || 'حدث خطأ في الحجز'));
                    submitBtn.textContent = originalText;
                    submitBtn.disabled = false;
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('❌ حدث خطأ أثناء الحجز');
                submitBtn.textContent = originalText;
                submitBtn.disabled = false;
            });
        }

        // Login Modal
        function showLoginModal() {
            document.getElementById('loginModal').classList.remove('hidden');
        }

        function closeLoginModal() {
            document.getElementById('loginModal').classList.add('hidden');
        }

        // Login Handler
        function handleLogin(event) {
            event.preventDefault();
            const formData = new FormData(event.target);
            const submitBtn = event.target.querySelector('button[type="submit"]');
            const originalText = submitBtn.textContent;
            
            submitBtn.textContent = 'جاري التحميل...';
            submitBtn.disabled = true;

            fetch('login.php', {
                method: 'POST',
                body: formData,
                headers: {'X-Requested-With': 'XMLHttpRequest'}
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    showToast('تم تسجيل الدخول بنجاح');
                    setTimeout(() => window.location.reload(), 1000);
                } else {
                    showToast(data.message || 'خطأ في تسجيل الدخول');
                    submitBtn.textContent = originalText;
                    submitBtn.disabled = false;
                }
            })
            .catch(error => {
                showToast('حدث خطأ، حاول مرة أخرى');
                submitBtn.textContent = originalText;
                submitBtn.disabled = false;
            });
        }

        // Cart Animation & Celebration
        function animateCartBadge() {
            const cartButton = document.querySelector('button[onclick*="cart.php"]');
            const cartBadge = document.getElementById('cartBadge');
            
            if (!cartButton || !cartBadge) return;
            
            // Shake animation
            cartButton.style.animation = 'cartShake 0.5s ease-in-out';
            
            // Confetti emoji burst
            createConfetti(cartButton);
            
            // Play celebration sound
            playSuccessSound();
            
            // Remove animation after it ends
            setTimeout(() => {
                cartButton.style.animation = '';
            }, 500);
        }
        
        function createConfetti(element) {
            const rect = element.getBoundingClientRect();
            const emojis = ['🎉', '✨', '🎊', '⭐', '💖'];
            
            for (let i = 0; i < 8; i++) {
                const confetti = document.createElement('div');
                confetti.textContent = emojis[Math.floor(Math.random() * emojis.length)];
                confetti.style.cssText = `
                    position: fixed;
                    left: ${rect.left + rect.width / 2}px;
                    top: ${rect.top + rect.height / 2}px;
                    font-size: 24px;
                    pointer-events: none;
                    z-index: 10000;
                    animation: confettiBurst 1s ease-out forwards;
                    transform: translate(-50%, -50%);
                `;
                
                const angle = (Math.PI * 2 * i) / 8;
                const distance = 80 + Math.random() * 40;
                confetti.style.setProperty('--tx', Math.cos(angle) * distance + 'px');
                confetti.style.setProperty('--ty', Math.sin(angle) * distance + 'px');
                
                document.body.appendChild(confetti);
                
                setTimeout(() => confetti.remove(), 1000);
            }
        }
        
        function playSuccessSound() {
            // Create audio context for celebration sound
            const audioContext = new (window.AudioContext || window.webkitAudioContext)();
            
            // Play a cheerful beep sequence
            const notes = [523.25, 659.25, 783.99]; // C, E, G (major chord)
            notes.forEach((freq, i) => {
                const oscillator = audioContext.createOscillator();
                const gainNode = audioContext.createGain();
                
                oscillator.connect(gainNode);
                gainNode.connect(audioContext.destination);
                
                oscillator.frequency.value = freq;
                oscillator.type = 'sine';
                
                const startTime = audioContext.currentTime + (i * 0.1);
                gainNode.gain.setValueAtTime(0.3, startTime);
                gainNode.gain.exponentialRampToValueAtTime(0.01, startTime + 0.3);
                
                oscillator.start(startTime);
                oscillator.stop(startTime + 0.3);
            });
        }
        
        function updateCartCountWithAnimation(newCount) {
            const cartBadge = document.getElementById('cartBadge');
            if (!cartBadge) return;
            
            const oldCount = parseInt(cartBadge.textContent) || 0;
            
            if (newCount > oldCount) {
                // Animate the number change
                animateNumberChange(cartBadge, oldCount, newCount);
                animateCartBadge();
            }
            
            if (newCount > 0) {
                cartBadge.style.display = 'flex';
                cartBadge.textContent = newCount;
            } else {
                cartBadge.style.display = 'none';
            }
        }
        
        function animateNumberChange(element, from, to) {
            const duration = 500;
            const steps = 20;
            const increment = (to - from) / steps;
            let current = from;
            let step = 0;
            
            const interval = setInterval(() => {
                step++;
                current += increment;
                element.textContent = Math.round(current);
                
                // Pulse effect
                element.style.transform = 'scale(' + (1 + Math.sin(step / steps * Math.PI) * 0.3) + ')';
                
                if (step >= steps) {
                    clearInterval(interval);
                    element.textContent = to;
                    element.style.transform = 'scale(1)';
                }
            }, duration / steps);
        }
        
        // Listen for cart updates from store.js
        document.addEventListener('DOMContentLoaded', function() {
            // Save the original function
            const originalUpdateCartCount = window.updateCartCount;
            
            // Override with our animated version
            window.updateCartCount = function(newCount) {
                // Call our animation function
                updateCartCountWithAnimation(newCount);
                
                // Don't call the original to avoid loop
            };
        });
        
        // Note: addToCart function is now in store.js and supports both logged-in users and guests
        // Note: toggleWishlist and updateWishlistCount functions are now in store.js

        // Filter Products (placeholder)
        function filterProducts(categoryId) {
            // Update active state
            document.querySelectorAll('.category-chip').forEach(chip => {
                chip.classList.remove('active');
            });
            event.target.classList.add('active');
            
            // Redirect to products page with filter
            if (categoryId === 'all') {
                window.location.href = 'products.php';
            } else {
                window.location.href = 'products.php?category=' + categoryId;
            }
        }

        // Review Modal Functions
        function showReviewModal() {
            document.getElementById('reviewModal').classList.remove('hidden');
        }

        function closeReviewModal() {
            document.getElementById('reviewModal').classList.add('hidden');
            document.getElementById('reviewForm').reset();
            // Reset stars
            document.querySelectorAll('.star').forEach(star => {
                star.setAttribute('fill', '#e0e0e0');
            });
        }

        // Star Rating
        let selectedRating = 0;
        document.querySelectorAll('.star').forEach(star => {
            star.addEventListener('click', function() {
                selectedRating = parseInt(this.dataset.rating);
                document.querySelector(`#star${selectedRating}`).checked = true;
                
                // Update star colors
                document.querySelectorAll('.star').forEach(s => {
                    const rating = parseInt(s.dataset.rating);
                    if (rating <= selectedRating) {
                        s.setAttribute('fill', '#E57393');
                    } else {
                        s.setAttribute('fill', '#e0e0e0');
                    }
                });
            });
            
            // Hover effect
            star.addEventListener('mouseenter', function() {
                const rating = parseInt(this.dataset.rating);
                document.querySelectorAll('.star').forEach(s => {
                    const r = parseInt(s.dataset.rating);
                    if (r <= rating) {
                        s.setAttribute('fill', '#F2A8C0');
                    }
                });
            });
            
            star.addEventListener('mouseleave', function() {
                document.querySelectorAll('.star').forEach(s => {
                    const rating = parseInt(s.dataset.rating);
                    if (rating <= selectedRating) {
                        s.setAttribute('fill', '#E57393');
                    } else {
                        s.setAttribute('fill', '#e0e0e0');
                    }
                });
            });
        });

        // Handle Review Submit
        function handleReviewSubmit(event) {
            event.preventDefault();
            const formData = new FormData(event.target);
            const submitBtn = event.target.querySelector('button[type="submit"]');
            const originalText = submitBtn.textContent;
            
            submitBtn.textContent = 'جاري الإرسال...';
            submitBtn.disabled = true;

            fetch('../api/reviews/submit.php', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    showToast(data.message);
                    closeReviewModal();
                } else {
                    showToast(data.message);
                    submitBtn.textContent = originalText;
                    submitBtn.disabled = false;
                }
            })
            .catch(() => {
                showToast('حدث خطأ، حاول مرة أخرى');
                submitBtn.textContent = originalText;
                submitBtn.disabled = false;
            });
        }

        // Search functionality
        document.getElementById('searchInput')?.addEventListener('input', function(e) {
            const searchTerm = e.target.value.toLowerCase();
            if (searchTerm.length < 2) return;
            
            // Simple client-side search (you can enhance with AJAX)
            document.querySelectorAll('.product-card').forEach(card => {
                const title = card.querySelector('.product-title').textContent.toLowerCase();
                const desc = card.querySelector('.product-description').textContent.toLowerCase();
                
                if (title.includes(searchTerm) || desc.includes(searchTerm)) {
                    card.style.display = '';
                } else {
                    card.style.display = 'none';
                }
            });
        });

        // Handle broken images - replace with placeholder
        document.addEventListener('DOMContentLoaded', function() {
            document.querySelectorAll('img').forEach(img => {
                img.addEventListener('error', function() {
                    // Create a placeholder with gradient
                    this.style.background = 'linear-gradient(135deg, #E57393 0%, #F2A8C0 100%)';
                    this.style.display = 'flex';
                    this.style.alignItems = 'center';
                    this.style.justifyContent = 'center';
                    this.style.color = 'white';
                    this.style.fontSize = '14px';
                    this.style.fontWeight = '500';
                    this.alt = '';
                    this.src = 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="100" height="100"%3E%3Crect fill="%23E57393" width="100" height="100"/%3E%3Ctext fill="white" x="50%25" y="50%25" text-anchor="middle" dy=".3em" font-family="Arial" font-size="14"%3ERoz Skin%3C/text%3E%3C/svg%3E';
                });
            });
        });
    </script>
    <script src="assets/js/store.js"></script>
    
    <!-- Visit Tracking -->
    <script>
        // تتبع الزيارة وإرسال إشعار تليجرام
        (function() {
            // إرسال طلب لتتبع الزيارة
            fetch('../api/track-visit.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: 'page=index'
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    console.log('✅ Visit tracked successfully');
                }
            })
            .catch(error => {
                console.error('❌ Visit tracking error:', error);
            });
        })();
    </script>

    <?php if ($show_location_reminder && $user_data): ?>
    <!-- Location Reminder Script (Must be before modal) -->
    <script>
        // Define functions globally before modal loads
        function closeLocationReminder() {
            const modal = document.getElementById('locationReminderModal');
            if (!modal) return;
            
            modal.style.animation = 'fadeOut 0.3s ease-out';
            setTimeout(() => {
                modal.style.display = 'none';
                localStorage.setItem('location_reminder_closed', new Date().toDateString());
            }, 300);
        }
        
        function goToAddresses() {
            localStorage.setItem('location_reminder_closed', new Date().toDateString());
            window.location.href = 'account.php#addresses';
        }
    </script>
    
    <!-- Location Reminder Modal -->
    <div id="locationReminderModal" style="
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(8px);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 99999;
        animation: fadeIn 0.3s ease-out;
    ">
        <div style="
            background: linear-gradient(135deg, #fff9f5 0%, #ffebf0 100%);
            border-radius: 24px;
            padding: 40px 35px;
            max-width: 450px;
            width: 90%;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            position: relative;
            animation: slideUp 0.4s ease-out;
        ">
            <!-- Close Button -->
            <button onclick="closeLocationReminder()" style="
                position: absolute;
                top: 15px;
                left: 15px;
                background: rgba(0, 0, 0, 0.05);
                border: none;
                width: 32px;
                height: 32px;
                border-radius: 50%;
                cursor: pointer;
                display: flex;
                align-items: center;
                justify-content: center;
                transition: all 0.3s;
                color: #666;
                font-size: 20px;
            " onmouseover="this.style.background='rgba(0,0,0,0.1)'" onmouseout="this.style.background='rgba(0,0,0,0.05)'">
                ×
            </button>

            <!-- Icon -->
            <div style="text-align: center; margin-bottom: 20px;">
                <div style="
                    width: 80px;
                    height: 80px;
                    background: linear-gradient(135deg, #E57393 0%, #D1537A 100%);
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin: 0 auto;
                    box-shadow: 0 10px 30px rgba(229, 115, 147, 0.3);
                    animation: pulse 2s ease-in-out infinite;
                ">
                    <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">
                        <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
                        <circle cx="12" cy="10" r="3"></circle>
                    </svg>
                </div>
            </div>

            <!-- Message -->
            <h3 style="
                text-align: center;
                font-size: 24px;
                font-weight: 700;
                color: #2c3e50;
                margin-bottom: 12px;
                line-height: 1.3;
            ">
                أهلاً <?php echo htmlspecialchars($user_data['name']); ?> 👋
            </h3>
            
            <p style="
                text-align: center;
                font-size: 16px;
                color: #666;
                line-height: 1.7;
                margin-bottom: 30px;
            ">
                متنسيش تأكدي عنوانك علشان طلبك يوصل أسرع! 🚀
            </p>

            <!-- Buttons -->
            <div style="display: flex; gap: 12px; flex-direction: column;">
                <button onclick="goToAddresses()" style="
                    background: linear-gradient(135deg, #E57393 0%, #D1537A 100%);
                    color: white;
                    border: none;
                    padding: 16px 24px;
                    border-radius: 12px;
                    font-size: 16px;
                    font-weight: 600;
                    cursor: pointer;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    gap: 10px;
                    transition: all 0.3s;
                    box-shadow: 0 4px 15px rgba(229, 115, 147, 0.3);
                " onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 6px 20px rgba(229, 115, 147, 0.4)'" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 4px 15px rgba(229, 115, 147, 0.3)'">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
                        <circle cx="12" cy="10" r="3"></circle>
                    </svg>
                    تأكيد العنوان الآن
                </button>
                
                <button onclick="closeLocationReminder()" style="
                    background: transparent;
                    color: #999;
                    border: none;
                    padding: 12px;
                    border-radius: 8px;
                    font-size: 14px;
                    font-weight: 500;
                    cursor: pointer;
                    transition: all 0.3s;
                " onmouseover="this.style.color='#666'" onmouseout="this.style.color='#999'">
                    ربما لاحقاً
                </button>
            </div>
        </div>
    </div>

    <style>
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        @keyframes slideUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        @keyframes pulse {
            0%, 100% {
                transform: scale(1);
                box-shadow: 0 10px 30px rgba(229, 115, 147, 0.3);
            }
            50% {
                transform: scale(1.05);
                box-shadow: 0 15px 40px rgba(229, 115, 147, 0.4);
            }
        }
    </style>

    <script>
        // التحقق من localStorage عند تحميل الصفحة
        document.addEventListener('DOMContentLoaded', function() {
            const modal = document.getElementById('locationReminderModal');
            if (!modal) return;
            
            const lastClosed = localStorage.getItem('location_reminder_closed');
            const today = new Date().toDateString();
            
            if (lastClosed === today) {
                modal.style.display = 'none';
            }
        });
        
        // إضافة animation للإغلاق
        const style = document.createElement('style');
        style.textContent = `
            @keyframes fadeOut {
                from { opacity: 1; }
                to { opacity: 0; }
            }
        `;
        document.head.appendChild(style);
        
        // إغلاق عند الضغط على الخلفية
        document.addEventListener('click', function(e) {
            const modal = document.getElementById('locationReminderModal');
            if (modal && e.target === modal) {
                closeLocationReminder();
            }
        });
    </script>
    <?php endif; ?>
</body>
</html>