@extends('layouts.frontend')

@section('title', 'Projects – Skyline International Contracting Company')
@section('meta_description', 'Delivery experience across the Kingdom – infrastructure, temporary facilities, commercial buildings, industrial steel and integrated MEP works.')

@section('content')
    <section class="page-hero">
        <img class="" src="{{ asset('images/hero-construction.jpg') }}" alt="Skyline Projects">
        <div class="page-hero-overlay"></div>
        <div class="container page-hero-content">
            <p class="eyebrow light-eyebrow">Selected portfolio</p>
            <h1>Delivery experience across the Kingdom.</h1>
        </div>
    </section>

    <section class="section">
        <div class="container">
            <div class="portfolio-toolbar">
                <div>
                    <p class="eyebrow">Projects</p>
                    <h2>Our recent delivery record.</h2>
                </div>
                @if($categories->count())
                    <div class="category-chips">
                        @foreach($categories as $category)
                            <span>{{ $category->name }}</span>
                        @endforeach
                    </div>
                @endif
            </div>
            <div class="projects-grid all-projects-grid">
                @forelse($projects as $project)
                    <a class="project-card" href="{{ route('projects.show', $project->slug) }}">
                        <div class="project-image-wrap">
                            <img src="{{ \App\Services\FileUploadService::url($project->featured_image) }}" alt="{{ $project->title }}" onerror="this.src='{{ asset('images/projects/canteen.jpg') }}'">
                            <span>{{ $project->category->name }}</span>
                        </div>
                        <div class="project-card-body">
                            <p class="project-client">{{ $project->client }}</p>
                            <h3>{{ $project->title }}</h3>
                            <p>{{ $project->short_description }}</p>
                            <div class="project-meta">
                                <strong>{{ $project->project_value }}</strong>
                                <span>{{ $project->duration }}</span>
                            </div>
                        </div>
                    </a>
                @empty
                    <p class="text-muted">Projects coming soon.</p>
                @endforelse
            </div>
            <div class="mt-4">{{ $projects->links() }}</div>
        </div>
    </section>
@endsection
