@extends('frontend::layouts.master')

@php
    $about_section = site_configurations('about_us_section', true);
    $team_section = site_configurations('team_section', true);
@endphp

@section('title')
    <title>{{ $seo?->title }}</title>
    <meta name="title" content="{{ $seo?->title }}">
    <meta name="description" content="{{ $seo?->description }}">
    <meta name="keyword" content="{{ $seo?->keywords }}">
@endsection

@section('content')
    <main class="fix">
        <x-frontend::breadcrumb>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('home') }}">{{ __('translate.Home') }}</a></li>
                <li class="breadcrumb-item active" aria-current="page">{{ __('translate.About Us') }}</li>
            </ol>
        </x-frontend::breadcrumb>

        <!-- about-area -->
        <section class="about-area pt-80 pb-80">
            <div class="container">
                <div class="row align-items-center justify-content-center">
                    <div class="col-lg-7 col-md-10 order-0 order-lg-2">
                        <div class="about-img">
                            <div class="left-img">
                                @if (getSingleImage($about_section, 'left_top_image'))
                                    <img src="{{ getSingleImage($about_section, 'left_top_image') }}">
                                @endif

                                @if (getSingleImage($about_section, 'left_bottom_image'))
                                    <img src="{{ getSingleImage($about_section, 'left_bottom_image') }}">
                                @endif
                            </div>

                            @if (getSingleImage($about_section, 'right_top_image'))
                                <div class="right-img">
                                    <img src="{{ getSingleImage($about_section, 'right_top_image') }}">
                                </div>
                            @endif

                            @if (getTranslatedData($about_section, 'show_shape_image') == 1)
                                <img src="{{ asset('frontend/assets/img/images/about_shape.png') }}" alt=""
                                    class="shape">
                            @endif
                        </div>
                    </div>
                    <div class="col-lg-5">
                        <div class="about-content">
                            <div class="section-title-five">
                                @if (getTranslatedData($about_section, 'sub_title'))
                                    <span class="sub-title">{{ getTranslatedData($about_section, 'sub_title') }}</span>
                                @endif
                                @if (getTranslatedData($about_section, 'title'))
                                    <h2 class="title">{{ getTranslatedData($about_section, 'title') }}</h2>
                                @endif
                            </div>

                            @if (getTranslatedData($about_section, 'short_description'))
                                <span>{{ getTranslatedData($about_section, 'short_description') }}</span>
                            @endif

                            @if (getTranslatedData($about_section, 'description'))
                                <p>{{ getTranslatedData($about_section, 'description') }}</p>
                            @endif

                            @if (getTranslatedData($about_section, 'button_text') && getTranslatedData($about_section, 'button_url'))
                                <div class="view-all-btn">
                                    <a href="{{ getTranslatedData($about_section, 'button_url') }}"
                                        class="btn btn-two link-btn">
                                        {{ getTranslatedData($about_section, 'button_text') }}
                                        <span class="svg-icon">
                                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" fill="none">
                                                <path
                                                    d="M1.07692 10L0 8.92308L7.38462 1.53846H0.769231V0H10V9.23077H8.46154V2.61538L1.07692 10Z"
                                                    fill="currentColor" />
                                                <path
                                                    d="M1.07692 10L0 8.92308L7.38462 1.53846H0.769231V0H10V9.23077H8.46154V2.61538L1.07692 10Z"
                                                    fill="currentColor" />
                                            </svg>
                                        </span>
                                    </a>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- about-area-end -->


        @if (count($team_members) > 0)
            <!-- team-area -->
            <section class="team-area">
                <div class="container">
                    <div class="row justify-content-center">
                        <div class="col-xl-6 col-lg-8">
                            <div class="section-title-five text-center mb-30">

                                @if (getTranslatedData($team_section, 'sub_title'))
                                    <span class="sub-title">{{ getTranslatedData($team_section, 'sub_title') }}</span>
                                @endif

                                @if (getTranslatedData($team_section, 'title'))
                                    <h2 class="title">{{ getTranslatedData($team_section, 'title') }}</h2>
                                @endif

                                @if (getTranslatedData($team_section, 'description'))
                                    <p>{{ getTranslatedData($team_section, 'description') }}</p>
                                @endif
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        @foreach ($team_members as $team_member)
                            @include('frontend::team.team-item', ['team_member' => $team_member])
                        @endforeach
                    </div>
                </div>
            </section>
            <!-- team-area-end -->
        @endif


        @include('frontend::components.newsletter_area')

    </main>
@endsection