<?php
if(get_theme_mod('luzuk_about_area_disable') != 'on' ){
	?>

	<div class="about-area " id="about">  
		<div class="container">
			<div class="row">
				<?php	
				  $iframe = get_theme_mod('luzuk_abt_vb_embade', 'Add your video embed code in customizer');
				  $abt_vtitle = get_theme_mod('abt_vtitle', 'Lorem Ipsum Are Many');
				?>
				<div class="abtimgbx">
					<div class="aboutarea-img">
						<?php if( get_theme_mod('abtvideo_display','show' ) == 'show') : ?>
						<div class="video-content" >	
							<div class="newvbox">
								<a class="video"  href="#vdpop">
                                    <div class="video-img">
                                        <?php 
											$vbabt_image = get_theme_mod('vbabt_image');
											if(!empty($vbabt_image)){
												echo '<img alt="'. esc_html(get_the_title()) .'" src="'.esc_url($vbabt_image).'" class="img-responsive secondry-bg-img" />';
											}else{
												echo '<img alt="About us" src="'.get_template_directory_uri().'/images/abtvimg.jpg" class="img-responsive" />';
											}
										?> 
										<!-- <div class="v-oly"></div> -->
                                        <div class="video-icon">
                                            <!-- <i class="fa fa-play" aria-hidden="true"></i> -->
                                            <svg fill="#000000" height="200px" width="200px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 60 60" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <path d="M45.563,29.174l-22-15c-0.307-0.208-0.703-0.231-1.031-0.058C22.205,14.289,22,14.629,22,15v30 c0,0.371,0.205,0.711,0.533,0.884C22.679,45.962,22.84,46,23,46c0.197,0,0.394-0.059,0.563-0.174l22-15 C45.836,30.64,46,30.331,46,30S45.836,29.36,45.563,29.174z M24,43.107V16.893L43.225,30L24,43.107z"></path> <path d="M30,0C13.458,0,0,13.458,0,30s13.458,30,30,30s30-13.458,30-30S46.542,0,30,0z M30,58C14.561,58,2,45.439,2,30 S14.561,2,30,2s28,12.561,28,28S45.439,58,30,58z"></path> </g> </g></svg>
                                            
                                        </div>
                                        <h3><?php echo ($abt_vtitle); ?></h3> 
                                        <div class="clearfix"></div>
                                    </div>
                                </a>
							</div>
							<div id="vdpop" class="video-overlay">
								<div class="popup">
									<button class="close">&times;</button> 
									<div class="content">
										<?php echo $iframe; ?>
									</div>
								</div>
							</div>
						</div>
						<?php endif ?> 
						<?php 
							$about_image = get_theme_mod('about_image');
							if(!empty($about_image)){
								echo '<img alt="'. esc_html(get_the_title()) .'" src="'.esc_url($about_image).'" class="img-responsive secondry-bg-img" />';
							}else{
								echo '<img alt="About us" src="'.get_template_directory_uri().'/images/abt1.png" class="img-responsive" />';
							}

						?>					
						<div class="btmimg">
							<div class="row mr-0">
								<div class="flow-img">
									<?php 
										$about_flowimg = get_theme_mod('about_flowimg');
										if(!empty($about_flowimg)){
											echo '<img alt="'. esc_html(get_the_title()) .'" src="'.esc_url($about_flowimg).'" class="img-responsive secondry-bg-img" />';
										}else{
											echo '<img alt="celebration" src="'.get_template_directory_uri().'/images/abt3.png" class="img-responsive" />';
										}
									?>
								</div>
								<div class="dig-img">
									<?php 
										$about_digimg = get_theme_mod('about_digimg');
										if(!empty($about_digimg)){
											echo '<img alt="'. esc_html(get_the_title()) .'" src="'.esc_url($about_digimg).'" class="img-responsive secondry-bg-img" />';
										}else{
											echo '<img alt="celebration" src="'.get_template_directory_uri().'/images/abt2.png" class="img-responsive" />';
										}
									?>
								</div>
							</div>				
						</div>
					</div>
				</div>
				<?php
					$about_page_id = get_theme_mod('about_page');
					$aboutsubtitle = get_theme_mod('aboutsubtitle', 'Know About US');
					$abouttitle = get_theme_mod('about_title', 'Lorem Ipsum Are Many Variations Available Bat Believable.');
					$abouttext = get_theme_mod('about_text', "There are many variations of passages of Lorem Ipsum available but the majority have suffered alteration in some form, words which don't look believable.");
					$abt_name = get_theme_mod('abt_name', 'David Anderson');
					$abt_ntxt = get_theme_mod('abt_ntxt', "Lorem Ipsum is simply");
				?>
				<div class=" contentbx" data-wow-duration="1s">					
					<div class="section-title">
						<h5><?php echo ($aboutsubtitle); ?></h5>
						<h2><?php echo ($abouttitle); ?></h2>
						<p><?php echo ($abouttext); ?></p>
					</div>			
					<?php
						$showStatic = true;
						for( $i = 1; $i < 11; $i++ ){
							$aboutus_page_id = get_theme_mod('aboutus_page_icon'.$i); 
							$url = get_theme_mod('aboutus_page_url_'.$i, '#');
							$link = get_theme_mod('aboutus_page_link'.$i);
							if(!empty($aboutus_page_id)){
								$showStatic = false;
								break;
							}
						}
					?>
					<div class="aboutus-post-wrap">
						<?php
						$cols = get_theme_mod('aboutus_npp_count', 1);
						$cols++;
						// echo '$cold: '.$cols;
						switch($cols){
							case 1:
							$colCls = 'col-md-6 col-sm-6 col-xs-12';
							break;
							case 2:
							case 4:
							case 8:
							case 7:
							case 10:
							case 11:
							case 12:
							$colCls = 'col-md-6 col-sm-6 col-xs-12';
							break;
							default: 
							$colCls = 'col-md-6 col-sm-6 col-xs-12';
							break;
						}
						$icons = array(1=>'heart', 2=>'star', 3=>'flash', 4=>'bell',5=>'heart', 6=>'star', 7=>'flash', 8=>'bell');
						?>
						<div class="row aboutus-post-boxes">
						<?php
						for( $i = 1; $i <= $cols; $i++ ){
								if($showStatic === false){
									
						$aboutus_page_title = get_theme_mod('aboutus_page_title'.$i, 'Unsurpassed atmosphere');
						$aboutus_page_text = get_theme_mod('aboutus_page_text'.$i, 'Lorem Ipsum are many variations available bat believable.');
						$aboutus_page_id = get_theme_mod('aboutus_page'.$i); 
						$url = get_theme_mod('aboutus_page_url_'.$i, '#');
						$aboutus_page_icon = get_theme_mod('aboutus_page_icon'.$i);
						if($aboutus_page_icon){
								
						?>
							<div class="<?php echo $colCls;?>">
								<div class="aboutus-single">
									<div class="row">
										<div class="hi-icon">
											<a href="<?php echo esc_url(!empty($url)?$url:'#');?>"><span class="<?php echo $aboutus_page_icon; ?>"></span></a>
										</div>
										<div class="about-area-data">
											<a href="<?php echo esc_url(!empty($url)?$url:'#');?>"><h4><?php echo $aboutus_page_title; ?></h4></a>
											<p><?php echo $aboutus_page_text; ?></p>
										</div>
									</div>
								</div>
								<div class="clearfix"></div>
							</div>
							<?php
									
							}
						}else{?>
							<div class="<?php echo $colCls;?>">
								<div class="aboutus-single">
									<div class="row">
										<div class="hi-icon">
											<a href="#"><span class="fa fa-gift"></span></a>
										</div>
										<div class="about-area-data">
											<a href="#"><h4>Unsurpassed atmosphere</h4></a>
											<p>Lorem Ipsum are many variations available bat believable.</p>
										</div>
									</div>						
								</div>
								<div class="clearfix"></div>
							</div>
						<?php }
							}?>
							
							<div class="clearfix"></div>
						</div>
					</div>
					<div class="detaibx">
						<div class="row">
							<div class="signbx">
								<?php 
									$abt_signimg = get_theme_mod('abt_signimg');
									if(!empty($abt_signimg)){
										echo '<img alt="'. esc_html(get_the_title()) .'" src="'.esc_url($abt_signimg).'" class="img-responsive secondry-bg-img" />';
									}else{
										echo '<img alt="celebration" src="'.get_template_directory_uri().'/images/abt4.png" class="img-responsive" />';
									}

								?>
							</div>
							<div class="infobx">
								<h6> <?php echo $abt_name; ?> </h6>
								<p> <?php echo $abt_ntxt; ?> </p>
							</div>
						</div>
					</div>
				</div>
				<div class="clearfix"></div>
			</div>
		</div>
		<div class="clearfix"></div> 
	</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
    const closeBtn = document.querySelector(".video-overlay .close");
    const iframeContainer = document.querySelector(".video-overlay .content");
    const iframe = iframeContainer.querySelector("iframe");

    closeBtn.addEventListener("click", function(e) {
        e.preventDefault(); // Prevent jump to top
        // Hide overlay
        window.location.hash = ""; // Remove the target anchor
        // Pause video by resetting src
        if (iframe) {
            const src = iframe.getAttribute("src");
            iframe.setAttribute("src", src);
        }
    });
});
</script>
<script>
document.addEventListener("DOMContentLoaded", function () {
    const popup = document.querySelector(".video-overlay");
    const openBtn = document.querySelector(".video");
    const closeBtn = document.querySelector(".video-overlay .close");
    const iframe = popup.querySelector("iframe");

    // Open video
    openBtn.addEventListener("click", function (e) {
        e.preventDefault();
        popup.style.visibility = "visible";
        popup.style.opacity = "1";
        iframe.style.display = "block"; // Show iframe
    });

    // Close video
    closeBtn.addEventListener("click", function (e) {
        e.preventDefault();
        popup.style.visibility = "hidden";
        popup.style.opacity = "0";
        iframe.style.display = "none"; // Hide iframe to pause video
    });
});

</script>
<?php }  