@extends('layouts.main')

@section('page-title',  $page['seo_title'])
@section('keywords',    $page['seo_keywords'])
@section('description', $page['seo_description'])

@section('content')

    <main class="page__main">
        <div class="expertise">
            <div class="expertise__wrap inner">
                <div class="expertise__list">
                    <div class="expertise__box">
                        <div class="expertise__item js-animate js-modal-link" data-link="#expertise-1">
                            <div class="expertise__static _type-1">
                                <img src="/mobile/img/expertise-bg-1.svg" alt="">
                            </div>
                            <div class="expertise__static _type-2">
                                <img src="/mobile/img/expertise-bg-2.svg" alt="">
                            </div>
                            <div class="expertise__bg">
                                <img src="/mobile/img/expertise-1.svg" alt="">
                            </div>
                            <div class="expertise__circle _type-1"></div>
                            <div class="expertise__name">
                                {{ $page['header_n1'] }}
                            </div>
                        </div>
                    </div>
                    <div class="expertise__box">
                        <div class="expertise__item js-animate js-modal-link" data-link="#expertise-2">
                            <div class="expertise__static _type-3">
                                <img src="/mobile/img/expertise-bg-3.svg" alt="">
                            </div>
                            <div class="expertise__static _type-4">
                                <img src="/mobile/img/expertise-bg-4.svg" alt="">
                            </div>
                            <div class="expertise__bg flex flex--j-end">
                                <img src="/mobile/img/expertise-2.svg" alt="">
                            </div>
                            <div class="expertise__circle _type-2"></div>
                            <div class="expertise__name">
                                {{ $page['header_n2'] }}
                            </div>
                        </div>
                    </div>
                    <div class="expertise__box">
                        <div class="expertise__item js-animate js-modal-link" data-link="#expertise-3">
                            <div class="expertise__static _type-5">
                                <img src="/mobile/img/expertise-bg-5.svg" alt="">
                            </div>
                            <div class="expertise__static _type-6">
                                <img src="/mobile/img/expertise-bg-6.svg" alt="">
                            </div>
                            <div class="expertise__static _type-7">
                                <img src="/mobile/img/expertise-bg-7.svg" alt="">
                            </div>
                            <div class="expertise__static _type-8">
                                <img src="/mobile/img/expertise-bg-8.svg" alt="">
                            </div>
                            <div class="expertise__bg">
                                <img src="/mobile/img/expertise-3.svg" alt="">
                            </div>
                            <div class="expertise__circle _type-3"></div>
                            <div class="expertise__name">
                                {{ $page['header_n3'] }}
                            </div>
                        </div>
                    </div>
                    <div class="expertise__box">
                        <div class="expertise__item js-animate js-modal-link" data-link="#expertise-4">
                            <div class="expertise__static _type-9">
                                <img src="/mobile/img/expertise-bg-9.svg" alt="">
                            </div>
                            <div class="expertise__static _type-10">
                                <img src="/mobile/img/expertise-bg-10.svg" alt="">
                            </div>
                            <div class="expertise__static _type-11">
                                <img src="/mobile/img/expertise-bg-11.svg" alt="">
                            </div>
                            <div class="expertise__bg">
                                <img src="/mobile/img/expertise-4.svg" alt="">
                            </div>
                            <div class="expertise__circle _type-4"></div>
                            <div class="expertise__name">
                                {{ $page['header_n4'] }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

@endsection

@section('modal')
    <div id="expertise-1" class="modal js-modal">
        <div class="modal__close-box">
            <button type="button" class="modal__close js-modal-close"></button>
        </div>
        <div class="modal-content">
            <div class="modal-content__wrap">
                <div class="modal-content__title">{{ $page['header_n1'] }}</div>
                <div class="modal-services">
                    <div class="modal-services__list">
                        {!! implode('</div></div><div class="modal-services__box"><div class="modal-services__name">', explode("\r\n", $page['text_n1'])) !!}
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="expertise-2" class="modal js-modal">
        <div class="modal__close-box">
            <button type="button" class="modal__close js-modal-close"></button>
        </div>
        <div class="modal-content">
            <div class="modal-content__wrap">
                <div class="modal-content__title">{{ $page['header_n2'] }}</div>
                <div class="modal-services">
                    <div class="modal-services__list">
                        {!! implode('</div></div><div class="modal-services__box"><div class="modal-services__name">', explode("\r\n", $page['text_n2'])) !!}
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="expertise-3" class="modal js-modal">
        <div class="modal__close-box">
            <button type="button" class="modal__close js-modal-close"></button>
        </div>
        <div class="modal-content">
            <div class="modal-content__wrap">
                <div class="modal-content__title">{{ $page['header_n3'] }}</div>
                <div class="modal-services">
                    <div class="modal-services__list">
                        <div class="modal-services__box">
                            <div class="modal-services__name">
                                {!! implode('</div></div><div class="modal-services__box"><div class="modal-services__name">', explode("\r\n", $page['text_n3'])) !!}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="expertise-4" class="modal js-modal">
        <div class="modal__close-box">
            <button type="button" class="modal__close js-modal-close"></button>
        </div>
        <div class="modal-content">
            <div class="modal-content__wrap">
                <div class="modal-content__title">{{ $page['header_n4'] }}</div>
                <div class="modal-services">
                    <div class="modal-services__list">
                        {!! implode('</div></div><div class="modal-services__box"><div class="modal-services__name">', explode("\r\n", $page['text_n4'])) !!}
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection