@php
$lang = app()->getLocale()
@endphp

@extends('landing.layouts.landing')

@section('main-content')
<div id="section-header" class="section">
    <div class="container mt-5">
        <div class="row mx-0">
          <div class="col-12 col-xl-6 my-auto order-2 order-xl-1">
            <h1 class="mb-4 text-center text-xl-start">
                <img src="{{ asset('img/landing/locco_logo.png') }}" style="width: 80px; height: 80px;">
                {{ __('landing.header.title') }}
            </h1>
            <div class="h1-div mb-5 text-center text-xl-start">{{ __('landing.header.description') }}</div>
            <div class="d-flex justify-content-center justify-content-xl-start">
                <div class="d-block d-xl-flex justify-content-start mb-5">
                    <a href="https://play.google.com/store/apps/details?id=com.loccoapp" class="me-2 mb-5" target="_blank">
                        <img class="store-image" src="{{ asset('/img/landing/google-play.png') }}" alt="Google Play Store">
                    </a>
                    <div class="w-100 d-flex d-sm-none mt-5"></div>
                    <a href="https://apps.apple.com/us/app/locco-city/id6450447679" target="_blank">
                        <img class="store-image" src="{{ asset('/img/landing/apple-store.png') }}" alt="Apple Store">
                    </a>
                </div>
            </div>
            <div class="row">
                <div class="col-12 col-md-4">
                    <div class="card mt-3">
                      <div class="card-body">
                        <h5 class="card-title">{{ __('landing.header.card.1.title') }}</h5>
                        <p class="card-text">{{ __('landing.header.card.1.description') }}</p>
                      </div>
                    </div>
                </div>
                <div class="col-12 col-md-4">
                    <div class="card mt-3">
                        <div class="card-body">
                        <h5 class="card-title">{{ __('landing.header.card.2.title') }}</h5>
                        <p class="card-text">{{ __('landing.header.card.2.description') }}</p>
                    </div>
                </div>
                </div>
                <div class="col-12 col-md-4">
                    <div class="card mt-3">
                      <div class="card-body">
                        <h5 class="card-title">{{ __('landing.header.card.3.title') }}</h5>
                        <p class="card-text">{{ __('landing.header.card.3.description') }}</p>
                      </div>
                    </div>
                </div>
            </div>
          </div>

          <div class="col-12 col-xl-6 d-flex justify-content-center justify-content-xl-end order-1 order-xl-2">
            <img src="{{ asset('/img/landing/'.$lang.'-header-iphones.png') }}" alt="Kép leírása">
          </div>
        </div>
      </div>
</div>

