@extends('layouts.main')

@section('title', 'Services')

@section('content')
    <!-- Breadcrumb -->
    <x-breadcrumb title="Our Services" />

    <section class="py-24 bg-white">
        <div class="container mx-auto px-4 reveal">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                @foreach($services as $service)
                <x-service-card 
                    title="{{ $service->t('title') }}" 
                    description="{{ $service->t('description') }}" 
                    link="{{ route('services.show', $service->slug) }}" 
                    image="{{ $service->image ? 'storage/'.$service->image : null }}"
                    icon="{{ $service->icon }}"
                />
                @endforeach
            </div>
        </div>
    </section>

    <!-- Project Inquiry Banner -->
    <section class="py-20 bg-gray-900 border-t border-gray-800">
        <div class="container mx-auto px-4 flex flex-col md:flex-row items-center justify-between text-center md:text-left gap-8">
            <div class="space-y-4">
                <h3 class="text-3xl font-black text-white uppercase italic tracking-tighter">Need a Custom Gas Solution?</h3>
                <p class="text-gray-400">Our engineers are ready to build based on your unique site requirements.</p>
            </div>
            <a href="{{ route('contact') }}" class="px-12 py-4 bg-[#CC2128] text-white font-bold uppercase tracking-widest text-sm hover:bg-[#A81B21] transition-all">Submit an Inquiry</a>
        </div>
    </section>
@endsection