// Public site layout: top nav + footer. Pages opt in with `layout = "public"`.
// A layout is a `component` with a <slot> where the page body is injected.
component PublicLayout {
  view {
    <div data-component="container">
      <header class="site-header">
        <strong class="site-brand">WrNexus</strong>
        <nav class="site-nav">
          <a href="/">{t:nav.home}</a>
          <a href="/ui">{t:nav.ui}</a>
          <a href="/chat">{t:nav.chat}</a>
          <a href="/dashboard">{t:nav.dashboard}</a>
          <a href="/about">{t:nav.about}</a>
          <a href="/navigation">{t:nav.navigation}</a>
          <a href="/layout">{t:nav.layout}</a>
          <button type="button" data-wrn-theme-toggle aria-label="Toggle color theme">Theme</button>
          <button class="wrn-btn wrn-btn--ghost wrn-btn--sm" data-wrn-lang-set="en">EN</button>
          <button class="wrn-btn wrn-btn--ghost wrn-btn--sm" data-wrn-lang-set="es">ES</button>
        </nav>
      </header>

      <main>
        <slot></slot>
      </main>

      <footer class="site-footer">Built with WrNexus · WrNexus UI + theming</footer>
    </div>
  }
}