{isFr ? u.fr : u.en}

"use client" import { useState, useEffect } from "react" import { motion } from "framer-motion" import { useLocale, useTranslations } from "next-intl" import { ChevronLeft, ChevronRight } from "lucide-react" type Unit = { key: string; x: number; w: number; h: number; cx: number; fr: string; en: string } const GROUND = 405 // 6 unités du schéma de raffinage de la SAR, illustrations produites d'après recherches. const UNITS: Unit[] = [ { key: "prep", x: 250, w: 170, h: 150, cx: 335, fr: "Préparation", en: "Preparation" }, // Libellé au long : « Distillation atmosph. » abrégeait sans nécessité, les // colonnes voisines laissent la place au mot entier. { key: "atm", x: 455, w: 130, h: 240, cx: 520, fr: "Distillation atmosphérique", en: "Atmospheric distillation" }, { key: "vac", x: 620, w: 140, h: 215, cx: 690, fr: "Distillation sous vide", en: "Vacuum distillation" }, { key: "reform", x: 790, w: 160, h: 175, cx: 870, fr: "Reformage catalytique", en: "Catalytic reforming" }, { key: "merox", x: 985, w: 80, h: 125, cx: 1025, fr: "Mérox", en: "Merox" }, { key: "storage", x: 1095, w: 190, h: 120, cx: 1190, fr: "Stockage et produits finis", en: "Storage and finished products" }, ] const N = UNITS.length // ── Illustrations SVG (coordonnées locales, base à y=h) ───────────────────── const SVGS: Record = { prep: ` `, atm: ` `, vac: ` `, reform: ` `, merox: ` `, storage: ` `, } // ── Illustrations annexes (navire + utilisateurs finaux), produites d'après recherches ── const EXTRA_SVGS: Record = { ship: ` `, plane: ` `, /* Voiture de profil, tournee vers la droite comme le camion : elle s'eloigne de la raffinerie. Le sens ne se devine pas, il se lit : long capot et pare-brise incline a l'avant, coffre court a l'arriere, phare jaune devant, feu rouge et pot d'echappement derriere, retroviseur au pied du pare-brise. Repere : le sol est a y=48, les roues sont posees dessus. */ car: ` `, truck: ` `, } export default function RefiningProcess() { const locale = useLocale() const isFr = locale !== "en" const t = useTranslations("activites") const [active, setActive] = useState(0) const goPrev = () => setActive((a) => (a - 1 + N) % N) const goNext = () => setActive((a) => (a + 1) % N) // Sur telephone, les six unites reduites a 330 px de large ne se distinguent // plus. La figure se recentre alors sur l'unite courante : la pagination fait // avancer le texte ET le dessin, qui va chercher l'unite suivante. const [etroit, setEtroit] = useState(false) useEffect(() => { const mq = window.matchMedia("(max-width: 639px)") const sync = () => setEtroit(mq.matches) sync() mq.addEventListener("change", sync) return () => mq.removeEventListener("change", sync) }, []) // Fenetre de largeur constante : le cadre garde le meme rapport d'une unite a // l'autre, rien ne saute au changement. const LARGEUR_TEL = 450 const gaucheTel = // La preparation recoit le brut du navire, qui est a sa gauche : le cadre // se cale au bord plutot que sur le centre de l'unite, sinon le navire se // fait couper. active === 0 ? 0 : // Le stockage debouche sur les utilisateurs finaux, a sa droite. active === N - 1 ? 1090 : Math.max(0, Math.min(1620 - LARGEUR_TEL, UNITS[active].cx - LARGEUR_TEL / 2)) const vue = etroit ? `${gaucheTel} 145 ${LARGEUR_TEL} 335` : "0 145 1620 335" // Sur grand ecran, les unites inactives restent la, attenuees : la chaine se // lit d'un bout a l'autre. Sur telephone, la figure ne montre qu'une unite a // la fois, les voisines sont effacees plutot que rognees par le cadre. const op = (i: number) => (active === i ? 1 : etroit ? 0 : 0.32) const n = active + 1 const title = t(`refiningProcess.steps.step${n}.title`) const desc = t(`refiningProcess.steps.step${n}.description`) return (

{/* ── Légende de l'étape, au-dessus du schéma ─────────────────────── On lit ce que fait l'étape, puis on regarde où elle se situe dans l'usine. Le texte n'est plus tronqué : il est le propos, le dessin l'illustre. */}

{/* Encadre au gabarit des cartes du site : fond blanc et filet gris de meme epaisseur que les cartes de la page Contact. */}

{title}

{desc}

{/* ── Schéma de l'usine, encadré par sa pagination ──────────────── */} {/* Le schema occupe presque toute la largeur du panneau : a 1152 px il restait beaucoup de blanc de chaque cote et le detail des unites se perdait. Les fleches de pagination l'encadrent toujours. */}

{/* viewBox recadré sur le tracé réel : le dessin ne commence qu'à y=151 sur les 480 unités d'origine, soit près d'un tiers de vide en haut de la figure. On garde six unités de marge au-dessus. */}

) }