<?php include 'header.php'; ?>
<div class="page-content">
    <div class="container-fluid">
        <div class="row justify-content-center">
            <div class="col-xxl-10">
                <div class="d-flex flex-column align-items-center justify-content-center py-5">
                    <h1 class="display-4 fw-semibold mb-5 text-center">AutoBPO 2.0</h1>
                    
                    <div class="row g-4 w-100">
                        <!-- Learn Option -->
                        <div class="col-lg-4">
                            <div class="card card-animate border-0 shadow-lg rounded-4 h-100 hover-effect bg-secondary-subtle">
                                <div class="card-body p-4 d-flex flex-column align-items-center text-center">
                                    <div class="avatar-xl bg-soft-primary rounded-4 p-3 mb-4">
                                        <i class="ri-book-2-line ri-4x text-primary"></i>
                                    </div>
                                    <h3 class="mb-3">Learn</h3>
                                    <p class="text-muted mb-4">Master new skills with our comprehensive learning resources and courses.</p>
                                    <a href="https://app.autobpo.ai/lms.php" target="_blank" class="btn btn-primary px-4 py-2 rounded-pill mt-auto">Start Learning <i class="ri-arrow-right-line ms-1"></i></a>
                                </div>
                            </div>
                        </div>
                        
                        <!-- BPO Team Option -->
                        <div class="col-lg-4">
                            <div class="card card-animate border-0 shadow-lg rounded-4 h-100 hover-effect bg-secondary-subtle">
                                <div class="card-body p-4 d-flex flex-column align-items-center text-center">
                                    <div class="avatar-xl bg-soft-success rounded-4 p-3 mb-4">
                                        <i class="ri-team-line ri-4x text-success"></i>
                                    </div>
                                    <h3 class="mb-3">BPO Team</h3>
                                    <p class="text-muted mb-4">Talk with over 100 other students, get access to top professionals — and direct support from Chris.</p>
                                    <!--<a href="#" onclick="alert('🚀 AutoBPO Team Community is launching soon — we are working on it!\n\nMeanwhile, you can still join the BPO WhatsApp group.\nJust send a screenshot of your payment to Chris on WhatsApp +27 61 158 1206.\n\n👉 Redirecting you now...'); window.location.href = 'https://wa.me/27611581206?text=Hi%20Chris%2C%20I%20have%20sent%20the%20payment.%20Here%20is%20the%20screenshot.%20Looking%20forward%20to%20joining%20the%20BPO%20WhatsApp%20group.';" class="btn btn-success px-4 py-2 rounded-pill mt-auto">Connect Team <i class="ri-arrow-right-line ms-1"></i></a>-->

                                    <a href="#" onclick="gotogroup()" class="btn btn-success px-4 py-2 rounded-pill mt-auto">Connect Team <i class="ri-arrow-right-line ms-1"></i></a>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Freelancer Autobidder Option -->
                        <div class="col-lg-4">
                            <div class="card card-animate border-0 shadow-lg rounded-4 h-100 hover-effect bg-secondary-subtle">
                                <div class="card-body p-4 d-flex flex-column align-items-center text-center">
                                    <div class="avatar-xl bg-soft-primary rounded-4 p-3 mb-4">
                                        <i class="ri-robot-line ri-4x text-primary"></i>
                                    </div>
                                    <h3 class="mb-3">Customer acquisition</h3>
                                    <p class="text-muted mb-4">Get clients to message you on autopilot</p>
                                    <a href="search.php" class="btn btn-primary px-4 py-2 rounded-pill mt-auto">Start Bidding <i class="ri-arrow-right-line ms-1"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <section class="referral-section">
        <div class="row justify-content-center">
            <div class="col-12 text-center">
                <div class="referral-header">
                    <i class="bi bi-people-fill referral-icon"></i>
                    <h2 class="mb-2">Invite Friends & Earn Rewards</h2>
                    <p class="mb-0">Share your referral code with friends and get exclusive benefits when they sign up</p>
                </div>
                
                <div class="input-group mb-3">
                    <input type="text" class="form-control" id="referralInput" value="<?php echo $mainrow['username']; ?>" readonly>
                    <button class="btn btn-copy" onclick="copyReferralCode()">
                        <i class="bi bi-clipboard me-1"></i> Copy
                    </button>
                </div>
                
               
            </div>
        </div>
        
       
</section>

<div class="alert alert-success copied-alert" id="copiedAlert" role="alert">
    <i class="bi bi-check-circle-fill me-2"></i> Referral code copied to clipboard!
</div>

                </div>
            </div>
        </div>
    </div>
</div>
    <style>
        .referral-section {
            border-radius: 15px;
            padding: 2rem;
            color: white;
            margin: 2rem 0;
        }
        .referral-header {
            margin-bottom: 1.5rem;
        }
        .referral-icon {
            font-size: 2.5rem;
            margin-bottom: 1rem;
            color: #fff;
        }
        .input-group {
            margin-bottom: 1rem;
        }
       
        .btn-copy {
            background-color: #fff;
            color: #2575fc;
            border: none;
            border-radius: 0 8px 8px 0;
            padding: 0.75rem 1rem;
            font-weight: 600;
            transition: all 0.3s;
        }
        .btn-copy:hover {
            background-color: #f8f9fa;
            color: #0d6efd;
        }
        .referral-stats {
            display: flex;
            justify-content: space-around;
            margin-top: 2rem;
            text-align: center;
        }
        .stat-item {
            padding: 0 1rem;
        }
        .stat-value {
            font-size: 1.5rem;
            font-weight: 700;
            margin-bottom: 0.25rem;
        }
        .stat-label {
            font-size: 0.9rem;
            opacity: 0.9;
        }
        .divider {
            width: 1px;
            background: rgba(255, 255, 255, 0.2);
            margin: 0 1rem;
        }
        .copied-alert {
            position: fixed;
            bottom: 20px;
            right: 20px;
            z-index: 1050;
            display: none;
            animation: fadeIn 0.5s, fadeOut 0.5s 2.5s;
        }
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        @keyframes fadeOut {
            from { opacity: 1; }
            to { opacity: 0; }
        }
    </style>
    <script>
    function copyReferralCode() {
        const copyText = document.getElementById("referralInput");
        copyText.select();
        copyText.setSelectionRange(0, 99999);
        document.execCommand("copy");
        
        // Show alert
        const alert = document.getElementById("copiedAlert");
        alert.style.display = "block";
        
        // Hide alert after 3 seconds
        setTimeout(() => {
            alert.style.display = "none";
        }, 3000);
    }
</script>
<style>
    .hover-effect {
        transition: all 0.3s ease;
    }
    .hover-effect:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1) !important;
    }
    .card-animate {
        height: 100%;
        display: flex;
        flex-direction: column;
    }
    .avatar-xl {
        width: 80px;
        height: 80px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
</style>
<?php include 'footer.php'; ?>