import { Logo } from "./Logo";
import { NavLinks } from "./NavLinks";

/**
 * 60/40 split header (white left half holds the nav; the right half is empty
 * so the nav stays centred under the wolf emblem). Used by Privacy and
 * Membership Benefits.
 */
export function SplitHeader() {
  return (
    <header className="grid w-full grid-cols-[minmax(0,60fr)_minmax(0,40fr)] max-[1201px]:grid-cols-[minmax(0,55fr)_minmax(0,45fr)] max-[769px]:grid-cols-1 max-[769px]:bg-white">
      <div className="bg-white pt-[3.2vh] pr-[1.6vw] pb-[2vh] pl-[3vw] min-[800px]:max-[1301px]:pl-[3.8vw] max-[769px]:px-[5vw] max-[769px]:pt-[3vh] max-[769px]:pb-0">
        <div className="flex h-[clamp(50px,6vh,65px)] w-full items-center justify-start pr-[16.67%] pb-[5px] max-[769px]:h-auto max-[769px]:flex-wrap max-[769px]:justify-between max-[769px]:pr-0 max-[769px]:pb-3">
          <Logo className="max-[769px]:order-1 max-[769px]:flex-none" />
          <NavLinks />
        </div>
      </div>
      <div className="flex items-start bg-white py-[2.2vh] max-[769px]:hidden" />
    </header>
  );
}