<section id="aboutus-section" class="aboutus-area home-aboutus">
    <?php
        $aboutus_image = get_theme_mod('aboutus_image'); 
        $aboutus_image2 = get_theme_mod('aboutus_image2'); 
        $aboutus_image3 = get_theme_mod('aboutus_image3'); 

    ?>
	<div class="<?php if(esc_attr(get_theme_mod('mini_golf_aboutus_section_width','Box Width')) == 'Full Width'){ ?>container-fluid pd-0 <?php } elseif(esc_attr(get_theme_mod('mini_golf_aboutus_section_width','Box Width')) == 'Box Width'){ ?> container <?php }?>">   
        
        <div class="row m-0 p-0">
            <div class="col-lg-6 col-md-12 col-sm-12 abtleft">
                <div class="aboutus-head">
                    <h4><?php echo esc_html(get_theme_mod('aboutus_head_subtitle')); ?> </h4>
                    <div class="clearfix"></div>
                    <h2><?php echo esc_html(get_theme_mod('aboutus_head_title')); ?> </h2>
                    <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/abt.png" />';
                                }
                            ?>
                        </div>	
                    </div>
                </div>
            </div>
            <div class="col-lg-6 col-md-12 col-sm-12 abtright">        
                <div class="row m-0 p-0">
                    <div class="abtimg2">              
                        <?php 
                            if(!empty($aboutus_image2)){
                                echo '<img alt="'. esc_html(get_the_title()) .'" src="'.esc_url($aboutus_image2).'"  />';
                            }else{
                                echo '<img src="'.get_template_directory_uri().'/assets/images/abt2.png" />';
                            }
                        ?>
                        <div class="imgtxt"><?php echo esc_html(get_theme_mod('aboutus_image2_heading')); ?> </div>
                    </div>	
                    <div class="abtimg3">              
                        <?php 
                            if(!empty($aboutus_image3)){
                                echo '<img alt="'. esc_html(get_the_title()) .'" src="'.esc_url($aboutus_image3).'"  />';
                            }else{
                                echo '<img src="'.get_template_directory_uri().'/assets/images/abt3.png" />';
                            }
                        ?>                     
                        <div class="imgtxt"><?php echo esc_html(get_theme_mod('aboutus_image3_heading')); ?> </div>
                    </div>       
                </div>
                <div class="contbx">
                    <p><?php echo esc_html(get_theme_mod('aboutus_head_description')); ?></p>
                    <div class="lists"> 
                        <div class="listsbx">                   
                            <div class="box">  
                                <h6> <?php echo esc_html(get_theme_mod('aboutus_list1number')); ?> </h6>                     
                                <P> <?php echo esc_html(get_theme_mod('aboutus_list1text')); ?> </P>
                            </div>

                            <div class="box">
                                <h6> <?php echo esc_html(get_theme_mod('aboutus_list2number')); ?> </h6>
                                <P> <?php echo esc_html(get_theme_mod('aboutus_list2text')); ?> </P>
                             </div>                   
                        </div>
                        <div class="listsbx">                     
                            <div class="box">
                               <h6> <?php echo esc_html(get_theme_mod('aboutus_list3number')); ?> </h6>
                               <P> <?php echo esc_html(get_theme_mod('aboutus_list3text')); ?> </P>
                            </div>

                           <div class="box">
                                <h6> <?php echo esc_html(get_theme_mod('aboutus_list4number')); ?> </h6>
                                <P><?php echo esc_html(get_theme_mod('aboutus_list4text')); ?></P>
                            </div>

                        </div>
                        <div class="clearfix"></div>               
                    </div>
                    <div class="video-content">
                        <?php        
                            $videoUrl = esc_url( get_theme_mod('bwp_premium_about_video_iframe', '#') );

                            if ( ! empty( $videoUrl ) ) {

                                $videoId = '';

                                // YouTube
                                if ( strpos( $videoUrl, 'youtube.com' ) !== false || strpos( $videoUrl, 'youtu.be' ) !== false ) {

                                    if ( strpos( $videoUrl, 'youtu.be' ) !== false ) {
                                        $videoId = sanitize_text_field( basename( parse_url( $videoUrl, PHP_URL_PATH ) ) );
                                    } else {
                                        parse_str( parse_url( $videoUrl, PHP_URL_QUERY ), $queryParams );
                                        $videoId = isset( $queryParams['v'] ) ? sanitize_text_field( $queryParams['v'] ) : '';
                                    }

                                    if ( ! empty( $videoId ) ) {
                                        $videoUrl = esc_url( "https://www.youtube.com/embed/$videoId?autoplay=1&mute=0&rel=0" );
                                    }
                                }

                                // Vimeo
                                elseif ( strpos( $videoUrl, 'vimeo.com' ) !== false ) {

                                    $videoId = sanitize_text_field( basename( parse_url( $videoUrl, PHP_URL_PATH ) ) );

                                    if ( ! empty( $videoId ) ) {
                                        $videoUrl = esc_url( "https://player.vimeo.com/video/$videoId?autoplay=1&muted=0" );
                                    }
                                }
                            }
                        ?>
                        <div class="bttn">     
                            <a id="video-pop" class="video">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-play w-5 h-5 fill-[#1B4332] text-[#1B4332] transition-colors duration-300 group-hover:fill-[#FAFAF8] group-hover:text-[#FAFAF8]"><polygon points="6 3 20 12 6 21 6 3"></polygon></svg> <span><?php echo esc_html(get_theme_mod('aboutus_btntext')); ?></span>
                                <div class="vb-brd1"></div>
                            </a>
                            <!-- VIDEO POPUP -->
                            <div id="popup" class="popup">
                                <div class="popup-content">
                                    <button id="closePopup" aria-label="Close video">&times;</button>
                                    <?php if(!empty($videoUrl)){ ?>
                                        <iframe id="videoIframe" data-src="<?php echo esc_url($videoUrl); ?>" allow="autoplay; fullscreen"></iframe>
                                    <?php } else { ?>
                                        <p><?php esc_html_e( 'No video available.', 'mini-golf' ); ?> </p>
                                    <?php } ?>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
