{% extends 'affiliates_app/base_affiliate.html' %}
{% load static %}

{% block title %}Affiliate Partner Program | Earn by Introducing Guests to Sri Lanka{% endblock %}

{% block content %}

<style>
    .affiliate-home-hero {
        position: relative;
        min-height: 720px;
        background-color: #10251f;
        overflow: hidden;
    }

    .affiliate-home-hero-bg {
        position: absolute;
        inset: 0;
        background:
            linear-gradient(
                90deg,
                rgba(5, 30, 25, 0.94) 0%,
                rgba(5, 45, 35, 0.82) 44%,
                rgba(5, 45, 35, 0.56) 72%,
                rgba(5, 45, 35, 0.42) 100%
            ),
            url("{% static 'expat_life/images/affiliates_hero.webp' %}") center center / cover no-repeat;
        transform: scale(1.02);
        z-index: 0;
    }

    .affiliate-home-hero-content {
        position: relative;
        z-index: 2;
        padding-top: 95px;
        padding-bottom: 95px;
    }

    .affiliate-hero-badge {
        background: rgba(255, 193, 7, 0.18);
        color: #ffc107;
        border: 1px solid rgba(255, 193, 7, 0.35);
        padding: 8px 16px;
        border-radius: 50px;
        font-weight: 800;
        font-size: 0.85rem;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .affiliate-hero-point {
        background: rgba(255, 255, 255, 0.11);
        border: 1px solid rgba(255, 255, 255, 0.16);
        border-radius: 16px;
        padding: 14px 16px;
        color: #fff;
        height: 100%;
        display: flex;
        align-items: center;
        gap: 10px;
        backdrop-filter: blur(8px);
    }

    .affiliate-hero-point i {
        color: #ffc107;
        font-size: 1.25rem;
    }

    .affiliate-side-card {
        border-radius: 30px;
        background: #fff;
        overflow: hidden;
    }

    .affiliate-side-card-header {
        background: linear-gradient(135deg, #0f766e 0%, #064e3b 100%);
        color: #fff;
        padding: 30px;
    }

    .affiliate-side-card-body {
        padding: 30px;
    }

    .affiliate-mini-row {
        display: flex;
        gap: 14px;
        padding-bottom: 18px;
        margin-bottom: 18px;
        border-bottom: 1px solid #edf0f2;
    }

    .affiliate-mini-row:last-child {
        border-bottom: 0;
        margin-bottom: 0;
        padding-bottom: 0;
    }

    .affiliate-mini-icon {
        width: 46px;
        height: 46px;
        min-width: 46px;
        border-radius: 15px;
        background: #ecfdf5;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #047857;
        font-size: 1.25rem;
    }

    .affiliate-stat-box {
        background: #fff;
        border-radius: 20px;
        padding: 24px;
        box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
        height: 100%;
    }

    .affiliate-stat-box h3 {
        color: #047857;
        font-weight: 900;
        margin-bottom: 6px;
    }

    .affiliate-feature-card {
        background: #fff;
        border-radius: 24px;
        padding: 30px;
        height: 100%;
        box-shadow: 0 14px 34px rgba(15, 23, 42, 0.07);
        transition: 0.25s ease;
    }

    .affiliate-feature-card:hover {
        transform: translateY(-5px);
    }

    .affiliate-feature-icon {
        width: 60px;
        height: 60px;
        border-radius: 20px;
        background: #ecfdf5;
        color: #047857;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.7rem;
        margin-bottom: 18px;
    }

    .affiliate-gradient-section {
        background: linear-gradient(135deg, #052e25 0%, #0f766e 100%);
    }

    .affiliate-light-card {
        background: #fff;
        border-radius: 26px;
        padding: 34px;
        box-shadow: 0 20px 45px rgba(0, 0, 0, 0.18);
    }

    .affiliate-type-box {
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 16px;
        padding: 16px;
        color: #fff;
        height: 100%;
    }

    .affiliate-type-box i {
        color: #ffc107;
        font-size: 1.4rem;
        margin-right: 8px;
    }

    .affiliate-process-card {
        background: #fff;
        border-radius: 24px;
        padding: 32px;
        height: 100%;
        box-shadow: 0 14px 34px rgba(15, 23, 42, 0.07);
    }

    .affiliate-process-number {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: #047857;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 900;
        margin: 0 auto 18px;
    }

    .earning-table-card {
        background: #fff;
        border-radius: 28px;
        padding: 28px;
        box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
    }

    .earning-highlight {
        background: #ecfdf5;
        border: 1px solid #bbf7d0;
        border-radius: 18px;
        padding: 18px;
    }

    .earning-highlight h4 {
        color: #047857;
        font-weight: 900;
    }

    .final-affiliate-cta {
        background: linear-gradient(135deg, #052e25 0%, #0f766e 100%);
        border-radius: 30px;
        padding: 56px 34px;
    }

    .affiliate-quote-card {
        background: #fff;
        border-left: 5px solid #0f766e;
        border-radius: 22px;
        padding: 30px;
        box-shadow: 0 14px 34px rgba(15, 23, 42, 0.07);
    }

    .table thead th {
        font-size: 0.82rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: #64748b;
        white-space: nowrap;
    }

    .table td {
        vertical-align: middle;
    }

    @media (max-width: 767px) {
        .affiliate-home-hero {
            min-height: auto;
        }

        .affiliate-home-hero-content {
            padding-top: 70px;
            padding-bottom: 70px;
        }

        .affiliate-side-card-body,
        .affiliate-light-card,
        .earning-table-card {
            padding: 22px;
        }
    }

    .affiliate-hero-language-strip {
        display: inline-flex;
        flex-direction: column;
        gap: 0.55rem;
        padding: 0.75rem 0.85rem;
        border-radius: 20px;
        background: rgba(255, 255, 255, 0.10);
        border: 1px solid rgba(255, 255, 255, 0.18);
        backdrop-filter: blur(10px);
        max-width: 100%;
    }

    .affiliate-hero-language-title {
        color: #ffd36b;
        font-size: 0.78rem;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        line-height: 1.2;
    }

    .affiliate-hero-language-buttons {
        display: flex;
        align-items: center;
        gap: 0.45rem;
        flex-wrap: wrap;
    }

    .affiliate-hero-language-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        text-decoration: none;
        transition: all 0.22s ease;
        line-height: 1;
    }

    .affiliate-hero-language-btn img {
        width: 112px;
        max-width: 100%;
        height: auto;
        display: block;
    }

    .affiliate-hero-language-btn:hover {
        transform: translateY(-2px) scale(1.03);
        filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.28));
    }

    @media (max-width: 767.98px) {
        .affiliate-hero-language-strip {
            width: 100%;
        }

        .affiliate-hero-language-buttons {
            justify-content: flex-start;
        }

        .affiliate-hero-language-btn img {
            width: 96px;
        }
    }

    @media (max-width: 420px) {
        .affiliate-hero-language-btn img {
            width: 88px;
        }
    }
    

    /* =========================================================
       FLOATING MULTILINGUAL INFORMATION CENTER - HORIZONTAL
    ========================================================= */

    .affiliate-floating-language-bar {
        position: fixed;
        top: 128px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1080;

        display: flex;
        align-items: center;
        gap: 0.75rem;

        width: auto;
        max-width: calc(100% - 2rem);

        padding: 0.45rem 0.75rem;
        border-radius: 999px;

        background: rgba(255, 193, 7, 0.14);
        color: #ffc107;
        border: 1px solid rgba(255, 193, 7, 0.32);
        box-shadow: 0 14px 34px rgba(120, 80, 10, 0.16);
        backdrop-filter: blur(14px);
    }

    .affiliate-floating-language-title {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        color: #ffc107;
        font-size: 0.72rem;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 0.045em;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .affiliate-floating-language-buttons {
        display: flex;
        align-items: center;
        gap: 0.45rem;
        flex-wrap: nowrap;
    }

    .affiliate-floating-language-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        border-radius: 999px;
        line-height: 1;
        transition: all 0.22s ease;
    }

    .affiliate-floating-language-btn img {
        width: 128px;
        height: auto;
        display: block;
    }

    .affiliate-floating-language-btn:hover {
        transform: translateY(-2px) scale(1.03);
        filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.30));
    }

    @media (max-width: 991.98px) {
        .affiliate-floating-language-bar {
            top: 118px;
            padding: 0.4rem 0.6rem;
            gap: 0.55rem;
        }

        .affiliate-floating-language-btn img {
            width: 108px;
        }

        .affiliate-floating-language-title {
            font-size: 0.65rem;
        }
    }

    @media (max-width: 767.98px) {
        .affiliate-floating-language-bar {
            top: 112px;
            max-width: calc(100% - 1rem);
            padding: 0.38rem 0.5rem;
            gap: 0.45rem;
        }

        .affiliate-floating-language-title span {
            display: none;
        }

        .affiliate-floating-language-btn img {
            width: 88px;
        }
    }

    @media (max-width: 420px) {
        .affiliate-floating-language-btn img {
            width: 76px;
        }

        .affiliate-floating-language-buttons {
            gap: 0.28rem;
        }
    }


