// Sober visuals — hand-crafted CSS/SVG scenes for Direction 1.
// No AI imagery, no stock photos. Each scene illustrates the métier
// in the visual register of the direction: beaucoup d'air, lignes fines,
// teintes minérales, micro-graphie, typographie légendée.

/* ─────────── 1) Atelier hero — cinematic skyline + crates ─────────── */
function VisAtelier({ accent = '#1F3D2E', accentSoft = '#C9CFC2', caption, label }) {
  return (
    <figure style={{ margin: 0, position: 'relative' }}>
      <div style={{
        position: 'relative',
        width: '100%', aspectRatio: '21 / 9',
        background: 'linear-gradient(180deg,#EFEDE6 0%,#E5E2D9 60%,#D9D6CB 100%)',
        overflow: 'hidden',
      }}>
        <svg viewBox="0 0 2100 900" preserveAspectRatio="xMidYMid slice"
             style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
          {/* sun disc */}
          <circle cx="1480" cy="300" r="120" fill={accentSoft} opacity="0.55" />
          {/* far skyline (paper plant silhouette) */}
          <g fill="#BFBCAF" opacity="0.9">
            <rect x="80"  y="430" width="140" height="170" />
            <rect x="240" y="380" width="80"  height="220" />
            <rect x="340" y="460" width="200" height="140" />
            <rect x="560" y="350" width="60"  height="250" />
            <rect x="640" y="420" width="180" height="180" />
            <rect x="840" y="390" width="50"  height="210" />
            <polygon points="900,420 980,360 1060,420 1060,600 900,600" />
            <rect x="1080" y="450" width="240" height="150" />
            <rect x="1340" y="400" width="60"  height="200" />
            <rect x="1420" y="430" width="180" height="170" />
            <rect x="1620" y="370" width="40"  height="230" />
            <rect x="1680" y="450" width="220" height="150" />
            <rect x="1920" y="420" width="160" height="180" />
            {/* chimneys */}
            <rect x="510" y="280" width="14" height="70" />
            <rect x="880" y="240" width="12" height="120" />
            <rect x="1700" y="270" width="14" height="100" />
          </g>
          {/* steam */}
          <g fill="#FAFAF7" opacity="0.7">
            <ellipse cx="888" cy="220" rx="38" ry="14" />
            <ellipse cx="918" cy="200" rx="50" ry="16" />
            <ellipse cx="954" cy="186" rx="64" ry="18" />
          </g>
          {/* ground */}
          <rect x="0" y="600" width="2100" height="300" fill="#3A3A33" />
          {/* foreground crates / bales */}
          <g>
            <rect x="120" y="510" width="180" height="90" fill={accent} />
            <rect x="120" y="510" width="180" height="6" fill="#000" opacity="0.15" />
            <line x1="160" y1="510" x2="160" y2="600" stroke="#000" opacity="0.18" strokeWidth="2" />
            <line x1="210" y1="510" x2="210" y2="600" stroke="#000" opacity="0.18" strokeWidth="2" />
            <line x1="260" y1="510" x2="260" y2="600" stroke="#000" opacity="0.18" strokeWidth="2" />

            <rect x="320" y="540" width="140" height="60" fill="#7A8B6F" />
            <rect x="480" y="500" width="220" height="100" fill="#2A3527" />
            <rect x="480" y="500" width="220" height="6" fill="#fff" opacity="0.06" />
            <line x1="540" y1="500" x2="540" y2="600" stroke="#fff" opacity="0.08" strokeWidth="2" />
            <line x1="600" y1="500" x2="600" y2="600" stroke="#fff" opacity="0.08" strokeWidth="2" />
            <line x1="660" y1="500" x2="660" y2="600" stroke="#fff" opacity="0.08" strokeWidth="2" />

            <rect x="720" y="525" width="160" height="75" fill={accentSoft} />
            <rect x="900" y="495" width="260" height="105" fill={accent} />
            <line x1="970" y1="495" x2="970" y2="600" stroke="#000" opacity="0.18" strokeWidth="2" />
            <line x1="1040" y1="495" x2="1040" y2="600" stroke="#000" opacity="0.18" strokeWidth="2" />
            <line x1="1110" y1="495" x2="1110" y2="600" stroke="#000" opacity="0.18" strokeWidth="2" />

            <rect x="1180" y="540" width="180" height="60" fill="#A89F8A" />
            <rect x="1380" y="510" width="220" height="90" fill="#1A1A1A" />
            <rect x="1620" y="520" width="200" height="80" fill={accentSoft} />
            <rect x="1840" y="500" width="220" height="100" fill={accent} />
          </g>
          {/* tiny operator silhouette */}
          <g fill="#1A1A1A">
            <circle cx="1180" cy="514" r="7" />
            <rect x="1175" y="520" width="10" height="22" />
            <line x1="1170" y1="540" x2="1175" y2="558" stroke="#1A1A1A" strokeWidth="3" />
            <line x1="1190" y1="540" x2="1185" y2="558" stroke="#1A1A1A" strokeWidth="3" />
          </g>
          {/* faint grid overlay */}
          <g stroke="#1A1A1A" opacity="0.05">
            {Array.from({length: 21}).map((_,i)=>(
              <line key={i} x1={i*100} y1="0" x2={i*100} y2="900" />
            ))}
          </g>
        </svg>
        <span style={cap('left')}>{caption || 'Quai du Châtelier · 7h12 — premier camion sur la bascule'}</span>
        <span style={cap('right')}>{label || 'PL · 01'}</span>
      </div>
    </figure>
  );
}

