function Speakers({ go }) {
  const B = window.B2B_4a97d9;
  const { Eyebrow, Chip, SpeakerCard, Button } = B;
  const { Wrap, Section, Lead } = window;
  const [filter, setFilter] = React.useState('Все');
  const speakers = window.TB_CONTENT.speakers;
  return (
    <Section pad="lg" first>
      <Wrap>
        <Eyebrow>Спикеры</Eyebrow>
        <h1 style={{ fontFamily: 'var(--tb-font-display)', fontWeight: 600, fontSize: 'clamp(30px,4.4vw,60px)', textTransform: 'uppercase', margin: '16px 0 18px' }}>57 практиков, а не лекторов</h1>
        <Lead>На нашей сцене — собственники заводов, коммерческие директора и маркетологи, которые внедряли то, о чём рассказывают. Фильтр по роли и отрасли.</Lead>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px', margin: '30px 0 36px' }}>
          {['Все', 'Собственники', 'Маркетинг', 'Продажи', 'Производство'].map(c => (
            <Chip key={c} active={filter === c} onClick={() => setFilter(c)}>{c}</Chip>
          ))}
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: '20px' }}>
          {speakers.map(s => (
            <SpeakerCard key={s.name} initials={s.initials} name={s.name} role={s.role} topic={s.topic} />
          ))}
        </div>
        <div style={{ marginTop: '34px' }}><Button onClick={() => go('join')}>Предложить спикера</Button></div>
      </Wrap>
    </Section>
  );
}
window.Speakers = Speakers;