@extends('layouts.app')

@section('content')
<style>
.dashboard-container {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: #F8F9FA;
    min-height: 100vh;
    padding: 2rem 0;
}

.dashboard-header {
    font-size: 1.5rem;
    font-weight: 700;
    color: #212529;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #DEE2E6;
}

.get-started-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.card {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    border: 1px solid #E9ECEF;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

.card-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

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

.card-icon.instagram {
    background: #FCE4EC;
    color: #E1306C;
}

.card-icon.facebook {
    background: #E7F3FF;
    color: #1877F2;
}

.card-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: #212529;
    margin-bottom: 0.5rem;
}

.card-description {
    font-size: 0.875rem;
    color: #6C757D;
    margin-bottom: 1rem;
    line-height: 1.5;
}

.action-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 24px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    font-size: 0.875rem;
}

.action-button.whatsapp {
    background: #25D366;
    color: white;
}

.action-button.instagram {
    background: #E1306C;
    color: white;
}

.action-button.facebook {
    background: #1877F2;
    color: white;
}

.action-button:hover {
    opacity: 0.9;
    transform: scale(1.02);
}

.get-to-know-section {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    border: 1px solid #E9ECEF;
    margin-bottom: 2rem;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid #DEE2E6;
}

.section-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: #212529;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.section-title .icon {
    width: 24px;
    height: 24px;
    background: #E1F5FE;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0288D1;
}

.steps-remaining {
    font-size: 0.875rem;
    color: #6C757D;
    font-weight: 500;
}

.step-item {
    display: flex;
    align-items: center;
    padding: 1rem 0;
    border-bottom: 1px solid #E9ECEF;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.step-item:last-child {
    border-bottom: none;
}

.step-item:hover {
    background-color: #F8F9FA;
}

.step-number {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #E9ECEF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: #495057;
    margin-right: 1rem;
}

.step-content {
    flex: 1;
    font-size: 1rem;
    color: #212529;
    font-weight: 500;
}

.step-arrow {
    color: #6C757D;
    font-size: 1.25rem;
    margin-left: 0.5rem;
}

