// Каталог — публичная страница сайта S"MM. Шапка + sidebar + рабочая область.

const CAT = {
  bg: '#f5ead4',
  card: '#fbf2de',
  cardHover: '#f3e7cb',
  sub: '#e8ddc4',
  panel: '#ecdfc1',
  hover: '#e3d4b3',
  active: '#d8c69e',
  ink: '#1a1a1e',
  dim: '#6a5a4a',
  faint: '#9c8e7c',
  fainter: '#b8ab97',
  accent: '#c96848',
  line: 'rgba(26,26,30,0.14)',
  lineStrong: 'rgba(26,26,30,0.22)',
};
const CATSANS = '"Inter Tight", "Helvetica Neue", sans-serif';
const CATMONO = '"JetBrains Mono", ui-monospace, monospace';
const catMeta = { fontFamily: CATMONO, fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase', color: CAT.dim };

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

const CIconGrid = cIco(<>
  <rect x="4" y="4" width="7" height="7" rx="1" />
  <rect x="13" y="4" width="7" height="7" rx="1" />
  <rect x="4" y="13" width="7" height="7" rx="1" />
  <rect x="13" y="13" width="7" height="7" rx="1" />
</>);
const CIconSpark = cIco(<>
  <path d="M12 3v6M12 15v6M3 12h6M15 12h6" />
  <path d="M6.5 6.5 9 9M15 15l2.5 2.5M6.5 17.5 9 15M15 9l2.5-2.5" opacity="0.55" />
</>);
const CIconCheck = cIco(<><path d="M5 12.5 10 17.5 19 7.5" /></>);
const CIconArrR = cIco(<>
  <path d="M5 12h13" /><path d="m13 6 6 6-6 6" />
</>);

// ── Шапка сайта (тонкая, та же, что на главной) ─────────────────────
// Навигация ведёт на главную страницу с указанием якоря. В Claude Design
// переходы между файлами могут не работать — это нормально.
const HOME = '/';
const SITE_NAV = [
  { l: 'услуги',    href: `${HOME}#pricing` },
  { l: 'о нас',     href: `${HOME}#philosophy` },
  { l: 'faq',       href: `${HOME}#faq` },
  { l: 'контакты',  href: `${HOME}#contacts` },
  { l: 'войти',     href: '/login' },
];

function CatTopBar() {
  const palette = { '--bg': CAT.bg, '--ink': CAT.ink, '--accent': CAT.accent, '--sub': CAT.sub };
  const isMobile = window.useIsMobile ? window.useIsMobile() : false;
  const [menuOpen, setMenuOpen] = React.useState(false);
  return (
    <>
    <nav style={{
      ...palette,
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: isMobile ? '16px 18px' : '22px 32px', borderBottom: '2px solid var(--ink)',
      position: 'sticky', top: 0, background: 'var(--bg)', zIndex: 50,
    }}>
      <a href={HOME}
        style={{
          display: 'inline-flex', alignItems: 'baseline', lineHeight: 0.85,
          fontWeight: 900, fontSize: 26, letterSpacing: '-0.06em',
          color: 'inherit', textDecoration: 'none',
        }}>
        <span>S</span>
        <span style={{
          color: 'var(--accent)', fontFamily: 'Georgia,serif', fontStyle: 'italic',
          fontSize: 28, lineHeight: 0.7, marginTop: -1,
        }}>"</span>
        <span>MM</span>
      </a>

      {isMobile ? (
        <button onClick={() => setMenuOpen((v) => !v)} aria-label="Меню"
          style={{
            width: 44, height: 44, padding: 0, background: 'transparent',
            border: '2px solid var(--ink)', cursor: 'pointer',
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: 'var(--ink)',
          }}>
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round">
            {menuOpen ? <path d="M6 6l12 12M18 6 6 18" /> : <path d="M4 7h16M4 12h16M4 17h16" />}
          </svg>
        </button>
      ) : (
        <>
          <div style={{
            display: 'flex', gap: 32,
            fontFamily: CATMONO, fontSize: 11, fontWeight: 700,
            letterSpacing: '0.22em', textTransform: 'uppercase',
          }}>
            {SITE_NAV.map((x) => (
              <a key={x.l} href={x.href}
                style={{ color: 'inherit', textDecoration: 'none', transition: 'color .2s' }}
                onMouseOver={(e) => e.currentTarget.style.color = 'var(--accent)'}
                onMouseOut={(e) => e.currentTarget.style.color = 'inherit'}
              >{x.l}</a>
            ))}
          </div>
          {window.MagnetBtn
            ? <window.MagnetBtn onClick={() => { window.location.href = `${HOME}#contacts`; }}>обсудить →</window.MagnetBtn>
            : (
              <a href={`${HOME}#contacts`}
                style={{
                  display: 'inline-flex', alignItems: 'center', gap: 8,
                  padding: '14px 22px',
                  background: 'var(--ink)', color: 'var(--bg)',
                  border: '2px solid var(--ink)', textDecoration: 'none',
                  fontFamily: CATMONO, fontWeight: 700, fontSize: 12,
                  letterSpacing: '0.22em', textTransform: 'uppercase',
                }}>обсудить →</a>
            )}
        </>
      )}
    </nav>

    {isMobile && menuOpen && (
      <div style={{
        ...palette,
        position: 'sticky', top: 73, zIndex: 49,
        background: 'var(--bg)', borderBottom: '2px solid var(--ink)',
        display: 'flex', flexDirection: 'column',
        fontFamily: CATMONO, fontSize: 13, fontWeight: 700,
        letterSpacing: '0.2em', textTransform: 'uppercase',
      }}>
        {SITE_NAV.map((x) => (
          <a key={x.l} href={x.href} onClick={() => setMenuOpen(false)}
            style={{
              padding: '16px 18px', color: 'inherit', textDecoration: 'none',
              borderTop: `1px solid ${CAT.line}`,
            }}>{x.l}</a>
        ))}
      </div>
    )}
    </>
  );
}

// ── Sidebar каталога ────────────────────────────────────────────────
function CatNavItem({ Icon, label, active, onClick }) {
  const [hov, setHov] = React.useState(false);
  const bg = active ? CAT.active : (hov ? CAT.hover : 'transparent');
  const color = active ? CAT.accent : CAT.ink;
  return (
    <a href="#"
      onClick={(e) => { e.preventDefault(); onClick(); }}
      onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)}
      style={{
        position: 'relative', display: 'flex', alignItems: 'center', gap: 12,
        padding: '12px 18px 12px 21px', textDecoration: 'none', color,
        background: bg, transition: 'background .15s, color .15s',
        fontFamily: CATSANS, fontSize: 14.5, fontWeight: active ? 500 : 400,
      }}>
      {active && (
        <span aria-hidden="true" style={{
          position: 'absolute', left: 0, top: 0, bottom: 0, width: 3,
          background: CAT.accent,
        }} />
      )}
      <span style={{
        display: 'inline-flex', width: 20, height: 20,
        alignItems: 'center', justifyContent: 'center',
      }}>
        <Icon size={20} stroke={1.6} />
      </span>
      <span>{label}</span>
    </a>
  );
}

function CatSidebar({ active, onSelect }) {
  return (
    <aside style={{
      width: 240, flex: '0 0 240px',
      background: CAT.panel, borderRight: `1px solid ${CAT.line}`,
      position: 'sticky', top: 89, height: 'calc(100vh - 89px)',
      display: 'flex', flexDirection: 'column',
    }}>
      <div style={{ padding: '24px 21px 14px' }}>
        <span style={catMeta}>каталог</span>
      </div>
      <nav style={{ display: 'flex', flexDirection: 'column' }}>
        <CatNavItem Icon={CIconGrid}  label="Тарифы" active={active === 'tariffs'}  onClick={() => onSelect('tariffs')} />
        <CatNavItem Icon={CIconSpark} label="Услуги" active={active === 'services'} onClick={() => onSelect('services')} />
      </nav>
    </aside>
  );
}

// ── Page heading ────────────────────────────────────────────────────
function CatPageHeading({ title, sub }) {
  return (
    <header style={{ marginBottom: 48 }}>
      <h1 style={{
        margin: 0, fontFamily: CATSANS, fontWeight: 700,
        fontSize: 'clamp(40px, 4.6vw, 56px)', letterSpacing: '-0.025em',
        lineHeight: 1.05, color: CAT.ink,
      }}>{title}</h1>
      <p style={{
        margin: '12px 0 0', fontFamily: CATSANS, fontSize: 15.5, color: CAT.dim,
        lineHeight: 1.5, maxWidth: 720,
      }}>{sub}</p>
    </header>
  );
}

