<section class="review-tabs-section" data-review-tabs>
  <div class="review-tabs-section__inner">
    <div class="review-tabs-section__rating">
      <div class="review-tabs-section__stars" aria-hidden="true">
        <span>★</span><span>★</span><span>★</span><span>★</span><span>★</span>
      </div>
      <p>4.8 stars</p>
    </div>

    <h2>Join 1,000,000+ Others Filling Nutrition Gaps</h2>

    <ul class="review-tabs-section__nav" role="tablist">
      <li><button type="button" data-review-tab="taste">Taste</button></li>
      <li><button type="button" data-review-tab="value">Value</button></li>
      <li><button type="button" data-review-tab="vs-powders">Vs Powders</button></li>
      <li><button type="button" data-review-tab="benefits">Benefits</button></li>
      <li><button type="button" data-review-tab="ingredients">Ingredients</button></li>
      <li><button type="button" data-review-tab="convenience" class="is-active">Convenience</button></li>
    </ul>

    <div class="review-tabs-section__reviews" data-review-list></div>
  </div>
</section>

<style>
  .review-tabs-section {
    width: 100%;
    background: #daece3;
    color: #000;
    font-family: Arial, Helvetica, sans-serif;
  }

  .review-tabs-section * {
    box-sizing: border-box;
  }

  .review-tabs-section__inner {
    width: 100%;
    max-width: 1520px;
    margin: 0 auto;
    padding: 5%;
  }

  .review-tabs-section__rating {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 18px;
  }

  .review-tabs-section__stars {
    display: flex;
    gap: 1px;
    color: #000;
    font-size: 17px;
    line-height: 1;
  }

  .review-tabs-section__rating p {
    margin: 0;
    font-size: 16px;
    line-height: 22px;
    font-weight: 500;
  }

  .review-tabs-section h2 {
    max-width: 860px;
    margin: 0 auto 24px;
    color: #000;
    text-align: center;
    font-size: 44px;
    line-height: 1.1;
    letter-spacing: -1px;
    font-weight: 600;
  }

  .review-tabs-section__nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 0 0 50px;
    padding: 0;
    list-style: none;
  }

  .review-tabs-section__nav li {
    width: 16%;
    min-width: 150px;
  }

  .review-tabs-section__nav button {
    width: 100%;
    min-height: 46px;
    border: 0;
    border-radius: 999px;
    background: #fff;
    color: #000;
    padding: 10px 18px;
    font-size: 22px;
    line-height: 1;
    letter-spacing: -1px;
    font-weight: 600;
    cursor: pointer;
    transition: background 220ms ease, color 220ms ease;
  }

  .review-tabs-section__nav button:hover,
  .review-tabs-section__nav button.is-active {
    background: #194d38;
    color: #fff;
  }

  .review-tabs-section__reviews {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 32px;
  }

  .review-card {
    width: 33.333%;
    max-width: 500px;
    text-align: center;
  }

  .review-card__stars {
    display: flex;
    justify-content: center;
    gap: 1px;
    margin-bottom: 16px;
    color: #000;
    font-size: 17px;
    line-height: 1;
  }

  .review-card__title {
    margin: 0 0 16px;
    font-size: 20px;
    line-height: 24px;
    letter-spacing: -1px;
    font-weight: 600;
  }

  .review-card__text {
    margin: 0 0 16px;
    font-size: 16px;
    line-height: 25.6px;
    letter-spacing: -0.44px;
    font-weight: 500;
  }

  .review-card__author {
    margin: 0;
    font-size: 18px;
    line-height: 21.6px;
    letter-spacing: -1px;
    font-weight: 600;
  }

  @media (max-width: 989px) {
    .review-tabs-section__reviews {
      flex-direction: column;
      align-items: center;
    }

    .review-card {
      width: 100%;
      max-width: 500px;
    }

    .review-tabs-section__nav li {
      width: calc(33.333% - 8px);
      min-width: 0;
      flex-grow: 1;
    }
  }

  @media (max-width: 749px) {
    .review-tabs-section__inner {
      padding: 44px 18px;
    }

    .review-tabs-section h2 {
      font-size: 32px;
      line-height: 38.4px;
    }

    .review-tabs-section__nav {
      margin-bottom: 38px;
    }

    .review-tabs-section__nav li {
      width: calc(50% - 6px);
      flex-grow: 0;
    }

    .review-tabs-section__nav button {
      min-height: 38px;
      padding: 7px 12px;
      font-size: 18px;
      line-height: 24px;
    }
  }
</style>

