// Каталог · Услуги — полный список с готовыми комбо в начале.

// ── Иконки услуг (Lucide-style, контурные) ──────────────────────────
const sIco = (paths, vb = '0 0 24 24') => ({ size = 28, stroke = 1.5 } = {}) => (
  <svg viewBox={vb} width={size} height={size} fill="none"
    stroke="currentColor" strokeWidth={stroke}
    strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">{paths}</svg>
);

// Аудит и исследование
const SIcoSearchDoc = sIco(<>
  <path d="M14 3.5H7a1.5 1.5 0 0 0-1.5 1.5v14A1.5 1.5 0 0 0 7 20.5h10a1.5 1.5 0 0 0 1.5-1.5V8L14 3.5Z" />
  <path d="M14 3.5V8h4.5" />
  <circle cx="10.5" cy="13.5" r="2.5" />
  <path d="m13.5 16.5-1.3-1.3" />
</>);
const SIcoCompare = sIco(<>
  <path d="M4 4v16M20 4v16" />
  <rect x="6.5" y="7.5" width="4" height="9" rx="0.6" />
  <rect x="13.5" y="9.5" width="4" height="7" rx="0.6" />
</>);
const SIcoReelSearch = sIco(<>
  <rect x="3.5" y="3.5" width="11" height="14" rx="1.5" />
  <path d="M7 8l4 2.5L7 13V8z" fill="currentColor" stroke="none" />
  <circle cx="17" cy="17" r="3" />
  <path d="m21 21-1.8-1.8" />
</>);
const SIcoClipboardCheck = sIco(<>
  <rect x="6" y="4.5" width="12" height="16" rx="1.5" />
  <rect x="9" y="3" width="6" height="3" rx="0.6" />
  <path d="m9 13 2.2 2.2L15.5 11" />
</>);

// Брендирование
const SIcoBook = sIco(<>
  <path d="M5 4.5h9a3 3 0 0 1 3 3v12H8a3 3 0 0 1-3-3v-12Z" />
  <path d="M5 16.5a3 3 0 0 1 3-3h9" />
</>);
const SIcoLayout = sIco(<>
  <rect x="3.5" y="3.5" width="17" height="17" rx="1.5" />
  <path d="M3.5 9.5h17M9.5 9.5v11" />
</>);
const SIcoCover = sIco(<>
  <rect x="3.5" y="6.5" width="17" height="11" rx="1.5" />
  <circle cx="8.5" cy="11" r="2" />
  <path d="M3.5 14.5 9 11l4 3 3-2 4.5 3" />
</>);
const SIcoPostDesign = sIco(<>
  <rect x="4.5" y="3.5" width="15" height="17" rx="1.5" />
  <path d="M8 8h8M8 12h8M8 16h5" />
</>);
const SIcoStoryDesign = sIco(<>
  <rect x="7" y="3.5" width="10" height="17" rx="1.5" />
  <path d="M10 8h4M10 11h4M10 14h3" />
</>);

// Контент-пакеты
const SIcoText = sIco(<>
  <path d="M5 6V5.5h14V6" />
  <path d="M12 5.5v13" />
  <path d="M9 18.5h6" />
</>);
const SIcoStack = sIco(<>
  <rect x="6.5" y="3.5" width="13" height="14" rx="1.5" />
  <path d="M4.5 7.5V19a1.5 1.5 0 0 0 1.5 1.5h11" />
</>);
const SIcoCalendar = sIco(<>
  <rect x="3.5" y="5.5" width="17" height="14" rx="1.5" />
  <path d="M3.5 10h17M8 3.5v4M16 3.5v4" />
</>);
const SIcoReel = sIco(<>
  <rect x="5" y="3.5" width="14" height="17" rx="2" />
  <path d="M9 8l6 4-6 4V8z" fill="currentColor" stroke="none" />
</>);
const SIcoStories = sIco(<>
  <rect x="4.5" y="3.5" width="6" height="11" rx="1" />
  <rect x="13.5" y="3.5" width="6" height="11" rx="1" />
  <path d="M5 17.5h14" />
</>);
const SIcoArticle = sIco(<>
  <rect x="4.5" y="4.5" width="15" height="15" rx="1.5" />
  <path d="M7.5 9h9M7.5 12h9M7.5 15h6" />
</>);
const SIcoMail = sIco(<>
  <rect x="3.5" y="5.5" width="17" height="13" rx="1.5" />
  <path d="m4 7 8 6 8-6" />
</>);

