@extends('layouts.app')

@section('title', 'BSP – Business Solution Partner')

@section('content')
<style>
/* 🌟 Page Styles */
.bsp-section {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: #F8F9FA;
    min-height: 100vh;
    padding: 3rem 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.notification-card {
    background: #fff;
    border-radius: 1.5rem;
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
    position: relative;
    overflow: hidden;
    max-width: 850px;
    width: 100%;
}

.notification-glow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at center, rgba(0,255,136,0.2), transparent 70%);
    animation: glow 4s ease-in-out infinite;
    z-index: 0;
}

@keyframes glow {
    0%, 100% { transform: rotate(0deg) scale(1); opacity: 0.6; }
    50% { transform: rotate(180deg) scale(1.1); opacity: 1; }
}

.card-body {
    position: relative;
    z-index: 2;
}

.card-icon.whatsapp svg {
    color: #25D366;
}

.card-title {
    font-size: 1.6rem;
}

.card-description {
    font-size: 1rem;
    color: #555;
    max-width: 700px;
    margin: 0 auto;
}

.btn-success {
    background: #25D366;
    border: none;
    transition: all 0.3s ease;
}

.btn-success:hover {
    background: #1EBE5E;
    transform: translateY(-2px);
}
</style>

<div class="bsp-section">
    <div class="notification-card position-relative overflow-hidden">
        <div class="notification-glow"></div>

        <div class="card-body text-center p-5 position-relative z-1">
            <!-- WhatsApp Icon -->
            <div class="card-icon whatsapp mb-4 d-inline-flex justify-content-center align-items-center bg-success bg-opacity-10 rounded-circle p-3">
                <svg width="48" height="48" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67-.148-.198 0-.521.074-.795.372-.273.298-1.088.967-1.336.967-.249 0-.746-.298-.746-1.016 0-.72.546-.967 1.016-1.215.471-.249.967-.471 1.215-.471.199 0 .372.074.521.148.248.124.621.298 1.042.471.421.174 1.042.471 1.265.57.248.099.471.248.621.372.149.124.248.298.248.471 0 .173-.074.298-.149.421-.074.124-.248.248-.471.372l-.248.149zm-10.54-11.774c-1.46 0-2.68.57-3.617 1.46A10.68 10.68 0 001.84 11.68c0 3.05 1.215 5.706 3.15 7.64.471.471 1.016.84 1.61.967.57.124 1.14.124 1.61.124.298 0 .57 0 .84-.074.298-.074.57-.149.84-.248.298-.099.57-.248.84-.372a8.54 8.54 0 012.803-2.803c.124-.298.248-.57.372-.84.099-.298.149-.57.248-.84.074-.298.074-.57.074-.84v-2.03c0-.298 0-.57-.074-.84-.074-.298-.149-.57-.248-.84-.099-.298-.248-.57-.372-.84a8.54 8.54 0 00-2.803-2.803c-.298-.124-.57-.248-.84-.372-.298-.099-.57-.149-.84-.248-.298-.074-.57-.074-.84-.074h-2.03zM18.934 19.455c-.298 0-.57-.074-.84-.248-.298-.124-.57-.248-.84-.372a8.54 8.54 0 00-2.803-2.803c-.124-.298-.248-.57-.372-.84-.099-.298-.149-.57-.248-.84-.074-.298-.074-.57-.074-.84v-2.03c0-.298 0-.57.074-.84.074-.298.149-.57.248-.84.099-.298.248-.57.372-.84a8.54 8.54 0 002.803-2.803c.298-.124.57-.248.84-.372.298-.099.57-.149.84-.248.298-.074.57-.074.84-.074h2.03c.298 0 .57 0 .84.074.298.074.57.149.84.248.298.099.57.248.84.372a8.54 8.54 0 012.803 2.803c.124.298.248.57.372.84.099.298.149.57.248.84.074.298.074.57.074.84v2.03c0 .298 0 .57-.074.84-.074.298-.149.57-.248.84-.099.298-.248.57-.372.84a8.54 8.54 0 01-2.803 2.803c-.298.124-.57.248-.84.372-.298.099-.57.149-.84.248-.298.074-.57.074-.84.074h-2.03z"/>
                </svg>
            </div>

            <!-- Title -->
            <h3 class="card-title mb-3 fw-bold text-dark">
                Looking to integrate WhatsApp API but want a flexible payment option?
            </h3>

            <!-- Description -->
            <p class="card-description mb-4 text-muted">
                Tired of the lengthy and stressful WhatsApp API integration process? Get started instantly using a flexible credit line, allowing you to activate and manage your WhatsApp Business account effortlessly through our trusted partners.
            </p>

            <!-- CTA Button -->
            <div class="d-flex flex-wrap justify-content-center gap-3 mt-4">
                <a href="/waps-onboarding-partner"
                   class="btn btn-success btn-lg px-5 py-2 fw-bold shadow-sm">
                    Get Started
                </a>
            </div>
        </div>
    </div>
</div>
@endsection