<section class="demo-section" aria-labelledby="element-card-heading">
  <h2 id="element-card-heading">Element Card</h2>
  <p>Compact icon-label tiles from the <em>Element Card</em> Figma frame.</p>

  <div class="demo-row" style="gap: 16px; align-items: flex-start;">
    <button class="element-card" type="button">
      <span class="element-card__icon"><i class="ph ph-heart"></i></span>
      <span class="element-card__label">Улюблене</span>
    </button>
    <button class="element-card is-selected" type="button">
      <span class="element-card__icon"><i class="ph ph-copy"></i></span>
      <span class="element-card__label">Від ріелторів</span>
    </button>
    <button class="element-card" type="button">
      <span class="element-card__badge">Pro</span>
      <span class="element-card__icon"><i class="ph ph-shield"></i></span>
      <span class="element-card__label">Приватність</span>
    </button>
    <button class="element-card" type="button">
      <span class="element-card__icon"><i class="ph ph-house"></i></span>
      <span class="element-card__label">Мої об'єкти</span>
    </button>
    <button class="element-card" type="button">
      <span class="element-card__icon"><i class="ph ph-clock-counter-clockwise"></i></span>
      <span class="element-card__label">Лід-радар</span>
    </button>
    <button class="element-card" type="button">
      <span class="element-card__icon"><i class="ph ph-users"></i></span>
      <span class="element-card__label">Мої клієнти</span>
    </button>
  </div>

  <h3>Vue element cards</h3>
  <div id="vue-element-card-app" class="vue-mount"></div>
  <script type="module">
    import { createApp } from "vue";
    import { GnElementCard } from "/vue/index.js";

    createApp({
      components: { GnElementCard },
      data() {
        return {
          selected: "agents",
          items: [
            { label: "Улюблене", icon: "ph-heart", key: "favorites" },
            { label: "Від ріелторів", icon: "ph-copy", key: "agents" },
            { label: "Приватність", icon: "ph-shield", key: "privacy", badge: "Pro" },
            { label: "Мої об'єкти", icon: "ph-house", key: "objects" },
            { label: "Лід-радар", icon: "ph-clock-counter-clockwise", key: "radar" },
            { label: "Мої клієнти", icon: "ph-users", key: "clients" }
          ]
        };
      },
      template: `
        <div style="display: flex; gap: 16px; align-items: flex-start;">
          <gn-element-card
            v-for="item in items"
            :key="item.key"
            :label="item.label"
            :icon="item.icon"
            :badge="item.badge"
            :selected="selected === item.key"
            @select="selected = item.key"
          />
        </div>
      `
    }).mount("#vue-element-card-app");
  </script>
</section>