<?php
/**
 * Template part for displaying About Section
 *
 *@package voltmaster-electrician
 */
$voltmaster_electrician_featured_about_section_aboutus_subheading = voltmaster_electrician_get_option('featured_about_section_aboutus_subheading');
$voltmaster_electrician_featured_about_section_aboutus_heading = voltmaster_electrician_get_option('featured_about_section_aboutus_heading');
$voltmaster_electrician_featured_about_section_aboutus_heading1 = voltmaster_electrician_get_option('featured_about_section_aboutus_heading1');
$voltmaster_electrician_featured_about_section_aboutus_description = voltmaster_electrician_get_option('featured_about_section_aboutus_description');


$voltmaster_electrician_featured_about_section_bxtext1 = voltmaster_electrician_get_option('featured_about_section_bxtext1');
$voltmaster_electrician_featured_about_section_bxtext2 = voltmaster_electrician_get_option('featured_about_section_bxtext2');
$voltmaster_electrician_featured_about_section_bxtext3 = voltmaster_electrician_get_option('featured_about_section_bxtext3');
$voltmaster_electrician_featured_about_section_bxtext4 = voltmaster_electrician_get_option('featured_about_section_bxtext4');
$voltmaster_electrician_featured_about_section_bxticon2_text = voltmaster_electrician_get_option('featured_about_section_bxticon2_text');
$voltmaster_electrician_featured_about_section_bxticon3_text = voltmaster_electrician_get_option('featured_about_section_bxticon3_text');
$voltmaster_electrician_featured_about_section_bxticon4_text = voltmaster_electrician_get_option('featured_about_section_bxticon4_text');

$voltmaster_electrician_featured_about_section_bxtitle1 = voltmaster_electrician_get_option('featured_about_section_bxtitle1');
$voltmaster_electrician_featured_about_section_bxtitle2 = voltmaster_electrician_get_option('featured_about_section_bxtitle2');
$voltmaster_electrician_featured_about_section_bxtitle3 = voltmaster_electrician_get_option('featured_about_section_bxtitle3');
$voltmaster_electrician_featured_about_section_bxtitle4 = voltmaster_electrician_get_option('featured_about_section_bxtitle4');
$voltmaster_electrician_featured_about_section_bxicon2_number = voltmaster_electrician_get_option('featured_about_section_bxicon2_number');
$voltmaster_electrician_featured_about_section_bxicon3_number = voltmaster_electrician_get_option('featured_about_section_bxicon3_number');
$voltmaster_electrician_featured_about_section_bxicon4_number = voltmaster_electrician_get_option('featured_about_section_bxicon4_number');

$voltmaster_electrician_featured_icon_about1 = voltmaster_electrician_get_option('featured_icon_about1');
$voltmaster_electrician_featured_icon_about2 = voltmaster_electrician_get_option('featured_icon_about2');
$voltmaster_electrician_featured_icon_about3 = voltmaster_electrician_get_option('featured_icon_about3');
$voltmaster_electrician_featured_icon_about4 = voltmaster_electrician_get_option('featured_icon_about4');
$voltmaster_electrician_featured_icon_about5 = voltmaster_electrician_get_option('featured_icon_about5');
$voltmaster_electrician_featured_icon_about6 = voltmaster_electrician_get_option('featured_icon_about6');
$voltmaster_electrician_featured_icon_about7 = voltmaster_electrician_get_option('featured_icon_about7');

