@extends('layouts.default')
@section('title'){{ trans('types.' . $type . '.maintitle') }}@stop
@section('description'){{ trans('types.' . $type . '.desc') }}@stop
@section('canonical'){{ request()->url() }}@stop
@section('styles')
    <link rel="stylesheet" type="text/css" href="{{ url('css/maison.css') }}?v={{ env('ASSET_VERSION') }}">
@stop
@section('content')
    <main class="maison_page">
        <section class="maison_banner">
            <div class="img">
                <x-optimized-image src="images/{{ $banner }}" alt="banner" :fetchpriority="true" :loading="false" />
            </div>
            <div class="maison_banner_top">
                <div class="container">
                    <p class="subheading">{{ trans('types.subheading') }}</p>
                    <h1 class="heading_txt">
                        {{ trans('types.' . $service . '.heading') . '' . trans('types.' . $type . '.title') }}</h1>
                </div>
                <div class="maison_banner_bottom">
                    <div class="container">
                        <div class="inner">
                            <span class="icon go_to_section" data-section="sale_wrapper">
                                <img src="{{ url('/images/Arrow_maison.svg') }}" alt="Arrow">
                            </span>
                            <p class="first">{{ trans('types.' . $type . '.banner_text_1') }}</p>
                            <p class="second">{{ trans('types.banner_text_2') }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <section class="maison_sale_section">
            <div class="maison_bar {{ $type }}">
                <ul
                    class="@if ($type == 'louez_terrain') tabs_two @elseif($type == 'terrain' && $type !== 'louez_terrain')tabs_three @endif">
                    <li>
                        <a class="go_to_section" data-section="sale_wrapper"
                            id="sale_sec">{{ trans('types.' . $service . '.selling') }}</a>
                    </li>
                    <li>
                        <a class="go_to_section" data-section="tab_section_wrapper"
                            id="tabs_sec">{{ trans('types.technologies') }}</a>
                    </li>
                    @if ($type !== 'terrain' && $type !== 'louez_terrain')
                        <li>
                            <a class="go_to_section" data-section="maison_price_block"
                                id="maison_price_sec">{{ trans('types.estimation') }}</a>
                        </li>
                    @endif
                    @if ($type !== 'louez_terrain')
                        <li>
                            <a class="go_to_section" data-section="success_section"
                                id="success_sec">{{ trans('types.references') }}</a>
                        </li>
                    @endif
                </ul>
            </div>
            <span class="shape_bg {{ $service . '-shape-' . app()->getLocale() }}"></span>
            <div class="container">
                <div class="sale_wrapper" data-id="sale_sec">
                    <div class="head">
                        <h2 class="heading_main">{{ trans('types.' . $service . '.sales_process') }}</h2>
                        <ul>
                            @lang('types.sales_process_text')
                        </ul>
                    </div>
                    <div class="sale_block">
                        <div class="mesure-outer-box">
                            <div class="line"></div>
                            <div class="mesure-box">
                                <div class="flip_box active">
                                    <div class="circle-dot">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22"
                                            viewBox="0 0 22 22" fill="none">
                                            <circle cx="11" cy="11" r="11" fill="#E1E6F3" />
                                        </svg>
                                    </div>
                                    <div class="flip_box_front">
                                        <h6>{{ trans('types.' . $service . '.phase_1') }}</h6>
                                        <h3>{{ trans('types.' . $service . '.phase_1_text') }}</h3>
                                        <p>@lang('types.' . $service . '.phase_1_content')</p>
                                    </div>
                                </div>
                                <div class="flip_box">
                                    <div class="circle-dot">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22"
                                            viewBox="0 0 22 22" fill="none">
                                            <circle cx="11" cy="11" r="11" fill="#E1E6F3" />
                                        </svg>
                                    </div>
                                    <div class="flip_box_front">
                                        <h6>{{ trans('types.' . $service . '.phase_2') }}</h6>
                                        <h3>{{ trans('types.' . $service . '.phase_2_text') }}</h3>
                                        <p>@lang('types.' . $service . '.phase_2_content')</p>
                                    </div>
                                </div>
                                <div class="flip_box">
                                    <div class="circle-dot">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22"
                                            viewBox="0 0 22 22" fill="none">
                                            <circle cx="11" cy="11" r="11" fill="#E1E6F3" />
                                        </svg>
                                    </div>
                                    <div class="flip_box_front">
                                        <h6>{{ trans('types.' . $service . '.phase_3') }}</h6>
                                        <h3>{{ trans('types.' . $service . '.phase_3_text') }}</h3>
                                        <p>@lang('types.' . $service . '.phase_3_content')</p>
                                    </div>
                                </div>
                                <div class="small-curve">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="56" height="28"
                                        viewBox="0 0 56 28" fill="none">
                                        <path d="M55 28C55 13.0883 42.9117 1 28 1C13.0883 1 1 13.0883 1 28" stroke="#E1E6F3"
                                            stroke-width="2" />
                                    </svg>
                                </div>
                                <div class="large-curve">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="399" height="200"
                                        viewBox="0 0 399 200" fill="none">
                                        <path d="M398 0.5C398 110.129 309.129 199 199.5 199C89.8715 199 1 110.129 1 0.5"
                                            stroke="#E1E6F3" stroke-width="2" />
                                    </svg>
                                </div>
                            </div>
                            <div class="line-two"></div>
                        </div>

                        <div class="mesure-outer-box">
                            <div class="line"></div>
                            <div class="mesure-box mesure-margin">
                                <div class="flip_box">
                                    <div class="circle-dot">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22"
                                            viewBox="0 0 22 22" fill="none">
                                            <circle cx="11" cy="11" r="11" fill="#E1E6F3" />
                                        </svg>
                                    </div>
                                    <div class="flip_box_front">
                                        <h6>{{ trans('types.' . $service . '.phase_4') }}</h6>
                                        <h3>{{ trans('types.' . $service . '.phase_4_text') }}</h3>
                                        <p>@lang('types.' . $service . '.phase_4_content')</p>
                                    </div>
                                </div>
                                <div class="flip_box">
                                    <div class="circle-dot">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22"
                                            viewBox="0 0 22 22" fill="none">
                                            <circle cx="11" cy="11" r="11" fill="#E1E6F3" />
                                        </svg>
                                    </div>
                                    <div class="flip_box_front">
                                        <h6>{{ trans('types.' . $service . '.phase_5') }}</h6>
                                        <h3>{{ trans('types.' . $service . '.phase_5_text') }}</h3>
                                        <p>@lang('types.' . $service . '.phase_5_content')</p>
                                    </div>
                                </div>
                                <div class="flip_box last-card">
                                    <div class="circle-dot">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22"
                                            viewBox="0 0 22 22" fill="none">
                                            <circle cx="11" cy="11" r="11" fill="#E1E6F3" />
                                        </svg>
                                    </div>
                                    <div class="flip_box_front">
                                        <h6>{{ trans('types.' . $service . '.phase_6') }}</h6>
                                        <h3>{{ trans('types.' . $service . '.phase_6_text') }}</h3>
                                        <p>@lang('types.' . $service . '.phase_6_content')</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="sale_footer">
                        <p>@lang('types.clients')</p>
                        <a href="{{ route('estimat_' . app()->getLocale()) }}"
                            class="btn_block">{{ trans('types.clients_btn') }}</a>
                    </div>
                </div>
            </div>
        </section>
        <div class="outer_box">
            <section class="tab_section_wrapper" data-id="tabs_sec">
                <div class="tab_section">
                    <div class="container">
                        <h2 class="tabs_section heading_main center">{{ trans('home.highlight_text') }}</h2>
                        <div class="tab">
                            <button class="tablinks active" data-id="tab2">{{ trans('home.tab_2') }}</button>
                            <button class="tablinks" data-id="tab3">{{ trans('home.tab_3') }}</button>
                            <button class="tablinks" data-id="tab1">{{ trans('home.tab_1') }}</button>
                            <button class="tablinks" data-id="tab4">{{ trans('home.tab_4') }}
                            </button>
                        </div>
                        <div id="tab1" class="tabcontent">
                            <div class="tab_grid">
                                <div class="image">
                                    <x-optimized-image src="images/tab_video.jpg" alt="tab_img" />
                                    <span class="video_tab_btn video_button" data-id="popup_video"
                                        data-url="https://www.youtube.com/embed/51rJoJjlnUw?autoplay=1&mute=1">
                                        <img src="{{ url('images/about_video_btn.svg') }}" alt="video_icon">
                                    </span>
                                </div>
                                <div class="content">
                                    <h2 class="tab_content_heading">{{ trans('home.tab_title_1') }}</h2>
                                    <div class="p_outer">
                                        @lang('home.tab_content_1')
                                        <!-- <a href="{{ LaravelLocalization::localizeUrl('/services') }}">{{ trans('home.tab_link_1') }} <img src="{{ url('images/Arrow_Right.svg') }}" alt="Arrow"></a> -->
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div id="tab2" class="tabcontent active">
                            <div class="tab_grid">
                                <div class="image">
                                    <span class="video_button" data-id="popup_video"
                                        data-url="{{ url('/videos/Matterport Loop low final.mp4') }}">
                                        <x-optimized-video src="/videos/Matterport Loop low final.mp4" />
                                        <!-- <img src="{{ url('images/tab_img_2.png') }}" alt="tab_img">-->
                                    </span>
                                </div>
                                <div class="content">
                                    <h2 class="tab_content_heading">{{ trans('home.tab_title_2') }}</h2>
                                    <div class="p_outer">
                                        @lang('home.tab_content_2')
                                        <!-- <a href="{{ LaravelLocalization::localizeUrl('/services') }}">{{ trans('home.tab_link_2') }} <img src="{{ url('images/Arrow_Right.svg') }}" alt="Arrow"></a> -->
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div id="tab3" class="tabcontent">
                            <div class="tab_grid">
                                <div class="image">
                                    <div class="ba-slider">
                                        <x-optimized-image src="images/after.png" alt="After" class="after" />
                                        <div class="resize">
                                            <x-optimized-image src="images/before.png" alt="Before" />
                                        </div>
                                        <span class="handle"></span>
                                    </div>
                                </div>
                                <div class="content">
                                    <h2 class="tab_content_heading">{{ trans('home.tab_title_3') }}</h2>
                                    <div class="p_outer">
                                        @lang('home.tab_content_3')
                                        <!-- <a href="{{ LaravelLocalization::localizeUrl('/services') }}">{{ trans('home.tab_link_3') }} <img src="{{ url('images/Arrow_Right.svg') }}" alt="Arrow"></a> -->
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div id="tab4" class="tabcontent">
                            <div class="tab_grid">
                                <div class="image">
                                    <div class="ba-slider-new">
                                        <x-optimized-image src="images/virtual-after.png" alt="After" class="after"
                                            loading="auto" />
                                        <div class="resize">
                                            <x-optimized-image src="images/virtual-before.png" alt="Before"
                                                loading="lazy" />
                                        </div>
                                        <span class="handle"></span>
                                    </div>
                                </div>
                                <div class="content">
                                    <h2 class="tab_content_heading">{{ trans('home.tab_title_4') }}</h2>
                                    <div class="p_outer">
                                        @lang('home.tab_content_4')
                                        <!-- <a href="{{ LaravelLocalization::localizeUrl('/services') }}">{{ trans('home.tab_link_4') }} <img src="{{ url('images/Arrow_Right.svg') }}" alt="Arrow"></a> -->
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            @if ($type !== 'terrain' && $type !== 'louez_terrain')
                <section class="price_section_wrapper" data-id="maison_price_sec">
                    <div class="price_container">
                        <div class="maison_price_block">
                            <h2 class="heading_main center">@lang('types.' . $type . '.price_title')</h2>
                            <div class="price_block_inner">
                                <div class="list_block">
                                    <div class="inner">
                                        <h2>{{ trans('types.' . $type . '.price_text') }}</h2>
                                        <ul>
                                            @lang('types.' . $type . '.price_content')
                                        </ul>
                                    </div>
                                </div>
                                <div class="content_block">
                                    <h2>{{ trans('types.' . $type . '.price_commitment') }}</h2>
                                    <p>{{ trans('types.' . $type . '.price_commitment_text_1') }} </p>
                                    <p>{{ trans('types.' . $type . '.price_commitment_text_2') }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            @endif
        </div>

        @if ($type !== 'louez_terrain')
            <section class="success_section" data-id="success_sec">
                <div class="container">
                    <h2 class="heading_main center">{{ trans('types.our_sucess') }}</h2>
                    <div class="inner_success_section">
                        @foreach ($estates as $estate)
                            <div class="box_success">
                                <figure>
                                    <div class="img">
                                        <x-optimized-image src="images/{{ $estate['image'] }}" alt="maison"
                                            class="main_img" />
                                        <!-- <x-optimized-image src="images/peb_icon.svg" alt="icon" class="icon" /> -->
                                    </div>
                                    <figcaption>
                                        <ul>
                                            <li>
                                                <h2>
                                                    @if ($type !== 'terrain')
                                                        {{ $name }} à
                                                        @endif @if (isset($estate['city']))
                                                            {{ $estate['city'] }}
                                                        @endif
                                                </h2>
                                            </li>
                                            <li>
                                                @if (isset($estate['rooms']))
                                                    <p>
                                                        @if ($estate['rooms'] == 1)
                                                            {{ $estate['rooms'] }} {{ trans('types.room') }}
                                                        @elseif($estate['rooms'] > 1)
                                                            {{ $estate['rooms'] }} {{ trans('types.rooms') }}
                                                            @else{{ $estate['rooms'] }}
                                                        @endif
                                                    </p>
                                                @endif
                                                @if (isset($estate['area']))
                                                    <p>{{ $estate['area'] }}m² </p>
                                                @endif
                                            </li>
                                            <li>
                                                @if (isset($estate['garden']) && $estate['garden'] > 0)
                                                    <p>{{ trans('types.garden') }}</p>
                                                @endif
                                                @if (isset($estate['parking']) && $estate['parking'] > 0)
                                                    <p>{{ trans('types.parking') }}</p>
                                                @endif
                                                @if (isset($estate['terrasse']) && $estate['terrasse'] > 0)
                                                    <p>{{ trans('types.terrase') }}</p>
                                                @endif
                                                @if (isset($estate['garage']) && $estate['garage'] > 0)
                                                    <p>{{ trans('types.garage') }} </p>
                                                @endif
                                                @if (isset($estate['duplex']) && $estate['duplex'] > 0)
                                                    <p>{{ trans('types.duplex') }}</p>
                                                @endif
                                            </li>
                                        </ul>
                                    </figcaption>
                                </figure>
                            </div>
                        @endforeach
                    </div>
                </div>
            </section>
        @endif
        <section class="contact_section_grid">
            <div class="container">
                <div class="inner_contact">
                    <div class="txt_block">
                        <p>@lang('types.contact_sec')</p>
                    </div>
                    <div class="button_grid">
                        <p><span>@lang('types.contact_btn')</span></p>
                        <a href="{{ route('estimat_' . app()->getLocale()) }}"
                            class="btn_block">{{ trans('types.contact_btn_block') }} !</a>
                    </div>
                </div>
            </div>
        </section>
        <section>
            <center class="commitment_box">
                <h2>@lang('types.commitment')</h2>
            </center>
        </section>
    </main>
    @include('popups.video_popup')
@stop
@section('scripts')
    <script src="https://www.youtube.com/iframe_api"></script>
    <script async type="text/javascript" src="{{ url('./js/service.min.js') }}?v={{ env('ASSET_VERSION') }}" defer></script>
    <script src="{{ url('./js/before-after.min.js') }}" defer></script>
@stop