{{-- <div class="container"> --}}
    <div id="section-h2-background">
        <img class="clouds-background" src="{{ asset('img/landing/background/clouds.png') }}" alt="">
        <div id="section-h2-header" class="section">
            <div class="container mt-5">
                <div class="h2-title mb-3">{{ __('landing.secondaryheader.smalltitle') }}</div>
                <h2 class="underline-center">{{ __('landing.secondaryheader.title') }}</h2>
            </div>
        </div>

        <div id="set_your_preferences" class="section">
            <div class="container mt-5 position-relative">
                @include('landing.components.text_image_grid', [
                    'text_orientation' => 'end',
                    'image' => 'img/landing/'.$lang.'-iphone_1.png?time='.time(),
                    'image_secondary' => 'img/landing/'.$lang.'-iphone_1_s.png?time='.time(),
                    'titleTx' => 'landing.preferences.title',
                    'contentTx' => 'landing.preferences.description'
                ])
                <img src="{{ asset('/img/landing/bg_item_3.png') }}" style="width: 129px; position:absolute; left: 0; top: 150px; margin-left: 0px">
            </div>
        </div>
    </div>

    <div id="roam_around_the_city" class="section">
        <div class="container mt-5">
            @include('landing.components.text_image_grid', [
                'text_orientation' => 'start',
                'image' => 'img/landing/'.$lang.'-iphone_2.png?time='.time(),
                'image_secondary' => 'img/landing/'.$lang.'-iphone_2_s.png?time='.time(),
                'titleTx' => 'landing.roam_around_the_city.title',
                'contentTx' => 'landing.roam_around_the_city.description'
            ])
        </div>
        <img src="{{ asset('/img/landing/bg_item_5.png') }}" style="width: 104px; position:absolute; right: 0; top: 150px; margin-right: 100px">
        <img src="{{ asset('/img/landing/bg_item_6.png') }}" style="width: 147px; position:absolute; left: 0; top: 0; bottom: 0; margin: auto 0; margin-left: 150px">
        <img src="{{ asset('/img/landing/bg_item_7.png') }}" style="width: 76px; position:absolute; left: 0; bottom: 100px; margin-left: 50px">
    </div>

    <div id="find_cool_rewards" class="section">
        <div class="container mt-5 position-relative" style="z-index: 3">
            @include('landing.components.text_image_grid', [
                'text_orientation' => 'end',
                'image' => 'img/landing/'.$lang.'-iphone_3.png?time='.time(),
                'image_secondary' => 'img/landing/'.$lang.'-iphone_3_s.png?time='.time(),
                'titleTx' => 'landing.find_cool_rewards.title',
                'contentTx' => 'landing.find_cool_rewards.description'
            ])
        <img src="{{ asset('/img/landing/bg_item_2.png') }}" style="width: 206px; position:absolute; left: 0; top: 0; bottom: 0; margin: auto 0; margin-left: 100px">
        </div>
        <img src="{{ asset('/img/landing/bg_item_1.png') }}" style="width: 104px; position:absolute; right: 0; top: 0; bottom: 0; margin: auto 0; margin-right: 100px">
    </div>

    <div id="redeem" class="section">
        <div class="container mt-5">
            @include('landing.components.text_image_grid', [
                'text_orientation' => "start",
                'image' => 'img/landing/'.$lang.'-iphone_4.png?time='.time(),
                'image_secondary' => 'img/landing/'.$lang.'-iphone_4_s.png?time='.time(),
                'titleTx' => 'landing.redeem.title',
                'contentTx' => 'landing.redeem.description',
                'button' => 'download_the_app',
            ])
        </div>
        <img src="{{ asset('/img/landing/bg_item_4.png') }}" style="width: 111px; position:absolute; left: 0; top: 0; bottom: 0; margin: auto 0; margin-left: 100px">
    </div>
{{-- </div> --}}

{{--
<div id="partners" class="section" style="background-color: #1D232E; height: 50px;">
    <div class="container mt-5"></div>
</div>
--}}

<div id="put_your_business_on_the_map" class="section">
    <div class="container mt-5">
        @include('landing.components.text_image_grid', [
            'text_orientation' => 'end',
            'image' => 'img/landing/map.png',
            'titleTx' => 'landing.put_your_business_on_the_map.title',
            'contentTx' => 'landing.put_your_business_on_the_map.description',
            'button' => 'contact_us',
            'title_type' => 'underline',
        ])
    </div>
</div>

<div id="bring_locco_to_your_city" class="section">
    <div class="container mt-5">
        <h2 class="mb-4">{{ __('landing.bring_locco_to_your_city.title') }}</h2>



        <div class="h2-div mb-4">{{ __('landing.bring_locco_to_your_city.description') }}</div>

        <div class="d-flex justify-content-center w-50 w-md-100" style="margin: 0 auto">
            <div class="d-flex align-items-center w-100">
                <form action="{{ route('landing.send_city') }}" method="POST" class="w-100 d-flex justify-content-center position-relative">
                    @csrf
                    {{-- <label for="city" class="form-label">City</label> --}}
                    <input type="text" class="form-control me-4" id="city" name="city" placeholder="{{ __('landing.input.city.placeholder') }}" required>
                    @error('city')
                        <span class="invalid-feedback" role="alert" style="position: absolute; bottom: -35px;">
                            <strong>{{ $message }}</strong>
                        </span>
                    @enderror
                    <button type="submit" class="btn btn-primary">{{ __('landing.button.send') }}</button>
                </form>
            </div>
        </div>

        @if(session('success'))
            <div class="alert alert-success mt-4">
                {{ session('success') }}
            </div>
        @endif
        @if(session('error'))
            <div class="alert alert-danger mt-4">
                {{ session('error') }}
            </div>
        @endif
    </div>
</div>
@endsection