<section id="ourcourses-section" class="ourcourses-area home-ourcourses">
    <div class="container"> 
        <div class="serbx">
            <div class="heading">   
                <div class="subheading">
                    <div class="line left"></div>
                      <span><?php echo esc_html(get_theme_mod('ourcourses_subtitle', 'Signature Courses')); ?></span>
                    <div class="line right"></div>
                </div>
                <h2>
                  <?php echo esc_html(get_theme_mod('ourcourses_title', 'Three World-Class')); ?><br>
                  <span><?php echo esc_html(get_theme_mod('ourcourses_description', 'Championship Experiences')); ?></span>
                </h2>
            </div>                    
            <div class="ourtbx"> 
                <div class="row sbx">
                    <?php for($p=1; $p<7; $p++) { ?>
                        <?php if( get_theme_mod('ourcourses'.$p,false)) { ?>
                        <?php $querycolumns = new WP_query('page_id='.get_theme_mod('ourcourses'.$p,true)); ?>
                        <?php while( $querycolumns->have_posts() ) : $querycolumns->the_post(); 
                        $image = wp_get_attachment_image_src(get_post_thumbnail_id() , true); ?>
                        <?php 
                        if(has_post_thumbnail()){
                            $img = esc_url($image[0]);
                        }
                        if(empty($image)){
                            $img = get_template_directory_uri().'/assets/images/default.png';
                        }

                        $partext = get_theme_mod('ourcourses_partext_courses'.$p); 
                        $lengthtext = get_theme_mod('ourcourses_lengthtext_courses'.$p); 
                        $designertext = get_theme_mod('ourcourses_designertext_courses'.$p); 


                    ?>

                    <div class="course-row <?php echo ($p % 2 == 0) ? 'reverse' : ''; ?>">
                        <div class="tpbrd"></div>
                        <!-- IMAGE -->
                        <div class="course-image">
                            <a href="<?php echo esc_url( get_permalink() ); ?>">
                                <img src="<?php echo esc_url($img); ?>" alt="<?php the_title_attribute(); ?>">
                                <span class="course-number "><?php esc_html_e( '0', 'mini-golf' ); ?> <?php echo $p; ?></span>
                            </a>
                        </div>

                        <!-- CONTENT -->
                        <div class="course-content">
                            <h3><?php the_title(); ?></h3>
                            <div class="course-meta">
                                <span><strong><?php esc_html_e( 'PAR', 'mini-golf' ); ?></strong><?php echo esc_html($partext); ?></span>
                                <span><strong><?php esc_html_e( 'LENGTH', 'mini-golf' ); ?></strong> <?php echo esc_html($lengthtext); ?></span>
                                <span><strong><?php esc_html_e( 'DESIGNER', 'mini-golf' ); ?></strong> <?php echo esc_html($designertext); ?></span>
                            </div>

                            <p><?php echo get_the_excerpt(); ?></p>
                            <div class="buttn">
                                <a href="<?php echo esc_url( get_permalink() ); ?>" >
                                    <?php esc_html_e( 'Explore Course', 'mini-golf' ); ?>  <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-arrow-right w-4 h-4 text-[#D4AF37] transition-colors duration-300 group-hover:text-[#1B4332]"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
                                </a>
                            </div>
                        </div>

                    </div>


                    <?php endwhile;
                wp_reset_postdata(); ?>
                <?php } } ?>
                <div class="clear"></div> 
                </div>
            </div>
        </div>
	</div>
</section>
