@extends('layouts.master')
@section('title', __('messages.work'))
@push('css')
    <style>
    .project {
    position: relative;
    overflow: hidden;
    border-radius: 8px; /* Optional: Rounded corners */
}

.project img {
    width: 100%;
    height: auto;
    transition: transform 0.3s ease; /* Smooth transition for the zoom effect */
}

/* Simple hover effect */
.project:hover img {
    transform: scale(1.05); /* Slight zoom */
}

        .active>.page-link, .page-link.active {
            background-color: #ea0029;
            border-color: #ea0029;
        }
        
        @media((max-width: 768px)){
            .section-title,
            .project-details{
                margin-bottom:35px !important;
            }
        }
    </style>
@endpush

@section('content')
    <!-- Our Work Section -->
    <section class="work">
        <div class="container">
            <div class="row align-items-center">
                <h2 class="section-title" data-aos="fade-up" style="padding-bottom: 55px;">
                    {{ __('messages.OUR WORK') }}
                </h2>

                @forelse ($projects as $project)
                    <div class="col-md-4 col-sm-12 project-details" data-aos="fade-up" data-aos-delay="100">
                        <a href="{{ route('project_details', $project->slug) }}">
                            @if ($project->home_img_project)
                                <img src="{{ asset('storage/' . $project->home_img_project) }}" alt="Project Image"
                                    data-aos="zoom-in" data-aos-delay="200">
                            @else
                                <div style="background: #D9D9D9; width: 100%; height: 423.871px;" data-aos="zoom-in"
                                    data-aos-delay="200"></div>
                            @endif
                            <h3 data-aos="fade-right" data-aos-delay="300">{{ $project->name }}</h3>
                            <p data-aos="fade-left" data-aos-delay="400">{{ $project->service->content }}</p>
                        </a>
                    </div>
                @empty
                    <p data-aos="fade-up">No projects available.</p>
                @endforelse
            </div>

            <!-- Pagination Links -->
            <div class="row">
                <div class="col-12 d-flex justify-content-center mt-4">
                    <!-- Use Bootstrap-styled pagination -->
                    {{ $projects->links('pagination::bootstrap-4') }}
                </div>
            </div>
        </div>
    </section>

    @include('layouts.cta')

@endsection