</style>

<!-- =====================================================
     FLOATING MULTILINGUAL INFORMATION CENTER - HORIZONTAL
====================================================== -->
<div class="affiliate-floating-language-bar">
    <div class="affiliate-floating-language-title">
        <i class="bi bi-translate"></i>
        <span>Info Center</span>
    </div>

    <div class="affiliate-floating-language-buttons">
        <a href="{% url 'affiliates_app:affiliate_information_center' %}?lang=si"
           class="affiliate-floating-language-btn"
           aria-label="Open Sinhala Information Center">
            <img src="{% static 'expat_life/images/sinhala.png' %}"
                 alt="Sinhala">
        </a>

        <a href="{% url 'affiliates_app:affiliate_information_center' %}?lang=ta"
           class="affiliate-floating-language-btn"
           aria-label="Open Tamil Information Center">
            <img src="{% static 'expat_life/images/tamil.png' %}"
                 alt="Tamil">
        </a>

        <a href="{% url 'affiliates_app:affiliate_information_center' %}?lang=en"
           class="affiliate-floating-language-btn"
           aria-label="Open English Information Center">
            <img src="{% static 'expat_life/images/english.png' %}"
                 alt="English">
        </a>
    </div>
</div>
<!-- HERO -->
<section class="affiliate-home-hero">
    <div class="affiliate-home-hero-bg"></div>

    <div class="container affiliate-home-hero-content">
        <div class="row align-items-center g-5">
            <div class="col-lg-7 text-white">
                <span class="affiliate-hero-badge d-inline-block mb-3">
                    Global Affiliate Partner Program
                </span>
 
                <h1 class="display-4 fw-bold mb-4">
                    Earn by Introducing the Sri Lanka Lifestyle Opportunity to the World
                </h1>

                <p class="lead mb-4">
                    Join Ensolanka as an Affiliate Partner and introduce international guests to a beautiful,
                    affordable, healthy, and experience-rich life in Sri Lanka.
                </p>

                <p class="mb-4">
                    Sri Lanka is more than a travel destination. It is a tropical lifestyle opportunity with nature,
                    culture, friendly people, beaches, mountains, wildlife, heritage, and a cost of living that can feel
                    surprisingly comfortable for people from the USA, Europe, UK, Australia, the Middle East, and many other countries.
                </p>

                <div class="d-flex flex-wrap gap-3 mb-4">
                    {% if affiliate_profile %}
                        <a href="{% url 'affiliates_app:affiliate_dashboard' %}" class="btn btn-warning btn-lg px-4">
                            Go to My Affiliate Dashboard
                        </a>
                    {% else %}
                        <a href="{% url 'affiliates_app:affiliate_register' %}" class="btn btn-warning btn-lg px-4">
                            Become an Affiliate Partner
                        </a>
                    {% endif %}

                    <a href="#affiliate-earnings" class="btn btn-outline-light btn-lg px-4">
                        See Earning Potential
                    </a>
                </div>

                <div class="row g-3 mt-2">
                    <div class="col-sm-6">
                        <div class="affiliate-hero-point">
                            <i class="bi bi-cash-coin"></i>
                            <span>Earn from qualified guest referrals</span>
                        </div>
                    </div>

                    <div class="col-sm-6">
                        <div class="affiliate-hero-point">
                            <i class="bi bi-qr-code"></i>
                            <span>Use affiliate links, QR cards, and marketing materials</span>
                        </div>
                    </div>

                    <div class="col-sm-6">
                        <div class="affiliate-hero-point">
                            <i class="bi bi-globe-americas"></i>
                            <span>Promote Sri Lanka to people around the world</span>
                        </div>
                    </div>

                    <div class="col-sm-6">
                        <div class="affiliate-hero-point">
                            <i class="bi bi-wallet2"></i>
                            <span>Track referrals, earnings, and payout requests</span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-5">
                <div class="affiliate-side-card shadow-lg">
                    <div class="affiliate-side-card-header">
                        <h4 class="fw-bold mb-2">Who Can Join?</h4>
                        <p class="mb-0">
                            Anyone who can proudly introduce Sri Lanka to suitable international guests.
                        </p>
                    </div>

                    <div class="affiliate-side-card-body">
                        <div class="affiliate-mini-row">
                            <div class="affiliate-mini-icon">
                                <i class="bi bi-mortarboard-fill"></i>
                            </div>
                            <div>
                                <h6 class="fw-bold mb-1">University Students</h6>
                                <p class="text-muted small mb-0">
                                    Build a real income opportunity by sharing Sri Lanka with international communities.
                                </p>
                            </div>
                        </div>

                        <div class="affiliate-mini-row">
                            <div class="affiliate-mini-icon">
                                <i class="bi bi-airplane-fill"></i>
                            </div>
                            <div>
                                <h6 class="fw-bold mb-1">Sri Lankans Overseas</h6>
                                <p class="text-muted small mb-0">
                                    Introduce your motherland to friends, colleagues, clients, and communities abroad.
                                </p>
                            </div>
                        </div>

                        <div class="affiliate-mini-row">
                            <div class="affiliate-mini-icon">
                                <i class="bi bi-people-fill"></i>
                            </div>
                            <div>
                                <h6 class="fw-bold mb-1">Content Creators & Community Leaders</h6>
                                <p class="text-muted small mb-0">
                                    Use your audience to promote a meaningful lifestyle and relocation opportunity.
                                </p>
                            </div>
                        </div>

                        <div class="affiliate-mini-row">
                            <div class="affiliate-mini-icon">
                                <i class="bi bi-briefcase-fill"></i>
                            </div>
                            <div>
                                <h6 class="fw-bold mb-1">Travel, Property & Service Connectors</h6>
                                <p class="text-muted small mb-0">
                                    Refer genuine guests and earn while helping them discover Sri Lanka safely.
                                </p>
                            </div>
                        </div>

                        <div class="mt-4 d-grid">
                            {% if affiliate_profile %}
                                <a href="{% url 'affiliates_app:affiliate_dashboard' %}" class="btn btn-dark btn-lg">
                                    Open Affiliate Dashboard
                                </a>
                            {% else %}
                                <a href="{% url 'affiliates_app:affiliate_register' %}" class="btn btn-dark btn-lg">
                                    Start as Affiliate Partner
                                </a>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>


