@extends('layouts.app')

@section('content')

<style>
    .support-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
        max-width: 800px;
        margin: 2rem auto;
        padding: 0 1rem;
    }

    @media (max-width: 640px) {
        .support-grid {
            grid-template-columns: 1fr;
        }
    }

    .support-card {
        background: #ffffff;
        border-radius: 16px;
        padding: 1.5rem;
        text-align: center;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        transition: all 0.3s ease;
        text-decoration: none;
        display: block;
        color: inherit;
    }

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

    .support-icon {
        width: 56px;
        height: 56px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 1rem;
        background: #f8fafc;
        border-radius: 50%;
        font-size: 1.5rem;
        color: #475569;
    }

    .support-title {
        font-weight: 600;
        font-size: 0.95rem;
        color: #1e293b;
        margin: 0 0 0.75rem;
    }

  /* Base button style */
.support-btn {
    display: inline-block;
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.2s, transform 0.15s;
    cursor: pointer;
    user-select: none;
}

/* Primary – Blue (main actions) */
.support-btn--primary {
    background: #3b82f6; /* blue-500 */
    color: white;
}
.support-btn--primary:hover {
    background: #2563eb; /* blue-600 */
}

/* Secondary – Gray (less prominent) */
.support-btn--secondary {
    background: #e2e8f0; /* slate-200 */
    color: #334155; /* slate-700 */
}
.support-btn--secondary:hover {
    background: #cbd5e1; /* slate-300 */
}

/* Success – Green */
.support-btn--success {
    background: #10b981; /* emerald-500 */
    color: white;
}
.support-btn--success:hover {
    background: #059669; /* emerald-600 */
}

/* Danger – Red */
.support-btn--danger {
    background: #ef4444; /* red-500 */
    color: white;
}
.support-btn--danger:hover {
    background: #dc2626; /* red-600 */
}
    }

    .support-btn:hover {
        background: #b91c1c;
    }

    /* Optional: Add focus outline for accessibility */
    .support-card:focus-visible {
        outline: 2px solid #3b82f6;
        outline-offset: 4px;
    }
</style>
<br><br><br><br><br>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">

    <!-- Hero Section -->
    <section class="hero-gradient text-dark py-20 text-center relative overflow-hidden">
        <div 
            class="absolute inset-0 bg-cover bg-center opacity-15"
            style="background-image: url'https://wapschat.ng/assets/img/yy.png';"
        ></div>
        <div class="relative z-10 px-4">
            <h1 class="text-3xl md:text-4xl font-extrabold mb-3">Get In Touch</h1>
            <p class="text-base md:text-lg max-w-2xl mx-auto">
                We’re here to help you get started with <strong>WapsChat</strong>.  
                If you have any questions, feel free to chat with us or contact support.
            </p>
        </div>
    </section>
<div class="support-grid">
    <!-- Get In Touch -->
    <a href="mailto:support@wapschat.ng" class="support-card">
        <div class="support-icon">💰</div>
        <div class="support-title">Get In Touch</div>
         <span class="support-btn support-btn--danger">Send Email</span>
    </a>

    <!-- WapsChat Forum -->
    <a href="https://chat.whatsapp.com/BLZRdx2cJULEdlwd7v9TYv" class="support-card" target="_blank">
        <div class="support-icon">📝</div>
        <div class="support-title">Join WapsChat Forum</div>
        <span class="support-btn support-btn--success">Join Forum</span>
    </a>

    <!-- Generate Support Ticket -->
    
    <a href="https://app.wapschat.ng/supports" class="support-card">
        <div class="support-icon">👑</div>
        <div class="support-title">Generate Support Ticket</div>
       
         <button data-popup="chat" data-popup-url="/supports" class="btn btn-success">
   Create Ticket
</button>
    </a>

    <!-- Dedicated Support -->
    <a href="https://app.wapschat.ng/support" class="support-card">
        <div class="support-icon">👑</div>
        <div class="support-title">Dedicated Support</div>
       
         <button data-popup="chat" data-popup-url="/support" class="btn btn-danger">
    Request
</button>
    </a>

    <!-- FAQs -->
    <a href="/support-faqs" class="support-card">
        <div class="support-icon">❓</div>
        <div class="support-title">FAQs</div>
          <span class="support-btn support-btn--secondary">Read</span>
    </a>

    <!-- Manager -->
    <a href="/support-manager" class="support-card">
        <div class="support-icon">👤</div>
        <div class="support-title">Manager</div>
         <span class="support-btn support-btn--primary">View Manager</span>
    </a>
</div>
@endsection