/* Responsive adjustments */
@media (max-width: 767.98px) {
    .dashboard-container {
        padding: 1rem 0;
    }
    
    .dashboard-header {
        font-size: 1.25rem;
        margin-bottom: 1rem;
    }
    
    .get-started-section {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .card {
        padding: 1rem;
    }
    
    .card-title {
        font-size: 1rem;
    }
    
    .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .step-item {
        padding: 0.75rem 0; 
    }
}
</style>
<style>
    /* Existing styles remain the same */

    .blade-heading {
        text-align: center;
        color: #14040a;
        margin-bottom: 40px;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    }
    

    .blade-heading h4 {
        font-size: 2rem;
        font-weight: 700;
        margin-bottom: 10px;
    }

    .blade-heading p {
        font-size: 1.1rem;
        color: #14040a;
        max-width: 600px;
        margin: 0 auto;
        line-height: 1.5;
    }
</style>
<style>
/* ============================
   EXTRA MOBILE RESPONSIVENESS
============================ */

/* General container scaling */
@media (max-width: 576px) {
  body {
    overflow-x: hidden;
  }

  .blade-heading h4 {
    font-size: 1.4rem;
  }

  .blade-heading p {
    font-size: 0.95rem;
    padding: 0 10px;
  }

  /* Card section */
  .get-started-section {
    padding: 1rem;
  }

  .card {
    padding: 1rem;
    border-radius: 10px;
  }

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

  .card-description {
    font-size: 0.85rem;
  }

  .action-button {
    width: 100%;
    justify-content: center;
    font-size: 0.9rem;
  }

  /* Buttons and text */
  .btn {
    width: 100%;
    text-align: center;
    font-size: 0.9rem;
    padding: 10px;
  }

  /* Popup window */
  .wapschat-popup-content {
    width: 95%;
    padding: 1.2rem;
    max-height: 90vh;
  }

  .wapschat-popup-header h2 {
    font-size: 1.3rem;
  }

  .wapschat-popup-body {
    font-size: 0.9rem;
    line-height: 1.5;
  }

  /* Accordion sections */
  .get-to-know-section {
    padding: 1rem;
    margin: 0.5rem;
  }

  .accordion-button {
    font-size: 0.95rem;
  }

  .section-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .steps-remaining {
    margin-top: 0.3rem;
  }

  /* Modals */
  .modal-dialog {
    margin: 0.5rem;
  }

  .modal-content {
    border-radius: 12px;
  }

  .modal-body {
    font-size: 0.95rem;
    padding: 1rem;
  }

  .modal-body ul {
    padding-left: 1.2rem;
  }

  /* Adjust grid */
  .col-md-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  /* Step items */
  .step-item {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
  }

  .step-number {
    width: 24px;
    height: 24px;
    font-size: 0.85rem;
  }

  /* Spacing fix */
  .dashboard-container {
    padding: 1rem 0;
  }

  .dashboard-header {
    text-align: center;
  }
}

/* Slight tablet improvements */
@media (min-width: 577px) and (max-width: 991.98px) {
  .card {
    padding: 1.25rem;
  }

  .blade-heading h4 {
    font-size: 1.6rem;
  }

  .card-description {
    font-size: 0.9rem;
  }
}
</style>

<br><br><br><br><br>

<div>
    <!-- Page Title and Description -->
    <div class="blade-heading">
        <h4>Get started with WapsChat</h4>
        <p>WhatsApp Customer Engagement Evolved With WapsChat Innovation.</p>
        
       <!-- Trigger Link -->
<a href="#" id="why-wapschat-link" class="text-danger fw-bold d-inline-flex align-items-center text-decoration-none">
    💬 Click To know Why WapsChat Is Better Than a BSP>
</a>

<!-- Popup Overlay -->
<div id="wapschat-popup-overlay" class="wapschat-popup-overlay">
    <div class="wapschat-popup-content">
        <button id="wapschat-popup-close" class="wapschat-popup-close" aria-label="Close popup">&times;</button>
        
        <div class="wapschat-popup-header text-center mb-4">
            <h2 class="mb-2">Why WapsChat Is Better Than a BSP</h2>
            <p class="text-muted fs-6">Full control • Zero middleman • Lower cost • Setup ownrship</p>
             <p><b>BSP</b> (Business Solution Partner) charges per message for its services</p>
        </div>

        <div class="wapschat-popup-body">
            <ol class="wapschat-comparison-list">
                <li>
                    <strong>Full Ownership and Control</strong>
                    <br>With most BSPs, your WhatsApp number belongs to their account — not yours.
                    <em>WapsChat connects you directly to Meta’s WhatsApp Cloud API. Your data, your account.</em>
                </li>
                <li>
                    <strong>No Middleman</strong>
                    <br>BSPs sit between you and Meta.
                    <em>WapsChat = direct Cloud API. Faster setup, real-time updates, no delays.</em>
                </li>
                <li>
                    <strong>Lower Costs</strong>
                    <br>BSPs add markups or hidden fees.
                    <em>You pay Meta’s official rates, nothing extra.</em>
                </li>
                <li>
                    <strong>Instant Activation</strong>
                    <br>BSPs take days for KYC.
                    <em>With WapsChat: activate in direct.</em>
                </li>
                <li>
                    <strong>More Flexibility</strong>
                    <br>BSPs lock you into their dashboard.
                    <em>WapsChat gives open API access for full CRM/chatbot integration.</em>
                </li>
                <li>
                    <strong>Unified Dashboard</strong>
                    <br>Manage all numbers in one place.
                    <em>No switching accounts per number.</em>
                </li>
                <li>
                    <strong>Scalable for Developers</strong>
                    <br>Perfect for SaaS, agencies, and resellers.
                    <em>Webhooks, multi-client support, and automation-ready.</em>
                </li>
            </ol>
            </div>
              <div class="wapschat-summary-box mt-4 p-3 bg-success bg-opacity-10 rounded-3 text-center">
                <strong>🏁 WapsChat</strong><br> Full control, zero middleman, lower cost, instant setup.</strong>
            </div>
        </div>
    </div>
</div>
 <!-- Instagram / Onboarding Card -->
       <div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-md-8">

            <div class="card shadow-sm p-4 h-100">
                
                <!-- Icon -->
                <div class="card-icon mb-3 text-center">
                    <svg width="48" height="48" fill="#25D366" viewBox="0 0 24 24">
                        <path d="M20 2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h4l4 4 4-4h4c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z"/>
                    </svg>
                </div>

                <!-- Heading -->
  <div class="text-center">
    <h2 class="fw-bold mb-3">Welcome to WapsChat onboarding page</h2>

    <div class="alert alert-success mt-4">
        <h3><b>Important Note</b></h3>
        <p>
    <p>
  <b>⚠️ This is a manual Meta onboarding process that gives you full ownership and control of your Meta API. You will be connected directly to Meta through your API, with full access to your resources and 100% ownership guaranteed.
<br>
 Please note that setting up the WhatsApp API is a technical process and not a simple plug-and-play solution.</b></p>
    </div>
   <!-- Enquiry Section -->
<section class="enquiry-section" style="padding: 40px 20px; background-color: #f9f9f9;">
  <div class="enquiry-grid" style="display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; max-width: 900px; margin: 0 auto;">

    <!-- Box 1 -->
    <div class="enquiry-box" style="flex: 1 1 250px; background: #fff; padding: 30px; border-radius: 10px; text-align: center; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
     <div class="emoji" style="font-size: 40px;">🛠️</div>
<h2 style="margin: 15px 0 10px; font-weight: bold; text-align: center;">
  Self-Onboarding Process
</h2>

</h2>
<h4 style="margin-bottom: 20px; text-align: center; font-weight: normal; color: #555;">
  With our WhatsApp API setup instructions, you can get connected on your own
</h4>

      <a href="/self-onboarding" target="_blank" class="whatsapp-btn" style="display: inline-flex; align-items: center; gap: 10px; background-color: #25D366; color: #fff; padding: 10px 20px; border-radius: 8px; text-decoration: none; font-weight: bold;">
        <img src="https://upload.wikimedia.org/wikipedia/commons/6/6b/WhatsApp.svg" alt="WhatsApp Icon" style="width: 20px; height: 20px;">
        Do It Yourself
      </a>
    </div>

    <!-- Box 2 -->
    <div class="enquiry-box" style="flex: 1 1 250px; background: #fff; padding: 30px; border-radius: 10px; text-align: center; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
     <div class="emoji" style="font-size: 40px;">💼</div>
<h2 style="margin: 15px 0 10px; font-weight: bold; text-align: center;">
 Hire Developer
</h2>
<h4 style="margin-bottom: 20px;">
  With our Dedicated Support, our team will assist you in setting up and getting connected within 24 hours.
</h4>

      <a href="/hire-onboarding" target="_blank" class="whatsapp-btn" style="display: inline-flex; align-items: center; gap: 10px; background-color: #25D366; color: #fff; padding: 10px 20px; border-radius: 8px; text-decoration: none; font-weight: bold;">
        <img src="https://upload.wikimedia.org/wikipedia/commons/6/6b/WhatsApp.svg" alt="WhatsApp Icon" style="width: 20px; height: 20px;">
        Dedicated Support
      </a>
    </div>

  </div>
</section>

<style>
/* === POPUP STYLES === */
.wapschat-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.wapschat-popup-overlay.active {
    opacity: 1;
    visibility: visible;
}

.wapschat-popup-content {
    background: white;
    width: 92%;
    max-width: 700px;
    max-height: 92vh;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    overflow: auto;
    position: relative;
    transform: scale(0.96);
    transition: transform 0.3s ease;
    padding: 1.8rem;
    margin: 0 auto;
}

.wapschat-popup-overlay.active .wapschat-popup-content {
    transform: scale(1);
}

.wapschat-popup-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: #f8fafc;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 1.25rem;
    color: #64748b;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s;
}

