<!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta charset="UTF-8">

    <script>
        document.documentElement.className = document.documentElement.className.replace("no-js","js");
        document.documentElement.setAttribute('style', 'overflow: hidden');
    </script>
    <?php
        wp_head();

        // General
        $color                      = get_field('color');
        $footerVersion              = get_field('footer_version');

        // Stores settings (icon, url, qr_code)
        $appStoreSettings           = get_field('app_store_settings');
        $googlePlaySettings         = get_field('google_play_settings');

        // Header
        $headerDescription          = get_field('header_description');

        // Doctor (app_screen, photo, review, name)
        $doctor                     = get_field('doctor');

        // App info (header, slider, points_type, dot_points, icon_points)
        $appInfo                    = get_field('app_info');

        // Scheme items (header, column_amount, items, additional_list)
        $scheme                     = get_field('scheme');

        // Additional info
        $additionalInfo             = get_field('additional_info');
        $lastAppScreen              = get_field('last_app_screen');
        $supportInfo                = get_field('support_info');
    ?>
</head>
<body class="<?= $color ?>">
<noscript>Your browser does not support JavaScript!</noscript>
<style>
    .preloader {
        background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='L7' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 100 100' enable-background='new 0 0 100 100' xml:space='preserve'%3E%3Cpath fill='%23f1f1f1' d='M31.6,3.5C5.9,13.6-6.6,42.7,3.5,68.4c10.1,25.7,39.2,38.3,64.9,28.1l-3.1-7.9c-21.3,8.4-45.4-2-53.8-23.3 c-8.4-21.3,2-45.4,23.3-53.8L31.6,3.5z'%3E%3CanimateTransform attributeName='transform' attributeType='XML' type='rotate' dur='2s' from='0 50 50' to='360 50 50' repeatCount='indefinite' /%3E%3C/path%3E%3Cpath fill='%23f1f1f1' d='M42.3,39.6c5.7-4.3,13.9-3.1,18.1,2.7c4.3,5.7,3.1,13.9-2.7,18.1l4.1,5.5c8.8-6.5,10.6-19,4.1-27.7 c-6.5-8.8-19-10.6-27.7-4.1L42.3,39.6z'%3E%3CanimateTransform attributeName='transform' attributeType='XML' type='rotate' dur='1s' from='0 50 50' to='-360 50 50' repeatCount='indefinite' /%3E%3C/path%3E%3Cpath fill='%23f1f1f1' d='M82,35.7C74.1,18,53.4,10.1,35.7,18S10.1,46.6,18,64.3l7.6-3.4c-6-13.5,0-29.3,13.5-35.3s29.3,0,35.3,13.5 L82,35.7z'%3E%3CanimateTransform attributeName='transform' attributeType='XML' type='rotate' dur='2s' from='0 50 50' to='360 50 50' repeatCount='indefinite' /%3E%3C/path%3E%3C/svg%3E");
    }
</style>

<div id="cover" class="u-cover preloader" style="position: absolute; left: 0; top: 0; z-index: 200; width: 100%; height: 100%; background-color: white; background-size: 100px 100px; background-repeat: no-repeat; background-position: center center"></div>

<div class="c-topbar">
    <div class="o-wrap">
        <?php if ( has_custom_logo() ): ?>
            <?php the_custom_logo(); ?>
        <?php endif; ?>

        <i class="o-hamburger js-hamburger"></i>
    </div>


    <nav class="c-nav js-nav">
        <ul>
            <li>
                <a href="#" data-target="#about">O aplikacji</a>
            </li>
            <li>
                <a href="#" data-target="#content">Treści aplikacji</a>
            </li>
            <li>
                <a href="#" data-target="#download" data-offset="-100">Pobierz aplikację</a>
            </li>
        </ul>
    </nav>


</div>


<div class="c-header">
    <div class="o-wrap">
        <header>
            <?= $headerDescription ?>
        </header>

        <div class="c-download">
            <a href="#" class="o-btn" data-target="#download" data-offset="-100">
                <span>Pobierz aplikację</span>
            </a>

            <div class="c-download__buttons" style="position: relative; z-index: 9;">
                <a href="<?= $appStoreSettings['url'] ?>" target="_blank">
                    <?= wp_get_attachment_image($appStoreSettings['icon'], 'full') ?>
                </a>

                <a href="<?= $googlePlaySettings['url'] ?>" target="_blank">
                    <?= wp_get_attachment_image($googlePlaySettings['icon'], 'full') ?>
                </a>
            </div>
        </div>
    </div>
</div>


<div class="c-review" id="about">
    <div class="o-wrap">

        <div class="o-cols">
            <div class="o-cols__item">
                <?= wp_get_attachment_image($doctor['app_screen'], 'full') ?>
            </div>

            <div class="o-cols__item">
                <div class="c-cloud">
                    <div class="c-cloud__photo">
                        <?= wp_get_attachment_image($doctor['photo'], 'full') ?>
                    </div>

                    <blockquote>
                        <p>
                            <?= $doctor['review'] ?>
                        </p>

                        <p class="author"><?= $doctor['name'] ?></p>
                    </blockquote>

                    <img src="<?= get_template_directory_uri() . '/' ?>img/review/cloud.png" alt="" width="1297" height="964" class="c-cloud__cloud">
                </div>
            </div>
        </div>

    </div>
</div>


