// slides-6.jsx — финальные слайды презентации:
// S32 — AI-стек агентства.
// S33 — небольшой постскриптум: и эта презентация тоже сделана AI.
//
// Иконки: реальные SVG-лого (Simple Icons CC0 + favicon Granola + кастомный
// banana-glyph для Nano Banana). Все иконки — белые на тёмном фоне через
// filter: brightness(0) invert(1).
//
// Editable: имена/описания инструментов и пункты «что у нас работает»
// рендерятся как <h4>/<p> с margin:0 — чтобы markEditable() в index.html
// автоматически пометил их data-editable="true".

function S_AITools({ accent }) {
  const A = ACCENT_MAP[accent] || ACCENT_MAP.ember;
  const tools = [
    { logo: 'anthropic',        name: 'Claude Code',  role: 'агент-терминал' },
    { logo: 'claude',           name: 'Claude',       role: 'дизайн · текст' },
    { logo: 'googlegemini',     name: 'Gemini',       role: 'Google · мультимодал' },
    { logo: 'nanobanana',       name: 'Nano Banana',  role: 'image generation' },
    { logo: 'openai',           name: 'ChatGPT-5',    role: 'OpenAI · reasoning' },
    { logo: 'granola',          name: 'Granola',      role: 'voice → транскрипт' },
    { logo: 'visualstudiocode', name: 'VS Code',      role: 'IDE' },
    { logo: 'cursor',           name: 'Cursor',       role: 'AI-первый редактор' },
  ];
  const internals = [
    { t: 'Своя система управления проектами',
      d: 'Кабинет проекта: задачи, бюджеты, лиды в одном окне — клиент видит цифры в реальном времени' },
    { t: 'Авто-отчёты',
      d: 'Я.Метрика, Авито API, Я.Директ → дашборд обновляется ежечасно. Никаких Excel-таблиц по пятницам' },
    { t: 'AI-настройка',
      d: 'Анализ 100+ конкурентов в неделю, AI-генерация объявлений, A/B-тесты заголовков для Я.Директ и РСЯ' },
    { t: 'AI везде',
      d: '100+ автоматизаций в продакшене, 500+ часов работы с нейросетями — +20% к эффективности команды' },
  ];

  const ToolTile = ({ tool, i }) => (
    <div key={i} className="img-dropzone" style={{
      background: 'rgba(255,255,255,0.04)',
      border: '1px solid rgba(255,255,255,0.10)',
      borderRadius: 'var(--r-md)',
      padding: '24px 20px',
      display: 'flex', flexDirection: 'column', gap: 14,
      alignItems: 'flex-start',
      minHeight: 180,
    }}>
      <div style={{
        width: 52, height: 52, borderRadius: 12,
        background: 'rgba(255,255,255,0.08)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        flexShrink: 0,
      }}>
        <img
          src={`assets/logos/${tool.logo}.svg`}
          alt={tool.name}
          style={{
            width: 30, height: 30,
            filter: 'brightness(0) invert(1)',
            opacity: 0.95,
          }}
        />
      </div>
      <h4 style={{ fontFamily: 'var(--ff-display)', fontWeight: 600, fontSize: 20, lineHeight: 1.2, color: '#fff', letterSpacing: '-0.01em', margin: 0 }}>{tool.name}</h4>
      <p style={{ fontFamily: 'var(--ff-mono)', fontSize: 14, color: 'var(--c-fog)', letterSpacing: '0.04em', lineHeight: 1.4, marginTop: 'auto', margin: 0 }}>{tool.role}</p>
    </div>
  );

  return <SlideFrame bg="var(--c-ink)" color="#fff">
    <PageHeader dark num={32} label="AI-стек" />
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 36, minHeight: 0 }}>

      {/* ─── HERO: заголовок + результат >20% (focal point) ─────── */}
      <div style={{ display: 'grid', gridTemplateColumns: '1.35fr 1fr', gap: 40, alignItems: 'stretch' }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 20, justifyContent: 'center' }}>
          <Eyebrow color={A.main}>наш AI-стек</Eyebrow>
          <SectionTitle color="#fff" size={68}>
            Внедрили AI <br/>в&nbsp;<H bg={A.main} fg="#fff">каждый процесс</H>
          </SectionTitle>
        </div>
        <div style={{
          background: A.main,
          borderRadius: 'var(--r-xl)',
          padding: '28px 32px',
          display: 'flex', flexDirection: 'column', gap: 8,
          justifyContent: 'space-between',
          boxShadow: '0 16px 48px rgba(255,90,31,0.30)',
        }}>
          <p style={{ fontFamily: 'var(--ff-mono)', fontSize: 12, letterSpacing: '0.06em', color: 'rgba(255,255,255,0.85)', textTransform: 'uppercase', margin: 0 }}>
            результат для клиентов
          </p>
          <div style={{ fontFamily: 'var(--ff-display)', fontWeight: 800, fontSize: 104, letterSpacing: '-0.04em', lineHeight: 0.85, color: '#fff' }}>
            &gt;20%
          </div>
          <p style={{ fontSize: 15, lineHeight: 1.4, color: '#fff', margin: 0 }}>
            эффективнее работа за&nbsp;счёт AI-инфраструктуры. Это даёт результат и&nbsp;позволяет давать гарантии в&nbsp;договоре.
          </p>
        </div>
      </div>

      {/* ─── TOOLS: 8 инструментов в одну строку ────────────────── */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
          <Eyebrow color={A.main}>инструменты команды</Eyebrow>
          <span style={{ fontFamily: 'var(--ff-mono)', fontSize: 14, color: 'var(--c-fog)', letterSpacing: '0.04em' }}>+&nbsp;ещё 10 в&nbsp;ежедневной работе</span>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(8, 1fr)', gap: 14 }}>
          {tools.map((t, i) => <ToolTile key={i} tool={t} i={i} />)}
        </div>
      </div>

      {/* ─── INTERNALS: что у нас работает (4 в строку) ─────────── */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 18, marginTop: 'auto', paddingTop: 18, borderTop: '1px solid rgba(255,255,255,0.10)' }}>
        <Eyebrow color={A.main}>что у нас работает</Eyebrow>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 28 }}>
          {internals.map((it, i) => (
            <div key={i} style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              <h4 style={{ fontFamily: 'var(--ff-display)', fontWeight: 600, fontSize: 22, lineHeight: 1.2, color: '#fff', letterSpacing: '-0.01em', margin: 0 }}>{it.t}</h4>
              <p style={{ fontFamily: 'var(--ff-mono)', fontSize: 14, color: 'var(--c-fog)', letterSpacing: '0.04em', lineHeight: 1.5, margin: 0 }}>{it.d}</p>
            </div>
          ))}
        </div>
      </div>

    </div>
  </SlideFrame>;
}

