<?php 
/*
Template Name: Portfolio GMI Trading
*/

get_header('new');
?>

<section class="section banner oaks-banner">
    <div class="container">
        <div class="row">
            <div class="col-lg-6">
                <div class="text-cont">
                    <h1 class="banner-heading">
                        <?php echo get_field('banner_title'); ?>
                    </h1>
                    <?php echo get_field('banner_description'); ?>
                    <div class="banner-btns">
                        <a href="<?php echo get_field('banner_left_button_link'); ?>" class="animated-cta-btn primary"><?php echo get_field('banner_left_button_text'); ?></a>
                        <a href="<?php echo get_field('banner_right_button_link_'); ?>" class="animated-cta-btn accent-btn"><?php echo get_field('banner_right_button_text'); ?></a>
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="img-cont d-block text-center text-lg-end">
					<?php
	$desktop_img_url = get_field('columns_right_image');
	$mobile_img_url  = get_field('columns_right_image_mobile');
?>
    <picture>
        <source class="no-lazy" media="(max-width: 767px)" srcset="<?php echo $mobile_img_url ? $mobile_img_url : $desktop_img_url ?>">
        <img src="<?php echo $desktop_img_url;?>" loading="eager" fetchpriority="high" decoding="async" width="530" height="556" class="img-fluid no-lazy"  alt="<?php echo strip_tags( get_field('banner_title') ); ?>">
    </picture>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="section industry-experience gmi-industry-experience">
    <div class="container">
        <div class="row">
            <?php
                $cards     = get_field('counter_cards');
                $direction = ['right', 'up', 'left'];
            ?>
            <?php if (is_array($cards) && count($cards)) : ?>
                <?php for ($i=0; $i < count($cards); $i++) : ?>
                    <div class="col-md-4">
                        <div class="card ml-0 slide-<?php echo $direction[$i]; ?>">
                            <div class="img-cont">
                                <img src="<?php echo $cards[$i]['image']; ?>" alt="<?php echo $cards[$i]['of']; ?>" class="img-fluid" width="70" height="70">
                            </div>
                            <div class="text-cont">
                                <p class="h3"><?php echo $cards[$i]['number']; ?></h3>
                                <p><?php echo $cards[$i]['of']; ?></p>
                            </div>
                        </div>
                    </div>
                <?php endfor; ?>
            <?php endif; ?>
        </div>
    </div>
</section>

<?php $rows = get_field('two_columns'); ?>
<section class="section company-profile" style="background-image: url('<?php echo esc_url($rows[0]['bg_image']); ?>');">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6">
                <div class="text-cont slide-right">
                    <?php echo $rows[0]['text']; ?>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="img-cont slide-left">
                    <img src="<?php echo $rows[0]['image']; ?>" alt="Company Profile" class="img-fluid" width="636" height="482" loading="lazy" decoding="async">
                </div>
            </div>
        </div>
    </div>
</section>


<section class="section the-challenge" style="background-image: url('<?php echo esc_url($rows[1]['bg_image']); ?>');">
    <div class="container">
      <div class="row align-items-lg-center">
          <div class="col-lg-6">
              <div class="img-cont slide-right">
                    <img src="<?php echo $rows[1]['image']; ?>" alt="<?php echo strip_tags( $rows[1]['heading'] ); ?>" class="img-fluid" width="482" height="483" loading="lazy" decoding="async">
              </div>
          </div>
          <div class="col-lg-6">
              <div class="text-cont slide-left">
                  <h2 class="section-title"><?php echo $rows[1]['heading']; ?></h2>
                  <p class="section-content">
                  <?php echo $rows[1]['text']; ?>
                  </p>
              </div>
          </div>
      </div>
    </div>
</section>

<section class="section the-solution" style="background-image: url('<?php echo esc_url($rows[2]['bg_image']); ?>');">
    <div class="container">
       <div class="row">
           <div class="col-lg-6">
               <div class="text-cont slide-right">
                   <h2 class="section-title"><?php echo $rows[2]['heading']; ?></h2>
                   <p class="section-content">
                   <?php echo $rows[2]['text']; ?>
                   </p>
               </div>
           </div>
           <div class="col-lg-6">
               <div class="img-cont slide-left">
                    <img src="<?php echo $rows[2]['image']; ?>" alt="<?php echo strip_tags( $rows[2]['heading'] ); ?>" class="img-fluid"  width="554" height="466" loading="lazy" decoding="async">
               </div>
           </div>
       </div>
    </div>
</section>

<section class="section the-result bg-primary">
    <div class="container">
        <div class="text-cont slide-down">
            <h2 class="section-title"><?php echo get_field('counter_cards_2_heading'); ?></h2>
        </div>
        <div class="row">
            <?php
                $cards     = get_field('counter_cards_2');
                $direction = ['right', 'right', 'left', 'left'];
            ?>
            <?php if (is_array($cards) && count($cards)) : ?>
                <?php for ($i=0; $i < count($cards); $i++) : ?>
                    <div class="col-lg-3 col-md-6 col-sm-6">
                        <div class="card slide-<?php echo $direction[$i]; ?>">
                            <h3><?php echo $cards[$i]['number']; ?> </h3>
                            <p><?php echo $cards[$i]['of']; ?></p>
                        </div>
                    </div>
                <?php endfor; ?>
            <?php endif; ?>
        </div>
    </div>