/* ─────────── 2) Portrait — abstract figure, editorial calm ─────────── */
function VisPortrait({ accent = '#1F3D2E', accentSoft = '#C9CFC2', caption, label }) {
  return (
    <figure style={{ margin: 0 }}>
      <div style={{
        position: 'relative',
        width: '100%', aspectRatio: '4 / 5',
        background: '#E8E5DD',
        overflow: 'hidden',
      }}>
        <svg viewBox="0 0 400 500" preserveAspectRatio="xMidYMid slice"
             style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
          {/* studio backdrop */}
          <rect x="0" y="0" width="400" height="320" fill="#DEDAD0" />
          <rect x="0" y="320" width="400" height="180" fill="#C9C5B8" />
          <line x1="0" y1="320" x2="400" y2="320" stroke="#1A1A1A" opacity="0.06" />
          {/* shoulders */}
          <path d="M 60 500 Q 120 360 200 360 Q 280 360 340 500 Z" fill="#1A1A1A" />
          {/* collar / lapel */}
          <path d="M 170 360 L 200 410 L 230 360 L 230 500 L 170 500 Z" fill="#0E0E0E" />
          {/* neck */}
          <rect x="186" y="320" width="28" height="50" fill="#C9A98A" />
          {/* head */}
          <ellipse cx="200" cy="280" rx="56" ry="68" fill="#D9BC9C" />
          {/* hair */}
          <path d="M 144 280 Q 144 200 200 196 Q 256 200 256 280 Q 252 240 230 226 Q 200 232 168 230 Q 148 240 144 280 Z" fill="#1A1A1A" />
          {/* subtle shadow */}
          <ellipse cx="222" cy="296" rx="34" ry="48" fill="#000" opacity="0.10" />
          {/* eyes — fine line */}
          <line x1="180" y1="278" x2="192" y2="278" stroke="#1A1A1A" strokeWidth="2" strokeLinecap="round" />
          <line x1="208" y1="278" x2="220" y2="278" stroke="#1A1A1A" strokeWidth="2" strokeLinecap="round" />
          {/* mouth */}
          <line x1="190" y1="316" x2="210" y2="316" stroke="#1A1A1A" strokeWidth="1.5" strokeLinecap="round" opacity="0.7" />
          {/* accent earring */}
          <circle cx="252" cy="294" r="3" fill={accent} />
          {/* registration mark */}
          <g stroke="#1A1A1A" strokeWidth="1" fill="none" opacity="0.35">
            <circle cx="370" cy="30" r="8" />
            <line x1="362" y1="30" x2="378" y2="30" />
            <line x1="370" y1="22" x2="370" y2="38" />
          </g>
        </svg>
        <span style={cap('left')}>{caption || 'D. Aubry · directrice RSE — Maison Hermès'}</span>
        <span style={cap('right')}>{label || 'PL · 02'}</span>
      </div>
    </figure>
  );
}