.wapschat-popup-close:hover {
    background: #e2e8f0;
    color: #0f766e;
}

/* Typography & Content */
.wapschat-popup-header h2 {
    color: #0f766e;
    font-weight: 800;
    font-size: 1.6rem;
    line-height: 1.3;
}

.wapschat-popup-body {
    color: #334155;
    line-height: 1.65;
    font-size: 0.98rem;
}

.wapschat-comparison-list {
    padding-left: 1.3rem;
    margin: 0;
}

.wapschat-comparison-list li {
    margin-bottom: 1.1rem;
    padding-left: 0.3rem;
}

.wapschat-comparison-list strong {
    color: #0f766e;
    display: block;
    margin-bottom: 0.3rem;
    font-size: 1.05rem;
}

.wapschat-comparison-list em {
    color: #475569;
    font-style: normal;
    background: #f0fdf4;
    padding: 0.35rem 0.6rem;
    border-radius: 8px;
    display: block;
    margin-top: 0.35rem;
    font-weight: 500;
}

.wapschat-summary-box {
    border: 1px solid #dcfce7;
}

/* === MOBILE-FIRST RESPONSIVE DESIGN === */
@media (max-width: 576px) {
    .wapschat-popup-content {
        width: 95%;
        padding: 1.4rem;
        max-height: 94vh;
    }

    .wapschat-popup-header h2 {
        font-size: 1.4rem;
    }

    .wapschat-popup-body {
        font-size: 0.92rem;
        line-height: 1.6;
    }

    .wapschat-comparison-list li {
        margin-bottom: 1rem;
    }

    .wapschat-popup-close {
        top: 0.8rem;
        right: 0.8rem;
        width: 32px;
        height: 32px;
        font-size: 1.1rem;
    }
}

