<?php
session_start();
require_once '../connection.php';

// Check if user is logged in
if (!isset($_SESSION['user_id'])) {
    header("Location: login.php");
    exit();
}

// Get user ID
$user_id = $_SESSION['user_id'];

// Fetch user data
$stmt = $conn->prepare("SELECT * FROM users WHERE id = ?");
$stmt->bind_param("i", $user_id);
$stmt->execute();
$result = $stmt->get_result();

if ($result->num_rows === 0) {
    session_destroy();
    header("Location: login.php?error=User account not found");
    exit();
}

$user = $result->fetch_assoc();
$stmt->close();

// Check account status
if (isset($user['account_status']) && $user['account_status'] != 'active') {
    $error_message = "Your account is " . $user['account_status'];
    header("Location: login.php?error=" . urlencode($error_message));
    exit();
}

// Fetch site settings for contact info
$site_settings = [];
$settings_stmt = $conn->prepare("SELECT setting_key, setting_value FROM site_settings WHERE setting_group = 'general'");
if ($settings_stmt) {
    if ($settings_stmt->execute()) {
        $settings_result = $settings_stmt->get_result();
        while ($row = $settings_result->fetch_assoc()) {
            $site_settings[$row['setting_key']] = $row['setting_value'];
        }
        $settings_result->free();
    }
    $settings_stmt->close();
} else {
    $site_settings['site_name'] = 'Trading Platform';
    $site_settings['site_email'] = 'support@example.com';
    $site_settings['support_phone'] = '+1 (555) 123-4567';
    $site_settings['support_address'] = '123 Trading Street, New York, NY 10001';
    $site_settings['support_hours'] = '24/7';
}

// Default contact info
$site_name = $site_settings['site_name'] ?? 'Trading Platform';
$support_email = $site_settings['site_email'] ?? 'support@example.com';
$support_phone = $site_settings['support_phone'] ?? '+1 (555) 123-4567';
$support_address = $site_settings['support_address'] ?? '123 Trading Street, New York, NY 10001';
$support_hours = $site_settings['support_hours'] ?? '24/7';

// Handle contact form submission
$success_message = '';
$error_message = '';

