<?php
/**
 * Template Name: Hjem Template
 *
 * Template for displaying home page.
 * 
 */


// Exit if accessed directly.
defined( 'ABSPATH' ) || exit;

$heroSection = get_field('home_cover_section');
$firstSection = get_field('home_first_section');
$secondSection = get_field('home_second_section');
$thirdSection = get_field('home_third_section');
$fourthSection = get_field('home_fourth_section');
$fifthSection = get_field('home_fifth_section');

$socialMedia = get_field('social_media_links','options');
$servicesData = get_field('service_cards', 93);

// Check if services holds more than 4 items to splice it 
if( sizeof($servicesData) > 4 ):
    $servicesData = array_splice($servicesData, 0, 4);
endif;


get_header();
?>
<main>
    <section class="hero">
        <?php
            $heroArgs = array(
            'image'     => $heroSection['cover_image'],
            'pageTitle' => null,
            );
            get_template_part( 'global-templates/cover', null, $heroArgs ); 
        ?>
        
        <div class="hero__content">
            <span class="heading1">
                <?php echo esc_html($heroSection['cover_quote_text']) ?>
            </span>
            <span class="heading3">
                <?php echo esc_html($heroSection['cover_quote_author']) ?>
            </span>
        </div>
        <div class="hero__social">
            <ul>
                <li>
                    <a href="<?php echo esc_attr( $socialMedia['facebook'])?>" target='_blank'
                        rel="noopener noreferrer">
                        <span class="fab fa-facebook-square"></span>
                    </a>
                </li>
                <li>
                    <a href="<?php echo esc_attr( $socialMedia['instagram'])?>" target='_blank'
                        rel="noopener noreferrer">
                        <span class="fab fa-instagram"></span>
                    </a>
                </li>
                <li>
                    <a href="<?php echo esc_attr( $socialMedia['linkedin'])?>" target='_blank'
                        rel="noopener noreferrer">
                        <span class="fab fa-linkedin"></span>
                    </a>
                </li>
            </ul>
        </div>
    </section>

    <section class="p-t-10 S01">
        <div class="container__right">
            <div class="content__wrapper">
                <span class="heading__sm"><?php echo esc_html($firstSection['small_title']); ?></span>
                <h1 class="heading__md"><?php echo esc_html($firstSection['main_title']); ?></h1>
                <p class="paragraph"><?php echo esc_html($firstSection['main_paragraph']); ?></p>
                <a href="<?php echo esc_attr($firstSection['btn_link']);?>" class="btnText__alt">
                <?php echo esc_html($firstSection['btn_text']); ?>
                <span class="fas fa-arrow-right"></span> 
                </a>	
            </div>
            <div class="cover__wrapper">
                <img alt="<?php echo esc_attr($firstSection['corresponding_image']['alt']); ?>" class="lazy"
                src="<?php echo esc_attr($firstSection['corresponding_image']['sizes']['thumbnail']); ?>"
                data-src="<?php echo esc_attr($firstSection['corresponding_image']['sizes']['large']); ?>" data-srcset="<?php echo esc_attr($firstSection['corresponding_image']['sizes']['medium']); ?> 300w,
                <?php echo esc_attr($firstSection['corresponding_image']['sizes']['large']); ?> 768w,
                <?php echo esc_attr($firstSection['corresponding_image']['sizes']['1536x1536']); ?> 1024w" data-sizes="100w" />
            </div>
        </div>
    </section>

    <section class="p-t-10 S02">
        <div class="container__left">
            <div class="cover__wrapper">
                <div class="cover__fixer">
                    <img alt="<?php echo esc_attr($secondSection['corresponding_image']['alt']); ?>" class="lazy"
                    src="<?php echo esc_attr($secondSection['corresponding_image']['sizes']['thumbnail']); ?>"
                    data-src="<?php echo esc_attr($secondSection['corresponding_image']['sizes']['large']); ?>" data-srcset="<?php echo esc_attr($secondSection['corresponding_image']['sizes']['medium']); ?> 300w,
                    <?php echo esc_attr($secondSection['corresponding_image']['sizes']['large']); ?> 768w,
                    <?php echo esc_attr($secondSection['corresponding_image']['sizes']['1536x1536']); ?> 1024w" data-sizes="100w" />
                </div>
            </div>
            <div class="content__wrapper">
                <span class="heading__sm"><?php echo esc_html($secondSection['small_title']); ?></span>
                <h1 class="heading__md"><?php echo esc_html($secondSection['main_title']); ?></h1>
                <p class="paragraph"><?php echo esc_html($secondSection['first_paragraph']); ?></p>
                <p class="paragraph"><?php echo esc_html($secondSection['second_paragraph']); ?></p>
            </div>
        </div>        
    </section>

    <section class="p-t-10 S03">
        <div class="container">
            <div class="content__wrapper">
                <span class="heading__sm"><?php echo esc_html($thirdSection['small_title']); ?></span>
                <h1 class="heading__md"><?php echo esc_html($thirdSection['main_title']); ?></h1>
                <p class="paragraph"><?php echo esc_html($thirdSection['first_paragraph']); ?></p>
            </div>
        </div>
        <?php get_template_part( 'global-templates/home', 'services', $servicesData); ?>
    </section>

    <section class="p-t-10 S04">
        <div class="blogposts__wrapper">
            <div class="hero__wrapperCover">
                <div class="hero__background --v-25">
                    <img alt="<?php echo esc_attr($fourthSection['cover_image']['alt']); ?>" class="lazy"
                    src="<?php echo esc_attr($fourthSection['cover_image']['sizes']['thumbnail']); ?>"
                    data-src="<?php echo esc_attr($fourthSection['cover_image']['sizes']['large']); ?>" 
                    data-srcset="<?php echo esc_attr($fourthSection['cover_image']['sizes']['medium']); ?> 300w,
                    <?php echo esc_attr($fourthSection['cover_image']['sizes']['large']); ?> 768w,
                    <?php echo esc_attr($fourthSection['cover_image']['sizes']['1536x1536']); ?> 1024w" data-sizes="100w" />
                    <div class="hero__overlayDynamic" aria-hidden="true"></div>
                </div>
            </div>
            <div class="container">
                <div class="blogposts__titles">
                    <span class="btnText"><?php echo esc_html($fourthSection['small_title']); ?></span>
                    <h1 class="heading1"><?php echo esc_html($fourthSection['main_title']); ?></h1>
                </div>
                <div class="blogposts__cards">
                    <?php 
                    get_template_part( 'global-templates/home', 'posts' ); ?>
                </div>
            </div>
        </div>
    </section>

    <section class="p-t-10 S05">
        <div class="container">
            <div class="instafeed__titles">
                <span class="btnText"><?php echo esc_html($fifthSection['small_title']); ?></span>
                <h1 class="heading1"><?php echo esc_html($fifthSection['instagram_username']); ?></h1>
            </div>
        </div>     
            <div class="instafeed__wrapper">                
                <?php echo do_shortcode('[instagram-feed]') ?>
            </div> 
    </section>

    <section class="p-t-10 S06">
        <?php get_template_part( 'loop-templates/sponsors' ); ?>
    </section>
</main>

<?php

get_footer();