"use client";

import Image from "next/image";
import { useLocale } from "@/i18n/LocaleProvider";
import { TranslationKey } from "@/i18n/dictionaries";

// Root-relative anchors ("/#how") so they resolve to the landing sections even from /terms,
// /privacy, or /contact.
const NAV: { href: string; key: TranslationKey }[] = [
  { href: "/#about", key: "nav.about" },
  { href: "/#services", key: "nav.services" },
  { href: "/#how", key: "nav.how" },
];

export function Header() {
  const { t, toggleLocale } = useLocale();

  return (
    <header className="sticky top-0 z-30 border-b border-line/70 bg-surface/80 backdrop-blur">
      <div className="mx-auto flex max-w-6xl items-center justify-between gap-4 px-5 py-3">
        <a href="/" className="flex items-center gap-2.5">
          <Image
            src="/beeb-logo.png"
            alt="BeebBeeb"
            width={38}
            height={38}
            className="rounded-full"
            priority
          />
          <span className="text-lg font-extrabold tracking-tight">{t("brand")}</span>
        </a>

        <nav className="hidden items-center gap-7 md:flex">
          {NAV.map((item) => (
            <a
              key={item.href}
              href={item.href}
              className="text-sm font-medium text-foreground/70 transition hover:text-foreground"
            >
              {t(item.key)}
            </a>
          ))}
        </nav>

        <div className="flex items-center gap-2">
          <button className="btn-ghost" onClick={toggleLocale}>
            {t("lang.toggle")}
          </button>
          <a href="/#download" className="btn-primary">
            {t("nav.download")}
          </a>
        </div>
      </div>
    </header>
  );
}