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

  <h3>Gradient</h3>
  <div class="demo-row">
    <div class="background-preview">
      <div class="vmk-bg is-preview" data-variant="gradient" data-device="desktop"></div>
      <span class="background-label">Desktop</span>
    </div>
    <div class="background-preview">
      <div class="vmk-bg is-preview" data-variant="gradient" data-device="tablet"></div>
      <span class="background-label">Tablet</span>
    </div>
    <div class="background-preview">
      <div class="vmk-bg is-preview" data-variant="gradient" data-device="mobile"></div>
      <span class="background-label">Mobile</span>
    </div>
  </div>

  <h3>Shape</h3>
  <div class="demo-row">
    <div class="background-preview">
      <div class="vmk-bg is-preview" data-variant="shape" data-device="desktop"></div>
      <span class="background-label">Desktop</span>
    </div>
    <div class="background-preview">
      <div class="vmk-bg is-preview" data-variant="shape" data-device="tablet"></div>
      <span class="background-label">Tablet</span>
    </div>
    <div class="background-preview">
      <div class="vmk-bg is-preview" data-variant="shape" data-device="mobile"></div>
      <span class="background-label">Mobile</span>
    </div>
  </div>

  <style>
    .background-preview {
      display: flex;
      flex-direction: column;
      gap: 8px;
      border-radius: 16px;
      overflow: hidden;
      background: #ffffff;
      box-shadow: 0 1px 3px rgba(31, 31, 31, 0.08);
    }
    .background-preview .vmk-bg {
      width: 100%;
      height: 220px;
    }
    .background-preview:nth-child(1) .vmk-bg { width: 420px; }
    .background-preview:nth-child(2) .vmk-bg { width: 210px; }
    .background-preview:nth-child(3) .vmk-bg { width: 140px; }
    .background-label {
      padding: 8px 12px;
      font-size: 13px;
      font-weight: 600;
      color: #1F1F1F;
    }
  </style>

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

    createApp({
      components: { GnBackground },
      template: `
        <div class="demo-row">
          <div class="background-preview">
            <gn-background variant="gradient" device="desktop" preview />
            <span class="background-label">Vue desktop</span>
          </div>
          <div class="background-preview">
            <gn-background variant="shape" device="mobile" preview />
            <span class="background-label">Vue mobile shape</span>
          </div>
        </div>
      `
    }).mount("#vue-backgrounds-app");
  </script>
</section>