// slides-4.jsx — агентская: слайды 19-24

// ─────────────── 19: СКРИН Я.ДИРЕКТ · СОЮЗ ЗАСТРОЙЩИКОВ ───────────────
function S19_DirectSouzScreen({ accent }) {
  return <ScreenshotCaseSlide
    accent={accent} num={18} label="Пруф · Я.Директ · Союз Застройщиков"
    caption="Яндекс.Директ Про · novostroika24"
    side="left"
    src="assets/photos/slide19_img02.jpg"
    metrics={[
      { label: 'итого/нед', value: '75 000 ₽', dark: true },
      { label: 'расход', value: '153 506 ₽', dark: false },
      { label: 'клики', value: '12 263', dark: false },
      { label: 'конверсии', value: '210', dark: false },
      { label: 'CPA', value: '731 ₽', dark: false },
    ]}
  />;
}

// ─────────────── 20: КЕЙС «ГРАНД СТРОЙ» (Я.Директ) ───────────────
function S20_CaseGrand({ accent }) {
  const A = ACCENT_MAP[accent] || ACCENT_MAP.ember;
  return <SlideFrame bg={A.soft}>
    <PageHeader num={19} label="Кейс · Я.Директ · Гранд Строй" />
    <div style={{ flex: 1, display: 'grid', gridTemplateColumns: '1.25fr 1fr', gap: 64, alignItems: 'stretch', minHeight: 0 }}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
        <Eyebrow color={A.deep}>кейс · яндекс.директ + посадочная</Eyebrow>
        <SectionTitle size={48}>
          Привлекли <H bg={A.main} fg="#fff">30+&nbsp;заявок</H> по&nbsp;<H bg={A.main} fg="#fff">1500&nbsp;₽</H> с&nbsp;квалом <H bg={A.main} fg="#fff">от&nbsp;70%</H> для&nbsp;«ГРАНД&nbsp;СТРОЙ»
        </SectionTitle>
        <p style={{ fontSize: TYPE_SCALE.body, lineHeight: 1.45, margin: 0, color: 'var(--c-ink-2)', maxWidth: 760 }}>
          Основатель компании Владислав обратился с&nbsp;запросом на&nbsp;аудит&nbsp;— цена лида достигала <strong>15&nbsp;000&nbsp;₽</strong>, экономика не&nbsp;сводилась. Провели аудит рекламных кампаний, перезапустили их и&nbsp;повысили конверсию посадочной.
        </p>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 6, marginTop: 4 }}>
          <a href="https://гранд-строй.рф/" style={{ fontSize: TYPE_SCALE.small, color: A.deep, textDecoration: 'underline', textUnderlineOffset: '4px' }}>Сайт компании: гранд-строй.рф</a>
          <a href="#" style={{ fontSize: TYPE_SCALE.small, color: A.deep, textDecoration: 'underline', textUnderlineOffset: '4px' }}>Смотреть видео с&nbsp;разбором кейса</a>
        </div>
      </div>
      <div style={{ display: 'grid', gridTemplateRows: '1fr 1fr', gap: 24, height: '100%', maxHeight: 760 }}>
        <ImgPlaceholder label="ЖЁЛТЫЙ ТАУНХАУС · ФАСАД" src="assets/photos/slide20_img02.jpg" />
        <ImgPlaceholder label="СЕРЫЙ ТАУНХАУС · ЗАБОР" src="assets/photos/slide20_img03.jpg" />
      </div>
    </div>
  </SlideFrame>;
}

// ─────────────── 21: СКРИН Я.ДИРЕКТ · ГРАНД СТРОЙ ───────────────
function S21_DirectGrandScreen({ accent }) {
  return <ScreenshotCaseSlide
    accent={accent} num={20} label="Пруф · Я.Директ · Гранд Строй"
    caption="Яндекс.Директ Про · Гранд Строй"
    src="assets/photos/slide21_img02.jpg"
    metrics={[
      { label: 'итого/нед', value: '253 400 ₽', dark: true },
      { label: 'расход', value: '184 465 ₽', dark: false },
      { label: 'клики', value: '7 352', dark: false },
      { label: 'конверсии', value: '61', dark: false },
      { label: 'CPA / CPC', value: '3 024 ₽ / 25,1 ₽', dark: false },
    ]}
  />;
}