// ── Хост страницы ───────────────────────────────────────────────────
function CatTabsRow({ active, onSelect }) {
  const tabs = [
    { id: 'tariffs', Icon: CIconGrid, label: 'Тарифы' },
    { id: 'services', Icon: CIconSpark, label: 'Услуги' },
  ];
  return (
    <div style={{
      position: 'sticky', top: 73, zIndex: 40,
      display: 'flex', background: CAT.panel,
      borderBottom: `1px solid ${CAT.line}`,
    }}>
      {tabs.map((t) => {
        const on = active === t.id;
        return (
          <a key={t.id} href="#" onClick={(e) => { e.preventDefault(); onSelect(t.id); }}
            style={{
              flex: 1, display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              gap: 8, padding: '14px 12px', textDecoration: 'none',
              color: on ? CAT.accent : CAT.ink,
              fontFamily: CATSANS, fontSize: 15, fontWeight: on ? 600 : 400,
              borderBottom: on ? `2px solid ${CAT.accent}` : '2px solid transparent',
            }}>
            <t.Icon size={18} stroke={1.6} />{t.label}
          </a>
        );
      })}
    </div>
  );
}

function CatalogPage() {
  const isMobile = window.useIsMobile ? window.useIsMobile() : false;
  const [section, setSection] = React.useState('tariffs');

  const goTo = (id) => {
    setSection(id);
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };

  return (
    <div style={{
      minWidth: isMobile ? 'auto' : 1280, minHeight: '100vh', background: CAT.bg,
      color: CAT.ink, fontFamily: CATSANS,
      '--bg': CAT.bg, '--ink': CAT.ink, '--accent': CAT.accent, '--sub': CAT.sub,
    }}>
      <CatTopBar />
      {isMobile && <CatTabsRow active={section} onSelect={goTo} />}
      <div style={{
        display: 'flex', flexDirection: isMobile ? 'column' : 'row', alignItems: 'flex-start',
      }}>
        {!isMobile && <CatSidebar active={section} onSelect={goTo} />}
        <main style={{
          flex: 1, minWidth: 0, width: isMobile ? '100%' : undefined,
          boxSizing: 'border-box',
          padding: isMobile ? '28px 16px 56px' : '48px 56px 80px',
          minHeight: isMobile ? undefined : 'calc(100vh - 89px)',
        }}>
          {section === 'tariffs' && window.CatalogTariffs
            ? <window.CatalogTariffs onGoServices={() => goTo('services')} />
            : section === 'services' && window.CatalogServices
              ? <window.CatalogServices />
              : null}
        </main>
      </div>
    </div>
  );
}

// Раздел «Тарифы» ─────────────────────────────────────────────────────
const PLAN_TIERS_FULL = [
  {
    name: 'Тир-1',
    sub: 'для одной соцсети, до 10 постов',
    price: '8 900',
    popular: false,
    features: [
      '1 соцсеть на выбор (VK или Telegram)',
      '10 постов в месяц',
      'Контент-план на месяц',
      'Анализ конкурентов',
      '1 идея для контента',
      'Отчёт в конце месяца',
    ],
  },
  {
    name: 'Тир-2',
    sub: 'для двух соцсетей, до 15 постов',
    price: '13 900',
    popular: true,
    features: [
      '2 соцсети (VK + Telegram, кросспостинг)',
      '15 постов в месяц',
      '2 истории',
      '2 внеплановых поста на инфоповоды',
      'Контент-план на месяц',
      'Анализ конкурентов',
      '2 идеи для контента',
      'Отчёт в конце месяца',
    ],
  },
  {
    name: 'Тир-3',
    sub: 'для двух соцсетей, до 20 постов',
    price: '18 500',
    popular: false,
    features: [
      '2 соцсети (VK + Telegram, кросспостинг)',
      '20 постов в месяц',
      '4 истории',
      '2 графических рилса',
      '4 внеплановых поста на инфоповоды',
      'Контент-план на месяц',
      'Анализ конкурентов',
      '5 идей для контента',
      'Отчёт в конце месяца',
    ],
  },
];

const COMPARE_ROWS = [
  { p: 'Цена в месяц',         v: ['8 900 ₽', '13 900 ₽', '18 500 ₽'] },
  { p: 'Соцсети',              v: ['1', '2', '2'] },
  { p: 'Постов в месяц',       v: ['10', '15', '20'] },
  { p: 'Историй в месяц',      v: ['—', '2', '4'] },
  { p: 'Графических рилсов',   v: ['—', '—', '2'] },
  { p: 'Внеплановых постов',   v: ['—', '2', '4'] },
  { p: 'Идей для контента',    v: ['1', '2', '5'] },
  { p: 'Контент-план',         v: ['check', 'check', 'check'] },
  { p: 'Анализ конкурентов',   v: ['check', 'check', 'check'] },
  { p: 'Отчётов в месяц',      v: ['1', '1', '1'] },
];

// ── Тарифы для SMM-специалистов (диапазонная модель, оплата за слоты) ──
// ВНИМАНИЕ: предварительные цифры, синхронить с DIY_RANGES в боте
// (orchestrator tariffs.py). Реальная цена при покупке считается ботом —
// витрина только показывает модель.
const DIY_MIN_SLOTS = 2;
const DIY_RANGES = [
  { min: 2,  max: 3,    per: 4000 },
  { min: 4,  max: 6,    per: 3700 },
  { min: 7,  max: 11,   per: 3590 },
  { min: 12, max: null, per: null },  // договорная
];
// Что входит на каждого клиента (пакет diy_client).
const DIY_CLIENT_FEATURES = [
  '15 постов в месяц',
  '2 истории',
  '1 контент-план',
  '1 аудит конкурентов',
  '1 отчёт клиенту',
  '2 соцсети (VK + Telegram, кросспостинг)',
  'Генерация изображений',
];
const DIY_FEATURES_NOTE = 'Рилсы — докупкой';

function diyRangeFor(n) {
  return DIY_RANGES.find((r) => n >= r.min && (r.max == null || n <= r.max)) || null;
}

function CompareCell({ value }) {
  if (value === 'check') {
    return (
      <span style={{
        display: 'inline-flex', color: CAT.accent,
      }}><CIconCheck size={18} stroke={2} /></span>
    );
  }
  if (value === 'check-each') {
    return (
      <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
        <span style={{ display: 'inline-flex', color: CAT.accent }}>
          <CIconCheck size={18} stroke={2} />
        </span>
        <span style={{ fontFamily: CATSANS, fontSize: 13, color: CAT.dim }}>(для каждой)</span>
      </span>
    );
  }
  return <span style={{ fontFamily: CATSANS, fontSize: 14.5, color: CAT.ink, fontVariantNumeric: 'tabular-nums' }}>{value}</span>;
}

