<?php
get_header();
?>

<?php
// Background image (per page)
$bg_image      = get_field( 'inner_section_bg' );
$section_style = $bg_image
    ? 'style="background-image:url(' . esc_url( $bg_image['url'] ) . '); background-size:cover; background-position:center;"'
    : '';
?>

<!--breadcrumb-->
<section class="inner_section" <?php echo $section_style; ?>>
    <div class="container">
        <div class="row">
            <div class="breadcrum-content">

                <h1>
                    <?php echo get_field( 'inner_section_title' ) ?: get_the_title(); ?>
                </h1>

                <p class="breadcrumb">
                    <a href="<?php echo home_url(); ?>">Home</a>

                    <span>
                        <svg xmlns="http://www.w3.org/2000/svg" width="6" height="10" viewBox="0 0 6 10" fill="none">
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M5.31915 4.28177C5.45434 4.417 5.53029 4.60039 5.53029 4.7916C5.53029 4.98282 5.45434 5.1662 5.31915 5.30143L1.2398 9.38078C1.17328 9.44965 1.09371 9.50459 1.00573 9.54238C0.917755 9.58018 0.82313 9.60007 0.727381 9.6009C0.631632 9.60173 0.536676 9.58349 0.448054 9.54723C0.359431 9.51097 0.278917 9.45742 0.21121 9.38972C0.143502 9.32201 0.0899571 9.2415 0.0536988 9.15287C0.0174405 9.06425 -0.000804807 8.96929 2.72272e-05 8.87355C0.000859262 8.7778 0.0207522 8.68317 0.0585451 8.59519C0.096338 8.50721 0.151274 8.42764 0.220148 8.36112L3.78967 4.7916L0.220148 1.22208C0.0887908 1.08608 0.0161065 0.903923 0.0177495 0.714849C0.0193925 0.525775 0.0952312 0.34491 0.228932 0.21121C0.362632 0.077509 0.543497 0.00167026 0.732571 2.72601e-05C0.921645 -0.00161574 1.1038 0.0710686 1.2398 0.202425L5.31915 4.28177Z" fill="white"/>
                        </svg>
                    </span>

                    <span class="normal">Services</span>

                    <span>
                        <svg xmlns="http://www.w3.org/2000/svg" width="6" height="10" viewBox="0 0 6 10" fill="none">
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M5.31915 4.28177C5.45434 4.417 5.53029 4.60039 5.53029 4.7916C5.53029 4.98282 5.45434 5.1662 5.31915 5.30143L1.2398 9.38078C1.17328 9.44965 1.09371 9.50459 1.00573 9.54238C0.917755 9.58018 0.82313 9.60007 0.727381 9.6009C0.631632 9.60173 0.536676 9.58349 0.448054 9.54723C0.359431 9.51097 0.278917 9.45742 0.21121 9.38972C0.143502 9.32201 0.0899571 9.2415 0.0536988 9.15287C0.0174405 9.06425 -0.000804807 8.96929 2.72272e-05 8.87355C0.000859262 8.7778 0.0207522 8.68317 0.0585451 8.59519C0.096338 8.50721 0.151274 8.42764 0.220148 8.36112L3.78967 4.7916L0.220148 1.22208C0.0887908 1.08608 0.0161065 0.903923 0.0177495 0.714849C0.0193925 0.525775 0.0952312 0.34491 0.228932 0.21121C0.362632 0.077509 0.543497 0.00167026 0.732571 2.72601e-05C0.921645 -0.00161574 1.1038 0.0710686 1.2398 0.202425L5.31915 4.28177Z" fill="white"/>
                        </svg>
                    </span>

                    <span>
                        <?php echo get_field( 'inner_section_title' ) ?: get_the_title(); ?>
                    </span>
                </p>

            </div>
        </div>
    </div>
</section>
<!--breadcrumb-->

