// DemoScenario — full chat-thread visualization showing how 3 specialists collaborate on one request.
// Visual: generic messenger-style bubble thread (digstaff's own design idiom, not a 1:1 copy of any product).

function DemoScenario() {
  const C = window.DT.color;
  const E = window.EMPLOYEES;
  const lawyer = E.find(e=>e.id==='lawyer');
  const accountant = E.find(e=>e.id==='accountant');
  const records = E.find(e=>e.id==='records');
  const tgUrl = 'https://t.me/digstaff_contact_bot';

  return (
    <section id="demo" className="relative px-6 lg:px-12 py-28 lg:py-40"
      style={{ background:C.cream }}>
      <div className="max-w-[1100px] mx-auto">

        <Reveal>
          <div className="mb-14 max-w-3xl">
            <Eyebrow className="mb-6">Демо-сценарий</Eyebrow>
            <h2 className="font-medium tracking-[-0.035em] leading-[1.0]"
              style={{ fontFamily:window.DT.font.display, color:C.ink, fontSize:'clamp(38px, 5vw, 76px)' }}>
              За{' '}
              <span style={{ fontFamily:window.DT.font.serif, fontStyle:'italic', fontWeight:300, color:C.grass }}>
                40 секунд
              </span>
              {' '}— и юрист, и бухгалтер, и задачник.
            </h2>
            <p className="mt-6 text-[16px] leading-[1.55] max-w-[58ch]" style={{ color:C.inkSoft }}>
              Одна реальная переписка в общем чате компании. Никто не открывает 1С, kad.arbitr и калькулятор НДС руками — это делают сотрудники, у вас в чате.
            </p>
          </div>
        </Reveal>

        <Reveal delay={150}>
          <div className="rounded-[16px] overflow-hidden"
            style={{ background:C.surface, border:`1px solid ${C.line}`,
              boxShadow:'0 30px 80px -28px rgba(19,17,14,0.18), 0 6px 20px rgba(19,17,14,0.06)' }}>

            {/* chat header */}
            <div className="flex items-center justify-between px-6 py-4"
              style={{ borderBottom:`1px solid ${C.line}`, background:C.creamHi }}>
              <div className="flex items-center gap-3">
                <span className="w-10 h-10 rounded-xl flex items-center justify-center text-[18px]"
                  style={{ background:`${C.grass}1F`, border:`1px solid ${C.grass}38` }}>🎯</span>
                <div>
                  <div className="text-[15px] font-bold leading-tight" style={{ color:C.ink, fontFamily:window.DT.font.display }}>
                    Общий чат
                  </div>
                  <div className="text-[11.5px] tabular-nums mt-0.5" style={{ color:C.inkMute, fontFamily:window.DT.font.mono }}>
                    AI-офис · ООО «Ромашка» · 12 топиков
                  </div>
                </div>
              </div>
              <div className="hidden sm:flex items-center gap-2">
                <span className="w-1.5 h-1.5 rounded-full animate-pulse" style={{ background:C.grass }}/>
                <span className="text-[10.5px] uppercase tracking-[0.14em] font-bold"
                  style={{ color:C.grassDeep, fontFamily:window.DT.font.mono }}>
                  10 онлайн · сейчас 10:14
                </span>
              </div>
            </div>

            {/* day separator */}
            <div className="px-6 pt-5">
              <ChatMessage system emoji="📅">Сегодня · вторник</ChatMessage>
            </div>

            {/* thread */}
            <div className="px-6 pb-2">
              <ChatMessage emoji="🧑" name="Вы" color={C.ink} time="10:14" ownDir>
                Иван прислал договор поставки от ООО «Восход». Проверь и посчитай НДС с 1 800 000.
              </ChatMessage>

              <ChatMessage emoji="🎯" name="Оркестратор" color={C.grassDeep} time="10:14">
                Принял. Передаю: <b>юрист</b> посмотрит договор, <b>бухгалтер</b> посчитает НДС, <b>делопроизводитель</b> занесёт документ в реестр.
              </ChatMessage>

              <ChatMessage emoji={lawyer.emoji} name={lawyer.short} color={lawyer.dot} time="10:14">
{`Договор № 2026-118 от ООО «Восход» — ИНН 7707083893 (действует, без долгов).
Нашёл 3 момента:
 • п.5.2 — пеня 0.5% / день (на рынке ≈ 0.1%)
 • п.7 — нет акта приёма-передачи
 • п.11 — подсудность чужая (Екатеринбург)
Готовлю замечания в .docx с track-changes по шаблону «поставка-RU-2024».`}
              </ChatMessage>

              <ChatMessage emoji={accountant.emoji} name={accountant.short} color={accountant.dot} time="10:14" mono>
{`НДС 20% из 1 800 000 ₽:
   НДС:        300 000 ₽
   Без НДС:  1 500 000 ₽

Контрагент по ЕГРЮЛ + kad.arbitr — чисто.
Истории арбитражных споров нет.`}
              </ChatMessage>

              <ChatMessage emoji={records.emoji} name={records.short} color={records.dot} time="10:14">
                Документ внесён в реестр входящих: «Договор № 2026-118 / ООО «Восход» / 1 800 000 ₽». Копия на Я.Диске.
              </ChatMessage>

              <ChatMessage system emoji="📋" time="10:14">
                Новая задача: «Договор № 2026-118 — замечания юриста» — ждёт вашего «ок» в /tasks
              </ChatMessage>
            </div>

            {/* bottom summary */}
            <div className="px-6 py-5 grid grid-cols-1 md:grid-cols-[1fr_auto] gap-4 items-center"
              style={{ borderTop:`1px solid ${C.line}`, background:`${C.grass}08` }}>
              <div>
                <div className="text-[11px] uppercase tracking-[0.16em] font-bold mb-1.5"
                  style={{ color:C.grassDeep, fontFamily:window.DT.font.mono }}>
                  Итого за 40 секунд
                </div>
                <div className="text-[15px] leading-[1.5]" style={{ color:C.ink }}>
                  3 специалиста · 1 задача · <span style={{ fontFamily:window.DT.font.serif, fontStyle:'italic', color:C.grassDeep, fontWeight:500 }}>0 переключений между системами</span>.
                </div>
              </div>
              <Btn variant="grass" size="md" icon="ArrowRight" as="a" href={tgUrl} target="_blank" rel="noopener">
                Хочу так же
              </Btn>
            </div>
          </div>
        </Reveal>

        <Reveal delay={250}>
          <p className="mt-10 text-[12.5px] italic max-w-[64ch] mx-auto text-center"
            style={{ color:C.inkMute, fontFamily:window.DT.font.serif }}>
            Сценарий из живого тест-клиента. Реальные ИНН, проверки и расчёты делаются настоящими инструментами — 1С, ЕГРЮЛ, kad.arbitr, Точка Банк.
          </p>
        </Reveal>
      </div>
    </section>
  );
}

window.DemoScenario = DemoScenario;