@extends('components.downloadApp')

@section('header')

@endsection

@section('brand_name')
    {!! $brand_title !!}
@endsection

@section('download_page_background_color')
    {!! $download_page_background_color !!}
@endsection

@section('download_page_font_color')
    {!! $download_page_font_color !!}
@endsection

@section('content')
    <section id="hero" class="pt-5 pt-md-5" style="overflow: hidden;">
        <!-- Hero -->
        <div class="inner-section">
            <div class="row">
                <div id="downloadDescriptionLinks" class="col-sm-12 col-lg-6 text-center">
                    <div id="logo" class="mb-4">
                        <img alt="{!! $brand_title !!} - OrderUp Apps" src="{!! $logo !!}" style="">
                    </div>
                    <!--<div id="businessName">
                        {!! $brand_title !!}
                        </div>-->
                    <div id="callToAction">
                        {!! $download_page_call_to_action !!}
                    </div>
                    <div id="appDescription">
                        {!! nl2br($download_page_description) !!}
                    </div>
                    <div class="row d-lg-none" id="downloadLinksWrapper">
                        <div class="col-6 col-sm-6 text-center text-md-right">
                            <a href="{!! $apple_store_link !!}" target="_blank"><img src="https://orderupapps.com/apps/lander/ios_dl_link.png" style="width:100%;max-width: 168px;"></a>
                        </div>
                        <div class="col-6 col-sm-6 text-center text-md-left">
                            <a href="{!! $google_play_link !!}" target="_blank"><img src="https://orderupapps.com/apps/lander/google_dl_link.png" style="width:100%;max-width: 168px;"></a>
                        </div>
                        @if($mobileFriendlyWebsite)
                            <div class="col-12 d-md-none pt-4">
                                <a href="https://app.orderupapps.live/?directory={!! $mobileFriendlyWebsite !!}" style="color: {!! $download_page_font_color !!}text-decoration:underline;">Or, Order from our website</a>
                            </div>
                        @endif
                    </div>


                    @if(!empty($qr_code_location))
                        <div class="row mt-4 d-none d-lg-block" id="qrCode">
                            <div class="col-12">
                                <div class="col-12 text-center py-3" style="color: {!! $download_page_font_color !!}">
                                    - Scan the code below to Download -
                                </div>
                                <div class="col-12 text-center">
                                    <div style="margin:0 auto;width:350px;height:350px;border-radius: 15px;overflow:hidden;">
                                        <img src="{!! $qr_code_location !!}" class="animate__animated animate__fadeIn animate__delay-1s" style="width:100%;">
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endif


                </div>
                <div id="mockup" class="col-sm-12 col-lg-6 text-center pt-5 pt-md-0 mb-5 mb-md-0">
                    <img src="{!! $mockup_location !!}" class="animate__animated animate__fadeInRight animate__delay-1s" >
                </div>
            </div>
        </div>
    </section>
@endsection