@extends('front.layouts.app')

@section('content')
    <main>
        <header style="background-image: url('{{ $about->getFirstMediaUrl('abouts_image') }}');" class="page-banner">
            <div class="banner-overlay"></div>
            <div class="banner-content">
                <h1 class="banner-title">{{ \App\Helpers\TranslationHelper::translate('About') }}</h1>
                <div class="breadcrumb">
                    <span class="breadcrumb-current">{{ \App\Helpers\TranslationHelper::translate('About') }}</span>
                    <span class="breadcrumb-separator">/</span>
                    <a href="/" class="breadcrumb-link">{{ \App\Helpers\TranslationHelper::translate('Home') }}</a>
                </div>
            </div>
        </header>


        <section class="section-about">
            <div class="container" data-aos="fade-up" data-aos-duration="1000">
                <div class="row">
                    <div class="col-md-6">
                        <div class="img-about" style="position: relative;">
                            <img src="{{ $about->getFirstMediaUrl('abouts_image_one_section_one') }}" alt="Truck"
                                class="custom-image">

                            {{-- <div class="row">
                                <div class="col-6">
                                    <img src="{{ $about->getFirstMediaUrl('abouts_image_tow_section_one') }}"
                                        alt="Logistics Operations" class="w-100">
                                </div>
                                <div class="col-6">
                                    <img src="{{ $about->getFirstMediaUrl('abouts_image_three_section_one') }}"
                                        alt="Team" class="w-100">
                                </div>
                            </div> --}}

                            <div class="stats-box">
                                <div class="stats-number" style="font-size: 30px;">
                                    +{{ setting('Shipments_Delivered_number', app()->getLocale()) }}</div>
                                <div>{{ setting('Shipments_Delivered_title', app()->getLocale()) }}</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="text-about">
                            <h2 class="about-heading" style="text-align: left;">{{ $about->title }}</h2>
                            <p class="about-text" style="text-align: left;">
                                {!! $about->description !!}
                            </p>


                            <h3 class="about-heading" style="font-size: 38px; margin-top: 40px; text-align: left;">
                                {{-- {{ \App\Helpers\TranslationHelper::translate('We at Green Line') }}</h3> --}}

                            <div class="feature-item" style="text-align: left;">
                                <i class="fas fa-truck feature-icon"></i>
                                <div class="feature-text">
                                    {{ $about->title_one }}
                                </div>
                            </div>

                            <div class="feature-item" style="text-align: left;">
                                <i class="fas fa-users feature-icon"></i>
                                <div class="feature-text">
                                    {{ $about->title_tow }}

                                </div>
                            </div>

                            <div class="feature-item" style="text-align: left;">
                                <i class="fas fa-bullseye feature-icon"></i>
                                <div class="feature-text">
                                    {{ $about->title_three }}
                                </div>
                            </div>

                            <div class="feature-item" style="text-align: left;">
                                <i class="fas fa-star feature-icon"></i>
                                <div class="feature-text">
                                    {{ $about->title_four }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="shipping-section container py-5">
            <div class="row align-items-center">
                <div class="col-lg-7">
                    <h2 class="shipping-title mb-3" style="color: #2d6a4f; font-size: 32px; font-weight: 700;">
                        {{ $about->title_services }}</h2>
                    <p class="description">{!! $about->description_services !!}</p>
                </div>
                <div class="col-lg-5 image-box mt-4 mt-lg-0">
                    <img src="{{ $about->getFirstMediaUrl('abouts_image_section_services') }}" alt="Team"
                        class="w-100">
                </div>
            </div>
        </section>

        <section class="stats-section">
            <div class="container">
                <div class="stats-grid">
                    <div class="stat-item">
                        <div class="icon">
                            <i class="fas fa-building"></i>
                        </div>
                        <h2 class="number">+{{ setting('Shipments_Delivered_number', app()->getLocale()) }}</h2>
                        <p class="description">{{ setting('Shipments_Delivered_title', app()->getLocale()) }}</p>
                    </div>

                    <div class="stat-item">
                        <div class="icon">
                            <i class="fas fa-users"></i>
                        </div>
                        <h2 class="number">+{{ setting('Countries_Covered_number', app()->getLocale()) }}</h2>
                        <p class="description">{{ setting('Countries_Covered_title', app()->getLocale()) }}</p>
                    </div>

                    <div class="stat-item">
                        <div class="icon">
                            <i class="fas fa-globe"></i>
                        </div>
                        <h2 class="number">+{{ setting('Satisfied_Clients_number', app()->getLocale()) }}</h2>
                        <p class="description">{{ setting('Satisfied_Clients_title', app()->getLocale()) }}</p>
                    </div>

                    <div class="stat-item">
                        <div class="icon">
                            <i class="fas fa-box"></i>
                        </div>
                        <h2 class="number">+{{ setting('Offices_Worldwide_number', app()->getLocale()) }}</h2>
                        <p class="description">{{ setting('Offices_Worldwide_title', app()->getLocale()) }}</p>
                    </div>
                </div>
            </div>
        </section>

        <section style="background-image: url('{{ $about->getFirstMediaUrl('aboutsimage_section_three') }}');"
            class="hero-section">
            <div class="overlay"></div>
            <div style="color: #fff !important;" class="content">
                <p class="description-2">
                    {!! $about->description_section_three !!}
                </p>
                <a href="{{ route('message_contact') }}"
                    class="cta-button">{{ \App\Helpers\TranslationHelper::translate('Contact Us') }}</a>
            </div>
        </section>


    </main>
@endsection