@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>
       <!-- CTA Buttons -->
<!--<div class="text-center my-3">
    <a href="https://wa.me/2349072109770?text=Agent%20Registration" class="d-block mb-3">
        Please click here first
    </a>
</div>-->

<div class="cta-buttons d-flex flex-column flex-md-row justify-content-center align-items-center gap-3">

    <button data-popup="chat" 
            data-popup-url="https://wapschat.ng/agent/v2/login" 
            class="btn btn-success w-100 w-md-auto">
        <i class="fas fa-handshake"></i> Login To Dashboard
    </button>

    <button data-popup="chat" 
            data-popup-url="https://forms.fillout.com/t/ojE1uUyEVVus" 
            class="btn btn-warning w-100 w-md-auto">
        <i class="fas fa-handshake"></i> Create An Account
    </button>

    <a href="https://wapschat.ng/agent" class="btn btn-primary w-100 w-md-auto">
        <i class="fas fa-user-tie"></i> Learn More
    </a>

</div>

        <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 (₦10,000 / $7)
    —
    <a href="https://app.wapschat.ng/support/help" target="_blank">
        Click here
    </a>
</li>

            <li><strong>Step 5:</strong> Rename your group and add our support line .</li>
            <li><strong>Step 6:</strong> Complete our online training.</li>
            <li><strong>Step 7:</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>₦2,000</td></tr>
                <tr><td>Welcome bonus</td><td>₦4,000</td></tr>
                <tr><td>New upgrade + Setup (set-up commission applied only when done by dedicated team</td><td>30% of total fee</td></tr>
                 <tr><td> Commission on recurring monthly (Renewal)</td><td>25% 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 (35% 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>Commission on recurring monthly (Renewal)</td><td>35% 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 month</td><td>10% bonus</td></tr>
                <tr><td>Partner onboarded via your group</td><td>20% 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 Standard Plan</td><td>Free</td></tr>
            </tbody> 
        </table>
    </div>

    <!-- Important Notes -->
    <div class="section">
        <h2>Important Notes</h2>
        <ul>
           <h4>WapsChat Agent Application</h4>
<p>Become a WapsChat Agent today!Earn consistent recurring income by introducing local businesses to the power of WhatsApp automation,

Note: The registration process may take between 24 to 48 hours and is only a preliminary step. We will send your login details shortly</p>
        </ul>   
    </div> 

     <!-- CTA Buttons -->
        <div class="cta-buttons d-flex justify-content-center gap-3">
         
             <button data-popup="chat" data-popup-url="https://wapschat.ng/agent/v2/login">
                <i class="fas fa-handshake"></i>  Login To Dashboard</button>
          
            <button data-popup="chat" data-popup-url="https://forms.fillout.com/t/ojE1uUyEVVus" class="cta-btn btn btn-warning">
                <i class="fas fa-handshake"></i> Create An Account</button>
                
                <div class="cta-buttons d-flex justify-content-center gap-3">
            <a href="https://wapschat.ng/agent" class="cta-btn btn btn-primary">
                <i class="fas fa-user-tie"></i> 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