@extends('layouts.app')

@section('title', 'Anasayfa - Çetinkaya Metal')
@section('description', 'Çetinkaya Metal - Anasayfa')
@section('keywords', 'Çetinkaya Metal, Anasayfa, cetinkayametal.com.tr')

@section('content')

<!-- start banner slider -->
<section class="p-0 top-space-margin">
    <div class="swiper full-screen md-h-600px sm-h-500px swiper-number-pagination-style-01 magic-cursor drag-cursor"
         data-slider-options='{ "slidesPerView": 1, "loop": true, "pagination": { "el": ".swiper-number", "clickable": true }, "navigation": { "nextEl": ".slider-one-slide-next-1", "prevEl": ".slider-one-slide-prev-1" }, "autoplay": { "delay": 4000, "disableOnInteraction": false }, "keyboard": { "enabled": true, "onlyInViewport": true }, "effect": "slide" }'
         data-number-pagination="1">
        <div class="swiper-wrapper">

            <div class="swiper-slide cover-background" style="background-image:url('/images/bursa.jpg');"></div>

            <div class="swiper-slide cover-background" style="background-image:url('/images/Banner1.png');">
                <div class="container h-100">
                    <div class="row align-items-center h-100">
                        <div class="col-md-8 position-relative text-white" data-anime='{ "el": "childs", "translateY": [30, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 300, "easing": "easeOutQuad" }'>
                            <div class="alt-font fs-100 lg-fs-90 lh-90 lg-lh-80 mb-45px sm-mb-25px w-80 xs-w-100 ls-minus-2px sliderbaslik">
                                {!! cevir("1982'den beri bakır alaşımlarında<br /><span class='fw-700'>Yüksek Kalite<br />Uzman Kadro<br />Profesyonel Hizmet</span>") !!}
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="swiper-slide cover-background" style="background-image:url('/images/Banner4.png');">
                <div class="container h-100">
                    <div class="row align-items-center h-100">
                        <div class="col-md-8 position-relative text-white" data-anime='{ "el": "childs", "translateY": [30, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 300, "easing": "easeOutQuad" }'>
                            <div class="alt-font fs-100 lg-fs-90 lh-90 lg-lh-80 mb-45px sm-mb-25px w-80 xs-w-100 ls-minus-2px sliderbaslik">
                                {!! cevir("Pirinç, Bakır ve Bronz yarı mamüllerinde<br><span class='fw-700'>Güçlü Stok<br>Profesyonel Hizmet</span>") !!}
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="swiper-slide cover-background" style="background-image:url('/images/Banner3.png');">
                <div class="container h-100">
                    <div class="row align-items-center h-100">
                        <div class="col-md-8 position-relative text-white" data-anime='{ "el": "childs", "translateY": [30, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 300, "easing": "easeOutQuad" }'>
                            <div style="color:black;" class="alt-font fs-100 lg-fs-90 lh-90 lg-lh-80 mb-45px sm-mb-25px w-80 xs-w-100 ls-minus-2px sliderbaslik">
                                {!! cevir("Demir - Çelik yarı mamül gruplarımız<br /><span class='fw-700'>Çorlu Şubemizde<br /> Hizmetinizde</span>") !!}
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="swiper-slide cover-background" style="background-image:url('/images/Banner2.png');">
                <div class="container h-100">
                    <div class="row align-items-center h-100">
                        <div class="col-md-8 position-relative text-white" data-anime='{ "el": "childs", "translateY": [30, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 300, "easing": "easeOutQuad" }'>
                            <div class="alt-font fs-100 lg-fs-90 lh-90 lg-lh-80 mb-45px sm-mb-25px w-80 xs-w-100 ls-minus-2px sliderbaslik">
                                {!! cevir("Demir Dışı Metallerde Uzmanlık <span class='fw-700'>Hizmette Mükemmellik!</span>") !!}
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>

        <div class="container">
            <div class="row g-0">
                <div class="col-12 position-relative">
                    <div class="swiper-pagination left-0 text-start swiper-pagination-clickable swiper-number fs-14 alt-font ls-05px slidernumber"></div>
                </div>
            </div>
        </div>

        <div class="slider-one-slide-prev-1 icon-very-small text-white swiper-button-prev slider-navigation-style-06"><i class="line-icon-Arrow-OutLeft icon-medium"></i></div>
        <div class="slider-one-slide-next-1 icon-very-small text-white swiper-button-next slider-navigation-style-06"><i class="line-icon-Arrow-OutRight icon-medium"></i></div>
    </div>
</section>
<!-- end banner slider -->

