// pricing.jsx — Условия и тарифы

function Pricing({ navigate }) {
  const [billing, setBilling] = React.useState('month'); // 'month' | 'year'

  const plans = [
    {
      name: 'Старт',
      tag: 'для пробы',
      mPrice: 1900,
      yPrice: 18240,
      sub: 'Один специалист, один пользователь',
      features: [
        { ok: true, label: '1 агент на выбор' },
        { ok: true, label: '1 пользователь' },
        { ok: true, label: 'Telegram и веб-кабинет' },
        { ok: true, label: 'База знаний до 200 МБ' },
        { ok: true, label: '500 запросов / мес' },
        { ok: false, label: 'Интеграции CRM' },
        { ok: false, label: 'API' },
        { ok: false, label: 'Индивидуальный SLA' },
      ],
    },
    {
      name: 'Команда',
      tag: 'чаще выбирают',
      mPrice: 7900,
      yPrice: 75840,
      sub: 'Малая команда, до трёх специалистов',
      highlight: true,
      features: [
        { ok: true, label: 'До 3 агентов одновременно' },
        { ok: true, label: 'До 3 пользователей' },
        { ok: true, label: 'Все каналы доступа' },
        { ok: true, label: 'База знаний до 2 ГБ' },
        { ok: true, label: '2 000 запросов / мес' },
        { ok: true, label: 'amoCRM, Битрикс24, 1С' },
        { ok: false, label: 'API (по запросу)' },
        { ok: false, label: 'Индивидуальный SLA' },
      ],
    },
    {
      name: 'Корпус',
      tag: 'весь реестр',
      mPrice: 19900,
      yPrice: 191040,
      sub: 'Полный реестр и расширенные интеграции',
      features: [
        { ok: true, label: 'Все 9 агентов реестра' },
        { ok: true, label: 'До 10 пользователей' },
        { ok: true, label: 'Все каналы доступа' },
        { ok: true, label: 'База знаний до 20 ГБ' },
        { ok: true, label: '10 000 запросов / мес' },
        { ok: true, label: 'Все интеграции' },
        { ok: true, label: 'API и вебхуки' },
        { ok: true, label: 'Приоритет, SLA 99.9%' },
      ],
    },
  ];

  return (
    <div className="page">
      {/* Header */}
      <section style={{ padding: '56px 0 32px', borderBottom: '1px solid var(--rule)' }}>
        <div className="container-wide">
          <div className="mono" style={{ fontSize: 12, letterSpacing: '0.16em', color: 'var(--ink-3)', textTransform: 'uppercase', marginBottom: 16 }}>
            Делегат / Условия найма
          </div>
          <div className="m-grid-stack" style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 64, alignItems: 'end' }}>
            <div>
              <h1 className="serif" style={{ fontSize: 'var(--fs-h1)', lineHeight: 1, marginBottom: 18 }}>
                Платите за роль,<br />
                <span style={{ fontStyle: 'italic', color: 'var(--forest)' }}>не за токены.</span>
              </h1>
              <p className="muted-2" style={{ fontSize: 17, lineHeight: 1.55, maxWidth: 540 }}>
                Подписка работает как наём сотрудника на ставку. Никаких скрытых лимитов, никаких доплат за длинный ответ. Что в цене указано&nbsp;— то и работает.
              </p>
            </div>
            <div style={{ paddingBottom: 6 }}>
              {/* Billing toggle */}
              <div className="mono" style={{ fontSize: 11, letterSpacing: '0.14em', color: 'var(--ink-3)', textTransform: 'uppercase', marginBottom: 8 }}>
                Период оплаты
              </div>
              <div style={{ display: 'flex', border: '1px solid var(--ink)', borderRadius: 4, overflow: 'hidden', width: 'fit-content' }}>
                {[
                  { id: 'month', label: 'Помесячно' },
                  { id: 'year', label: 'Год (−20%)' },
                ].map((opt, i) => (
                  <button
                    key={opt.id}
                    onClick={() => setBilling(opt.id)}
                    style={{
                      padding: '10px 20px',
                      background: billing === opt.id ? 'var(--ink)' : 'transparent',
                      color: billing === opt.id ? 'var(--paper)' : 'var(--ink)',
                      border: 0, borderLeft: i ? '1px solid var(--ink)' : 0,
                      fontFamily: 'var(--font-body)', fontSize: 14, cursor: 'pointer',
                    }}
                  >
                    {opt.label}
                  </button>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Plans */}
      <section style={{ padding: '48px 0', borderBottom: '1px solid var(--rule)' }}>
        <div className="container-wide">
          <div className="m-grid-3to1" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, border: '1px solid var(--rule)' }}>
            {plans.map((p, i) => (
              <div key={p.name} style={{
                padding: 32,
                borderLeft: i ? '1px solid var(--rule)' : 0,
                background: p.highlight ? 'var(--ink)' : 'var(--paper)',
                color: p.highlight ? 'var(--paper)' : 'var(--ink)',
                position: 'relative',
              }}>
                {p.highlight && (
                  <span style={{
                    position: 'absolute', top: -1, left: -1, right: -1,
                    background: 'var(--ochre)', color: 'var(--ink)',
                    padding: '5px 12px', fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.16em', textTransform: 'uppercase',
                  }}>
                    {p.tag}
                  </span>
                )}

                {!p.highlight && (
                  <div className="mono" style={{ fontSize: 11, letterSpacing: '0.14em', color: 'var(--ink-3)', textTransform: 'uppercase', marginBottom: 16, marginTop: 12 }}>
                    {p.tag}
                  </div>
                )}
                {p.highlight && <div style={{ height: 38 }} />}

                <div className="serif" style={{ fontSize: 42, fontWeight: 700, letterSpacing: '-0.02em', lineHeight: 1, marginBottom: 8 }}>
                  {p.name}
                </div>
                <p style={{ fontSize: 14, opacity: p.highlight ? 0.7 : 1, color: p.highlight ? 'var(--paper)' : 'var(--ink-2)', marginBottom: 28, lineHeight: 1.5, minHeight: 42 }}>
                  {p.sub}
                </p>

                <div style={{ marginBottom: 28 }}>
                  <div className="serif" style={{ fontSize: 52, fontWeight: 700, letterSpacing: '-0.02em', lineHeight: 1 }}>
                    {rub(billing === 'month' ? p.mPrice : p.yPrice)}
                  </div>
                  <div className="mono" style={{ fontSize: 13, marginTop: 4, color: p.highlight ? 'rgba(244,240,230,0.6)' : 'var(--ink-3)', letterSpacing: '0.08em' }}>
                    {billing === 'month' ? 'в месяц, по подписке' : 'в год · экономия 20%'}
                  </div>
                </div>

                <button
                  className={p.highlight ? '' : 'btn btn-primary'}
                  style={p.highlight ? {
                    background: 'var(--paper)', color: 'var(--ink)', border: 0, padding: '14px 22px',
                    fontFamily: 'var(--font-body)', fontSize: 15, cursor: 'pointer', borderRadius: 4, width: '100%',
                  } : { width: '100%', justifyContent: 'center' }}
                  onClick={() => navigate('chat')}
                >
                  Открыть «{p.name}»
                </button>

                <div style={{ marginTop: 28, paddingTop: 24, borderTop: '1px solid ' + (p.highlight ? 'rgba(244,240,230,0.18)' : 'var(--rule)') }}>
                  {p.features.map((f, j) => (
                    <div key={j} style={{ display: 'flex', alignItems: 'flex-start', gap: 10, padding: '8px 0', fontSize: 14 }}>
                      <Glyph
                        name={f.ok ? 'check' : 'plus'}
                        size={14}
                        color={f.ok ? (p.highlight ? 'var(--ochre)' : 'var(--forest)') : (p.highlight ? 'rgba(244,240,230,0.3)' : 'var(--ink-4)')}
                      />
                      <span style={{
                        color: f.ok
                          ? (p.highlight ? 'var(--paper)' : 'var(--ink)')
                          : (p.highlight ? 'rgba(244,240,230,0.4)' : 'var(--ink-4)'),
                        textDecoration: f.ok ? 'none' : 'line-through',
                      }}>
                        {f.label}
                      </span>
                    </div>
                  ))}
                </div>
              </div>
            ))}
          </div>

          <p className="marginalia" style={{ marginTop: 18, textAlign: 'right' }}>
            <em>Прим.</em> Все цены указаны без НДС. Возможна оплата по счёту от юр. лица. Закрывающие документы&nbsp;— автоматически.
          </p>
        </div>
      </section>

      {/* Enterprise / one-off */}
      <section style={{ padding: '64px 0', background: 'var(--paper-2)', borderBottom: '1px solid var(--rule)' }}>
        <div className="container-wide" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
          <SidePanel
            no="06"
            title="Разовое поручение"
            sub="Без подписки, оплата за одно задание"
            body="Если вам нужно проверить один договор, написать одно письмо или посчитать одну экономику — необязательно покупать подписку. Можно оплатить разовое дело. От 290 ₽ за задание. Документы для бухгалтерии — приходят на email."
            cta="Оплатить разовое дело"
          />
          <SidePanel
            no="07"
            title="Корпус+: кастомный агент"
            sub="Для отраслей и команд от 30 человек"
            body="Соберём агента под вашу отрасль или процесс: подключим внутренние документы и регламенты, обучим на ваших кейсах, разместим в защищённом контуре. Срок — от двух недель."
            cta="Связаться с делегатом"
          />
        </div>
      </section>

      {/* Full feature table */}
      <FeatureTable />

      {/* Pricing FAQ */}
      <PricingFAQ />
    </div>
  );
}

