"use client"

import { useContext, useMemo } from "react"
import { motion, useReducedMotion } from "framer-motion"
import { useTranslations } from 'next-intl'
import SectionLabel from "@/components/section-label"
import { ContexteRevelationPanneau } from "@/lib/panel-reveal"

/* ── Cadence de la frappe ──────────────────────────────────────────────── */

type Props = {
  /** À passer lorsque le composant vit dans un panneau d'onglets : la séquence
   *  ne se joue qu'une fois l'onglet ouvert, et rejoue à chaque retour.
   *  Hors onglets, laisser le défaut. */
  actif?: boolean
}

export default function ValuesSection({ actif = true }: Props) {
  const t = useTranslations('valuesSection')
  const dansPanneau = useContext(ContexteRevelationPanneau)
  const reduire = !!useReducedMotion()

  // Un panneau ferme est en `display:none` : l'apparition s'y jouerait sans
  // spectateur et serait terminee a l'ouverture de l'onglet. C'est donc
  // l'onglet qui la declenche, comme pour les autres sections a panneaux.
  const visible = dansPanneau ? actif : true

  /**
   * Ordre volontaire : les initiales composent l'acrostiche P·R·E·S·I·I ,
   * Performance, Responsabilité, Esprit d'équipe, Sécurité, Intégrité,
   * Innovation. D'où l'initiale détachée en plus grand et en rouge : c'est elle
   * qui porte la lecture, le mot complet vient ensuite.
   * L'acrostiche ne fonctionne qu'en français ; en anglais l'ordre reste le même
   * mais les initiales ne forment plus de mot.
   */
  // Mémoïsé : ce tableau est une dépendance de l'effet de frappe. Reconstruit à
  // chaque rendu, il relancerait le minuteur de la lettre en cours dès que le
  // parent se rafraîchit, et la frappe piétinerait.
  const mots = useMemo(
    () => ["performance", "responsibility", "teamwork", "safety", "integrity", "innovation"]
      .map((k) => t(`${k}.title`)),
    [t],
  )

  /* ── Apparition ───────────────────────────────────────────
     Les six valeurs sont à l'écran dès la première image. Elles se posent
     l'une après l'autre, à 60 ms d'intervalle : un tiers de seconde en tout,
     de quoi souligner la lecture sans jamais la retarder.

     La séquence précédente composait un mot à la fois, lettre à lettre, et
     tournait sans fin : il fallait 10,5 secondes avant de voir les six
     ensemble, et l'acrostiche P·R·E·S·I·I n'apparaissait qu'à ce moment-là. */


  return (
    // flex-1 : dans un panneau d'onglets, la section occupe toute la hauteur
    // disponible. Le titre se cale en haut, la scène se centre dans le reste.
    // Hors panneau, flex-1 est inerte et la mise en page est inchangée.
    <section className="flex flex-1 flex-col pt-8 sm:pt-10 md:pt-12 pb-10 sm:pb-14 md:pb-16 bg-white relative overflow-hidden">
      <div className="px-2 sm:px-4 lg:px-6 relative z-10">
        <div className="max-w-[98%] mx-auto">
          <SectionLabel title={`${t('titlePart1')} ${t('titlePart2')}`} size="small" variant="overline" />
        </div>
      </div>

      <div className="flex flex-1 items-center w-full max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        {/* Les six valeurs en clair pour les lecteurs d'écran : la scène animée
            ne montre qu'un mot à la fois et leur serait inexploitable. */}
        <ul className="sr-only">
          {mots.map((m) => <li key={m}>{m}</li>)}
        </ul>

        {/* ── L'écran ──────────────────────────────────────────────────────
            Cadre sombre en guise de dallage, quatre repères d'angle rouges et
            un fin balayage de lignes horizontales : la scène se lit comme une
            image diffusée, sans recourir au moindre pictogramme.
            Angles droits, comme le reste du portail, pas les coins arrondis
            d'un téléviseur d'époque.
            La hauteur minimale est réservée : le cadre garde sa stature même
            quand la ligne des six se replie sur un écran étroit. */}
        {/* min-w-0 : sans lui, la largeur minimale du contenu empêche cet
            élément flex de se réduire, et le cadre déborde du conteneur. */}
        <div aria-hidden className="relative w-full min-w-0 border-[3px] border-gray-900 bg-white">
          {/* Balayage horizontal, très discret */}
          <div
            className="pointer-events-none absolute inset-0"
            style={{
              background:
                "repeating-linear-gradient(to bottom, rgba(17,24,39,0.035) 0px, rgba(17,24,39,0.035) 1px, transparent 1px, transparent 4px)",
            }}
          />
          {/* Repères d'angle */}
          <span className="pointer-events-none absolute left-2 top-2 h-3.5 w-3.5 border-l-2 border-t-2 border-primary" />
          <span className="pointer-events-none absolute right-2 top-2 h-3.5 w-3.5 border-r-2 border-t-2 border-primary" />
          <span className="pointer-events-none absolute bottom-2 left-2 h-3.5 w-3.5 border-b-2 border-l-2 border-primary" />
          <span className="pointer-events-none absolute bottom-2 right-2 h-3.5 w-3.5 border-b-2 border-r-2 border-primary" />

          <div className="relative flex min-h-[8rem] items-center justify-center px-4 py-8 sm:min-h-[10rem] sm:px-6 lg:min-h-[12rem]">
          <motion.div
            initial={reduire ? false : { opacity: 0 }}
            animate={visible ? { opacity: 1 } : { opacity: 0 }}
            transition={{ duration: reduire ? 0 : 0.3 }}
            // flex-wrap à toutes les tailles : en nowrap, la ligne débordait du
            // cadre sur les écrans larges, où le corps du texte est le plus
            // grand. Elle se replie désormais plutôt que de sortir de l'écran.
            className="flex w-full flex-wrap items-baseline justify-center gap-x-3 sm:gap-x-4 lg:gap-x-5 gap-y-3 text-center"
          >
            {mots.map((m, i) => (
              // Le mot et son point séparateur forment une seule unité : sur les
              // écrans étroits, le point ne peut donc pas se retrouver seul en
              // tête de la ligne suivante.
              <motion.span
                key={m}
                className="inline-flex items-baseline gap-x-3 sm:gap-x-4 lg:gap-x-5"
                initial={reduire ? false : { opacity: 0, y: 8 }}
                animate={visible ? { opacity: 1, y: 0 } : { opacity: 0, y: 8 }}
                transition={{
                  duration: reduire ? 0 : 0.35,
                  delay: reduire ? 0 : i * 0.06,
                  ease: [0.16, 1, 0.3, 1],
                }}
              >
                {/* Le corps plafonne à lg : le palier xl supplémentaire élargissait
                    la ligne d'environ 20 % et la faisait sortir du cadre. */}
                <span className="whitespace-nowrap text-sm sm:text-base lg:text-xl font-extrabold tracking-tight leading-none text-gray-900">
                  <span className="text-primary text-xl sm:text-2xl lg:text-3xl">{[...m][0]}</span>
                  {[...m].slice(1).join("")}
                </span>
                {/* Point séparateur réservé aux écrans où la liste tient sur une
                    seule ligne : replié sur deux lignes, il pendrait en bout de
                    ligne. En dessous, l'espacement sépare à lui seul. */}
                {i < mots.length - 1 && (
                  <span className="hidden lg:block h-2 w-2 flex-shrink-0 rounded-full bg-primary/80" />
                )}
              </motion.span>
            ))}
          </motion.div>
          </div>
        </div>
      </div>
    </section>
  )
}