<!-- 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">
                    <li class="nav active">
                        <a data-filter=".1" href="?kategoriId=1"></a>
                    </li>
                    @foreach ($menuKategoriler as $item)
                        <li class="nav {{ request('kategoriId') == $item->id ? 'active' : '' }}">
                            <a data-filter=".{{ $item->id }}" href="?kategoriId={{ $item->id }}">{{ 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">
                                        <img loading="lazy" src="{{ $urun->image_url }}" alt="{{ $urun->adi }}" data-no-retina />
                                        @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
                                        <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 bilgipanosu">
                {!! 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 offset-lg-1">
            <a href="/iletisim" class="btn btn-white btn-large rounded-corner-3px fw-700">İletişime Geç</a>
        </div>
    </div>
</div>
<!-- end CTA -->

<!-- start sektörler -->
<section class="overflow-hidden bg-gradient-very-light-gray xs-pb-30px sektorler">
    <div class="container-fluid">
        <div class="row justify-content-center">
            <div class="col-xxl-4 col-xl-5 col-lg-7 col-sm-9 text-center">
                <h2 class="text-dark-gray alt-font ls-minus-1px fw-700 sektora">{!! cevir('Hizmet Verdiğimiz Sektörler') !!}</h2>
            </div>
        </div>
        <div class="row">
            <div class="col-12 position-relative p-0">
                <div class="outside-box-right-15 sm-outside-box-right-0 outside-box-left-15 sm-outside-box-left-0">
                    <div class="swiper"
                         data-slider-options='{ "slidesPerView": 1, "spaceBetween": 30, "loop": true, "autoplay": { "delay": 2000, "disableOnInteraction": false }, "keyboard": { "enabled": true, "onlyInViewport": true }, "breakpoints": { "1200": { "slidesPerView": 6 }, "992": { "slidesPerView": 4 }, "768": { "slidesPerView": 3 }, "320": { "slidesPerView": 1 } }, "effect": "slide" }'>
                        <div class="swiper-wrapper pt-20px pb-20px">

                            @php
                                $sektorler = [
                                    ['url' => '/Sektorler/Havacilik',           'img' => 'HAVACILIK.png',                    'ad' => 'Havacılık'],
                                    ['url' => '/Sektorler/TalasliImalat',        'img' => 'TALAŞLI İMALAT.png',               'ad' => 'Talaşlı İmalat'],
                                    ['url' => '/Sektorler/SavunmaSanayi',        'img' => 'SAVUNMA.png',                      'ad' => 'Savunma Sanayi'],
                                    ['url' => '/Sektorler/OtomotivSanayi',       'img' => 'OTOMOTİV.png',                     'ad' => 'Otomotiv Sanayi'],
                                    ['url' => '/Sektorler/MakineImalati',        'img' => 'MAKİNE İMALATI.png',               'ad' => 'Makine İmalatı'],
                                    ['url' => '/Sektorler/Kuyumculuk',           'img' => 'KUYUMCULUK MÜCEVHERAT.png',        'ad' => 'Kuyumculuk Mücevherat'],
                                    ['url' => '/Sektorler/DekorasyonMimarisi',   'img' => 'DEKORASYON MİMARİ.png',            'ad' => 'Dekorasyon Mimari'],
                                    ['url' => '/Sektorler/ArmaturVana',          'img' => 'ARMATÜR VE VANA.png',              'ad' => 'Armatür Vana'],
                                    ['url' => '/Sektorler/ElektrikElektronik',   'img' => 'ELEKTRİK ELEKTRON.png',            'ad' => 'Elektrik Elektronik'],
                                    ['url' => '/Sektorler/IsitmaVeSogutma',      'img' => 'ISITMA SOĞUTMA SİSTEMLERİ.png',   'ad' => 'Isıtma ve Soğutma Sistemleri'],
                                    ['url' => '/Sektorler/GemiVeMarinSanayi',    'img' => 'GEMİ MARİN.png',                  'ad' => 'Gemi ve Marin Sanayi'],
                                    ['url' => '/Sektorler/KalipVeAmbalajSanayi', 'img' => 'KALIP AMBALAJ.png',               'ad' => 'Kalıp ve Ambalaj Sanayi'],
                                ];
                            @endphp

                            @foreach ($sektorler as $sektor)
                                <div class="swiper-slide sm-p-15px">
                                    <div class="box-shadow-extra-large services-box-style-01 hover-box border-radius-8px overflow-hidden last-paragraph-no-margin">
                                        <a href="{{ $sektor['url'] }}">
                                            <div class="position-relative box-image">
                                                <img loading="lazy" src="/images/sektorfotograflari/{{ $sektor['img'] }}" alt="{{ $sektor['ad'] }}">
                                                <div class="box-overlay bg-dark-gray"></div>
                                            </div>
                                        </a>
                                        <div class="p-11 bg-white text-center">
                                            <a href="{{ $sektor['url'] }}" class="d-inline-block fs-18 fw-600 ls-minus-05px text-dark-gray mb-5px">
                                                {!! cevir($sektor['ad']) !!}
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            @endforeach

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- end sektörler -->

@endsection