{% set lang = page.url | getlang %}
{% block js_scripts %}
    <script src="/js/flag-anchor.js"></script>
    <script src="/js/qrcode.js"></script>
    <script async defer src="/js/contact.js"></script>
{% endblock %}

<section class="hidden xl:block h-screen pt-[66px] bg-white dark:bg-gradient-radial-mobile dark:lg:bg-gradient-radial">
    <div class="container m-auto h-full flex items-center justify-between px-5">
        <div class="flex flex-col items-start justify-center w-full h-full">
            <h1 class="text-[38px] leading-[43px] font-bold max-w-[500px] mb-[30px] primary-header-contact">{{ header | i18n({}, lang ) | safe }}</h1>
            <h2 class="text-[20px] leading-[28px] text-[#606C71] dark:text-white font-bold max-w-[475px] mb-[80px] secondary-header-contact">{{ "contact-hero-subheader" | i18n({}, lang ) | safe }}</h2>
            <p class="text-grey-black dark:text-white text-base mb-[16px]">
                {{ "contact-hero-p-1" | i18n({}, lang ) | safe }}
            </p>
            <p class="text-grey-black dark:text-white text-base">{{ "contact-hero-p-2" | i18n({}, lang ) | safe }}</p>
            <p class="text-grey-black dark:text-white text-base mb-[24px]">{{ "contact-hero-p-3" | i18n({}, lang ) | safe }}</p>

            <div class="flex items-center justify-center gap-4 flex-wrap">
                <a href="https://apps.apple.com/us/app/simplex-chat/id1605771084" target="_blank"><img class="h-[40px] w-auto" src="/img/new/apple_store.svg" /></a>
                <a href="https://play.google.com/store/apps/details?id=chat.simplex.app" target="_blank" title="Public iOS preview on TestFlight"><img class="h-[40px] w-auto" src="/img/new/google_play.svg" /></a>
                <a href="{{ '' if lang == 'en' else '/' ~ lang }}/fdroid"  title="SimpleX F-Droid Repository"><img class="h-[40px] w-auto" src="/img/new/f_droid.svg" /></a>
                <a href="https://testflight.apple.com/join/DWuT2LQu" target="_blank"><img class="h-[40px] w-auto" src="/img/new/testflight.png" /></a>
                <a href="https://github.com/simplex-chat/simplex-chat/releases/latest/download/simplex.apk" target="_blank"><img class="h-[40px] w-auto" src="/img/new/apk_icon.png" /></a>
            </div>
        </div>

        <div class="h-full pt-[30px] w-[630px] relative">
            <div class="relative h-full w-[inherit] flex items-center justify-center">
                <div class="absolute mt-[-100px]">
                    <img class="" src="/img/new/contact_page_mobile.png" alt="">
                </div>
                
                <noscript class="z-10 flex flex-col items-center pt-[40px] ml-[-15px]">
                    <p class="text-2xl font-medium text-center max-w-[234px] mb-32">{{ "please-enable-javascript" | i18n({}, lang ) | safe }}</p>
                </noscript>

                <div class="z-10 flex flex-col items-center pt-[40px] ml-[-15px] d-none-if-js-disabled">
                    <p class="text-base font-medium text-center max-w-[234px]">{{ "scan-qr-code-from-mobile-app" | i18n({}, lang ) | safe }}</p>
                    <canvas class="conn_req_uri_qrcode"></canvas>
                </div>
            </div>
        </div>
    </div>
</section>


