@extends('layouts.app')

@section('content')
<style>
/* === DEMO TOOLS PAGE === */
.demo-tools-section {
    background: #F8F9FA;
    min-height: 100vh;
    padding: 3rem 1rem;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* === CARD GRID === */
.card-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
    max-width: 1100px;
    margin: 0 auto;
}

/* === INDIVIDUAL CARD === */
.dashboard-card {
    background: #fff;
    border-radius: 1rem;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
    padding: 1.5rem;
    text-align: center;
    transition: all 0.25s ease-in-out;
}

.dashboard-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
}

.dashboard-card h3 {
    color: #128C7E;
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.dashboard-card p {
    font-size: 0.95rem;
    color: #444;
    margin-bottom: 1.25rem;
}

/* === BUTTONS === */
.dashboard-card .btn {
    border-radius: 0.75rem;
    padding: 0.6rem 1.2rem;
    font-weight: 600;
}

.btn-primary {
    background-color: #128C7E;
    border: none;
}

.btn-primary:hover {
    background-color: #0f6d62;
}

.btn-secondary {
    background-color: #6c757d;
    border: none;
}

.btn-danger {
    background-color: #dc3545;
    border: none;
}

.btn-danger:hover {
    background-color: #bb2d3b;
}

/* === RESPONSIVE === */
@media (max-width: 576px) {
    .dashboard-card h3 {
        font-size: 1.1rem;
    }
    .dashboard-card p {
        font-size: 0.9rem;
    }
}
</style>
<br><br><br>
<div class="demo-tools-section">
    <div class="container text-center mb-5">
        <h2 class="fw-bold text-success">Demo & Tools</h2>
        <p class="text-muted">
            Explore and test WapsChat's WhatsApp automation features instantly.
        </p>
    </div>

    <!-- ✅ Four Column Card Grid -->
    <div class="card-container">

        <!-- CARD 1: Test Bot -->
        <div class="dashboard-card">
            <h3>🎨 Test Bot Delivery</h3>
            <p><b>
                To continue, please say "Hello" to our WhatsApp bot first.<br>
                Click <a href="https://wa.me/2349072109770?text=Hello" target="_blank">HERE</a> to send "Hello", then return.
            </b></p>

            <button data-popup="chat"
                    data-popup-url="https://wapschat.ng/sendfree.php"
                    class="btn btn-primary">
                Send Demo Now
            </button>
        </div>

        <!-- CARD 2: Test Template -->
        <div class="dashboard-card">
            <h3>🤖 Test Template Delivery</h3>
            <p><b>No need to say "Hello" to the bot — simply enter your number and click send.</b></p>

            <button data-popup="chat"
                    data-popup-url="https://wapschat.ng/test-wapschat"
                    class="btn btn-primary">
                Test Template Delivery
            </button>
        </div>

        <!-- CARD 3: Download App -->
        <div class="dashboard-card">
            <h3>📱 Download Our App</h3>
            <p>Get the WapsChat mobile app for faster access, instant notifications, and smooth message delivery.</p>

            <button data-popup="chat"
                    data-popup-url="https://wapschat.ng/app_download"
                    class="btn btn-secondary btn-lg px-4 py-2 fw-bold shadow-sm">
                Download App
            </button>
        </div>

        <!-- CARD 4: Get Useful Update -->
        <div class="dashboard-card">
            <h3>🌍 Get Useful Updates</h3>
            <p>Keep up with the latest trends, opportunities, and technology insights from around the world.</p>

            <button data-popup="chat"
                    data-popup-url="https://wapschat.ng/update"
                    class="btn btn-danger btn-lg px-4 py-2 fw-bold shadow-sm">
                Get Updates
            </button>
        </div>

    </div>
</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
@endsection