@extends('layouts.newapp')

@section('title', ($page->meta_title ?? null) ?: ($page->title ?? ui('projects_title', 'Projeler')))
@section('meta_description', $page->meta_description ?? '')
@section('meta_keywords', $page->meta_keywords ?? '')
@section('og_type', 'website')

@section('content')
<style>
.certificate-card {
    position: relative;
    width: 100%;
    height: 220px;
    overflow: hidden;
    border-radius: 12px;
}
.certificate-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
}

/* Hover zoom */
.certificate-card:hover img {
    transform: scale(1.08);
}

/* Overlay */
.certificate-card .overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0,0,0,0.75) 0%,
        rgba(0,0,0,0.15) 60%,
        rgba(0,0,0,0.05) 100%
    );
    opacity: 0;
    transition: all 0.35s ease;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 20px;
}

.certificate-card:hover .overlay {
    opacity: 1;
}

/* Başlıklar */
.certificate-card .project-title {
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 5px;
    transform: translateY(15px);
    transition: 0.35s ease;
}

.certificate-card .project-subtitle {
    color: rgba(255,255,255,0.85);
    font-size: 14px;
    line-height: 1.4;
    transform: translateY(15px);
    transition: 0.45s ease;
}

.certificate-card:hover .project-title,
.certificate-card:hover .project-subtitle {
    transform: translateY(0);
}

/* Zoom icon */
.certificate-card .zoom-icon {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
}

.certificate-item {
    display: block;
    text-decoration: none !important;
}

@media (max-width: 768px) {
    .certificate-card {
        height: 180px;
    }

    .certificate-card .project-title {
        font-size: 15px;
    }

    .certificate-card .project-subtitle {
        font-size: 12px;
    }
}
</style>

<section class="breadcrumb-area py-4 bg-light border-bottom">
    <div class="container">
        <div class="breadcrumb-item">
            <h2 class="title mb-3">{{ $page->title }}</h2>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    @foreach($breadcrumb as $item)
                        @if($loop->last)
                            <li class="breadcrumb-item active">{{ $item['title'] }}</li>
                        @else
                            <li class="breadcrumb-item"><a href="{{ $item['url'] }}">{{ $item['title'] }}</a></li>
                        @endif
                    @endforeach
                </ol>
            </nav>
        </div>
    </div>
</section>

