---
import { ui, languages, defaultLang } from '../i18n/ui';
import LanguageSelector from './LanguageSelector.astro';

// Get current language from URL
const { pathname } = Astro.url;
// Extract the first path segment 
const pathSegments = pathname.split('/').filter(Boolean);
const langCode = pathSegments[0];
// Check if the first segment is a valid language code
const currentLang = langCode && Object.keys(languages).includes(langCode)
  ? langCode
  : defaultLang;

const t = ui[currentLang as keyof typeof ui];

const phone = t['phone'];
---
<header class="sticky top-0 z-50 bg-gradient-to-r from-black-deep to-black-medium backdrop-blur-md border-b border-silver-dark/30">
  <div class="max-w-7xl mx-auto flex items-center justify-between px-4 py-3">
    <a href={`/${currentLang}/`} class="flex items-center gap-3 group">
      <div class="relative w-14 h-14 flex items-center justify-center shadow-lg">
        <img src="/Logo.png" alt="JPM Security Logo" class="h-12 w-12 object-contain transition-all group-hover:scale-110" />
      </div>
      <span class="text-xl font-bold tracking-wide text-transparent bg-clip-text bg-gradient-to-r from-silver-metallic to-silver-light">JPM</span>
    </a>
    <div class="flex items-center gap-6">
      <LanguageSelector />
      <div class="flex flex-col items-end text-right">
        <span class="text-xl font-bold tracking-wide text-silver-light">Security & Services</span>
        <div class="flex items-center gap-2">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-accent-gold" viewBox="0 0 20 20" fill="currentColor">
            <path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z" />
          </svg>
          <span class="text-silver-light text-sm font-medium">{phone}</span>
        </div>
      </div>
    </div>
  </div>
</header> 