<section class="demo-section">
  <h2>Cards</h2>

  <div class="demo-row" style="align-items: stretch;">
    <article class="card" style="max-width: 320px;">
      <header class="card-title">Default card</header>
      <div class="card-content">
        A simple card with title, content, and footer.
      </div>
      <footer class="card-footer">
        <button class="btn btn-primary btn-sm">Action</button>
      </footer>
    </article>

    <article class="card card-filled" style="max-width: 320px;">
      <header class="card-title">Filled card</header>
      <div class="card-content">
        Uses a subtle background fill instead of white.
      </div>
      <footer class="card-footer">
        <button class="btn btn-secondary btn-sm">Action</button>
      </footer>
    </article>

    <article class="card card-outlined" style="max-width: 320px;">
      <header class="card-title">Outlined card</header>
      <div class="card-content">
        Transparent background with a stronger border.
      </div>
      <footer class="card-footer">
        <button class="btn btn-tertiary btn-sm">Action</button>
      </footer>
    </article>
  </div>

  <div class="demo-row" style="align-items: stretch;">
    <article class="card card-primary" style="max-width: 320px;">
      <div class="card-content">
        Primary accent card with yellow tint.
      </div>
    </article>

    <article class="card card-secondary" style="max-width: 320px;">
      <div class="card-content">
        Secondary accent card with mint tint.
      </div>
    </article>

    <article class="card card-elevated" style="max-width: 320px;">
      <div class="card-content">
        Elevated card with a soft shadow.
      </div>
    </article>
  </div>

  <h3>Sizes</h3>
  <div class="demo-row" style="align-items: stretch;">
    <article class="card card-sm" style="max-width: 240px;">
      <header class="card-title">Small card</header>
      <div class="card-content">Compact padding and radius.</div>
    </article>

    <article class="card card-lg" style="max-width: 360px;">
      <header class="card-title">Large card</header>
      <div class="card-content">Generous padding and larger radius.</div>
    </article>
  </div>

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

    createApp({
      components: { GnCard, GnButton },
      template: `
        <div class="demo-row" style="align-items: stretch;">
          <gn-card title="Vue card" style="max-width: 320px;">
            Content rendered through the Vue adapter.
            <template #footer>
              <gn-button variant="primary" size="sm">Action</gn-button>
            </template>
          </gn-card>
        </div>
      `
    }).mount("#vue-cards-app");
  </script>

  <h3>Vue action card</h3>
  <div id="vue-action-card-app" class="vue-mount"></div>
  <script type="module">
    import { createApp } from "vue";
    import { GnActionCard, GnButton } from "/vue/index.js";

    createApp({
      components: { GnActionCard, GnButton },
      template: `
        <div class="demo-row" style="align-items: stretch;">
          <gn-action-card kicker="Pro tip" title="Ready to publish?" text="Review your changes before making them public." style="max-width: 360px;">
            <template #actions>
              <gn-button variant="primary" size="sm">Publish</gn-button>
              <gn-button variant="secondary" size="sm">Cancel</gn-button>
            </template>
          </gn-action-card>
        </div>
      `
    }).mount("#vue-action-card-app");
  </script>
</section>