// Маркетинговые кампании
const SIcoTarget = sIco(<>
  <circle cx="12" cy="12" r="8" />
  <circle cx="12" cy="12" r="4.5" />
  <circle cx="12" cy="12" r="1.5" fill="currentColor" stroke="none" />
</>);
const SIcoWarmup = sIco(<>
  <path d="M12 3.5c2 3 5 5 5 9a5 5 0 1 1-10 0c0-2 1-3 2.5-4.5C11 6 11.5 5 12 3.5Z" />
</>);
const SIcoMegaphone = sIco(<>
  <path d="M4 10v4l9 3V7l-9 3Z" />
  <path d="M13 8.5c2 0 4 1.5 4 3.5s-2 3.5-4 3.5" />
  <path d="M7 17v3" />
</>);
const SIcoGift = sIco(<>
  <rect x="4" y="9" width="16" height="10" rx="1" />
  <path d="M4 12h16M12 9v10" />
  <path d="M12 9c-1.5-2-4-2-4 0a2 2 0 0 0 4 0Zm0 0c1.5-2 4-2 4 0a2 2 0 0 1-4 0Z" />
</>);
const SIcoShield = sIco(<>
  <path d="M12 3.5 5 6v6c0 4 3 6.5 7 8 4-1.5 7-4 7-8V6l-7-2.5Z" />
  <path d="M9 12l2 2 4-4" />
</>);

// Прочие
const SIcoReport = sIco(<>
  <rect x="4.5" y="4.5" width="15" height="15" rx="1.5" />
  <path d="M8 14.5V11M11.5 14.5V8M15 14.5v-5" />
</>);
const SIcoUsers = sIco(<>
  <circle cx="9" cy="9" r="3.5" />
  <path d="M3 19c0-3.5 3-5 6-5s6 1.5 6 5" />
  <circle cx="17" cy="9" r="2.5" />
  <path d="M15 14c3 0 6 1.5 6 5" />
</>);
const SIcoStar = sIco(<>
  <path d="m12 3.5 2.6 5.6 6.2.6-4.7 4.1 1.4 6L12 16.5l-5.5 3.3 1.4-6L3.2 9.7l6.2-.6L12 3.5Z" />
</>);
const SIcoChat = sIco(<>
  <path d="M4 5.5h16v11H8.5l-4 4v-4H4v-11Z" />
  <path d="M8 9h8M8 12h5" />
</>);

// Комбо
const SIcoCombo1 = sIco(<>
  <path d="M14 4c4 0 6 2 6 6-2.5 1-4 2.5-6 6l-3-3c3.5-2 5-3.5 6-6" />
  <path d="M11 13 8 14l-2 4 4-2 1-3" />
  <circle cx="14.5" cy="9.5" r="1.2" />
</>);
const SIcoCombo2 = sIco(<>
  <path d="M4 12a8 8 0 0 1 13.5-5.8l1.5 1.5" />
  <path d="M19 4v4h-4" />
  <path d="M20 12a8 8 0 0 1-13.5 5.8L5 16.3" />
  <path d="M5 20v-4h4" />
</>);
const SIcoCombo3 = sIco(<>
  <path d="M3 18.5 8 13l3.5 3 4-5 5.5 7" />
  <circle cx="8" cy="7" r="2" />
</>);

const SIcoCheck = sIco(<><path d="M5 12.5 10 17.5 19 7.5" /></>, '0 0 24 24');

// ── Данные ──────────────────────────────────────────────────────────
const COMBOS = [
  {
    Icon: SIcoCombo1, title: 'Старт под ключ',
    desc: 'Аудит + Брендбук + 30 постов',
    oldPrice: '24 000', price: '19 900', badge: '−17%',
  },
  {
    Icon: SIcoCombo2, title: 'Реанимация',
    desc: 'Анализ + Контент-стратегия + 50 постов',
    oldPrice: '32 000', price: '24 900', badge: '−22%',
  },
  {
    Icon: SIcoCombo3, title: 'Лаунч-кампания',
    desc: 'Брендбук + Контент-план + Запуск + 60 постов',
    oldPrice: '42 000', price: '34 900', badge: '−17%',
  },
];

const CATEGORIES = [
  {
    id: 'audit', title: 'Аудит и исследование',
    services: [
      { Icon: SIcoSearchDoc,      title: 'Аудит VK-сообщества',         desc: 'Парсинг группы, ER, контент, частота. Отчёт в PDF',         price: '3 500' },
      { Icon: SIcoCompare,        title: 'Анализ конкурентов в нише',   desc: 'Топ-3 групп, метрики, рекомендации по позиционированию',   price: '4 900', inPlan: true },
      { Icon: SIcoReelSearch,     title: 'Анализ Reels-конкурентов',    desc: '5 топовых видео в нише, разбор хука, темпа и CTA',         price: '5 900' },
      { Icon: SIcoClipboardCheck, title: 'Аудит контент-плана клиента', desc: 'Анализ текущего контента, метрики, точки роста',           price: '3 900' },
    ],
  },
  {
    id: 'brand', title: 'Брендирование и дизайн',
    services: [
      { Icon: SIcoBook,        title: 'Создание брендбука',           desc: 'Профиль бренда, гайд, рубрикатор и примеры постов',  price: '12 000' },
      { Icon: SIcoLayout,      title: 'Оформление сообщества VK',     desc: 'Обложка, аватар, закреп, карточки товаров, баннеры', price: '6 500' },
      { Icon: SIcoCover,       title: 'Шапка и аватары для соцсетей', desc: 'Комплект для VK и Telegram, адаптированные размеры', price: '3 200' },
      { Icon: SIcoPostDesign,  title: 'Дизайн поста (1 единица)',     desc: 'Один пост-карточка с текстом и изображением',        price: '1 200' },
      { Icon: SIcoStoryDesign, title: 'Дизайн истории (1 единица)',   desc: 'Одна сторис со статичным или анимированным дизайном', price: '800' },
    ],
  },
  {
    id: 'content', title: 'Контент-пакеты',
    services: [
      { Icon: SIcoText,     title: 'Текст поста (1 шт)',       desc: 'Один пост: тема, тон, призыв к действию',                price: '600' },
      { Icon: SIcoStack,    title: 'Серия постов «10 шт»',     desc: '10 связанных постов под кампанию, адаптация под площадки', price: '4 800' },
      { Icon: SIcoCalendar, title: 'Контент-план на месяц',    desc: '30 постов с расписанием, тонами и форматами',              price: '5 900' },
      { Icon: SIcoReel,     title: 'Сценарий Reels',           desc: 'Полный сценарий 15–30 секунд с раскадровкой',              price: '2 400' },
      { Icon: SIcoStories,  title: 'Сценарий сторис (5 шт)',   desc: 'Серия из 5 связанных историй с воронкой',                  price: '1 900' },
      { Icon: SIcoArticle,  title: 'Лонгрид-статья',           desc: 'Подробный материал на 4–6 тысяч знаков с заголовками',     price: '3 500' },
      { Icon: SIcoMail,     title: 'Email-рассылка',           desc: 'Текст письма + структура + призыв, адаптация под сегменты', price: '2 800' },
    ],
  },
  {
    id: 'campaigns', title: 'Маркетинговые кампании',
    services: [
      { Icon: SIcoTarget,    title: 'Запуск таргета VK',                       desc: 'Настройка кабинета, 3 креатива, тестовые сегменты',        price: '7 500' },
      { Icon: SIcoWarmup,    title: 'Прогрев перед запуском',                  desc: 'Серия постов и сторис, прогрев аудитории за 7–10 дней',    price: '9 800' },
      { Icon: SIcoMegaphone, title: 'Промокампания (пост + истории + рилс)',   desc: 'Комплект форматов под одну акцию с единой механикой',     price: '8 400' },
      { Icon: SIcoGift,      title: 'Конкурс / Розыгрыш',                      desc: 'Механика, тексты, визуалы, регламент подведения итогов',  price: '5 600' },
      { Icon: SIcoShield,    title: 'Анти-кризис в комментариях',              desc: 'Тактика ответа, шаблоны, мониторинг 7 дней',              price: '4 200' },
    ],
  },
  {
    id: 'misc', title: 'Прочие сервисы',
    services: [
      { Icon: SIcoReport, title: 'Ежемесячный отчёт для клиента', desc: 'PDF с метриками публикаций и рекомендациями',              price: '1 500', inPlan: true },
      { Icon: SIcoUsers,  title: 'Парсинг аудитории VK',          desc: '500–1000 потенциальных подписчиков по фильтрам',           price: '2 400' },
      { Icon: SIcoStar,   title: 'Сбор отзывов с конкурентов',    desc: 'До 50 отзывов с разбором тональности и тегов',             price: '3 100' },
      { Icon: SIcoChat,   title: 'Консультация по SMM (1 час)',   desc: 'Звонок-сессия со специалистом, ответы на ваши вопросы',    price: '3 500' },
    ],
  },
];

