// Pricing — от 10 000 ₽ / мес. Two tiers (Базовый / Полный) + -50% first month. Honest, no credits.

function Pricing() {
  const C = window.DT.color;
  const DT = window.DT;
  const tgUrl = 'https://t.me/digstaff_contact_bot';

  return (
    <section id="pricing" className="relative px-6 lg:px-12 py-28 lg:py-40">
      <div className="max-w-[1100px] mx-auto">
        <Reveal>
          <div className="mb-12 max-w-3xl">
            <Eyebrow className="mb-6">Цена</Eyebrow>
            <h2 className="font-medium tracking-[-0.035em] leading-[1.0]"
              style={{ fontFamily:DT.font.display, color:C.ink, fontSize:'clamp(40px, 5.5vw, 84px)' }}>
              От{' '}
              <span style={{ fontFamily:DT.font.serif, fontStyle:'italic', color:C.grass, fontWeight:300 }}>
                10 000 ₽
              </span>
              {' '}в месяц.
              <br/>
              <span style={{ color:C.inkMute }}>Без credits, токенов и счётчиков.</span>
            </h2>
            <p className="mt-6 text-[16px] leading-[1.55] max-w-[58ch]" style={{ color:C.inkSoft }}>
              Фикс/мес — вы платите за команду, не за «количество промптов». Сколько задач отдадите — столько и сделают.
            </p>
          </div>
        </Reveal>

        <Reveal delay={150}>
          <div className="rounded-[16px] p-8 lg:p-10"
            style={{
              background:C.surface,
              border:`1px solid ${C.line}`,
              boxShadow:'0 24px 60px -28px rgba(19,17,14,0.18), 0 6px 16px rgba(19,17,14,0.04)',
            }}>

            {/* Two tiers */}
            <div className="grid grid-cols-1 md:grid-cols-2 gap-8 pb-8"
              style={{ borderBottom:`1px solid ${C.lineSoft}` }}>
              <div>
                <div className="flex items-center gap-2 mb-2">
                  <div className="text-[12px] uppercase tracking-[0.16em] font-bold"
                    style={{ color:C.inkMute, fontFamily:DT.font.mono }}>Базовый офис</div>
                  <span className="text-[10px] uppercase tracking-[0.12em] px-2 py-0.5 rounded-full font-bold"
                    style={{ background:`${C.grass}14`, color:C.grassDeep, fontFamily:DT.font.mono }}>
                    старт
                  </span>
                </div>
                <div className="text-[15.5px] mb-5" style={{ color:C.inkSoft }}>2–3 сотрудника · 1–2 интеграции</div>
                <div className="flex items-baseline gap-3 mb-5">
                  <span className="text-[48px] lg:text-[56px] font-medium tracking-[-0.03em] leading-none"
                    style={{ fontFamily:DT.font.display, color:C.ink }}>10 000 ₽</span>
                  <span className="text-[13px]" style={{ color:C.inkMute }}>в месяц</span>
                </div>
                <ul className="space-y-2 text-[13.5px]" style={{ color:C.inkSoft }}>
                  {[
                    'Помощник + бухгалтер + продажник (на выбор)',
                    'Подключим 1С / amoCRM / банк',
                    'Отдельный сервер, 152-ФЗ',
                  ].map(t=>(
                    <li key={t} className="flex items-start gap-2">
                      <Icon name="Check" size={14} stroke={2.4} color={C.grass}/>
                      <span>{t}</span>
                    </li>
                  ))}
                </ul>
              </div>

              <div>
                <div className="flex items-center gap-2 mb-2">
                  <div className="text-[12px] uppercase tracking-[0.16em] font-bold"
                    style={{ color:C.inkMute, fontFamily:DT.font.mono }}>Полный офис</div>
                  <span className="text-[10px] uppercase tracking-[0.12em] px-2 py-0.5 rounded-full font-bold"
                    style={{ background:`${C.accent}14`, color:C.accent, fontFamily:DT.font.mono }}>
                    enterprise
                  </span>
                </div>
                <div className="text-[15.5px] mb-5" style={{ color:C.inkSoft }}>10 сотрудников · все интеграции</div>
                <div className="flex items-baseline gap-3 mb-5">
                  <span className="text-[48px] lg:text-[56px] font-medium italic tracking-[-0.02em] leading-none"
                    style={{ fontFamily:DT.font.serif, color:C.ink }}>обсудим</span>
                  <span className="text-[13px]" style={{ color:C.inkMute }}>под ваш кейс</span>
                </div>
                <ul className="space-y-2 text-[13.5px]" style={{ color:C.inkSoft }}>
                  {[
                    'Все доступные роли — и новые без доплат',
                    'Весь русский стек (8 групп интеграций)',
                    'NDA, DPA, кастомные регламенты',
                  ].map(t=>(
                    <li key={t} className="flex items-start gap-2">
                      <Icon name="Check" size={14} stroke={2.4} color={C.grass}/>
                      <span>{t}</span>
                    </li>
                  ))}
                </ul>
              </div>
            </div>

            {/* Discount band */}
            <div className="my-8 p-5 lg:p-6 rounded-[12px]"
              style={{ background:'rgba(194,84,48,0.06)', border:'1px solid rgba(194,84,48,0.22)' }}>
              <div className="flex flex-wrap items-baseline gap-3 mb-2">
                <span className="text-[11px] uppercase tracking-[0.18em] font-bold"
                  style={{ color:C.accent, fontFamily:DT.font.mono }}>Первый месяц</span>
                <span className="text-[36px] lg:text-[44px] font-medium italic leading-none"
                  style={{ fontFamily:DT.font.serif, color:C.accent, fontWeight:500 }}>−50%</span>
              </div>
              <p className="text-[14px] leading-[1.55] max-w-[64ch]" style={{ color:C.inkSoft }}>
                Платите половину при привязке карты. Зашло — продолжаете по обычной цене. Нет — отписываетесь до конца месяца, сервер сносим, ничего больше не списываем.
              </p>
            </div>

            {/* Checklist */}
            <ul className="space-y-2.5 mb-8">
              {[
                'Никаких credits, токенов и счётчиков. Команда — а не «количество запросов».',
                'Новые инструменты и роли — без доплат. Расширяем по ходу.',
                'Поддержка напрямую от команды digstaff в том же чате.',
                'Снос — без вопросов и удерживающих звонков.',
              ].map(t=>(
                <li key={t} className="flex items-start gap-2.5 text-[14.5px]" style={{ color:C.inkSoft }}>
                  <Icon name="Check" size={16} stroke={2.2} color={C.grass}/>
                  <span>{t}</span>
                </li>
              ))}
            </ul>

            <div className="flex flex-wrap items-center gap-3">
              <Btn variant="primary" size="lg" icon="ArrowRight" as="a" href={tgUrl} target="_blank" rel="noopener">
                Узнать цену под мой бизнес
              </Btn>
              <span className="text-[12px] italic" style={{ color:C.inkMute, fontFamily:DT.font.serif }}>
                Точную цифру обсудим в чате с агентом — за 10 минут.
              </span>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

window.Pricing = Pricing;