"use client" import { useState, useEffect } from "react" import { motion, useMotionValue, useTransform, animate } from "framer-motion" import { useRevelationInView } from "@/lib/panel-reveal" import { useTranslations, useLocale } from "next-intl" import Image from "next/image" import SectionLabel from "@/components/section-label" type Service = { nameFr: string nameEn: string introFr: string introEn: string itemsFr: string[] itemsEn: string[] } const SERVICES: Service[] = [ { nameFr: "Service inspection", nameEn: "Inspection Department", introFr: "Tuyauteries, colonnes et réservoirs sont soumis en permanence à la pression et à la température. Le service Inspection garantit leur intégrité et leur conformité tout au long de leur exploitation :", introEn: "Piping, columns and vessels are permanently subject to pressure and temperature. The Inspection Department safeguards their integrity and compliance throughout their service life:", itemsFr: [ "Établir les plans d'inspection adaptés aux risques évalués pour chaque équipement", "Contrôler les équipements et leurs accessoires de sécurité, et vérifier leur conformité réglementaire", "Préconiser la nature et les dates des interventions préventives de maintenance ou de remplacement", ], itemsEn: [ "Drawing up inspection plans matched to the assessed risk of each item of equipment", "Inspecting equipment and its safety accessories, and verifying regulatory compliance", "Recommending the nature and timing of preventive maintenance or replacement work", ], }, { nameFr: "Service sûreté", nameEn: "Security Department", introFr: "La raffinerie constitue une infrastructure sensible à l'échelle nationale. Le service Sûreté en assure la protection contre les actes malveillants :", introEn: "The refinery is a facility of national significance. The Security Department ensures its protection against malicious acts:", itemsFr: [ "Assurer la surveillance permanente de l'usine, des postes de chargement et des pipelines", "Gérer les accès à la raffinerie et contrôler les entrées et sorties", "Assurer l'interface avec les forces de défense et de sécurité", ], itemsEn: [ "Maintaining permanent surveillance of the plant, loading stations and pipelines", "Managing access to the refinery and controlling entries and exits", "Acting as the interface with the defence and security forces", ], }, { nameFr: "Service sécurité", nameEn: "Safety Department", introFr: "Les procédés mettent en œuvre chaque jour des produits inflammables. Le service Sécurité assure la protection des personnes et des installations :", introEn: "Refining operations handle flammable products every day. The Safety Department ensures the protection of people and installations:", itemsFr: [ "Évaluer les risques liés aux activités et les maîtriser avec l'ensemble des acteurs", "Analyser chaque incident, même sans conséquence, afin d'en prévenir la répétition", "Conduire les exercices de simulation des situations d'urgence et maintenir la capacité d'intervention", ], itemsEn: [ "Assessing the risks associated with operations and controlling them with all stakeholders", "Analysing every incident, even one without consequence, to prevent any recurrence", "Running emergency simulation exercises and maintaining response capability", ], }, { nameFr: "Service environnement", nameEn: "Environment Department", introFr: "L'activité de raffinage transforme la matière et consomme de l'énergie. Le service Environnement en évalue les impacts, les maîtrise et en rend compte, année après année :", introEn: "Refining transforms matter and consumes energy. The Environment Department assesses its impacts, controls them and reports on them, year after year:", itemsFr: [ "Évaluer les impacts des activités sur l'air, l'eau et les sols", "Surveiller les rejets et vérifier leur conformité aux prescriptions du code de l'environnement", "Assurer la gestion et le tri des déchets, liquides comme solides", ], itemsEn: [ "Assessing the impact of operations on air, water and soil", "Monitoring discharges and verifying their compliance with environmental regulations", "Managing and sorting waste, both liquid and solid", ], }, ] /** L'ordre d'affichage : inspection et sûreté au-dessus de la photo, sécurité et * environnement en dessous. Sûreté et sécurité restent voisines, c'est leur * voisinage qui lève la confusion entre les deux mots. Les index renvoient à * SERVICES, déclaré dans l'ordre du document source. */ const ORDRE = [0, 1, 2, 3] /** Ce que veille chaque service, dans l'ordre de SERVICES. Deux lignes de * lecture suffisent : l'objet, puis ce contre quoi il protège. */ const OBJETS = [ { fr: "L’intégrité des équipements sous pression", en: "The integrity of pressure equipment" }, { fr: "Les installations et les accès, face aux actes malveillants", en: "Installations and access points, against malicious acts" }, { fr: "Les personnes et les opérations, face au risque d’accident", en: "People and operations, against the risk of accident" }, { fr: "L’air, l’eau et les sols, au-delà des limites du site", en: "Air, water and soil, beyond the site boundary" }, ] export default function SecuritySection() { const t = useTranslations("activites") // Les deux referentiels qui engagent cette section : sante et securite au // travail, et management environnemental. Ils sont deja publies sur le site, // rien n'est ajoute au fond, seul l'endroit change. const tCert = useTranslations("certifications") const locale = useLocale() const isEn = locale === "en" const [ref, inView] = useRevelationInView({ triggerOnce: true, threshold: 0.1 }) const [daysWithoutAccident, setDaysWithoutAccident] = useState(3269) // Compteur animé (jours sans accident) const count = useMotionValue(0) const displayedCount = useTransform(count, (v) => Math.round(v).toLocaleString("fr-FR")) useEffect(() => { if (!inView) return const run = () => { count.set(0) animate(count, daysWithoutAccident, { duration: 2.5, ease: [0.16, 1, 0.3, 1] }) } run() const interval = setInterval(run, 10000) return () => clearInterval(interval) }, [inView, daysWithoutAccident]) useEffect(() => { const API_URL = process.env.NEXT_PUBLIC_API_URL || "http://localhost:8000" fetch(`${API_URL}/api/safety/days-without-accident`) .then((res) => (res.ok ? res.json() : Promise.reject())) .then((data: { days_without_accident: number }) => setDaysWithoutAccident(data.days_without_accident)) .catch(() => {}) }, []) /** Un metier, dans une carte au gabarit de celle de la page Fondation : * etiquette pleine en haut a gauche, intitule, texte d'introduction, puis * les missions en entrees a puce rouge separees par des filets. */ const metier = (idx: number) => { const s = SERVICES[idx] const nom = isEn ? s.nameEn.replace(" Department", "") : (() => { const w = s.nameFr.replace("Service ", "") return w.charAt(0).toUpperCase() + w.slice(1) })() return (

{nom}

{isEn ? OBJETS[idx].en : OBJETS[idx].fr}

{isEn ? s.introEn : s.introFr}

) } return ( // flex-1 et marges annulées : dans un panneau d'onglets, la section remplit // la hauteur pour que son titre se cale en haut plutôt que d'être poussé au // milieu par le `my-auto` du panneau. Inerte hors panneau.
{/* La photo a gauche, le compteur a droite. Le nombre ne s'ecrit plus sur l'image : elle doit garder la luminosite des vues de l'etat des lieux, et du blanc sur une photo claire impose des ombres portees qui ne tiennent jamais tout a fait. Les deux blocs ont la meme hauteur, ils se lisent comme un seul bandeau. */}
Sapeur-pompier de la SAR en manœuvre sur un canon à mousse
{displayedCount} {t("security.accidentFreeDays.label")} {/* Ce chiffre ne tient pas seul : il repose sur deux referentiels certifies, que la colonne rappelle sous lui. */}
{["iso45001", "iso14001"].map((cle) => (
{tCert(`${cle}.title`)}
{tCert(`${cle}.subtitle`)}
))}
{/* Les quatre metiers, en colonnes separees par des filets. La marge haute degage le cartouche, qui deborde du bandeau. */} {ORDRE.map(metier)}
) }