@extends('site.master', ['hasModal' => true])

@section('title', $page->translation->meta_title)
@section('meta_description', $page->translation->meta_description)

@section('content')

    <div class="l-main">

        <div class="o-imagebanner  o-imagebanner--medium u-mb-neg-slant-height">
            <img sizes="(max-width: 1440px) 100vw, 1440px"
                 srcset="
                    /img/team-running/team-running_717.jpg 717w,
                    /img/team-running/team-running_320.jpg 320w,
                    /img/team-running/team-running_996.jpg 996w,
                    /img/team-running/team-running_1234.jpg 1234w,
                    /img/team-running/team-running_1440.jpg 1440w"
                 src="/img/team-running/team-running_1440.jpg"
                 alt="Team photo">
        </div>

        <h1 hidden>{{ $page->translation->visual_name }}</h1>


        <div class="o-component-area u-mb-neg-slant-height u-slant-top u-bg-neutral--0">
            @include('site.organisms.components')
        </div>

        <div class="u-mb-neg-slant-height u-slant-top">
            @include('site.organisms.otherPosters', [
                'otherPostersTitle' => __('site/about.other_posters_title'),
                'postals' => $highlightedProducts
            ])
        </div>


        <div class="o-cards-row u-mb-neg-slant-height u-slant-top u-spacing-pb10">
            <div class="o-cards-row__main">
                <h2 class="o-cards-row__title">
                    @lang('site/about.our_farms')
                </h2>
                <ul class="o-cards-row__list">
                    @foreach($links->locations->items as $locationItem)
                        <li class="o-cards-row__item">
                            @include('site.components.locationCard', [
                                'modifiers' => ['on-dark'],
                            ])
                        </li>
                    @endforeach
                </ul>
            </div>
        </div>

        @if($components->has('more_info'))
            @php $moreInfoComponent = $components->get('more_info'); @endphp

            <div class="u-spacing-pb6  t-about__visit-site" id="visit-site-hook">
                <div class="u-color-neutral--0  u-bg-primary--500  u-overflow-hidden">
                    @include('site.components.slantReversed')
                </div>
                @include('site.organisms.duplex', [
                    'duplexShowRating' => true,
                    'duplexIsReversed' => false,
                    'duplexImage' => $moreInfoComponent->image->first() ?? null,
                    'duplexContent' => $moreInfoComponent->text,
                    'duplexButtonText' => $moreInfoComponent->button_label,
                    'duplexButtonLink' => $moreInfoComponent->button_link,
                ])
            </div>
        @endif

    </div>

@endsection