<section data-component-type="Content" class="perks-section">
  <style>
    .perks-section {
      width: 100%;
      padding: 20px 100px 60px;
      background: #ffffff;
    }

    .perks-container {
      max-width: 1300px;
      margin: 0 auto;
      text-align: center;
    }

    .perks-title {
      font-family: "Rajdhani", sans-serif;
      font-weight: 900;
      font-size: 72px;
      font-style: italic;
      line-height: 122%;
      margin-bottom: 24px;
    }

    .perks-desc {
      font-family: "Michroma", sans-serif;
      font-size: 24px;
      line-height: 100%;
      color: #919396;
      max-width: 900px;
      margin: 0 auto 40px;
    }

    .perks-btn {
      width: 267px;
      height: 64px;
      border-radius: 12px;
      background: #010609;
      color: #ffffff;
      font-family: "Michroma", sans-serif;
      font-size: 20px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      text-decoration: none;
      margin-bottom: 80px;
    }

    .perks-stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 40px;
      align-items: flex-start;
    }

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

    .stat-top {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .stat-number {
      font-family: "Geist", sans-serif;
      font-weight: 600;
      font-size: 72px;
      line-height: 122%;
    }

    .stat-arrow img {
      width: 32px;
      height: auto;
      display: block;
    }

    .stat-desc {
      font-family: "Michroma", sans-serif;
      font-size: 20px;
      line-height: 100%;
      color: #919396;
      max-width: 350px !important;
    }

    @media (max-width: 1024px) {
      .perks-section {
        padding: 100px 40px;
      }

      .perks-title {
        font-size: 56px;
      }

      .perks-desc {
        font-size: 20px;
      }
    }

    @media (max-width: 768px) {
      .perks-section {
        padding: 80px 24px;
      }

      .perks-title {
        font-size: 40px;
      }

      .perks-stats {
        grid-template-columns: 1fr;
        gap: 48px;
      }

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

      .perks-stats {
        display: grid !important;
        width: 100%;
      }
    }

    .membership-stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 64px;
      align-items: stretch;
      margin: 0 auto;
    }

    .stat-item {
      display: flex;
      align-items: flex-start;
      gap: 24px;
      text-align: left;
    }

    .stat-content {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 12px;
    }

    .stat-value {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .stat-desc {
      text-align: left;
      max-width: 260px;
    }

    @media (max-width: 1024px) {
      .membership-stats {
        grid-template-columns: 1fr;
        gap: 40px;
      }

      .stat-divider {
        display: none;
      }
    }

    .membership-stats {
      grid-template-columns: repeat(3, minmax(320px, 1fr));
      gap: 80px;
    }

    .stat-item {
      position: relative;
      padding-right: 40px;
    }

    .perks-stats {
      display: flex;
      width: 100%;
    }

    .stat-item {
      position: relative;
      display: flex;
      flex-direction: column;
      padding-right: 48px;
    }

    .stat-divider {
      position: absolute;
      right: 0;
      top: 10px;
      bottom: 10px;
      width: 3px;
      background: #000;
      .perks-stats {
        display: flex;
        justify-content: center;
        gap: 80px;
        width: 100%;
        border-radius: 3px;
      }

      .stat-item {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-right: 48px;
      }

      .stat-item:last-child .stat-divider {
        display: none;
      }
    }

    .stat-item:last-child .stat-divider {
      display: none;
    }

    .stat-desc {
      max-width: 320px;
    }

    @media (max-width: 1024px) {
      .membership-stats {
        grid-template-columns: 1fr;
      }

      .stat-item {
        padding-right: 0;
      }

      .stat-divider {
        display: none;
      }
    }
  </style>

  <div class="perks-container">
    <h2
      class="perks-title"
      data-node="perks_title"
      data-node-type="text"
      data-node-default="More Perks, More Heat, More Flex Always."
    >
      {{perks_title}}
    </h2>

    <p
      class="perks-desc"
      data-node="perks_desc"
      data-node-type="text"
      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="perks-btn"
      data-node="perks_btn_link"
      data-node-type="page_links"
      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>

    <div class="perks-stats">
      <div class="stat-item">
        <div class="stat-top">
          <span
            class="stat-number"
            data-node="stat_1_value"
            data-node-type="text"
            data-node-default="30%"
          >
            {{stat_1_value}}
          </span>
          <span class="stat-arrow">
            <img
              src="{{stat_arrow}}"
              data-node="stat_arrow"
              data-node-type="file"
              data-node-default="../assets/crew arrow.svg"
              alt="Arrow"
            />
          </span>
        </div>
        <p
          class="stat-desc"
          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="stat-divider"></span>
      </div>

      <div class="stat-item">
        <div class="stat-top">
          <span
            class="stat-number"
            data-node="stat_2_value"
            data-node-type="text"
            data-node-default="80+"
          >
            {{stat_2_value}}
          </span>
          <span class="stat-arrow">
            <img src="{{stat_arrow}}" alt="Arrow" />
          </span>
        </div>
        <p
          class="stat-desc"
          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="stat-divider"></span>
      </div>

      <div class="stat-item">
        <div class="stat-top">
          <span
            class="stat-number"
            data-node="stat_3_value"
            data-node-type="text"
            data-node-default="160+"
          >
            {{stat_3_value}}
          </span>
          <span class="stat-arrow">
            <img src="{{stat_arrow}}" alt="Arrow" />
          </span>
        </div>
        <p
          class="stat-desc"
          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>
