<?php
session_start();
require_once '../includes/product-card.php';
require_once '../config/database.php';
require_once '../models/user.php';

$page_title = 'تم الطلب بنجاح';
$base_path = '../';

// التحقق من تسجيل الدخول
if (!isset($_SESSION['user_id'])) {
    header('Location: login.php');
    exit;
}

// Get order by order_id or order_number
$order_id = $_GET['order_id'] ?? 0;
$order_number = $_GET['order'] ?? '';

$database = new Database();
$conn = $database->getConnection();

// Initialize user model for footer
$user_model = new User($conn);

if ($order_number) {
    $stmt = $conn->prepare("SELECT * FROM orders WHERE order_number = ? AND user_id = ?");
    $stmt->execute([$order_number, $_SESSION['user_id']]);
} else {
    $stmt = $conn->prepare("SELECT * FROM orders WHERE id = ? AND user_id = ?");
    $stmt->execute([$order_id, $_SESSION['user_id']]);
}

$order = $stmt->fetch(PDO::FETCH_ASSOC);

if (!$order) {
    header('Location: index.php');
    exit;
}

// جلب عناصر الطلب
$stmt = $conn->prepare("SELECT * FROM order_items WHERE order_id = ?");
$stmt->execute([$order['id']]);
$order_items = $stmt->fetchAll(PDO::FETCH_ASSOC);
?>
<!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 $page_title; ?> - Roz Skin</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">
    
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    
    <style>
        * {
            font-family: 'Tajawal', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
        }
        
        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;
        }
        
        /* Mobile Optimizations */
        @media (max-width: 768px) {
            .container {
                padding-left: 16px !important;
                padding-right: 16px !important;
            }
            
            section {
                padding-top: 24px !important;
                padding-bottom: 24px !important;
            }
            
            h1 {
                font-size: 24px !important;
                line-height: 1.3 !important;
            }
            
            .text-xl {
                font-size: 16px !important;
            }
            
            .text-2xl {
                font-size: 18px !important;
            }
            
            .card {
                margin-bottom: 12px;
            }
            
            .p-6 {
                padding: 16px !important;
            }
            
            .mb-8 {
                margin-bottom: 24px !important;
            }
            
            .gap-4 {
                gap: 12px !important;
            }
            
            .w-24 {
                width: 80px !important;
                height: 80px !important;
            }
            
            .btn {
                width: 100%;
                padding: 14px 20px !important;
                font-size: 15px !important;
            }
        }
    </style>
