---
import BaseLayout from './BaseLayout.astro';
import type { UserPublic } from '../lib/db';

interface Props {
  title: string;
  user: UserPublic;
}

const { title, user } = Astro.props;

const navLinks = [
  { href: '/',              label: 'Home'         },
  { href: '/vision',        label: 'Vision'       },
  { href: '/product',       label: 'Product'      },
  { href: '/updates',       label: 'Updates'      },
  { href: '/roadmap',       label: 'Roadmap'      },
  { href: '/calendar',      label: 'Calendar'     },
  { href: '/contribute',    label: 'Contribute'   },
  { href: '/participants',  label: 'Participants' },
];

const currentPath = Astro.url.pathname;
---
<BaseLayout title={title}>
  <div class="app">
    <header class="nav" role="banner">
      <div class="nav-inner">
        <a href="/" class="wordmark-link" aria-label="Project Bifrost — home">
          <img src="/logo.svg" alt="Fenja AI" class="wordmark" />
        </a>

        <nav class="nav-links" aria-label="Main navigation">
          {navLinks.map(({ href, label }) => (
            <a
              href={href}
              class:list={['nav-link', { active: currentPath === href || (href !== '/' && currentPath.startsWith(href)) }]}
            >
              {label}
            </a>
          ))}
          {user.role === 'fenja' && (
            <a
              href="/admin"
              class:list={['nav-link', { active: currentPath.startsWith('/admin') }]}
            >
              Admin
            </a>
          )}
        </nav>

        <div class="nav-user">
          <a href="/account" class="nav-user-name body-sm">{user.name}</a>
          <form method="POST" action="/api/logout">
            <button type="submit" class="logout-btn label-sm">Sign out</button>
          </form>
        </div>
      </div>
    </header>

    <main class="main-content">
      <slot />
    </main>
  </div>
</BaseLayout>

<style>
  .app {
    min-height: 100vh;
    background: var(--background);
    display: flex;
    flex-direction: column;
  }

  /* ── Nav ────────────────────────────────────────────────────────── */
  .nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--glass-surface);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-bottom: var(--ghost-border);
  }

  .nav-inner {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    padding: 0 var(--space-10);
    height: 56px;
    max-width: var(--content-max);
    margin: 0 auto;
    width: 100%;
  }

  .wordmark-link {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    border-bottom: none;
  }
  .wordmark-link:hover {
    border-bottom: none;
  }
  .wordmark {
    height: 22px;
    width: auto;
    display: block;
  }

  /* ── Nav links ──────────────────────────────────────────────────── */
  .nav-links {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    flex: 1;
  }

  .nav-link {
    font-family: var(--font-sans);
    font-size: var(--text-label-md);
    font-weight: 500;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--on-surface-variant);
    text-decoration: none;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    border-bottom: none;
    transition: color var(--duration-fast) var(--ease-standard),
                background var(--duration-fast) var(--ease-standard);
  }
  .nav-link:hover {
    color: var(--on-surface);
    background: var(--surface-container-low);
    border-bottom: none;
  }
  .nav-link.active {
    color: var(--on-surface);
    background: var(--surface-container);
  }

  /* ── User zone ──────────────────────────────────────────────────── */
  .nav-user {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-shrink: 0;
  }

  .nav-user-name {
    color: var(--on-surface-variant);
    text-decoration: none;
    border-bottom: none;
    transition: color var(--duration-fast) var(--ease-standard);
  }
  .nav-user-name:hover {
    color: var(--on-surface);
    border-bottom: none;
  }

  .logout-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: var(--text-label-md);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--on-surface-muted);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    transition: color var(--duration-fast) var(--ease-standard),
                background var(--duration-fast) var(--ease-standard);
  }
  .logout-btn:hover {
    color: var(--on-surface);
    background: var(--surface-container-low);
  }

  /* ── Content ────────────────────────────────────────────────────── */
  .main-content {
    flex: 1;
  }
</style>
