@extends('default.layouts.app')

@section('title', 'Services')

@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">Ralph Lauren Services</h1>
            <p class="text-lg text-gray-600">Personalized experiences and exceptional service</p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-8">
            <div class="bg-white rounded-lg shadow-md p-6 text-center">
                <div class="text-4xl mb-4">👔</div>
                <h3 class="text-xl font-semibold mb-2">Personal Styling</h3>
                <p class="text-gray-600 mb-4">Work with our expert stylists to curate your perfect wardrobe</p>
                <button class="bg-black text-white px-4 py-2 rounded-md hover:bg-gray-800 transition duration-200">Book Now</button>
            </div>

            <div class="bg-white rounded-lg shadow-md p-6 text-center">
                <div class="text-4xl mb-4">📏</div>
                <h3 class="text-xl font-semibold mb-2">Alterations</h3>
                <p class="text-gray-600 mb-4">Professional tailoring services to ensure perfect fit</p>
                <button class="bg-black text-white px-4 py-2 rounded-md hover:bg-gray-800 transition duration-200">Learn More</button>
            </div>

            <div class="bg-white rounded-lg shadow-md p-6 text-center">
                <div class="text-4xl mb-4">🎨</div>
                <h3 class="text-xl font-semibold mb-2">Custom Orders</h3>
                <p class="text-gray-600 mb-4">Create bespoke pieces designed just for you</p>
                <button class="bg-black text-white px-4 py-2 rounded-md hover:bg-gray-800 transition duration-200">Get Started</button>
            </div>

            <div class="bg-white rounded-lg shadow-md p-6 text-center">
                <div class="text-4xl mb-4">🚚</div>
                <h3 class="text-xl font-semibold mb-2">Concierge Delivery</h3>
                <p class="text-gray-600 mb-4">White-glove delivery service for special occasions</p>
                <button class="bg-black text-white px-4 py-2 rounded-md hover:bg-gray-800 transition duration-200">Schedule</button>
            </div>

            <div class="bg-white rounded-lg shadow-md p-6 text-center">
                <div class="text-4xl mb-4">💍</div>
                <h3 class="text-xl font-semibold mb-2">Gift Wrapping</h3>
                <p class="text-gray-600 mb-4">Elegant packaging for your special gifts</p>
                <button class="bg-black text-white px-4 py-2 rounded-md hover:bg-gray-800 transition duration-200">View Options</button>
            </div>

            <div class="bg-white rounded-lg shadow-md p-6 text-center">
                <div class="text-4xl mb-4">📞</div>
                <h3 class="text-xl font-semibold mb-2">VIP Support</h3>
                <p class="text-gray-600 mb-4">Dedicated concierge service for our valued customers</p>
                <button class="bg-black text-white px-4 py-2 rounded-md hover:bg-gray-800 transition duration-200">Contact Us</button>
            </div>
        </div>

        <div class="bg-white rounded-lg shadow-md p-8">
            <h2 class="text-2xl font-semibold mb-6 text-center">Why Choose Ralph Lauren Services?</h2>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                <div class="text-center">
                    <h3 class="text-lg font-semibold mb-2">Expertise</h3>
                    <p class="text-gray-600">Decades of fashion knowledge and craftsmanship</p>
                </div>
                <div class="text-center">
                    <h3 class="text-lg font-semibold mb-2">Personalization</h3>
                    <p class="text-gray-600">Tailored experiences designed around your needs</p>
                </div>
                <div class="text-center">
                    <h3 class="text-lg font-semibold mb-2">Quality</h3>
                    <p class="text-gray-600">Uncompromising standards in every service we provide</p>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection