import Link from "next/link";
import { ROUTES } from "@/lib/routes";
import { Logo } from "./Logo";
import { NavLinks } from "./NavLinks";

const applyButton =
  "items-center justify-center rounded-[4px] border-[1.5px] border-accent bg-transparent font-semibold text-accent transition-all duration-300 hover:bg-accent hover:text-white hover:shadow-[0_4px_14px_rgba(46,94,153,0.25)]";

interface BarHeaderProps {
  /** Highlights a nav link and shows the "Apply now" call-to-action. */
  activeHref?: string;
  showApply?: boolean;
}

/** Full-width white header used by About and Partnership pages. */
export function BarHeader({ activeHref, showApply = false }: BarHeaderProps) {
  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-[2vh] 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 activeHref={activeHref} showApply={showApply} />
        </div>
      </div>

      <div className="flex items-center justify-end bg-white py-[2.2vh] pr-[60px] max-[769px]:hidden">
        {showApply && (
          <Link
            href={ROUTES.membershipBenefits}
            className={`${applyButton} inline-flex px-[26px] py-[10px] text-[0.95rem]`}
          >
            Apply now
          </Link>
        )}
      </div>
    </header>
  );
}