// slides-3.jsx — агентская: слайды 13-18

// ─────────────── 13: СКРИН МЕТРИКА · WOODNEXT (конверсия) ───────────────
function S13_MetrikaConversionScreen({ accent }) {
  return <ScreenshotCaseSlide
    accent={accent} num={13} label="Пруф · Метрика · Woodnext (конверсия)"
    caption="Яндекс.Метрика · Конверсии · отправка формы · woodnext.ru · 04.02 — 03.05.2026"
    side="left"
    src="assets/photos/slide13_img02.jpg"
    metrics={[
      { label: 'конверсия', value: '2,99%', dark: true },
      { label: 'достижения цели', value: '3 635', dark: false },
      { label: 'целевые визиты', value: '1 194', dark: false },
      { label: 'период', value: '04.02 — 03.05.2026', dark: false },
    ]}
  />;
}

// ─────────────── 15: КЕЙС «MOUNTSIMOVERS» ───────────────
function S15_CaseMountSi({ accent }) {
  const A = ACCENT_MAP[accent] || ACCENT_MAP.ember;
  return <SlideFrame bg="var(--c-ink)" color="#fff">
    <PageHeader dark num={14} label="Кейс · Сайт · MountSiMovers" />
    <div style={{ flex: 1, display: 'grid', gridTemplateColumns: '1.15fr 1fr', gap: 64, alignItems: 'center', minHeight: 0 }}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 28 }}>
        <Eyebrow color={A.main}>кейс · сайт + seo</Eyebrow>
        <SectionTitle color="#fff" size={52}>
          Сайт мувинговой компании <H bg={A.main} fg="#fff">«MountSiMovers»</H>, который принёс <H bg={A.main} fg="#fff">400+&nbsp;заявок</H> через поисковую выдачу бесплатно
        </SectionTitle>
        <div style={{ display: 'flex', gap: 10 }}>
          <span style={{ display: 'inline-block', padding: '8px 14px', background: 'rgba(255,255,255,0.08)', border: '1px solid rgba(255,255,255,0.18)', borderRadius: 999, fontFamily: 'var(--ff-mono)', fontSize: 14, letterSpacing: '0.04em', color: 'var(--c-fog)' }}>/ Многостраничный сайт</span>
        </div>
        <div>
          <div style={{ fontFamily: 'var(--ff-display)', fontWeight: 700, fontSize: 22, marginBottom: 10, color: '#fff', textDecoration: 'underline', textUnderlineOffset: '4px', textDecorationColor: A.main }}>Задача:</div>
          <p style={{ fontSize: TYPE_SCALE.body, lineHeight: 1.45, margin: 0, color: 'var(--c-fog)', maxWidth: 720 }}>
            Разработка корпоративного сайта для&nbsp;стартапа, который оказывает помощь при переездах в&nbsp;США.
          </p>
        </div>
        <div style={{ display: 'flex', gap: 24, alignItems: 'center', fontFamily: 'var(--ff-mono)', fontSize: 14, color: 'var(--c-fog)', letterSpacing: '0.04em' }}>
          <span style={{ color: A.main }}>/ срок</span>
          <span>Разработка сайта&nbsp;— 36&nbsp;дней</span>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 6, marginTop: 4 }}>
          <a href="#" style={{ fontSize: TYPE_SCALE.small, color: '#fff', textDecoration: 'underline', textUnderlineOffset: '4px', textDecorationColor: A.main }}>Ссылка на&nbsp;сайт</a>
          <a href="#" style={{ fontSize: TYPE_SCALE.small, color: '#fff', textDecoration: 'underline', textUnderlineOffset: '4px', textDecorationColor: A.main }}>Смотреть отзыв клиента</a>
        </div>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', height: '100%' }}>
        <div className="img-dropzone" style={{ backgroundImage: 'url("assets/photos/slide15_img02.jpg")', backgroundSize: 'cover', backgroundPosition: 'center', borderRadius: 'var(--r-xl)', height: 600, boxShadow: 'var(--sh-lg)' }} />
      </div>
    </div>
  </SlideFrame>;
}

// ─────────────── 16: КЕЙС «БСК МОДУЛЬ» (Я.Директ) ───────────────
function S16_CaseBSK({ accent }) {
  const A = ACCENT_MAP[accent] || ACCENT_MAP.ember;
  return <SlideFrame bg={A.soft}>
    <PageHeader num={15} 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={50}>
          Привлекли <H bg={A.main} fg="#fff">57+&nbsp;заявок</H> за&nbsp;1&nbsp;месяц по&nbsp;<H bg={A.main} fg="#fff">500&nbsp;₽</H> с&nbsp;квалом <H bg={A.main} fg="#fff">от&nbsp;65%</H> для&nbsp;«БСК&nbsp;МОДУЛЬ»
        </SectionTitle>
        <p style={{ fontSize: TYPE_SCALE.body, lineHeight: 1.45, margin: 0, color: 'var(--c-ink-2)', maxWidth: 760 }}>
          Заказчик ранее работал с&nbsp;3+ агентствами, но&nbsp;лиды приходили нецелевые и&nbsp;дорогие&nbsp;— по&nbsp;1500&nbsp;₽. Мы&nbsp;проработали посадочную страницу, провели аудит текущих рекламных кампаний и&nbsp;перезапустили их. Снизили цену лида в&nbsp;<strong>3&nbsp;раза</strong> и&nbsp;увеличили процент квал.&nbsp;заявок.
        </p>
        <a href="https://bsk-modul.ru/" style={{ fontSize: TYPE_SCALE.small, color: A.deep, textDecoration: 'underline', textUnderlineOffset: '4px', marginTop: 4 }}>Сайт компании: bsk-modul.ru</a>
      </div>
      <div style={{ display: 'grid', gridTemplateRows: '1fr 1fr', gap: 24, height: '100%', maxHeight: 760 }}>
        <ImgPlaceholder label="МОДУЛЬНЫЙ ДОМ · ДЕРЕВО" src="assets/photos/slide16_img02.jpg" />
        <ImgPlaceholder label="МОДУЛЬНЫЙ ДОМ · ПАНОРАМА" src="assets/photos/slide16_img03.jpg" />
      </div>
    </div>
  </SlideFrame>;
}

// ─────────────── 17: СКРИН Я.ДИРЕКТ · БСК МОДУЛЬ ───────────────
function S17_DirectBSKScreen({ accent }) {
  return <ScreenshotCaseSlide
    accent={accent} num={16} label="Пруф · Я.Директ · БСК Модуль"
    caption="Яндекс.Директ Про · cont-teh"
    src="assets/photos/slide17_img02.jpg"
    metrics={[
      { label: 'итого/нед', value: '71 000 ₽', dark: true },
      { label: 'расход', value: '64 503 ₽', dark: false },
      { label: 'клики', value: '4 416', dark: false },
      { label: 'конверсии', value: '91', dark: false },
      { label: 'CPA / CPC', value: '709 ₽ / 14,6 ₽', dark: false },
    ]}
  />;
}

// ─────────────── 18: КЕЙС «СОЮЗ ЗАСТРОЙЩИКОВ» (Я.Директ) ───────────────
function S18_CaseSouz({ accent }) {
  const A = ACCENT_MAP[accent] || ACCENT_MAP.ember;
  return <SlideFrame bg="var(--c-paper)">
    <PageHeader num={17} 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">196&nbsp;заявок</H> за&nbsp;1-й&nbsp;месяц по&nbsp;<H bg={A.main} fg="#fff">900&nbsp;₽</H> с&nbsp;квалом <H bg={A.main} fg="#fff">от&nbsp;60%</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;роста компании в&nbsp;<strong>2&nbsp;раза</strong>. Помогли с&nbsp;этой задачей и&nbsp;продолжаем сотрудничество.
        </p>
        <a href="https://souz-zastroi.ru/about" style={{ fontSize: TYPE_SCALE.small, color: A.deep, textDecoration: 'underline', textUnderlineOffset: '4px', marginTop: 4 }}>Сайт компании: souz-zastroi.ru</a>
      </div>
      <div style={{ display: 'grid', gridTemplateRows: '1fr 1fr', gap: 24, height: '100%', maxHeight: 760 }}>
        <ImgPlaceholder label="НОВОСТРОЙКА · ЛЕВАЯ" src="assets/photos/slide18_img02.jpg" />
        <ImgPlaceholder label="НОВОСТРОЙКА · ПРАВАЯ" src="assets/photos/slide18_img03.jpg" />
      </div>
    </div>
  </SlideFrame>;
}

Object.assign(window, {
  S13_MetrikaConversionScreen, S15_CaseMountSi,
  S16_CaseBSK, S17_DirectBSKScreen, S18_CaseSouz,
});