</section>

<section class="section client-testimonial-section pb-5 bg-white">
    <div class="container">
        <div class="row g-3 align-items-stretch">

            <div class="col-lg-6 col-md-12">
                <?php if(get_field('review_video_url')):?>
				<div class="testimonial-video-card">
					<iframe
						id="testimonialIframe"
						class="testimonial-iframe"
						width="560"
						height="315"
						src="about:blank"
						data-video-src="<?php echo esc_url(get_field('review_video_url')); ?>"
						title="Testimonail Video"
						frameborder="0"
						loading="lazy"
						allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
						referrerpolicy="strict-origin-when-cross-origin"
						allowfullscreen
					></iframe>

					<?php if (get_field('review_video_poster')) : ?>
						<img
							class="video-poster"
							src="<?php echo esc_url(get_field('review_video_poster')); ?>"
							alt="Video poster"
							loading="lazy"
							fetchpriority="low"
							decoding="async"
						/>
					<?php endif; ?>

					<div class="video-overlay"></div>
					<button class="play-btn" id="playVideoBtn" type="button" aria-label="Play video">
						<span></span>
					</button>
				</div>
			<?php endif?>
            </div>

            <div class="col-lg-6 col-md-12">
                <div class="testimonial-content-card">
                    <div class="quote-icon">
                        <svg width="80" height="70" viewBox="0 0 80 70" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M34.4448 3.08579V15.6546C34.4448 17.3593 32.9772 18.7404 31.1667 18.7404C24.7071 18.7404 21.1934 24.9783 20.7064 37.2897L31.1667 37.2897C32.9772 37.2897 34.4448 38.6722 34.4448 40.3761V66.9146C34.4448 68.6184 32.9772 69.9998 31.1667 69.9998H3.27743C1.46626 69.9998 0 68.6173 0 66.9146L0 40.3761C0 34.4743 0.631148 29.0583 1.87534 24.277C3.15139 19.3744 5.11015 15.0878 7.69547 11.5359C10.3557 7.88569 13.6834 5.02129 17.5867 3.0258C21.5163 1.01824 26.0861 0 31.1678 0C32.9772 0 34.4448 1.38117 34.4448 3.08579ZM76.7216 18.7406C78.5312 18.7406 80 17.3582 80 15.6549V3.086C80 1.38139 78.5314 0.000215656 76.7216 0.000215656C71.642 0.000215656 67.0715 1.01867 63.1432 3.02602C59.2392 5.0215 55.9098 7.8859 53.2491 11.5362C50.6647 15.088 48.7059 19.3748 47.4296 24.2785C46.1861 29.0614 45.555 34.4773 45.555 40.3763V66.9149C45.555 68.6186 47.0231 70 48.8331 70L76.7214 70C78.531 70 79.9984 68.6175 79.9984 66.9149L79.9984 40.3761C79.9984 38.6724 78.5312 37.2897 76.7214 37.2897H66.4104C66.89 24.9785 70.3524 18.7406 76.7216 18.7406Z" fill="#606060"></path>
                        </svg>
                    </div>

                    <?php if (get_field('review_quote')) : ?>
                        <p class="testimonial-text">
                            <?php echo get_field('review_quote'); ?>
                        </p>
                    <?php endif; ?>

                    <?php if (get_field('review_quote_name')) : ?>
                        <h3 class="company-name">
                            <?php echo get_field('review_quote_name'); ?>
                        </h3>
                    <?php endif; ?>

                    <?php if (get_field('review_quote_position')) : ?>
                        <h4 class="testimonial-position">
                            <?php echo get_field('review_quote_position'); ?>
                        </h4>
                    <?php endif; ?>

                    <?php if (get_field('review_quote_stars')) : ?>
                        <div class="testimonial-stars">
                            <?php echo get_field('review_quote_stars'); ?>
                        </div>
                    <?php endif; ?>
                </div>
            </div>

        </div>
    </div>
</section>

<?php echo get_template_part('templates-parts/pages/contact-form') ?>

<?php get_footer();?>

<script>
document.addEventListener("DOMContentLoaded", function () {
  const iframe = document.getElementById("testimonialIframe");
  const playBtn = document.getElementById("playVideoBtn");
  const videoCard = document.querySelector(".testimonial-video-card");
  if (!iframe || !playBtn || !videoCard) return;

  playBtn.addEventListener("click", function (e) {
    e.preventDefault();

    let videoUrl =
      iframe.getAttribute("data-video-src") ||
      iframe.getAttribute("data-lzl-v-src") ||
      iframe.getAttribute("data-src") ||
      iframe.getAttribute("src");

    if (!videoUrl || videoUrl.startsWith("data:") || videoUrl === "about:blank") {
      console.warn("Valid YouTube URL not found.");
      return;
    }

    videoUrl = videoUrl.replace(/&amp;/g, "&");
    const separator = videoUrl.includes("?") ? "&" : "?";
    iframe.setAttribute(
      "src",
      videoUrl + separator + "autoplay=1&mute=0&playsinline=1&rel=0"
    );

    videoCard.classList.add("is-playing");
    iframe.style.display = "block";
    videoCard.querySelector(".video-poster")?.style.setProperty("display", "none");
  });
});
</script>
