@extends('layouts.app')

@section('title', 'Ürünlerimiz - Çetinkaya Metal')
@section('description', 'Çetinkaya Metal Ürünler')
@section('keywords', 'Ürünler, Çetinkaya Metal, cetinkayametal.com.tr')

@section('content')

<br /><br /><br /><br />

<!-- start page title -->
<div class="container">
    <div class="row align-items-center justify-content-center">
        <div class="col-12 col-xl-6 col-lg-8 text-center position-relative page-title-double-large">
            <div class="d-flex flex-column justify-content-center">
                <h1 class="text-dark-gray alt-font ls-minus-1px fw-700 mb-20px AnasayfaUrunHead">{{ cevir('Ürünlerimiz') }}</h1>
            </div>
        </div>
    </div>
</div>
<!-- end page title -->

<!-- start section -->
<section class="pt-0 ps-6 pe-6 xxl-ps-4 xxl-pe-4 lg-px-0 Urunlerimiz">
    <div class="container">
        <div class="row">
            <div class="col-12 text-center">
                <ul class="portfolio-filter nav nav-tabs justify-content-center border-0 fw-500 alt-font pb-2 urunmenu">
                    @foreach ($menuKategoriler as $item)
                        @php
                            $isActive = $kategoriAdi && toSeo($item->adi) === toSeo($kategoriAdi);
                        @endphp
                        <li class="nav {{ $isActive ? 'active' : '' }}">
                            <a data-filter=".{{ $item->id }}" href="/urun-kategori/{{ toSeo($item->adi) }}">
                                {!! cevir($item->adi) !!}
                            </a>
                        </li>
                    @endforeach
                </ul>
            </div>
        </div>
    </div>

    <div class="container-fluid">
        <div class="row">
            <div class="col-12 filter-content">
                <ul class="portfolio-boxed portfolio-wrapper grid-loading grid grid-5col xxl-grid-5col xl-grid-5col lg-grid-3col md-grid-2col sm-grid-2col xs-grid-1col gutter-large text-center">
                    <li class="grid-sizer"></li>
                    @foreach ($urunler as $urun)
                        <li class="grid-item {{ $urun->kategori_id }} transition-inner-all">
                            <a href="/urun/{{ toSeo($urun->adi) }}">
                                <div class="portfolio-box border-radius-4px">
                                    <div class="portfolio-image border-radius-4px">
                                        @if ($urun->renk)
                                            <span class="btn btn-small btn-rounded btn-white text-dark-gray btn-box-shadow ps-15px pe-15px pt-5px pb-5px lh-16 ls-0px fw-700 position-absolute right-25px top-25px">{{ cevir('Beyaz') }}</span>
                                            <span class="btn btn-small btn-rounded btn-white text-dark-gray btn-box-shadow ps-15px pe-15px pt-5px pb-5px lh-16 ls-0px fw-700 position-absolute right-25px top-70px">{{ cevir('Siyah') }}</span>
                                        @endif
                                        <img src="{{ $urun->image_url }}" alt="{{ $urun->adi }}" loading="lazy" data-no-retina />
                                        <div class="portfolio-hover d-flex justify-content-center flex-column">
                                            <div class="portfolio-icon d-flex flex-row justify-content-center align-items-center"></div>
                                        </div>
                                        <div class="portfolio-overlay bg-dark-gray" style="background-color: #637c8e;"></div>
                                    </div>
                                    <div class="portfolio-caption pt-10px pb-10px lg-pt-10px lg-pb-10px">
                                        <div class="row">
                                            <div class="col-12">
                                                <span class="fs-17 fw-600 text-dark-gray uruna" style="text-align:left">{!! cevir($urun->adi) !!}</span>
                                                <i class="fa-solid fa-circle-right align-middle icon-small text-base-color"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </li>
                    @endforeach
                </ul>
            </div>
        </div>
    </div>
</section>
<!-- end section -->

<!-- start CTA -->
<div class="container overlap-section">
    <div class="row g-0 justify-content-center align-items-center bg-base-color border-radius-6px ps-7 pe-7 pt-4 pb-4 lg-p-30px sm-p-20px mb-7">
        <div class="col-lg-6 col-md-7 text-center text-lg-start md-mb-20px">
            <h4 class="text-white fw-300 mb-0 ls-minus-1px">
                {!! cevir("Bilgi almak ve sipariş vermek için bizimle  <span class='fw-700 text-highlight'>iletişime<span class='bg-white h-10px bottom-10px opacity-3 separator-animation'></span></span> geçebilirsiniz.") !!}
            </h4>
        </div>
        <div class="col-auto col-lg-5 icon-with-text-style-08 offset-lg-1">
            <div class="feature-box feature-box-left-icon-middle overflow-hidden">
                <div class="feature-box-icon feature-box-icon-rounded w-80px h-80px rounded-circle bg-dark-gray-transparent-light me-10px lg-me-20px">
                    <i class="bi bi-envelope icon-very-medium text-white"></i>
                </div>
                <div class="feature-box-content last-paragraph-no-margin">
                    <h6 class="d-inline-block fw-300 mb-0">
                        <a href="mailto:satis@cetinkayametal.com.tr" class="text-white text-decoration-line-bottom-medium text-white-hover">satis@cetinkayametal.com.tr</a>
                    </h6>
                </div>
            </div>
            <div class="feature-box feature-box-left-icon-middle overflow-hidden" id="bilgipanosutel">
                <div class="feature-box-icon feature-box-icon-rounded w-80px h-80px rounded-circle bg-dark-gray-transparent-light me-10px lg-me-20px">
                    <i class="bi bi-telephone icon-very-medium text-white"></i>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- end CTA -->

@endsection