<?php
/**
 * Template Name: Home Page
 */
$posts = get_posts(['posts_per_page' => 3]);
get_header();
?>

<div class="content no-pb">
    <div class="main-page">
        <?php the_content();?><!--home page content from wp admin wysiwyg -->
        <?php if($posts):?>
        <div class="mp-blog">
            <div class="cont">
                <div class="promo-header">
                    <div class="cont">
                        <h3>More from the Blog</h3>
                    </div>
                </div>
                <div class="bp-list">
                    <div class="cont">
                        <?php foreach ($posts as $post): ?>
                            <a href="<?=get_permalink(); ?>" class="bp-block <?php $categories = get_the_category(); foreach($categories as $category):?><?= $category->slug; ?> <?php endforeach;?>">
                                <span class="bp-img" style="background-image: url(<?=get_the_post_thumbnail_url(); ?>);"></span>
                                <span class="bp-title"><span class="cont-overflow"><?=get_the_title($post); ?></span></span>
                                <span class="bp-description"><span class="cont-overflow"><?=get_the_excerpt(); ?></span></span>
                            </a>
                        <?php endforeach; ?>
                    </div>
                </div>
            </div>
        </div>
        <?php endif; ?>
        <div class="mp-small-block bot-flex">
            <div class="cont">
                <div class="flex">
                    <div class="left">
                        <div class="promo-header">
                            <div class="cont">
                                <h3>Interested? Get to know more</h3>
                            </div>
                        </div>
                        <div class="buttons">
                            <a href="/book-a-demo/" class="button xxl mp-top-right" tabindex="0">Book a demo</a>
                            <a href="/user/registration" class="button xxl mp-top-left" tabindex="0">Sign up for free</a>
                        </div>
                    </div>
                    <div class="right">
                        <div class="subscribe-block">
                            <div class="sb-img">
                                <picture>
                                    <source srcset="<?= get_theme_file_uri('/assets/img/home-page/subscription.webp'); ?>" type="image/webp">
                                    <img src="<?= get_theme_file_uri('/assets/img/home-page/subscription.png'); ?>" alt="Feature">
                                </picture>
                            </div>
                            <div class="sb-text">
                                <div class="sb-line1">Subscribe and receive exclusive tips and offers! </div>
                                <div class="sb-line2">You can unsubscribe at any time.</div>
                            </div>
                            <div class="sub-input">
                                <?php
                                the_widget( 'SubscribeToLc_Widget', [], ['code' => 'a0685621c3'] );
                                ?>
                            </div>
                        </div>
                    </div>
                </div>						
            </div>
        </div>
        <script>
			(function(){

				var lines = [
					'customized learning experiences.',
					'online publishing.',
					'customized teaching experiences.'
				];
				var currentTextNum = 0;

				function addNext(){
					var element = document.getElementById('animatedText');
                    if (!element) return;
					element.innerText = lines[currentTextNum].substr(0, element.innerText.length + 1);

					if ( element.innerText.length === lines[currentTextNum].length ) {
						setTimeout(function(){
							clearCurrent();
						}, 1000);		
					} else {
						setTimeout(function(){
							addNext();
						}, 30);												
					}
				}

				function clearCurrent(){
					var element = document.getElementById('animatedText');
					element.innerText = element.innerText.slice(0, -1);

					if ( element.innerText.length > 0 ) {
						setTimeout(function(){
							clearCurrent();
						}, 25);	
					} else {
						currentTextNum++;
						if (currentTextNum > lines.length - 1) {
							currentTextNum = 0;
						}
						setTimeout(function(){
							addNext();
						}, 1000);												
					}												
				}

				setTimeout(function(){
					addNext();
				}, 1000);											

			})();									
		</script>
    </div>
</div>

<?php
get_footer();
