<section data-component-type="Content" class="w-full py-5 pb-[60px] px-[24px] lg:py-[100px] lg:px-10 md:py-20 md:px-6 sm:px-4 bg-white" data-component-slug="clothing-template-more-perks">
  

  <div class="max-w-[1300px] mx-auto text-center">
    <h2 class="title-stroke font-black text-[72px] lg:text-[56px] md:text-[40px] leading-[122%] mb-6" data-node="perks_title" data-node-type="text" data-node-label="Perks Title" data-node-default="More Perks, More Heat, More Flex Always.">
      {{perks_title}}
    </h2>

    <p class="text-2xl lg:text-xl text-[#919396] max-w-[900px] mx-auto mb-10" data-node="perks_desc" data-node-type="text" data-node-label="Perks Description" data-node-default="Membership gives you the upper hand—smoother shopping, better deals, and deeper access. You're not just buying clothes… you're stepping into a lifestyle.">
      {{perks_desc}}
    </p>

    <a href="{{perks_btn_link}}" class="w-[267px] h-16 rounded-xl bg-[#010609] text-white text-xl inline-flex items-center justify-center no-underline mb-20" data-node="perks_btn_link" data-node-type="page_links" data-node-label="Perks Button" data-node-default="/membership">
      <span data-node="perks_btn_text" data-node-type="text" data-node-default="Join the Crew">
        {{perks_btn_text}}
      </span>
    </a>

    <!-- Stats Grid -->
    <div class="flex md:flex-col justify-center gap-20 md:gap-12 w-full">
      <!-- Stat 1 -->
      <div class="relative flex flex-col items-center pr-12 md:pr-0">
        <div class="flex items-center gap-2">
          <span class="font-semibold text-[72px] md:text-[56px] leading-[122%]" data-node="stat_1_value" data-node-type="text" data-node-default="30%">
            {{stat_1_value}}
          </span>
          <span>
            <img src="{{stat_arrow}}" data-node="stat_arrow" data-node-type="file" data-node-label="Stat Arrow" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767002374/seltrix/templates/clothing-template/crew%20arrow.svg" alt="Arrow" class="w-8 h-auto block">
          </span>
        </div>
        <p class="text-xl text-[#919396] max-w-[320px] mt-3" data-node="stat_1_desc" data-node-type="text" data-node-default="Your go-to deals packed into every drop.">
          {{stat_1_desc}}
        </p>
        <span class="absolute right-0 top-2.5 bottom-2.5 w-[3px] bg-black rounded md:hidden"></span>
      </div>

      <!-- Stat 2 -->
      <div class="relative flex flex-col items-center pr-12 md:pr-0">
        <div class="flex items-center gap-2">
          <span class="font-semibold text-[72px] md:text-[56px] leading-[122%]" data-node="stat_2_value" data-node-type="text" data-node-default="80+">
            {{stat_2_value}}
          </span>
          <span>
            <img src="{{stat_arrow}}" alt="Arrow" class="w-8 h-auto block">
          </span>
        </div>
        <p class="text-xl text-[#919396] max-w-[320px] mt-3" data-node="stat_2_desc" data-node-type="text" data-node-default="Special fits and edits you won't find anywhere else.">
          {{stat_2_desc}}
        </p>
        <span class="absolute right-0 top-2.5 bottom-2.5 w-[3px] bg-black rounded md:hidden"></span>
      </div>

      <!-- Stat 3 -->
      <div class="flex flex-col items-center">
        <div class="flex items-center gap-2">
          <span class="font-semibold text-[72px] md:text-[56px] leading-[122%]" data-node="stat_3_value" data-node-type="text" data-node-default="160+">
            {{stat_3_value}}
          </span>
          <span>
            <img src="{{stat_arrow}}" alt="Arrow" class="w-8 h-auto block">
          </span>
        </div>
        <p class="text-xl text-[#919396] max-w-[320px] mt-3" data-node="stat_3_desc" data-node-type="text" data-node-default="Points, perks, and constant upgrades for loyal flexers.">
          {{stat_3_desc}}
        </p>
      </div>
    </div>
  </div>
</section>