---
import LanguageSwitcher from './LanguageSwitcher.astro';
import MainNav from './MainNav.astro';
import MobileNav from './MobileNav.astro';
const { lang = 'en' } = Astro.props;
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">
    <a class="brand" href={lang === 'en' ? '/' : `/${lang}`}>
      <img src="/assets/images/aia-logo.svg" alt="Arizona Institute for Autism" width="150" height="70" />
    </a>
    <MainNav lang={lang} />
    <MobileNav lang={lang} />
    <LanguageSwitcher />
    <a class="button button-small" href="/tour">Tour AIA</a>
  </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 > .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>