@media (min-width: 768px) {
    .wapschat-popup-content {
        padding: 2.2rem;
    }
}
</style>

<!-- ✅ CSS for Responsive Layout  for testing card-->
<style>
.card-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.dashboard-card {
  background: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  text-align: center;
  transition: transform 0.2s ease;
}

.dashboard-card:hover {
  transform: translateY(-3px);
}

.dashboard-card h3 {
  color: #128C7E;
  margin-bottom: 10px;
}

.dashboard-card p {
  font-size: 15px;
  color: #333;
}

.btn {
  background-color: #128C7E;
  color: #fff;
  border: none;
  padding: 10px 16px;
  border-radius: 6px;
  font-size: 15px;
  cursor: pointer;
  margin-top: 15px;
  display: inline-block;
  text-decoration: none;
}

.btn:hover {
  background-color: #0f6e63;
}
</style>


<script>
document.addEventListener('DOMContentLoaded', function () {
    const link = document.getElementById('why-wapschat-link');
    const overlay = document.getElementById('wapschat-popup-overlay');
    const closeBtn = document.getElementById('wapschat-popup-close');

    if (!link || !overlay || !closeBtn) return;

    const openPopup = (e) => {
        e.preventDefault();
        overlay.classList.add('active');
        document.body.style.overflow = 'hidden';
    };

    const closePopup = () => {
        overlay.classList.remove('active');
        document.body.style.overflow = '';
    };

    link.addEventListener('click', openPopup);
    closeBtn.addEventListener('click', closePopup);
    overlay.addEventListener('click', (e) => {
        if (e.target === overlay) closePopup();
    });

    document.addEventListener('keydown', (e) => {
        if (e.key === 'Escape' && overlay.classList.contains('active')) {
            closePopup();
        }
    });
});
</script>
        
       
  </div>
</div>

<script>
function openPopup() {
  document.getElementById('popup').style.display = 'flex';
}
function closePopup() {
  document.getElementById('popup').style.display = 'none';
}
</script>

            </div>
        </div>

 

    </div>
</div>

    </div>
  </div>
</div>

<!-- Fillout Feedback Widget -->
<div data-fillout-id="vkwwGs8YfPus" 
     data-fillout-embed-type="popup" 
     data-fillout-button-text="We Need Your Help" 
     data-fillout-dynamic-resize 
     data-fillout-button-color="#245644" 
     data-fillout-button-float="bottom-right" 
     data-fillout-inherit-parameters 
     data-fillout-popup-size="medium">
</div>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://server.fillout.com/embed/v1/"></script>
@endpush


    <!-- Get to Know Sections - Triple Accordion --
<div class="get-to-know-section">
    <div class="accordion" id="multiAccordion">

        <!-- Section 1: Onboarding --
        <div class="accordion-item border-0">
            <h2 class="accordion-header" id="headingOnboarding">
                <button 
                    class="accordion-button collapsed p-0 bg-transparent shadow-none" 
                    type="button" 
                    data-bs-toggle="collapse" 
                    data-bs-target="#collapseOnboarding" 
                    aria-expanded="false" 
                    aria-controls="collapseOnboarding"
                >
                    <div class="d-flex justify-content-between align-items-center w-100">
                        <div class="section-title d-flex align-items-center gap-2">
                            <span class="icon">
                                <svg width="16" height="16" fill="currentColor" viewBox="0 0 24 24">
                                    <path d="M12 2L2 7l10 5 10-5M2 12v5l10 5 10-5M2 12h20v5"/>
                                </svg>
                            </span>
                            Onboarding Guide
                        </div>
                        <span class="steps-remaining">2 steps</span>
                    </div>
                </button>
            </h2>
            <div 
                id="collapseOnboarding" 
                class="accordion-collapse collapse" 
                aria-labelledby="headingOnboarding" 
                data-bs-parent="#multiAccordion"
            >
                <div class="accordion-body p-0 mt-3">
                    <div class="step-list">
                        <a href="https://wapschat.ng/onboarding" 
                           target="_blank" 
                           class="step-item text-decoration-none text-dark">
                            <div class="step-number">1</div>
                            <div class="step-content">Onboarding Detalis</div>
                            <div class="step-arrow">→</div>
                        </a>
                        <a href="https://wapschat.ng/resources" 
                           target="_blank" 
                           class="step-item text-decoration-none text-dark">
                            <div class="step-number">2</div>
                            <div class="step-content">Resources</div>
                            <div class="step-arrow">→</div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
