"use client"

import { useContext } from "react"
import { useLocale } from "next-intl"
import { motion, useReducedMotion } from "framer-motion"
import { useInView } from "react-intersection-observer"
import { ContexteRevelationPanneau } from "@/lib/panel-reveal"

/**
 * « Objectifs visés », les trois horizons de la Fondation.
 *
 * Le tir à l'arc qui occupait cette place illustrait le mot « objectif », pas
 * son contenu, et la page paraissait vide faute de matière.
 *
 * Trois cartes au gabarit du site, une par horizon, avec l'étiquette pleine en
 * haut à gauche et des entrées à puce rouge.
 *
 * Le calendrier de mise en œuvre 2026-2031 relève des données internes de la
 * Fondation : il ne doit pas figurer sur le site.
 */

type Horizon = {
  cle: string
  titreFr: string
  titreEn: string
  pointsFr: string[]
  pointsEn: string[]
}

const HORIZONS: Horizon[] = [
  {
    cle: "court",
    titreFr: "Court terme",
    titreEn: "Short term",
    pointsFr: [
      "Récompenser les meilleurs élèves en sciences, au concours général national et dans les écoles riveraines",
      "Réhabiliter les écoles et les structures de santé locales, et leur offrir des aides matérielles",
      "Distribuer des kits scolaires",
      "Attribuer des bourses aux filles intéressées par les métiers du pétrole",
      "Financer la spécialisation de médecins",
    ],
    pointsEn: [
      "Reward the best science pupils, at the national general competition and in neighbouring schools",
      "Refurbish local schools and health facilities, and provide them with equipment",
      "Distribute school kits",
      "Award grants to girls interested in oil industry careers",
      "Fund the specialisation of doctors",
    ],
  },
  {
    cle: "moyen",
    titreFr: "Moyen terme",
    titreEn: "Medium term",
    pointsFr: [
      "Collaborer avec les ASC des communes riveraines pour créer une barrière végétale et planter des arbres",
      "Reboiser 50 hectares et aménager des haies et des murs verts autour du site de raffinage",
      "Assurer l’assainissement des canaux d’eaux usées et pluviales pour prévenir les inondations",
      "Soutenir les groupements de femmes dans des activités génératrices de revenus",
      "Renforcer les équipements des structures sanitaires",
    ],
    pointsEn: [
      "Work with the sports and cultural associations of neighbouring communes to create a green barrier and plant trees",
      "Reforest 50 hectares and create hedges and green walls around the refining site",
      "Clean up wastewater and stormwater channels to prevent flooding",
      "Support women’s groups in income-generating activities",
      "Strengthen the equipment of health facilities",
    ],
  },
  {
    cle: "long",
    titreFr: "Long terme",
    titreEn: "Long term",
    pointsFr: [
      "Mettre en place des projets générateurs de crédits carbone, échangés sur le marché international et affectés à l’autofinancement de la Fondation : restauration de mangroves, agriculture biologique, gestion des déchets",
      "Créer des unités de recyclage et de transformation de produits locaux",
      "Construire et équiper le centre médico-social de la SAR et un collège SAR, dans la continuité de l’école Ousmane Fall",
    ],
    pointsEn: [
      "Set up carbon credit projects, traded on the international market and used to self-finance the Foundation: mangrove restoration, organic farming, waste management",
      "Create recycling units and local produce processing facilities",
      "Build and equip SAR’s medical and social centre and a SAR secondary school, following on from the Ousmane Fall school",
    ],
  },
]

/** `actif` : à passer lorsque le composant vit dans un panneau d'onglets, pour
 *  déclencher la révélation à l'ouverture plutôt qu'à l'entrée dans le champ. */
export default function ObjectifsSchema({ actif = true }: { actif?: boolean }) {
  const isFr = useLocale() !== "en"
  const reduire = !!useReducedMotion()
  const dansPanneau = useContext(ContexteRevelationPanneau)
  const [ref, vueEcran] = useInView({ triggerOnce: true, threshold: 0.1 })
  // Un panneau inactif est en display:none : l'observateur d'intersection ne
  // s'y déclenche jamais, c'est l'onglet qui commande.
  const visible = dansPanneau ? actif : vueEcran

  const t = (fr: string, en: string) => (isFr ? fr : en)

  return (
    <div ref={ref} className="grid gap-6 sm:gap-8 lg:grid-cols-3">
      {HORIZONS.map((h, i) => (
        <motion.div
          key={h.cle}
          initial={{ opacity: 0, y: 20 }}
          animate={visible ? { opacity: 1, y: 0 } : {}}
          transition={{ duration: reduire ? 0 : 0.5, delay: reduire ? 0 : i * 0.12 }}
          className="relative flex flex-col border-2 border-gray-200 bg-white px-5 pb-5 pt-11 sm:px-6 sm:pb-6 sm:pt-12"
        >
          <p className="absolute left-0 top-0 bg-primary px-4 py-2 text-sm font-bold uppercase tracking-[0.06em] text-white">
            {t(h.titreFr, h.titreEn)}
          </p>

          <ul className="divide-y divide-neutral-100">
            {(isFr ? h.pointsFr : h.pointsEn).map((point) => (
              <li key={point} className="flex items-start gap-2.5 py-2.5">
                <span className="mt-[7px] h-1.5 w-1.5 flex-shrink-0 rounded-full bg-primary/60" aria-hidden />
                <p className="text-[12.5px] leading-snug text-neutral-700">{point}</p>
              </li>
            ))}
          </ul>
        </motion.div>
      ))}
    </div>
  )
}