<section data-component-type="Stats" class="brand-proof-section">
  <style>
    .brand-proof-section {
      width: 100%;
      padding: 0px 100px 180px;
    }

    .brand-proof-container {
      max-width: 1728px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      gap: 40px;
    }

    .brand-quote {
      font-family: "Rajdhani", sans-serif;
      font-weight: 900;
      font-size: 64px;
      font-style: italic;
      line-height: 100%;
      max-width: 1100px;
    }

    .brand-rating {
      display: flex;
      align-items: center;
      gap: 16px;
      flex-wrap: wrap;
    }

    .brand-avatars img {
      height: 40px;
      width: auto;
      display: block;
    }

    .rating-score {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 32px;
      font-weight: 500;
    }

    .rating-score img {
      width: 32px;
      height: 32px;
    }

    .brand-desc {
      font-family: "Michroma", sans-serif;
      font-size: 24px;
      line-height: 100%;
      color: #636363;
      max-width: 780px;
    }

    .brand-stats {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 250px;
      margin-top: 20px;
      justify-content: flex-start;
    }

    .stat-item {
      text-align: center;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .stat-number {
      font-family: "Rajdhani", sans-serif;
      font-weight: 900;
      font-size: 56px;
      font-style: italic;
      color: #193a3f;
    }

    .stat-label {
      font-family: "Michroma", sans-serif;
      font-size: 28px;
      color: #193a3f;
    }

    .stat-item,
    .stat-number,
    .stat-label {
      text-align: left !important;
    }

    @media (max-width: 1024px) {
      .brand-proof-section {
        padding: 64px 40px;
      }

      .brand-quote {
        font-size: 48px;
      }

      .brand-stats {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 768px) {
      .brand-proof-section {
        padding: 10px 24px;
      }

      .brand-quote {
        font-size: 36px;
      }

      .brand-desc {
        font-size: 18px;
      }

      .stat-number {
        font-size: 44px;
      }

      .stat-label {
        font-size: 20px;
      }
      .brand-stats {
        gap: 30px;
      }
    }
  </style>

  <div class="brand-proof-container">
    <h2
      class="brand-quote"
      data-node="brand_quote"
      data-node-type="text"
      data-node-default="“Modern streetwear for hustlers, crafted to elevate your style and attitude.”"
    >
      {{brand_quote}}
    </h2>

    <div class="brand-rating">
      <div
        class="brand-avatars"
        data-node="brand_avatars"
        data-node-type="file"
        data-node-default="../assets/Frame 313.png"
      >
        <img src="{{brand_avatars}}" alt="People" />
      </div>

      <div class="rating-score">
        <span data-node="brand_rating" data-node-type="text" data-node-default="4.5/5"> {{brand_rating}} </span>

        <img
          src="{{brand_star}}"
          data-node="brand_star"
          data-node-type="file"
          data-node-default="../assets/star.svg"
          alt="Star"
        />
      </div>
    </div>
    <p
      class="brand-desc"
      data-node="brand_desc"
      data-node-type="text"
      data-node-default="Rated by the crew that lives and breathes street style. Trusted by trendsetters who flex it daily."
    >
      {{brand_desc}}
    </p>

    <div class="brand-stats">
      <div class="stat-item">
        <div class="stat-number" data-node="stat_1_num" data-node-type="text" data-node-default="150+">
          {{stat_1_num}}
        </div>
        <div class="stat-label" data-node="stat_1_label" data-node-type="text" data-node-default="Fresh Styles">
          {{stat_1_label}}
        </div>
      </div>

      <div class="stat-item">
        <div class="stat-number" data-node="stat_2_num" data-node-type="text" data-node-default="25+">
          {{stat_2_num}}
        </div>
        <div class="stat-label" data-node="stat_2_label" data-node-type="text" data-node-default="New Drops">
          {{stat_2_label}}
        </div>
      </div>

      <div class="stat-item">
        <div class="stat-number" data-node="stat_3_num" data-node-type="text" data-node-default="12">
          {{stat_3_num}}
        </div>
        <div class="stat-label" data-node="stat_3_label" data-node-type="text" data-node-default="City Reach">
          {{stat_3_label}}
        </div>
      </div>

      <div class="stat-item">
        <div class="stat-number" data-node="stat_4_num" data-node-type="text" data-node-default="40+">
          {{stat_4_num}}
        </div>
        <div class="stat-label" data-node="stat_4_label" data-node-type="text" data-node-default="Daily Fits">
          {{stat_4_label}}
        </div>
      </div>
    </div>
  </div>
</section>

<script>
  const counters = document.querySelectorAll(".stat-number");
  let counterStarted = false;

  function animateCounters() {
    if (counterStarted) return;

    counters.forEach((counter) => {
      const targetText = counter.innerText.trim();
      const target = parseInt(targetText.replace("+", ""));
      const hasPlus = targetText.includes("+");
      let current = 0;
      const increment = Math.ceil(target / 60);

      const updateCount = () => {
        current += increment;
        if (current >= target) {
          counter.innerText = target + (hasPlus ? "+" : "");
        } else {
          counter.innerText = current;
          requestAnimationFrame(updateCount);
        }
      };

      updateCount();
    });

    counterStarted = true;
  }

  const observer = new IntersectionObserver(
    (entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          animateCounters();
        }
      });
    },
    { threshold: 0.4 },
  );

  observer.observe(document.querySelector(".brand-proof-section"));
</script>
