const partnerStyles = {
  intro: {
    fontSize: '0.65rem', letterSpacing: '.22em', textTransform: 'uppercase',
    color: 'var(--gold)', textAlign: 'center', marginBottom: 0,
    maxWidth: 'none', margin: '0 auto',
  },
  row: {
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    flexWrap: 'wrap', gap: '3rem', marginTop: '3rem',
    paddingTop: '3rem', borderTop: '1px solid var(--border)',
  },
  trustRow: { marginTop: '1.5rem', borderTop: 'none', paddingTop: 0 },
  trustLabel: {
    fontSize: '.7rem', letterSpacing: '.14em', textTransform: 'uppercase',
    color: 'var(--fg-muted)',
  },
  logo: {
    height: 56, width: 180,
    objectFit: 'contain', display: 'block',
    filter: 'brightness(0) invert(1)',
    opacity: 0.55,
    transition: 'opacity .3s',
  },
  sep: { width: 4, height: 4, borderRadius: '50%', background: 'var(--border)' },
};

function PartnerLogo({ src, alt }) {
  const [hov, setHov] = React.useState(false);
  return (
    <img src={src} alt={alt}
      onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)}
      style={{ ...partnerStyles.logo, opacity: hov ? 0.85 : 0.55 }} />
  );
}

function PartnersRow() {
  return (
    <>
      <p style={partnerStyles.intro}>Un progetto dalla joint venture di</p>
      <div style={partnerStyles.row}>
        <PartnerLogo src="../../assets/partners/vection.svg" alt="Vection Technologies" />
        <span style={partnerStyles.sep}></span>
        <PartnerLogo src="../../assets/partners/natuzzi.png" alt="Natuzzi" />
      </div>
      <div style={{ ...partnerStyles.row, ...partnerStyles.trustRow }}>
        <span style={partnerStyles.trustLabel}>Hanno fiducia in noi</span>
        <span style={partnerStyles.sep}></span>
        <PartnerLogo src="../../assets/partners/gabetti.png" alt="Gabetti Franchising" />
      </div>
    </>
  );
}

window.PartnersRow = PartnersRow;