<br>======================================================================================================================
        <!-- Section 2: WhatsApp Setup --
        <div class="accordion-item border-0">
            <h2 class="accordion-header" id="headingWhatsApp">
                <button 
                    class="accordion-button collapsed p-0 bg-transparent shadow-none" 
                    type="button" 
                    data-bs-toggle="collapse" 
                    data-bs-target="#collapseWhatsApp" 
                    aria-expanded="false" 
                    aria-controls="collapseWhatsApp"
                >
                    <div class="d-flex justify-content-between align-items-center w-100">
                        <div class="section-title d-flex align-items-center gap-2">
                            <span class="icon">
                                <svg width="16" height="16" fill="currentColor" viewBox="0 0 24 24">
                                    <path d="M12 2L2 7l10 5 10-5M2 12v5l10 5 10-5M2 12h20v5"/>
                                </svg>
                            </span>
                            WhatsApp API Setup
                        </div>
                        <span class="steps-remaining">3 steps</span>
                    </div>
                </button>
            </h2>
            <div 
                id="collapseWhatsApp" 
                class="accordion-collapse collapse" 
                aria-labelledby="headingWhatsApp" 
                data-bs-parent="#multiAccordion"
            >
                <div class="accordion-body p-0 mt-3">
                    <div class="step-list">
                        <a href="https://developers.facebook.com" target="_blank" class="step-item text-decoration-none text-dark">
                            <div class="step-number">1</div>
                            <div class="step-content">Create Meta Developer App</div>
                            <div class="step-arrow">→</div>
                        </a>
                        <a href="https://business.facebook.com/wa/manage/phone-numbers/?waba_id=418416871364445" target="_blank" class="step-item text-decoration-none text-dark">
                            <div class="step-number">2</div>
                            <div class="step-content">Manage Phone Numbers</div>
                            <div class="step-arrow">→</div>
                        </a>
                        <a href="https://business.facebook.com/latest/settings/business_users?business_id=2178486142553673&asset_id=3712369822391123" class="step-item text-decoration-none text-dark">
                            <div class="step-number">3</div>
                            <div class="step-content">Developer Business Settings</div>
                            <div class="step-arrow">→</div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
<br>======================================================================================================================
        <!-- Section 3: Compliance & Policies --
        <div class="accordion-item border-0">
            <h2 class="accordion-header" id="headingPolicies">
                <button 
                    class="accordion-button collapsed p-0 bg-transparent shadow-none" 
                    type="button" 
                    data-bs-toggle="collapse" 
                    data-bs-target="#collapsePolicies" 
                    aria-expanded="false" 
                    aria-controls="collapsePolicies"
                >
                    <div class="d-flex justify-content-between align-items-center w-100">
                        <div class="section-title d-flex align-items-center gap-2">
                            <span class="icon">
                                <svg width="16" height="16" fill="currentColor" viewBox="0 0 24 24">
                                    <path d="M12 2L2 7l10 5 10-5M2 12v5l10 5 10-5M2 12h20v5"/>
                                </svg>
                            </span>
                            Support, Terms & Compliance
                        </div>
                        <span class="steps-remaining">4 docs</span>
                    </div>
                </button>
            </h2>
            <div 
                id="collapsePolicies" 
                class="accordion-collapse collapse" 
                aria-labelledby="headingPolicies" 
                data-bs-parent="#multiAccordion"
            >
                <div class="accordion-body p-0 mt-3">
                    <div class="step-list">
                        <a href="https://wa.me/2349066621067?text=WapsChat%20onboarding%20Support" target="_blank" class="step-item text-decoration-none text-dark">
                            <div class="step-number">1</div>
                            <div class="step-content">Still Confused, Get Support</div>
                            <div class="step-arrow">→</div>
                        </a>
                        
                        <a href="https://app.wapschat.ng/support/help" target="_blank" class="step-item text-decoration-none text-dark">
                            <div class="step-number">2</div>
                            <div class="step-content">More Confused, Get Dedicated Support</div>
                            <div class="step-arrow">→</div>
                             <!-- Calendly link widget begin --
                         
