@extends('layout.layout')
@section('meta')
    @include('layout.partials.seo', [
        'title' =>  $page->meta_title ?? $page->heading,
        'description' => $page->meta_description,
        'keywords' => $page->keywords,
        'image' => $page->getFirstMediaUrlOrDefault(\App\Helpers\Constants\MediaHelper::PAGE_BANNER_MEDIA_PATH, 'webp')['url'],
        'schema' => $page->schema
   ])
@endsection
@section('content')
    <main class="main">
        <nav aria-label="breadcrumb" class="breadcrumb-nav border-0 mb-0">
            <div class="container">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ route('home') }}">{{ __('general.home') }}</a></li>
                    <li class="breadcrumb-item active" aria-current="page">{{ $page->title }}</li>
                </ol>
            </div>
        </nav>
        <div class="mb-2"></div>
        <div class="container">
            <div class="page-header page-header-big text-center"
                 style="background:url('{{ $page->getFirstMediaUrlOrDefault(\App\Helpers\Constants\MediaHelper::PAGE_BANNER_MEDIA_PATH, 'webp')['url'] }}');background-size: cover;background-position: center;background-repeat: no-repeat"
                 aria-label="{{ $page->getFirstMediaUrlOrDefault(\App\Helpers\Constants\MediaHelper::PAGE_BANNER_MEDIA_PATH, 'webp')['alt'] }}"
                 title="{{ $page->getFirstMediaUrlOrDefault(\App\Helpers\Constants\MediaHelper::PAGE_BANNER_MEDIA_PATH, 'webp')['title'] }}">
                <h1 class="page-title text-white">{{ $page->title }}<span class="text-white">{{ $page->heading }}</span></h1>
            </div>
        </div>
        <div class="page-content pb-0">
            <div class="container">
                <div class="row">
                    <div class="col-lg-6 mb-3 mb-lg-0">
                        <h2 class="title">{{ $page->our_mission_title }}</h2>
                        {!! $page->our_mission_description !!}
                    </div>
                    <div class="col-lg-6">
                        <h2 class="title">{{ $page->our_vision_title }}</h2>
                        {!! $page->our_vision_description !!}
                    </div>
                </div>
                <div class="mb-5"></div>
            </div>
        </div>
        <div class="bg-light-2 pt-6 pb-5 mb-6 mb-lg-8">
            <div class="container">
                <div class="row">

                    <div class="col-lg-6 mb-3 mt-5 mb-lg-0">
                        <h2 class="title">{{$page->label}}</h2>
                        <p class="lead text-primary mb-3">
                        {!! $page->description !!}
                        </p>
                    </div>

                    <div class="col-lg-5 offset-lg-1">
                        <div class="about-images">
                        <img class="about-img-front" src="{{$page->getFirstMediaUrlOrDefault(\App\Helpers\Constants\MediaHelper::PAGE_MEDIA_PATH, 'webp')['url']}}"
                             alt="{{$page->getFirstMediaUrlOrDefault(\App\Helpers\Constants\MediaHelper::PAGE_MEDIA_PATH)['alt']}}"
                             title="{{$page->getFirstMediaUrlOrDefault(\App\Helpers\Constants\MediaHelper::PAGE_MEDIA_PATH)['title']}}">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
    @include('layout.partials.faq')
    @include('layout.partials.news_letter')
@endsection