function Events({ go }) {
  const B = window.B2B_4a97d9;
  const { Eyebrow, Chip, EventCard, SectionHead } = B;
  const { Wrap, Section, Lead } = window;
  const [filter, setFilter] = React.useState('Все');
  return (
    <div>
      <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 20px' }}>Дорожная карта 2026</h1>
          <Lead>Четыре флагманские конференции плюс активности между ними. Все конференции сообщества — бесплатные. Это ДНК, а не акция.</Lead>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px', margin: '32px 0 36px' }}>
            {['Все', 'Предстоящие', 'Прошедшие', 'Онлайн'].map(c => (
              <Chip key={c} active={filter === c} onClick={() => setFilter(c)}>{c}</Chip>
            ))}
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '20px' }}>
            {window.TB_CONTENT.events.map(e => (
              <EventCard key={e.title} date={e.date} badge={e.badge} badgeTone={e.badgeTone || undefined} title={e.title} city={e.city} description={e.description} footLeft={e.footLeft} footRight={e.footRight} onClick={e.hasProgram ? () => go('event') : undefined} />
            ))}
          </div>
        </Wrap>
      </Section>

      <Section pad="sm" dark>
        <Wrap>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: '40px', flexWrap: 'wrap', gap: '16px' }}>
            <Eyebrow onDark>Прошедшие · записи в базе знаний</Eyebrow>
            <a onClick={() => go('knowledge')} style={{ color: 'var(--tb-signal)', cursor: 'pointer', fontFamily: 'var(--tb-font-mono)', fontSize: '13px' }}>Все записи →</a>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: '1px', background: '#33383b' }}>
            {window.TB_CONTENT.recordings.map(r => (
              <div key={r.date} style={{ background: 'var(--tb-ink)', padding: '30px' }}>
                <span style={{ fontFamily: 'var(--tb-font-mono)', fontSize: '12px', color: 'var(--tb-muted-d)' }}>{r.date}</span>
                <h3 style={{ fontFamily: 'var(--tb-font-display)', fontWeight: 600, fontSize: '22px', textTransform: 'uppercase', margin: '10px 0 8px' }}>{r.title}</h3>
                <p style={{ fontSize: '14px', color: '#bdbcb6', margin: 0 }}>{r.description}</p>
              </div>
            ))}
          </div>
        </Wrap>
      </Section>
    </div>
  );
}
window.Events = Events;