"use client"

import { useLocale } from "next-intl"

/**
 * Ce que fait le laboratoire, en une planche verticale.
 *
 * La version précédente ne montrait qu'une chaîne : raffiner, prélever,
 * analyser, mettre au marché. Elle passait sous silence trois des quatre
 * missions décrites par la section, dont les analyses réalisées pour des
 * clients extérieurs à la SAR.
 *
 * La figure se lit de haut en bas : en tête le laboratoire et son
 * accréditation, en pied ce qu'il analyse. La première entrée, en rouge et
 * en pointillé, est le service ouvert aux entreprises ; les deux suivantes
 * relèvent du contrôle interne.
 *
 * Figure de manuel : rien ne s'anime, tout se lit d'un regard.
 */

const TRAIT = "#8d9aa5"
const ENCRE = "#374151"
const GRIS_TEXTE = "#6b7785"
const ROUGE = "#E52621"

type Bloc = {
  fr: [string, string[]]
  en: [string, string[]]
  /** Analyse commandée par un tiers, et non par la SAR. */
  externe?: boolean
}

/** Ce qui arrive au laboratoire, dans l'ordre du cycle de production. */
const ENTREES: Bloc[] = [
  {
    fr: ["Entreprises extérieures", ["échantillons soumis", "au laboratoire"]],
    en: ["Outside companies", ["samples submitted", "to the laboratory"]],
    externe: true,
  },
  {
    fr: ["Cargaisons à quai", ["avant tout", "déchargement"]],
    en: ["Cargoes at the berth", ["before any", "unloading"]],
  },
  {
    fr: ["Unités de raffinage", ["prélèvements en", "cours de procédé"]],
    en: ["Refining units", ["samples taken", "during the process"]],
  },
]

// ── Géométrie de la planche ─────────────────────────────────────────────────
const CENTRE = 280
const LARGEUR = 560
/** Les colonnes d'entrée se répartissent la largeur à parts égales : ajouter
 *  ou retirer une entrée ne demande donc aucun réglage de coordonnées. */
const XE = ENTREES.map((_, i) => (LARGEUR * (i + 0.5)) / ENTREES.length)

export default function SchemaControleQualite() {
  const isFr = useLocale() !== "en"
  const t = (fr: string, en: string) => (isFr ? fr : en)

  return (
    <div>
      <svg viewBox="0 8 560 172" className="h-auto w-full min-w-[500px]" role="img"
           aria-label={t(
             "Le laboratoire de la SAR analyse les échantillons soumis par des entreprises extérieures, les cargaisons avant déchargement, ainsi que les prélèvements réalisés en cours de raffinage.",
             "SAR's laboratory analyses samples submitted by outside companies, cargoes before unloading, and samples taken during refining.")}>
        <defs>
          <marker id="pointe-labo-q" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto">
            <path d="M0 0 L10 5 L0 10 Z" fill={TRAIT} />
          </marker>
        </defs>

        {/* ── En tête : le laboratoire ────────────────────────────────────── */}

        {/* Fiole : le métier, dit par l'objet */}
        <g stroke={ROUGE} strokeWidth="1.6" fill="#fff">
          <path d="M272 18 L272 26 L264 40 L296 40 L288 26 L288 18 Z" />
          <line x1="269" y1="18" x2="291" y2="18" />
          <line x1="267" y1="35" x2="293" y2="35" strokeWidth="1" />
        </g>

        <text x={CENTRE} y="58" textAnchor="middle" fontSize="15" fontWeight="800" letterSpacing="0.4" fill={ROUGE}>
          {t("LABORATOIRE", "LABORATORY")}
        </text>

        {/* ── En pied : ce qu'il analyse ──────────────────────────────────── */}
        {/* Une descente unique depuis le laboratoire, puis une barre qui
            distribue vers les trois colonnes. */}
        <line x1={CENTRE} y1="68" x2={CENTRE} y2="104" stroke={TRAIT} strokeWidth="1.7" />
        <line x1={XE[0]} y1="104" x2={XE[XE.length - 1]} y2="104" stroke={TRAIT} strokeWidth="1.5" />


        {ENTREES.map((e, i) => {
          const [titre, lignes] = isFr ? e.fr : e.en
          const cx = XE[i]
          return (
            <g key={titre}>
              {/* Descente de la barre vers l'entrée */}
              <line x1={cx} y1="104" x2={cx} y2="126"
                    stroke={e.externe ? ROUGE : TRAIT} strokeWidth="1.5"
                    strokeDasharray={e.externe ? "5 4" : undefined}
                    markerEnd="url(#pointe-labo-q)" />
              <text x={cx} y="144" textAnchor="middle" fontSize="13" fontWeight="700"
                    fill={e.externe ? ROUGE : ENCRE}>
                {titre}
              </text>
              <text x={cx} y="158" textAnchor="middle" fontSize="10.5" fill={GRIS_TEXTE}>
                {lignes.map((ligne, k) => (
                  <tspan key={ligne} x={cx} dy={k === 0 ? 0 : 12}>{ligne}</tspan>
                ))}
              </text>
            </g>
          )
        })}

      </svg>
    </div>
  )
}