<section class="demo-section" aria-labelledby="client-folder-cards-heading">
  <h2 id="client-folder-cards-heading">Client & Folder Cards</h2>
  <p>Client and folder cards from the <em>Client Card</em>, <em>Card - Folder</em> and <em>Card - Folder Option</em> Figma frames.</p>

  <div class="demo-row" style="align-items: flex-start;">
    <article class="client-card">
      <div class="client-card__header">
        <div class="client-card__main">
          <span class="client-card__avatar"><img src="/assets/avatar-placeholder.jpg" alt=""></span>
          <div class="client-card__info">
            <h3 class="client-card__name">Henry Stephen</h3>
            <span class="client-card__role">Regular customer</span>
          </div>
        </div>
        <button class="client-card__menu" type="button" aria-label="More options"><i class="ph ph-dots-three-vertical"></i></button>
      </div>
      <div class="client-card__details">
        <div class="client-card__detail">
          <span class="client-card__detail-label">Total orders</span>
          <span class="client-card__detail-value">12 orders</span>
        </div>
        <div class="client-card__detail">
          <span class="client-card__detail-label">Last order</span>
          <span class="client-card__detail-value">2 days ago</span>
        </div>
      </div>
    </article>

    <article class="folder-card">
      <button class="folder-card__menu" type="button" aria-label="More options"><i class="ph ph-dots-three-vertical"></i></button>
      <div class="folder-card__main">
        <span class="folder-card__icon"><img src="/assets/Folder.png" alt=""></span>
        <h3 class="folder-card__title">Summer sale 2025</h3>
      </div>
      <div class="folder-card__summary">
        <div class="folder-card__summary-item">
          <span class="folder-card__summary-label">Total asset</span>
          <span class="folder-card__summary-value">12 assets</span>
        </div>
        <div class="folder-card__summary-item">
          <span class="folder-card__summary-label">Last updated</span>
          <span class="folder-card__summary-value">2 days ago</span>
        </div>
      </div>
    </article>

    <article class="folder-card folder-card--horizontal">
      <button class="folder-card__menu" type="button" aria-label="More options"><i class="ph ph-dots-three-vertical"></i></button>
      <div class="folder-card__main">
        <span class="folder-card__icon"><img src="/assets/Folder.png" alt=""></span>
        <h3 class="folder-card__title">Summer sale 2025</h3>
      </div>
    </article>
  </div>

  <h3 class="demo-subsection-heading">Vue client & folder cards</h3>
  <div id="vue-client-folder-card-app" class="vue-mount"></div>
  <script type="module">
    import { createApp } from "vue";
    import { GnClientCard, GnFolderCard } from "/vue/index.js";

    createApp({
      components: { GnClientCard, GnFolderCard },
      data() {
        return {
          client: {
            name: "Henry Stephen",
            role: "Regular customer",
            image: "/assets/avatar-placeholder.jpg",
            details: [
              { label: "Total orders", value: "12 orders" },
              { label: "Last order", value: "2 days ago" }
            ]
          },
          folder: {
            title: "Summer sale 2025",
            image: "/assets/Folder.png",
            summary: [
              { label: "Total asset", value: "12 assets" },
              { label: "Last updated", value: "2 days ago" }
            ]
          }
        };
      },
      template: `
        <div class="demo-row" style="align-items: flex-start;">
          <gn-client-card v-bind="client" @menu="console.log('client menu')" />
          <gn-folder-card v-bind="folder" @menu="console.log('folder menu')" />
          <gn-folder-card title="Summer sale 2025" image="/assets/Folder.png" layout="horizontal" />
        </div>
      `
    }).mount("#vue-client-folder-card-app");
  </script>
</section>