<!-- STATS -->
<section class="py-4 bg-light">
    <div class="container">
        <div class="row g-3">
            <div class="col-6 col-lg-3">
                <div class="affiliate-stat-box text-center">
                    <h3>{{ total_affiliates }}</h3>
                    <p class="mb-0 text-muted">Approved Affiliates</p>
                </div>
            </div>

            <div class="col-6 col-lg-3">
                <div class="affiliate-stat-box text-center">
                    <h3>{{ total_referrals }}</h3>
                    <p class="mb-0 text-muted">Guest Referrals</p>
                </div>
            </div>

            <div class="col-6 col-lg-3">
                <div class="affiliate-stat-box text-center">
                    <h3>${{ total_payouts }}</h3>
                    <p class="mb-0 text-muted">Total Paid Out</p>
                </div>
            </div>

            <div class="col-6 col-lg-3">
                <div class="affiliate-stat-box text-center">
                    <h3>{{ default_affiliate_percentage }}%</h3>
                    <p class="mb-0 text-muted">Current Commission Rate</p>
                </div>
            </div>
        </div>
    </div>
</section>


<!-- WHY AFFILIATE -->
<section class="py-5 bg-white">
    <div class="container">
        <div class="section-heading text-center mb-5">
            <span class="section-mini-title">Why This Opportunity?</span>
            <h2 class="fw-bold">Promote Paradise. Help Guests. Earn Honestly.</h2>
            <p class="text-muted">
                Many foreigners are searching for affordable, peaceful, healthy, and meaningful living options.
                Sri Lanka can offer a lifestyle that feels rich in experience without requiring the same budget
                needed in many Western countries.
            </p>
        </div>

        <div class="row g-4">
            <div class="col-md-6 col-lg-3">
                <div class="affiliate-feature-card">
                    <div class="affiliate-feature-icon">
                        <i class="bi bi-tree-fill"></i>
                    </div>
                    <h5 class="fw-bold">Sell the Lifestyle</h5>
                    <p class="text-muted mb-0">
                        Introduce nature, beaches, mountains, culture, food, wellness, and a slower peaceful lifestyle.
                    </p>
                </div>
            </div>

            <div class="col-md-6 col-lg-3">
                <div class="affiliate-feature-card">
                    <div class="affiliate-feature-icon">
                        <i class="bi bi-piggy-bank-fill"></i>
                    </div>
                    <h5 class="fw-bold">Show the Cost Advantage</h5>
                    <p class="text-muted mb-0">
                        Help foreigners understand how a normal overseas budget can create a better daily life in Sri Lanka.
                    </p>
                </div>
            </div>

            <div class="col-md-6 col-lg-3">
                <div class="affiliate-feature-card">
                    <div class="affiliate-feature-icon">
                        <i class="bi bi-megaphone-fill"></i>
                    </div>
                    <h5 class="fw-bold">Use Ready Materials</h5>
                    <p class="text-muted mb-0">
                        Download marketing PDFs, videos, QR cards, and business card designs from your affiliate dashboard.
                    </p>
                </div>
            </div>

            <div class="col-md-6 col-lg-3">
                <div class="affiliate-feature-card">
                    <div class="affiliate-feature-icon">
                        <i class="bi bi-graph-up-arrow"></i>
                    </div>
                    <h5 class="fw-bold">Track Your Earnings</h5>
                    <p class="text-muted mb-0">
                        See referred guests, pending clients, completed clients, possible future earnings, and payout history.
                    </p>
                </div>
            </div>
        </div>
    </div>