<section class="block xl:hidden pt-[106px] pb-[90px] bg-white dark:bg-gradient-radial-mobile dark:lg:bg-gradient-radial">
    <div class="container m-auto h-full px-5">
        <div class="flex flex-col items-center">
            <h1 class="text-[28px] font-bold text-center max-w-[602px] mb-[40px] primary-header-contact">{{ header | i18n({}, lang ) | safe }}</h1>
            <p class="text-[20px] leading-[28px] text-grey-black dark:text-white font-medium mb-[30px]">{{ "to-make-a-connection" | i18n({}, lang ) | safe }}</p>

            <div class="flex flex-col justify-center items-center p-4 w-full max-w-[468px] min-h-[131px] rounded-[30px] border-[1px] border-[#A8B0B4] dark:border-white border-opacity-60 mb-6 relative">
                <p class="text-xl font-medium text-grey-black dark:text-white mb-4">{{ "install-simplex-app" | i18n({}, lang ) | safe }}</p>
                <div class="flex flex-wrap items-center justify-center gap-2">
                    <a class="apple-store-btn hidden" href="https://apps.apple.com/us/app/simplex-chat/id1605771084" target="_blank"><img class="h-[40px] w-auto" src="/img/new/apple_store.svg" /></a>
                    <a class="google-play-btn hidden" href="https://play.google.com/store/apps/details?id=chat.simplex.app" target="_blank" title="Public iOS preview on TestFlight"><img class="h-[40px] w-auto" src="/img/new/google_play.svg" /></a>
                    <a class="f-droid-btn hidden" href="{{ '' if lang == 'en' else '/' ~ lang }}/fdroid"  title="SimpleX F-Droid Repository"><img class="h-[40px] w-auto" src="/img/new/f_droid.svg" /></a>
                </div>

                <div class="absolute bg-[#0197FF] h-[44px] w-[44px] rounded-full flex items-center justify-center top-0 left-0 translate-x-[-30%] translate-y-[-30%]">
                    <p class="text-base text-white font-bold leading-[36px]">1</p>
                </div>
            </div>

            <div class="flex flex-col justify-center items-center w-full max-w-[468px] h-[131px] rounded-[30px] border-[1px] border-[#A8B0B4] dark:border-white border-opacity-60 mb-6 relative">
                <p class="text-xl font-medium text-grey-black dark:text-white mb-4 d-none-if-js-disabled">{{ "connect-in-app" | i18n({}, lang ) | safe }}</p>
                <noscript>
                    <p class="text-xl font-medium text-grey-black dark:text-white mb-4">{{ "please-use-link-in-mobile-app" | i18n({}, lang ) | safe }}</p>
                </noscript>

                <a id="mobile_conn_req_uri" class="bg-[#0053D0] text-white py-3 px-8 rounded-[34px] h-[44px] text-[16px] leading-[19px] tracking-[0.02em]">{{ "open-simplex-app" | i18n({}, lang ) | safe }}</a>

                <div class="absolute bg-[#0197FF] h-[44px] w-[44px] rounded-full flex items-center justify-center top-0 left-0 translate-x-[-30%] translate-y-[-30%]">
                    <p class="text-base text-white font-bold leading-[36px]">2</p>
                </div>
            </div>

            <div class="flex flex-col justify-center items-center w-full max-w-[468px] h-[131px] rounded-[30px] border-[1px] border-[#A8B0B4] dark:border-white border-opacity-60 relative d-none-if-js-disabled">
                <p class="text-xl font-medium text-grey-black dark:text-white max-w-[230px] text-center">{{ "tap-the-connect-button-in-the-app" | i18n({}, lang ) | safe }}</p>

                <div class="absolute bg-[#0197FF] h-[44px] w-[44px] rounded-full flex items-center justify-center top-0 left-0 translate-x-[-30%] translate-y-[-30%]">
                    <p class="text-base text-white font-bold leading-[36px]">3</p>
                </div>
            </div>
        </div>
    </div>
</section>


