@extends('layouts.app')

@section('content')

  <!-- hero section start -->
  <section class="hero_wrapper hero-3 bg-center bg-cover" style="background-image: url({{ $settings->hero_about_image ? asset('storage/'.$settings->hero_about_image) : asset('assets/img/home_01/images/about1.png') }})">
    <div class="container">
      <div class="row">
        <div class="col-12 col-md-8">
          <div class="hero-contents">
            <h1 class="text-white wow fadeInLeft" data-wow-duration="1.3s">{{ __('nav.about') }}</h1>
            <span class="wow fadeInLeft" data-wow-duration="1.3s">
              <a href="{{ route('home', app()->getLocale()) }}">{{ __('nav.home') }}</a> <i class="far fa-level-up-alt"></i>
              <a href="{{ route('about', app()->getLocale()) }}">{{ __('nav.about') }}</a>
            </span>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- hero section end -->

  <!-- About section start -->
  <section class="about_wrapper section-padding">
    <div class="container">
      <div class="row">
        <div class="col-lg-6 pe-0 pe-lg-4">
          <div class="single_about_left wow fadeInLeft">
            <div class="single_about_img">
              <img src="{{ $about->about_page_image ? asset('storage/'.$about->about_page_image) : asset('assets/img/home_01/images/about.png') }}" alt="" />
            </div>
            @if ($about->years_experience)
              <div class="modal_funfact">
                <div class="about_funfact">
                  <h2><span class="counter">{{ $about->years_experience }}</span>+</h2>
                  <h4>{{ app()->getLocale() === 'ar' ? 'سنوات الخبرة' : "Year's Exprience" }}</h4>
                </div>
              </div>
            @endif
            <div class="single_about_img" style="margin-top: -75px">
              <img src="{{ $about->about_page_image_2 ? asset('storage/'.$about->about_page_image_2) : asset('assets/img/home_01/images/about2.png') }}" alt="" />
            </div>
          </div>
        </div>
        <div class="col-lg-6 ps-2 ps-lg-4 pt-5 pt-lg-0">
          <div class="about_content wow fadeInRight">
            <div class="section-title title-1">
              <h6><img src="{{ asset('assets/img/home_01/bage_head.svg') }}" alt />{{ __('site.about_badge') }}</h6>
              <h2>{{ $about->aboutPageHeading() }}</h2>
            </div>
            @foreach ($about->aboutPageParagraphs() as $paragraph)
              <p>{{ $paragraph }}</p>
            @endforeach

            @if ($about->motto())
              <div class="row">
                <div class="col-md-12">
                  <div class="single_author">
                    <p>&ldquo;{{ $about->motto() }}&rdquo;</p>
                  </div>
                </div>
              </div>
            @endif
            <a href="{{ route('contact', app()->getLocale()) }}" class="btnd mt-50">{{ __('site.learn_more') }}<i class="far fa-level-up-alt"></i></a>
          </div>
        </div>
      </div>
    </div>
    <div class="about_element">
      <img src="{{ asset('assets/img/home_01/scale.svg') }}" alt="" />
    </div>
  </section>
  <!-- About section end -->

@endsection