<?php
include_once 'assets/inc/globals.php';

list($page) = getRecords(array(
	'tableName' => "home_page"
));
$pageContents = @$page[0];

if(!@$pageContents) {
  include('404.php');
  exit;
}

list($sections) = getRecords(array(
	'tableName' => "homepage_sections",
	'orderBy'   => 'dragSortOrder DESC',
));

list($team) = getRecords(array(
	'tableName' => "homepage_team",
	'orderBy'   => 'dragSortOrder DESC',
));

list($services) = getRecords(array(
	'tableName' => "homepage_services",
	'orderBy'   => 'dragSortOrder DESC',
));

?>
<!doctype html>
<html lang="en">

<head>
	<?php include_once('assets/inc/head.php'); ?>
</head>

<body>

	<?php include_once('assets/inc/header.php'); ?>

	<div class="main">
		<div class="main-bg">
			<?php if(!empty($pageContents['body_background_image'][0]['urlPath'])) { ?>
			<img src="<?php echo ($isMobile)?htmlencode($pageContents['body_background_image'][0]['thumbUrlPath']):htmlencode($pageContents['body_background_image'][0]['urlPath']); ?>" alt="">
			<?php } ?>
			<?php if(!empty($pageContents['body_background_vimeo_video'])) { ?>
			<iframe src="https://play.gumlet.io/embed/<?php echo htmlencode($pageContents['body_background_vimeo_video']); ?>?background=true&autoplay=true&loop=true&disable_player_controls=true" title="Hive" referrerpolicy="origin" allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture; fullscreen;clipboard-write;"></iframe>
			<?php } ?>
		</div>
		<div class="hero">
			<div class="box">
				<div class="container">
					<div class="row">
						<div class="col">
							<h1><?php echo htmlencode($pageContents['title']); ?><br /><?php echo htmlencode($pageContents['title_2']); ?></h1>
							<p><?php echo htmlencode($pageContents['intro']); ?></p>
						</div>
					</div>
					<div class="row">
						<div class="col-md-8 offset-md-4">
							<div class="hero-media" style="background-image:url('<?php echo htmlencode(@$pageContents['header_image'][0]['urlPath']); ?>');">
								<?php if(!empty($pageContents['header_background_vimeo_video'])) { ?>
								<div class="play-animate" data-bs-toggle="modal" data-bs-target="#headerVideoModal">Play</div>
								<iframe src="https://play.gumlet.io/embed/<?php echo htmlencode(@$pageContents['header_background_vimeo_video']); ?>?background=true&autoplay=true&loop=true&disable_player_controls=true" title="Hive" referrerpolicy="origin" allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture; fullscreen;clipboard-write;"></iframe>
								<?php } ?>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="scroll d-none d-md-block">
				<div class="container">
					<a href="#scroll">Scroll to discover</a>
				</div>
			</div>
		</div>
		<?php if(!empty($pageContents['header_background_vimeo_video'])) { ?>
		<div class="modal fade cta cta-modal blackbg portfolioModal" id="headerVideoModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="headerVideoModalLabel" aria-hidden="true">
			<div class="modal-dialog modal-fullscreen-sm-down">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
					</div>
					<div class="modal-body">
						<div class="ratio ratio-21x9">
							<iframe src="https://play.gumlet.io/embed/<?php echo htmlencode($pageContents['header_background_vimeo_video']); ?>?preload=false" title="Hive" referrerpolicy="origin" allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture; fullscreen;clipboard-write;"></iframe>
						</div>
					</div>
				</div>
			</div>
		</div>
		<?php } ?>

		<a id="scroll"></a>
		<?php $i = 1; ?>
		<?php foreach($sections as $section) { ?>
		<div class="cont-box">
			<div class="container">
				<div class="row align-items-center<?php if($i % 2 == 0) { ?> flex-md-row-reverse<?php } ?>">
					<div class="col-md-6<?php if($i % 2 == 0) { ?> offset-md-1<?php } ?>">
						<div class="media-wrap">
							<div class="media">
								<?php if(!empty($section['vimeo_video'])) { ?>
								<iframe class="lazyload" data-src="https://play.gumlet.io/embed/<?php echo htmlencode($section['vimeo_video']); ?>?background=true&autoplay=true&loop=true&disable_player_controls=true" title="<?php echo htmlencode($section['title']); ?>" referrerpolicy="origin" allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture; fullscreen;clipboard-write;"></iframe>
								<?php } else { ?>
								<div class="pic lazyload" data-bg="<?php echo htmlencode(@$section['image'][0]['urlPath']); ?>"></div>
								<?php } ?>
							</div>
						</div>
					</div>
					<div class="col-md-5<?php if($i % 2 != 0) { ?> offset-md-1<?php } ?>">
						<div class="text">
							<h2><?php echo htmlencode($section['title']); ?></h2>
							<p><?php echo htmlencode($section['intro']); ?></p>
						</div>
					</div>
				</div>
			</div>
		</div>
		<?php $i++; ?>
		<?php } ?>

		<div class="swb lazyload" data-bg="<?php echo htmlencode(@$pageContents['main_section_end_background_image'][0]['urlPath']); ?>">
			<img class="bg-black-triangle" src="/assets/images/black-triangle.png" alt="">
			<?php if(!empty($pageContents['main_section_end_vimeo_video'])) { ?>
			<iframe class="lazyload" data-src="https://play.gumlet.io/embed/<?php echo htmlencode($pageContents['main_section_end_vimeo_video']); ?>?background=true&autoplay=true&loop=true&disable_player_controls=true" title="Hive" referrerpolicy="origin" allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture; fullscreen;clipboard-write;"></iframe>
			<?php } ?>
			<div class="container">
				<div class="row justify-content-center box">
					<div class="col-md-6">
						<p><?php echo htmlencode($pageContents['main_section_end_title']); ?></p>
					</div>
				</div>
			</div>
		</div>

		<div class="bios">
			<img class="bg-black-triangle" src="/assets/images/black-triangle-right.png" alt="">
			<div class="container">
				<div class="row align-items-end flex-md-row-reverse">
					<?php $i = 0; ?>
					<?php foreach($team as $member) { ?>
					<div class="col-md-5 <?php if($i % 2 == 0) { ?>offset-md-1 mb-5 mb-md-0<?php } ?>">
						<?php if($i == 0) { ?>
							<h2><?php echo htmlencode($pageContents['team_title']); ?></h2>
						<?php } ?>
						<img class="lazyload" data-src="<?php echo htmlencode($member['image'][0]['urlPath']); ?>" alt="">
						<div class="position"><?php echo htmlencode($member['position']); ?></div>
						<div class="name"><?php echo htmlencode($member['full_name']); ?></div>
						<a class="btn white" href="#" data-bs-toggle="modal" data-bs-target="#memberModal<?php echo htmlencode($member['num']); ?>">Meet <?php echo htmlencode($member['full_name']); ?></a>
					</div>
					<?php $i++; ?>
					<?php } ?>
				</div>
			</div>
		</div>
		<?php foreach($team as $member) { ?>
		<div class="modal fade" id="memberModal<?php echo htmlencode($member['num']); ?>" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="memberModal<?php echo htmlencode($member['num']); ?> Label" aria-hidden="true">
			<div class="modal-dialog modal-fullscreen-sm-down">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="btn-close d-none d-md-inline-block" data-bs-dismiss="modal" aria-label="Close"></button>
						<button type="button" class="btn-close white d-md-none" data-bs-dismiss="modal" aria-label="Close"></button>
					</div>
					<div class="modal-body">
						<div class="row g-0">
							<div class="col-md-5">
								<div class="profile lazyload" data-bg="<?php echo htmlencode($member['image'][0]['urlPath']); ?>"></div>
							</div>
							<div class="col-10 col-sm-5 col-xl-4 offset-1 offset-md-1 d-md-flex align-items-center">
								<div class="py-5">
									<h3><?php echo htmlencode($member['full_name']); ?></h3>
									<p class="title"><?php echo htmlencode($member['position']); ?></p>
									<?php echo $member['bio']; ?>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<?php } ?>

		<div class="more-information">
			<div class="container">
				<div class="row ">
					<div class="col-md-5">
						<h2><?php echo htmlencode($pageContents['footer_title']) ?></h2>
						<p><?php echo htmlencode($pageContents['footer_intro']) ?></p>
						<?php if(!empty($pageContents['footer_cta_label']) && !empty($pageContents['footer_cta_url'])) { ?>
						<a class="btn white big" data-tf-slider="BaStTuBk" data-tf-width="550" data-tf-medium="snippet" href="#"><?php echo htmlencode($pageContents['footer_cta_label']); ?></a>
						<?php } ?>
					</div>
					<div class="col-md-6 offset-md-1">
						<div class="accordion" id="accordionFaqs">
							<?php foreach($services as $service) { ?>
							<div class="accordion-item">
								<h3 class="accordion-header" id="accordionItem<?php echo htmlentities($service['num']); ?>">
									<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#accordionCollapse<?php echo htmlentities($service['num']); ?>" aria-expanded="false" aria-controls="accordionCollapse<?php echo htmlentities($service['num']); ?>">
										<?php echo htmlentities($service['title']); ?>
									</button>
								</h3>
								<div id="accordionCollapse<?php echo htmlentities($service['num']); ?>" class="accordion-collapse collapse" aria-labelledby="accordionItem<?php echo htmlentities($service['num']); ?>" data-bs-parent="#accordionFaqs" style="">
									<div class="accordion-body">
										<?php echo $service['content']; ?>
									</div>
								</div>
							</div>
							<?php } ?>
						</div>
					</div>
				</div>
			</div>
		</div>

		<?php include_once('assets/inc/footer.php'); ?>
	</div>

	<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollTrigger.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/@gumlet/player.js@3.0/dist/main.global.js"></script>
	<script>

		$('.hero .hero-media').on('mousemove', function(e) {

			var parentOffset = $(this).parent().offset();
			var pageX = e.pageX - parentOffset.left;
			var pageY = e.pageY - parentOffset.top;

			$('.hero .hero-media .play-animate').css({
				left: pageX - 70,
				top: pageY - 45,
				display: 'flex'
			});

		}).on('mouseleave', function(e) {

			$('.hero .hero-media .play-animate').css({
				display: 'none'
			});

		});

		gsap.set(".cont-box .text", {opacity: 0, y: 25});
		ScrollTrigger.batch(".cont-box .text", {
			start: "top 75%",
		  onEnter: function(e) {
				gsap.to(e, {
					y: 0,
					opacity: 1,
					stagger: 0.15
				});
			}
		});

		<?php if(!empty($pageContents['header_background_vimeo_video'])) { ?>

		var player = new playerjs.Player(document.querySelector('#headerVideoModal iframe'));

		$("#headerVideoModal").on("show.bs.modal", function() {
			player.play();
		});

		$("#headerVideoModal").on("hide.bs.modal", function() {
			player.pause();
		});

		<?php } ?>

	</script>

</body>
</html>