function SidePanel({ no, title, sub, body, cta }) {
  return (
    <div style={{ background: 'var(--paper)', border: '1px solid var(--rule)', padding: 32 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 14 }}>
        <div className="mono" style={{ fontSize: 11, letterSpacing: '0.14em', color: 'var(--ink-3)', textTransform: 'uppercase' }}>
          № {no} · {sub}
        </div>
      </div>
      <h3 className="serif" style={{ fontSize: 32, fontWeight: 700, letterSpacing: '-0.015em', marginBottom: 14 }}>
        {title}
      </h3>
      <p style={{ fontSize: 15, color: 'var(--ink-2)', lineHeight: 1.6, marginBottom: 24 }}>
        {body}
      </p>
      <button className="btn-ghost btn" style={{ padding: '6px 0' }}>
        {cta} <Glyph name="arrow" size={14} />
      </button>
    </div>
  );
}

function FeatureTable() {
  const rows = [
    { label: 'Агентов в работе одновременно', vals: ['1', '3', '8 (все)'] },
    { label: 'Пользователей в команде', vals: ['1', '3', '10'] },
    { label: 'Запросов в месяц', vals: ['500', '2 000', '10 000'] },
    { label: 'База знаний (объём файлов)', vals: ['200 МБ', '2 ГБ', '20 ГБ'] },
    { label: 'Telegram-бот', vals: ['✓', '✓', '✓'] },
    { label: 'Веб-кабинет', vals: ['✓', '✓', '✓'] },
    { label: 'amoCRM, Битрикс24', vals: ['—', '✓', '✓'] },
    { label: 'Интеграция с 1С', vals: ['—', '✓', '✓'] },
    { label: 'API и вебхуки', vals: ['—', 'по запросу', '✓'] },
    { label: 'Закрывающие документы (УПД)', vals: ['✓', '✓', '✓'] },
    { label: 'Соответствие 152-ФЗ', vals: ['✓', '✓', '✓'] },
    { label: 'Серверы в РФ', vals: ['✓', '✓', '✓'] },
    { label: 'Индивидуальный SLA 99.9%', vals: ['—', '—', '✓'] },
    { label: 'Выделенный менеджер', vals: ['—', '—', '✓'] },
  ];

  return (
    <section style={{ padding: '64px 0', borderBottom: '1px solid var(--rule)' }}>
      <div className="container-wide">
        <SectionLabel no="VIII" label="Полное сравнение" />
        <h2 className="serif" style={{ fontSize: 'var(--fs-h2)', marginBottom: 40 }}>
          Сравнительная таблица
        </h2>

        <div style={{ border: '1px solid var(--rule)' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr', borderBottom: '2px solid var(--ink)' }}>
            <div style={{ padding: '16px 20px' }} className="eyebrow">Возможность</div>
            <div style={{ padding: '16px 20px', borderLeft: '1px solid var(--rule)', textAlign: 'center' }}>
              <div className="serif" style={{ fontSize: 20, fontWeight: 700 }}>Старт</div>
            </div>
            <div style={{ padding: '16px 20px', borderLeft: '1px solid var(--rule)', background: 'var(--forest-tint)', textAlign: 'center' }}>
              <div className="serif" style={{ fontSize: 20, fontWeight: 700, color: 'var(--forest)' }}>Команда</div>
            </div>
            <div style={{ padding: '16px 20px', borderLeft: '1px solid var(--rule)', textAlign: 'center' }}>
              <div className="serif" style={{ fontSize: 20, fontWeight: 700 }}>Корпус</div>
            </div>
          </div>

          {rows.map((r, i) => (
            <div key={i} style={{
              display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr',
              borderBottom: i < rows.length - 1 ? '1px solid var(--rule)' : 0,
              fontSize: 14,
            }}>
              <div style={{ padding: '14px 20px', color: 'var(--ink-2)' }}>{r.label}</div>
              {r.vals.map((v, j) => (
                <div key={j} style={{
                  padding: '14px 20px',
                  borderLeft: '1px solid var(--rule)',
                  textAlign: 'center',
                  fontFamily: v === '—' || v === '✓' ? 'var(--font-body)' : 'var(--font-mono)',
                  fontSize: v === '✓' ? 18 : 14,
                  color: v === '—' ? 'var(--ink-4)' : 'var(--ink)',
                  background: j === 1 ? 'rgba(31,58,54,0.04)' : 'transparent',
                  fontWeight: v === '—' ? 400 : 500,
                }}>{v}</div>
              ))}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function PricingFAQ() {
  const qa = [
    { q: 'Что значит «запрос»?', a: 'Один запрос — это одно обращение к агенту: вопрос, файл на анализ, задача на генерацию. Длина ответа на запрос не ограничена. Никаких токенов — считаем по делам, как и любую профессиональную услугу.' },
    { q: 'А если я превышу лимит запросов?', a: 'Получите уведомление за 50 запросов до конца лимита. Можно купить пакет дополнительных запросов или перейти на старший тариф. Не отключим вас посреди работы — у вас будет 7 дней на решение.' },
    { q: 'Как оплатить от ООО или ИП?', a: 'Принимаем оплату по счёту от юридического лица. Исполнитель — ИП Низамов Д.Ф. на УСН 6% (без НДС). После оплаты УПД и акт автоматически приходят на email и в раздел «Бухгалтерия» кабинета. Работаем с маркетплейс-селлерами, ИП на УСН и патенте, ООО на УСН/ОСН.' },
    { q: 'Можно отменить в любой момент?', a: 'Да. Подписка приостанавливается с конца оплаченного периода. Никаких штрафов за досрочный отказ. Деньги за неиспользованный месяц вернём по запросу.' },
    { q: 'Что входит в индивидуальный SLA?', a: 'На тарифе «Корпус» вы получаете гарантию 99.9% времени работы и поддержку с откликом до 1 часа в рабочее время. Каждый месяц приходит отчёт о доступности и задержках. В случае нарушения — компенсация по тарифной сетке.' },
    { q: 'Можно ли поменять состав агентов в «Команде»?', a: 'Да. В рамках тарифа «Команда» можно менять активных агентов раз в месяц. Если нужно чаще — переходите на «Корпус» (там доступны все девять).' },
  ];
  const [open, setOpen] = React.useState(-1);

  return (
    <section style={{ padding: '64px 0', background: 'var(--paper-2)' }}>
      <div className="container-wide">
        <SectionLabel no="IX" label="Вопросы по условиям" />
        <h2 className="serif" style={{ fontSize: 'var(--fs-h2)', marginBottom: 32, maxWidth: 700 }}>
          Шесть тонкостей,<br />о которых стоит знать.
        </h2>
        <div style={{ borderTop: '1px solid var(--ink)' }}>
          {qa.map((it, i) => (
            <div key={i} style={{ borderBottom: '1px solid var(--rule)' }}>
              <button
                onClick={() => setOpen(open === i ? -1 : i)}
                style={{
                  width: '100%', display: 'grid', gridTemplateColumns: '50px 1fr 30px',
                  alignItems: 'center', gap: 24, padding: '20px 8px',
                  background: 'transparent', border: 0, cursor: 'pointer', textAlign: 'left',
                  fontFamily: 'var(--font-body)',
                }}
              >
                <span className="mono" style={{ fontSize: 12, color: 'var(--ink-3)', letterSpacing: '0.1em' }}>
                  № {String(i + 1).padStart(2, '0')}
                </span>
                <span className="serif" style={{ fontSize: 20, fontWeight: 700, letterSpacing: '-0.01em' }}>
                  {it.q}
                </span>
                <span style={{ fontSize: 22, color: 'var(--ink-3)', transition: 'transform 200ms', transform: open === i ? 'rotate(45deg)' : 'none' }}>+</span>
              </button>
              {open === i && (
                <div style={{ padding: '0 8px 24px 82px', fontSize: 15, color: 'var(--ink-2)', lineHeight: 1.65, maxWidth: 800 }}>
                  {it.a}
                </div>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Pricing = Pricing;