function TierCard({ t }) {
  return (
    <div style={{
      position: 'relative',
      background: CAT.card,
      border: `${t.popular ? 2 : 1}px solid ${t.popular ? CAT.accent : CAT.line}`,
      borderRadius: 12,
      padding: t.popular ? 27 : 28,
      display: 'flex', flexDirection: 'column',
      boxShadow: t.popular
        ? '0 14px 32px -20px rgba(201,104,72,0.35)'
        : '0 1px 0 rgba(26,26,30,0.03)',
    }}>
      {t.popular && (
        <span style={{
          position: 'absolute', top: -13, left: '50%', transform: 'translateX(-50%)',
          padding: '6px 12px', borderRadius: 6,
          background: CAT.accent, color: '#fff',
          fontFamily: CATMONO, fontWeight: 700, fontSize: 10,
          letterSpacing: '0.24em', textTransform: 'uppercase',
          whiteSpace: 'nowrap',
        }}>популярный</span>
      )}
      <h3 style={{
        margin: 0, fontFamily: CATSANS, fontWeight: 700, fontSize: 26,
        color: CAT.ink, letterSpacing: '-0.015em', lineHeight: 1.1,
      }}>{t.name}</h3>
      <p style={{
        margin: '8px 0 0', fontFamily: CATSANS, fontSize: 13.5,
        color: CAT.dim, lineHeight: 1.45, minHeight: 40,
      }}>{t.sub}</p>

      <div style={{ marginTop: 20 }}>
        <div style={{
          fontFamily: CATSANS, fontWeight: 700, fontSize: 44,
          color: CAT.ink, letterSpacing: '-0.03em', lineHeight: 1,
          fontVariantNumeric: 'tabular-nums',
        }}>{t.price}</div>
        <div style={{ ...catMeta, marginTop: 8, letterSpacing: '0.28em' }}>₽ в месяц</div>
      </div>

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

      <ul style={{
        margin: 0, padding: 0, listStyle: 'none',
        display: 'flex', flexDirection: 'column', gap: 11, flex: 1,
      }}>
        {t.features.map((f, i) => (
          <li key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
            <span style={{
              flex: '0 0 18px', width: 18, height: 18, marginTop: 1,
              color: CAT.accent, display: 'inline-flex',
              alignItems: 'center', justifyContent: 'center',
            }}>
              <CIconCheck size={16} stroke={2} />
            </span>
            <span style={{ fontFamily: CATSANS, fontSize: 14, color: CAT.ink, lineHeight: 1.45 }}>{f}</span>
          </li>
        ))}
      </ul>

      <a href="#" className={`cat-tier-btn${t.popular ? ' solid' : ''}`}
        style={{
          marginTop: 24,
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 10,
          width: '100%', height: 48,
          background: t.popular ? CAT.ink : 'transparent',
          color: t.popular ? CAT.bg : CAT.ink,
          border: `1.5px solid ${CAT.ink}`,
          borderRadius: 10, textDecoration: 'none',
          fontFamily: CATMONO, fontWeight: 700, fontSize: 11,
          letterSpacing: '0.22em', textTransform: 'uppercase',
          transition: 'background .2s, color .2s',
        }}
        onMouseOver={(e) => {
          if (t.popular) e.currentTarget.style.background = CAT.accent;
          else { e.currentTarget.style.background = CAT.ink; e.currentTarget.style.color = CAT.bg; }
        }}
        onMouseOut={(e) => {
          if (t.popular) e.currentTarget.style.background = CAT.ink;
          else { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = CAT.ink; }
        }}
      >
        выбрать тариф <span aria-hidden="true">→</span>
      </a>
    </div>
  );
}

function CompareTable() {
  return (
    <div style={{
      background: CAT.card, border: `1px solid ${CAT.line}`, borderRadius: 12,
      overflow: 'hidden',
    }}>
      {/* Заголовок */}
      <div style={{
        display: 'grid',
        gridTemplateColumns: 'minmax(220px, 1.6fr) repeat(3, minmax(0, 1fr))',
        alignItems: 'center',
        borderBottom: `1px solid ${CAT.line}`,
      }}>
        <div style={{
          padding: '18px 22px',
          ...catMeta,
        }}>параметр</div>
        {['Тир-1', 'Тир-2', 'Тир-3'].map((label, i) => (
          <div key={label} style={{
            padding: '18px 16px',
            textAlign: 'center',
            background: i === 1 ? 'rgba(201,104,72,0.08)' : 'transparent',
            fontFamily: CATSANS, fontSize: 16.5, fontWeight: 600, color: CAT.ink,
            letterSpacing: '-0.005em',
          }}>{label}</div>
        ))}
      </div>
      {/* Строки */}
      {COMPARE_ROWS.map((row, i) => (
        <div key={row.p} style={{
          display: 'grid',
          gridTemplateColumns: 'minmax(220px, 1.6fr) repeat(3, minmax(0, 1fr))',
          alignItems: 'center',
          borderTop: i === 0 ? 'none' : `1px solid ${CAT.line}`,
        }}>
          <div style={{
            padding: '16px 22px',
            fontFamily: CATSANS, fontSize: 14, color: CAT.ink, lineHeight: 1.4,
          }}>{row.p}</div>
          {row.v.map((val, j) => (
            <div key={j} style={{
              padding: '16px 12px',
              textAlign: 'center',
              background: j === 1 ? 'rgba(201,104,72,0.05)' : 'transparent',
            }}>
              <CompareCell value={val} />
            </div>
          ))}
        </div>
      ))}
    </div>
  );
}

// ── Витрина для SMM-специалистов: карточка-калькулятор слотов ────────
function DiyStepBtn({ label, onClick, disabled }) {
  return (
    <button onClick={onClick} disabled={disabled} aria-label={label === '−' ? 'Меньше' : 'Больше'}
      style={{
        width: 44, height: 44, flex: '0 0 44px',
        border: `1.5px solid ${disabled ? CAT.line : CAT.ink}`,
        borderRadius: 10, background: 'transparent',
        color: disabled ? CAT.fainter : CAT.ink,
        fontFamily: CATSANS, fontSize: 22, fontWeight: 500, lineHeight: 1,
        cursor: disabled ? 'default' : 'pointer',
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        transition: 'background .15s ease, color .15s ease',
      }}
      onMouseEnter={(e) => { if (!disabled) { e.currentTarget.style.background = CAT.ink; e.currentTarget.style.color = CAT.bg; } }}
      onMouseLeave={(e) => { if (!disabled) { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = CAT.ink; } }}
    >{label}</button>
  );
}

function DiyShowcase() {
  const isMobile = window.useIsMobile ? window.useIsMobile() : false;
  const [count, setCount] = React.useState(3);

  const range = diyRangeFor(count);
  const negotiable = !range || range.per == null;   // 12+ → договорная
  const fmt = (n) => n.toLocaleString('ru-RU');
  const total = (!negotiable && range) ? range.per * count : null;

  const rangeLabel = (r) => r.max == null ? `${r.min}+` : `${r.min}–${r.max}`;

  return (
    <section style={{ marginBottom: isMobile ? 56 : 80 }}>
      <h2 style={{
        margin: 0, fontFamily: CATSANS, fontWeight: 600, fontSize: 28,
        letterSpacing: '-0.015em', color: CAT.ink, lineHeight: 1.15,
      }}>Для SMM-специалистов</h2>
      <p style={{
        margin: '8px 0 0', fontFamily: CATSANS, fontSize: 14.5,
        color: CAT.dim, lineHeight: 1.5,
      }}>Ведёте клиентов сами? Платите за слоты — ставка снижается с количеством.</p>

      <div style={{ height: 24 }} />

      <div style={{
        background: CAT.card, border: `1px solid ${CAT.line}`, borderRadius: 12,
        padding: isMobile ? 22 : 28,
        boxShadow: '0 1px 0 rgba(26,26,30,0.03)',
        display: 'grid',
        gridTemplateColumns: isMobile ? '1fr' : 'minmax(0, 1fr) minmax(0, 1fr)',
        gap: isMobile ? 24 : 40,
      }}>
        {/* Левая колонка: калькулятор */}
        <div style={{ display: 'flex', flexDirection: 'column' }}>
          <div style={{ ...catMeta }}>сколько клиентов ведёте?</div>
          <div style={{
            marginTop: 14, display: 'flex', alignItems: 'center', gap: 16,
          }}>
            <DiyStepBtn label="−" disabled={count <= DIY_MIN_SLOTS}
              onClick={() => setCount((v) => Math.max(DIY_MIN_SLOTS, v - 1))} />
            <span style={{
              minWidth: 56, textAlign: 'center',
              fontFamily: CATSANS, fontWeight: 700, fontSize: 36, color: CAT.ink,
              letterSpacing: '-0.02em', fontVariantNumeric: 'tabular-nums',
            }}>{count}</span>
            <DiyStepBtn label="+" onClick={() => setCount((v) => v + 1)} />
          </div>

          {/* Расчёт */}
          <div style={{ marginTop: 22 }}>
            {negotiable ? (
              <>
                <div style={{
                  fontFamily: CATSANS, fontWeight: 700, fontSize: 36, color: CAT.ink,
                  letterSpacing: '-0.02em', lineHeight: 1.1,
                }}>Договорная</div>
                <div style={{ ...catMeta, marginTop: 8 }}>от 12 клиентов — обсудим условия</div>
              </>
            ) : (
              <>
                <div style={{ fontFamily: CATSANS, fontSize: 15, color: CAT.dim }}>
                  {fmt(range.per)} ₽ × {count} {count === 1 ? 'клиент' : (count < 5 ? 'клиента' : 'клиентов')}
                </div>
                <div style={{
                  marginTop: 6, fontFamily: CATSANS, fontWeight: 700, fontSize: 40,
                  color: CAT.ink, letterSpacing: '-0.03em', lineHeight: 1,
                  fontVariantNumeric: 'tabular-nums',
                }}>{fmt(total)}</div>
                <div style={{ ...catMeta, marginTop: 8, letterSpacing: '0.28em' }}>₽ в месяц</div>
              </>
            )}
          </div>

          {/* Мини-лесенка диапазонов */}
          <div style={{
            marginTop: 22, border: `1px solid ${CAT.line}`, borderRadius: 10,
            overflow: 'hidden',
          }}>
            {DIY_RANGES.map((r, i) => {
              const active = range && r.min === range.min;
              return (
                <div key={i} style={{
                  display: 'flex', alignItems: 'baseline', justifyContent: 'space-between',
                  gap: 12, padding: '9px 14px',
                  borderTop: i === 0 ? 'none' : `1px solid ${CAT.line}`,
                  background: active ? 'rgba(201,104,72,0.08)' : 'transparent',
                }}>
                  <span style={{
                    fontFamily: CATSANS, fontSize: 13.5,
                    color: active ? CAT.accent : CAT.ink,
                    fontWeight: active ? 600 : 400,
                  }}>{rangeLabel(r)} {r.max == null || r.max > 1 ? 'клиентов' : 'клиента'}</span>
                  <span style={{
                    fontFamily: CATMONO, fontSize: 12.5,
                    color: active ? CAT.accent : CAT.dim,
                    fontVariantNumeric: 'tabular-nums',
                  }}>{r.per == null ? 'договорная' : `${fmt(r.per)} ₽/клиент`}</span>
                </div>
              );
            })}
          </div>
        </div>

        {/* Правая колонка: что входит + CTA */}
        <div style={{ display: 'flex', flexDirection: 'column' }}>
          <div style={{ ...catMeta }}>что входит — на каждого клиента</div>
          <ul style={{
            margin: '14px 0 0', padding: 0, listStyle: 'none',
            display: 'flex', flexDirection: 'column', gap: 11, flex: 1,
          }}>
            {DIY_CLIENT_FEATURES.map((f, i) => (
              <li key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
                <span style={{
                  flex: '0 0 18px', width: 18, height: 18, marginTop: 1,
                  color: CAT.accent, display: 'inline-flex',
                  alignItems: 'center', justifyContent: 'center',
                }}>
                  <CIconCheck size={16} stroke={2} />
                </span>
                <span style={{ fontFamily: CATSANS, fontSize: 14, color: CAT.ink, lineHeight: 1.45 }}>{f}</span>
              </li>
            ))}
          </ul>
          <div style={{
            marginTop: 12, fontFamily: CATSANS, fontSize: 13, color: CAT.dim,
            fontStyle: 'italic',
          }}>{DIY_FEATURES_NOTE}</div>

          <a href={`${HOME}#contacts`} className={negotiable ? 'cat-tier-btn solid' : 'cat-tier-btn'}
            style={{
              marginTop: 20,
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 10,
              width: '100%', height: 48, boxSizing: 'border-box',
              background: negotiable ? CAT.ink : 'transparent',
              color: negotiable ? CAT.bg : CAT.ink,
              border: `1.5px solid ${CAT.ink}`,
              borderRadius: 10, textDecoration: 'none',
              fontFamily: CATMONO, fontWeight: 700, fontSize: 11,
              letterSpacing: '0.22em', textTransform: 'uppercase',
              transition: 'background .2s, color .2s',
            }}
            onMouseOver={(e) => {
              if (negotiable) e.currentTarget.style.background = CAT.accent;
              else { e.currentTarget.style.background = CAT.ink; e.currentTarget.style.color = CAT.bg; }
            }}
            onMouseOut={(e) => {
              if (negotiable) e.currentTarget.style.background = CAT.ink;
              else { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = CAT.ink; }
            }}
          >
            {negotiable ? 'связаться с нами' : 'выбрать'} <span aria-hidden="true">→</span>
          </a>
        </div>
      </div>
    </section>
  );
}

