@extends('layouts.app')

@section('title', 'Become a WapsChat Partner')

@push('head')
{{-- Calendly widget --}}
<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>
@endpush

@section('content')
<style>
/* ---------- dashboard tokens ---------- */
:root{
    --primary     : #10b981;
    --primary-dark: #059669;
    --secondary   : #8b5cf6;
    --accent      : #234a26;
    --light       : #f8fafc;
    --dark        : #0f172a;
    --gray        : #64748b;
    --card        : #ffffff;
    --radius      : 12px;
    --shadow      : 0 4px 12px rgba(0,0,0,.06);
    --shadow-lg   : 0 12px 32px rgba(0,0,0,.1);
    --transition  : .25s ease;
    --font        : 'Inter', system-ui, sans-serif;
}
body{font-family:var(--font);background:#f4f6fa;color:var(--dark);}

/* ---------- layout helpers ---------- */
.dashboard-grid{
    display:grid;
    grid-template-columns:240px 1fr;
    min-height:100vh;
}
aside{
    background:var(--card);
    border-right:1px solid #e5e7eb;
    padding:2rem 1.5rem;
}
main{
    padding:2rem;
    overflow-y:auto;
}
@media(max-width:768px){
    .dashboard-grid{grid-template-columns:1fr}
    aside{display:none}
}

/* ---------- side nav ---------- */
.nav-brand{
    display:flex;align-items:center;gap:.75rem;
    font-weight:700;font-size:1.125rem;color:var(--accent);
    margin-bottom:2rem;
}
.nav-link{
    display:flex;align-items:center;gap:.75rem;
    padding:.75rem 1rem;border-radius:var(--radius);
    color:var(--gray);text-decoration:none;font-size:.9rem;
    transition:var(--transition);
}
.nav-link:hover{background:var(--light);color:var(--primary);}
.nav-link.active{background:var(--primary);color:#fff;}

/* ---------- cards ---------- */
.card{
    background:var(--card);border-radius:var(--radius);
    box-shadow:var(--shadow);padding:1.5rem;
    transition:var(--transition);
}
.card:hover{box-shadow:var(--shadow-lg);}
.btn{
    display:inline-flex;align-items:center;gap:.5rem;
    padding:.75rem 1.5rem;border-radius:var(--radius);
    font-weight:600;font-size:.9rem;border:none;cursor:pointer;
    transition:var(--transition);
}
.btn-primary{background:var(--primary);color:#fff;}
.btn-primary:hover{background:var(--primary-dark);}
.btn-gradient{
    background:linear-gradient(135deg,var(--primary),var(--secondary));
    color:#fff;
}
.btn-gradient:hover{transform:translateY(-2px);}

/* ---------- hero ---------- */
.hero{
    background:linear-gradient(135deg,#f0fdf4,#e0f2fe);
    border-radius:var(--radius);padding:3rem 2rem;
    text-align:center;margin-bottom:2rem;
}
.hero h1{font-size:2.25rem;font-weight:800;margin-bottom:1rem;}
.hero p{font-size:1.125rem;color:var(--gray);max-width:600px;margin:0 auto 1.5rem;}

/* ---------- stats ---------- */
.stats{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1.5rem;margin-bottom:2rem;
}
.stat-card{text-align:center;}
.stat-card .value{font-size:2rem;font-weight:700;color:var(--primary);}
.stat-card .label{font-size:.875rem;color:var(--gray);}

/* ---------- feature table ---------- */
.feature-table{width:10%;border-collapse:collapse;font-size:.9rem;}
.feature-table th{text-align:left;padding:.60rem 1rem;color:var(--gray);font-weight:600;border-bottom:1px solid #e5e7eb;}
.feature-table td{padding:.75rem 1rem;border-bottom:1px solid #f1f5f9;}
.feature-table tr:hover{background:#f8fafc;}
.partner-card {
    overflow: hidden; /* keeps border-radius intact */
}

.table-wrapper {
    width: 70%;
    overflow-x: auto; /* horizontal scroll on small screens */
    -webkit-overflow-scrolling: touch;
}

.feature-table {
    min-width: 300px; /* prevents ugly wrapping */
    width: 30%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.feature-table th,
.feature-table td {
    padding: 0.75rem 1rem;
    border: 1px solid #e5e7eb;
    vertical-align: top;
}

.feature-table th {
    background: #f8fafc;
    font-weight: 600;
}



/* ---------- misc ---------- */
.section-title{font-size:1.25rem;font-weight:700;margin-bottom:1rem;}
.text-center{text-align:center;}
.mt-3{margin-top:1.5rem}
</style>

<div class="dashboard-grid">
{{-- ---------- side navigation ---------- --}}
<aside>
    <br><br><br><br>
    <div class="nav-brand">
        <svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
            <path d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/>
        </svg>
        WapsChat Partner
    </div>
    <nav>
        <a href="/links" class="nav-link active">Overview</a>
        <a href="/vendor-console/settings/api-access" class="nav-link">API Docs</a>
        <a href="https://wapschat.ng/portal/partner-form/" class="nav-link">Apply</a>
        <a href="#" class="nav-link">Resources</a>
    </nav>
</aside>

{{-- ---------- main content ---------- --}}
<main>
    {{-- hero --}}
    <div class="hero">
        <br><br>
        <h1>Launch Your WhatsApp SaaS Business with WapsChat</h1>
        <p>Empower businesses with our official <r>WhatsApp</r> Cloud API platform. Earn recurring revenue by offering WapsChat's automation tools to your network.</p>
        <button class="btn btn-gradient" onclick="Calendly.initPopupWidget({url:'https://calendly.com/wapschatsupport/30min'});return false;">
            Book a Demo Now
        </button>
    </div>

    {{-- quick stats --}}
    <div class="stats">
        <div class="card stat-card">
            <div class="value">100%</div>
            <div class="label">White-label ready</div>
        </div>
        <div class="card stat-card">
            <div class="value">24 / 7</div>
            <div class="label">Support</div>
        </div>
        <div class="card stat-card">
            <div class="value">100%</div>
            <div class="label">Scalable</div>
        </div>
        <div class="card stat-card">
            <div class="value">30 min</div>
            <div class="label">Go-live</div>
        </div>
    </div>
{{-- feature breakdown --}}
  <section id="compare" class="centered">
    <div class="container">
<div class="card">
  <h2 class="section-title">Why Partner with WapsChat?</h2>
  <table class="feature-table">
    <thead>
      
    <tbody>
      <tr>
        <td data-label="Feature"><strong>Official WhatsApp Cloud API</strong>
        <br>Integrate seamlessly with WhatsApp's official API for reliable, scalable, and secure messaging solutions trusted by businesses worldwide.</td>
      
      
        <td data-label="Feature"><strong>Comprehensive Automation Tools</strong> <br>Offer businesses bulk messaging, AI-powered chatbots, smart scheduling, contact management, and branded floaters — all from one powerful dashboard.</td>
      
      
        <td data-label="Feature"><strong>Effortless Cloud Management</strong> <br>We manage your cloud infrastructure, ensuring optimal performance, resolving system issues, handling updates, and delivering new features, so you can focus on growing and promoting your business.</td>
    

        <td data-label="Feature"><strong>100% White-label Reseller Panel</strong> <br>Enter the profitable messaging industry with low development costs. Our white-label panel lets you launch your own SaaS brand while we stay invisible.</td>
      </tr>
    </tbody>
  </table>
</div>

<style>
.card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
  padding: 20px;
  margin: 20px auto;
  max-width: 1000px;
}

.section-title {
  text-align: center;
  font-size: 1.6rem;
  margin-bottom: 1.2rem;
  color: #222;
}

.feature-table {
  width: 100%;
  border-collapse: collapse;
}

.feature-table th,
.feature-table td {
  border: 1px solid #e5e7eb;
  padding: 12px 15px;
  text-align: left;
  vertical-align: top;
}

.feature-table th {
  background-color: #f9fafb;
  color: #333;
  font-weight: 600;
}

.feature-table td strong {
  color: #059669; /* Accent green */
}

/* ✅ Responsive Layout */
@media (max-width: 668px) {
  .feature-table thead {
    display: none;
  }
  
  .feature-table, 
  .feature-table tbody, 
  .feature-table tr, 
  .feature-table td {
    display: block;
    width: 100%;
  }
  
  .feature-table tr {
    margin-bottom: 1.2rem;
    border: 1px solid #eee;
    border-radius: 10px;
    box-shadow: 0 1px 6px rgba(0,0,0,0.05);
    padding: 10px;
  }
  
  .feature-table td {
    border: none;
    padding: 2px 4px;
    position: relative;
  }
  
  .feature-table td::before {
    content: attr(data-label);
    font-weight: 600;
    color: #444;
    display: block;
    margin-bottom: 2px;
  }
   /* === Responsive === */
    @media (min-width: 768px) {
      .hero-content {
        grid-template-columns: 1fr 1fr;
      }
    }

    @media (max-width: 768px) {
      .menu-toggle {
        display: block;
      }
      .nav-links {
        display: none;
        position: absolute;
        top: 60px;
        right: 0;
        flex-direction: column;
        background: var(--whatsapp-dark);
        width: 200px;
        padding: 1rem;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
      }
      .nav-links.active {
        display: flex;
      }
}
</style>

    {{-- final CTA --}}
    <div class="card text-center mt-3">
        <h2>Ready to Transform Your Business?</h2>
        <p>Get complete tools to attract, optimise, and retain customers — all with your brand front-and-centre.</p>
        <a href="https://wapschat.ng/partner" class="btn btn-primary">Become a Partner Today</a>
    </div>
</main>
</div>
@endsection