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

/**
 * Transparent over the hero; gains the blurred bar once the page scrolls.
 *
 * Below 980px it carries a logo and a call button and nothing else. The nav is
 * not shown at that width and the proposal button has moved to <ThumbBar />,
 * so there is nothing left up here to compete with the page.
 */
export function SiteHeader() {
  const scrolled = useScrolled()

  return (
    <header
      className={cx(
        'fixed inset-x-0 top-0 z-[60] py-[14px] transition-[background-color,box-shadow,backdrop-filter] duration-250 phone:py-[9px]',
        scrolled && 'bg-navy-deep/[0.88] shadow-[0_12px_42px_rgb(3_20_34/0.18)] backdrop-blur-[18px]',
      )}
    >
      <Container className="flex items-center justify-between gap-[18px]">
        <a className="inline-flex min-w-0 items-center" href="#top" aria-label="Экзо Групп — наверх">
          <img
            alt="Экзо Групп — российские технологии реабилитации"
            className="block h-auto w-[clamp(172px,20vw,232px)] max-w-full object-contain object-left phone:w-[168px]"
            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-[10px] phone:gap-[6px]">
          <a
            href={contacts.phoneHref}
            aria-label="Позвонить в Экзо Групп"
            className={buttonClass('call', 'phone:min-h-[40px] phone:px-[13px] [&>svg]:phone:size-[18px]', headerSize)}
          >
            <PhoneIcon />
            <span className="phone:hidden">Звонок</span>
          </a>
          {/* `max-lg:hidden`, not `hidden lg:inline-flex`: `inline-flex` from
              the button base is emitted after `hidden` in the utility layer and
              would win at every width. */}
          <ButtonLink href="#proposal" className="max-lg:hidden" size={headerSize}>
            Получить предложение
          </ButtonLink>
        </div>
      </Container>
    </header>
  )
}