<section data-component-type="Content" class="mood-section">
  <style>
    .mood-section {
      width: 100%;
      padding: 80px 100px;
    }

    .mood-container {
      max-width: 1728px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1.1fr 1fr;
      gap: 80px;
      align-items: center;
    }

    .mood-image {
      border-radius: 24px;
      overflow: hidden;
    }

    .mood-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .mood-content {
      display: flex;
      flex-direction: column;
      gap: 40px;
    }

    .mood-tabs {
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
      margin-bottom: 40px;
    }

    .mood-tab {
      font-family: "Michroma", sans-serif;
      font-size: 20px;
      padding: 18px 24px;
      height: 64px;
      border-radius: 12px;
      border: 1px solid #000;
      background: transparent;
      cursor: pointer;
    }

    .mood-tab.active {
      background: #010609;
      color: #fff;
      border-color: #010609;
    }

    .mood-title {
      font-family: "Rajdhani", sans-serif;
      font-weight: 900;
      font-size: 46px;
      font-style: italic;
      line-height: 100%;
    }

    .mood-desc {
      font-family: "Michroma", sans-serif;
      font-size: 20px;
      line-height: 100%;
      max-width: 625px;
      margin-top: -20px;
    }

    .mood-features {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 30px 40px;
      margin-bottom: 30px;
    }

    .feature-item {
      display: flex;
      align-items: center;
      gap: 16px;
      font-family: "Michroma", sans-serif;
      font-size: 20px;
    }

    .feature-icon {
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .feature-icon img {
      width: 100%;
      height: 100%;
      display: block;
    }

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

    @media (max-width: 1024px) {
      .mood-container {
        grid-template-columns: 1fr;
      }
      .mood-title {
        font-size: 48px;
      }
    }

    @media (max-width: 768px) {
      .mood-section {
        padding: 48px 24px;
      }
      .mood-title {
        font-size: 36px;
      }
      .mood-desc {
        font-size: 16px;
      }
      .mood-features {
        grid-template-columns: 1fr;
      }
    }
  </style>

  <div class="mood-container">
    <div
      class="mood-image"
      data-node="mood_image"
      data-node-type="file"
      data-node-default="../assets/category-tab.webp"
    >
      <img src="{{mood_image}}" alt="Mood Image" />
    </div>

    <div class="mood-content">
      <div class="mood-tabs">
        <button class="mood-tab active">
          <span
            data-node="tab_hoodies"
            data-node-type="text"
            data-node-default="Hoodies"
          >
            {{tab_hoodies}}
          </span>
        </button>
        <button class="mood-tab">
          <span
            data-node="tab_sweatshirts"
            data-node-type="text"
            data-node-default="Sweatshirts"
          >
            {{tab_sweatshirts}}
          </span>
        </button>
        <button class="mood-tab">
          <span
            data-node="tab_tees"
            data-node-type="text"
            data-node-default="Tees"
          >
            {{tab_tees}}
          </span>
        </button>
        <button class="mood-tab">
          <span
            data-node="tab_bottoms"
            data-node-type="text"
            data-node-default="Bottoms"
          >
            {{tab_bottoms}}
          </span>
        </button>
      </div>

      <h2
        class="mood-title"
        data-node="mood_title"
        data-node-type="text"
        data-node-default="Not just outfits. Whole moods."
      >
        {{mood_title}}
      </h2>

      <p
        class="mood-desc"
        data-node="mood_desc"
        data-node-type="text"
        data-node-default="Zero effort, max vibe. Slide into hoodies, tees, and bottoms that always pass the mirror check."
      >
        {{mood_desc}}
      </p>

      <div class="mood-features">
        <div class="feature-item">
          <div class="feature-icon">
            <img
              src="{{tick_icon}}"
              data-node="tick_icon"
              data-node-type="file"
              data-node-default="../assets/tick-tab.svg"
              alt="Tick"
            />
          </div>
          <span
            data-node="feature_1"
            data-node-type="text"
            data-node-default="Premium fabrics"
          >
            {{feature_1}}
          </span>
        </div>

        <div class="feature-item">
          <div class="feature-icon">
            <img src="{{tick_icon}}" alt="Tick" />
          </div>
          <span
            data-node="feature_2"
            data-node-type="text"
            data-node-default="Street-loud style"
          >
            {{feature_2}}
          </span>
        </div>

        <div class="feature-item">
          <div class="feature-icon">
            <img src="{{tick_icon}}" alt="Tick" />
          </div>
          <span
            data-node="feature_3"
            data-node-type="text"
            data-node-default="Real-body fits"
          >
            {{feature_3}}
          </span>
        </div>

        <div class="feature-item">
          <div class="feature-icon">
            <img src="{{tick_icon}}" alt="Tick" />
          </div>
          <span
            data-node="feature_4"
            data-node-type="text"
            data-node-default="Built-to-last wear"
          >
            {{feature_4}}
          </span>
        </div>

        <div class="feature-item">
          <div class="feature-icon">
            <img src="{{tick_icon}}" alt="Tick" />
          </div>
          <span
            data-node="feature_5"
            data-node-type="text"
            data-node-default="Feed-ready drops"
          >
            {{feature_5}}
          </span>
        </div>

        <div class="feature-item">
          <div class="feature-icon">
            <img src="{{tick_icon}}" alt="Tick" />
          </div>
          <span
            data-node="feature_6"
            data-node-type="text"
            data-node-default="Skin-friendly feel"
          >
            {{feature_6}}
          </span>
        </div>

        <div class="feature-item">
          <div class="feature-icon">
            <img src="{{tick_icon}}" alt="Tick" />
          </div>
          <span
            data-node="feature_7"
            data-node-type="text"
            data-node-default="Effortless returns"
          >
            {{feature_7}}
          </span>
        </div>

        <div class="feature-item">
          <div class="feature-icon">
            <img src="{{tick_icon}}" alt="Tick" />
          </div>
          <span
            data-node="feature_8"
            data-node-type="text"
            data-node-default="Weekend-proof quality"
          >
            {{feature_8}}
          </span>
        </div>
      </div>

      <a
        href="{{mood_btn_link}}"
        class="mood-btn"
        data-node="mood_btn_link"
        data-node-type="page_links"
        data-node-default="/collections"
      >
        <span
          data-node="mood_btn_text"
          data-node-type="text"
          data-node-default="Start Flexing"
        >
          {{mood_btn_text}}
        </span>
      </a>
    </div>
  </div>

  <div class="hidden">
    <div data-tab-content="sweatshirts">
      <span>Not just outfits. Whole moods.</span>
      <span
        >Zero effort, max vibe. Slide into hoodies, tees, and bottoms that
        always pass the mirror check.</span
      >
    </div>

    <div data-tab-content="tees">
      <span>Not just outfits. Whole moods.</span>
      <span
        >Zero effort, max vibe. Slide into hoodies, tees, and bottoms that
        always pass the mirror check.</span
      >
    </div>

    <div data-tab-content="bottoms">
      <span>Not just outfits. Whole moods.</span>
      <span
        >Zero effort, max vibe. Slide into hoodies, tees, and bottoms that
        always pass the mirror check.</span
      >
    </div>
  </div>

  <script>
    const tabs = document.querySelectorAll(".mood-tab");
    const title = document.querySelector(".mood-title");
    const desc = document.querySelector(".mood-desc");

    tabs.forEach((tab) => {
      tab.addEventListener("click", () => {
        tabs.forEach((t) => t.classList.remove("active"));
        tab.classList.add("active");

        const key = tab.innerText.toLowerCase().trim();

        const content = document.querySelector(`[data-tab-content="${key}"]`);
        if (!content) return;

        title.innerText = content.children[0].innerText;
        desc.innerText = content.children[1].innerText;
      });
    });
  </script>
</section>