<section class="hidden md:block bg-secondary-bg-light dark:bg-secondary-bg-dark py-[20px] d-none-if-js-disabled">
    <div class="container px-5">
        <div class="text-grey-black dark:text-white">
            
            {# For Tablet #}
            <div class="hidden md:block xl:hidden for-tablet">
                <div class="contact-tab">
                    <div class="flex items-center justify-between my-[40px] contact-tab-btn cursor-pointer">
                        <h2 class="text-xl font-bold">{{ "scan-the-qr-code-with-the-simplex-chat-app" | i18n({}, lang ) | safe }}</h2>
                        <svg class="fill-grey-black dark:fill-white" width="10" height="5" viewBox="0 0 10 5" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M8.40813 4.79332C8.69689 5.06889 9.16507 5.06889 9.45384 4.79332C9.7426 4.51775 9.7426 4.07097 9.45384 3.7954L5.69327 0.206676C5.65717 0.17223 5.61827 0.142089 5.57727 0.116255C5.29026 -0.064587 4.90023 -0.0344467 4.64756 0.206676L0.886983 3.7954C0.598219 4.07097 0.598219 4.51775 0.886983 4.79332C1.17575 5.06889 1.64393 5.06889 1.93269 4.79332L5.17041 1.70356L8.40813 4.79332Z"/>
                        </svg> 
                    </div>
                    
    
                    <div class="contact-tab-content flex flex-col gap-10">
                        <p class="text-base mb-5">
                            {{ "scan-the-qr-code-with-the-simplex-chat-app-description" | i18n({}, lang ) | safe }}
                        </p>
                        <canvas class="self-center conn_req_uri_qrcode"></canvas>
                    </div>
                </div>
            </div>
            
            {# For Desktop #}
            <div class="hidden xl:block">
                <div class="contact-tab">
                    <div class="flex items-center justify-between my-[40px] contact-tab-btn cursor-pointer">
                        <h2 class="text-xl font-bold">{{ "installing-simplex-chat-to-terminal" | i18n({}, lang ) | safe }}</h2>
                        <svg class="fill-grey-black dark:fill-white" width="10" height="5" viewBox="0 0 10 5" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M8.40813 4.79332C8.69689 5.06889 9.16507 5.06889 9.45384 4.79332C9.7426 4.51775 9.7426 4.07097 9.45384 3.7954L5.69327 0.206676C5.65717 0.17223 5.61827 0.142089 5.57727 0.116255C5.29026 -0.064587 4.90023 -0.0344467 4.64756 0.206676L0.886983 3.7954C0.598219 4.07097 0.598219 4.51775 0.886983 4.79332C1.17575 5.06889 1.64393 5.06889 1.93269 4.79332L5.17041 1.70356L8.40813 4.79332Z"/>
                        </svg> 
                    </div>
                    
    
                    <div class="contact-tab-content">
                        <p class="text-base mb-4">{{ "use-this-command" | i18n({}, lang ) | safe }}</p>
                        <p class="bg-white flex items-center justify-between rounded p-3 shadow-[inset_0px_2px_2px_rgba(0,0,0,0.15)] mb-8">
                            <span class="text-grey-black font-light text-[14px] leading-6">curl -o- https://raw.githubusercontent.com/simplex-chat/simplex-chat/master/install.sh | bash</span>
                            <!-- <img class="content_copy" src="/img/new/content-copy.svg" /> -->
                        </p>
                        
                        <p class="flex text-base font-medium mb-[76px]">{{ "see-simplex-chat" | i18n({}, lang ) | safe }} &nbsp;
                            <a href="" class="flex gap-1 no-underline">
                                <span class="text-primary-light dark:text-primary-dark underline underline-offset-4 text-base font-medium">{{ "github-repository" | i18n({}, lang ) | safe }}</span>
                                <svg class="fill-primary-light dark:fill-primary-dark" width="24" height="24" viewBox="0 0 41 41" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M20.2907 0.926758C9.24635 0.926758 0.290527 10.1075 0.290527 21.4331C0.290527 30.4933 6.02118 38.18 13.9679 40.8915C14.9674 41.0813 15.3344 40.4467 15.3344 39.905C15.3344 39.4161 15.3158 37.8007 15.3072 36.0872C9.74314 37.3277 8.56906 33.6677 8.56906 33.6677C7.65927 31.2975 6.3484 30.6672 6.3484 30.6672C4.53379 29.3945 6.48519 29.4206 6.48519 29.4206C8.49355 29.5653 9.55105 31.5338 9.55105 31.5338C11.3349 34.6688 14.2298 33.7624 15.3711 33.2385C15.5506 31.9131 16.069 31.0085 16.6409 30.4964C12.1986 29.9779 7.52878 28.2195 7.52878 20.3621C7.52878 18.1232 8.31007 16.294 9.58947 14.8579C9.38181 14.3414 8.69723 12.2557 9.78322 9.43111C9.78322 9.43111 11.4627 8.87998 15.2847 11.5331C16.8801 11.0787 18.591 10.8509 20.2907 10.8431C21.9904 10.8509 23.7027 11.0787 25.301 11.5331C29.1183 8.87998 30.7955 9.43111 30.7955 9.43111C31.8842 12.2557 31.1992 14.3414 30.9916 14.8579C32.274 16.294 33.05 18.1232 33.05 20.3621C33.05 28.2382 28.3712 29.9724 23.9176
                                        30.4801C24.635 31.1165 25.2742 32.3644 25.2742 34.2776C25.2742 37.0214 25.251 39.2296 25.251 39.905C25.251 40.4507 25.611 41.0902 26.6248 40.8888C34.5672 38.1742 40.2905 30.4903 40.2905 21.4331C40.2905 10.1075 31.336 0.926758 20.2907 0.926758Z" />
                                </svg>
                            </a>
                            &nbsp;
                            {{ "the-instructions--source-code" | i18n({}, lang ) | safe }}</p>
                    </div>
                </div>
    
                <hr class="block mb-7 dark:opacity-[0.2] w-full">
    
                <div class="contact-tab">
                    <div class="flex items-center justify-between my-[40px] contact-tab-btn cursor-pointer">
                        <h2 class="text-xl font-bold">{{ "if-you-already-installed-simplex-chat-for-the-terminal" | i18n({}, lang ) | safe }}</h2>
                        <svg class="fill-grey-black dark:fill-white" width="10" height="5" viewBox="0 0 10 5" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M8.40813 4.79332C8.69689 5.06889 9.16507 5.06889 9.45384 4.79332C9.7426 4.51775 9.7426 4.07097 9.45384 3.7954L5.69327 0.206676C5.65717 0.17223 5.61827 0.142089 5.57727 0.116255C5.29026 -0.064587 4.90023 -0.0344467 4.64756 0.206676L0.886983 3.7954C0.598219 4.07097 0.598219 4.51775 0.886983 4.79332C1.17575 5.06889 1.64393 5.06889 1.93269 4.79332L5.17041 1.70356L8.40813 4.79332Z"/>
                        </svg> 
                    </div>
                    
                    <div class="contact-tab-content">
                        <p class="text-base font-medium mb-[46px]">{{ "if-you-already-installed" | i18n({}, lang ) | safe }}&nbsp;
                            <a href="" class="text-base font-medium">{{ "simplex-chat-for-the-terminal" | i18n({}, lang ) | safe }}</a>&nbsp;
                            v1.0.0+, {{ "copy-the-command-below-text" | i18n({}, lang ) | safe }}
                        </p>
                        <p class="bg-white flex items-center justify-between rounded p-3 shadow-[inset_0px_2px_2px_rgba(0,0,0,0.15)] mb-[36px]">
                            <span id="conn_req_uri_text" class="text-grey-black font-light text-[14px] leading-6"></span>
                            <!-- <img class="content_copy" src="/img/new/content-copy.svg" /> -->
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

{# join simplex #}
{% include "sections/join_simplex.html" %}

<script>
    document.querySelectorAll('.d-none-if-js-disabled').forEach(el => el.classList.remove('d-none-if-js-disabled'));
</script>
