// Trust bar — logos presse (marquee infini).
// Les logos sont rendus via CSS mask-image depuis les vrais SVG dans assets/press/,
// ce qui permet de forcer une couleur unique (TOKENS.ink) et d'harmoniser les tailles.

function TrustBar({ onDark = false, mobile = false }) {
  const inkColor = onDark ? 'rgba(255,255,255,0.92)' : TOKENS.ink;
  const dividerColor = onDark ? 'rgba(255,255,255,0.12)' : 'rgba(29,29,29,0.1)';
  const bg = onDark ? 'rgba(29,29,29,0.55)' : TOKENS.paper;

  // Hauteur optique de base
  const H = mobile ? 22 : 30;

  // Par logo : ratio largeur/hauteur intrinsèque, et multiplicateur de hauteur optique
  // pour équilibrer le poids visuel (les logos très denses sont légèrement réduits).
  const logos = [
    { id: 'bpi',       src: 'assets/press/bpi.svg',       ratio: 69 / 20,   scale: 0.95 },
    { id: 'echos',     src: 'assets/press/echos.svg',     ratio: 73 / 17,   scale: 1.00 },
    { id: 'cfnews',    src: 'assets/press/cfnews.svg',    ratio: 166 / 32,  scale: 0.92 },
    { id: 'maddyness', src: 'assets/press/maddyness.svg', ratio: 87 / 16,   scale: 0.86 },
    { id: 'frenchweb', src: 'assets/press/frenchweb.svg', ratio: 236 / 45,  scale: 0.82 },
    { id: 'ftj',       src: 'assets/press/ftj.png?v=2',   ratio: 500 / 150, scale: 1.30 },
  ];

  // 3 copies pour continuité visuelle — l'animation translate sur 1/3
  const loop = [...logos, ...logos, ...logos];

  const gap = mobile ? 56 : 88;
  const duration = mobile ? 32 : 44;

  return (
    <div style={{
      width: '100%',
      padding: mobile ? '44px 0 50px' : '60px 0 68px',
      background: bg,
      borderTop: `1px solid ${dividerColor}`,
      position: 'relative',
      overflow: 'hidden',
    }}>
      <div className="trustbar-mask" style={{
        WebkitMaskImage: 'linear-gradient(90deg, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%)',
        maskImage: 'linear-gradient(90deg, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%)',
      }}>
        <div className="trustbar-track" style={{
          display: 'flex',
          alignItems: 'center',
          gap: `${gap}px`,
          width: 'max-content',
          animation: `trustbar-scroll ${duration}s linear infinite`,
        }}>
          {loop.map((l, i) => {
            const h = Math.round(H * l.scale);
            const w = Math.round(h * l.ratio);
            return (
              <span
                key={`${l.id}-${i}`}
                aria-label={l.id}
                style={{
                  flexShrink: 0,
                  display: 'inline-block',
                  width: `${w}px`,
                  height: `${h}px`,
                  backgroundColor: inkColor,
                  WebkitMaskImage: `url("${l.src}")`,
                  maskImage: `url("${l.src}")`,
                  WebkitMaskSize: 'contain',
                  maskSize: 'contain',
                  WebkitMaskRepeat: 'no-repeat',
                  maskRepeat: 'no-repeat',
                  WebkitMaskPosition: 'center',
                  maskPosition: 'center',
                  opacity: onDark ? 0.9 : 0.82,
                }}
              />
            );
          })}
        </div>
      </div>

      <style>{`
        @keyframes trustbar-scroll {
          0%   { transform: translateX(0); }
          100% { transform: translateX(calc(-100% / 3)); }
        }
        .trustbar-track:hover {
          animation-play-state: paused;
        }
      `}</style>
    </div>
  );
}

window.TrustBar = TrustBar;