// ── Маленькие хелперы ───────────────────────────────────────────────
function pluralRu(n, forms) {
  const mod10 = n % 10, mod100 = n % 100;
  if (mod10 === 1 && mod100 !== 11) return forms[0];
  if (mod10 >= 2 && mod10 <= 4 && (mod100 < 12 || mod100 > 14)) return forms[1];
  return forms[2];
}
const usl = (n) => `${n} ${pluralRu(n, ['услуга', 'услуги', 'услуг'])}`;
const kombo = (n) => `${n} ${pluralRu(n, ['комбо', 'комбо', 'комбо'])}`;

function SectionHeader({ title, count, kind = 'усл' }) {
  return (
    <header style={{
      display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 12,
      marginBottom: 18,
    }}>
      <h2 style={{
        margin: 0, fontFamily: CATSANS, fontWeight: 700, fontSize: 26,
        letterSpacing: '-0.018em', color: CAT.ink, lineHeight: 1.1,
      }}>{title}</h2>
      <span style={catMeta}>{kind === 'комбо' ? kombo(count) : usl(count)}</span>
    </header>
  );
}

// ── Карточка услуги ────────────────────────────────────────────────
function ServiceCard({ s }) {
  const isMobile = window.useIsMobile ? window.useIsMobile() : false;
  return (
    <div style={{
      background: CAT.card, border: `1px solid ${CAT.line}`, borderRadius: 12,
      padding: 24, display: 'flex', flexDirection: 'column',
      height: isMobile ? 'auto' : '100%',
    }}>
      <div style={{
        width: 32, height: 32, color: CAT.ink,
        display: 'inline-flex', alignItems: 'center', justifyContent: 'flex-start',
      }}>
        <s.Icon size={28} stroke={1.5} />
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 8, flex: 1, marginTop: 28 }}>
        <div style={{
          fontFamily: CATSANS, fontSize: 17.5, fontWeight: 600, color: CAT.ink,
          letterSpacing: '-0.01em', lineHeight: 1.25,
        }}>{s.title}</div>
        <div style={{ fontFamily: CATSANS, fontSize: 13.5, color: CAT.dim, lineHeight: 1.45 }}>
          {s.desc}
        </div>
      </div>

      <div style={{
        marginTop: 22,
        display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 14,
      }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 4, minWidth: 0 }}>
          <div style={{
            fontFamily: CATSANS, fontSize: 21, fontWeight: 700, color: CAT.ink,
            letterSpacing: '-0.015em', lineHeight: 1,
            fontVariantNumeric: 'tabular-nums',
          }}>{s.price} ₽</div>
          {s.inPlan && (
            <div style={{
              fontFamily: CATMONO, fontSize: 9.5, letterSpacing: '0.22em',
              textTransform: 'uppercase', color: CAT.accent, marginTop: 2,
            }}>включено в тарифы</div>
          )}
        </div>
        <button
          style={{
            display: 'inline-flex', alignItems: 'center', gap: 8,
            padding: '0 16px', height: 38,
            background: 'transparent', color: CAT.ink,
            border: `1.5px solid ${CAT.ink}`, borderRadius: 8,
            fontFamily: CATMONO, fontWeight: 700, fontSize: 10.5,
            letterSpacing: '0.22em', textTransform: 'uppercase', cursor: 'pointer',
            transition: 'background .2s, color .2s', whiteSpace: 'nowrap', flex: '0 0 auto',
          }}
          onMouseEnter={(e) => { e.currentTarget.style.background = CAT.ink; e.currentTarget.style.color = CAT.bg; }}
          onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = CAT.ink; }}
        >купить</button>
      </div>
    </div>
  );
}

