"use client" import { useState } from "react" import { motion } from "framer-motion" import { useLocale } from "next-intl" import { useRevelationInView } from "@/lib/panel-reveal" import DistillationColumn from "./distillation-column" /** * Les huit produits de la SAR, colonne de distillation à gauche et usages du * quotidien à droite. * * Le schéma seul ne disait que le nom des coupes : un visiteur qui ne connaît * pas le métier repartait sans savoir à quoi sert le pétrole lampant ni ce * qu'on met dans une pirogue. Chaque produit est donc rendu par ce qu'il permet * de faire, pas par ses caractéristiques techniques. * * Les deux colonnes sont liées : survoler une ligne allume le soutirage * correspondant sur la colonne, et inversement. */ type Usage = { cle: string fr: { nom: string; usage: string } en: { nom: string; usage: string } } // Les clés reprennent celles des soutirages de `distillation-column.tsx`, // du produit le plus léger au plus lourd. const USAGES: Usage[] = [ { cle: "butane", fr: { nom: "Butane", usage: "Le gaz conditionné en bouteilles utilisé principalement pour la cuisson domestique et professionnelle. Il alimente les foyers, les restaurants, les cantines et les commerces.", }, en: { nom: "Butane", usage: "Bottled gas used mainly for domestic and professional cooking. It supplies households, restaurants, canteens and shops.", }, }, { cle: "essenceSuper", fr: { nom: "Essence Super", usage: "Le carburant destiné aux véhicules légers à moteur essence, notamment les voitures particulières, les taxis, les motos et certains groupes électrogènes. C’est le carburant le plus couramment distribué dans les stations-service.", }, en: { nom: "Super gasoline", usage: "The fuel for light petrol-engine vehicles, in particular private cars, taxis, motorbikes and some generators. It is the fuel most widely sold at service stations.", }, }, { cle: "essencePirogue", fr: { nom: "Essence Pirogue", usage: "Une essence spécialement destinée aux moteurs hors-bord des pirogues. Elle soutient les activités de pêche artisanale ainsi que le transport fluvial et lagunaire.", }, en: { nom: "Pirogue gasoline", usage: "A gasoline made specifically for the outboard engines of pirogues. It supports small-scale fishing as well as river and lagoon transport.", }, }, { cle: "kerosene", fr: { nom: "Kérosène", usage: "Le carburant utilisé par les avions. Il alimente les appareils de transport de passagers et de marchandises opérant depuis les aéroports, notamment l’Aéroport International Blaise Diagne de Diass.", }, en: { nom: "Kerosene", usage: "The fuel used by aircraft. It powers the passenger and freight aircraft operating from the country’s airports, in particular Blaise Diagne International Airport in Diass.", }, }, { cle: "lampant", fr: { nom: "Pétrole lampant", usage: "Un combustible utilisé dans les lampes, lanternes et réchauds à pétrole. Il sert à l’éclairage et à la cuisson dans les zones où l’accès à l’électricité ou au gaz reste limité.", }, en: { nom: "Lamp oil", usage: "A fuel used in lamps, lanterns and paraffin stoves. It provides lighting and cooking in areas where access to electricity or gas remains limited.", }, }, { cle: "gasoil", fr: { nom: "Gasoil", usage: "Le carburant des moteurs diesel équipant les camions, bus, minibus, tracteurs agricoles, véhicules utilitaires et groupes électrogènes. Il joue un rôle essentiel dans le transport, l’agriculture et la production d’énergie.", }, en: { nom: "Gas oil", usage: "The fuel for the diesel engines of trucks, buses, minibuses, farm tractors, utility vehicles and generators. It plays an essential part in transport, farming and power generation.", }, }, { cle: "diesel", fr: { nom: "Diesel Marine", usage: "Un carburant diesel plus spécifique destiné aux moteurs de forte puissance utilisés dans les navires, les bateaux de pêche industrielle, certains engins de chantier et équipements industriels.", }, en: { nom: "Marine diesel", usage: "A more specific diesel fuel for the high-power engines of ships, industrial fishing vessels, certain construction machinery and industrial equipment.", }, }, { cle: "fuelOil", fr: { nom: "Fuel Oil", usage: "Un combustible lourd utilisé dans les installations industrielles et les centrales énergétiques. Il alimente les chaudières, fours industriels et moteurs destinés à la production de vapeur, de chaleur ou d’électricité. La SAR fournit notamment la SENELEC en fuel pour ses centrales électriques.", }, en: { nom: "Fuel Oil", usage: "A heavy fuel used in industrial plants and power stations. It feeds the boilers, industrial furnaces and engines that produce steam, heat or electricity. SAR supplies SENELEC in particular with the fuel oil its power stations run on.", }, }, ] export default function ProduitsFinis() { const locale = useLocale() const isFr = locale !== "en" const [actif, setActif] = useState(null) const [ref, inView] = useRevelationInView({ triggerOnce: true, threshold: 0.15 }) return (
{/* La colonne, pilotée depuis la liste */} {/* Carte au gabarit des sections voisines : filet gris, étiquette pleine en haut à gauche comme sur « Maîtrise des risques », entrées « terme puis glose » comme sur « Équipements ». */}

{isFr ? "Leur utilité au quotidien" : "What they are used for"}

    {USAGES.map((u, i) => { const txt = isFr ? u.fr : u.en const allume = actif === u.cle return ( setActif(u.cle)} onMouseLeave={() => setActif(null)} initial={{ opacity: 0, x: 10 }} animate={inView ? { opacity: 1, x: 0 } : {}} transition={{ duration: 0.4, delay: 0.2 + i * 0.06 }} className={`flex items-start gap-2.5 py-2 transition-colors ${allume ? "bg-neutral-50" : ""}`} > {/* Justifie, avec cesure : sur une colonne de cette largeur, la justification seule creuserait des blancs entre les mots longs (« électrogènes », « industrielles »). La cesure automatique s'appuie sur la langue declaree par la page. */}

    {txt.nom} {" : "} {txt.usage}

    ) })}
) }