<script>
  import { locale, t, toggleLocale } from '$lib/i18n/store.js';

  $: lang = $locale;
</script>

<header class="header">
  <a class="brand" href="/">
    <span class="wordmark">
      {$t('app.name')}
    </span>
    <span class="tagline">{$t('app.tagline')}</span>
  </a>

  <nav class="nav">
    <a href="/">{$t('nav.dashboard')}</a>
    <a href="/parts">{$t('nav.parts')}</a>
    <a href="/invoices/new">{$t('nav.new_sale')}</a>
    <a href="/movements/new">{$t('nav.movements')}</a>
    <a href="/suppliers">{$t('nav.suppliers')}</a>
    <a href="/admin">{$t('nav.admin')}</a>
  </nav>

  <button class="lang" type="button" on:click={toggleLocale} aria-label={$t('lang.switch_aria')}>
    {lang === 'en' ? $t('lang.switch_to_tg') : $t('lang.switch_to_en')}
  </button>
</header>

<style>
  .header {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 0.75rem 1.25rem;
    background: linear-gradient(180deg, #c8102e 0%, #b00d27 100%);
    color: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    border-bottom: 1px solid #8e0a1f;
  }
  .brand {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    text-decoration: none;
    color: inherit;
  }
  .wordmark {
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: 0.6px;
    /* Cyrillic-friendly serif for a slightly more "Tajik" feel */
    font-family: "Noto Serif", "Times New Roman", Georgia, serif;
  }
  .tagline {
    font-size: 0.8rem;
    opacity: 0.9;
    font-style: italic;
  }
  .nav {
    display: flex;
    gap: 0.5rem;
    margin-left: 1rem;
    flex: 1;
  }
  .nav a {
    color: inherit;
    text-decoration: none;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.25);
    font-weight: 500;
    line-height: 1;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
  }
  .nav a:hover {
    background: rgba(255,255,255,0.22);
    border-color: rgba(255,255,255,0.4);
  }
  .nav a:active { transform: translateY(1px); }
  .lang {
    background: rgba(255,255,255,0.12);
    color: inherit;
    border: 1px solid rgba(255,255,255,0.45);
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    font: inherit;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
  }
  .lang:hover {
    background: rgba(255,255,255,0.22);
    border-color: rgba(255,255,255,0.6);
  }
  .lang:active { transform: translateY(1px); }

  @media (max-width: 640px) {
    .header { flex-wrap: wrap; }
    .tagline { display: none; }
    .nav { order: 3; flex-basis: 100%; margin-left: 0; }
  }
</style>
