import Link from 'next/link';
import { SITE_NAME } from '@/lib/site';
import { DegradedBanner } from './DegradedBanner';
import { LiveIndicator } from './LiveIndicator';
import { Logo } from './Logo';
import { NavLinks } from './NavLinks';
import { Search } from './Search';
import { TimeToggle } from './TimeToggle';

export function Header() {
  return (
    <>
      <header className="sticky top-0 z-40 border-b border-line bg-bg/95 backdrop-blur-[2px]">
        <div className="mx-auto flex h-[var(--header-h)] max-w-[1440px] items-center gap-4 px-3 sm:px-5">
          <Link href="/" className="flex items-center gap-2 text-[14px] font-medium tracking-tight text-ink" aria-label={`${SITE_NAME} home`}>
            <Logo size={20} />
            <span>
              InternetPressure<span className="text-ink-3">.io</span>
            </span>
          </Link>
          <NavLinks className="hidden lg:flex" />
          <div className="ml-auto flex items-center gap-2 sm:gap-3">
            <span className="md:hidden">
              <LiveIndicator compact />
            </span>
            <span className="hidden md:inline-flex">
              <LiveIndicator />
            </span>
            <span className="hidden sm:inline-flex">
              <TimeToggle />
            </span>
            <Search />
          </div>
        </div>
        <div className="border-t border-line lg:hidden">
          <NavLinks className="scroll-x mx-auto flex max-w-[1440px] px-3 sm:px-5" compact />
        </div>
      </header>
      <DegradedBanner />
    </>
  );
}