<link href="https://assets.calendly.com/assets/external/widget.css" rel="stylesheet">
<script src="https://assets.calendly.com/assets/external/widget.js" type="text/javascript" async></script>

<!--<a href="" onclick="Calendly.initPopupWidget({url: 'https://calendly.com/wapschatsupport/30min'});return false;">Book a Demo Now</a>-->
<!-- Calendly link widget end --
                        </a>
                          <a href="https://wapschat.ng/terms" target="_blank" class="step-item text-decoration-none text-dark">
                            <div class="step-number">3</div>
                            <div class="step-content">Review Terms of Service</div>
                            <div class="step-arrow">→</div>
                        </a>
                        <a href="https://wapschat.ng/privacy-policy" target="_blank" class="step-item text-decoration-none text-dark">
                            <div class="step-number">4</div>
                            <div class="step-content">Read Privacy Policy</div>
                            <div class="step-arrow">→</div>
                        </a>
                    </div>
                </div>
            </div>
<style>
.notification-card {
    background: #ffffff; /* Pure white background */
    border: 1px solid #e2e8f0; /* Subtle border for depth */
    border-radius: 20px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    position: relative;
    transition: transform 0.3s ease;
}

.notification-card:hover {
    transform: translateY(-4px);
}
/* Description text styling */
.card-description {
    font-size: 1.05rem;
    line-height: 1.7;
    color:#14040a; /* Soft gray for readability */
    margin: 0 auto 1.5rem;
    max-width: 650px;
    font-weight: 400;
    letter-spacing: -0.01em;
}

/* Optional: Add a subtle underline or emphasis on key phrases */
.card-description strong {
    color: #0f766e; /* WhatsApp green shade */
    font-weight: 600;
}
/* Blinking Glow Animation (green WhatsApp pulse) */
.notification-glow {
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 22px;
    background: linear-gradient(45deg, 
        #f2f3f7, 
       #f2dae3, 
        #ffffff,
        #f2f3f7);
    background-size: 400% 400%;
    z-index: 0;
    animation: glowPulse 2.5s ease-in-out infinite;
    opacity: 0.6;
    filter: blur(20px);
}

@keyframes glowPulse {
    0%, 100% { background-position: 0% 50%; opacity: 0.4; }
    50% { background-position: 100% 50%; opacity: 0.7; }
}

/* Ensure content stays above glow */
.card-body {
    z-index: 2;
}
</style>



@section('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const whatsappBtn = document.getElementById('connectWhatsapp');
    const facebookBtn = document.getElementById('connectFacebook');

    if (whatsappBtn) {
        whatsappBtn.addEventListener('click', function() {
            window.open('https://business.facebook.com/messaging/whatsapp/onboard/?app_id=1327471375297043&config_id=836180885435540', '_blank');
        });
    }

    if (facebookBtn) {
        facebookBtn.addEventListener('click', function() {
            window.open('https://business.facebook.com/', '_blank');
        });
    }
});
</script>
@endsection

     
<style>
.float-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #258a4f;
  color: white;
  padding: 15px 25px;
  border-radius: 50px;
  text-decoration: none;
  font-family: Arial, sans-serif;
  font-size: 16px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  transition: background-color 0.3s ease;
  z-index: 1000;
}
.float-button:hover {
  background-color: #0a0d47;
}
</style>
<!-- Floating CTA Button -->
<!--<a href="/waps-onboarding-partner" id="floating-cta" class="floating-cta shadow-lg">
    💬 Get Started with WapsChat
</a>-->
 
<style>
.floating-cta {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: linear-gradient(135deg, #12b76a, #0d9488);
    color: white !important;
    text-decoration: none;
    font-weight: 600;
    padding: 12px 20px;
    border-radius: 50px;
    font-size: 1rem;
    z-index: 1000;
    box-shadow: 0 4px 20px rgba(18, 183, 106, 0.4);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.floating-cta:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 25px rgba(18, 183, 106, 0.6);
    background: linear-gradient(135deg, #10a35f, #0c857a);
}

/* Mobile optimization */
@media (max-width: 768px) {
    .floating-cta {
        bottom: 16px;
        right: 16px;
        padding: 10px 16px;
        font-size: 0.95rem;
    }
}

/* Hide on very small screens if needed (optional) */
@media (max-width: 360px) {
    .floating-cta {
        font-size: 0.85rem;
        padding: 9px 14px;
    }
}
</style>
@endsection