</section>


<!-- STORY / POSITIONING -->
<section class="py-5 affiliate-gradient-section text-white">
    <div class="container">
        <div class="row align-items-center g-5">
            <div class="col-lg-6">
                <span class="section-mini-title section-mini-title-light">Sri Lanka Lifestyle Message</span>
                <h2 class="fw-bold mb-3">
                    Some People Visit Sri Lanka. Some People Understand Its Real Value.
                </h2>

                <p class="mb-4">
                    Sri Lanka has attracted global thinkers, writers, travellers, professionals, retirees,
                    digital workers, and investors for many years. It is a country where people can live close
                    to nature, enjoy cultural richness, and experience a lifestyle that feels both peaceful and inspiring.
                </p>

                <p class="mb-4">
                    Your role as an affiliate is simple: introduce this opportunity to the right people.
                    Talk about Sri Lanka with pride. Share your link. Use your QR card. Help people discover a better way to live.
                </p>

                <div class="row g-3">
                    <div class="col-sm-6">
                        <div class="affiliate-type-box">
                            <i class="bi bi-sun-fill"></i>
                            Tropical Lifestyle
                        </div>
                    </div>

                    <div class="col-sm-6">
                        <div class="affiliate-type-box">
                            <i class="bi bi-heart-fill"></i>
                            Friendly People
                        </div>
                    </div>

                    <div class="col-sm-6">
                        <div class="affiliate-type-box">
                            <i class="bi bi-compass-fill"></i>
                            Endless Exploration
                        </div>
                    </div>

                    <div class="col-sm-6">
                        <div class="affiliate-type-box">
                            <i class="bi bi-house-heart-fill"></i>
                            Comfortable Living
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-6">
                <div class="affiliate-light-card text-dark">
                    <h4 class="fw-bold mb-3">What You Can Tell Foreigners</h4>

                    <ul class="list-unstyled mb-4">
                        <li class="mb-3">
                            <i class="bi bi-check-circle-fill text-success me-2"></i>
                            Sri Lanka can offer a beautiful lifestyle with beaches, mountains, nature, and culture.
                        </li>

                        <li class="mb-3">
                            <i class="bi bi-check-circle-fill text-success me-2"></i>
                            Many foreigners can live more comfortably here compared to expensive cities overseas.
                        </li>

                        <li class="mb-3">
                            <i class="bi bi-check-circle-fill text-success me-2"></i>
                            Ensolanka helps guests explore packages, rentals, furniture, services, and local support.
                        </li>

                        <li class="mb-3">
                            <i class="bi bi-check-circle-fill text-success me-2"></i>
                            Guests can start with a guided process instead of trying to arrange everything alone.
                        </li>

                        <li class="mb-0">
                            <i class="bi bi-check-circle-fill text-success me-2"></i>
                            You earn when your referred guests become qualified paying clients.
                        </li>
                    </ul>

                    {% if affiliate_profile %}
                        <a href="{% url 'affiliates_app:affiliate_dashboard' %}" class="btn btn-primary btn-lg w-100">
                            Go to My Affiliate Dashboard
                        </a>
                    {% else %}
                        <a href="{% url 'affiliates_app:affiliate_register' %}" class="btn btn-primary btn-lg w-100">
                            Join the Affiliate Program
                        </a>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</section>


<!-- HOW IT WORKS -->
<section class="py-5 bg-light">
    <div class="container">
        <div class="section-heading text-center mb-5">
            <span class="section-mini-title">Simple Process</span>
            <h2 class="fw-bold">How the Affiliate Program Works</h2>
            <p class="text-muted">
                A simple referral system designed to help you promote, track, and earn.
            </p>
        </div>

        <div class="row g-4">
            <div class="col-md-3">
                <div class="affiliate-process-card text-center">
                    <div class="affiliate-process-number">01</div>
                    <h5 class="fw-bold">Apply as Affiliate</h5>
                    <p class="text-muted mb-0">
                        Register as an affiliate partner and wait for approval from the platform team.
                    </p>
                </div>
            </div>

            <div class="col-md-3">
                <div class="affiliate-process-card text-center">
                    <div class="affiliate-process-number">02</div>
                    <h5 class="fw-bold">Get Your Link & QR Code</h5>
                    <p class="text-muted mb-0">
                        Receive your unique affiliate link, QR code, and business card designs.
                    </p>
                </div>
            </div>

            <div class="col-md-3">
                <div class="affiliate-process-card text-center">
                    <div class="affiliate-process-number">03</div>
                    <h5 class="fw-bold">Refer Guests</h5>
                    <p class="text-muted mb-0">
                        Share Sri Lanka lifestyle packages with foreigners through online and offline channels.
                    </p>
                </div>
            </div>

            <div class="col-md-3">
                <div class="affiliate-process-card text-center">
                    <div class="affiliate-process-number">04</div>
                    <h5 class="fw-bold">Earn & Request Payout</h5>
                    <p class="text-muted mb-0">
                        Track signups, commissions, pending earnings, completed clients, and payout requests.
                    </p>
                </div>
            </div>
        </div>
    </div>
