import logo from '../assets/images/exo-logo.png'
import { contacts, navLinks } from '../data/content'
import { ButtonLink, buttonClass, headerSize } from './Button'
import { PhoneIcon } from './Icons'
import { Container } from './Layout'

/**
 * The original ended up with the blurred background painted unconditionally —
 * the last stylesheet override drops the scroll-dependent variant — so there is
 * no scroll state to track here.
 *
 * Below 760px the bar carries the brand mark and the call button only. The two
 * action pills used to be `shrink-0` and 288px wide inside a 343px container,
 * which left the logo — the one element that has to stay legible on a
 * credibility-led B2B page — 37px at iPhone width and 0px at 320px, with the
 * CTA itself running past the right edge. The CTA moves to `MobileActionBar`,
 * which has room for it and puts it in the thumb zone.
 */
export function SiteHeader() {
  return (
    <header className="fixed inset-x-0 top-0 z-[60] bg-navy-deep/[0.92] py-[14px] shadow-[0_12px_42px_rgb(3_20_34/0.18)] backdrop-blur-[18px]">
      <Container className="flex items-center justify-between gap-[16px]">
        <a className="inline-flex shrink-0 items-center" href="#top" aria-label="ЭКЗО Групп — наверх">
          <img
            alt="ЭКЗО Групп — российские технологии реабилитации"
            className="block h-auto w-[146px] object-contain object-left compact:w-[138px] sm:w-[168px] lg:w-[clamp(172px,20vw,232px)]"
            src={logo}
            width={900}
            height={204}
          />
        </a>

        <nav
          aria-label="Основная навигация"
          className="hidden items-center gap-[28px] text-[14px] font-[680] text-white/[0.76] lg:flex"
        >
          {navLinks.map((link) => (
            <a key={link.href} href={link.href} className="transition-colors duration-200 hover:text-white">
              {link.label}
            </a>
          ))}
        </nav>

        <div className="flex shrink-0 items-center gap-[8px]">
          <a
            href={contacts.phoneHref}
            aria-label={`Позвонить в Экзо Групп по номеру ${contacts.phone}`}
            className={buttonClass(
              'call',
              undefined,
              /* Square and icon-only until the bar has room for the word. */
              'min-h-[44px] w-[44px] px-0 text-[13px] md:w-auto md:px-[17px]',
            )}
          >
            <PhoneIcon />
            <span className="hidden md:inline">Звонок</span>
          </a>
          {/* `max-md`, not the `narrow` variant: `narrow` is max-width 760 and the
              bar is min-width 760, so at exactly 760px both would hide and the page
              would have no CTA at all. `max-md` is the exact complement of `md`. */}
          <ButtonLink href="#proposal" size={headerSize} className="max-md:hidden">
            Получить предложение
          </ButtonLink>
        </div>
      </Container>
    </header>
  )
}