@extends('layouts.app')

@section('title', 'Services | IBS')
@section('description', 'Explore the comprehensive plumbing and general contracting services offered by International Building Services LLC, including commercial plumbing, home remodeling, and new construction.')

@section('content')

<x-subpage-hero 
    title="Our Services" 
    description="IBS delivers reliable construction solutions backed by decades of experience and a commitment to quality."
/>

<x-breadcrumbs :items="$breadcrumbs" />

<section class="bg-gray-100 py-20">
    <div class="max-w-7xl mx-auto px-6 text-center">
        <div class="grid gap-10 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
            @foreach ($services as $index => $service)
                <a href="{{ route('services.show', $service->slug) }}" class="bg-white rounded-lg shadow hover:shadow-lg transition duration-300" data-aos="fade-up" data-aos-delay="{{ 100 * $index }}">
                    <img src="{{ asset('storage/images/services/' . $service->slug . '.jpg') }}" alt="{{ $service->title }}" class="w-full h-48 object-cover rounded-t-lg" width="500" height="192" loading="lazy">
                    <div class="p-6 text-center">
                        <div class="text-yellow-600 text-3xl mb-4">
                            <i class="fas {{ $service->icon }}"></i>
                        </div>
                        <h3 class="text-xl font-bold text-gray-800 mb-2">{{ $service->title }}</h3>
                        <p class="text-gray-600">{{ $service->description }}</p>
                    </div>
                </a>
            @endforeach
        </div>
    </div>
</section>

@endsection