@extends('layouts.app')

@section('title', 'Become a WapsChat Agent')

@section('content')
<div class="agent-container">

    <!-- Why Become an Agent -->
    <div class="section">
        <br> <br> <br> <br>
        <h2>Why Become a WapsChat Agent?</h2>
        <ul>
            <li>🎁 <strong>Earn Rewards:</strong> Get rewarded for successful referrals, milestones, and performance goals.</li>
            <li>🎓 <strong>Training & Support:</strong> Learn how to set up Facebook Developer accounts, troubleshoot, integrate apps, and support users.</li>
            <li>🌐 <strong>Expand Your Network:</strong> Build connections and open up more opportunities.</li>
        </ul>
    </div>

    <!-- How It Works -->
    <div class="section">
        <h2>How It Works</h2>
        <ol>
            <li><strong>Step 1:</strong> Create a WapsChat account.</li>
            <li><strong>Step 2:</strong> Apply to become an agent.</li>
            <li><strong>Step 3:</strong> Get access to well-structured Agent Dashboard.</li>
            <li><strong>Step 4:</strong> Request A Dedicated Support.</li>
            <li><strong>Step 5:</strong> Complete our online training.</li>
            <li><strong>Step 6:</strong> Start referring and earn commissions!</li>
        </ol>
    </div>

    <!-- Smart Agent Earnings -->
    <div class="section">
        <h2>Smart Agent Earnings Structure</h2>
        <p><strong>Requirement:</strong> WhatsApp group with at least 20 active members</p>
        <table class="earnings-table smart-agent">
            <thead>
                <tr><th>Activity</th><th>Reward</th></tr>
            </thead>
            <tbody>
                <tr><td>WhatsApp group with 100+ members</td><td>₦1,000</td></tr>
                <tr><td>Welcome bonus</td><td>₦2,000</td></tr>
                <tr><td>New upgrade + Setup (set-up commission aoolied only when done by dedicated team</td><td>30% of total fee</td></tr>
                <tr><td>10 upgraded users in a week</td><td>5% bonus upgrade fee</td></tr>
                <tr><td>50 upgraded users in a month</td><td>10% bonus upgrade fee</td></tr>
                <tr><td>Partner onboarded via your group</td><td>10% set-up fee </td></tr>
                <tr><td>Technical integration support(setup done by you)</td><td>50% of support fee</td></tr>
                <tr><td>Virtual Card Basic Plan</td><td>Free</td></tr>
               
            </tbody>
        </table>
    </div>

    <!-- Super Agent Earnings -->
    <div class="section">
        <h2>Super Agent Earnings Structure</h2>
        <p><strong>Requirement:</strong> 100 upgraded users (to qualify)</p>
        <p><strong>Salary:</strong> ₦50,000 – ₦250,000 monthly (25% of monthly group renewal)</p>
        <table class="earnings-table super-agent">
            <thead>
                <tr><th>Activity</th><th>Reward</th></tr>
            </thead>
            <tbody>
                 <tr><td>New upgrade + Setup (set-up commission aoolied only when done by dedicated team</td><td>40% of total fee</td></tr>
                <tr><td>10 upgraded users in a week</td><td>10% bonus</td></tr>
                <tr><td>50 upgraded users in a week</td><td>10% bonus</td></tr>
                <tr><td>Partner onboarded via your group</td><td>20% (₦36k - ₦75k)</td></tr>
                <tr><td>Technical integration support(setup done by you)</td><td>50% of support fee</td></tr>
                <tr><td>Virtual Card Standard Plan</td><td>Free</td></tr>
            </tbody> 
        </table>
    </div>

    <!-- Important Notes -->
    <div class="section">
        <h2>Important Notes</h2>
        <ul>
            <li>You will have an automated dashboard.</li>
            <li>All agent activity is monitored via the portal dashboard and WhatsApp group you provided.</li>
          
        </ul>
    </div>

    <!-- CTA Button -->
    <div class="section cta-section">
      <button data-popup="chat" data-popup-url="https://wapschat.ng/agent/v2/login" class="btn btn-primary">
   Login To Agent Dashboard
</button>
      </a> <a href="https://wapschat.ng/agent" class="btn-cta">🚀 Learn More</a>
    </div>

            
</div>

@push('head')
<style>
.agent-container {
    max-width: 900px;
    margin: 40px auto;
    font-family: Arial, sans-serif;
    color: #333;
    line-height: 1.6;
}
.section {
    margin-bottom: 40px;
}
h2 {
    color: #25D366; /* WapsChat green */
    margin-bottom: 15px;
    border-left: 6px solid #6528e0; /* subtle purple accent */
    padding-left: 10px;
}
ul, ol {
    margin-left: 20px;
}
ul li, ol li {
    margin-bottom: 10px;
}
p strong {
    color: #6528e0;
}

/* Interactive Tables */
.earnings-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    transition: transform 0.2s;
}
.earnings-table th, .earnings-table td {
    border: 1px solid #ccc;
    padding: 12px 15px;
    text-align: left;
}
.earnings-table th {
    color: #fff;
    font-weight: 600;
}

/* Smart Agent Table */
.earnings-table.smart-agent th {
    background-color: #25D366; /* green */
}
.earnings-table.smart-agent tbody tr:nth-child(even) {
    background-color: #e6f9f0;
}
.earnings-table.smart-agent tbody tr:hover {
    background-color: #c0f0d6;
}

/* Super Agent Table */
.earnings-table.super-agent th {
    background-color: #6528e0; /* purple */
}
.earnings-table.super-agent tbody tr:nth-child(even) {
    background-color: #f3e6ff;
}
.earnings-table.super-agent tbody tr:hover {
    background-color: #d4c0ff;
}

/* Hover pop effect */
.earnings-table tbody tr:hover {
    transform: scale(1.02);
}

/* Emoji icons */
.earnings-table tbody tr td:first-child::before {
    content: "💰 ";
    margin-right: 6px;
}

/* CTA Button */
.cta-section {
    text-align: center;
}
.btn-cta {
    display: inline-block;
    background: linear-gradient(135deg,#25D366,#6528e0);
    color: white;
    padding: 16px 32px;
    font-size: 18px;
    font-weight: bold;
    border-radius: 12px;
    text-decoration: none;
    box-shadow: 0 6px 16px rgba(0,0,0,0.15);
    transition: all 0.3s ease;
    
    
    
}
.btn-cta:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 10px 24px rgba(0,0,0,0.25);
}
</style>

@endpush

@endsection