?>
<?php if (!get_theme_mod('voltmasterelectrician_enable_featured_about_section', true)) {
  return;
} ?>
<section id="featured-about">

  <div class="container-fluid ">
    <div class="row d-flex about-section-main">

      <div
        class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-xs-12 col-12 col-div <?php echo esc_attr(get_theme_mod('voltmaster_electrician_featured_about_onload_effects', 'wow zoomIn')); ?>">

        <div class="myside">
          <div class="col-sm-12 col-12 img-h2">
            <!-- heading 1st -->
            <h2 class="text-blue-800 font-semibold mb-2">
              <?php echo ($voltmaster_electrician_featured_about_section_aboutus_subheading); ?>
            </h2>
          </div>
          <div class="col-sm-12 col-12 heading-2nd">
            <!-- heading 2nd -->
            <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-6">
              <?php echo ($voltmaster_electrician_featured_about_section_aboutus_heading); ?>
            </h2>
          </div>
          <div class="col-sm-12 col-12 description">
            <p class="text-lg text-gray-600 mb-6">
              <?php echo ($voltmaster_electrician_featured_about_section_aboutus_description); ?>
            </p>
            <p class="text-gray-600"><?php echo ($voltmaster_electrician_featured_about_section_aboutus_heading1); ?></p>
          </div>

          <div class="col-xl-12 col-lg-12 col-md-12 plans mb-5">

            <div class="list mb-3">
              <h2 class="mb-1 font-semibold text-gray-900"><i
                  class="<?php echo esc_attr($voltmaster_electrician_featured_icon_about1); ?>"></i>
                <?php echo esc_html($voltmaster_electrician_featured_about_section_bxtitle1); ?>
              </h2>
              <p class="text-gray-600"><?php echo esc_html($voltmaster_electrician_featured_about_section_bxtext1); ?>
              </p>
            </div>
            <div class="list mb-3">
              <h2 class="mb-1 font-semibold text-gray-900"><i
                  class="<?php echo esc_attr($voltmaster_electrician_featured_icon_about2); ?>"></i>
                <?php echo esc_html($voltmaster_electrician_featured_about_section_bxtitle2); ?>
              </h2>
              <p class="text-gray-600"><?php echo esc_html($voltmaster_electrician_featured_about_section_bxtext2); ?>
              </p>
            </div>
            <div class="list mb-3">
              <h2 class="mb-1 font-semibold text-gray-900"><i
                  class="<?php echo esc_attr($voltmaster_electrician_featured_icon_about3); ?>"></i>
                <?php echo esc_html($voltmaster_electrician_featured_about_section_bxtitle3); ?>
              </h2>
              <p class="text-gray-600"><?php echo esc_html($voltmaster_electrician_featured_about_section_bxtext3); ?>
              </p>
            </div>



          </div>

        </div>

      </div>

      <div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-xs-12 col-12  col-div col-div1">


        <section id="counters" class="py-5">
          <div class="row text-center">
            <!-- Counter 1 -->
            <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 mb-4">
              <div class="counter-box bg-blue">
                <i
                  class="lucide lucide-award w-10 h-10 text-blue-800 mx-auto mb-4 <?php echo esc_attr($voltmaster_electrician_featured_icon_about4); ?>"></i>
                <h2 class="counter text-3xl font-bold text-blue-800 mb-2"
                  data-target="<?php echo esc_attr($voltmaster_electrician_featured_about_section_bxtitle4 ?: 25); ?>">0</h2>
                <p class="text-gray-600 m-0"><?php echo esc_html($voltmaster_electrician_featured_about_section_bxtext4); ?></p>
              </div>
            </div>

            <!-- Counter 2 -->
            <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 mb-4">
              <div class="counter-box bg-yellow">
                <i
                  class="lucide lucide-award w-10 h-10 text-blue-800 mx-auto mb-4 <?php echo esc_attr($voltmaster_electrician_featured_icon_about5); ?>"></i>
                <h2 class="counter text-3xl font-bold text-blue-800 mb-2"
                  data-target="<?php echo esc_attr($voltmaster_electrician_featured_about_section_bxicon2_number ?: 1000); ?>">0
                </h2>
                <p class="text-gray-600 m-0"><?php echo esc_html($voltmaster_electrician_featured_about_section_bxticon2_text); ?></p>
              </div>
            </div>

            <!-- Counter 3 -->
            <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 mb-4">
              <div class="counter-box bg-green">
                <i
                  class="lucide lucide-award w-10 h-10 text-blue-800 mx-auto mb-4 <?php echo esc_attr($voltmaster_electrician_featured_icon_about6); ?>"></i>
                <h2 class="counter text-3xl font-bold text-blue-800 mb-2"
                  data-target="<?php echo esc_attr($voltmaster_electrician_featured_about_section_bxicon3_number ?: 100); ?>">0
                </h2>
                <p class="text-gray-600 m-0"><?php echo esc_html($voltmaster_electrician_featured_about_section_bxticon3_text); ?></p>
              </div>
            </div>

            <!-- Counter 4 -->
            <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 mb-4">
              <div class="counter-box bg-red">
                <i
                  class="lucide lucide-award w-10 h-10 text-blue-800 mx-auto mb-4 <?php echo esc_attr($voltmaster_electrician_featured_icon_about7); ?>"></i>
                <!-- added counter class and data-target here -->
                <h2 class="counter text-3xl font-bold text-blue-800 mb-2"
                  data-target="<?php echo esc_attr($voltmaster_electrician_featured_about_section_bxicon4_number ?: 24); ?>">0</h2>
                <p class="text-gray-600 m-0"><?php echo esc_html($voltmaster_electrician_featured_about_section_bxticon4_text); ?></p>
              </div>
            </div>
          </div>
        </section>


      </div>


    </div>

  </div>
</section>
<style>
  #featured-about #counters .counter-box {
    width: 90%;
    justify-self: center;
    padding: 2rem 1rem;
    border-radius: 15px;
  }
  #featured-about #counters .counter-box .svg {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1rem;
    border-radius: 1rem;
    width: 5rem;
    height: 5rem;
    transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
  }

  #featured-about #counters .counters-block:hover .svg {
    transform: scale(1.1);
  }

  /* 🎨 Number & text colors inside counters */
  #featured-about #counters .bg-blue span {
    color: #155dfc;
    /* Blue */
  }

  #featured-about #counters .bg-yellow span {
    color: #d08700;
    /* Orange */
  }

  #featured-about #counters.bg-green span {
    color: #00a63e;
    /* Green */
  }

  #featured-about #counters .counters-num span {
    color: #e7000b;
    /* Red */
  }

  #featured-about #counters .bg-red svg {
    color: #155dfc;
  }

  #featured-about #counters .bg-yellow svg {
    color: #d08700;
  }

  #featured-about #counters .bg-green svg {
    color: #00a63e;
  }

  #featured-about #counters .bg-red svg {
    color: #e7000b;
  }


  #featured-about #counters .bg-blue {
    background-color: #eff6ff;
  }

  #featured-about #counters .bg-yellow {
    background-color: #fefce8;
  }

  #featured-about #counters .bg-green {
    background-color: #f0fdf4;
  }

  #featured-about #counters .bg-red {
    background-color: #fef2f2;
  }
</style>
<script>
  document.addEventListener("DOMContentLoaded", function () {
    const counters = document.querySelectorAll(".counter");
    const speed = 100; // lower = faster

    counters.forEach((counter) => {
      const target = parseInt(counter.getAttribute("data-target"));
      if (isNaN(target)) return; // skip non-numeric targets

      let count = 0;
      const updateCount = () => {
        const increment = Math.ceil(target / speed);

        if (count < target) {
          count += increment;
          counter.innerText = count;
          setTimeout(updateCount, 30);
        } else {
          counter.innerText = target + "+";
        }
      };

      // Start animation once DOM is loaded
      updateCount();
    });
  });
</script>