@extends('layouts.app')

@section('title', 'Our Services')

@section('content')
<div class="container mx-auto px-4 py-12">
    <x-breadcrumbs :items="[
        ['label' => 'Home', 'url' => route('home')],
        ['label' => 'Services']
    ]" />

    <div class="max-w-5xl mx-auto">
        <div class="text-center mb-12">
            <h1 class="text-5xl font-serif font-bold mb-4 text-black">Our Services</h1>
            <p class="text-lg text-[#4b5563]">
                Memorycloset Media offers a full suite of visual storytelling services tailored to your brand, event, or personal milestone.
            </p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div class="bg-white p-8 rounded-2xl shadow-md border border-[#d1d5db]">
                <h2 class="text-2xl font-serif font-bold mb-3 text-black">Photography</h2>
                <p class="text-black leading-relaxed">
                    From portraits and events to product and lifestyle shoots, we capture crisp, vibrant images that tell your story with style.
                </p>
            </div>
            <div class="bg-white p-8 rounded-2xl shadow-md border border-[#d1d5db]">
                <h2 class="text-2xl font-serif font-bold mb-3 text-black">Videography</h2>
                <p class="text-black leading-relaxed">
                    Cinematic video coverage for events, promos, and social content, with professional editing that brings your moments to life.
                </p>
            </div>
            <div class="bg-white p-8 rounded-2xl shadow-md border border-[#d1d5db]">
                <h2 class="text-2xl font-serif font-bold mb-3 text-black">Graphic Design</h2>
                <p class="text-black leading-relaxed">
                    Branding, posters, social media creatives, and print-ready designs that elevate your presence and communicate clearly.
                </p>
            </div>
            <div class="bg-white p-8 rounded-2xl shadow-md border border-[#d1d5db]">
                <h2 class="text-2xl font-serif font-bold mb-3 text-black">Event Coverage</h2>
                <p class="text-black leading-relaxed">
                    Reliable on-site coverage with quick turnaround options to keep your memories and campaigns fresh and shareable.
                </p>
            </div>
        </div>

        <div class="mt-12 bg-white p-8 rounded-2xl shadow-md border border-[#d1d5db] text-center">
            <h2 class="text-3xl font-serif font-bold mb-4 text-black">Ready to Book?</h2>
            <p class="text-black mb-6">
                Tell us about your project and we’ll tailor a package that fits your needs and budget.
            </p>
            <a href="{{ route('contact') }}" class="bg-black text-white px-8 py-3 rounded-full font-semibold hover:bg-[#1a1a1a] transition-all shadow-lg hover:shadow-xl inline-block">
                Contact Us
            </a>
        </div>
    </div>
</div>
@endsection