@extends('layouts.frontend.app')

@section('title', 'Partner With Us - Pay9')

@section('content')
<section class="partner-hero-section page-fade">
    <div class="container-fluid px-5">
        <div class="content-left text-start">
            <h1 class="hero-title mb-4" style="font-size: 2.4rem;">Partner With Us</h1>

            <p class="hero-description">
                <span class="brand-highlight">UPAY</span> welcomes you to join our growing network of retailers and distributors
                who are transforming digital and financial services across India. By partnering with us, you not only expand
                your business opportunities but also empower your community with essential services like recharge, DTH, bill payment,
                QR collection, money transfer, and AEPS.
            </p>

            <div class="row mt-5 g-4">
                <div class="col-md-4">
                    <div class="role-card">
                        <i class="bi bi-shop"></i>
                        <h4 class="mt-3 mb-0">Retailer</h4>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="role-card">
                        <i class="bi bi-people-fill"></i>
                        <h4 class="mt-3 mb-0">Distributor</h4>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="role-card">
                        <i class="bi bi-diagram-3-fill"></i>
                        <h4 class="mt-3 mb-0">Super Distributor</h4>
                    </div>
                </div>
            </div>

            <div class="mt-5 text-start">
                <a href="#" class="btn-download-now">Download Now</a>
            </div>
        </div>
    </div>
</section>

<!-- Partnership Benefits -->
<div class="container-fluid px-5 mt-5 page-fade">
    <div class="benefits-full-box d-flex align-items-center flex-wrap position-relative">
        <div class="title-box me-4 position-relative" style="font-size: 32px;">
            <strong class="title">Partnership</strong><br>
            <strong class="title" style="color: #eb7f1a;">Benefits</strong>
        </div>

        <img src="{{ asset('images/v line.png') }}" alt="Divider" class="vertical-line-img category-divider" style="height: 100px; margin: 0 20px;">

        <div class="partnership-inline-box">
            <span class="benefit">Customer Care<br>Support</span>
            <span class="benefit">Easy Onboarding<br>System</span>
            <span class="benefit">Earn on every<br>Transaction</span>
            <span class="benefit">Very Low<br>Investment</span>
        </div>
    </div>
</div>

<!-- Categories Covered -->
<div class="container-fluid px-5 mt-5 page-fade">
    <div class="categories-box d-flex flex-wrap justify-content-between p-4 position-relative">
        <div class="category-column">
            <div class="category-item">Kirana Shop</div>
            <div class="category-item">Restaurant</div>
            <div class="category-item">Medical Shop</div>
            <div class="category-item">Fertilizer Shop</div>
            <div class="category-item">Apparel Shop</div>
        </div>

        <div class="category-column">
            <div class="category-item">Tailoring Shop</div>
            <div class="category-item">Mobile Recharge Centre</div>
            <div class="category-item">Insurance Agency</div>
            <div class="category-item">Hardware Store</div>
            <div class="category-item">Travel Agency</div>
        </div>

        <div class="category-column">
            <div class="category-item">Telecom</div>
            <div class="category-item">Pharma</div>
            <div class="category-item">Retail</div>
            <div class="category-item">FMCG and many more</div>
        </div>

        <img src="{{ asset('images/v line.png') }}" alt="Divider" class="vertical-line-img category-divider" style="height: 200px; margin: 0 20px;">

        <div class="category-column category-title-column">
            <div class="category-title" style="font-size: 32px; ">
                <strong style="color: #eb7f1a;">Categories</strong><br>We<br>Covering
            </div>
        </div>
    </div>
</div>

<style>
/* Page Fade Animation */
.page-fade {
    opacity: 0;
    animation: pageFadeIn 1s forwards;
}

@keyframes pageFadeIn { to { opacity: 1; } }

/* ================================
   Partner Hero Section
===================================*/
.partner-hero-section {
    color: #eb7f1a;
    padding: 80px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: #f8faff; /* Light, clean background for contrast */
}

.partner-hero-section .container-fluid {
    max-width: 1200px;
    margin: 0 auto;
}

/* Hero Title */
.hero-title {
    font-size: 3.8rem;
    font-weight: 800;
    color: #eb7f1a;
    margin-bottom: 25px;
    line-height: 1.2;
}

/* Hero Description */
.hero-description {
    font-size: 20px;
    font-weight: 400;
    line-height: 1.7;
    color: #333;
    max-width: 900px;
    margin-bottom: 30px;
}

/* Brand Highlight */
.brand-highlight {
    color: #eb7f1a;
    font-weight: 700;
}

/* Responsive Design */
@media (max-width: 992px) {
    .hero-title {
        font-size: 42px;
    }

    .hero-description {
        font-size: 18px;
    }
}

@media (max-width: 768px) {
    .partner-hero-section {
        padding: 60px 15px;
        text-align: center;
    }

    .hero-title {
        font-size: 56px;
    }

    .hero-description {
        font-size: 18px;
    }
}

/* Role Cards */
.role-card {
    background-color: #fff;
    border: 1px solid #d6e9f8;
    border-radius: 12px;
    padding: 30px 20px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeUp 0.6s forwards;
}

.role-card:nth-child(1) { animation-delay: 0.2s; }
.role-card:nth-child(2) { animation-delay: 0.4s; }
.role-card:nth-child(3) { animation-delay: 0.6s; }

.role-card i { font-size: 70px; color: #eb7f1a; }
.role-card h6 { color: #eb7f1a; font-weight: 600; }

.role-card:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

/* Download Button */
.btn-download-now {
    background-color: #eb7f1a;
    color: #fff;
    font-weight: 600;
    font-size: 20px;
    padding: 12px 30px;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-block;
}
.btn-download-now:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

/* Partnership Benefits */
.benefits-full-box {
    background: linear-gradient(90deg, #eef8ff, #d9ecff);
    border: 2px solid #eb7f1a;
    border-radius: 15px;
    padding: 40px 45px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 25px;
}

.partnership-inline-box {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin-left: 5%;
}

/* Benefit Item */
.benefit {
    color: #eb7f1a;
    font-weight: 700;
    background-color: #fff;
    padding: 15px 25px;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    opacity: 0;
    transform: translateY(15px);
    animation: fadeUp 0.5s forwards;
    white-space: nowrap; /* Keeps shape but stays responsive */
}

.benefit:nth-child(1) { animation-delay: 0.2s; }
.benefit:nth-child(2) { animation-delay: 0.4s; }
.benefit:nth-child(3) { animation-delay: 0.6s; }
.benefit:nth-child(4) { animation-delay: 0.8s; }

.benefit:hover {
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 6px 18px rgba(0,0,0,0.15);
}

/* ============================
   MOBILE VIEW IMPROVEMENTS
============================ */

@media (max-width: 991px) {
    .benefits-full-box {
        flex-direction: column;
        text-align: center;
        padding: 30px 20px;
    }

    .partnership-inline-box {
        margin-left: 0;
        justify-content: center;
        gap: 20px;
    }

    .benefit {
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
        text-align: center;
        white-space: normal; /* Allow wrap on small screens */
    }
}

@media (max-width: 576px) {
    .benefits-full-box {
        padding: 25px 15px;
        gap: 15px;
    }

    .benefit {
        font-size: 14px;
        padding: 12px 15px;
        max-width: 260px;
    }
}


/* Categories */
.categories-box {
    background-color: #eef8ff;
    border: 2px solid #eb7f1a;
    border-radius: 15px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
    padding: 40px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
}

.category-item {
    padding: 12px 18px;
    border-radius: 10px;
    font-weight: 700;
    color: #eb7f1a;
    text-align: start;
    margin-bottom: 10px;
    background-color: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    opacity: 0;
    transform: translateX(-20px);
    animation: slideIn 0.5s forwards;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.category-item:nth-child(1) { animation-delay: 0.1s; }
.category-item:nth-child(2) { animation-delay: 0.2s; }
.category-item:nth-child(3) { animation-delay: 0.3s; }
.category-item:nth-child(4) { animation-delay: 0.4s; }
.category-item:nth-child(5) { animation-delay: 0.5s; }

/* Hover effect for categories */
.category-item:hover {
    transform: translateX(0) scale(1.05);
    box-shadow: 0 6px 18px rgba(0,0,0,0.15);
}

.category-item::before {
    content: "•";
    color: #eb7f1a;
    font-weight: bold;
    margin-right: 10px;
    font-size: 1.2rem;
}

.category-title { font-weight: 900; color: #eb7f1a; text-align: center; line-height: 1.3; }

.hero-title {
    font-size: 32px;
    font-weight: 800;
    color: #eb7f1a;
    position: relative;
    display: inline-block;
    padding-bottom: 8px;
}

.hero-title::after {
    content: "";
    position: absolute;
    width: 90px;
    height: 3px;
    background: linear-gradient(90deg, #eb7f1a, #00a9e0);
    left: 0;
    bottom: 0;
    border-radius: 3px;
}


/* Responsive */
@media (max-width: 992px) {
    .hero-title { font-size: 34px; }
    .hero-description { font-size: 16px; }
    .role-card { padding: 25px 15px; }
}

@media (max-width: 576px) {
    .partner-hero-section { padding: 60px 15px; }
    .hero-title { font-size: 30px; }
    .hero-description { font-size: 15px; }
    .btn-download-now { width: 100%; }
}

@media (max-width: 991px) {
    .benefits-full-box, .categories-box { flex-direction: column; text-align: center; }
    .partnership-inline-box { justify-content: center; margin-left: 0; }
    .category-column { text-align: center; }
}

/* Animations */
@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }
@keyframes slideIn { to { opacity: 1; transform: translateX(0); } }
</style>
@endsection