<section class="demo-section" aria-labelledby="top-navbar-heading">
  <h2 id="top-navbar-heading">Top Navbar</h2>
  <p>Application header bars from the <em>Top Navbar</em> frame.</p>

  <div class="demo-surface demo-surface--dark" style="background: #1F1F1F; border-radius: 16px; overflow: hidden;">
    <header class="top-navbar top-navbar--ghost" aria-label="App header">
      <a class="top-navbar__brand" href="#">
        <span class="top-navbar__logo"></span>
        <span class="top-navbar__title">Oselya.AI</span>
      </a>
      <div class="top-navbar__center">
        <nav class="bottom-bar bottom-bar--inline" aria-label="Primary 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>
      </div>
      <div class="top-navbar__actions">
        <button class="top-navbar__pill" type="button">
          <i class="ph ph-user"></i>
          Профіль
        </button>
      </div>
    </header>

    <header class="top-navbar top-navbar--centered" aria-label="Brand">
      <div class="top-navbar__center">
        <a class="top-navbar__brand" href="#">
          <span class="top-navbar__logo"></span>
          <span class="top-navbar__title">Oselya.AI</span>
        </a>
      </div>
    </header>
  </div>

  <div class="demo-surface" style="background: #F7F7F8; border-radius: 16px; overflow: hidden; margin-top: 24px;">
    <header class="top-navbar top-navbar--solid" aria-label="Page header">
      <div class="top-navbar__center">
        <h1 class="top-navbar__title">Title</h1>
      </div>
      <div class="top-navbar__actions">
        <button class="btn btn-icon-only btn-sm btn-secondary" type="button" aria-label="History">
          <i class="ph ph-credit-card"></i>
        </button>
        <button class="btn btn-icon-only btn-sm btn-secondary" type="button" aria-label="Close">
          <i class="ph ph-x"></i>
        </button>
      </div>
    </header>

    <header class="top-navbar top-navbar--solid" aria-label="Page header with actions">
      <a class="top-navbar__brand" href="#">
        <span class="top-navbar__logo top-navbar__logo--sm"></span>
        <span class="top-navbar__title">Oselya.AI</span>
      </a>
      <div class="top-navbar__center">
        <h1 class="top-navbar__title">Title</h1>
      </div>
      <div class="top-navbar__actions">
        <button class="btn btn-secondary btn-sm" type="button">
          <i class="ph ph-pencil-simple"></i>
          Новий чат
        </button>
        <button class="btn btn-secondary btn-sm" type="button">
          <i class="ph ph-credit-card"></i>
          Історія об'єктів
        </button>
      </div>
    </header>
  </div>

  <div class="demo-surface" style="background: #FFFFFF; border: 1px solid #E1E2E3; border-radius: 16px; overflow: hidden; margin-top: 24px;">
    <header class="top-navbar top-navbar--compact" aria-label="Mobile header">
      <button class="btn btn-icon-only btn-sm btn-secondary top-navbar__back" type="button" aria-label="Back">
        <i class="ph ph-arrow-left"></i>
      </button>
      <div class="top-navbar__center top-navbar__center--stack">
        <h1 class="top-navbar__title">Name</h1>
        <span class="top-navbar__meta">Статус • Статус контактів</span>
      </div>
      <div class="top-navbar__actions">
        <button class="btn btn-secondary btn-sm" type="button">Поскаржитись</button>
      </div>
    </header>
  </div>

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

    createApp({
      components: { GnTopNavbar },
      data() {
        return {
          active: 0,
          navItems: [
            { key: "home", label: "Головна", icon: "ph-house" },
            { key: "messages", label: "Повідомлення", icon: "ph-paper-plane" },
            { key: "ai", label: "AI чати", icon: "ph-sparkle" }
          ],
          actions: [{ label: "Профіль", icon: "ph-user" }]
        };
      },
      template: `
        <div style="background:#1F1F1F; border-radius:16px; overflow:hidden;">
          <gn-top-navbar
            variant="ghost"
            brand="Oselya.AI"
            :nav-items="navItems"
            :actions="actions"
            :active-nav="active"
            @select="active = $event"
          />
        </div>

        <div style="background:#F7F7F8; border-radius:16px; overflow:hidden; margin-top:24px;">
          <gn-top-navbar
            variant="solid"
            brand="Oselya.AI"
            title="Title"
            :actions="[
              { label: 'Новий чат', icon: 'ph-pencil-simple' },
              { label: &quot;Історія об'єктів&quot;, icon: 'ph-credit-card' }
            ]"
          />
        </div>
      `
    }).mount("#vue-top-navbar-app");
  </script>
</section>