<?php
// Ensure session handling is correct.
include('inc/session.php');
?> 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Trading Plans - Copy Trading Platform</title>
    <!-- IonIcons CDN -->
    <link href="https://unpkg.com/ionicons@4.5.10-0/dist/css/ionicons.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionic/1.3.2/css/ionic.min.css">
    <style>
    /* --- Reuse Base Styles from your dashboard --- */
    * { margin: 0; padding: 0; box-sizing: border-box; }
    html { scroll-behavior: smooth; height: 100%; }
    body {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        background-color: #f4f7fc; color: #333; line-height: 1.6;
        overflow-x: hidden; min-height: 100%; position: relative;
    }
    a { text-decoration: none; color: inherit; }
    ul { list-style: none; }

    /* --- Sidebar CSS (Same as your index.php) --- */
    .dashboard-container { display: flex; min-height: 100vh; position: relative; }
    .sidebar-toggle-checkbox { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
    
    .sidebar {
        width: 250px; background-color: #2c3e50; color: #ecf0f1;
        display: flex; flex-direction: column; transition: width 0.3s ease, left 0.3s ease;
        position: sticky; top: 0; height: 100vh; z-index: 1000; flex-shrink: 0;
    }
    .sidebar-header { padding: 5px; text-align: center; border-bottom: 1px solid #34495e; flex-shrink: 0; }
    .sidebar-header h2 { font-size: 1.2em; font-weight: 600; white-space: nowrap; overflow: hidden; opacity: 1;}
    .sidebar-nav { flex-grow: 1; overflow-y: auto; overflow-x: hidden; }
    .sidebar-nav ul { padding-top: 20px; }
    .sidebar-nav li { margin-bottom: 5px; position: relative; }
    .sidebar-nav a { display: flex; align-items: center; padding: 12px 20px; color: #bdc3c7; transition: 0.3s; white-space: nowrap; overflow: hidden; position: relative; }
    .sidebar-nav a i:first-child { margin-right: 15px; font-size: 1.3em; width: 20px; text-align: center; flex-shrink: 0; }
    .sidebar-nav a:hover, .sidebar-nav a.active { background-color: #34495e; color: #ffffff; }

    /* Submenu */
    .has-submenu > a .submenu-indicator { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); font-size: 0.8em; color: #bdc3c7; transition: transform 0.3s; }
    .submenu { list-style: none; padding-left: 0; background-color: rgba(0, 0, 0, 0.2); max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; }
    .submenu a.sub-link { padding-left: 45px; font-size: 0.9em; color: #a8b0b4; }
    .sidebar .has-submenu.open > .submenu { max-height: 500px; }
    .sidebar .has-submenu.open > a .submenu-indicator { transform: translateY(-50%) rotate(180deg); }
    
    .sidebar-toggler-wrapper { padding: 10px 0; border-top: 1px solid #34495e; text-align: center; }
    .sidebar-toggle-btn { background: transparent; border: none; color: #bdc3c7; font-size: 1.5em; cursor: pointer; }

    /* --- Main Content --- */
    .main-content { flex-grow: 1; display: flex; flex-direction: column; position: relative; height: 100vh; overflow-y: auto; background-color: #02101c; }
    .main-header { background-color: #02101c; padding: 15px 30px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #1f293a; position: sticky; top: 0; z-index: 900; }
    .header-left h1 { font-size: 1.5em; margin-left: 15px; color: #fff; font-weight: 600; }
    .menu-toggle { color: #fff; font-size: 1.8em; display: none; cursor: pointer; }
    .page-content { padding: 30px; flex-grow: 1; background-color: #02101c; color: #fff; }

    /* --- PRICING PAGE SPECIFIC CSS --- */
    
    .pricing-header {
        text-align: center;
        margin-bottom: 50px;
    }
    .pricing-header h2 { font-size: 2.2em; color: #fff; margin-bottom: 10px; }
    .pricing-header p { color: #aaa; font-size: 1.1em; }

    .pricing-wrapper {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 25px;
        align-items: stretch; /* Make cards same height */
    }

    .plan-card {
        background-color: #161925;
        border: 1px solid #2c3e50;
        border-radius: 12px;
        width: 100%;
        max-width: 300px;
        text-align: center;
        position: relative;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .plan-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.4);
        border-color: #3d85c6;
    }

    /* Recommended Plan Styling */
    .plan-card.popular {
        border: 1px solid #f1c40f;
        box-shadow: 0 0 15px rgba(241, 196, 15, 0.2);
        transform: scale(1.05);
        z-index: 2;
    }
    .plan-card.popular:hover {
        transform: scale(1.05) translateY(-10px);
        box-shadow: 0 15px 30px rgba(241, 196, 15, 0.3);
    }
    
    .badge-popular {
        background-color: #f1c40f;
        color: #000;
        text-transform: uppercase;
        font-size: 0.75em;
        font-weight: bold;
        padding: 5px 0;
        width: 150px;
        position: absolute;
        top: 25px;
        right: -40px;
        transform: rotate(45deg);
        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    }

    /* Card Header */
    .plan-header {
        padding: 30px 20px;
        border-bottom: 1px solid #2c3e50;
        background-color: rgba(255,255,255,0.02);
    }
    .plan-name {
        font-size: 1.4em;
        font-weight: 700;
        color: #fff;
        margin-bottom: 10px;
        text-transform: uppercase;
        letter-spacing: 1px;
    }
    .plan-price {
        font-size: 2.5em;
        font-weight: 700;
        color: #fff;
        margin: 10px 0;
    }
    .plan-price span {
        font-size: 0.4em;
        color: #888;
        font-weight: 400;
        vertical-align: middle;
    }
    .plan-roi {
        font-size: 1.1em;
        color: #28a745; /* Green for profit */
        font-weight: 600;
        margin-top: 5px;
    }

    /* Card Features */
    .plan-features {
        padding: 20px;
        flex-grow: 1;
    }
    .plan-features ul {
        list-style: none;
        padding: 0;
    }
    .plan-features li {
        padding: 10px 0;
        border-bottom: 1px solid #2c3e50;
        color: #ccc;
        font-size: 0.95em;
    }
    .plan-features li:last-child { border-bottom: none; }
    .plan-features li i {
        margin-right: 8px;
        color: #3d85c6;
    }
    .plan-features li.unavailable {
        color: #555;
        text-decoration: line-through;
    }
    .plan-features li.unavailable i {
        color: #555;
    }

    /* Card Footer / Button */
    .plan-footer {
        padding: 25px;
        background-color: rgba(0,0,0,0.2);
    }
    .btn-plan {
        display: block;
        width: 100%;
        padding: 12px;
        border-radius: 30px;
        font-weight: 600;
        text-transform: uppercase;
        transition: 0.3s;
        border: none;
        cursor: pointer;
    }
    
    .btn-basic { background-color: transparent; border: 2px solid #3d85c6; color: #fff; }
    .btn-basic:hover { background-color: #3d85c6; color: #fff; }
    
    .btn-popular { background: linear-gradient(45deg, #f1c40f, #f39c12); color: #000; border: none; }
    .btn-popular:hover { box-shadow: 0 5px 15px rgba(243, 156, 18, 0.4); }
    
    .btn-premium { background-color: #28a745; color: #fff; border: none; }
    .btn-premium:hover { background-color: #218838; }

    .btn-vip { background-color: #fff; color: #000; border: none; }
    .btn-vip:hover { background-color: #e6e6e6; }

    /* Responsive */
    @media (max-width: 992px) {
        .pricing-wrapper { gap: 40px; }
        .plan-card.popular { transform: scale(1); } /* Reset scale on smaller screens */
        .plan-card.popular:hover { transform: translateY(-10px); }
    }
    @media (max-width: 768px) {
        .sidebar { position: fixed; left: -250px; }
        #sidebar-toggle:checked ~ .dashboard-container .sidebar { left: 0; }
        .menu-toggle { display: block; }
        .mobile-hide { display: none; }
        .pricing-header h2 { font-size: 1.8em; }
        .plan-card { max-width: 100%; }
    }
    </style>
</head>
<body>
    <input type="checkbox" id="sidebar-toggle" class="sidebar-toggle-checkbox">

    <div class="dashboard-container">
        <!-- Sidebar -->
        <aside class="sidebar" id="sidebar">
            <div class="sidebar-header">
               <div>▲</div>
               <h2 class="mobile-hide" style="color:#ffffff;"> <?php echo $full_name; ?></h2>
            </div>
         <nav class="sidebar-nav">
                 <ul>
                    <li><a href="index.php" class="nav-link" data-tooltip="Dashboard"><i class="ion-home"></i> <span>Dashboard</span></a></li>
                    <li class="has-submenu">
                        <a href="#" class="nav-link" data-tooltip="User Management"> <i class="ion-ios-people"></i> <span>User Management</span> <i class="submenu-indicator ion-chevron-down"></i> </a>
                        <ul class="submenu">
                            <li><a href="profile.php" class="nav-link sub-link"><i class="ion-person"></i> <span>Profile</span></a></li>
                            <li><a href="settings.php" class="nav-link sub-link"><i class="ion-settings"></i> <span>Account Settings</span></a></li>
                        </ul>
                    </li>
                    <li><a href="transactions.php" class="nav-link"><i class="ion-arrow-swap"></i> <span>Transactions</span></a></li>
                    <li><a href="deposit-request.php" class="nav-link"><i class="ion-arrow-down-a"></i> <span>Deposit</span></a></li>
                    <li><a href="withdraw-request.php" class="nav-link active"><i class="ion-arrow-up-a"></i> <span>Withdraw</span></a></li> <!-- Active link -->
                    <li><a href="upgrade.php"><i class="ion-stats-bars"></i> <span>Signal Activation </span></a></li>
                      <li><a href="signal.php"><i class="ion-stats-bars"></i> <span>Upgrade </span></a></li>
                    <li class="logout"><a href="logout.php" class="nav-link" data-tooltip="Logout"><i class="ion-log-out"></i> <span>Logout</span></a></li>
                </ul>
              

            </nav>
            <div class="sidebar-toggler-wrapper">
                <label for="sidebar-toggle" class="sidebar-toggle-btn">
                    <i class="ion-chevron-left"></i>
                </label>
            </div>
        </aside>

        <!-- Main Content -->
        <main class="main-content" id="main-content">
            <!-- Header -->
            <header class="main-header">
                <div class="header-left">
                    <label for="sidebar-toggle" class="menu-toggle">
                        <i class="ion-navicon-round"></i>
                    </label>
                    <h1>Pricing Plans</h1>
                </div>
            </header>

            <div class="page-content">
                
                <div class="pricing-header">
                    <h2>Choose Your Trading Plan</h2>
                    <p>Select a package that suits your financial goals.</p>
                </div>

                <div class="pricing-wrapper">
                    
                    <!-- PLAN 1: STARTER -->
                    <div class="plan-card">
                        <div class="plan-header">
                            <div class="plan-name">Starter</div>
                            <div class="plan-price">$200</div>
                            <div class="plan-roi">+15% ROI</div>
                        </div>
                        <div class="plan-features">
                            <ul>
                                <li><i class="ion-checkmark-circled"></i> Min Deposit: $200</li>
                                <li><i class="ion-checkmark-circled"></i> Max Deposit: $999</li>
                                <li><i class="ion-checkmark-circled"></i> Duration: 7 Days</li>
                                <li><i class="ion-checkmark-circled"></i> 24/7 Support</li>
                                <li class="unavailable"><i class="ion-close-circled"></i> Personal Account Manager</li>
                            </ul>
                        </div>
                        <div class="plan-footer">
                            <a href="deposit-request.php?plan=Starter" class="btn-plan btn-basic">Choose Plan</a>
                        </div>
                    </div>

                    <!-- PLAN 2: SILVER -->
                    <div class="plan-card">
                        <div class="plan-header">
                            <div class="plan-name">Silver</div>
                            <div class="plan-price">$1,000</div>
                            <div class="plan-roi">+25% ROI</div>
                        </div>
                        <div class="plan-features">
                            <ul>
                                <li><i class="ion-checkmark-circled"></i> Min Deposit: $1,000</li>
                                <li><i class="ion-checkmark-circled"></i> Max Deposit: $4,999</li>
                                <li><i class="ion-checkmark-circled"></i> Duration: 14 Days</li>
                                <li><i class="ion-checkmark-circled"></i> Priority Support</li>
                                <li><i class="ion-checkmark-circled"></i> Basic Trading Signals</li>
                            </ul>
                        </div>
                        <div class="plan-footer">
                            <a href="deposit-request.php?plan=Silver" class="btn-plan btn-basic">Choose Plan</a>
                        </div>
                    </div>

                    <!-- PLAN 3: GOLD (POPULAR) -->
                    <div class="plan-card popular">
                        <div class="badge-popular">Popular</div>
                        <div class="plan-header">
                            <div class="plan-name" style="color: #f1c40f;">Gold</div>
                            <div class="plan-price">$5,000</div>
                            <div class="plan-roi" style="color:#f1c40f;">+40% ROI</div>
                        </div>
                        <div class="plan-features">
                            <ul>
                                <li><i class="ion-checkmark-circled"></i> Min Deposit: $5,000</li>
                                <li><i class="ion-checkmark-circled"></i> Max Deposit: $19,999</li>
                                <li><i class="ion-checkmark-circled"></i> Duration: 30 Days</li>
                                <li><i class="ion-checkmark-circled"></i> Personal Account Manager</li>
                                <li><i class="ion-checkmark-circled"></i> Premium Signals</li>
                            </ul>
                        </div>
                        <div class="plan-footer">
                            <a href="deposit-request.php?plan=Gold" class="btn-plan btn-popular">Choose Plan</a>
                        </div>
                    </div>

                    <!-- PLAN 4: VIP -->
                    <div class="plan-card">
                        <div class="plan-header">
                            <div class="plan-name">VIP</div>
                            <div class="plan-price">$20k+</div>
                            <div class="plan-roi">+60% ROI</div>
                        </div>
                        <div class="plan-features">
                            <ul>
                                <li><i class="ion-checkmark-circled"></i> Min Deposit: $20,000</li>
                                <li><i class="ion-checkmark-circled"></i> Unlimited Max</li>
                                <li><i class="ion-checkmark-circled"></i> Duration: Flexible</li>
                                <li><i class="ion-checkmark-circled"></i> Dedicated VIP Support</li>
                                <li><i class="ion-checkmark-circled"></i> Exclusive Market Access</li>
                            </ul>
                        </div>
                        <div class="plan-footer">
                            <a href="deposit-request.php?plan=VIP" class="btn-plan btn-vip">Choose Plan</a>
                        </div>
                    </div>

                </div> <!-- End Pricing Wrapper -->

            </div>
        </main>
    </div>

    <!-- JavaScript -->
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const sidebarToggle = document.getElementById('sidebar-toggle');
            const sidebar = document.getElementById('sidebar');
            
            if(sidebar && sidebarToggle) {
                sidebarToggle.addEventListener('change', () => {
                    if(window.innerWidth <= 768 && sidebarToggle.checked) {
                        sidebar.classList.add('mobile-forced-open');
                    } else {
                        sidebar.classList.remove('mobile-forced-open');
                    }
                });
            }
        });
    </script>
    
   
</body>
</html>