@extends('frontend.layouts.app')
@section('style')
    <style>
        p {
            line-height: 1.8;
            font-size: 1.1rem;
        }

        .service-card {
            transition: all 0.3s ease-in-out;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        .service-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
        }

        .feature-box {
            text-align: center;
            padding: 15px;
            background: #f8f9fa;
            border-radius: 10px;
            transition: all 0.3s;
        }

        .feature-box:hover {
            background: #7dbd42;
            color: white;
        }

        .feature-box i {
            margin-bottom: 15px;
            margin-left: 16px;
            margin-top: 15px;
        }

        .feature-box h5 {
            margin-top: 5px;
            margin-left: 16px;
        }

        .service-card img {
            height: 220px;
            object-fit: cover;
        }

        .card-body {
            padding: 10px;
        }
    </style>
@endsection
@section('content')
    <div class="row px-4 py-4" style="margin-top: 130px">
        <h2 class="mb-3 text-dark aos-init aos-animate" data-aos="fade-down-right" data-aos-duration="800">
            {{ __('website.Some of') }}<span style="color: #7dbd42"> {{ __('website.Our-Work') }}</span>
        </h2>
        <h2 class="lead">{{ __('website.Every step of the way tells a story') }}...</h2>

        <div class="row row-cols-1 row-cols-md-4 g-4">
            @foreach ($works as $work)
                <div class="col">
                    <div class="card service-card">
                        <img src="{{ $work->getFirstMediaUrl(Work_COLLECTION) }}" class="card-img-top"
                            alt="Project {{ $work->name_work }}">
                        <div class="card-body text-center">
                            <h5 class="card-title font-weight-bold">{{ $work->name_work }}</h5>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>

    </div>

    @include('frontend.sections.partners')

    <div class="row px-4 py-4">
        <div class="row align-items-center">
            <div class="col-md-6">
                <h1 class="font-weight-bold mb-4">{{ $section1_work->main_title }}</h1>
                <p class="lead">
                    {{ $section1_work->description }}
                </p>

                <a href="https://wa.me/{{ Helper::getAllPhone()->whatsapp }}"
                    class="btn btn-success d-block d-md-inline-block mx-auto mx-md-0"
                    style="background-color:#7dbd42">{{ __('website.Start with us') }}</a>

            </div>
            <div class="col-md-6">
                <div class="row row-cols-2 g-3">
                    @php
                        $icons = [
                            'tachometer-alt',
                            'headset',
                            'bolt',
                            'microchip',
                            'shield-alt',
                            'mobile-alt',
                            'globe',
                            'lightbulb',
                        ];
                    @endphp

                    @foreach ($icons as $index => $icon)
                        @php
                            $titleField = 'title' . ($index + 1);
                        @endphp
                        @if (!empty($section1_work->$titleField))
                            <div class="col">
                                <div class="feature-box d-flex align-items-center justify-content-start text-start">
                                    <i class="fas fa-{{ $icon }} fa-2x me-3"></i>
                                    <h5 class="mb-0">{{ $section1_work->$titleField }}</h5>
                                </div>

                            </div>
                        @endif
                    @endforeach
                </div>
            </div>
        </div>
    </div>

    <section class="row px-4 py-4">
        <div class="col-md-6">
            <h1 class="font-weight-bold mb-4">{{ $section2_work->main_title }}</h1>
        </div>
        <div class="row g-4">
            <div class="col-md-4">
                <div class="card shadow-sm border-0 p-4 d-flex flex-row align-items-center gap-3">
                    <div>
                        <h4 class="fw-bold mb-2">{{ $section2_work->title1 }}</h4>
                        <p class="text-muted mb-0">{{ $section2_work->description1 }}</p>
                    </div>
                    <i class="fas fa-map-marker-alt fa-3x text-dark flex-shrink-0 align-self-start mt-n2"></i>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card shadow-sm border-0 p-4 d-flex flex-row align-items-center gap-3">
                    <div>
                        <h4 class="fw-bold mb-2">{{ $section2_work->title2 }}</h4>
                        <p class="text-muted mb-0">{{ $section2_work->description2 }}</p>
                    </div>
                    <i class="fas fa-globe fa-3x text-dark flex-shrink-0 align-self-start mt-n2"></i>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card shadow-sm border-0 p-4 d-flex flex-row align-items-center gap-3">
                    <div>
                        <h4 class="fw-bold mb-2">{{ $section2_work->title3 }}</h4>
                        <p class="text-muted mb-0">{{ $section2_work->description3 }}</p>
                    </div>
                    <i class="fas fa-mobile-alt fa-3x text-dark flex-shrink-0 align-self-start mt-n2"></i>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card shadow-sm border-0 p-4 d-flex flex-row align-items-center gap-3">
                    <div>
                        <h4 class="fw-bold mb-2">{{ $section2_work->title4 }}</h4>
                        <p class="text-muted mb-0">{{ $section2_work->description4 }}</p>
                    </div>
                    <i class="fas fa-laptop-code fa-3x text-dark flex-shrink-0 align-self-start mt-n2"></i>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card shadow-sm border-0 p-4 d-flex flex-row align-items-center gap-3">
                    <div>
                        <h4 class="fw-bold mb-2">{{ $section2_work->title5 }}</h4>
                        <p class="text-muted mb-0">{{ $section2_work->description5 }}</p>
                    </div>
                    <i class="fas fa-tools fa-3x text-dark flex-shrink-0 align-self-start mt-n2"></i>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card shadow-sm border-0 p-4 d-flex flex-row align-items-center gap-3">
                    <div>
                        <h4 class="fw-bold mb-2">{{ $section2_work->title6 }}</h4>
                        <p class="text-muted mb-0">{{ $section2_work->description6 }}</p>
                    </div>
                    <i class="fas fa-chart-line fa-3x text-dark flex-shrink-0 align-self-start mt-n2"></i>
                </div>
            </div>
        </div>
    </section>
@endsection
{{-- {{ asset('assets-frontend/img/demos/auto-services/services/' . $service['image']) }} --}}