/* ─────────── 3) Filière diagram — typographic data viz ─────────── */
function VisFiliere({ accent = '#1F3D2E', accentSoft = '#C9CFC2' }) {
  const flux = [
    { l: 'Papier · carton', v: 94, c: accent },
    { l: 'Plastiques',      v: 78, c: '#5C6D4E' },
    { l: 'Verre',           v: 99, c: '#1A1A1A' },
    { l: 'Biodéchets',      v: 100, c: accent },
    { l: 'DEEE',            v: 92, c: '#5C6D4E' },
    { l: 'Bois',            v: 88, c: '#1A1A1A' },
    { l: 'Métaux',          v: 99, c: accent },
    { l: 'Textile',         v: 64, c: '#5C6D4E' },
  ];
  return (
    <div style={{
      borderTop: '1px solid #1A1A1A',
      borderBottom: '1px solid rgba(26,26,26,0.18)',
      padding: '32px 0',
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 28, fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'rgba(26,26,26,0.55)', fontFamily: 'var(--font-mono)' }}>
        <span>FIG. 02 — Taux de valorisation par flux · 2025</span>
        <span>Source : registre interne ETS, audit KPMG</span>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(8, 1fr)', gap: 20 }}>
        {flux.map((f) => (
          <div key={f.l}>
            <div style={{ height: 220, display: 'flex', alignItems: 'flex-end', position: 'relative' }}>
              <div style={{
                width: '100%', height: `${f.v}%`,
                background: f.c,
              }} />
              <div style={{
                position: 'absolute', inset: 0, pointerEvents: 'none',
                backgroundImage: 'repeating-linear-gradient(to top, rgba(26,26,26,0.08) 0 1px, transparent 1px 22px)',
              }} />
            </div>
            <div style={{ marginTop: 12, display: 'flex', alignItems: 'baseline', gap: 6 }}>
              <span style={{ fontFamily: 'var(--font-display)', fontSize: 28, fontWeight: 300, lineHeight: 1 }}>{f.v}</span>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'rgba(26,26,26,0.5)' }}>%</span>
            </div>
            <div style={{ fontSize: 12, color: 'rgba(26,26,26,0.7)', marginTop: 4 }}>{f.l}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

/* ─────────── 4) Carte filières — France minimaliste ─────────── */
function VisCarte({ accent = '#1F3D2E', accentSoft = '#C9CFC2' }) {
  const sites = [
    { x: 195, y: 130, l: 'Norske Skog', s: 'Golbey · papier' },
    { x: 165, y: 200, l: 'Paprec', s: 'Limeil · plastique' },
    { x: 175, y: 165, l: 'Méthazinc', s: 'Bobigny · biodéchets' },
    { x: 220, y: 230, l: 'Verallia', s: 'Châlon · verre' },
    { x: 130, y: 240, l: 'Egger', s: 'Rambervillers · bois' },
    { x: 170, y: 305, l: 'Derichebourg', s: 'Lyon · métaux' },
    { x: 175, y: 175, l: 'ETS', s: 'Gennevilliers · siège', main: true },
  ];
  return (
    <div style={{ position: 'relative', width: '100%', aspectRatio: '4 / 5', background: '#FAFAF7' }}>
      <svg viewBox="0 0 400 500" preserveAspectRatio="xMidYMid meet"
           style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
        {/* France outline — simplified */}
        <path d="M 175 60 L 295 90 L 320 200 L 290 320 L 220 410 L 130 400 L 70 290 L 80 170 Z"
              fill="none" stroke="#1A1A1A" strokeWidth="1.2" opacity="0.45" />
        {/* lines from ETS to sites */}
        {sites.filter(s => !s.main).map((s, i) => (
          <line key={i} x1="175" y1="175" x2={s.x} y2={s.y}
                stroke={accent} strokeWidth="0.8" strokeDasharray="2 3" opacity="0.55" />
        ))}
        {/* site dots + labels */}
        {sites.map((s, i) => (
          <g key={i}>
            <circle cx={s.x} cy={s.y} r={s.main ? 5 : 3} fill={s.main ? accent : '#1A1A1A'} />
            {s.main && <circle cx={s.x} cy={s.y} r="11" fill="none" stroke={accent} strokeWidth="0.8" />}
            <text x={s.x + 9} y={s.y - 4} fontSize="9" fontFamily="var(--font-mono)" fill="#1A1A1A">{s.l}</text>
            <text x={s.x + 9} y={s.y + 7} fontSize="8" fontFamily="var(--font-mono)" fill="#1A1A1A" opacity="0.55">{s.s}</text>
          </g>
        ))}
        {/* compass */}
        <g transform="translate(50,80)" stroke="#1A1A1A" fill="#1A1A1A" opacity="0.7">
          <line x1="0" y1="-12" x2="0" y2="12" strokeWidth="0.8" />
          <polygon points="0,-12 -3,-4 3,-4" />
          <text x="-3" y="-16" fontSize="7" fontFamily="var(--font-mono)" stroke="none">N</text>
        </g>
        {/* scale bar */}
        <g transform="translate(290,440)" fontFamily="var(--font-mono)" fontSize="8">
          <line x1="0" y1="0" x2="60" y2="0" stroke="#1A1A1A" strokeWidth="1" />
          <line x1="0" y1="-3" x2="0" y2="3" stroke="#1A1A1A" strokeWidth="1" />
          <line x1="60" y1="-3" x2="60" y2="3" stroke="#1A1A1A" strokeWidth="1" />
          <text x="0" y="14" fill="#1A1A1A">0</text>
          <text x="50" y="14" fill="#1A1A1A">250 km</text>
        </g>
      </svg>
      <span style={cap('left')}>FIG. 03 — Cartographie des filières partenaires</span>
      <span style={cap('right')}>FR · 2026</span>
    </div>
  );
}

/* ─────────── 5) Atelier still-life — bench with objects ─────────── */
function VisStillLife({ accent = '#1F3D2E', accentSoft = '#C9CFC2', caption, label }) {
  return (
    <figure style={{ margin: 0 }}>
      <div style={{ position: 'relative', width: '100%', aspectRatio: '4 / 3', background: '#EFEDE6', overflow: 'hidden' }}>
        <svg viewBox="0 0 800 600" preserveAspectRatio="xMidYMid slice"
             style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
          {/* wall */}
          <rect x="0" y="0" width="800" height="380" fill="#E5E2D8" />
          {/* table */}
          <rect x="0" y="380" width="800" height="220" fill="#D8D4C8" />
          <line x1="0" y1="380" x2="800" y2="380" stroke="#1A1A1A" opacity="0.15" />

          {/* clipboard with bordereau ICPE */}
          <g transform="translate(60,200) rotate(-3)">
            <rect width="220" height="240" fill="#FAFAF7" stroke="#1A1A1A" strokeWidth="1" />
            <rect x="80" y="-12" width="60" height="24" rx="3" fill="#1A1A1A" />
            <rect x="100" y="-8" width="20" height="6" fill="#888" />
            <line x1="20" y1="40" x2="200" y2="40" stroke="#1A1A1A" strokeWidth="1" />
            <text x="20" y="32" fontSize="10" fontFamily="var(--font-mono)" fill="#1A1A1A">BORDEREAU ICPE — N° 2026/0142</text>
            {[60, 80, 100, 120, 140, 160, 180].map((y, i) => (
              <g key={y}>
                <line x1="20" y1={y} x2="200" y2={y} stroke="#1A1A1A" opacity="0.15" />
                <text x="22" y={y - 4} fontSize="8" fontFamily="var(--font-mono)" fill="#1A1A1A" opacity="0.7">
                  {['Papier · 420 kg','Carton · 180 kg','Plastique · 380 kg','Verre · 95 kg','Biodéchets · 210 kg','Bois · 60 kg','Métal · 25 kg'][i]}
                </text>
                <text x="172" y={y - 4} fontSize="8" fontFamily="var(--font-mono)" fill={accent}>✓</text>
              </g>
            ))}
            <line x1="20" y1="200" x2="200" y2="200" stroke="#1A1A1A" />
            <text x="20" y="218" fontSize="9" fontFamily="var(--font-mono)" fill="#1A1A1A">Total · 1 370 kg</text>
            <text x="20" y="232" fontSize="8" fontFamily="var(--font-mono)" fill={accent}>Détourné · 94 %</text>
          </g>

          {/* mug */}
          <g transform="translate(360,310)">
            <ellipse cx="40" cy="0" rx="40" ry="10" fill="#1A1A1A" opacity="0.15" />
            <path d="M 8 0 L 12 90 Q 12 100 22 100 L 58 100 Q 68 100 68 90 L 72 0 Z" fill="#FAFAF7" stroke="#1A1A1A" />
            <path d="M 70 20 Q 92 22 92 50 Q 92 78 70 80" fill="none" stroke="#1A1A1A" />
            <ellipse cx="40" cy="0" rx="32" ry="6" fill={accent} opacity="0.8" />
          </g>

          {/* sample bag with label */}
          <g transform="translate(490,230)">
            <path d="M 0 30 L 0 200 L 200 200 L 200 30 Q 200 10 180 10 L 20 10 Q 0 10 0 30 Z" fill="#C9CFC2" stroke="#1A1A1A" />
            <line x1="20" y1="10" x2="20" y2="0" stroke="#1A1A1A" />
            <line x1="180" y1="10" x2="180" y2="0" stroke="#1A1A1A" />
            <rect x="40" y="50" width="120" height="60" fill="#FAFAF7" stroke="#1A1A1A" />
            <text x="50" y="68" fontSize="9" fontFamily="var(--font-mono)" fill="#1A1A1A">ÉCH. 042 · PAPIER</text>
            <text x="50" y="82" fontSize="8" fontFamily="var(--font-mono)" fill="#1A1A1A" opacity="0.65">Hermès · Paris 8</text>
            <text x="50" y="96" fontSize="8" fontFamily="var(--font-mono)" fill={accent}>22 jan 2026 — 14h08</text>
          </g>

          {/* pencil */}
          <g transform="translate(330,420) rotate(-12)">
            <rect x="0" y="0" width="200" height="6" fill={accent} />
            <polygon points="200,0 220,3 200,6" fill="#D9BC9C" />
            <polygon points="220,3 226,3 222,6 222,0" fill="#1A1A1A" />
            <rect x="0" y="0" width="20" height="6" fill="#1A1A1A" />
          </g>

          {/* scattered fibres */}
          <g fill="#1A1A1A" opacity="0.45">
            <circle cx="380" cy="500" r="2" />
            <circle cx="420" cy="510" r="1.5" />
            <circle cx="460" cy="495" r="1.8" />
            <circle cx="700" cy="500" r="2" />
          </g>
        </svg>
        <span style={cap('left')}>{caption || 'Banc d\'analyse · échantillon hebdomadaire'}</span>
        <span style={cap('right')}>{label || 'PL · 03'}</span>
      </div>
    </figure>
  );
}

/* ─────────── 6) Truck — calm side elevation ─────────── */
function VisTruck({ accent = '#1F3D2E' }) {
  return (
    <div style={{ position: 'relative', width: '100%', aspectRatio: '21 / 9', background: '#FAFAF7', overflow: 'hidden' }}>
      <svg viewBox="0 0 1200 500" preserveAspectRatio="xMidYMid slice"
           style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
        {/* horizon line */}
        <line x1="0" y1="380" x2="1200" y2="380" stroke="#1A1A1A" opacity="0.15" />
        {/* truck body */}
        <g>
          {/* container */}
          <rect x="180" y="180" width="640" height="200" fill={accent} />
          <rect x="180" y="180" width="640" height="6" fill="#fff" opacity="0.1" />
          {/* ribs */}
          {[260, 340, 420, 500, 580, 660, 740].map(x => (
            <line key={x} x1={x} y1="180" x2={x} y2="380" stroke="#000" opacity="0.18" />
          ))}
          {/* logo plate */}
          <rect x="220" y="220" width="220" height="50" fill="#FAFAF7" />
          <text x="232" y="240" fontSize="11" fontFamily="var(--font-mono)" fill="#1A1A1A">ECO·TRI·SERVICE</text>
          <text x="232" y="256" fontSize="9" fontFamily="var(--font-mono)" fill="#1A1A1A" opacity="0.7">Gennevilliers — depuis 2008</text>
          <line x1="232" y1="262" x2="408" y2="262" stroke="#1A1A1A" />
          {/* cab */}
          <path d="M 820 220 L 820 380 L 1000 380 L 1000 280 L 980 220 Z" fill="#1A1A1A" />
          <rect x="900" y="240" width="80" height="50" fill="#C9CFC2" opacity="0.7" />
          {/* wheels */}
          <circle cx="280" cy="400" r="38" fill="#0E0E0E" />
          <circle cx="280" cy="400" r="14" fill="#FAFAF7" />
          <circle cx="380" cy="400" r="38" fill="#0E0E0E" />
          <circle cx="380" cy="400" r="14" fill="#FAFAF7" />
          <circle cx="700" cy="400" r="38" fill="#0E0E0E" />
          <circle cx="700" cy="400" r="14" fill="#FAFAF7" />
          <circle cx="940" cy="400" r="38" fill="#0E0E0E" />
          <circle cx="940" cy="400" r="14" fill="#FAFAF7" />
          {/* GNV badge */}
          <rect x="460" y="290" width="100" height="60" fill="none" stroke="#FAFAF7" strokeWidth="2" />
          <text x="468" y="318" fontSize="22" fontFamily="var(--font-display)" fontStyle="italic" fill="#FAFAF7">GNV</text>
          <text x="468" y="338" fontSize="8" fontFamily="var(--font-mono)" fill="#FAFAF7" opacity="0.85">Gaz naturel</text>
        </g>
        {/* registration mark */}
        <g stroke="#1A1A1A" strokeWidth="0.8" fill="none" opacity="0.4">
          <circle cx="60" cy="60" r="10" />
          <line x1="48" y1="60" x2="72" y2="60" />
          <line x1="60" y1="48" x2="60" y2="72" />
        </g>
        <text x="80" y="64" fontSize="10" fontFamily="var(--font-mono)" fill="#1A1A1A" opacity="0.7">FIG. 04 — Flotte ETS · véhicule N°007</text>
      </svg>
    </div>
  );
}

/* ─── helpers ─── */
function cap(side) {
  return {
    position: 'absolute',
    [side]: 14,
    [side === 'left' ? 'bottom' : 'top']: 12,
    fontSize: 10,
    letterSpacing: side === 'left' ? '0.06em' : '0.14em',
    textTransform: side === 'left' ? 'none' : 'uppercase',
    color: 'rgba(26,26,26,0.7)',
    fontFamily: 'var(--font-mono)',
    background: 'rgba(250,250,247,0.8)',
    padding: '4px 8px',
    backdropFilter: 'blur(4px)',
  };
}

Object.assign(window, { VisAtelier, VisPortrait, VisFiliere, VisCarte, VisStillLife, VisTruck });