@extends('front.layouts.app')

@section('content')
    <style>
        h1 {
            font-size: 36px;
            margin-bottom: 20px;
            font-weight: 700;
        }

        .intro-text {
            margin-bottom: 40px;
            font-size: 16px;
        }

        .services-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 40px;
        }

        .service-card {
            display: flex;
            margin-bottom: 30px;
        }

        .service-icon {
            flex: 0 0 50px;
            margin-right: 15px;
            color: #8bc34a;
            font-size: 24px;
        }

        .service-content {
            flex: 1;
        }

        .service-title {
            color: #8bc34a;
            font-size: 20px;
            margin-bottom: 15px;
            font-weight: 500;
        }

        .service-description {
            font-size: 12px;
        }

        @media (max-width: 768px) {
            .services-grid {
                grid-template-columns: 1fr;
            }

            h1 {
                font-size: 28px;
            }

            .service-description {
                font-size: 10px;
            }
        }
    </style>

    <header style="background-image: url('{{ setting('image_banner_services', 'en') }}');" class="page-banner">
        <div class="banner-overlay"></div>
        <div class="banner-content">
            <h1 class="banner-title">{{ \App\Helpers\TranslationHelper::translate('Service') }}</h1>
            <div class="breadcrumb">
                <span class="breadcrumb-current">{{ \App\Helpers\TranslationHelper::translate('Service') }}</span>
                <span class="breadcrumb-separator">/</span>
                <a href="/" class="breadcrumb-link">{{ \App\Helpers\TranslationHelper::translate('Home') }}</a>
            </div>
        </div>
    </header>

    <div class="container pt-4 pb-4">
        <div class="header-main">
            <p class="small-title">{{ \App\Helpers\TranslationHelper::translate('Our Services') }}</p>
            <p class="description">
                {!! setting('description_section_services_home', app()->getLocale()) !!} </p>
        </div>
        <div class="services-grid-main">
            @foreach ($services as $service)
                <a href="{{ route('service.details', $service->id) }}">
                    <div class="service-card">
                        <div class="card-content">
                            <h3>{{ $service->name }}</h3>
                            <p>{!! Str::limit(strip_tags($service->description), 300, '...') !!}</p>
                        </div>
                        <div class="card-image">
                            <img src="{{ $service->getFirstMediaUrl('products') }}" alt="Team" class="w-100">
                        </div>
                    </div>
                </a>
            @endforeach
        </div>
    </div>

    <div class="container text-center">

        <p class="intro-text">
            {!! setting('description_section_categories_service', app()->getLocale()) !!} </p>

        <div class="services-grid">
            <div class="service-card">
                <div class="service-icon">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M3 9h18v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V9Z"></path>
                        <path d="m3 9 2.45-4.9A2 2 0 0 1 7.24 3h9.52a2 2 0 0 1 1.8 1.1L21 9"></path>
                        <path d="M12 3v6"></path>
                    </svg>
                </div>
                <div class="service-content">
                    <h3 class="service-title">{{ setting('title_category_one_service', app()->getLocale()) }}</h3>
                    <p class="service-description">
                        {!! setting('description_category_one_service', app()->getLocale()) !!} </p>
                </div>
            </div>


            <div class="service-card">
                <div class="service-icon">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M19 16v3"></path>
                        <path d="M19 22v.01"></path>
                        <path d="M13 16v6"></path>
                        <path d="M7 16v6"></path>
                        <path d="M5 16H3a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h18a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1h-2"></path>
                    </svg>
                </div>
                <div class="service-content">
                    <h3 class="service-title">{{ setting('title_category_tow_service', app()->getLocale()) }}</h3>
                    <p class="service-description">
                        {!! setting('description_category_tow_service', app()->getLocale()) !!} </p>
                </div>
            </div>


            <div class="service-card">
                <div class="service-icon">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M20 7h-9"></path>
                        <path d="M14 17H5"></path>
                        <circle cx="17" cy="17" r="3"></circle>
                        <circle cx="7" cy="7" r="3"></circle>
                    </svg>
                </div>
                <div class="service-content">
                    <h3 class="service-title">{{ setting('title_category_three_service', app()->getLocale()) }}</h3>
                    <p class="service-description">
                        {!! setting('description_category_three_service', app()->getLocale()) !!} </p>
                </div>
            </div>

            <div class="service-card">
                <div class="service-icon">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M9 6V4H4v16h16V4h-5v2"></path>
                        <path d="M8 12h8"></path>
                        <path d="M12 8v8"></path>
                    </svg>
                </div>
                <div class="service-content">
                    <h3 class="service-title">{{ setting('title_category_four_service', app()->getLocale()) }}</h3>
                    <p class="service-description">
                        {!! setting('description_category_four_service', app()->getLocale()) !!}
                    </p>
                </div>
            </div>
        </div>
    </div>
@endsection