</section>


<!-- EARNING POTENTIAL -->
<section class="py-5 bg-white" id="affiliate-earnings">
    <div class="container">
        <div class="section-heading text-center mb-5">
            <span class="section-mini-title">Affiliate Income Potential</span>
            <h2 class="fw-bold">How Much Can an Affiliate Earn?</h2>
            <p class="text-muted">
                Affiliate commission is calculated from the guest confirmation fee and the one-time service fee.
                The current affiliate commission rate is <strong>{{ default_affiliate_percentage }}%</strong>.
            </p>
        </div>

        <div class="earning-table-card">
            <div class="row g-4 mb-4">
                <div class="col-lg-4">
                    <div class="earning-highlight h-100">
                        <span class="text-muted small">Current Commission Rate</span>
                        <h4 class="mb-2">{{ default_affiliate_percentage }}%</h4>
                        <p class="mb-0 text-muted">
                            This value is controlled by Platform Fee Settings and can be changed by admin.
                        </p>
                    </div>
                </div>

                <div class="col-lg-4">
                    <div class="earning-highlight h-100">
                        <span class="text-muted small">Income Example</span>
                        <h4 class="mb-2">5 Guests / Month</h4>
                        <p class="mb-0 text-muted">
                            Even a small number of successful referrals can create meaningful monthly income.
                        </p>
                    </div>
                </div>

                <div class="col-lg-4">
                    <div class="earning-highlight h-100">
                        <span class="text-muted small">Best Use Case</span>
                        <h4 class="mb-2">Online + Offline Sharing</h4>
                        <p class="mb-0 text-muted">
                            Share your link online and use QR business cards for direct introductions.
                        </p>
                    </div>
                </div>
            </div>

            <div class="table-responsive">
                <table class="table align-middle">
                    <thead>
                        <tr>
                            <th>Package</th>
                            <th>Monthly Package</th>
                            <th>Confirmation Fee</th>
                            <th>Confirmation Commission</th>
                            <th>Service Fee</th>
                            <th>Service Commission</th>
                            <th>Total / Guest</th>
                            <th>5 Guests / Month</th>
                            <th>10 Guests / Month</th>
                        </tr>
                    </thead>

                    <tbody>
                        {% for row in earning_rows %}
                            <tr>
                                <td>
                                    <strong>{{ row.package.name }}</strong><br>
                                    <small class="text-muted">{{ row.package.get_level_display }}</small>
                                </td>

                                <td>
                                    ${{ row.package.monthly_price_usd }}
                                </td>

                                <td>
                                    ${{ row.confirmation_fee }}
                                </td>

                                <td>
                                    <strong>${{ row.confirmation_affiliate_fee }}</strong>
                                </td>

                                <td>
                                    ${{ row.service_fee_amount }}<br>
                                    <small class="text-muted">{{ row.service_fee_percentage }}% of package</small>
                                </td>

                                <td>
                                    <strong>${{ row.service_affiliate_fee }}</strong>
                                </td>

                                <td>
                                    <span class="badge bg-success fs-6">
                                        ${{ row.total_affiliate_fee_per_guest }}
                                    </span>
                                </td>

                                <td>
                                    <strong>${{ row.estimated_5_guests_income }}</strong>
                                </td>

                                <td>
                                    <strong>${{ row.estimated_10_guests_income }}</strong>
                                </td>
                            </tr>
                        {% empty %}
                            <tr>
                                <td colspan="9" class="text-center text-muted py-4">
                                    Package earning details are not available yet.
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>

            <div class="alert alert-warning rounded-4 border-0 mt-4 mb-0">
                <strong>Important:</strong>
                These are estimated earning examples. Actual commission depends on approved referrals,
                completed guest payments, package selection, current platform settings, and payout approval.
            </div>
        </div>
    </div>
