<?php
/* Template Name: About Us */

get_header();
?>

<?php get_template_part('template-parts/inner-section'); ?>

<!-- About Us Section -->
<section class="about-section">
    <div class="container">
        <div class="about_flex">

            <!-- LEFT -->
            <div class="left_section">
                <div class="about-content about-list">

                    <div class="section-header">
                        <?php if ( get_field('about_small_title') ) : ?>
                            <h5><?php echo esc_html( get_field('about_small_title') ); ?></h5>
                        <?php endif; ?>

                        <?php if ( get_field('about_main_title') ) : ?>
                            <h2><?php the_field('about_main_title'); ?></h2>
                        <?php endif; ?>
                    </div>

                    <?php if ( get_field('about_content') ) : ?>
                        <?php the_field('about_content'); ?>
                    <?php endif; ?>

                    <?php
                    $about_button = get_field('about_button');
                    if ( $about_button ) :
                    ?>
                        <div class="custom-btn">
                            <a
                                href="<?php echo esc_url( $about_button['url'] ); ?>"
                                target="<?php echo esc_attr( $about_button['target'] ?: '_self' ); ?>"
                            >
                                <?php echo esc_html( $about_button['title'] ); ?>
                            </a>
                        </div>
                    <?php endif; ?>

                </div>
            </div>

            <!-- RIGHT -->
            <div class="right_section">
                <div class="about-images">

                    <?php
                    $about_image = get_field('about_main_image');
                    if ( $about_image ) :
                    ?>
                        <div class="main-image">
                            <img src="<?php echo esc_url( $about_image['url'] ); ?>" alt="<?php echo esc_attr( $about_image['alt'] ); ?>">
                        </div>
                    <?php endif; ?>

                    <?php if ( get_field('about_badge_text') ) : ?>
                        <div class="about-badge">
                            <span><?php echo esc_html( get_field('about_badge_text') ); ?></span>
                        </div>
                    <?php endif; ?>

                </div>
            </div>

        </div>
    </div>
</section>
<!-- /About Us Section -->


<!-- Our Services Section -->
<section class="services">
    <div class="container">

        <div class="section-header">
            <h2><?php echo esc_html( get_field('services_section_title') ); ?></h2>

            <?php if ( get_field('services_section_text') ) : ?>
                <p><?php echo esc_html( get_field('services_section_text') ); ?></p>
            <?php endif; ?>
        </div>

        <div class="services-grid">

            <?php
            $services_query = new WP_Query(
                [
                    'post_type'      => 'services',
                    'posts_per_page' => 4,
                    'post_status'    => 'publish',
                    'orderby'        => 'menu_order',
                    'order'          => 'ASC',
                ]
            );

            if ( $services_query->have_posts() ) :
                while ( $services_query->have_posts() ) :
                    $services_query->the_post();
            ?>

                    <div class="service-inner">

                        <?php if ( has_post_thumbnail() ) : ?>
                            <img
                                src="<?php echo esc_url( get_the_post_thumbnail_url( get_the_ID(), 'large' ) ); ?>"
                                class="services_inner_image"
                                alt="<?php the_title_attribute(); ?>"
                            >
                        <?php endif; ?>

                        <div class="card-content">
                            <h3><?php the_title(); ?></h3>

                            <a href="<?php the_permalink(); ?>" class="btn">
                                Read More
                                <span>
                                    <img src="<?php bloginfo('template_url'); ?>/assets/img/read_more_icon.webp" alt="">
                                </span>
                            </a>
                        </div>

                    </div>

            <?php
                endwhile;
                wp_reset_postdata();
            endif;
            ?>

        </div>

    </div>
</section>
<!-- /Our Services Section -->