// ─────────────── S39: P.S. — эта презентация тоже сделана AI ───────────────
// Лёгкая концовка после серьёзного AI-стека: большой winking robot,
// крупная плашка «P.S.», и одна короткая фраза с подчёркнутым ключевым словом.
// Тон — самоирония, не «мы зазнались». Шрифты и палитра — те же что и на S32.
// Поехал на слот 39, потому что между ним и S32 встали 6 слайдов услуги
// «Автоматизация бизнеса» (slides-7.jsx: история / рынок / оффер / этапы /
// гарантия / CTA).

function S_AIWink({ accent }) {
  const A = ACCENT_MAP[accent] || ACCENT_MAP.ember;

  return <SlideFrame bg="var(--c-ink)" color="#fff">
    <PageHeader dark num={39} label="P.S." />

    <div style={{
      flex: 1,
      display: 'grid',
      gridTemplateColumns: '1fr 1.1fr',
      gap: 80,
      alignItems: 'center',
      minHeight: 0,
    }}>

      {/* Левая колонка — гигантская эмодзи-морда + подвальный шепоток */}
      <div style={{
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        gap: 28,
        position: 'relative',
      }}>
        <img
          src="assets/logos/robot-wink.svg"
          alt=""
          aria-hidden="true"
          style={{
            width: 420,
            height: 'auto',
            filter: 'drop-shadow(0 30px 60px rgba(255,90,31,0.35))',
            userSelect: 'none',
            pointerEvents: 'none',
          }}
        />
        <div style={{
          fontFamily: 'var(--ff-mono)',
          fontSize: 14,
          letterSpacing: '0.16em',
          textTransform: 'uppercase',
          color: 'var(--c-fog)',
          opacity: 0.7,
        }}>
          {/* «не баг — фича» */}
          0 человеко-часов в дизайне · 100% в идеях
        </div>
      </div>

      {/* Правая колонка — крупный текст с самоиронией */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 32 }}>
        <div style={{
          display: 'inline-flex',
          alignItems: 'center',
          gap: 10,
          padding: '8px 16px',
          background: A.main,
          color: '#fff',
          borderRadius: 999,
          fontFamily: 'var(--ff-mono)',
          fontWeight: 600,
          fontSize: 14,
          letterSpacing: '0.12em',
          textTransform: 'uppercase',
          alignSelf: 'flex-start',
          boxShadow: '0 12px 32px rgba(255,90,31,0.35)',
        }}>
          P.S. маленькое признание
        </div>

        <SectionTitle color="#fff" size={84}>
          Кстати, эту презентацию тоже сделал&nbsp;<H bg={A.main} fg="#fff">AI</H>.
        </SectionTitle>

        <p style={{
          fontFamily: 'var(--ff-body)',
          fontSize: 28,
          lineHeight: 1.45,
          color: 'var(--c-fog)',
          margin: 0,
          maxWidth: 720,
        }}>
          От верстки до иконок и текста — всё собрано вместе с нейросетями
          за&nbsp;один вечер. Так и&nbsp;работаем: <strong style={{ color: '#fff', fontWeight: 600 }}>быстро, аккуратно
          и&nbsp;с&nbsp;душой</strong> — просто теперь у&nbsp;души есть GPU.
        </p>

        <div style={{
          display: 'flex',
          gap: 12,
          alignItems: 'center',
          marginTop: 8,
          fontFamily: 'var(--ff-mono)',
          fontSize: 13,
          color: 'var(--c-fog)',
          letterSpacing: '0.04em',
        }}>
          <span style={{
            width: 8, height: 8, borderRadius: '50%',
            background: A.main, boxShadow: `0 0 12px ${'var(--c-ember)'}`,
          }}></span>
          сделано в Claude Code · Claude · Nano Banana
        </div>
      </div>
    </div>
  </SlideFrame>;
}

Object.assign(window, { S_AITools, S_AIWink });