</section>


<!-- MARKETING TOOLS -->
<section class="py-5 bg-light">
    <div class="container">
        <div class="row align-items-center g-5">
            <div class="col-lg-6">
                <span class="section-mini-title">Marketing Tools</span>
                <h2 class="fw-bold mb-3">You Will Not Promote Alone</h2>

                <p class="text-muted">
                    Affiliates can use ready-made materials to explain the opportunity more professionally.
                    This makes it easier to promote Sri Lanka lifestyle packages online, offline, and inside personal networks.
                </p>

                <div class="bg-white rounded-4 p-4 shadow-sm mt-4">
                    <div class="d-flex mb-3">
                        <i class="bi bi-file-earmark-pdf-fill text-danger fs-4 me-3"></i>
                        <div>
                            <strong>Marketing PDFs</strong>
                            <p class="text-muted mb-0 small">
                                Download PDF brochures in different languages and send them to interested guests.
                            </p>
                        </div>
                    </div>

                    <div class="d-flex mb-3">
                        <i class="bi bi-play-circle-fill text-primary fs-4 me-3"></i>
                        <div>
                            <strong>Promotional Videos</strong>
                            <p class="text-muted mb-0 small">
                                Share short videos explaining Sri Lanka lifestyle opportunities and guest packages.
                            </p>
                        </div>
                    </div>

                    <div class="d-flex mb-3">
                        <i class="bi bi-person-vcard-fill text-success fs-4 me-3"></i>
                        <div>
                            <strong>Business Card Designs</strong>
                            <p class="text-muted mb-0 small">
                                Download affiliate business cards with your name, contact details, and QR code.
                            </p>
                        </div>
                    </div>

                    <div class="d-flex">
                        <i class="bi bi-qr-code-scan text-dark fs-4 me-3"></i>
                        <div>
                            <strong>QR Code Tracking</strong>
                            <p class="text-muted mb-0 small">
                                Let people scan your QR code and visit the portal through your affiliate link.
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-6">
                <div class="affiliate-quote-card">
                    <h3 class="fw-bold mb-3">
                        Turn Every Conversation About Sri Lanka into a Possible Income Opportunity.
                    </h3>

                    <p class="text-muted">
                        You may meet foreigners online, at work, at university, while travelling, through your community,
                        or through social media. If they are interested in Sri Lanka, your affiliate link gives them a clear
                        path to explore the opportunity while giving you a fair earning chance.
                    </p>

                    <ul class="list-unstyled mb-4">
                        <li class="mb-2">
                            <i class="bi bi-check-circle-fill text-success me-2"></i>
                            Share on WhatsApp, Facebook, LinkedIn, TikTok, YouTube, email, or direct conversation.
                        </li>
                        <li class="mb-2">
                            <i class="bi bi-check-circle-fill text-success me-2"></i>
                            Print QR business cards and distribute them to interested contacts.
                        </li>
                        <li class="mb-2">
                            <i class="bi bi-check-circle-fill text-success me-2"></i>
                            Follow up with referred guests using dashboard contact visibility.
                        </li>
                        <li>
                            <i class="bi bi-check-circle-fill text-success me-2"></i>
                            Track possible earnings according to selected guest package.
                        </li>
                    </ul>

                    {% if affiliate_profile %}
                        <a href="{% url 'affiliates_app:affiliate_dashboard' %}" class="btn btn-dark btn-lg">
                            Open My Affiliate Tools
                        </a>
                    {% else %}
                        <a href="{% url 'affiliates_app:affiliate_register' %}" class="btn btn-primary btn-lg">
                            Apply for Affiliate Access
                        </a>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</section>


