@extends('default.layouts.app')

@section('title', 'Customer Support')

@section('content')
<div class="min-h-screen bg-gray-50 py-12">
    <div class="max-w-7xl 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">Customer Support</h1>
            <p class="text-lg text-gray-600">We're here to help you</p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
            <div class="bg-white rounded-lg shadow-md p-8">
                <h2 class="text-2xl font-semibold mb-6">Contact Us</h2>
                <div class="space-y-4">
                    <div>
                        <h3 class="font-semibold">Phone Support</h3>
                        <p class="text-gray-600">1-800-RALPH-LAUREN</p>
                        <p class="text-sm text-gray-500">Mon-Fri: 9AM-6PM EST</p>
                    </div>
                    <div>
                        <h3 class="font-semibold">Email Support</h3>
                        <p class="text-gray-600">support@ralphlauren.com</p>
                        <p class="text-sm text-gray-500">We respond within 24 hours</p>
                    </div>
                    <div>
                        <h3 class="font-semibold">Live Chat</h3>
                        <p class="text-gray-600">Available 24/7 on our website</p>
                    </div>
                </div>
            </div>

            <div class="bg-white rounded-lg shadow-md p-8">
                <h2 class="text-2xl font-semibold mb-6">Frequently Asked Questions</h2>
                <div class="space-y-4">
                    <div>
                        <h3 class="font-semibold">Shipping Information</h3>
                        <p class="text-gray-600 text-sm">Learn about our shipping options and delivery times.</p>
                    </div>
                    <div>
                        <h3 class="font-semibold">Returns & Exchanges</h3>
                        <p class="text-gray-600 text-sm">Our hassle-free return policy details.</p>
                    </div>
                    <div>
                        <h3 class="font-semibold">Size Guide</h3>
                        <p class="text-gray-600 text-sm">Find your perfect fit with our size guides.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection