const logoStripStyles = {
  wrap: {
    padding: '56px 0',
    borderBottom: '1px solid var(--border-subtle)',
    background: 'var(--bg-base)',
  },
  inner: { maxWidth: 1200, margin: '0 auto', padding: '0 32px' },
  label: {
    textAlign: 'center',
    fontFamily: 'var(--font-mono)',
    fontSize: 11, fontWeight: 700,
    color: 'var(--fg-3)', letterSpacing: '0.18em',
    textTransform: 'uppercase',
    marginBottom: 32,
  },
  row: {
    display: 'grid',
    gridTemplateColumns: 'repeat(4, 1fr)',
    gap: 1,
    background: 'var(--border-subtle)',
    border: '1px solid var(--border-subtle)',
    borderRadius: 'var(--radius-xl)',
    overflow: 'hidden',
  },
  cell: {
    background: 'var(--bg-base)',
    height: 104,
    display: 'flex', flexDirection: 'column',
    alignItems: 'center', justifyContent: 'center', gap: 4,
    padding: '0 18px', textAlign: 'center',
    transition: 'all 220ms var(--ease-smooth)',
    filter: 'grayscale(1) opacity(0.75)',
  },
  cellName: {
    fontFamily: 'var(--font-display)',
    fontSize: 19, fontWeight: 700, letterSpacing: '-0.02em',
    color: 'var(--fg-1)', lineHeight: 1.1,
  },
  cellSub: {
    fontFamily: 'var(--font-mono)',
    fontSize: 10, fontWeight: 600, letterSpacing: '0.1em',
    textTransform: 'uppercase',
    color: 'var(--fg-3)',
  },
};

// Clientes / parceiros reais
const logos = [
  { name: 'F.S', sub: 'Construções' },
  { name: 'PSA', sub: 'Consultoria de Imóveis' },
  { name: 'Fórmula', sub: 'Digital' },
  { name: 'E4U', sub: 'Software & Internet' },
];

function LogoStrip() {
  const [hov, setHov] = React.useState(null);
  return (
    <section style={logoStripStyles.wrap}>
      <div style={logoStripStyles.inner}>
        <div style={logoStripStyles.label}>
          empresas que automatizaram com a Black Bear AI
        </div>
        <div data-grid="logos" style={logoStripStyles.row}>
          {logos.map((l, i) => (
            <div key={l.name} style={{
              ...logoStripStyles.cell,
              filter: hov === i ? 'grayscale(0) opacity(1)' : logoStripStyles.cell.filter,
            }}
              onMouseEnter={() => setHov(i)} onMouseLeave={() => setHov(null)}>
              <span style={{
                ...logoStripStyles.cellName,
                color: hov === i ? 'var(--brand-gold)' : 'var(--fg-1)',
              }}>{l.name}</span>
              <span style={logoStripStyles.cellSub}>{l.sub}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { LogoStrip });