<div class="c-app" id="content">
    <div class="o-wrap">

        <div class="o-circleicon">
            <img src="<?= get_template_directory_uri() . '/' ?>img/icons/stethoscope.png" alt="">
        </div>

        <header class="o-header">
            <?= $appInfo['header'] ?>
        </header>

        <div class="c-app__content">
            <div class="c-app__info <?= $appInfo['points_type'] ?>">
                <ul>
                    <?php
                        if($appInfo['points_type'] === 'c-app__info--icons') {
                            foreach($appInfo['icon_points'] as $item) {
                                echo sprintf(
                                    '<li class="%s">%s</li>',
                                    $item['icon'],
                                    $item['item']
                                );
                            }
                        } else {
                            foreach($appInfo['dot_points'] as $item) {
                                echo sprintf(
                                    '<li>%s</li>',
                                    $item['item']
                                );
                            }
                        }
                    ?>
                </ul>
                <?php
                    if($appInfo['additional_list']) {
                        echo '<div class="c-calc"><div class="o-cols o-cols--3">';

                        foreach($appInfo['additional_list'] as $item) {
                            echo sprintf(
                            '<div class="o-cols__item"><p>%s</p></div>',
                                $item['item']
                            );
                        }

                        echo '</div></div>';
                    }
                ?>
            </div>

            <div class="c-app__slider">
                <div class="c-slider">
                    <div class="swiper-container js-appSlider">
                        <div class="swiper-wrapper">
                            <?php
                                foreach($appInfo['slider'] as $item) {
                                    echo sprintf(
                                        '<div class="swiper-slide">%s</div>',
                                        wp_get_attachment_image($item, 'full')
                                    );
                                }
                            ?>
                        </div>
                    </div>

                    <div class="swiper-button-next"></div>
                    <div class="swiper-button-prev"></div>
                </div>
            </div>
        </div>

        <div class="c-download">
            <a href="#" class="o-btn" data-target="#download" data-offset="-100">
                <span>Pobierz aplikację</span>
            </a>

            <div class="c-download__buttons" style="z-index: 9">
                <a href="<?= $appStoreSettings['url'] ?>" target="_blank">
                    <?= wp_get_attachment_image($appStoreSettings['icon'], 'full') ?>
                </a>

                <a href="<?= $googlePlaySettings['url'] ?>" target="_blank">
                    <?= wp_get_attachment_image($googlePlaySettings['icon'], 'full') ?>
                </a>
            </div>
        </div>


        <div class="c-scheme">
            <div class="o-circleicon">
                <img src="<?= get_template_directory_uri() . '/' ?>img/icons/hands.png" alt="">
            </div>

            <header class="o-header">
                <?= $scheme['header'] ?>
            </header>

            <div class="o-cols o-cols--<?= $scheme['column_amount'] ?>">
                <?php
                    foreach($scheme['items'] as $item) {
                        echo sprintf(
                        '<figure class="o-cols__item">%s<figcaption>%s</figcaption></figure>',
                            wp_get_attachment_image($item['icon'], 'full'),
                            $item['item']
                        );
                    }
                ?>
            </div>
        </div>

    </div>
</div>

<div class="c-partners" id="download">
    <div class="o-wrap">

        <i class="c-partners__arrow"></i>

        <div class="c-partners__proloque">
            <div class="o-article">
                <?= $additionalInfo ?>
            </div>
        </div>

        <div class="o-cols o-cols--3">
            <div class="o-cols__item">

                <div class="c-partners__logotypes">
                    <p>Partnerem aplikacji jest:</p>

                    <p>&nbsp;</p>

                    <img src="<?= get_template_directory_uri() . '/' ?>img/partners/sandoz.png" alt="sandoz">

                    <p>&nbsp;</p>

                    <hr>
                </div>
            </div>

            <div class="o-cols__item phone">

                <div class="c-partners__phone">
                    <?= wp_get_attachment_image($lastAppScreen, 'full') ?>
                </div>

                <hr>
            </div>

            <div class="o-cols__item">

                <div class="c-partners__download">
                    <div>
                        <a href="<?= $appStoreSettings['url'] ?>" class="o-btn o-btn--download ios" target="_blank">Pobierz aplikację&nbsp;z
                            <img src="<?= get_template_directory_uri() . '/' ?>img/icons/appstore.png" alt="appstore">
                        </a>

                        <div class="o-qr">
                            <?= wp_get_attachment_image($appStoreSettings['qr_code'], 'full') ?>
                        </div>
                    </div>

                    <div>
                        <a href="<?= $googlePlaySettings['url'] ?>" class="o-btn o-btn--download android" target="_blank">Pobierz aplikację&nbsp;z
                            <img src="<?= get_template_directory_uri() . '/' ?>img/icons/googleplay.png" alt="googleplay">
                        </a>

                        <div class="o-qr">
                            <?= wp_get_attachment_image($googlePlaySettings['qr_code'], 'full') ?>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="c-partners__contact">
            <div class="o-article">
                <p>
                    <?= $supportInfo ?>
                    <script language="JavaScript">
                        var part1 = "support";
                        var part2 = Math.pow(2,6);
                        var part3 = String.fromCharCode(part2);
                        var part4 = "commoditech.pl";
                        var part5 = part1 + String.fromCharCode(part2) + part4;
                        document.write("<a href=" + "mai" + "lto" + ":"
                            + part5 + ">" + part1 + part3 + part4 + "</a>.");
                    </script>

                </p>
            </div>
        </div>
    </div>
</div>


<footer class="c-footer">
    <div class="c-footer__top">
        <div class="o-wrap">
            <p><?= $footerVersion ?></p>
        </div>
    </div>

    <div class="c-footer__bottom">
        <?php
            wp_nav_menu([
                'theme_location'  => 'footer-menu',
                'container' => 'nav',
                'container_class' => 'c-footer__nav',
                'menu_class' => '',
            ]);
        ?>
    </div>
</footer>


<?php wp_footer(); ?>
</body>
</html>


