@extends('default.layouts.app')

@section('title', 'Live Chat')

@section('content')
<div class="min-h-screen bg-gray-50 py-12">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-12">
            <h1 class="text-4xl font-bold text-gray-900 mb-4">Live Chat Support</h1>
            <p class="text-lg text-gray-600">Get instant help from our customer service team</p>
        </div>

        <div class="bg-white rounded-lg shadow-md p-8">
            <div class="text-center mb-8">
                <div class="inline-flex items-center justify-center w-16 h-16 bg-green-100 rounded-full mb-4">
                    <span class="text-2xl">💬</span>
                </div>
                <h2 class="text-2xl font-semibold mb-2">Chat with Us Now</h2>
                <p class="text-gray-600 mb-6">Our live chat is available 24/7 to assist you</p>
                <button class="bg-black text-white px-8 py-3 rounded-md hover:bg-gray-800 transition duration-200 text-lg font-medium">
                    Start Chat
                </button>
            </div>

            <div class="border-t pt-8">
                <h3 class="text-xl font-semibold mb-4">What We Can Help With</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div class="flex items-start">
                        <span class="text-green-500 mr-2 mt-1">•</span>
                        <span>Order status and tracking</span>
                    </div>
                    <div class="flex items-start">
                        <span class="text-green-500 mr-2 mt-1">•</span>
                        <span>Product information and sizing</span>
                    </div>
                    <div class="flex items-start">
                        <span class="text-green-500 mr-2 mt-1">•</span>
                        <span>Returns and exchanges</span>
                    </div>
                    <div class="flex items-start">
                        <span class="text-green-500 mr-2 mt-1">•</span>
                        <span>Payment and billing questions</span>
                    </div>
                    <div class="flex items-start">
                        <span class="text-green-500 mr-2 mt-1">•</span>
                        <span>Shipping and delivery</span>
                    </div>
                    <div class="flex items-start">
                        <span class="text-green-500 mr-2 mt-1">•</span>
                        <span>Account and profile help</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection