<?php
/* Template Name: Home */
get_header(); ?>

<section class="l-welcome">
	<div class="container">
		<div class="c-hero-new">
			<h1 class="c-hero-new__title"><?php echo get_field('title_hero'); ?></h1>
		</div>
		<picture class="l-welcome__cover">
			<source media="(min-width: 768px)" srcset="<?php echo get_template_directory_uri(); ?>/img/layout/phone.png">
			<img src="<?php echo get_template_directory_uri(); ?>/img/layout/phone-sm.png">
		</picture>
	</div>
</section>

<section class="l-quote">
	<div class="container">
		<div class="c-box-guests">
			<h2 class="c-box-guests__title"><?php echo get_field('subtitle_hero'); ?></h2>
			<div class="row">
				<?php
				$listlinks = get_field('hero_section_links');
				$counthero = 1;
				foreach ($listlinks as $listlink) :
					$listlinktitle[$counthero] = $listlink['hero_section_link_title'];
					$listlinkurl[$counthero] = $listlink['hero_section_link'];
					$counthero++;
				endforeach;
				?>
				<div class="col-md-6">
					<a href="<?php echo $listlinkurl[1]; ?>" class="c-box-guests__link"><?php echo $listlinktitle[1]; ?></a>
					<a href="<?php echo $listlinkurl[3]; ?>" class="c-box-guests__link"><?php echo $listlinktitle[3]; ?></a>
					<a href="<?php echo $listlinkurl[5]; ?>" class="c-box-guests__link"><?php echo $listlinktitle[5]; ?></a>
				</div>
				<div class="col-md-6">
					<a href="<?php echo $listlinkurl[2]; ?>" class="c-box-guests__link"><?php echo $listlinktitle[2]; ?></a>
					<a href="<?php echo $listlinkurl[4]; ?>" class="c-box-guests__link"><?php echo $listlinktitle[4]; ?></a>
					<a href="<?php echo $listlinkurl[6]; ?>" class="c-box-guests__link"><?php echo $listlinktitle[6]; ?></a>
				</div>
			</div>
		</div>
		<div class="row my-3 my-lg-4">
			<div class="col col-lg-12">
				<div class="row">
					<div class="l-quote__info col-lg-6 order-2 order-lg-0 mt-3 mt-lg-0">
						<div class="row">
							<?php
							$cardlinks = get_field('popular_features_links');
							$count = 1;
							foreach ($cardlinks as $cardlink) :
								$cardlinktitle[$count] = $cardlink['popular_features_link_title'];
								$cardlinkurl[$count] = $cardlink['popular_features_link'];
								$count++;
							endforeach;
							?>
							<div class="col-6 col-md-4 col-lg-6"><a href="<?php echo $cardlinkurl[1]; ?>" class="c-stack-featured"><?php echo $cardlinktitle[1]; ?></a></div>
							<div class="col-6 col-md-4 col-lg-6"><a href="<?php echo $cardlinkurl[2]; ?>" class="c-stack-featured"><?php echo $cardlinktitle[2]; ?></a></div>
							<div class="col-6 col-md-4 col-lg-6"><a href="<?php echo $cardlinkurl[3]; ?>" class="c-stack-featured"><?php echo $cardlinktitle[3]; ?></a></div>
							<div class="col-6 col-md-4 col-lg-6"><a href="<?php echo $cardlinkurl[4]; ?>" class="c-stack-featured"><?php echo $cardlinktitle[4]; ?></a></div>
							<div class="col-6 col-md-4 col-lg-6"><a href="<?php echo $cardlinkurl[5]; ?>" class="c-stack-featured"><?php echo $cardlinktitle[5]; ?></a></div>
							<div class="col-6 col-md-4 col-lg-6"><a href="<?php echo $cardlinkurl[6]; ?>" class="c-stack-featured"><?php echo $cardlinktitle[6]; ?></a></div>
						</div>
					</div>
					<div class="col-lg-5 offset-lg-1 d-flex flex-column justify-content-center">
						<h2 class="c-title is-dark"><?php echo get_field('featured_faq_title'); ?></h2>
						<div class="c-description is-dark-gray mt-2">
							<p><?php echo get_field('featured_faq_description'); ?></p>
						</div>
						<a class="c-btn-icon is-dark mt-2" href="<?php echo get_field('featured_faq_link'); ?>" data-text="Learn more"><span>Learn more</span> <i class="icon icon-go"></i></a>
					</div>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-lg-8 m-lg-auto">
				<blockquote class="c-blockquote">
					<div class="c-blockquote__line"></div>
					<p>“<?php echo get_field('description_blockquote'); ?>”</p>
					<footer>
						– <?php echo get_field('author_blockquote'); ?> <cite><?php echo get_field('company_blockquote'); ?></cite>
					</footer>
				</blockquote>
			</div>
		</div>
	</div>
</section>

<section class="l-infos">
	<div class="l-infos__section is-negative">
		<article class="c-box-featured">
			<div class="c-box-featured__info">
				<div class="c-box-featured__wrapper">
					<h2 class="c-box-featured__title"><?php echo get_field('title_featured_i'); ?></h2>
					<?php if (get_field('description_featured_i')) : ?>
					<h3 class="c-box-featured__subtitle"><?php echo get_field('description_featured_i'); ?></h3>
					<?php endif; ?>
				</div>
			</div>
			<div class="c-box-featured__cover" style="background-image: url(<?php echo get_field('imagem_featured_i'); ?>)"></div>
			<?php $type = get_field('seletc_type_link_featured_i');
			if ($type === 'Link') :
				?><a href="<?php echo get_field('link_news_or_link_video_featured_i'); ?>" target="_blank" class="c-box-featured__btn">Read</a><?php
																																				else :
																																					?><a data-fancybox href="<?php echo get_field('link_news_or_link_video_featured_i'); ?>" class="c-box-featured__btn is-light">Watch</a><?php
																																																																							endif;
																																																																							?>
		</article>
	</div>

	<div class="l-infos__section is-x-hidden">
		<div class="container py-3 py-md-4 py-lg-5">
			<div class="row">
				<div class="col-md-5">
					<div class="c-box-info">
						<h2 class="c-box-info__title"><?php echo get_field('title_info_numbers'); ?></h2>
						<div class="c-box-info__description">
							<p><?php echo get_field('description_info_number'); ?></p>
						</div>
						<!-- <a href="#0" class="c-btn-icon">Learn more <i class="icon icon-go"></i></a> -->
					</div>
				</div>

				<div class="col-md-6 offset-md-1 mt-2 mt-md-0">
					<div class="row">
						<div class="col-6">
							<div class="c-info-numbers">
								<p class="c-info-numbers__label">App downloads</p>
								<p class="c-info-numbers__value"><?php echo get_field('app_downloads'); ?></p>
							</div>
						</div>
						<div class="col-6">
							<div class="c-info-numbers">
								<p class="c-info-numbers__label">Active users</p>
								<p class="c-info-numbers__value"><?php echo get_field('active_users'); ?></p>
							</div>
						</div>
					</div>
					<div class="row mt-2">
						<div class="col-6">
							<div class="c-info-numbers">
								<p class="c-info-numbers__label">Average iOS rating</p>
								<p class="c-info-numbers__value"><?php echo get_field('average_ios_rating'); ?></p>
							</div>
						</div>
						<div class="col-6">
							<div class="c-info-numbers">
								<p class="c-info-numbers__label">Crew checkins</p>
								<p class="c-info-numbers__value"><?php echo get_field('crew_checkins'); ?></p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div class="c-particle-retangular"></div>

	<div class="l-infos__section">
		<article class="c-box-featured is-right">
			<div class="c-box-featured__info">
				<div class="c-box-featured__wrapper">
					<h2 class="c-box-featured__title"><?php echo get_field('title_featured_ii'); ?></h2>
					<?php if (get_field('description_featured_ii')) : ?>
					<h3 class="c-box-featured__subtitle"><?php echo get_field('description_featured_ii'); ?></h3>
					<?php endif; ?>
				</div>
			</div>
			<div class="c-box-featured__cover" style="background-image: url(<?php echo get_field('imagem_featured_ii'); ?>)"></div>
			<?php $type = get_field('seletc_type_link_featured_ii');
			if ($type === 'Link') :
				?><a href="<?php echo get_field('link_news_or_link_video_featured_ii'); ?>" target="_blank" class="c-box-featured__btn">Read</a><?php
																																				else :
																																					?><a data-fancybox href="<?php echo get_field('link_news_or_link_video_featured_ii'); ?>" class="c-box-featured__btn is-light">Watch</a><?php
																																																																							endif;
																																																																							?>
		</article>
	</div>

	<div class="l-infos__section mt-3 mt-md-4 mt-lg-5">
		<article class="c-box-featured mt-3 mt-lg-0">
			<div class="c-box-featured__info">
				<div class="c-box-featured__wrapper">
					<h2 class="c-box-featured__title"><?php echo get_field('title_featured_iii'); ?></h2>
					<?php if (get_field('description_featured_iii')) : ?>
					<h3 class="c-box-featured__subtitle"><?php echo get_field('description_featured_iii'); ?></h3>
					<?php endif; ?>
				</div>
			</div>
			<div class="c-box-featured__cover" style="background-image: url(<?php echo get_field('imagem_featured_iii'); ?>)"></div>
			<?php $type = get_field('seletc_type_link_featured_iii');
			if ($type === 'Link') :
				?><a href="<?php echo get_field('link_news_or_link_video_featured_iii'); ?>" target="_blank" class="c-box-featured__btn">Read</a><?php
																																					else :
																																						?><a data-fancybox href="<?php echo get_field('link_news_or_link_video_featured_iii'); ?>" class="c-box-featured__btn">Watch</a><?php
																																																																						endif;
																																																																						?>
		</article>
	</div>