if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['submit_contact'])) {
    $name = trim($_POST['name'] ?? '');
    $email = trim($_POST['email'] ?? '');
    $subject = trim($_POST['subject'] ?? '');
    $message = trim($_POST['message'] ?? '');
    
    // Validation
    if (empty($name)) {
        $error_message = "Please enter your name";
    } elseif (empty($email)) {
        $error_message = "Please enter your email address";
    } elseif (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
        $error_message = "Please enter a valid email address";
    } elseif (empty($subject)) {
        $error_message = "Please enter a subject";
    } elseif (empty($message)) {
        $error_message = "Please enter your message";
    } elseif (strlen($message) < 10) {
        $error_message = "Message must be at least 10 characters";
    } else {
        // Prepare email content
        $to = $support_email;
        $email_subject = "Contact Form: $subject";
        
        $email_body = "
        <html>
        <head>
            <title>Contact Form Submission</title>
            <style>
                body { font-family: Arial, sans-serif; }
                .container { max-width: 600px; margin: 0 auto; padding: 20px; }
                .header { background: #f8f9fa; padding: 20px; text-align: center; }
                .content { padding: 20px; }
                .field { margin-bottom: 15px; }
                .label { font-weight: bold; color: #333; }
                .value { padding: 5px 0; }
                .footer { background: #f8f9fa; padding: 20px; text-align: center; font-size: 12px; color: #666; }
            </style>
        </head>
        <body>
            <div class='container'>
                <div class='header'>
                    <h2>New Contact Form Submission</h2>
                    <p>From: $site_name Website</p>
                </div>
                <div class='content'>
                    <div class='field'>
                        <div class='label'>Name:</div>
                        <div class='value'>$name</div>
                    </div>
                    <div class='field'>
                        <div class='label'>Email:</div>
                        <div class='value'>$email</div>
                    </div>
                    <div class='field'>
                        <div class='label'>Subject:</div>
                        <div class='value'>$subject</div>
                    </div>
                    <div class='field'>
                        <div class='label'>Message:</div>
                        <div class='value'>" . nl2br(htmlspecialchars($message)) . "</div>
                    </div>
                    <div class='field'>
                        <div class='label'>User Account:</div>
                        <div class='value'>ID: $user_id (" . ($user['username'] ?? 'N/A') . ")</div>
                    </div>
                    <div class='field'>
                        <div class='label'>Submitted On:</div>
                        <div class='value'>" . date('Y-m-d H:i:s') . "</div>
                    </div>
                </div>
                <div class='footer'>
                    <p>This email was sent from the contact form on $site_name</p>
                </div>
            </div>
        </body>
        </html>
        ";
        
        // Set email headers
        $headers = "MIME-Version: 1.0" . "\r\n";
        $headers .= "Content-type:text/html;charset=UTF-8" . "\r\n";
        $headers .= "From: $site_name <noreply@" . $_SERVER['HTTP_HOST'] . ">" . "\r\n";
        $headers .= "Reply-To: $email" . "\r\n";
        $headers .= "X-Mailer: PHP/" . phpversion();
        
        // Try to send email
        if (mail($to, $email_subject, $email_body, $headers)) {
            // Also send auto-reply to user
            $user_email_subject = "Thank you for contacting $site_name";
            $user_email_body = "
            <html>
            <head>
                <style>
                    body { font-family: Arial, sans-serif; line-height: 1.6; }
                    .container { max-width: 600px; margin: 0 auto; padding: 20px; }
                    .header { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 30px; text-align: center; border-radius: 10px 10px 0 0; }
                    .content { padding: 30px; background: #f9f9f9; }
                    .footer { padding: 20px; text-align: center; color: #666; font-size: 12px; }
                </style>
            </head>
            <body>
                <div class='container'>
                    <div class='header'>
                        <h1>Thank You for Contacting Us</h1>
                    </div>
                    <div class='content'>
                        <p>Hello $name,</p>
                        <p>Thank you for getting in touch with $site_name. We have received your message and our support team will review it shortly.</p>
                        
                        <div style='background: white; padding: 20px; border-radius: 5px; margin: 20px 0; border-left: 4px solid #667eea;'>
                            <p><strong>Your Message:</strong></p>
                            <p><em>" . nl2br(htmlspecialchars($message)) . "</em></p>
                        </div>
                        
                        <p><strong>Reference Information:</strong></p>
                        <ul>
                            <li><strong>Subject:</strong> $subject</li>
                            <li><strong>Submitted:</strong> " . date('F j, Y, g:i a') . "</li>
                            <li><strong>Ticket Reference:</strong> CONTACT-" . date('Ymd') . "-" . rand(1000, 9999) . "</li>
                        </ul>
                        
                        <p>We aim to respond to all inquiries within 24 hours during business days.</p>
                        
                        <p>If your inquiry is urgent, you can also reach us at:</p>
                        <ul>
                            <li>Phone: $support_phone</li>
                            <li>Email: $support_email</li>
                        </ul>
                        
                        <p>Best regards,<br>
                        The $site_name Support Team</p>
                    </div>
                    <div class='footer'>
                        <p>This is an automated message. Please do not reply to this email.</p>
                        <p>$site_name &copy; " . date('Y') . " - All rights reserved</p>
                    </div>
                </div>
            </body>
            </html>
            ";
            
            $user_headers = "MIME-Version: 1.0" . "\r\n";
            $user_headers .= "Content-type:text/html;charset=UTF-8" . "\r\n";
            $user_headers .= "From: $site_name Support <$support_email>" . "\r\n";
            
            // Send auto-reply
            mail($email, $user_email_subject, $user_email_body, $user_headers);
            
            $success_message = "Thank you for contacting us! We've received your message and will respond as soon as possible. We've also sent a confirmation email to $email.";
            
            // Clear form data
            $_POST = array();
        } else {
            $error_message = "Sorry, there was an error sending your message. Please try again later or contact us directly at $support_email.";
        }
    }
}

// Account ID for display
$account_id = str_pad($user['id'], 8, '0', STR_PAD_LEFT);
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contact Support - <?php echo htmlspecialchars($site_name); ?></title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    
    <style>
        :root {
            --sidebar-width: 16rem;
            --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            --success-gradient: linear-gradient(135deg, #10b981 0%, #059669 100%);
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Inter', sans-serif;
            background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
            min-height: 100vh;
            color: #e2e8f0;
        }
        
        /* Sidebar Styles */
        .sidebar {
            background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
            width: var(--sidebar-width);
            height: 100vh;
            position: fixed;
            left: 0;
            top: 0;
            z-index: 1000;
            transform: translateX(-100%);
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            overflow-y: auto;
            box-shadow: 4px 0 20px rgba(0, 0, 0, 0.3);
            border-right: 1px solid rgba(255, 255, 255, 0.05);
        }
        
        .sidebar.active {
            transform: translateX(0);
        }
        
        @media (min-width: 1024px) {
            .sidebar {
                transform: translateX(0) !important;
            }
        }
        
        .sidebar-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.7);
            z-index: 999;
            backdrop-filter: blur(4px);
        }
        
        .sidebar-overlay.active {
            display: block;
        }
        
        /* Main Content */
        .main-content {
            width: 100%;
            min-height: 100vh;
            transition: margin-left 0.3s ease;
        }
        
        @media (min-width: 1024px) {
            .main-content {
                margin-left: var(--sidebar-width);
                width: calc(100% - var(--sidebar-width));
            }
        }
        
        /* Mobile Menu Button */
        .mobile-menu-btn {
            position: fixed;
            top: 1.5rem;
            left: 1.5rem;
            z-index: 1100;
            width: 3rem;
            height: 3rem;
            background: rgba(30, 41, 59, 0.95);
            border-radius: 0.75rem;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid rgba(255, 255, 255, 0.1);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
            transition: all 0.3s ease;
            backdrop-filter: blur(10px);
        }
        
        @media (min-width: 1024px) {
            .mobile-menu-btn {
                display: none;
            }
        }
        
        /* Navigation Items */
        .nav-item {
            display: flex;
            align-items: center;
            padding: 0.875rem 1rem;
            border-radius: 0.75rem;
            margin: 0.25rem 0.75rem;
            color: #94a3b8;
            text-decoration: none;
            transition: all 0.2s ease;
            position: relative;
            overflow: hidden;
        }
        
        .nav-item::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            width: 3px;
            background: var(--primary-gradient);
            transform: translateX(-100%);
            transition: transform 0.3s ease;
        }
        
        .nav-item:hover {
            background: rgba(255, 255, 255, 0.05);
            color: #e2e8f0;
            transform: translateX(4px);
        }
        
        .nav-item:hover::before {
            transform: translateX(0);
        }
        
        .nav-item.active {
            background: rgba(102, 126, 234, 0.1);
            color: #e2e8f0;
            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
        }
        
        .nav-item.active::before {
            transform: translateX(0);
        }
        
        .nav-item.active i {
            color: #667eea;
            transform: scale(1.1);
        }
        
        .nav-item i {
            width: 1.5rem;
            margin-right: 0.875rem;
            transition: all 0.2s ease;
            font-size: 1.1rem;
        }
        
        /* Card Styles */
        .glass-card {
            background: rgba(30, 41, 59, 0.7);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 1.25rem;
            transition: all 0.3s ease;
        }
        
        .glass-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
            border-color: rgba(102, 126, 234, 0.3);
        }
        
        /* Form Styles */
        .form-input {
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 0.75rem;
            padding: 0.875rem 1rem;
            color: #e2e8f0;
            font-size: 0.95rem;
            transition: all 0.2s ease;
            width: 100%;
        }
        
        .form-input:focus {
            outline: none;
            border-color: #667eea;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
            background: rgba(255, 255, 255, 0.08);
        }
        
        .form-input::placeholder {
            color: #94a3b8;
        }
        
        .form-label {
            display: block;
            color: #cbd5e0;
            font-size: 0.875rem;
            font-weight: 500;
            margin-bottom: 0.5rem;
        }
        
        .form-group {
            margin-bottom: 1.5rem;
        }
        
        textarea.form-input {
            min-height: 150px;
            resize: vertical;
        }
        
        .btn-primary {
            background: var(--primary-gradient);
            color: white;
            border: none;
            border-radius: 0.75rem;
            padding: 0.875rem 1.75rem;
            font-weight: 600;
            font-size: 0.95rem;
            cursor: pointer;
            transition: all 0.2s ease;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
        }
        
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 25px -5px rgba(102, 126, 234, 0.4);
        }
        
        .btn-primary:active {
            transform: translateY(0);
        }
        
        .btn-secondary {
            background: rgba(255, 255, 255, 0.05);
            color: #cbd5e0;
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 0.75rem;
            padding: 0.875rem 1.75rem;
            font-weight: 500;
            font-size: 0.95rem;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        
        .btn-secondary:hover {
            background: rgba(255, 255, 255, 0.1);
            color: #e2e8f0;
        }
        
        /* Alert Messages */
        .alert-success {
            background: rgba(72, 187, 120, 0.1);
            border: 1px solid rgba(72, 187, 120, 0.2);
            color: #48bb78;
            padding: 1rem 1.5rem;
            border-radius: 0.75rem;
            margin-bottom: 1.5rem;
            display: flex;
            align-items: center;
            gap: 0.75rem;
            animation: slideIn 0.3s ease-out;
        }
        
        .alert-error {
            background: rgba(245, 101, 101, 0.1);
            border: 1px solid rgba(245, 101, 101, 0.2);
            color: #f56565;
            padding: 1rem 1.5rem;
            border-radius: 0.75rem;
            margin-bottom: 1.5rem;
            display: flex;
            align-items: center;
            gap: 0.75rem;
            animation: slideIn 0.3s ease-out;
        }
        
        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        /* Contact Info Cards */
        .contact-card {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 1rem;
            padding: 1.5rem;
            transition: all 0.2s ease;
        }
        
        .contact-card:hover {
            background: rgba(255, 255, 255, 0.05);
            transform: translateY(-2px);
        }
        
        .contact-icon {
            width: 3rem;
            height: 3rem;
            border-radius: 0.75rem;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 1rem;
            font-size: 1.25rem;
        }
        
        .icon-email {
            background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0.1));
            color: #3b82f6;
            border: 1px solid rgba(59, 130, 246, 0.2);
        }
        
        .icon-phone {
            background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(16, 185, 129, 0.1));
            color: #10b981;
            border: 1px solid rgba(16, 185, 129, 0.2);
        }
        
        .icon-location {
            background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(168, 85, 247, 0.1));
            color: #a855f7;
            border: 1px solid rgba(168, 85, 247, 0.2);
        }
        
        .icon-time {
            background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(245, 158, 11, 0.1));
            color: #f59e0b;
            border: 1px solid rgba(245, 158, 11, 0.2);
        }
        
        /* Scrollbar */
        ::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }
        
        ::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.05);
        }
        
        ::-webkit-scrollbar-thumb {
            background: var(--primary-gradient);
            border-radius: 3px;
        }
        
        /* Animations */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .animate-fade-in {
            animation: fadeIn 0.5s ease-out;
        }
    </style>
