@extends('layouts.app')

@section('title', 'Our Projects | IBS')
@section('description', 'Explore a portfolio of International Building Services LLC\'s completed projects, showcasing our expertise in commercial plumbing, general contracting, and remodeling across various industries.')

@section('content')


<x-subpage-hero 
    title="Our Projects" 
    description="Every space tells a story. IBS delivers industry-leading solutions in commercial plumbing, flooring, and complete remodels—from concept to completion."
/>

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

{{-- Project Grid --}}
<section class="bg-gray-100 py-20">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid gap-10 sm:grid-cols-2 lg:grid-cols-3">
            @foreach ($projects as $index => $project)
                <a href="{{ route('projects.show', $project->slug) }}" 
                    class="group bg-white rounded-xl overflow-hidden shadow hover:shadow-xl border border-gray-100 transition-all duration-300"
                    data-aos="fade-up" data-aos-delay="{{ $index * 100 }}"
                >
                    <img src="{{ $project->images->first() ? asset('storage/' . $project->images->first()->image_path) : asset('storage/images/projects/' . ['commercial-office-renovation.jpg', 'luxury-home-interior-design.jpg', 'modern-kitchen-transformation.jpg'][$index % 3]) }}" alt="{{ $project->title }}" class="w-full h-56 object-cover group-hover:scale-105 transition-transform duration-300" width="800" height="224" loading="lazy">
                    <div class="p-6">
                        <h3 class="text-xl font-bold text-gray-800 mb-1">{{ $project->title }}</h3>
                        <p class="text-sm text-gray-500 mb-2">{{ $project->client }} • {{ $project->completed_date ? $project->completed_date->format('M Y') : 'N/A' }}</p>
                        <p class="text-gray-600 text-sm">{{ $project->description }}</p>
                    </div>
                </a>
            @endforeach
        </div>
    </div>
</section>

{{-- CTA --}}
<section class="bg-gray-800 text-white py-20">
    <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 text-center" data-aos="fade-up">
        <h2 class="text-4xl font-extrabold mb-4">Your Vision. Our Expertise.</h2>
        <p class="mb-8 text-xl">Partner with IBS for excellence in construction, renovation, and commercial precision work across the U.S.</p>
        <a href="{{ route('contact') }}" class="inline-block bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-4 px-10 rounded-full text-lg transition-all duration-300 transform hover:scale-105 shadow-xl">
            Contact Us
        </a>
    </div>
</section>

@endsection