import Link from "next/link";
import Image from "next/image";

export function SiteHeader() {
  return (
    <>
      <div className="bg-[#231f20] text-sm font-semibold text-stone-100">
        <div className="mx-auto grid max-w-6xl grid-cols-2">
          <a href="tel:+27825685707" className="flex items-center justify-center gap-1.5 py-2.5 hover:text-brand-deep">
            Johnathan Wilkins — 082 568 5707
          </a>
          <a
            href="tel:+27829234565"
            className="flex items-center justify-center gap-1.5 border-l border-white/10 py-2.5 hover:text-brand-deep"
          >
            Ferdi Coetzee — 082 923 4565
          </a>
        </div>
      </div>

      <header className="sticky top-0 z-40 border-b border-stone-200 bg-white">
        <div className="mx-auto flex max-w-6xl items-center justify-between px-6 py-4">
          <Link href="/" aria-label="Richland Properties home">
            <Image src="/richland-logo.jpg" alt="Richland Properties" width={2832} height={368} priority className="h-[52px] w-auto" />
          </Link>
          <nav className="hidden gap-7 text-sm font-semibold text-stone-600 md:flex">
            <Link href="/properties" className="hover:text-brand">
              Listings
            </Link>
            <Link href="/area-guides" className="hover:text-brand">
              Area Guides
            </Link>
            <Link href="/services" className="hover:text-brand">
              Services
            </Link>
            <Link href="/about" className="hover:text-brand">
              About
            </Link>
            <Link href="/contact" className="hover:text-brand">
              Contact
            </Link>
          </nav>
          <Link href="/contact" className="rounded bg-brand px-4 py-2.5 text-sm font-semibold text-white hover:bg-brand-deep">
            Speak to a broker
          </Link>
        </div>
      </header>
    </>
  );
}