import Link from "next/link";

import { ButtonLink, ButtonRow } from "./Button";
import { Container } from "./Container";
import { Opening } from "./Opening";
import { SulsysLogo } from "./brand/SulsysMark";
import styles from "./Masthead.module.css";

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

/**
 * The masthead — the opening, and then the hero it leaves behind.
 *
 * At rest this band is the headline, the company's sentence, the two ways to
 * reach it, and the product index: Nexys System and its four parts, each with
 * the documents it counts. The mark is not here; it is in the header, where
 * the opening put it. On a first visit the opening plays over this band (see
 * components/Opening) and at every other time, and with no script, this is
 * simply what the server sends.
 *
 * The stage — lanes, tokens and the display-tier mark — is `hidden` in the
 * markup. Only the client script un-hides it, animates it, and hides it again.
 * It is `aria-hidden` throughout: the company's name is announced by the
 * visually-hidden text that opens <main>, and the mark a screen reader meets
 * is the header's.
 *
 * The lane tokens are document names from the modules' own content — never
 * amounts, never invented — so they localise with the page.
 */
export function Masthead({ locale }: { locale: Locale }) {
  const t = getT(locale);
  const home = getHome(locale);
  const modules = getModules(locale);

  const unitOf = (id: string, index: number) => modules.find((m) => m.id === id)?.unit[index] ?? "";

  /*
   * Two lanes, two documents each. Trade: the register and the delivery note.
   * Hospitality: the table order and the fiscal receipt. The same documents
   * the four lanes below the fold are built from.
   */
  const laneA = [unitOf("materiale", 1), unitOf("financa", 1)].filter(Boolean);
  const laneB = [unitOf("bar-restorant", 1), unitOf("bar-restorant", 2)].filter(Boolean);

  return (
    <div className={styles.band} data-surface="ink" data-opening>
      {/* The paper the opening plays on: the whole band, edge to edge. */}
      <div className={styles.plate} data-opening-plate hidden aria-hidden="true" />
      <Container className={styles.inner}>
        <p className="visually-hidden">{t("site.companyName")}</p>

        {/* ---- The stage: present only while the opening plays ------------ */}
        <div className={styles.stage} data-opening-stage hidden aria-hidden="true">
          <div className={styles.lanes}>
            <div className={`${styles.lane} ${styles.laneA}`} data-opening-lane>
              {laneA.map((name, i) => (
                <span
                  key={name}
                  className={styles.token}
                  data-opening-token
                  data-second={i > 0 ? "" : undefined}
                >
                  {name}
                </span>
              ))}
            </div>
            <div className={`${styles.lane} ${styles.laneB}`} data-opening-lane>
              {laneB.map((name, i) => (
                <span
                  key={name}
                  className={styles.token}
                  data-opening-token
                  data-second={i > 0 ? "" : undefined}
                >
                  {name}
                </span>
              ))}
            </div>
          </div>
          <div className={styles.mark} data-opening-mark>
            <SulsysLogo tier="display" />
          </div>
        </div>

        {/* ---- The hero at rest ------------------------------------------ */}
        <div className={styles.grid}>
          <div className={styles.lede}>
            <h1 className={styles.h1} data-opening-h1>
              {home.h1}
            </h1>
            <p className={styles.sub} data-opening-post>
              {home.sub}
            </p>
            <div className={styles.actions} data-opening-post>
              <ButtonRow>
                <ButtonLink href={href({ key: "contact" }, locale)}>{t("cta.demo")}</ButtonLink>
              </ButtonRow>
              <a href={`tel:${CONTACT.phoneE164}`} className={styles.phone} data-event="call_click">
                {CONTACT.phoneDisplay}
              </a>
            </div>
          </div>

          {/*
            The product index. Where the lanes converged, the system is named,
            and under it the four parts it is made of — each with the documents
            it counts, which is the unit of work that module's own page opens
            on. A reader learns in the first screen that Nexys is a system with
            parts, and what each part is for.
          */}
          <div className={styles.index} data-opening-post>
            <p className={styles.indexLabel}>{home.shelfLabel}</p>
            <Link href={href({ key: "nexys" }, locale)} className={styles.indexName}>
              {t("site.productName")}
              <span className={styles.arrow} aria-hidden="true">
                →
              </span>
            </Link>
            <ul className={styles.family}>
              {MODULES.map((meta) => {
                const content = modules.find((m) => m.id === meta.id);
                return (
                  <li key={meta.id}>
                    <Link
                      href={href({ key: "module", module: meta.id }, locale)}
                      className={styles.familyLink}
                    >
                      <span className={styles.familyCode}>{meta.code}</span>
                      <span className={styles.familyName}>{meta.brandName}</span>
                      <span className={styles.familyUnit}>{(content?.unit ?? []).join(" · ")}</span>
                    </Link>
                  </li>
                );
              })}
            </ul>
          </div>
        </div>
      </Container>
      <Opening />
    </div>
  );
}