<section id="features" class="features section">
  <!-- Section Title -->
  <div class="container section-title" data-aos="fade-up">
    <h2><%= sectionTitle %></h2>
    <p><%= sectionSubtitle %></p>
  </div><!-- End Section Title -->

  <div class="container">
    <ul class="nav nav-tabs row d-flex" data-aos="fade-up" data-aos-delay="100" role="tablist">
      <% features.forEach((feature, index) => { %>
        <li class="nav-item col-3" role="presentation">
          <a class="nav-link <%= index === 0 ? 'active' : '' %>" data-bs-toggle="tab" data-bs-target="#features-tab-<%= index + 1 %>" aria-selected="<%= index === 0 %>" role="tab" tabindex="<%= index === 0 ? '0' : '-1' %>">
            <i class="<%= feature.icon %>"></i>
            <h4 class="d-none d-lg-block"><%= feature.title %></h4>
          </a>
        </li>
      <% }) %>
    </ul><!-- End Tab Nav -->

    <div class="tab-content" data-aos="fade-up" data-aos-delay="200">
      <% features.forEach((feature, index) => { %>
        <div class="tab-pane fade <%= index === 0 ? 'active show' : '' %>" id="features-tab-<%= index + 1 %>" role="tabpanel">
          <div class="row">
            <div class="col-lg-6 order-2 order-lg-1 mt-3 mt-lg-0">
              <h3><%= feature.heading %></h3>
              <p class="fst-italic"><%= feature.description %></p>
              <ul>
                <% feature.list.forEach(item => { %>
                  <li><i class="bi bi-check2-all"></i> <span><%= item %></span></li>
                <% }) %>
              </ul>
              <p><%= feature.additionalInfo %></p>
            </div>
            <div class="col-lg-6 order-1 order-lg-2 text-center">
              <img src="<%= feature.image %>" alt="" class="img-fluid">
            </div>
          </div>
        </div><!-- End Tab Content Item -->
      <% }) %>
    </div>
  </div>
</section><!-- /Features Section -->