function CatalogTariffs({ onGoServices }) {
  const isMobile = window.useIsMobile ? window.useIsMobile() : false;
  return (
    <>
      <CatPageHeading
        title="Тарифы"
        sub="AI-маркетинг под подписку. Без скрытых платежей."
      />

      {/* Карточки тарифов — на мобиле друг под другом (фичи перечислены внутри) */}
      <div style={{
        display: 'grid',
        gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, minmax(0, 1fr))',
        gap: 20, alignItems: 'stretch', marginBottom: isMobile ? 56 : 80,
      }}>
        {PLAN_TIERS_FULL.map((t) => <TierCard key={t.name} t={t} />)}
      </div>

      {/* Сравнительная таблица — только на десктопе. На мобиле карточки выше
          уже несут полный список фич, широкая таблица не нужна. */}
      {!isMobile && (
        <section style={{ marginBottom: 64 }}>
          <h2 style={{
            margin: 0, fontFamily: CATSANS, fontWeight: 600, fontSize: 28,
            letterSpacing: '-0.015em', color: CAT.ink, lineHeight: 1.15,
          }}>Сравнение тарифов</h2>
          <div style={{ height: 24 }} />
          <CompareTable />
        </section>
      )}

      {/* Витрина для SMM-специалистов (диапазонная модель слотов) */}
      <DiyShowcase />

      {/* CTA в услуги */}
      <section style={{
        padding: '40px 32px', textAlign: 'center',
        border: `1px solid ${CAT.line}`, borderRadius: 12, background: 'transparent',
      }}>
        <h3 style={{
          margin: 0, fontFamily: CATSANS, fontWeight: 600, fontSize: 26,
          letterSpacing: '-0.015em', color: CAT.ink, lineHeight: 1.15,
        }}>Нужно что-то ещё?</h3>
        <p style={{
          margin: '10px 0 24px', fontFamily: CATSANS, fontSize: 14.5,
          color: CAT.dim, lineHeight: 1.5,
        }}>Разовые услуги, аудиты, кампании — посмотрите каталог услуг</p>
        <button onClick={onGoServices}
          style={{
            display: 'inline-flex', alignItems: 'center', gap: 10,
            padding: '0 26px', height: 50,
            background: 'transparent', color: CAT.ink,
            border: `1.5px solid ${CAT.ink}`, borderRadius: 10,
            fontFamily: CATMONO, fontWeight: 700, fontSize: 11.5,
            letterSpacing: '0.22em', textTransform: 'uppercase', cursor: 'pointer',
            transition: 'background .2s, color .2s',
          }}
          onMouseOver={(e) => { e.currentTarget.style.background = CAT.ink; e.currentTarget.style.color = CAT.bg; }}
          onMouseOut={(e) => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = CAT.ink; }}
        >к услугам <span aria-hidden="true">→</span></button>
      </section>
    </>
  );
}

Object.assign(window, { CatalogPage, CatPageHeading, CatalogTariffs, CatSidebar, CAT, CATSANS, CATMONO, catMeta });