src/components/TrustedBy.tsx

import React from 'react';

const TrustedBy: React.FC = () => {
  return (
    <div style={{
      marginTop: '0px',
      paddingTop: '100px',
      paddingBottom: '16px',
      borderTop: '1px solid var(--border)',
      width: '100%',
      textAlign: 'center',
      animation: 'fadeInUp 1s ease 0.5s both'
    }}>
      <p style={{
        fontSize: 'clamp(2rem, 4vw, 3rem)',
        fontWeight: 800,
        marginBottom: '40px',
        background: 'var(--gradient-main)',
        WebkitBackgroundClip: 'text',
        WebkitTextFillColor: 'transparent',
        paddingBottom: '0.5rem'
      }}>
        Нам доверяют обучение сотрудников
      </p>
      <div 
        className="trusted-logos"
        style={{
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          gap: '60px',
          opacity: 0.7,
          filter: 'grayscale(100%)',
          transition: 'all 0.3s',
          flexWrap: 'wrap'
        }}
        onMouseEnter={(e) => {
            e.currentTarget.style.filter = 'grayscale(0%)';
            e.currentTarget.style.opacity = '1';
        }}
        onMouseLeave={(e) => {
            e.currentTarget.style.filter = 'grayscale(100%)';
            e.currentTarget.style.opacity = '0.7';
        }}
      >
        <img alt="Soft Line" src="/img/sl.png" style={{ height: '160px', objectFit: 'contain' }} />
        <img alt="Sber" src="/img/sbl.png" style={{ height: '160px', objectFit: 'contain' }} />
        <img alt="Московский Ювелирный Завод" src="/img/muz.png" style={{ height: '160px', objectFit: 'contain' }} />
      </div>
    </div>
  );
};

export default TrustedBy;