@extends('layouts.app')

@push('head')
  <script type="application/ld+json">
    {!! json_encode([
        '@context' => 'https://schema.org',
        '@type' => 'LegalService',
        'name' => $settings->siteName(),
        'url' => route('home', app()->getLocale()),
        'logo' => $settings->logo_light ? asset('storage/'.$settings->logo_light) : asset('assets/img/home_01/logo_main.png'),
        'image' => $settings->logo_light ? asset('storage/'.$settings->logo_light) : asset('assets/img/home_01/logo_main.png'),
        'telephone' => $settings->phone_1,
        'email' => $settings->email,
        'address' => [
            '@type' => 'PostalAddress',
            'streetAddress' => $settings->address(),
            'addressCountry' => 'OM',
        ],
        'sameAs' => array_values(array_filter([
            $settings->facebook_url, $settings->twitter_url, $settings->instagram_url, $settings->linkedin_url,
        ])),
    ], JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE) !!}
  </script>
@endpush

@section('content')

  <!-- hero section start -->
  <section class="hero_wrapper hero-1">
    <div class="hero_slider owl-carousel">
      @foreach ($slides as $slide)
        @php
            $heading = app()->getLocale() === 'ar' ? ($slide->heading_ar ?: $slide->heading_en) : $slide->heading_en;
            $subheading = app()->getLocale() === 'ar' ? ($slide->subheading_ar ?: $slide->subheading_en) : $slide->subheading_en;
            $paragraph = app()->getLocale() === 'ar' ? ($slide->paragraph_ar ?: $slide->paragraph_en) : $slide->paragraph_en;
            $btnText = app()->getLocale() === 'ar' ? ($slide->button_text_ar ?: $slide->button_text_en) : $slide->button_text_en;
            $btn2Text = app()->getLocale() === 'ar' ? ($slide->button_2_text_ar ?: $slide->button_2_text_en) : $slide->button_2_text_en;
        @endphp
        <div class="single-slide-hero bg-cover" style="background-image: url('{{ $slide->image ? asset('storage/'.$slide->image) : asset('assets/img/home_01/images/7.png') }}');">
          <div class="number" data-animation="fadeInUp" data-delay="0.6s">
            {{ str_pad($loop->iteration, 2, '0', STR_PAD_LEFT) }}
          </div>
          <div class="container">
            <div class="row">
              <div class="col-12 col-md-8 offset-md-2">
                <div class="hero-contents pe-lg-3 text-center">
                  @if ($subheading)<h6>{{ $subheading }}</h6>@endif
                  <h1 class="wow fadeInLeft animated" data-wow-duration="1.3s">{{ $heading }}</h1>
                  @if ($paragraph)
                    <p class="wow fadeInLeft animated" data-wow-duration="1.3s" data-wow-delay=".4s">{{ $paragraph }}</p>
                  @endif
                  @if ($btnText)
                    <a href="{{ $slide->button_link ?: route('contact', app()->getLocale()) }}" class="theme-btn me-sm-4 wow fadeInLeft" data-wow-duration="1.2s" data-wow-delay=".8s">
                      {{ $btnText }}<i class="icon-arrow-right-2"></i>
                    </a>
                  @endif
                  @if ($btn2Text)
                    <a href="{{ $slide->button_2_link ?: route('practice-areas.index', app()->getLocale()) }}" class="theme-btn wow fadeInLeft" data-wow-duration="1.2s" data-wow-delay=".6s">
                      {{ $btn2Text }}<i class="icon-arrow-right-2"></i>
                    </a>
                  @endif
                </div>
              </div>
            </div>
          </div>
        </div>
      @endforeach
    </div>
  </section>
  <!-- hero section end -->

  @if ($features->isNotEmpty())
    <!-- All feature wrapper start -->
    <section class="feature_wrapper">
      <div class="container">
        <div class="row">
          @foreach ($features as $feature)
            <div class="col-lg-4 mt-30">
              <div class="single_feature_item wow fadeInUp" data-wow-duration="1s">
                <div class="single_feature_widget">
                  @if ($feature->icon)
                    <div class="single_icon">
                      <img src="{{ asset('assets/img/'.$feature->icon) }}" alt="" />
                    </div>
                  @endif
                  <div class="single_content">
                    <h4>{{ $feature->title() }}</h4>
                    <p>{{ $feature->description() }}</p>
                  </div>
                </div>

                <div class="law_element_1">
                  <img src="{{ asset('assets/img/home_01/leaf.svg') }}" alt="" />
                </div>
                <div class="law_element_2">
                  <img src="{{ asset('assets/img/home_01/law_hamer.svg') }}" alt="" />
                </div>
              </div>
            </div>
          @endforeach
        </div>
      </div>
    </section>
    <!-- All feature wrapper end -->
  @endif

  @if ($stats->isNotEmpty())
    <!-- funfact wrapper start -->
    <section class="funfact_wrapper funfact_wrapper-1 section-padding">
      <div class="container">
        <div class="row">
          @foreach ($stats as $stat)
            <div class="col-lg-3 col-md-4 col-sm-6 mt-30">
              <div class="single_funfact_items text-center" style="background-image: url({{ asset('assets/img/bage_02.png') }})">
                <h6>{{ app()->getLocale() === 'ar' ? ($stat->label_top_ar ?: $stat->label_top_en) : $stat->label_top_en }}</h6>
                <h4>{{ app()->getLocale() === 'ar' ? ($stat->label_bottom_ar ?: $stat->label_bottom_en) : $stat->label_bottom_en }}</h4>
              </div>
            </div>
          @endforeach
        </div>
      </div>
      <div class="feature_element d-none d-xl-block">
        <img src="{{ asset('assets/img/home_01/law_cale.svg') }}" alt />
      </div>
    </section>
    <!-- funfact wrapper end -->
  @endif

  <!-- About section start -->
  <section class="about_wrapper section-padding">
    <div class="container">
      <div class="row">
        <div class="col-lg-6 pe-3 pe-lg-4 wow fadeInLeft" data-wow-duration="1s">
          <div class="single_about_left">
            <div class="single_about_img">
              <img src="{{ $about->home_image ? asset('storage/'.$about->home_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>
        </div>
        <div class="col-lg-6 ps-3 ps-lg-4 pt-5 pt-lg-0 wow fadeInRight" data-wow-duration="1s">
          <div class="about_content">
            <div class="section-title">
              <h6><img src="{{ asset('assets/img/home_01/bage_head.svg') }}" alt />{{ __('site.about_badge') }}</h6>
              <h2>{{ $about->homeHeading() }}</h2>
            </div>
            @if ($about->homeBody())
              <p>{{ $about->homeBody() }}</p>
            @endif
            <a href="{{ route('about', app()->getLocale()) }}" class="btnd mt-20">{{ __('site.learn_more') }}<i class="far fa-level-up-alt"></i></a>
          </div>
        </div>
      </div>
    </div>
    <div class="about_element d-none d-xl-block">
      <img src="{{ asset('assets/img/home_01/scale.svg') }}" alt />
    </div>
  </section>
  <!-- About section end -->

  @if ($practiceAreas->isNotEmpty())
    <!-- service section start -->
    <section class="service_wrapper service-1 section-padding">
      <div class="container">
        <div class="row">
          <div class="col-12 col-md-6 offset-md-3">
            <div class="section-title section_2 text-center mb-30 wow fadeInUp" data-wow-duration="1s">
              <h6><img src="{{ asset('assets/img/home_01/bage_head_2.svg') }}" alt />{{ __('site.our_practice') }}</h6>
              <h2>{{ __('site.our_practice_areas') }}</h2>
            </div>
          </div>
        </div>
        <div class="row justify-content-center">
          @foreach ($practiceAreas as $practiceArea)
            <div class="col-lg-3 col-md-4 col-sm-6 mt-30">
              <div class="single_service_card wow fadeInUp" data-wow-duration="1s">
                <h4>{{ $practiceArea->title() }}</h4>
                <p>{{ $practiceArea->teaser() }}</p>
                <a href="{{ route('practice-areas.show', ['locale' => app()->getLocale(), 'practiceArea' => $practiceArea->slug]) }}" class="btnd">
                  {{ __('site.service_details') }} <i class="far fa-level-up-alt"></i>
                </a>
                <div class="single_img">
                  <img src="{{ $practiceArea->image ? asset('storage/'.$practiceArea->image) : asset('assets/img/card_420x260.jpg') }}" alt="" />
                </div>
                <div class="jus_element">
                  <img src="{{ asset('assets/img/home_01/icons/justice.svg') }}" alt="" />
                </div>
              </div>
            </div>
          @endforeach
        </div>
      </div>
    </section>
    <!-- service section end -->
  @endif

  @if ($team->isNotEmpty())
    <!-- Our team section start -->
    <section class="team_wrapper section-bottom">
      <div class="container">
        <div class="row">
          <div class="col-12 col-md-6 offset-md-3">
            <div class="section-title text-center mb-30 wow fadeInUp" data-wow-duration="1s">
              <h6><img src="{{ asset('assets/img/home_01/bage_head.svg') }}" alt />{{ __('site.our_team_badge') }}</h6>
              <h2>{{ app()->getLocale() === 'ar' ? 'فريق متخصص من المحامين والمستشارين القانونيين' : 'A Dedicated Team of Legal & Professional Excellence' }}</h2>
            </div>
          </div>
        </div>
        <div class="row justify-content-center">
          @foreach ($team as $member)
            <div class="col-lg-3 {{ $loop->iteration > 4 ? 'col-team-5' : '' }} col-md-4 col-sm-6 mt-30">
              <div class="single_team_item wow fadeInUp" data-wow-duration="1s">
                <div class="team_img">
                  <img src="{{ $member->photoUrl() }}" alt="" />
                </div>
                <div class="content text-start">
                  <h4>{{ $member->name() }}</h4>
                  <span class="team_title">{{ $member->title() }}</span>
                  @if ($member->bio())
                    <p>{{ \Illuminate\Support\Str::limit($member->bio(), 140) }}</p>
                  @endif
                  <a href="{{ route('team.show', ['locale' => app()->getLocale(), 'teamMember' => $member->slug]) }}" class="btnd">
                    {{ __('site.view_attorney_profile') }} <i class="far fa-level-up-alt"></i>
                  </a>
                </div>
              </div>
            </div>
          @endforeach
        </div>
      </div>
    </section>
    <!-- Our team section end -->
  @endif

  @if ($cta->heading())
    <!-- call to action section start -->
    <section class="cta_wrapper cta-1 section-padding bg-cover bg-center overflow-hidden"
      style="background-image: url({{ $cta->background_image ? asset('storage/'.$cta->background_image) : asset('assets/img/home_01/images/cta.jpg') }})">
      <div class="row">
        <div class="col-12 col-md-6 offset-md-3 col-lg-4 offset-lg-4 text-center">
          <h2 class="text-white wow fadeInUp" data-wow-duration="1s">{{ $cta->heading() }}</h2>
          @if ($cta->paragraph())
            <p class="text-white wow fadeInUp" data-wow-duration="1.5s">{{ $cta->paragraph() }}</p>
          @endif
          @if ($cta->buttonText())
            <a href="{{ $cta->button_link ?: route('contact', app()->getLocale()) }}" class="theme-btn border-0 wow fadeInLeft" data-wow-duration="1s" data-wow-delay="0.8s">
              {{ $cta->buttonText() }} <i class="far fa-long-arrow-alt-right"></i>
            </a>
          @endif
        </div>
      </div>
    </section>
    <!-- call to action section end -->
  @endif

  <!-- contact teaser section start -->
  <section class="contact_wrapper bg-center bg-cover" style="background-image: url({{ asset('assets/img/home_01/bg_4.svg') }})">
    <div class="container-fluid">
      <div class="row align-items-center">
        <div class="col-lg-6 mb-4 mb-lg-0">
          <div class="contact_form wow fadeInLeft" data-wow-duration="1s">
            <div class="section-title">
              <h6><img src="{{ asset('assets/img/home_01/bage_head.svg') }}" alt />{{ __('site.contact_badge_short') }}</h6>
              <h2>{{ __('site.have_a_deal') }}</h2>
            </div>
            @include('partials.contact-form')
          </div>
        </div>
        <div class="col-lg-6 pe-lg-0 pe-3">
          <div class="map wow fadeInRight" data-wow-duration="1s">
            @if ($settings->map_embed_url)
              <iframe src="{{ $settings->map_embed_url }}" style="border: 0" allowfullscreen loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
            @endif
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- contact teaser section end -->

@endsection