@extends('master')

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

@section('content')

    <div class="l-body  l-body--rounded-tr">
        <div class="l-block  u-spacing-pt5">
            <div class="l-contain">
                @include('components.breadcrumb')

                <div class="o-details  u-spacing-mt5">
                    <div class="o-details__main">

                        @if(isset($components) && $components->has('main'))
                            <div class="u-spacing-mb8  s-text  s-text--main" data-kal="slide-left">
                                {!! $components->get('main')->text !!}
                            </div>
                        @endif

                        <div class="o-details__accordion" data-kal="slide-right">
                            @include('components.accordion', [
                                'accordionItems' => $methodSteps
                            ])
                        </div>

                        @if(isset($components) && $components->has('after'))
                            <div class="u-spacing-mt10  s-text" data-kal="slide-left">
                                {!! $components->get('after')->text !!}
                            </div>
                        @endif


                    </div>

                    <div class="o-details__side" data-kal="slide-left">
                        <div class="c-contact-person">
                            <img class="c-contact-person__img" src="/img/contact-person.png" alt="" data-kal="slide-left">
                        </div>

                        @include('components.ctaBlock', [
                            'ctaBlockTitle' => __('site/global.method_cta_title'),
                            'ctaButton1Link' => 'tel:' . config('site.company.phone.call'),
                            'ctaButton1Text' => __('site/global.prefooter.chat.buttonText'),
                        ])

                    </div>
                </div>
            </div>
        </div>

        <div class="l-block  @if(isset($composedQuestions) && $composedQuestions->isNotEmpty() && isset($links->faq)) l-block--rounded-corner-bl @endif">
            @include('organisms.components')
        </div>

        <div class="l-block">
            @if(isset($composedQuestions) && $composedQuestions->isNotEmpty() && isset($links->faq))
                <div class="u-bg-primary--100">
                    <div class="l-contain  u-spacing-pt12  u-spacing-pb12">
                        @include('components.faq', [
                            'faqHeader' => __('site/faq.title'),
                            'faqToPageLink' => true,
                            'faqItems' => $composedQuestions
                        ])
                    </div>
                </div>
            @endif

            @if(isset($page->images) && $page->images->isNotEmpty())
                @include('organisms.pageWidePhoto', ['modifiers' => ['pull-bottom-up', 'bg-top-half'], 'photoUrl'=>  $page->images->first()->large_image_url ])
            @else
                @include('organisms.pageWidePhoto', ['modifiers' => ['pull-bottom-up', 'bg-top-half'], 'photoUrl'=>  '/img/banners/method.jpg' ])
            @endif

            @include('organisms.certificates', ['modifiers' => 'on-dark'])
        </div>


    </div>

@endsection