// Lighter screens: About, Knowledge, Blog, Partner, Join.

function About({ go }) {
  const B = window.B2B_4a97d9;
  const { Eyebrow, TeamMember, StatDim, Note } = B;
  const { Wrap, Section, Lead } = window;
  const principles = [
    ['·01', 'Community first', 'Конференция — формат, а не суть. Мы строим среду, где каждый одновременно учится и учит.'],
    ['·02', 'Только практики', 'На сцене — те, кто внедрял сам. Агентства, консультанты и теоретики исключены.'],
    ['·03', 'Со-создание ценности', 'Не пассивное слушание. Участник влияет на повестку, приносит кейсы, забирает инструменты.'],
    ['·04', 'Конкретика вместо воды', 'Названные компании, реальные цифры, готовые шаблоны. Правило одной идеи в каждом выступлении.'],
  ];
  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 24px', maxWidth: '20ch' }}>Промышленный маркетинг из интуитивного искусства — в системную практику</h1>
          <Lead>Мы — сообщество практиков, которые создают и тестируют работающие инструменты промышленного маркетинга на реальных предприятиях. Мы против импорта западных кейсов без адаптации и за собственную школу промышленного маркетинга, основанную на опыте российских заводов.</Lead>
        </Wrap>
      </Section>
      <Section pad="sm" dark>
        <Wrap>
          <Eyebrow onDark>Принципы, которые не обсуждаются</Eyebrow>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1px', background: '#33383b', marginTop: '1px' }}>
            {principles.map(([n, h, p]) => (
              <div key={n} style={{ background: 'var(--tb-ink)', padding: '30px' }}>
                <div style={{ fontFamily: 'var(--tb-font-mono)', color: 'var(--tb-signal)', fontSize: '13px', letterSpacing: '0.1em' }}>{n}</div>
                <h4 style={{ fontFamily: 'var(--tb-font-display)', fontSize: '22px', textTransform: 'uppercase', margin: '12px 0 10px', fontWeight: 600 }}>{h}</h4>
                <p style={{ fontSize: '14.5px', color: '#c3c2bc', margin: 0 }}>{p}</p>
              </div>
            ))}
          </div>
        </Wrap>
      </Section>
      <Section pad="lg">
        <Wrap>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: '40px', flexWrap: 'wrap', gap: '16px' }}>
            <Eyebrow>Оргкомитет</Eyebrow>
            <div style={{ fontFamily: 'var(--tb-font-mono)', fontSize: '12px', color: 'var(--tb-muted)', letterSpacing: '0.1em' }}>[ БЮРО «ФАКТУРА» ]</div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: '1px', background: 'var(--tb-line)' }}>
            {window.TB_CONTENT.teamMembers.map(m => (
              <TeamMember key={m.name} initials={m.initials} name={m.name} role={m.role} />
            ))}
          </div>
        </Wrap>
      </Section>
      <Section pad="sm">
        <Wrap>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: '1px', background: 'var(--tb-line)' }}>
            {[['650+', 'участников'], ['400+', 'компаний'], ['30+', 'регионов РФ и РБ'], ['57', 'спикеров']].map(([v, l]) => (
              <div key={l} style={{ background: 'var(--tb-paper)', padding: '30px' }}><StatDim value={v} label={l} bordered={false} /></div>
            ))}
          </div>
        </Wrap>
      </Section>
      <Section pad="lg" dark>
        <Wrap style={{ maxWidth: '840px' }}>
          <Eyebrow onDark>Скоро</Eyebrow>
          <h2 style={{ fontFamily: 'var(--tb-font-display)', fontWeight: 600, fontSize: 'clamp(22px,2.6vw,34px)', textTransform: 'uppercase', margin: '16px 0 14px' }}>Ассоциация промышленного маркетинга России</h2>
          <p style={{ color: '#c3c2bc' }}>На апрельской конференции сообщество делает следующий шаг — от формата встреч к институту. Учредительное объявление Ассоциации — естественный момент собрать практиков в одну структуру. Подробности анонсируем участникам первыми.</p>
          <Note onDark style={{ marginTop: '14px' }}>СТАТУС: подготовка · анонс — Воронеж, 14.04.2026</Note>
        </Wrap>
      </Section>
    </div>
  );
}

function Knowledge({ go }) {
  const B = window.B2B_4a97d9;
  const { Eyebrow, Chip, KnowledgeCard, Note } = B;
  const { Wrap, Section, Lead } = window;
  const [filter, setFilter] = React.useState('Всё');
  const items = window.TB_CONTENT.knowledgeItems;
  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' }}>Карта, а не маршрут</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' }}>
          {items.map(i => <KnowledgeCard key={i.title} kind={i.kind} title={i.title} description={i.description} meta={i.meta} />)}
        </div>
        <Note style={{ marginTop: '32px' }}>ДОСТУП: базовые материалы — открыто · полная база и записи Практикумов — участникам клуба</Note>
      </Wrap>
    </Section>
  );
}

function Blog({ go }) {
  const B = window.B2B_4a97d9;
  const { Eyebrow, PostRow, Button } = B;
  const { Wrap, Section, Lead } = window;
  const posts = window.TB_CONTENT.posts;
  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' }}>Пишут практики</h1>
        <Lead>Статьи участников сообщества и материалы с мероприятий. Без пересказа учебников — только опыт с конкретных предприятий.</Lead>
        <div style={{ marginTop: '36px' }}>
          {posts.map(p => <PostRow key={p.title} date={p.date} title={p.title} author={p.author} tag={p.tag} />)}
        </div>
        <div style={{ marginTop: '34px' }}><Button onClick={() => go('join')}>Предложить статью</Button></div>
      </Wrap>
    </Section>
  );
}

function Partner({ go }) {
  const B = window.B2B_4a97d9;
  const { Eyebrow, StatRow, StatDim, SectionHead, Field, FormGrid, Button, Note } = 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' }}>Прямой доступ к промышленному B2B</h1>
          <Lead>Сообщество объединяет лиц, принимающих решения на производственных предприятиях: собственников, коммерческих и маркетинговых директоров из 400+ компаний. Партнёрство здесь — это доступ к аудитории, которую сложно собрать иначе.</Lead>
          <StatRow style={{ marginTop: '44px' }}>
            <StatDim value="650+" label="участников офлайн" />
            <StatDim value="400+" label="компаний" />
            <StatDim value="30+" label="регионов" />
            <StatDim value="10к+" label="просмотров записей" bordered={false} />
          </StatRow>
        </Wrap>
      </Section>
      <Section pad="sm">
        <Wrap>
          <SectionHead eyebrow="Форматы партнёрства" code="[ ПАКЕТЫ ]" />
          <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-card)', padding: '30px' }}>
                <span style={{ fontFamily: 'var(--tb-font-mono)', color: 'var(--tb-signal)' }}>{n}</span>
                <h3 style={{ fontFamily: 'var(--tb-font-display)', fontWeight: 600, fontSize: '22px', textTransform: 'uppercase', margin: '12px 0 8px' }}>{t}</h3>
                <p style={{ fontSize: '14.5px', color: 'var(--tb-muted)', margin: 0 }}>{d}</p>
              </div>
            ))}
          </div>
        </Wrap>
      </Section>
      <Section pad="lg" dark>
        <Wrap>
          <Eyebrow onDark>Запрос на партнёрство</Eyebrow>
          <div style={{ marginTop: '30px' }}>
            <FormGrid>
              <Field label="Компания" placeholder="ООО «…»" />
              <Field label="Контактное лицо" placeholder="Имя, должность" />
              <Field label="Email" type="email" placeholder="name@company.ru" />
              <Field label="Телефон" placeholder="+7" />
              <Field label="Интересующий формат" as="select" full options={['Генеральное партнёрство', 'Экспертное участие', 'Медиапакет', 'Обсудить индивидуально']} />
              <Field label="Комментарий" as="textarea" full placeholder="Коротко о задаче" />
              <div style={{ gridColumn: '1 / -1' }}><Button variant="signal">Отправить запрос</Button></div>
            </FormGrid>
          </div>
          <Note onDark style={{ marginTop: '20px' }}>Координация партнёрств · Наталья Козуб · knm@faktura.su</Note>
        </Wrap>
      </Section>
    </div>
  );
}

function Join({ go }) {
  const B = window.B2B_4a97d9;
  const { Eyebrow, Field, FormGrid, Button } = B;
  const { Wrap, Section, HeroGrid, Lead } = window;
  return (
    <div>
      <div style={{ position: 'relative', padding: '64px 0 40px', overflow: 'hidden' }}>
        <HeroGrid />
        <Wrap style={{ position: 'relative' }}>
          <Eyebrow>Присоединиться</Eyebrow>
          <h1 style={{ fontFamily: 'var(--tb-font-display)', fontWeight: 700, fontSize: 'clamp(38px,6.5vw,88px)', textTransform: 'uppercase', lineHeight: 1.02, margin: '18px 0 22px' }}>Войти в сообщество</h1>
          <Lead>Товарищи, вход бесплатный. Оставьте контакты — и вы получите доступ к базе знаний, анонсы конференций первыми и приглашение в Telegram-чат практиков.</Lead>
        </Wrap>
      </div>
      <Section pad="sm">
        <Wrap>
          <FormGrid>
            <Field label="Имя" placeholder="Как к вам обращаться" />
            <Field label="Email" type="email" placeholder="name@company.ru" />
            <Field label="Компания" placeholder="Название предприятия" />
            <Field label="Роль" as="select" options={['Собственник / директор', 'Коммерческий директор', 'Маркетинг', 'Продажи', 'Производство']} />
            <Field label="Регион" full placeholder="Город" />
            <div style={{ gridColumn: '1 / -1' }}><Button variant="signal">Присоединиться</Button></div>
          </FormGrid>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: '20px', marginTop: '44px' }}>
            {[['База знаний', 'Инструменты и записи в открытом доступе сразу после входа.'],
              ['Анонсы первыми', 'Регистрация на конференции до публичного объявления.'],
              ['Чат практиков', 'Прямой обмен опытом с людьми, решающими те же задачи.']].map(([t, d]) => (
              <div key={t} style={{ background: 'var(--tb-card)', padding: '30px' }}>
                <span style={{ fontFamily: 'var(--tb-font-mono)', color: 'var(--tb-signal)' }}>→</span>
                <h3 style={{ fontFamily: 'var(--tb-font-display)', fontWeight: 600, fontSize: '20px', textTransform: 'uppercase', margin: '10px 0 6px' }}>{t}</h3>
                <p style={{ fontSize: '14px', color: 'var(--tb-muted)', margin: 0 }}>{d}</p>
              </div>
            ))}
          </div>
        </Wrap>
      </Section>
    </div>
  );
}

Object.assign(window, { About, Knowledge, Blog, Partner, Join });