@extends('layouts.base')
{{-- @section('title', __('labels.case_studies')) --}}
@push('css')
    <!-- Bootstrap 5 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">

    <!-- Poppins -->
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link href="{{ asset('assets/custom/css/frontend/modules/products/style.css') }}?v=2" rel="stylesheet">
@endpush
@section('content')
    @include('modules.templates.banner', [
        'feature_image_url' => asset('assets/images/case-study.jpg'),
        'title' => 'Unsere Erfolgsgeschichten',
        'description' => 'Entdecken Sie Beispiele aus der Praxis, wie wir Unternehmen geholfen haben, Herausforderungen zu
                              meistern, Wachstum zu generieren und durch innovative Lösungen bemerkenswerte Ergebnisse zu
                              erzielen.',
    ])

    <section class="py-5">
        <div class="container">
            <div class="row g-4" id="caseStudiesGrid">
            </div>
        </div>
    </section>

    @include('modules.templates.copyright')
@endsection
@push('js')
    <script>
        const caseStudies = @json(isset($caseStudies) && !empty($caseStudies) ? $caseStudies : []);
    </script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="{{ asset('assets/custom/js/frontend/modules/casestudies/index.js') }}?v=2"></script>
    <script>
        $(document).ready(function() {
            renderCaseStudies(caseStudies);
            setupEventListeners();
        });
    </script>
@endpush