@extends('frontend.layout.site')

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

@section('content')
<!-- Projects Start -->
<div class="container-fluid projects py-5 mb-5">
    <div class="container">
        <!-- Section Header -->
        <div class="text-center mx-auto pb-5 wow fadeIn" data-wow-delay=".3s" style="max-width: 600px;">
            <h5 class="text-primary">Our Projects</h5>
            <h1>Our Recently Completed Projects</h1>
        </div>

        <!-- Projects Grid -->
        <div class="row g-5 projects-inner">
            @foreach($projects as $project)
            <div class="col-md-6 col-lg-4 wow fadeIn" data-wow-delay=".{{ $loop->iteration * 2 }}s">
                <div class="card h-100 shadow-sm project-item d-flex flex-column">
                    <!-- Featured Image -->
                    @if($project->featured_image)
                        <img src="{{ asset('uploads/' . $project->featured_image) }}" 
                             class="card-img-top rounded project-img" 
                             alt="{{ $project->title }}">
                    @else
                        <img src="/csstemplate/assets/frontend/img/default-project.jpg" 
                             class="card-img-top rounded project-img" 
                             alt="{{ $project->title }}">
                    @endif

                    <!-- Card Body -->
                    <div class="card-body d-flex flex-column justify-content-between text-center">
                        <div>
                            <h4 class="card-title">{{ $project->title }}</h4>
                            <p class="card-text text-muted">{{ Str::limit($project->short_description, 120) }}</p>
                        </div>
                        <a href="{{ route('projects.show', ['slug' => $project->slug]) }}" 
                           class="btn btn-secondary btn-sm rounded-pill mt-3">Read More</a>
                    </div>
                </div>
            </div>
            @endforeach
        </div>

        <!-- Pagination -->
        <div class="d-flex justify-content-center mt-5">
            {{ $projects->links('pagination::bootstrap-5') }}
        </div>
    </div>
</div>
<!-- Projects End -->

@push('styles')
<style>
    /* Ensure all project images have the same height and crop nicely */
    .project-img {
        height: 400px;
        width: 100%;
        object-fit: cover;
    }

    /* Uniform card hover effect */
    .project-item {
        transition: transform 0.3s, box-shadow 0.3s;
    }

    .project-item:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.15);
    }

    /* Ensure card bodies are the same height */
    .projects-inner .card {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .projects-inner .card-body {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
</style>
@endpush
@endsection