</head>
<body class="text-white">
    <?php include("nav.php"); ?>
    
    <!-- Main Content -->
    <div class="main-content">
        <!-- Top Bar -->
        <div class="border-b border-gray-800/50 p-6 glass-card mx-4 mt-4">
            <div class="flex flex-col lg:flex-row lg:justify-between lg:items-center gap-6">
                <div>
                    <h2 class="text-2xl lg:text-3xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent">
                        Contact Support
                    </h2>
                    <p class="text-gray-400 mt-2">
                        Get in touch with our support team for assistance
                    </p>
                </div>
                <div class="flex items-center gap-4">
                    <div class="hidden lg:block">
                        <div class="flex items-center gap-2 px-4 py-2 bg-gray-800/50 rounded-lg">
                            <i class="fas fa-user-circle text-blue-400"></i>
                            <span class="text-sm">Account: <span class="font-bold"><?php echo htmlspecialchars($account_id); ?></span></span>
                        </div>
                    </div>
                    <a href="index.php" class="btn-secondary">
                        <i class="fas fa-arrow-left mr-2"></i> Back to Dashboard
                    </a>
                </div>
            </div>
        </div>

        <!-- Support Content -->
        <div class="p-6">
            <!-- Success/Error Messages -->
            <?php if ($success_message): ?>
                <div class="alert-success">
                    <i class="fas fa-check-circle"></i>
                    <span><?php echo htmlspecialchars($success_message); ?></span>
                </div>
            <?php endif; ?>
            
            <?php if ($error_message): ?>
                <div class="alert-error">
                    <i class="fas fa-exclamation-circle"></i>
                    <span><?php echo htmlspecialchars($error_message); ?></span>
                </div>
            <?php endif; ?>

            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                <!-- Left Column: Contact Form -->
                <div class="lg:col-span-2">
                    <div class="glass-card p-6 mb-6 animate-fade-in">
                        <div class="flex items-center mb-6">
                            <div class="w-12 h-12 bg-gradient-to-br from-blue-500/20 to-purple-500/20 rounded-xl flex items-center justify-center mr-4">
                                <i class="fas fa-envelope text-xl text-blue-400"></i>
                            </div>
                            <div>
                                <h3 class="text-xl font-bold">Send us a Message</h3>
                                <p class="text-gray-400">We'll respond as soon as possible</p>
                            </div>
                        </div>
                        
                        <form method="POST" action="" id="contactForm">
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div class="form-group">
                                    <label class="form-label">Your Name</label>
                                    <input type="text" 
                                           name="name" 
                                           class="form-input" 
                                           placeholder="Enter your full name"
                                           value="<?php echo htmlspecialchars($_POST['name'] ?? $user['username'] ?? ''); ?>"
                                           required>
                                </div>
                                
                                <div class="form-group">
                                    <label class="form-label">Your Email</label>
                                    <input type="email" 
                                           name="email" 
                                           class="form-input" 
                                           placeholder="Enter your email address"
                                           value="<?php echo htmlspecialchars($_POST['email'] ?? $user['email'] ?? ''); ?>"
                                           required>
                                </div>
                            </div>
                            
                            <div class="form-group">
                                <label class="form-label">Subject</label>
                                <input type="text" 
                                       name="subject" 
                                       class="form-input" 
                                       placeholder="What is this regarding?"
                                       value="<?php echo htmlspecialchars($_POST['subject'] ?? ''); ?>"
                                       required>
                            </div>
                            
                            <div class="form-group">
                                <label class="form-label">Your Message</label>
                                <textarea name="message" 
                                          class="form-input" 
                                          placeholder="Please describe your issue or question in detail..."
                                          required><?php echo htmlspecialchars($_POST['message'] ?? ''); ?></textarea>
                                <p class="text-xs text-gray-400 mt-2">
                                    <i class="fas fa-info-circle mr-1"></i>
                                    Please provide as much detail as possible to help us assist you better.
                                </p>
                            </div>
                            
                            <div class="mt-6 pt-6 border-t border-gray-700/50">
                                <button type="submit" name="submit_contact" class="btn-primary w-full">
                                    <i class="fas fa-paper-plane mr-2"></i> Send Message
                                </button>
                                <p class="text-xs text-gray-400 text-center mt-4">
                                    By submitting this form, you agree to our terms and privacy policy.
                                </p>
                            </div>
                        </form>
                    </div>
                </div>
                
                <!-- Right Column: Contact Information -->
                <div>
                    <!-- Contact Info Cards -->
                    <div class="glass-card p-6 mb-6 animate-fade-in" style="animation-delay: 0.1s">
                        <h3 class="text-xl font-bold mb-6 flex items-center">
                            <i class="fas fa-headset mr-3 text-green-400"></i> Contact Information
                        </h3>
                        
                        <div class="space-y-4">
                            <!-- Email -->
                            <div class="contact-card">
                                <div class="contact-icon icon-email">
                                    <i class="fas fa-envelope"></i>
                                </div>
                                <h4 class="font-bold mb-1">Email Support</h4>
                                <p class="text-gray-400 text-sm mb-2">Send us an email anytime</p>
                                <a href="mailto:<?php echo htmlspecialchars($support_email); ?>" class="text-blue-400 hover:text-blue-300 font-medium">
                                    <?php echo htmlspecialchars($support_email); ?>
                                </a>
                            </div>
                            
                            <!-- Phone -->
                            <div class="contact-card">
                                <div class="contact-icon icon-phone">
                                    <i class="fas fa-phone"></i>
                                </div>
                                <h4 class="font-bold mb-1">Phone Support</h4>
                                <p class="text-gray-400 text-sm mb-2">Call us for immediate assistance</p>
                                <a href="tel:<?php echo preg_replace('/[^0-9+]/', '', $support_phone); ?>" class="text-green-400 hover:text-green-300 font-medium">
                                    <?php echo htmlspecialchars($support_phone); ?>
                                </a>
                            </div>
                            
                            <!-- Address -->
                            <div class="contact-card">
                                <div class="contact-icon icon-location">
                                    <i class="fas fa-map-marker-alt"></i>
                                </div>
                                <h4 class="font-bold mb-1">Our Location</h4>
                                <p class="text-gray-400 text-sm mb-2">Visit our office</p>
                                <p class="text-purple-400 font-medium">
                                    <?php echo htmlspecialchars($support_address); ?>
                                </p>
                            </div>
                            
                            <!-- Hours -->
                            <div class="contact-card">
                                <div class="contact-icon icon-time">
                                    <i class="fas fa-clock"></i>
                                </div>
                                <h4 class="font-bold mb-1">Support Hours</h4>
                                <p class="text-gray-400 text-sm mb-2">When we're available</p>
                                <p class="text-yellow-400 font-medium">
                                    <?php echo htmlspecialchars($support_hours); ?>
                                </p>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Quick Tips -->
                    <div class="glass-card p-6 animate-fade-in" style="animation-delay: 0.2s">
                        <h3 class="text-xl font-bold mb-4 flex items-center">
                            <i class="fas fa-lightbulb mr-3 text-yellow-400"></i> Quick Tips
                        </h3>
                        <div class="space-y-3">
                            <div class="flex items-start gap-3">
                                <i class="fas fa-check text-green-400 mt-1"></i>
                                <div>
                                    <p class="font-medium text-sm">Be Specific</p>
                                    <p class="text-xs text-gray-400">Include account details and specific error messages</p>
                                </div>
                            </div>
                            <div class="flex items-start gap-3">
                                <i class="fas fa-check text-green-400 mt-1"></i>
                                <div>
                                    <p class="font-medium text-sm">Check Your Email</p>
                                    <p class="text-xs text-gray-400">We'll send a confirmation and response to your email</p>
                                </div>
                            </div>
                            <div class="flex items-start gap-3">
                                <i class="fas fa-check text-green-400 mt-1"></i>
                                <div>
                                    <p class="font-medium text-sm">Include Screenshots</p>
                                    <p class="text-xs text-gray-400">If possible, include screenshots of any issues</p>
                                </div>
                            </div>
                            <div class="flex items-start gap-3">
                                <i class="fas fa-check text-green-400 mt-1"></i>
                                <div>
                                    <p class="font-medium text-sm">Response Time</p>
                                    <p class="text-xs text-gray-400">We typically respond within 1-24 hours</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- FAQ Section (Optional) -->
            <div class="glass-card p-6 mt-6 animate-fade-in" style="animation-delay: 0.3s">
                <h3 class="text-xl font-bold mb-6 flex items-center">
                    <i class="fas fa-question-circle mr-3 text-purple-400"></i> Frequently Asked Questions
                </h3>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <!-- FAQ Item 1 -->
                    <div class="bg-gray-800/30 rounded-lg p-4">
                        <div class="flex items-start gap-3">
                            <i class="fas fa-question text-blue-400 mt-1"></i>
                            <div>
                                <h4 class="font-bold mb-2">How long does it take to get a response?</h4>
                                <p class="text-sm text-gray-400">We typically respond to all inquiries within 1-24 hours during business days. Urgent issues may receive faster responses.</p>
                            </div>
                        </div>
                    </div>
                    
                    <!-- FAQ Item 2 -->
                    <div class="bg-gray-800/30 rounded-lg p-4">
                        <div class="flex items-start gap-3">
                            <i class="fas fa-question text-blue-400 mt-1"></i>
                            <div>
                                <h4 class="font-bold mb-2">What information should I include?</h4>
                                <p class="text-sm text-gray-400">Include your account ID, specific error messages, screenshots if applicable, and a detailed description of your issue.</p>
                            </div>
                        </div>
                    </div>
                    
                    <!-- FAQ Item 3 -->
                    <div class="bg-gray-800/30 rounded-lg p-4">
                        <div class="flex items-start gap-3">
                            <i class="fas fa-question text-blue-400 mt-1"></i>
                            <div>
                                <h4 class="font-bold mb-2">Is phone support available 24/7?</h4>
                                <p class="text-sm text-gray-400">Our phone support is available during business hours. For 24/7 assistance, please use our email support or contact form.</p>
                            </div>
                        </div>
                    </div>
                    
                    <!-- FAQ Item 4 -->
                    <div class="bg-gray-800/30 rounded-lg p-4">
                        <div class="flex items-start gap-3">
                            <i class="fas fa-question text-blue-400 mt-1"></i>
                            <div>
                                <h4 class="font-bold mb-2">Can I get support for technical issues?</h4>
                                <p class="text-sm text-gray-400">Yes, our technical support team can help with platform issues, trading problems, and technical difficulties.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Footer -->
            <div class="mt-8 text-center">
                <p class="text-gray-500 text-sm">
                    For urgent matters requiring immediate attention, please call us directly.
                </p>
                <p class="text-gray-600 text-xs mt-2">
                    <?php echo htmlspecialchars($site_name); ?> &copy; <?php echo date('Y'); ?> - All rights reserved
                </p>
            </div>
        </div>
    </div>

    <!-- JavaScript -->
    <script>
        // Mobile menu toggle functionality
        const menuToggle = document.getElementById('menuToggle');
        const closeSidebar = document.getElementById('closeSidebar');
        const sidebar = document.getElementById('sidebar');
        const sidebarOverlay = document.getElementById('sidebarOverlay');
        const body = document.body;

        // Function to toggle sidebar
        function toggleSidebar() {
            sidebar.classList.toggle('active');
            sidebarOverlay.classList.toggle('active');
            
            if (sidebar.classList.contains('active')) {
                body.classList.add('sidebar-open');
                body.style.overflow = 'hidden';
            } else {
                body.classList.remove('sidebar-open');
                body.style.overflow = '';
            }
        }

        // Function to close sidebar
        function closeSidebarFunc() {
            sidebar.classList.remove('active');
            sidebarOverlay.classList.remove('active');
            body.classList.remove('sidebar-open');
            body.style.overflow = '';
        }

        // Event listeners for mobile menu
        if (menuToggle) menuToggle.addEventListener('click', toggleSidebar);
        if (closeSidebar) closeSidebar.addEventListener('click', closeSidebarFunc);
        if (sidebarOverlay) sidebarOverlay.addEventListener('click', closeSidebarFunc);

        // Handle window resize
        window.addEventListener('resize', function() {
            if (window.innerWidth >= 1024) {
                sidebar.classList.add('active');
                sidebarOverlay.classList.remove('active');
                body.classList.remove('sidebar-open');
                body.style.overflow = '';
            } else {
                if (!sidebar.classList.contains('active')) {
                    sidebar.classList.remove('active');
                    sidebarOverlay.classList.remove('active');
                    body.classList.remove('sidebar-open');
                    body.style.overflow = '';
                }
            }
        });

        // Initialize sidebar state on load
        document.addEventListener('DOMContentLoaded', function() {
            if (window.innerWidth >= 1024) {
                sidebar.classList.add('active');
            }
            
            // Set active nav item
            document.querySelectorAll('.nav-item').forEach(nav => {
                const href = nav.getAttribute('href');
                if (href && href.includes('support.php')) {
                    nav.classList.add('active');
                } else {
                    nav.classList.remove('active');
                }
            });
        });

        // Escape key closes sidebar
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape' && sidebar.classList.contains('active')) {
                closeSidebarFunc();
            }
        });

        // Form validation
        const contactForm = document.getElementById('contactForm');
        if (contactForm) {
            contactForm.addEventListener('submit', function(e) {
                const name = document.querySelector('input[name="name"]').value.trim();
                const email = document.querySelector('input[name="email"]').value.trim();
                const subject = document.querySelector('input[name="subject"]').value.trim();
                const message = document.querySelector('textarea[name="message"]').value.trim();
                
                let hasError = false;
                
                // Clear previous errors
                document.querySelectorAll('.error-message').forEach(el => el.remove());
                document.querySelectorAll('.form-input').forEach(el => el.classList.remove('border-red-500'));
                
                // Validate name
                if (name.length < 2) {
                    showFieldError('name', 'Name must be at least 2 characters');
                    hasError = true;
                }
                
                // Validate email
                const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                if (!emailRegex.test(email)) {
                    showFieldError('email', 'Please enter a valid email address');
                    hasError = true;
                }
                
                // Validate subject
                if (subject.length < 5) {
                    showFieldError('subject', 'Subject must be at least 5 characters');
                    hasError = true;
                }
                
                // Validate message
                if (message.length < 10) {
                    showFieldError('message', 'Message must be at least 10 characters');
                    hasError = true;
                }
                
                if (hasError) {
                    e.preventDefault();
                    showNotification('Please fix the errors above', 'error');
                    document.querySelector('.alert-error')?.scrollIntoView({ behavior: 'smooth', block: 'center' });
                }
            });
        }
        
        function showFieldError(fieldName, message) {
            const field = document.querySelector(`[name="${fieldName}"]`);
            if (!field) return;
            
            const errorDiv = document.createElement('div');
            errorDiv.className = 'error-message text-red-400 text-sm mt-1 flex items-center gap-1';
            errorDiv.innerHTML = `<i class="fas fa-exclamation-circle"></i> ${message}`;
            
            const existingError = field.parentNode.querySelector('.error-message');
            if (existingError) existingError.remove();
            
            field.parentNode.appendChild(errorDiv);
            field.classList.add('border-red-500');
            
            field.addEventListener('input', function() {
                errorDiv.remove();
                this.classList.remove('border-red-500');
            }, { once: true });
        }
        
        function showNotification(message, type = 'info') {
            const notification = document.createElement('div');
            notification.className = `fixed top-6 right-6 px-4 py-3 rounded-xl shadow-xl z-50 ${
                type === 'success' ? 'bg-green-600' : 
                type === 'error' ? 'bg-red-600' : 
                'bg-blue-600'
            } text-white`;
            notification.innerHTML = `
                <div class="flex items-center gap-3">
                    <i class="fas fa-${type === 'success' ? 'check-circle' : type === 'error' ? 'exclamation-circle' : 'info-circle'}"></i>
                    <span>${message}</span>
                </div>
            `;
            
            document.body.appendChild(notification);
            
            setTimeout(() => {
                notification.style.opacity = '0';
                notification.style.transform = 'translateX(100%)';
                setTimeout(() => notification.remove(), 300);
            }, 3000);
        }
    </script>
</body>
</html>