@extends('frontend::layouts.master')
@section('style')
@endsection

@section('content')
    <main>
        <div class="bg-black py-8 sm:py-16 relative sepab-space">
            <div class="the-container relative z-10">
                <h2 class="text-2nd text-3xl uppercase font-bold">{{ __('frontend.about_us') }}</h2>
                <!-- คลาส mobile-dc จะมีเฉพาะใน loop รองสุดท้าย-->
                <div class="brcrmb">
                    <div class="brcrmb-wrrp">
                        <a class="mobile-dc chv"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 chv"
                                viewBox="0 0 20 20" fill="currentColor">
                                <path fill-rule="evenodd"
                                    d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
                                    clip-rule="evenodd" />
                            </svg></a>
                        <a class="mobile-dc" href="{{ mwz_route('frontend.index') }}">{{ __('frontend.home') }}</a>
                    </div>
                    <div class="brcrmb-wrrp active">
                        <div class="tmx-2"><span class="slh">/ </span>
                        </div>
                        <a>{{ __('frontend.about_us') }}</a>
                    </div>
                </div>
                <div class="content-container">
                    <div class="mt-16 text-center space-y-4">
                        {!! !empty($about['title_name']) ? $about['title_name'] : '' !!}
                    </div>
                </div>
            </div>
            <img class="img-brand-grey" src="{{ Module::asset('frontend:img/brand-grey.svg') }}" alt="Alternate Text" />
        </div>
        @empty(!$about['image_on'])
            <div class="the-container sepab-img">
                <img class="mx-auto" src="{{ convert_image($about['image_on'], 1) }}" alt="Alternate Text" />
            </div>
        @endempty
        <div class="the-container">
            <div class="content-container">
                <div class="space-y-4 w- py-8 md:px-8">
                    {!! !empty($about['description']) ? $about['description'] : '' !!}
                </div>
            </div>
        </div>
        <div class="flex-l-t-r">
            <div class="bg-gradient-to-l gdblk">
                <div class="content-container h-full">
                    <div class="flex justify-center flex-col h-full space-y-4">
                        {!! !empty($about['description_lower']) ? $about['description_lower'] : '' !!}
                    </div>
                </div>
            </div>
            <div>
                @empty(!$about['image_center'])
                    <div class="ilrblock">
                        <img src="{{ convert_image($about['image_center'], 4) }}" alt="Alternate Text" />
                    </div>
                @endempty
            </div>
        </div>
        <div class="flex-r-t-l">
            <div>
                @empty(!$about['image_lower'])
                    <div class="ilrblock">
                        <img src="{{ convert_image($about['image_lower'], 4) }}" alt="Alternate Text" />
                    </div>
                @endempty
            </div>
            <div class="bg-gradient-to-r gdblk">
                <div class="content-container h-full">
                    <div class="flex justify-center flex-col h-full space-y-4">
                        {!! !empty($about['description_lower_2']) ? $about['description_lower_2'] : '' !!}
                    </div>
                </div>
            </div>
        </div>
    </main>
@endsection

@section('script')
    <link rel="stylesheet" href="{{ mix('css/frontend.css') }}">
@endsection