<section class="demo-section" aria-labelledby="bottom-bar-heading">
  <h2 id="bottom-bar-heading">Bottom Bar</h2>
  <p>Floating pill navigation from the <em>Bottom Bar Container</em> frame.</p>

  <div class="demo-surface demo-surface--dark" style="background: #1F1F1F; border-radius: 16px; padding: 32px; display: flex; flex-direction: column; gap: 32px; align-items: center;">
    <nav class="bottom-bar bottom-bar--stacked" aria-label="Primary mobile navigation">
      <button class="bottom-bar__item is-active" type="button">
        <span class="bottom-bar__icon"><i class="ph ph-house"></i></span>
        <span class="bottom-bar__label">Головна</span>
      </button>
      <button class="bottom-bar__item" type="button">
        <span class="bottom-bar__icon"><i class="ph ph-paper-plane"></i></span>
        <span class="bottom-bar__label">Повідомлення</span>
      </button>
      <button class="bottom-bar__item" type="button">
        <span class="bottom-bar__icon"><i class="ph ph-sparkle"></i></span>
        <span class="bottom-bar__label">AI чати</span>
      </button>
      <button class="bottom-bar__item" type="button">
        <span class="bottom-bar__icon"><i class="ph ph-user"></i></span>
        <span class="bottom-bar__label">Профіль</span>
      </button>
    </nav>

    <nav class="bottom-bar bottom-bar--inline" aria-label="Primary desktop navigation">
      <button class="bottom-bar__item is-active" type="button">
        <span class="bottom-bar__icon"><i class="ph ph-house"></i></span>
        <span class="bottom-bar__label">Головна</span>
      </button>
      <button class="bottom-bar__item" type="button">
        <span class="bottom-bar__icon"><i class="ph ph-paper-plane"></i></span>
        <span class="bottom-bar__label">Повідомлення</span>
      </button>
      <button class="bottom-bar__item" type="button">
        <span class="bottom-bar__icon"><i class="ph ph-sparkle"></i></span>
        <span class="bottom-bar__label">AI чати</span>
      </button>
    </nav>

    <nav class="bottom-bar bottom-bar--inline" aria-label="Active last item">
      <button class="bottom-bar__item" type="button">
        <span class="bottom-bar__icon"><i class="ph ph-house"></i></span>
        <span class="bottom-bar__label">Головна</span>
      </button>
      <button class="bottom-bar__item" type="button">
        <span class="bottom-bar__icon"><i class="ph ph-paper-plane"></i></span>
        <span class="bottom-bar__label">Повідомлення</span>
      </button>
      <button class="bottom-bar__item is-active" type="button">
        <span class="bottom-bar__icon"><i class="ph ph-sparkle"></i></span>
        <span class="bottom-bar__label">AI чати</span>
      </button>
    </nav>
  </div>

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

    createApp({
      components: { GnBottomBar },
      data() {
        return {
          stackedActive: 0,
          inlineActive: 1,
          items: [
            { key: "home", label: "Головна", icon: "ph-house" },
            { key: "messages", label: "Повідомлення", icon: "ph-paper-plane" },
            { key: "ai", label: "AI чати", icon: "ph-sparkle" },
            { key: "profile", label: "Профіль", icon: "ph-user" }
          ]
        };
      },
      template: `
        <div style="background:#1F1F1F; padding: 32px; display: flex; flex-direction: column; gap: 32px; align-items: center; border-radius: 16px;">
          <gn-bottom-bar
            layout="stacked"
            :items="items"
            v-model="stackedActive"
          />
          <gn-bottom-bar
            layout="inline"
            :items="items.slice(0, 3)"
            v-model="inlineActive"
          />
        </div>
      `
    }).mount("#vue-bottom-bar-app");
  </script>
</section>