import Image from 'next/image';
import Link from 'next/link';
import type { ApexConfig } from '@/lib/apex-config';

/**
 * Shared apex header, styled to match the dealer-template header chrome:
 * black brand bar (dealer .header-row-1) with the AMSOIL wordmark lockup,
 * plus a navy keyline strip echoing the dealer template's navy second row.
 * "Find a Dealer" is THE primary consumer action: the dealer template's
 * .cta-button idiom — filled AMSOIL orange pill with black text
 * (#000 on #F8981D ≈ 9.5:1, AA). "For Dealers" stays a quiet white link
 * with the dealer footer's orange hover.
 */
export function ApexHeader({ apex }: { apex: ApexConfig }) {
  return (
    <header className="sticky top-0 z-50 bg-black text-white">
      <a
        href="#main"
        className="sr-only focus:not-sr-only focus:fixed focus:left-4 focus:top-4 focus:z-[60] focus:rounded-full focus:bg-[#f8981d] focus:px-4 focus:py-2 focus:font-semibold focus:text-black"
      >
        Skip to main content
      </a>
      <div className="mx-auto flex max-w-6xl items-center justify-between gap-3 px-4 py-3 sm:px-6 md:py-4">
        <Link
          href="/"
          className="flex min-w-0 items-center gap-2.5 rounded-md focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-[#f8981d] sm:gap-3"
        >
          <Image
            src="/media/amsoil-logo.png"
            alt="AMSOIL"
            width={120}
            height={32}
            priority
            className="h-7 w-auto shrink-0 sm:h-8"
          />
          <span aria-hidden className="h-6 w-px shrink-0 bg-white/30" />
          <span className="truncate text-sm font-bold tracking-tight text-white sm:text-base">
            {apex.siteName}
          </span>
        </Link>
        <nav
          aria-label="Primary"
          className="flex shrink-0 items-center gap-3 text-sm font-semibold sm:gap-5"
        >
          <Link
            href="https://amsoil.aimclear.com/"
            className="hidden rounded px-1 py-2 text-white transition-colors hover:text-[#f8981d] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#f8981d] sm:inline-flex"
          >
            For Dealers
          </Link>
          <Link
            href="/dealers"
            className="inline-flex items-center justify-center rounded-full bg-[#f8981d] px-4 py-2 font-bold uppercase tracking-wide text-black transition-colors hover:bg-[#d67800] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#f8981d] sm:px-5"
          >
            Find a Dealer
          </Link>
        </nav>
      </div>
      <div aria-hidden className="h-1.5 w-full bg-[#093b66]" />
    </header>
  );
}