@extends('master')

@section('title', $page->translation->meta_title != '' ? $page->translation->meta_title : $page->translation->name .' | '. config('site.company_name'))
@section('meta_description', $page->translation->meta_description)

@section('content')

    @include('organisms.hero')
	@includeWhen(isset($subMenu), 'organisms.subNav')
    @include('organisms.components')

	<div class="u-tilted-bg  u-spacing-mb12">
		<div class="l-contain  l-block">

			<div class="l-card-grid">
				<div class="l-card-grid__main">
					@foreach($subMenu as $subMenuItem)
						@continue(!isset($links->{$subMenuItem->code_name}))
						<div class="l-card-grid__item" data-kal="fade" style="--kal-delay: {{($loop->index % 4)*0.1}}s">
							@include('components.actionCard', [
								'modifiers'	=> ['is-light'],
								'actionCardLink' => $links->{$subMenuItem->code_name}->route,
								'actionCardImage' => $subMenuItem->images->first()->small_image_url ?? '/img/placeholder-card.svg',
								'actionCardTitle' => $subMenuItem->translation->name,
								'actionCardDescription' => !empty($subMenuItem->translation->teaser) ? $subMenuItem->translation->teaser : null,
							])
						</div>
					@endforeach
				</div>
			</div>
		</div>
	</div>

	<div class="l-contain  u-spacing-pt12">
		<div class="l-card-row">
			<div class="l-card-row__main">
				@foreach(__('about.cards') as $card)
					@continue(!isset($card['codename']) || !isset($links->{$card['codename']}->route))
					<div class="l-card-row__item" data-kal="slide-up" style="--kal-delay: {{$loop->index*0.1}}s">

						@include('components.actionCard', [
							'modifiers' => ['is-centered'],
							'actionCardLink' => $links->{$card['codename']}->route,
							'actionCardIcon' => $card["icon"],
							'actionCardTitle' => $card["title"],
							'actionCardDescription' => $card["description"],
						])

					</div>
				@endforeach
			</div>
		</div>
	</div>

@endsection