</section>

<section class="l-brands-news l-brands-latest py-3 py-md-4 py-lg-4">
	<div class="carousel-title mb-2">
		<div class=" d-flex justify-content-between align-items-center mb-2">
			<h2 class="c-title is-dark pr-md-2">We’re constantly innovating</h2>
			<div class="d-none d-sm-flex">
				<a href="javascript:;" class="c-btn-round is-dark js-carousel-news-prev" aria-label="Prev"><i class="icon icon-left-arrow"></i></a>
				<a href="javascript:;" class="c-btn-round is-dark js-carousel-news-next" aria-label="Next"><i class="icon icon-right-arrow"></i></a>
			</div>
		</div>

		<div class="c-description is-dark">
			<p>Sometimes we write about it.</p>
		</div>
	</div>
	<div class="c-carousel-news js-carousel-news owl-carousel">

		<?php

		$args = array(
			'post_type'      => 'post',
			'posts_per_page' => 12,
			'post_status' => 'publish',

		);
		$loop = new WP_Query($args);


		if ($loop->have_posts()) :
			?>
		<?php while ($loop->have_posts()) : $loop->the_post(); ?>
		<?php
				$categories = get_the_category();
				$post_id = get_the_ID();
				$imagefeatured = get_the_post_thumbnail_url($post_id, 'full');
				$imagefeaturedmobile = get_the_post_thumbnail_url($post_id, 'list-archive');
				$format = get_post_format($post_id);
				if (!$format) :
					$format = "article";
				endif;
				?>
		<article class="c-card-news">
			<div class="c-card-news__cover">
				<a class="c-card-news__link" href="<?php the_permalink(); ?>">
					<picture class="c-card-news__image">
						<source media="(max-width: 1200px)" srcset="<?php echo $imagefeaturedmobile; ?>">
						<img src="<?php echo $imagefeatured; ?>" alt="<?php echo the_title(); ?>">
					</picture>
					<div class="c-card-news__type"><i class="icon icon-<?php echo $format; ?>"></i></div>
				</a>
			</div>
			<p class="c-card-news__meta is-dark"><?php echo get_the_date('M'); ?> <?php echo get_the_date('d'); ?>, <?php echo get_the_date('Y'); ?> · <?php echo $categories[0]->name; ?> · <?php echo prefix_estimated_reading_time(get_the_content()); ?> min read</p>
			<a href="<?php the_permalink(); ?>">
				<h3 class="c-card-news__title is-dark"><?php echo the_title(); ?></h3>
			</a>
		</article>
		<?php
			endwhile;
			wp_reset_query();
		endif;
		?>
	</div>
</section>

<?php get_footer(); ?>