<script>
  document.addEventListener("DOMContentLoaded", function () {
    document.querySelectorAll("[data-review-tabs]").forEach(function (section) {
      if (section.dataset.ready === "true") return;
      section.dataset.ready = "true";

      const reviews = {
        taste: [
          {
            title: "10/10 would recommend. The convenience and taste are huge! Like mixed berries!",
            text: "Plus not having to clean a shaker bottle or extra dishes for greens stuff in powder form, is absolutely excellent!",
            author: "Dustin O."
          },
          {
            title: "These gummies are shockingly delicious, like strawberries!",
            text: "I hate subscriptions because I feel like they are a trap so I canceled it before the gummies even arrived. We quickly decided to resubscribe because we love Grüns so much! A bonus is my kids love them too!",
            author: "Kate S."
          },
          {
            title: "A delicious adventure for your taste buds.",
            text: "These gummy bears are more than just a treat; they’re a flavorful escape. With a burst of mouthwatering flavors, every bite is an invitation to a tasteful journey. Grüns makes healthy eating an indulgent experience.",
            author: "Kevin M."
          }
        ],
        value: [
          {
            title: "These gummies are amazing!",
            text: "Grüns has replaced multiple vitamins and supplements as they are all included in just one yummy little Grüns pack! Best decision I ever made switching!!",
            author: "Rebecca D."
          },
          {
            title: "The benefits of eating these gummies daily is stacked.",
            text: "I used to pay so much for multiple supplements to get all of the same benefits that Grüns gives me in a simple snack pack.",
            author: "Jeremy H."
          },
          {
            title: "I was super skeptical. These gummies actually do taste really yummy",
            text: "They’re easy to throw in a packet and take with me so I can enjoy them anytime. I also stopped buying separate probiotic gummies, b12 gummies, and multivitamin gummies.",
            author: "Jamie W."
          }
        ],
        "vs-powders": [
          {
            title: "Grüns has been the one thing I’ve been able to stick to",
            text: "I’ve tried a few green powders over the years. Grüns has been the one thing I’ve been able to stick to because they are so easy to consume and taste wonderful.",
            author: "Samuel L."
          },
          {
            title: "WOW! Grüns FOR THE WIN!",
            text: "I was taking AG1 but even with their monthly subscription discount it was still expensive and gritty. Grüns literally tastes like fruit snacks I ate as a kid.",
            author: "Bradley O."
          },
          {
            title: "Grüns is exactly what I needed.",
            text: "I’ve been choking on Athletic Greens for the last few years and am glad those days are over. I look forward to taking Grüns every day.",
            author: "Jaxon S."
          }
        ],
        benefits: [
          {
            title: "Grüns really does taste great! More importantly, I feel great.",
            text: "The prebiotics do their job, and I feel like my overall digestion has improved. I feel like I’m already seeing improvements in my skin too.",
            author: "Susan U."
          },
          {
            title: "If you are serious about changing your life, start here.",
            text: "It provides clean feeling energy and mental focus in a good tasting gummy bear that satisfies a sweet tooth craving without the sugar crash.",
            author: "Jeremy C."
          },
          {
            title: "My bowel movements are normal for the 1st time in 15 years!",
            text: "",
            author: "Wendy B."
          }
        ],
        ingredients: [
          {
            title: "I can’t stop raving about Grüns to my friends.",
            text: "Pharmacist approved! Most other gummies on the market have only a few vitamins, but there are no other products like this with full spectrum vitamins in gummy form!",
            author: "Mercedes F."
          },
          {
            title: "1000/10. Truly exceeded my expectations!",
            text: "Love the taste, love how they make me feel, and so impressed by the ingredients list! Definitely will be taking these on vacation with me.",
            author: "Gizelle C."
          },
          {
            title: "Grüns are the tastiest nutritional gummies I’ve ever had.",
            text: "They’re more convenient, less messy, and more flavorful than green powders. They are easy to have on the go, so it’s easy to build the daily habit.",
            author: "Matthew G."
          }
        ],
        convenience: [
          {
            title: "So easy to grab and eat on my way to the billion things I have to do as a mom",
            text: "Portable! Love the flavor and it’s so easy to grab and eat on my way to the billion things I have to do as a mom. Easy way to get my nutrients in!",
            author: "Kelli L."
          },
          {
            title: "Gruns has genuinely made a comprehensive daily nutrition solution enjoyable and accessible.",
            text: "I've been using Gruns Daily Gummies for a few weeks, and I'm hooked! The convenience of getting 60 nutrient-dense ingredients in a tasty gummy is unbeatable.",
            author: "Crystal H."
          },
          {
            title: "It’s wild I WANT to take Grüns and don’t forget.",
            text: "I love that it's a little pack of gummies because taking just 2 gummies before Grüns was never satisfying. And that’s before you get to all the health benefits.",
            author: "Brittany A."
          }
        ]
      };

      const buttons = section.querySelectorAll("[data-review-tab]");
      const list = section.querySelector("[data-review-list]");

      function stars() {
        return '<div class="review-card__stars" aria-hidden="true"><span>★</span><span>★</span><span>★</span><span>★</span><span>★</span></div>';
      }

      function render(category) {
        list.innerHTML = reviews[category].map(function (review) {
          return `
            <article class="review-card">
              ${stars()}
              <p class="review-card__title">${review.title}</p>
              ${review.text ? `<p class="review-card__text">${review.text}</p>` : ""}
              <p class="review-card__author">${review.author}</p>
            </article>
          `;
        }).join("");
      }

      buttons.forEach(function (button) {
        button.addEventListener("click", function () {
          buttons.forEach(function (item) {
            item.classList.remove("is-active");
          });

          button.classList.add("is-active");
          render(button.dataset.reviewTab);
        });
      });

      render("convenience");
    });
  });
</script>