function Home({ go }) {
  const B = window.B2B_4a97d9;
  const { Eyebrow, StatRow, StatDim, SectionHead, NavCard, EventCard, Button } = B;
  const { Wrap, Section, Band, HeroGrid, Lead } = window;
  return (
    <div>
      {/* HERO */}
      <div style={{ position: 'relative', padding: '64px 0 60px', overflow: 'hidden', borderTop: 'none' }}>
        <HeroGrid />
        <Wrap style={{ position: 'relative' }}>
          <Eyebrow>650+ практиков · 400+ компаний · 30+ регионов</Eyebrow>
          <h1 style={{ fontFamily: 'var(--tb-font-display)', fontWeight: 700, fontSize: 'clamp(40px,7.2vw,104px)', textTransform: 'uppercase', letterSpacing: '-0.005em', lineHeight: 1.02, margin: '22px 0 26px', maxWidth: '16ch' }}>
            Хороший товар <span style={{ position: 'relative', color: 'var(--tb-muted)' }}>не<span style={{ position: 'absolute', left: '-2%', right: '-2%', top: '52%', height: '6px', background: 'var(--tb-signal)', transform: 'rotate(-2deg)' }} /></span> продаёт себя <span style={{ color: 'var(--tb-signal)' }}>сам</span>
          </h1>
          <Lead>Сообщество практиков, которые каждый день продают сложные промышленные продукты — и делятся тем, что реально работает. Без агентств, консультантов и инфоцыган.</Lead>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: '14px', marginTop: '26px' }}>
            <Button variant="signal" onClick={() => go('join')}>Войти в сообщество</Button>
            <Button onClick={() => go('event')}>Ближайшая конференция</Button>
          </div>
          <StatRow style={{ marginTop: '56px' }}>
            <StatDim value="57" label="спикеров-практиков" />
            <StatDim value="400+" label="компаний в базе" />
            <StatDim value="10 000+" label="просмотров записей" />
            <StatDim value="4" label="конференции в 2026" bordered={false} />
          </StatRow>
        </Wrap>
      </div>

      {/* THREE LAYERS */}
      <Section pad="lg">
        <Wrap>
          <SectionHead eyebrow="Как устроено сообщество" title="Три слоя, одна логика" code="[ МОДЕЛЬ · 01→03 ]" />
          <Lead style={{ marginBottom: '40px' }}>Конференции — только один из форматов, а не суть. Суть — постоянная работа между ними: создавай инструмент, тестируй на своём предприятии, делись результатом.</Lead>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: '1px', background: 'var(--tb-line)' }}>
            {[['01', 'Флагманские конференции', 'Четыре межрегиональные встречи в год. Бесплатно. Только практики на сцене — никакой теории «маркетинга вообще».'],
              ['02', 'Активности между встречами', 'Вебинары, разборы кейсов, открытые стримы, Практикум и Закрытый клуб. Жизнь сообщества не заканчивается на конференции.'],
              ['03', 'База знаний', 'Инструменты, чек-листы, конспекты, видеозаписи. Персональная методическая база промышленного маркетолога.']].map(([n, t, d]) => (
              <div key={n} style={{ background: 'var(--tb-paper)', padding: '30px' }}>
                <span style={{ fontFamily: 'var(--tb-font-mono)', fontWeight: 500, color: 'var(--tb-signal)' }}>{n}</span>
                <h3 style={{ fontFamily: 'var(--tb-font-display)', fontWeight: 600, fontSize: 'clamp(22px,2.6vw,34px)', textTransform: 'uppercase', margin: '12px 0 10px' }}>{t}</h3>
                <p style={{ color: 'var(--tb-muted)', fontSize: '15px', margin: 0 }}>{d}</p>
              </div>
            ))}
          </div>
        </Wrap>
      </Section>

      {/* NAV CARDS (dark) */}
      <Section pad="lg" dark>
        <Wrap>
          <SectionHead eyebrow="Куда идти дальше" code="[ РАЗДЕЛЫ ]" onDark />
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: '1px', background: '#33383b' }}>
            <NavCard code="/events" title="Мероприятия" description="Расписание конференций 2026 и записи прошедших встреч." onClick={() => go('events')} />
            <NavCard code="/speakers" title="Спикеры" description="57 практиков: собственники, директора, маркетологи заводов." onClick={() => go('speakers')} />
            <NavCard code="/knowledge" title="База знаний" description="Кейсы, инструменты и видео — берёшь и применяешь завтра." onClick={() => go('knowledge')} />
            <NavCard code="/blog" title="Блог" description="Статьи участников и разборы с мероприятий." onClick={() => go('blog')} />
            <NavCard code="/formats" title="Форматы участия" description="Что бесплатно, что платно и где граница." onClick={() => go('formats')} />
            <NavCard code="/partner" title="Партнёрам" description="Прямой доступ к 400+ производственным компаниям." onClick={() => go('partner')} />
          </div>
        </Wrap>
      </Section>

      {/* NEXT EVENT TEASER */}
      <Section pad="lg">
        <Wrap>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: '40px', flexWrap: 'wrap', gap: '16px' }}>
            <Eyebrow>Ближайшее</Eyebrow>
            <a className="tb-mono" onClick={() => go('events')} 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: '20px' }}>
            {window.TB_CONTENT.events.slice(0, 3).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={() => go(e.hasProgram ? 'event' : 'events')} />
            ))}
          </div>
        </Wrap>
      </Section>

      {/* WHO IS / ISN'T HERE */}
      <Section pad="sm">
        <Wrap>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1px', background: 'var(--tb-line)' }}>
            <div style={{ background: 'var(--tb-card)', padding: '30px' }}>
              <Eyebrow>Кто здесь свой</Eyebrow>
              <p style={{ fontSize: '17px', marginTop: '16px', color: '#2b2f31', marginBottom: 0 }}>Собственники и директора заводов, коммерческие директора, руководители и специалисты по маркетингу и продажам в производственных компаниях. Люди, которые каждый день решают задачи сбыта сложных продуктов.</p>
            </div>
            <div style={{ background: 'var(--tb-ink)', color: 'var(--tb-paper)', padding: '30px' }}>
              <Eyebrow onDark>Кого мы не зовём</Eyebrow>
              <p style={{ fontSize: '17px', marginTop: '16px', color: '#c9c8c2', marginBottom: 0 }}>Агентства, продающие услуги со сцены. Консультантов без своих внедрений. Теоретиков, которые пересказывают западные кейсы. «Инфоцыган». Practitioner-only — это не лозунг, а правило допуска.</p>
            </div>
          </div>
        </Wrap>
      </Section>

      <Band onCta={() => go('join')}>Перестаньте гадать, что сработает</Band>
    </div>
  );
}
window.Home = Home;