// ─────────────── 30: ГАРАНТИИ ───────────────
// Layout под ОДНУ гарантию: hero-вопрос слева растёт в одну импакт-карточку справа.
// Раньше было 2 карточки в правой колонке; убрал вторую → перекомпоновал чтобы
// карточка-одиночка была visual focal point (большая 88px цифра, 36px заголовок,
// 22px lead-описание под разделителем, padding 48×48). Свободное пространство
// внизу заполняется усиленной 100% статистикой.
function S30_Guarantees({ accent }) {
  const A = ACCENT_MAP[accent] || ACCENT_MAP.ember;
  return <SlideFrame bg="var(--c-ink)" color="#fff">
    <PageHeader dark num={29} label="Гарантии" />
    <div style={{ flex: 1, display: 'grid', gridTemplateColumns: '1fr 1.15fr', gap: 80, alignItems: 'stretch', minHeight: 0 }}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 32, justifyContent: 'space-between', height: '100%' }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 32 }}>
          <Eyebrow color={A.main}>почему нам можно верить</Eyebrow>
          <SectionTitle color="#fff">
            Почему можете быть в&nbsp;нас <H bg={A.main} fg="#fff">уверены?</H>
          </SectionTitle>
          <p style={{ fontSize: 22, lineHeight: 1.5, margin: 0, color: 'var(--c-fog)', maxWidth: 520 }}>
            Работаем только в&nbsp;строительной сфере&nbsp;— весь опыт накапливаем в&nbsp;одной нише. Поэтому наши клиенты получают результат. Мы&nbsp;против ситуации, когда маркетологи обучаются за&nbsp;счёт компании.
          </p>
        </div>
        <div style={{ borderTop: '1px solid rgba(255,255,255,0.14)', paddingTop: 32, display: 'flex', alignItems: 'center', gap: 24 }}>
          <div style={{ fontFamily: 'var(--ff-display)', fontWeight: 700, fontSize: 110, lineHeight: 0.9, letterSpacing: '-0.04em', color: A.main, flexShrink: 0 }}>2</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8, minWidth: 0 }}>
            <div style={{ fontFamily: 'var(--ff-display)', fontWeight: 700, fontSize: 32, lineHeight: 1, color: '#fff', letterSpacing: '-0.02em' }}>года.</div>
            <div style={{ fontFamily: 'var(--ff-mono)', fontSize: 14, color: 'var(--c-fog)', letterSpacing: '0.04em', lineHeight: 1.45, maxWidth: 360 }}>Столько в&nbsp;среднем каждый из&nbsp;клиентов с&nbsp;нами работает</div>
          </div>
        </div>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 28, justifyContent: 'center' }}>
        <div style={{ fontFamily: 'var(--ff-display)', fontWeight: 700, fontSize: 30, letterSpacing: '-0.015em', lineHeight: 1.25, color: '#fff' }}>
          Не&nbsp;боимся давать гарантии компаниям:
        </div>

        {/* Импакт-карточка: одна гарантия как focal point */}
        <div style={{
          background: 'rgba(255,255,255,0.04)',
          border: '1px solid rgba(255,255,255,0.1)',
          borderRadius: 'var(--r-xl)',
          padding: '48px 52px',
          display: 'flex', flexDirection: 'column', gap: 32,
          boxShadow: '0 16px 48px rgba(0,0,0,0.20)',
        }}>
          <div style={{ display: 'flex', alignItems: 'flex-start', gap: 32 }}>
            <span style={{ fontFamily: 'var(--ff-display)', fontWeight: 700, fontSize: 88, color: A.main, letterSpacing: '-0.04em', lineHeight: 0.9, flexShrink: 0 }}>01</span>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 18, flex: 1, minWidth: 0, paddingTop: 4 }}>
              <div style={{ fontFamily: 'var(--ff-display)', fontWeight: 600, fontSize: 36, letterSpacing: '-0.02em', lineHeight: 1.15 }}>Гарантия цены лида в&nbsp;договоре</div>
              <span style={{ width: 'fit-content', maxWidth: '100%', padding: '8px 18px', background: A.main, color: '#fff', borderRadius: 999, fontFamily: 'var(--ff-mono)', fontSize: 14, letterSpacing: '0.04em', fontWeight: 500, whiteSpace: 'nowrap' }}>цена лида в договоре</span>
            </div>
          </div>
          <div style={{ borderTop: '1px solid rgba(255,255,255,0.10)', paddingTop: 28, fontSize: 22, lineHeight: 1.5, color: 'var(--c-fog)' }}>
            Прописываем цену лида в&nbsp;договоре. Например, заявка ниже 2&nbsp;000&nbsp;₽. В&nbsp;обратном случае возвращаем деньги по&nbsp;договору.
          </div>
        </div>
      </div>
    </div>
  </SlideFrame>;
}

