function LogoStrip() {
  // type: 'image' — реальный лого-файл из uploads/logos/
  // type: 'text'  — стилизованный плейсхолдер (пока бренд не дал свой ассет)
  const brands = [
    { type: 'image', name: 'Святой Источник', src: 'uploads/logos/svyatoi-istochnik.webp', h: 44 },
    { type: 'image', name: 'Borjomi',         src: 'uploads/logos/borjomi.webp',          h: 28 },
    { type: 'text',  name: 'Озарение',  style: 'serif' },
    { type: 'text',  name: 'СВЕТЛЯК',   style: 'mono' },
    { type: 'text',  name: 'Парус',     style: 'display' },
    { type: 'text',  name: 'кубометр',  style: 'display' },
    { type: 'text',  name: 'NORDA',     style: 'mono' },
    { type: 'text',  name: 'Финиста',   style: 'serif' },
    { type: 'text',  name: 'Pluton',    style: 'display' },
  ];

  return (
    <section style={{ padding: '8px 0 56px', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)', background: 'var(--bg-soft)' }}>
      <div className="container">
        <div style={{ textAlign: 'center', padding: '36px 0 28px' }}>
          <span style={{
            fontFamily: "'Golos Text', 'Inter', sans-serif",
            fontSize: 14, fontWeight: 500, color: 'var(--muted)',
            letterSpacing: 0,
          }}>Команды по работе с клиентами выбирают Фидли</span>
        </div>
        <div style={{
          display: 'flex', flexWrap: 'wrap',
          alignItems: 'center', justifyContent: 'space-around',
          gap: '24px 32px',
          opacity: 0.85,
        }}>
          {brands.map(b => (
            <div key={b.name} style={{
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              minHeight: 48,
            }}>
              {b.type === 'image' ? (
                <img
                  src={b.src}
                  alt={b.name}
                  loading="lazy"
                  decoding="async"
                  style={{
                    height: b.h, width: 'auto', display: 'block',
                    filter: 'grayscale(1)',
                    opacity: 0.78,
                    transition: 'filter 0.2s, opacity 0.2s',
                  }}
                  onMouseEnter={(e) => { e.currentTarget.style.filter = 'grayscale(0)'; e.currentTarget.style.opacity = '1'; }}
                  onMouseLeave={(e) => { e.currentTarget.style.filter = 'grayscale(1)'; e.currentTarget.style.opacity = '0.78'; }}
                />
              ) : (
                <span
                  className={b.style === 'serif' ? 'serif' : b.style === 'mono' ? 'mono' : 'display'}
                  style={{
                    fontSize: b.style === 'serif' ? 26 : 18,
                    fontWeight: b.style === 'mono' ? 500 : 700,
                    letterSpacing: b.style === 'mono' ? '0.08em' : '-0.02em',
                    color: 'var(--ink-2)',
                  }}
                >{b.name}</span>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.LogoStrip = LogoStrip;