</head>
<body>
    <!-- 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;">
                    Roz Skin
                </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>
    </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) {
                navbar.style.transform = 'translateY(-100%)';
            } else {
                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;">
                <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>

                <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>

<!-- Success Section -->
<section style="padding: 40px 0; background: linear-gradient(135deg, #fff5f7 0%, #ffe8f0 100%);">
    <div style="max-width: 1200px; margin: 0 auto; padding: 0 20px;">
        <div style="max-width: 800px; margin: 0 auto; text-align: center;">
            <!-- Success Icon -->
            <div style="width: 80px; height: 80px; margin: 0 auto 24px; border-radius: 50%; background: rgba(34, 197, 94, 0.1); display: flex; align-items: center; justify-content: center; font-size: 40px;">
                ✅
            </div>
            
            <h1 style="font-size: clamp(24px, 5vw, 36px); font-weight: 800; margin-bottom: 16px; color: #2c3e50; line-height: 1.3;">
                تم استلام طلبك بنجاح!
            </h1>
            <p style="font-size: clamp(14px, 3vw, 18px); color: #666; margin-bottom: 32px; line-height: 1.6;">
                شكراً لك على طلبك. سنقوم بمعالجته في أقرب وقت ممكن.
            </p>
            
            <!-- Order Number & Status -->
            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; margin-bottom: 32px;">
                <div style="background: white; border-radius: 16px; padding: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.08);">
                    <div style="font-size: 13px; color: #666; margin-bottom: 8px;">رقم الطلب</div>
                    <div style="font-size: clamp(18px, 4vw, 24px); font-weight: 800; color: #E57393;">
                        <?php echo htmlspecialchars($order['order_number']); ?>
                    </div>
                </div>
                
                <div style="background: white; border-radius: 16px; padding: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.08);">
                    <div style="font-size: 13px; color: #666; margin-bottom: 8px;">حالة الطلب</div>
                    <?php
                    $status_config = [
                        'pending' => ['text' => 'في الانتظار', 'color' => '#f59e0b', 'bg' => 'rgba(245, 158, 11, 0.1)', 'icon' => 'clock'],
                        'processing' => ['text' => 'قيد المعالجة', 'color' => '#3b82f6', 'bg' => 'rgba(59, 130, 246, 0.1)', 'icon' => 'cog'],
                        'shipped' => ['text' => 'تم الشحن', 'color' => '#6366f1', 'bg' => 'rgba(99, 102, 241, 0.1)', 'icon' => 'truck'],
                        'delivered' => ['text' => 'تم التسليم', 'color' => '#22c55e', 'bg' => 'rgba(34, 197, 94, 0.1)', 'icon' => 'check-circle'],
                        'cancelled' => ['text' => 'ملغي', 'color' => '#ef4444', 'bg' => 'rgba(239, 68, 68, 0.1)', 'icon' => 'times-circle']
                    ];
                    $status = $status_config[$order['status']] ?? ['text' => $order['status'], 'color' => '#6b7280', 'bg' => 'rgba(107, 114, 128, 0.1)', 'icon' => 'question'];
                    ?>
                    <div style="display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; background: <?php echo $status['bg']; ?>; color: <?php echo $status['color']; ?>; border-radius: 12px; font-weight: 700; font-size: clamp(14px, 3vw, 16px);">
                        <?php 
                        $status_emoji = [
                            'clock' => '⏰',
                            'cog' => '⚙️',
                            'truck' => '🚚',
                            'check-circle' => '✅',
                            'times-circle' => '❌',
                            'question' => '❓'
                        ];
                        echo $status_emoji[$status['icon']] ?? '📦';
                        ?>
                        <?php echo $status['text']; ?>
                    </div>
                </div>
            </div>
            
            <!-- Order Timeline -->
            <div style="background: white; border-radius: 16px; padding: 24px 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); margin-bottom: 32px; text-align: right;">
                <h3 style="font-weight: 700; margin-bottom: 20px; font-size: clamp(16px, 3vw, 18px);">تتبع الطلب</h3>
                <div style="position: relative;">
                    <!-- Timeline Line -->
                    <div style="position: absolute; right: 16px; top: 0; bottom: 0; width: 2px; background: #e5e7eb;"></div>
                        
                    <!-- Timeline Steps -->
                    <div style="display: flex; flex-direction: column; gap: 24px;">
                        <!-- Pending -->
                        <div style="position: relative; display: flex; align-items: start; gap: 16px;">
                            <div style="width: 32px; height: 32px; border-radius: 50%; background: <?php echo in_array($order['status'], ['pending', 'processing', 'shipped', 'delivered']) ? '#22c55e' : '#d1d5db'; ?>; display: flex; align-items: center; justify-content: center; color: white; z-index: 10; font-size: 14px; flex-shrink: 0;">
                                ✓
                            </div>
                            <div style="flex: 1;">
                                <div style="font-weight: 700; font-size: clamp(14px, 3vw, 16px); margin-bottom: 4px;">تم استلام الطلب</div>
                                <div style="font-size: 13px; color: #666;"><?php echo date('Y-m-d H:i', strtotime($order['created_at'])); ?></div>
                            </div>
                        </div>
                        
                        <!-- Processing -->
                        <div style="position: relative; display: flex; align-items: start; gap: 16px;">
                            <div style="width: 32px; height: 32px; border-radius: 50%; background: <?php echo in_array($order['status'], ['processing', 'shipped', 'delivered']) ? '#22c55e' : '#d1d5db'; ?>; display: flex; align-items: center; justify-content: center; color: white; z-index: 10; font-size: 14px; flex-shrink: 0;">
                                <?php echo in_array($order['status'], ['processing', 'shipped', 'delivered']) ? '✓' : '⏰'; ?>
                            </div>
                            <div style="flex: 1;">
                                <div style="font-weight: 700; font-size: clamp(14px, 3vw, 16px); margin-bottom: 4px;">قيد المعالجة</div>
                                <div style="font-size: 13px; color: #666;">جاري تجهيز طلبك</div>
                            </div>
                        </div>
                        
                        <!-- Shipped -->
                        <div style="position: relative; display: flex; align-items: start; gap: 16px;">
                            <div style="width: 32px; height: 32px; border-radius: 50%; background: <?php echo in_array($order['status'], ['shipped', 'delivered']) ? '#22c55e' : '#d1d5db'; ?>; display: flex; align-items: center; justify-content: center; color: white; z-index: 10; font-size: 14px; flex-shrink: 0;">
                                <?php echo in_array($order['status'], ['shipped', 'delivered']) ? '✓' : '⏰'; ?>
                            </div>
                            <div style="flex: 1;">
                                <div style="font-weight: 700; font-size: clamp(14px, 3vw, 16px); margin-bottom: 4px;">تم الشحن</div>
                                <div style="font-size: 13px; color: #666;">الطلب في الطريق إليك</div>
                            </div>
                        </div>
                        
                        <!-- Delivered -->
                        <div style="position: relative; display: flex; align-items: start; gap: 16px;">
                            <div style="width: 32px; height: 32px; border-radius: 50%; background: <?php echo $order['status'] === 'delivered' ? '#22c55e' : '#d1d5db'; ?>; display: flex; align-items: center; justify-content: center; color: white; z-index: 10; font-size: 14px; flex-shrink: 0;">
                                <?php echo $order['status'] === 'delivered' ? '✓' : '⏰'; ?>
                            </div>
                            <div style="flex: 1;">
                                <div style="font-weight: 700; font-size: clamp(14px, 3vw, 16px); margin-bottom: 4px;">تم التسليم</div>
                                <div style="font-size: 13px; color: #666;">استلمت طلبك بنجاح</div>
                            </div>
                        </div>
                    </div>
                    </div>
                </div>
            </div>
            
            <!-- Order Details -->
            <div style="background: white; border-radius: 16px; padding: 24px 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); margin-bottom: 32px; text-align: right;">
                <h2 style="font-size: clamp(18px, 4vw, 24px); font-weight: 800; margin-bottom: 24px;">تفاصيل الطلب</h2>
                
                <!-- Customer Info -->
                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid #e5e7eb;">
                    <div>
                        <div style="font-size: 13px; color: #666; margin-bottom: 6px;">الاسم</div>
                        <div style="font-weight: 700; font-size: clamp(14px, 3vw, 15px);">
                            <?php echo htmlspecialchars($order['first_name'] . ' ' . $order['last_name']); ?>
                        </div>
                    </div>
                    <div>
                        <div style="font-size: 13px; color: #666; margin-bottom: 6px;">رقم الجوال</div>
                        <div style="font-weight: 700; font-size: clamp(14px, 3vw, 15px);"><?php echo htmlspecialchars($order['phone']); ?></div>
                    </div>
                    <div>
                        <div style="font-size: 13px; color: #666; margin-bottom: 6px;">البريد الإلكتروني</div>
                        <div style="font-weight: 700; font-size: clamp(14px, 3vw, 15px); word-break: break-word;"><?php echo htmlspecialchars($order['email']); ?></div>
                    </div>
                    <div>
                        <div style="font-size: 13px; color: #666; margin-bottom: 6px;">طريقة الدفع</div>
                        <div style="font-weight: 700; font-size: clamp(14px, 3vw, 15px);">
                            <?php 
                            $payment_methods = [
                                'cod' => '💵 الدفع عند الاستلام',
                                'card' => '💳 بطاقة ائتمان',
                                'bank' => '🏦 تحويل بنكي'
                            ];
                            echo $payment_methods[$order['payment_method']] ?? $order['payment_method'];
                            ?>
                        </div>
                    </div>
                    <div style="grid-column: 1 / -1;">
                        <div style="font-size: 13px; color: #666; margin-bottom: 6px;">عنوان الشحن</div>
                        <div style="font-weight: 700; font-size: clamp(14px, 3vw, 15px); line-height: 1.6;">
                            <?php echo htmlspecialchars($order['address'] . ', ' . $order['city']); ?>
                            <?php if ($order['postal_code']): ?>
                                - <?php echo htmlspecialchars($order['postal_code']); ?>
                            <?php endif; ?>
                        </div>
                    </div>
                </div>
                    
                    <!-- Order Items -->
                    <div class="mb-6">
                        <h3 class="font-bold mb-4">المنتجات</h3>
                        <div class="space-y-3">
                            <?php foreach ($order_items as $item): ?>
                                <div class="flex justify-between items-center py-2 border-b">
                                    <div>
                                        <div class="font-bold"><?php echo htmlspecialchars($item['product_name']); ?></div>
                                        <div class="text-sm text-gray-600">
                                            الكمية: <?php echo $item['quantity']; ?> × 
                                            <?php echo number_format($item['price'], 2); ?> ج.م
                                        </div>
                                    </div>
                                    <div class="font-bold text-[#E57393]">
                                        <?php echo number_format($item['total'], 2); ?> ج.م
                                    </div>
                                </div>
                            <?php endforeach; ?>
                        </div>
                    </div>
                    
                    <!-- Totals -->
                    <div class="space-y-2 pt-4 border-t">
                        <div class="flex justify-between text-sm">
                            <span class="text-gray-600">المجموع الفرعي</span>
                            <span class="font-bold"><?php echo number_format($order['subtotal'], 2); ?> ج.م</span>
                        </div>
                        <div class="flex justify-between text-sm">
                            <span class="text-gray-600">الشحن</span>
                            <span class="font-bold text-green-600">مجاني</span>
                        </div>
                        <div class="flex justify-between text-sm">
                            <span class="text-gray-600">الضريبة</span>
                            <span class="font-bold"><?php echo number_format($order['tax'], 2); ?> ج.م</span>
                        </div>
                        <?php if ($order['discount'] > 0): ?>
                        <div class="flex justify-between text-sm text-green-600">
                            <span>الخصم</span>
                            <span class="font-bold">-<?php echo number_format($order['discount'], 2); ?> ج.م</span>
                        </div>
                        <?php endif; ?>
                        <div class="flex justify-between text-lg pt-3 border-t">
                            <span class="font-bold">الإجمالي</span>
                            <span class="font-bold text-[#E57393] text-2xl">
                                <?php echo number_format($order['total'], 2); ?> ج.م
                            </span>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Actions -->
            <div style="display: flex; flex-direction: column; gap: 12px; margin-bottom: 32px;">
                <a href="account.php?tab=orders" style="background: linear-gradient(135deg, #E57393 0%, #D1537A 100%); color: white; padding: 16px 24px; border-radius: 12px; text-decoration: none; font-weight: 700; font-size: 16px; text-align: center; transition: all 0.3s; box-shadow: 0 4px 12px rgba(229, 115, 147, 0.3);" onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 6px 16px rgba(229, 115, 147, 0.4)'" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 4px 12px rgba(229, 115, 147, 0.3)'">
                    📋 عرض طلباتي
                </a>
                <a href="products.php" style="background: white; color: #E57393; padding: 16px 24px; border-radius: 12px; text-decoration: none; font-weight: 700; font-size: 16px; text-align: center; border: 2px solid #E57393; transition: all 0.3s;" onmouseover="this.style.background='#E57393'; this.style.color='white'" onmouseout="this.style.background='white'; this.style.color='#E57393'">
                    🛍️ متابعة التسوق
                </a>
            </div>
            
            <!-- Info Box -->
            <div style="background: rgba(59, 130, 246, 0.1); padding: 20px; border-radius: 16px; text-align: right;">
                <div style="display: flex; align-items: start; gap: 12px;">
                    <span style="font-size: 24px; flex-shrink: 0;">ℹ️</span>
                    <div style="flex: 1;">
                        <h3 style="font-weight: 700; margin-bottom: 12px; font-size: clamp(15px, 3vw, 17px);">ماذا بعد؟</h3>
                        <ul style="font-size: clamp(13px, 2.5vw, 14px); color: #374151; line-height: 1.8;">
                            <li style="margin-bottom: 6px;">• سنرسل لك رسالة تأكيد على بريدك الإلكتروني</li>
                            <li style="margin-bottom: 6px;">• سيتم معالجة طلبك خلال 24 ساعة</li>
                            <li style="margin-bottom: 6px;">• يمكنك متابعة حالة الطلب من حسابك</li>
                            <li>• سنتواصل معك عند شحن الطلب</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Simple Footer -->
<footer style="background: white; border-top: 1px solid rgba(229, 115, 147, 0.1); padding: 40px 20px; margin-top: 60px;">
    <div style="max-width: 1400px; margin: 0 auto; text-align: center;">
        <div 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-bottom: 20px;">
            Roz Skin
        </div>
        <p style="color: #666; font-size: 14px; margin-bottom: 20px;">
            متجر إلكتروني متخصص في منتجات العناية بالبشرة والجمال الطبيعية 100%
        </p>
        <div style="display: flex; gap: 15px; justify-content: center; margin-bottom: 20px;">
            <a href="https://facebook.com" target="_blank" style="width: 40px; height: 40px; border-radius: 50%; background: rgba(229, 115, 147, 0.1); display: flex; align-items: center; justify-content: center; text-decoration: none; transition: all 0.3s; font-size: 20px;" onmouseover="this.style.background='#E57393'; this.style.transform='scale(1.1)'" onmouseout="this.style.background='rgba(229, 115, 147, 0.1)'; this.style.transform='scale(1)'">
                📘
            </a>
            <a href="https://instagram.com" target="_blank" style="width: 40px; height: 40px; border-radius: 50%; background: rgba(229, 115, 147, 0.1); display: flex; align-items: center; justify-content: center; text-decoration: none; transition: all 0.3s; font-size: 20px;" onmouseover="this.style.background='#E57393'; this.style.transform='scale(1.1)'" onmouseout="this.style.background='rgba(229, 115, 147, 0.1)'; this.style.transform='scale(1)'">
                📷
            </a>
            <a href="https://wa.me/201234567890" target="_blank" style="width: 40px; height: 40px; border-radius: 50%; background: rgba(229, 115, 147, 0.1); display: flex; align-items: center; justify-content: center; text-decoration: none; transition: all 0.3s; font-size: 20px;" onmouseover="this.style.background='#E57393'; this.style.transform='scale(1.1)'" onmouseout="this.style.background='rgba(229, 115, 147, 0.1)'; this.style.transform='scale(1)'">
                💬
            </a>
        </div>
        <p style="color: #999; font-size: 13px;">
            © 2024 Roz Skin. جميع الحقوق محفوظة.
        </p>
    </div>
</footer>

</body>
</html>
