@extends('layouts.site')

@section('content')

{{-- Unified Hero & Testimonials Section --}}
<section class="wrapper image-wrapper bg-image bg-overlay bg-overlay-400" data-image-src="{{ asset('assets/img/photos/bg18.png') }}">
    
    {{-- Inline style override to ensure background image works if JS fails --}}
    <style>
        .wrapper.bg-image[data-image-src] {
            background-image: url("{{ asset('assets/img/photos/bg18.png') }}");
        }
    </style>

    <div class="container pt-24 pb-24 xl:pt-32 xl:pb-32 lg:pt-32 lg:pb-32 md:pt-32 md:pb-32">
        
        {{-- Hero Header --}}
        <div class="row mb-12 text-center">
            <div class="col-md-10 col-lg-8 col-xl-7 col-xxl-6 mx-auto">
                <h1 class="display-1 !mb-4 !text-[3rem] font-bold tracking-tight text-white">{!! t('Müşteri Görüşleri') !!}</h1>
                <p class="lead !text-[1.2rem] !leading-[1.6] font-medium mb-0 max-w-2xl mx-auto text-white opacity-90">
                    {!! t('Bizi müşterilerimizden dinleyin. Birlikte yazdığımız başarı hikayeleri.') !!}
                </p>
            </div>
            <!-- /column -->
        </div>
        <!-- /.row -->

        {{-- Testimonials Slider --}}
        <div class="swiper-container dots-closer dots-light dots-light-75" data-margin="30" data-dots="true" data-items-xl="3" data-items-md="2" data-items-xs="1">
            <div class="swiper">
                <div class="swiper-wrapper">
                    
                    {{-- Müşteri 1: Stellar Construction --}}
                    <div class="swiper-slide">
                        <div class="item-inner">
                            <div class="card border-0 h-full" style="background-color: rgba(255, 255, 255, 0.85); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.5); box-shadow: 0 10px 30px rgba(0,0,0,0.05);">
                                <div class="card-body flex-[1_1_auto] p-[40px]">
                                    <span class="ratings inline-block relative w-20 h-[0.8rem] text-[0.9rem] leading-none before:text-[rgba(0,0,0,0.1)] five !mb-4" style="color: #fcc032;"></span>
                                    
                                    <blockquote class="!text-[1rem] !leading-[1.7] font-medium m-[0_0_1rem] !mb-0 text-[#1e293b]">
                                        <p>“{!! t('Dijital dönüşüm yolculuğumuzda yanımızda oldukları için mutluyuz. Profesyonel yaklaşımları ve çözüm odaklı çalışmaları ile projelerimize değer kattılar.') !!}”</p>
                                        <div class="flex items-center text-left mt-6">
                                            <div class="info p-0">
                                                <h5 class="!mb-0 text-[#1e293b] !font-bold !text-[1.05rem]">Kerem Can Azak</h5>
                                                <p class="!mb-0 !text-[0.85rem] text-[#1e293b] opacity-70">Stellar Construction</p>
                                            </div>
                                        </div>
                                    </blockquote>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- Müşteri 2: Dijimind Akademi --}}
                    <div class="swiper-slide">
                        <div class="item-inner">
                            <div class="card border-0 h-full" style="background-color: rgba(255, 255, 255, 0.85); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.5); box-shadow: 0 10px 30px rgba(0,0,0,0.05);">
                                <div class="card-body flex-[1_1_auto] p-[40px]">
                                    <span class="ratings inline-block relative w-20 h-[0.8rem] text-[0.9rem] leading-none before:text-[rgba(0,0,0,0.1)] five !mb-4" style="color: #fcc032;"></span>
                                    <blockquote class="!text-[1rem] !leading-[1.7] font-medium m-[0_0_1rem] !mb-0 text-[#1e293b]">
                                        <p>“{!! t('Eğitim teknolojileri alanındaki vizyoner bakış açıları ve teknik altyapı konusundaki uzmanlıkları sayesinde hedeflediğimiz kitleye çok daha etkili bir şekilde ulaştık.') !!}”</p>
                                        <div class="flex items-center text-left mt-6">
                                            <div class="info p-0">
                                                <h5 class="!mb-0 text-[#1e293b] !font-bold !text-[1.05rem]">Servet Demir</h5>
                                                <p class="!mb-0 !text-[0.85rem] text-[#1e293b] opacity-70">Dijimind Akademi</p>
                                            </div>
                                        </div>
                                    </blockquote>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- Müşteri 3: Rhapsode Akademik Yayınevi --}}
                    <div class="swiper-slide">
                        <div class="item-inner">
                            <div class="card border-0 h-full" style="background-color: rgba(255, 255, 255, 0.85); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.5); box-shadow: 0 10px 30px rgba(0,0,0,0.05);">
                                <div class="card-body flex-[1_1_auto] p-[40px]">
                                    <span class="ratings inline-block relative w-20 h-[0.8rem] text-[0.9rem] leading-none before:text-[rgba(0,0,0,0.1)] five !mb-4" style="color: #fcc032;"></span>
                                    <blockquote class="!text-[1rem] !leading-[1.7] font-medium m-[0_0_1rem] !mb-0 text-[#1e293b]">
                                        <p>“{!! t('Akademik yayıncılık süreçlerimizi dijitalleştirirken sundukları yenilikçi çözümler ve hızlı destekleri için teşekkür ederiz. Güvenilir bir iş ortağı.') !!}”</p>
                                        <div class="flex items-center text-left mt-6">
                                            <div class="info p-0">
                                                <h5 class="!mb-0 text-[#1e293b] !font-bold !text-[1.05rem]">A. Cezmi Savaş</h5>
                                                <p class="!mb-0 !text-[0.85rem] text-[#1e293b] opacity-70">Rhapsode Akademik Yayınevi</p>
                                            </div>
                                        </div>
                                    </blockquote>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                <!--/.swiper-wrapper -->
            </div>
            <!-- /.swiper -->
        </div>
        <!-- /.swiper-container -->

    </div>
</section>
{{-- /Unified Section --}}

@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        var bgImages = document.querySelectorAll('.bg-image[data-image-src]');
        bgImages.forEach(function(elem) {
            var src = elem.getAttribute('data-image-src');
            elem.style.backgroundImage = 'url(' + src + ')';
        });
    });
</script>
@endpush