// ─────────────── 31: КОМАНДА ───────────────
function S31_Team({ accent }) {
  const A = ACCENT_MAP[accent] || ACCENT_MAP.ember;
  // 6 портретов в порядке слева-направо как в team-презентации.
  // Без подписей под кружками.
  const photos = [
    'assets/team/team_01.jpg',
    'assets/team/team_02.jpg',
    'assets/team/team_03.jpg',
    'assets/team/team_04.jpg',
    'assets/team/team_05.jpg',
    'assets/team/team_06.jpg',
  ];
  return <SlideFrame bg="var(--c-paper)">
    <PageHeader num={30} label="Команда" />
    <div style={{ display: 'flex', flexDirection: 'column', gap: 28, marginBottom: 56 }}>
      <SectionTitle>
        Команда <H bg={A.main} fg="#fff">специалистов</H>
      </SectionTitle>
      <p style={{ fontSize: TYPE_SCALE.body, lineHeight: 1.45, margin: 0, color: 'var(--c-graphite)', maxWidth: 880 }}>
        Над проектами работает команда практикующих специалистов с&nbsp;опытом <strong>от&nbsp;6&nbsp;лет</strong>, что помогает достигать результатов. С&nbsp;начинающими специалистами&nbsp;— не&nbsp;работаем.
      </p>
    </div>
    <div style={{ flex: 1, display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 24, alignContent: 'center', minHeight: 0 }}>
      {photos.map((src, i) => (
        <div key={i} className="img-dropzone" style={{
          width: '100%', position: 'relative', paddingBottom: '100%',
          borderRadius: '50%', overflow: 'hidden',
          backgroundColor: 'var(--c-mist)', boxShadow: 'var(--sh-md)',
        }}>
          <img src={src} alt="" style={{
            position: 'absolute', inset: 0,
            width: '100%', height: '100%',
            objectFit: 'cover', objectPosition: 'center top',
            display: 'block',
          }} />
        </div>
      ))}
    </div>
  </SlideFrame>;
}

// ─────────────── 32: ОТЗЫВЫ / ПАРТНЁРСТВА ───────────────
function S32_Reviews({ accent }) {
  const A = ACCENT_MAP[accent] || ACCENT_MAP.ember;
  // 5 видеоотзывов с превью из Telegram. 5 в ряд при холсте 1920px:
  // (1720 - 4*20) / 5 = 328px ширины. Высота 540 → пропорция 0.6 (~9:15, нормально для вертикального видео).
  const reviews = [
    { src: 'assets/reviews/video_22.jpg', name: 'Владислав',    role: 'ГрандСтрой · Красноярск',     url: 'https://t.me/feedback_etalon/22' },
    { src: 'assets/reviews/video_23.jpg', name: 'Дмитрий',      role: 'БСК Модуль · Краснодар',      url: 'https://t.me/feedback_etalon/23' },
    { src: 'assets/reviews/video_20.jpg', name: 'Юлия',         role: 'ХоумПро · Москва',            url: 'https://t.me/feedback_etalon/20' },
    { src: 'assets/reviews/video_16.jpg', name: 'Иван',         role: 'MountSiMovers · США',         url: 'https://t.me/feedback_etalon/16' },
    { src: 'assets/reviews/video_15.jpg', name: 'Мария',        role: 'Modern The Group · Москва',   url: 'https://t.me/feedback_etalon/15' },
  ];
  return <SlideFrame bg={A.soft}>
    <PageHeader num={31} label="Отзывы" />
    {/* Шапка: 2 колонки 1.4fr/1fr. marginBottom 64 — воздух между шапкой и карточками. */}
    <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 80, alignItems: 'end', marginBottom: 64 }}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
        <Eyebrow color={A.deep}>отзывы клиентов · видео</Eyebrow>
        <SectionTitle size={56}>
          Выстраиваем долгосрочные <H bg={A.main} fg="#fff">партнёрства</H> с&nbsp;клиентами
        </SectionTitle>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 16, alignItems: 'flex-start' }}>
        <p style={{ fontSize: 24, lineHeight: 1.4, margin: 0, color: 'var(--c-ink-2)', maxWidth: 560 }}>
          Работа не&nbsp;ограничена рамками договора. Консультируем и&nbsp;помогаем клиентам после запуска.
        </p>
        <a href="https://t.me/feedback_etalon" target="_blank" rel="noopener" style={{ fontSize: 19, color: A.deep, textDecoration: 'underline', textUnderlineOffset: '4px', fontFamily: 'var(--ff-mono)', letterSpacing: '0.04em', fontWeight: 500 }}>смотреть все&nbsp;·&nbsp;@feedback_etalon&nbsp;→</a>
      </div>
    </div>
    {/* Контейнер 5 видео-карточек: 5 × ~324px + 4×20 gap = 1700 ≤ 1720 свободно.
        Высота 540 → пропорция ~9:15, помещается с шапкой ~470 + bottom 88 ≈ 1098. */}
    <div style={{ flex: 1, display: 'flex', justifyContent: 'center', alignItems: 'flex-start', minHeight: 0 }}>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 20, height: 520, width: '100%', maxWidth: 1720 }}>
        {reviews.map((r, i) => (
          <a key={i} href={r.url} target="_blank" rel="noopener"
             style={{ background: 'var(--c-ink)', color: '#fff', borderRadius: 'var(--r-xl)', padding: 0, display: 'block', position: 'relative', overflow: 'hidden', textDecoration: 'none', cursor: 'pointer', height: '100%' }}>
            {/* фото-превью на всю карточку: <img> вместо background-image —
                стабильнее в Chromium PDF-renderer (cover-кадрирование сохраняется). */}
            <img src={r.src} alt="" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center top', display: 'block' }} />
            {/* затемнение снизу для читаемости подписи */}
            <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to bottom, rgba(0,0,0,0) 30%, rgba(0,0,0,0.55) 60%, rgba(0,0,0,0.95) 100%)' }} />
            {/* play-кнопка */}
            <div style={{ position: 'absolute', top: '40%', left: '50%', transform: 'translate(-50%, -50%)', width: 80, height: 80, background: A.main, borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontSize: 28, boxShadow: '0 12px 32px rgba(0,0,0,0.5)' }}>▶</div>
            {/* tag верхний-левый */}
            <div style={{ position: 'absolute', top: 20, left: 20 }}>
              <span style={{ display: 'inline-block', padding: '6px 14px', background: A.main, color: '#fff', borderRadius: 999, fontFamily: 'var(--ff-mono)', fontSize: 14, letterSpacing: '0.04em', fontWeight: 500 }}>/ видео</span>
            </div>
            {/* подпись внизу: имя 22px display, роль 14px mono. Padding 24/20. */}
            <div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, padding: '24px 20px', color: '#fff' }}>
              <div style={{ fontFamily: 'var(--ff-display)', fontWeight: 700, fontSize: 22, letterSpacing: '-0.01em', lineHeight: 1.1, marginBottom: 6 }}>{r.name}</div>
              <div style={{ fontFamily: 'var(--ff-mono)', fontSize: 14, color: 'rgba(255,255,255,0.88)', letterSpacing: '0.04em', lineHeight: 1.3 }}>{r.role}</div>
            </div>
          </a>
        ))}
      </div>
    </div>
  </SlideFrame>;
}

Object.assign(window, {
  S19_DirectSouzScreen, S20_CaseGrand, S21_DirectGrandScreen,
  S30_Guarantees, S31_Team, S32_Reviews,
});
