import Image from "next/image";
import Link from "next/link";
import { Phone, Mail } from "lucide-react";
import MobileMenu from "./MobileMenu";

export function Logo({ dark = false }: { dark?: boolean }) {
  return (
    <Link href="/" className="inline-block leading-none">
      <Image
        src="/mxerp-logo.png"
        alt="MxERP home"
        width={290}
        height={88}
        className="h-10 w-auto"
        priority={!dark}
      />
      {/* Tagline hidden for now
      <span
        className={`mt-1 block font-mono text-[8px] font-medium tracking-[0.24em] ${
          dark ? "text-footsub" : "text-muted"
        }`}
      >
        BUILD · PRODUCE · GROW
      </span>
      */}
    </Link>
  );
}

export default function Header() {
  return (
    <>
      {/* HEADER STRIP (hidden for now — uncomment to restore the
          sales/support/email contact bar above the header) */}
      {/* <div className="bg-navy text-white">
        <div className="mx-container flex min-h-[34px] flex-wrap items-center gap-1.5 py-1">
          <a
            href="tel:+919818993537"
            aria-label="Call sales: +91-9818993537"
            className="inline-flex items-center justify-center gap-1 rounded-full bg-white/[0.07] py-0.5 pl-0.5 pr-2 text-[11px] font-semibold ring-1 ring-white/10 transition-colors hover:bg-white/[0.14] max-sm:flex-1"
          >
            <span className="grid size-5 shrink-0 place-items-center rounded-full bg-brand" aria-hidden="true">
              <Phone size={10} />
            </span>
            <span className="whitespace-nowrap">+91-9818993537</span>
            <span className="rounded-full bg-accent px-1 py-px font-mono text-[8px] font-bold tracking-[0.1em] text-navy max-sm:hidden">
              SALES
            </span>
          </a>
          <a
            href="tel:+919899745220"
            aria-label="Call support: +91-9899745220"
            className="inline-flex items-center justify-center gap-1 rounded-full bg-white/[0.07] py-0.5 pl-0.5 pr-2 text-[11px] font-semibold ring-1 ring-white/10 transition-colors hover:bg-white/[0.14] max-sm:flex-1"
          >
            <span className="grid size-5 shrink-0 place-items-center rounded-full bg-white/15" aria-hidden="true">
              <Phone size={10} />
            </span>
            <span className="whitespace-nowrap">+91-9899745220</span>
            <span className="rounded-full bg-white/15 px-1 py-px font-mono text-[8px] font-bold tracking-[0.1em] text-white max-sm:hidden">
              SUPPORT
            </span>
          </a>
          <a
            href="mailto:akg@acgil.net"
            className="ml-auto hidden items-center gap-1 rounded-full bg-white/[0.07] py-0.5 pl-0.5 pr-2 text-[11px] font-medium text-white ring-1 ring-white/10 transition-colors hover:bg-white/[0.14] sm:inline-flex"
          >
            <span className="grid size-5 shrink-0 place-items-center rounded-full bg-white/15" aria-hidden="true">
              <Mail size={10} />
            </span>
            akg@acgil.net
          </a>
          <a
            href="mailto:manvi@acgil.net"
            className="hidden items-center gap-1 rounded-full bg-white/[0.07] py-0.5 pl-0.5 pr-2 text-[11px] font-medium text-white ring-1 ring-white/10 transition-colors hover:bg-white/[0.14] sm:inline-flex"
          >
            <span className="grid size-5 shrink-0 place-items-center rounded-full bg-white/15" aria-hidden="true">
              <Mail size={10} />
            </span>
            manvi@acgil.net
          </a>
        </div>
      </div> */}
      <header className="sticky top-0 z-50 border-b border-[#e6eaf2] bg-white">
        <div className="mx-container relative flex h-[72px] items-center gap-9">
          <Logo />
          <MobileMenu />
        </div>
      </header>
    </>
  );
}
