import { Container } from "./Container";
import { LockUp } from "./LockUp";
import { MobileBar } from "./MobileBar";
import { SiteNav, type NavItem, type NavModule } from "./SiteNav";
import styles from "./Header.module.css";

import { CONTACT, getModules, getSectors, getT } from "@/lib/content";
import type { Locale } from "@/lib/locales";
import { href, MODULES } from "@/lib/routes";

/**
 * The header, V4: five words.
 *
 * Mark · Nexys · Sulsys · Kontakt · the languages · the phone. The demo button
 * has left the header for the hero and the last chapter, and the phone number
 * is the header's action, because it is what this company's customers do.
 * Module navigation lives inside Nexys — the overview and every product page
 * open with the four-lane index — so there is no global dropdown. Sectors,
 * Clients and Support keep their pages and move to the sheet and the footer.
 *
 * Over a page that opens on navy the header is navy too, and the mark in its
 * corner is the one the opening lands on (see components/Opening); the
 * `data-corner-mark` wrapper is the target it flies to.
 */
export function Header({ locale }: { locale: Locale }) {
  const t = getT(locale);
  const sectors = getSectors(locale);
  const modules = getModules(locale);

  const items: NavItem[] = [
    { key: "nexys", label: t("nav.nexys"), href: href({ key: "nexys" }, locale) },
    { key: "company", label: t("nav.company"), href: href({ key: "company" }, locale) },
    { key: "contact", label: t("cta.contact"), href: href({ key: "contact" }, locale) },
  ];

  // The sheet carries the whole site; the row carries the three words.
  const more: NavItem[] = [
    ...(sectors.length > 0
      ? [{ key: "sectors", label: t("nav.sectors"), href: href({ key: "sectors" }, locale) }]
      : []),
    { key: "clients", label: t("nav.clients"), href: href({ key: "clients" }, locale) },
    { key: "support", label: t("nav.support"), href: href({ key: "support" }, locale) },
  ];

  const navModules: NavModule[] = MODULES.map((module) => {
    const content = modules.find((m) => m.id === module.id);
    return {
      id: module.id,
      code: module.code,
      brandName: module.brandName,
      name: content?.name ?? module.brandName,
      href: href({ key: "module", module: module.id }, locale),
    };
  });

  const demoHref = href({ key: "contact" }, locale);
  const phoneHref = `tel:${CONTACT.phoneE164}`;

  return (
    <>
      <header className={styles.header} data-print="hide">
        <Container>
          <div className={styles.inner}>
            <div className={styles.corner} data-corner-mark>
              <LockUp locale={locale} />
            </div>
            <SiteNav
              locale={locale}
              items={items}
              more={more}
              modules={navModules}
              strings={{
                navAria: t("nav.aria"),
                companyName: t("site.companyName"),
                companyDescriptor: t("site.companyDescriptor"),
                modules: t("nav.modules"),
                menuOpen: t("nav.menuOpen"),
                menuClose: t("nav.menuClose"),
                menuTitle: t("nav.menuTitle"),
                langAria: t("nav.langAria"),
                callAria: t("nav.callAria"),
                facebookHref: CONTACT.facebook,
                facebookAria: t("nav.facebookAria"),
                demo: t("cta.demo"),
                phoneHref,
                phoneDisplay: CONTACT.phoneDisplay,
                demoHref,
              }}
            />
          </div>
        </Container>
      </header>

      <MobileBar
        phoneHref={phoneHref}
        phoneDisplay={CONTACT.phoneDisplay}
        demoHref={demoHref}
        demoLabel={t("cta.demo")}
      />
    </>
  );
}