<section class="service-hero">
    <div class="container">

        <div class="service-hero-container">

            <!-- Left Image -->
            <?php /* <div class="service-hero-image">
                <?php $hero_img = get_field( 'service_hero_image' ); ?>
                <?php if ( $hero_img ) : ?>
                    <img src="<?php echo esc_url( $hero_img ); ?>" alt="">
                <?php endif; ?>
            </div>
			*/ ?>

            <!-- Right Content -->
            <div class="service-hero-content">
                <h2><?php the_field( 'service_hero_title' ); ?></h2>

                <div class="service-hero-text">
                    <?php the_field( 'service_hero_content' ); ?>
                </div>
            </div>

        </div>

        <!-- Bottom Gallery Images -->
        <?php if ( have_rows( 'service_gallery' ) ) : ?>
            <div class="services_images_wrapper">
                <?php while ( have_rows( 'service_gallery' ) ) : the_row(); ?>
                    <?php $img = get_sub_field( 'gallery_image' ); ?>
                    <?php if ( $img ) : ?>
                        <img src="<?php echo esc_url( $img ); ?>" alt="">
                    <?php endif; ?>
                <?php endwhile; ?>
            </div>
        <?php endif; ?>

    </div>
</section>

<!-- services section-->
<section class="services-section">
    <div class="container">

        <?php if ( have_rows( 'services_blocks' ) ) : ?>
            <?php while ( have_rows( 'services_blocks' ) ) : the_row(); ?>

                <?php
                $reverse   = get_sub_field( 'reverse_layout' );
                $row_class = $reverse ? 'service-row reverse' : 'service-row';
                $image     = get_sub_field( 'service_image' );
                ?>

                <div class="<?php echo esc_attr( $row_class ); ?>">

                    <!-- Content -->
                    <div class="our-service-content">
                        <h4><?php the_sub_field( 'service_title' ); ?></h4>
                        <?php the_sub_field( 'service_description' ); ?>
                    </div>

                    <!-- Image -->
                    <div
                        class="service-image"
                        style="background-image: url('<?php echo esc_url( $image ); ?>');">
                    </div>

                </div>

            <?php endwhile; ?>
        <?php endif; ?>

    </div>
</section>
<!-- services section-->

<!--why choose section-->
<section class="why_choose_us">
    <div class="container">
        <div class="why_choose_wrapper">

            <!-- Left Side -->
            <div class="restoration_services">
                <div class="section-header">
                    <h2><?php the_field( 'why_choose_title' ); ?></h2>
                    <p><?php the_field( 'why_choose_description' ); ?></p>
                </div>

                <?php if ( have_rows( 'why_choose_items' ) ) : ?>
                    <div class="column">
                        <?php while ( have_rows( 'why_choose_items' ) ) : the_row(); ?>
                            <div class="item">
                                <?php $img = get_sub_field( 'item_image' ); ?>
                                <?php if ( $img ) : ?>
                                    <img src="<?php echo esc_url( $img ); ?>" alt="">
                                <?php endif; ?>

                                <div>
                                    <h3><span>✓</span> <?php the_sub_field( 'item_title' ); ?></h3>
                                    <p><?php the_sub_field( 'item_description' ); ?></p>
                                </div>
                            </div>
                        <?php endwhile; ?>
                    </div>
                <?php endif; ?>
            </div>

            <!-- Right Side -->
            <div class="expertise">
                <h2><?php the_field( 'expertise_title' ); ?></h2>
                <?php the_field( 'expertise_description' ); ?>
            </div>

        </div>
    </div>
</section>
<!--why choose section-->

<!--Faq Section-->
<section class="faq_section">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12">

                <div class="section-header faq_content">
                    <h2><?php the_field( 'faq_title' ); ?></h2>
                </div>

                <?php if ( have_rows( 'faq_items' ) ) : ?>
                    <div class="faq-container">

                        <?php
                        $count = 0;
                        while ( have_rows( 'faq_items' ) ) :
                            the_row();
                            $count++;
                            $active_class = ( $count === 1 ) ? 'active' : '';
                        ?>
                            <div class="faq-item <?php echo $active_class; ?>">
                                <div class="faq-question">
                                    <?php the_sub_field( 'faq_question' ); ?>
                                </div>
                                <div class="faq-answer">
                                    <?php the_sub_field( 'faq_answer' ); ?>
                                </div>
                            </div>
                        <?php endwhile; ?>

                    </div>
                <?php endif; ?>

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

<?php
get_footer();
?>