import { useTranslations } from "next-intl";

import { cn } from "@/lib/utils";

/**
 * The Responsible Jewellery Council membership hallmark: the council logotype,
 * the full name, "Certified Member" and the COP / LGM certificate numbers.
 *
 * Built in CSS rather than shipped as a picture. The home page used to state the
 * certification through `public/home/rjc-certified-member.webp`, so the single
 * strongest trust signal on the page — the certificate numbers — lived inside a
 * bitmap: invisible to search engines, unselectable, unreadable at 200% zoom and
 * dependent on an `alt` that had drifted ("Jewelry" for an organisation that
 * spells itself "Jewellery"). Here it is real text, from one `Rjc.*` namespace
 * shared with the sustainability page, so the two can no longer disagree.
 *
 * The hex values are the council's own brand colours (off-white board, council
 * teal) and deliberately sit outside the design tokens: they belong to the
 * hallmark, not to the site.
 */
export default function RjcHallmark({ className }: { className?: string }) {
  const t = useTranslations("Rjc");

  return (
    <div
      className={cn(
        "inline-flex max-w-full items-center gap-6 border border-[#dad6ca] bg-[#eae7df] px-9 py-[30px] float-slow",
        className,
      )}
    >
      {/* The logotype is the name it sits next to, so it is announced once. */}
      <div
        aria-hidden="true"
        className="font-display text-[68px] leading-[.8] tracking-[-0.04em] text-[#2b4a4f]"
      >
        {t("mark")}
      </div>
      <div className="border-l border-[#cfc9ba] pl-[22px] text-left">
        <div className="text-[12px] font-semibold uppercase leading-[1.55] tracking-[0.1em] text-[#5b5f5e]">
          {t("name")}
        </div>
        <div aria-hidden="true" className="my-[10px] h-px bg-[#cfc9ba]" />
        {/* The board colour is the council's, the ink is ours. "Certified
            Member" was `text-brushed-steel` (#8e8e93) at 8.5px and the
            certificate numbers #a9a294 at 8px — 2.6:1 and 2.05:1 on the #eae7df
            board, both far under the 4.5:1 of WCAG 1.4.3, at sizes no zoom
            level rescues. `text-on-surface-variant` (#444748) measures 7.58:1
            there, and `text-micro` (10.5px) is the smallest type the charter
            allows. The wide tracking keeps the stamped, hallmark look. */}
        <div className="text-micro font-semibold uppercase tracking-[0.22em] text-on-surface-variant">
          {t("member")}
        </div>
        <div className="mt-[3px] text-micro tracking-[0.18em] text-on-surface-variant">
          {t("number")}
        </div>
      </div>
    </div>
  );
}
