@extends('layouts.frontend')

@section('title', 'Certifications – Skyline International Contracting Company')
@section('meta_description', 'Certifications and credentials held by Skyline International Contracting Company.')

@section('content')
    <section class="page-hero">
        <img class="" src="{{ asset('images/hero-construction.jpg') }}" alt="Skyline Certifications">
        <div class="page-hero-overlay"></div>
        <div class="container page-hero-content">
            <p class="eyebrow light-eyebrow">Credentials</p>
            <h1>Certifications that underpin our delivery.</h1>
        </div>
    </section>

    <section class="section">
        <div class="container">
            <div class="portfolio-toolbar">
                <div>
                    <p class="eyebrow">Certifications &amp; credentials</p>
                    <h2>Independent recognition of quality and capability.</h2>
                </div>
            </div>
            <div class="certificate-grid">
                @forelse($certifications as $certification)
                    <article class="certificate-card">
                        @if($certification->image || $certification->file)
                            <a href="{{ \App\Services\FileUploadService::url($certification->file ?: $certification->image) }}" target="_blank">
                                @if($certification->image)
                                    <img src="{{ \App\Services\FileUploadService::url($certification->image) }}" alt="{{ $certification->name }}">
                                @else
                                    <img src="{{ asset('images/certificate-placeholder.png') }}" alt="{{ $certification->name }}" onerror="this.onerror=null;this.style.display='none'">
                                @endif
                            </a>
                        @endif
                        <div style="padding:26px 26px 30px;border-top:3px solid var(--red)">
                            <h3 style="font-size:22px">{{ $certification->name }}</h3>
                            @if($certification->issuing_organization)
                                <p style="color:var(--muted);font-size:13px;margin-top:6px">{{ $certification->issuing_organization }}</p>
                            @endif
                            @if($certification->certificate_number)
                                <p style="color:var(--muted);font-size:12px;margin-top:4px">No. {{ $certification->certificate_number }}</p>
                            @endif
                        </div>
                    </article>
                @empty
                    <p class="text-muted">Certifications coming soon.</p>
                @endforelse
            </div>
        </div>
    </section>
@endsection
