<section id="aboutus-section" class="aboutus-area home-aboutus">

    <?php
        $aboutus_image = get_theme_mod('aboutus_image'); 
        $iframe = get_theme_mod('luzuk_abtsec_vb_embade', 'Add your video embed code in customizer');
    ?>
	<div class="<?php if(esc_attr(get_theme_mod('pet_care_veterinary_center_aboutus_section_width','Box Width')) == 'Full Width'){ ?>container-fluid pd-0 <?php } elseif(esc_attr(get_theme_mod('pet_care_veterinary_center_aboutus_section_width','Box Width')) == 'Box Width'){ ?> container <?php }?>">
        
        <div class="row m-0">  
            <div class="imgbx">
                <div class="abtimg">              
                    <?php 
                        if(!empty($aboutus_image)){
                            echo '<img alt="'. esc_html(get_the_title()) .'" src="'.esc_url($aboutus_image).'"  />';
                        }else{
                            echo '<img src="'.get_template_directory_uri().'/assets/images/about.jpg" />';
                        }
                    ?>
                    <div class="abt-dscbx">
                        <div class="num"><?php echo esc_html(get_theme_mod('aboutus_yearofexperience_number')); ?></div>
                         <div class="numtxt"><?php esc_html_e( 'Years of Excellence', 'pet-care-veterinary-center' ); ?></div>
                    </div>
                </div>	
    		</div>

            <div class="abtdetail">
                <div class="detailbxinn">
                    <div class="abt-subtitle">
                        <h4><?php echo esc_html(get_theme_mod('aboutus_subtitle')); ?> </h4>
                    </div>
                    <div class="abt-dbx">
                        <h2><?php echo esc_html(get_theme_mod('aboutus_title')); ?></h2>
                    </div>
                    <div class="abt-box">
                        <?php echo esc_html(get_theme_mod('aboutus_description')); ?>    
                        <p><?php echo esc_html(get_theme_mod('aboutus_description2')); ?> </p> 
                    </div>
                    
                    <div class="listsbx">
                        <div class="row">
                            <div class="libx">
                                <div class="row">
                                    <div class="icnbx">
                                        <i class="fa-regular fa-heart"></i>
                                    </div>
                                    <div class="conbx">
                                        <h5><?php echo esc_html(get_theme_mod('aboutus_list1')); ?></h5>
                                        <p><?php echo esc_html(get_theme_mod('aboutus_list1text')); ?></p>
                                    </div>

                                </div>
                            </div>
                            <div class="libx">
                                <div class="row">
                                    <div class="icnbx">
                                        <i class="fa-regular fa-heart"></i>
                                    </div>
                                    <div class="conbx">
                                        <h5><?php echo esc_html(get_theme_mod('aboutus_list2')); ?></h5>
                                        <p><?php echo esc_html(get_theme_mod('aboutus_list2text')); ?></p>
                                    </div>

                                </div>
                            </div>
                            <div class="libx">
                                <div class="row">
                                    <div class="icnbx">
                                        <i class="fa-regular fa-heart"></i>
                                    </div>
                                    <div class="conbx">
                                        <h5><?php echo esc_html(get_theme_mod('aboutus_list3')); ?></h5>
                                        <p><?php echo esc_html(get_theme_mod('aboutus_list3text')); ?></p>
                                    </div>

                                </div>
                            </div>
                            <div class="libx">
                                <div class="row">
                                    <div class="icnbx">
                                        <i class="fa-regular fa-heart"></i>
                                    </div>
                                    <div class="conbx">
                                        <h5><?php echo esc_html(get_theme_mod('aboutus_list4')); ?></h5>
                                        <p><?php echo esc_html(get_theme_mod('aboutus_list4text')); ?></p>
                                    </div>

                                </div>
                            </div>
                            
                        </div>                    
                    </div>
                    <div class="clearfix"></div>
                    <div class="abtbtn">
                    <a  href="<?php echo esc_url(get_theme_mod('aboutus_btn_link')); ?>">
                        <?php echo esc_html(get_theme_mod('aboutus_btn_text')); ?> 
                    </a>
                </div>
                </div>
            </div>
            
            <div class="clearfix"></div>
        </div>
    </div>
    <script type="text/javascript">
    document.getElementById("video-pop").addEventListener("click", function() {
        const popup = document.getElementById("popup");
        const popupContent = popup.querySelector(".popup-content");

        popup.classList.add("show");
        popupContent.classList.add("show");
    });

    document.getElementById("closePopup").addEventListener("click", function() {
        const popup = document.getElementById("popup");
        const popupContent = popup.querySelector(".popup-content");
        const videoIframe = popupContent.querySelector("iframe"); // Select the iframe inside the popup

        popupContent.classList.remove("show");
        popup.classList.remove("show");

        // Stop the video by resetting the src attribute
        videoIframe.src = videoIframe.src;
    });

</script>
</section>