<!-- FAQ -->
<section class="py-5 bg-white">
    <div class="container">
        <div class="section-heading text-center mb-5">
            <span class="section-mini-title">Questions</span>
            <h2 class="fw-bold">Frequently Asked Questions for Affiliates</h2>
        </div>

        <div class="accordion custom-accordion" id="affiliateFaqAccordion">
            <div class="accordion-item">
                <h2 class="accordion-header" id="affiliateFaqOne">
                    <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#affiliateCollapseOne">
                        Who can become an affiliate partner?
                    </button>
                </h2>
                <div id="affiliateCollapseOne" class="accordion-collapse collapse show" data-bs-parent="#affiliateFaqAccordion">
                    <div class="accordion-body">
                        University students, Sri Lankans living overseas, content creators, community leaders,
                        travel connectors, property contacts, and anyone who can genuinely introduce this portal
                        to suitable international guests can apply.
                    </div>
                </div>
            </div>

            <div class="accordion-item">
                <h2 class="accordion-header" id="affiliateFaqTwo">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#affiliateCollapseTwo">
                        How does the affiliate tracking work?
                    </button>
                </h2>
                <div id="affiliateCollapseTwo" class="accordion-collapse collapse" data-bs-parent="#affiliateFaqAccordion">
                    <div class="accordion-body">
                        Each approved affiliate receives a unique affiliate link and QR code. When a guest visits
                        the website through that link and signs up, the guest is connected to the affiliate account.
                    </div>
                </div>
            </div>

            <div class="accordion-item">
                <h2 class="accordion-header" id="affiliateFaqThree">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#affiliateCollapseThree">
                        When does an affiliate earn commission?
                    </button>
                </h2>
                <div id="affiliateCollapseThree" class="accordion-collapse collapse" data-bs-parent="#affiliateFaqAccordion">
                    <div class="accordion-body">
                        Commission is earned when a referred guest completes eligible payments such as the confirmation fee
                        and the one-time service fee. Signup alone creates a referral, but payment completion creates actual commission.
                    </div>
                </div>
            </div>

            <div class="accordion-item">
                <h2 class="accordion-header" id="affiliateFaqFour">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#affiliateCollapseFour">
                        Can affiliates see referred guest details?
                    </button>
                </h2>
                <div id="affiliateCollapseFour" class="accordion-collapse collapse" data-bs-parent="#affiliateFaqAccordion">
                    <div class="accordion-body">
                        Yes. The affiliate dashboard can show signed-up clients, contact details, selected package,
                        possible future earnings, pending clients, completed clients, and commission status.
                    </div>
                </div>
            </div>

            <div class="accordion-item">
                <h2 class="accordion-header" id="affiliateFaqFive">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#affiliateCollapseFive">
                        Is the income guaranteed?
                    </button>
                </h2>
                <div id="affiliateCollapseFive" class="accordion-collapse collapse" data-bs-parent="#affiliateFaqAccordion">
                    <div class="accordion-body">
                        No. Affiliate income is not guaranteed. It depends on the quality of referrals, guest signup,
                        guest package selection, completed payments, platform approval, and payout processing.
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>


<!-- FINAL CTA -->
<section class="py-5 bg-light">
    <div class="container">
        <div class="final-affiliate-cta text-center text-white">
            <h2 class="fw-bold mb-3">Ready to Promote Sri Lanka and Earn?</h2>
            <p class="lead mb-4">
                Become an Ensolanka Affiliate Partner, introduce international guests to the Sri Lanka lifestyle opportunity,
                and build a referral income stream with transparent tracking.
            </p>

            <div class="d-flex flex-wrap justify-content-center gap-3">
                {% if affiliate_profile %}
                    <a href="{% url 'affiliates_app:affiliate_dashboard' %}" class="btn btn-warning btn-lg px-4">
                        Go to My Affiliate Dashboard
                    </a>
                {% else %}
                    <a href="{% url 'affiliates_app:affiliate_register' %}" class="btn btn-warning btn-lg px-4">
                        Become an Affiliate Partner
                    </a>
                {% endif %}

                <a href="#affiliate-earnings" class="btn btn-outline-light btn-lg px-4">
                    View Earning Examples
                </a>
            </div>
        </div>
    </div>
</section>

{% endblock %}