function Formats({ go }) {
  const B = window.B2B_4a97d9;
  const { Eyebrow, TierCard, Note, Button } = B;
  const { Wrap, Section, Lead } = window;
  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 18px', maxWidth: '20ch' }}>Граница проходит по процессу, а не по контенту</h1>
          <Lead>Всё лучшее знание остаётся бесплатным. Платно — не «доступ к контенту», а участие в создании инструментов и поддержка их внедрения в вашей компании.</Lead>
        </Wrap>
      </Section>

      <Section pad="sm">
        <Wrap>
          <Eyebrow>Бесплатно · ядро сообщества</Eyebrow>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: '20px', marginTop: '22px' }}>
            {window.TB_CONTENT.tiers.filter(t => t.variant === 'free').map(t => (
              <TierCard key={t.title} variant="free" kind={t.kind} title={t.title} features={t.features} footer={<Button arrow={false} onClick={() => go(t.buttonTarget)}>{t.buttonLabel}</Button>} />
            ))}
          </div>
        </Wrap>
      </Section>

      <Section pad="sm" dark>
        <Wrap>
          <Eyebrow onDark>Платно · углублённая работа и внедрение</Eyebrow>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1px', background: '#33383b', marginTop: '22px' }}>
            {window.TB_CONTENT.tiers.filter(t => t.variant === 'paid').map(t => (
              <TierCard key={t.title} variant="paid" onDark kind={t.kind} title={t.title} price={t.price} priceNote={t.priceNote} features={t.features} footer={<Button variant="ghost-dark" arrow={false} onClick={() => go(t.buttonTarget)}>{t.buttonLabel}</Button>} />
            ))}
          </div>
          <Note onDark style={{ marginTop: '24px' }}>ПРИНЦИП: Практикум даёт инструмент — клуб поддерживает его применение в реальной компании.</Note>
        </Wrap>
      </Section>
    </div>
  );
}
window.Formats = Formats;
