---
import Button from './Button.astro';
import LanguageSwitcher from './LanguageSwitcher.astro';
import MainNav from './MainNav.astro';
import MobileNav from './MobileNav.astro';
import { fallbackLabel, resolveNavigationDestination, type VisitorLocale, type VisitorPublication } from '../utils/visitor-navigation';
interface Props { lang?: VisitorLocale; publication: VisitorPublication; manifest: VisitorPublication[]; }
const { lang = 'en', publication, manifest } = Astro.props;
const homeTarget = resolveNavigationDestination(lang === 'en' ? '/' : `/${lang}`, lang, manifest)
  ?? resolveNavigationDestination('/', lang, manifest);
const tourTarget = resolveNavigationDestination('/tour', lang, manifest);
const utility = lang === 'es'
  ? { credit: 'Solicitar CareCredit', bill: 'Pagar mi factura' }
  : { credit: 'Apply Care Credit', bill: 'Pay My Bill' };
---
<header class="site-header">
  <div class="utility-bar">
    <div class="container utility-inner">
      <a href="https://go.carecredit.com/consumer/providersearch">{utility.credit}</a>
      <a href="https://www.patientnotebook.com/abaclinic/Enhanced/SendMoney/MakePayment">{utility.bill}</a>
    </div>
  </div>
  <div class="container header-inner">
    {homeTarget ? <a class="brand" href={homeTarget.href} lang={homeTarget.fallback ? homeTarget.lang : undefined} hreflang={homeTarget.fallback ? homeTarget.lang : undefined}>
      <img src="/assets/images/aia-logo.svg" alt="Arizona Institute for Autism" width="150" height="70" />
    </a> : <span class="brand"><img src="/assets/images/aia-logo.svg" alt="Arizona Institute for Autism" width="150" height="70" /></span>}
    <MainNav lang={lang} manifest={manifest} />
    <MobileNav lang={lang} manifest={manifest} />
    <LanguageSwitcher publication={publication} manifest={manifest} />
    {tourTarget && <Button href={tourTarget.href} size="small">Tour AIA{tourTarget.fallback && ` (${fallbackLabel(tourTarget.lang)})`}</Button>}
  </div>
</header>

<style>
  .utility-bar { background: var(--color-primary); color: white; font-size: .85rem; }
  .utility-inner { align-items: center; display: flex; gap: var(--space-md); justify-content: flex-end; min-height: 38px; }
  .utility-bar a { color: white; text-decoration: none; }
  .site-header { background: white; box-shadow: var(--shadow-sm); position: relative; z-index: 5; }
  .header-inner { align-items: center; display: flex; gap: 1.4rem; min-height: 110px; }
  .brand img { width: 150px; }
  @media (max-width: 950px) {
    .header-inner > :global(.content-button) { display: none; }
  }
  @media (max-width: 760px) {
    .utility-inner { justify-content: center; }
    .header-inner { min-height: 88px; }
    .header-inner .lang-switcher { margin-left: auto; }
  }
</style>