<!-- Core Principles -->
<section class="principles">
    <div class="principles-wrapper">

        <!-- Left Image -->
        <?php $bg_image = get_field('principles_bg_image'); ?>
        <?php if ( $bg_image ) : ?>
            <div
                class="principles-image"
                style="background-image: url('<?php echo esc_url( $bg_image['url'] ); ?>');"
            ></div>
        <?php endif; ?>

        <!-- Right Content -->
        <div class="principles-content">

            <div class="section-header">
                <?php if ( get_field('principles_small_heading') ) : ?>
                    <h5><?php the_field('principles_small_heading'); ?></h5>
                <?php endif; ?>

                <?php if ( get_field('principles_main_heading') ) : ?>
                    <h2><?php the_field('principles_main_heading'); ?></h2>
                <?php endif; ?>
            </div>

            <?php if ( have_rows('principles_list') ) : ?>
                <ul class="principles-list">

                    <?php
                    while ( have_rows('principles_list') ) :
                        the_row();
                        $icon = get_sub_field('icon');
                    ?>
                        <li>
                            <?php if ( $icon ) : ?>
                                <img
                                    src="<?php echo esc_url( $icon['url'] ); ?>"
                                    alt="<?php echo esc_attr( $icon['alt'] ); ?>"
                                >
                            <?php endif; ?>

                            <div>
                                <h4><?php the_sub_field('title'); ?></h4>
                                <p><?php the_sub_field('description'); ?></p>
                            </div>
                        </li>
                    <?php endwhile; ?>

                </ul>
            <?php endif; ?>

            <?php
            $button = get_field('principles_button');
            if ( $button ) :
                $btn_url    = $button['url'];
                $btn_title  = $button['title'];
                $btn_target = $button['target'] ?: '_self';
            ?>
                <div class="custom-btn">
                    <a
                        href="<?php echo esc_url( $btn_url ); ?>"
                        target="<?php echo esc_attr( $btn_target ); ?>"
                        class="btn"
                    >
                        <?php echo esc_html( $btn_title ); ?>
                    </a>
                </div>
            <?php endif; ?>

        </div>
    </div>
</section>
<!-- /Core Principles -->


<!-- Overview Section -->
<section class="overview">
    <div class="container">

        <div class="overview-section">

            <!-- Left Content -->
            <div class="overview-left">
                <div class="section-header">
                    <h5><?php the_field('overview_left_small_heading'); ?></h5>
                    <h2><?php the_field('overview_left_main_heading'); ?></h2>
                </div>

                <?php if ( have_rows('overview_left_items') ) : ?>
                    <?php while ( have_rows('overview_left_items') ) : the_row(); ?>
                        <div class="overview_content">
                            <h4><?php the_sub_field('left_title'); ?></h4>
                            <p><?php the_sub_field('left_description'); ?></p>
                        </div>
                    <?php endwhile; ?>
                <?php endif; ?>
            </div>

            <!-- Center Image -->
            <div class="overview-image">
                <?php $img = get_field('overview_image'); ?>
                <?php if ( $img ) : ?>
                    <img src="<?php echo esc_url( $img['url'] ); ?>" alt="<?php echo esc_attr( $img['alt'] ); ?>">
                <?php endif; ?>
            </div>

            <!-- Right Content -->
            <div class="overview-right">
                <div class="section-header">
                    <h5><?php the_field('overview_right_small_heading'); ?></h5>
                    <h2><?php the_field('overview_right_main_heading'); ?></h2>
                </div>

                <?php if ( get_field('right_content') ) : ?>
                    <?php the_field('right_content'); ?>
                <?php endif; ?>

                <?php
                $button = get_field('overview_button');
                if ( $button ) :
                    $btn_url    = $button['url'];
                    $btn_title  = $button['title'];
                    $btn_target = $button['target'] ?: '_self';
                ?>
                    <div class="custom-btn">
                        <a
                            href="<?php echo esc_url( $btn_url ); ?>"
                            target="<?php echo esc_attr( $btn_target ); ?>"
                            class="btn"
                        >
                            <?php echo esc_html( $btn_title ); ?>
                        </a>
                    </div>
                <?php endif; ?>
            </div>

        </div>

    </div>
</section>
<!-- Overview Section -->

<?php get_footer(); ?>