// ── Карточка комбо ──────────────────────────────────────────────────
function ComboCard({ c }) {
  const isMobile = window.useIsMobile ? window.useIsMobile() : false;
  return (
    <div style={{
      position: 'relative',
      background: CAT.card,
      border: `1.5px solid ${CAT.accent}`, borderRadius: 12,
      padding: 28, display: 'flex', flexDirection: 'column',
      boxShadow: '0 1px 0 rgba(26,26,30,0.03)',
      height: isMobile ? 'auto' : '100%',
    }}>
      <span style={{
        position: 'absolute', top: -12, right: 18,
        padding: '6px 11px', borderRadius: 6,
        background: CAT.accent, color: '#fff',
        fontFamily: CATMONO, fontWeight: 700, fontSize: 10.5,
        letterSpacing: '0.18em', textTransform: 'uppercase',
      }}>{c.badge}</span>

      <div style={{
        width: 44, height: 44, color: CAT.ink,
        display: 'inline-flex', alignItems: 'center', justifyContent: 'flex-start',
      }}>
        <c.Icon size={40} stroke={1.4} />
      </div>

      <h3 style={{
        margin: '18px 0 0', fontFamily: CATSANS, fontWeight: 700, fontSize: 24,
        color: CAT.ink, letterSpacing: '-0.02em', lineHeight: 1.15,
      }}>{c.title}</h3>
      <p style={{
        margin: '8px 0 0', fontFamily: CATSANS, fontSize: 14, color: CAT.dim, lineHeight: 1.45,
        flex: 1,
      }}>{c.desc}</p>

      <div style={{ height: 1, background: CAT.line, margin: '22px 0' }} />

      <div style={{
        display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 14,
      }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
          <span style={{
            fontFamily: CATSANS, fontSize: 13.5, color: CAT.faint,
            textDecoration: 'line-through', letterSpacing: '-0.005em',
            fontVariantNumeric: 'tabular-nums',
          }}>{c.oldPrice} ₽</span>
          <span style={{
            fontFamily: CATSANS, fontSize: 24, fontWeight: 700, color: CAT.ink,
            letterSpacing: '-0.02em', lineHeight: 1,
            fontVariantNumeric: 'tabular-nums',
          }}>{c.price} ₽</span>
        </div>
        <button
          style={{
            display: 'inline-flex', alignItems: 'center', gap: 8,
            padding: '0 18px', height: 42,
            background: CAT.ink, color: CAT.bg, border: 'none', borderRadius: 8,
            fontFamily: CATMONO, fontWeight: 700, fontSize: 10.5,
            letterSpacing: '0.22em', textTransform: 'uppercase', cursor: 'pointer',
            transition: 'background .2s', whiteSpace: 'nowrap', flex: '0 0 auto',
          }}
          onMouseEnter={(e) => e.currentTarget.style.background = CAT.accent}
          onMouseLeave={(e) => e.currentTarget.style.background = CAT.ink}
        >взять комбо</button>
      </div>
    </div>
  );
}

// ── Главная страница услуг ──────────────────────────────────────────
function CatalogServices() {
  const isMobile = window.useIsMobile ? window.useIsMobile() : false;
  const gridCols = isMobile ? '1fr' : 'repeat(3, minmax(0, 1fr))';
  return (
    <>
      <CatPageHeading
        title="Услуги"
        sub="Разовые услуги и улучшения. Покупайте отдельно или комбо со скидкой."
      />

      <div style={{ display: 'flex', flexDirection: 'column', gap: 56 }}>
        {/* Готовые комбо */}
        <section>
          <SectionHeader title="Готовые комбо" count={COMBOS.length} kind="комбо" />
          <div style={{
            display: 'grid', gridTemplateColumns: gridCols, gap: 18,
            alignItems: 'stretch',
          }}>
            {COMBOS.map((c, i) => <ComboCard key={i} c={c} />)}
          </div>
        </section>

        {/* 5 категорий */}
        {CATEGORIES.map((cat) => (
          <section key={cat.id}>
            <SectionHeader title={cat.title} count={cat.services.length} />
            <div style={{
              display: 'grid', gridTemplateColumns: gridCols, gap: 18,
              alignItems: 'stretch',
            }}>
              {cat.services.map((s, i) => <ServiceCard key={i} s={s} />)}
            </div>
          </section>
        ))}
      </div>
    </>
  );
}

Object.assign(window, { CatalogServices });