<section class="certificates-gallery py-5">
    <div class="container">
        <div class="row g-4 justify-content-md-center">

            @php
                $certificates = [
                    [
                        'image' => '2.jpeg',
                        'title' => 'Poliüretan Zemin Sistemleri',
                        'subtitle' => 'SBR RULO ÜZERİ POLİÜRETAN INDOOR SİSTEM',
                    ],
                    [
                        'image' => '3.jpeg',
                        'title' => 'Akrilik Zemin Sistemleri',
                        'subtitle' => 'AKRİLİK STANDART SİSTEM',
                    ],
                    [
                        'image' => '5.jpeg',
                        'title' => 'Poliüretan Zemin Sistemleri',
                        'subtitle' => 'SBR RULO ÜZERİ POLİÜRETAN INDOOR SİSTEM',
                    ],
                    [
                        'image' => '6.jpeg',
                        'title' => 'Akrilik Zemin Sistemleri',
                        'subtitle' => 'AKRİLİK CUSHION SİSTEM',
                    ],
                    [
                        'image' => '7.jpeg',
                        'title' => 'Akrilik Zemin Sistemleri',
                        'subtitle' => 'AKRİLİK STANDART SİSTEM',
                    ],
                    [
                        'image' => '8.jpeg',
                        'title' => 'Akrilik Zemin Sistemleri',
                        'subtitle' => 'AKRİLİK CUSHION SİSTEM',
                    ],
                    [
                        'image' => '9.jpeg',
                        'title' => 'Poliüretan Zemin Sistemleri',
                        'subtitle' => 'SBR RULO ÜZERİ POLİÜRETAN INDOOR SİSTEM',
                    ],
                    [
                        'image' => '10.jpeg',
                        'title' => 'Poliüretan Zemin Sistemleri',
                        'subtitle' => 'SBR RULO ÜZERİ POLİÜRETAN INDOOR SİSTEM',
                    ],
                    [
                        'image' => '11.jpeg',
                        'title' => 'Poliüretan Zemin Sistemleri',
                        'subtitle' => 'SBR RULO ÜZERİ POLİÜRETAN INDOOR SİSTEM',
                    ],
                    [
                        'image' => '14.jpeg',
                        'title' => 'Akrilik Zemin Sistemleri',
                        'subtitle' => 'AKRİLİK SOFT SİSTEM',
                    ],
                    [
                        'image' => '15.jpeg',
                        'title' => 'Akrilik Zemin Sistemleri',
                        'subtitle' => 'AKRİLİK SOFT SİSTEM',
                    ],
                    [
                        'image' => '16.jpeg',
                        'title' => 'Akrilik Zemin Sistemleri',
                        'subtitle' => 'AKRİLİK SOFT SİSTEM',
                    ],
                    [
                        'image' => '17.jpeg',
                        'title' => 'Akrilik Zemin Sistemleri',
                        'subtitle' => 'AKRİLİK CUSHION SİSTEM',
                    ],
                    [
                        'image' => '18.jpeg',
                        'title' => 'Akrilik Zemin Sistemleri',
                        'subtitle' => 'AKRİLİK SOFT SİSTEM',
                    ],
                    [
                        'image' => '19.jpeg',
                        'title' => 'Poliüretan Zemin Sistemleri',
                        'subtitle' => 'KENNCOAT POLİÜRETAN SPREY SİSTEM',
                    ],
                    [
                        'image' => '20.jpeg',
                        'title' => 'Poliüretan Zemin Sistemleri',
                        'subtitle' => 'SANDVİÇ SİSTEM',
                    ],
                    [
                        'image' => '21.jpeg',
                        'title' => 'Akrilik Zemin Sistemleri',
                        'subtitle' => 'AKRİLİK SOFT SİSTEM',
                    ],
                    [
                        'image' => '22.jpeg',
                        'title' => 'Akrilik Zemin Sistemleri',
                        'subtitle' => 'AKRİLİK SOFT SİSTEM',
                    ],
                    [
                        'image' => '23.jpeg',
                        'title' => 'Akrilik Zemin Sistemleri',
                        'subtitle' => 'AKRİLİK CUSHION SİSTEM',
                    ],
                    [
                        'image' => '24.jpeg',
                        'title' => 'Akrilik Zemin Sistemleri',
                        'subtitle' => 'AKRİLİK CUSHION SİSTEM',
                    ],
                    [
                        'image' => '25.jpeg',
                        'title' => 'Poliüretan Zemin Sistemleri',
                        'subtitle' => 'STANDART SİSTEM',
                    ],
                    [
                        'image' => '26.jpeg',
                        'title' => 'Poliüretan Zemin Sistemleri',
                        'subtitle' => 'SANDVİÇ SİSTEM',
                    ],
                    [
                        'image' => '28.jpeg',
                        'title' => 'Poliüretan Zemin Sistemleri',
                        'subtitle' => 'SANDVİÇ SİSTEM',
                    ],
                ];
            @endphp

            @foreach($certificates as $item)
                @php
                    $rel = 'assets/projects-gallery/'.$item['image'];
                    $imgPath = public_path($rel);
                    $portrait = false;
                    if (is_file($imgPath)) {
                        $size = @getimagesize($imgPath);
                        if ($size && $size[1] > $size[0]) {
                            $portrait = true;
                        }
                    }
                @endphp
                <div class="col-lg-3 col-md-4 col-sm-6 col-6">
                    <a href="{{ asset($rel) }}"
                       class="certificate-item glightbox"
                       data-gallery="Projelerimiz">
                        <div class="certificate-card shadow-sm">
                            <img src="{{ asset($rel) }}"
                                 alt="{{ $item['title'] }}"
                                 class="{{ $portrait ? 'portrait' : '' }}"
                                 loading="lazy">
                            <div class="overlay">
                                <div class="zoom-icon">
                                    <i class="fa fa-search-plus"></i>
                                </div>
                                <h3 class="project-title">{{ $item['title'] }}</h3>
                                <div class="project-subtitle">{{ $item['subtitle'] }}</div>
                            </div>
                        </div>
                    </a>
                </div>
            @endforeach

        </div>
    </div>
</section>
@endsection