// v9 sections: Nav · Employees · HowItWorks · ActivityFeed · Approvals · Integrations · Security · FinalCta · Footer.
// Pilot dropped (its 5-step list duplicated HowItWorks — TZ §12 recommends keeping HowItWorks only).

function Nav() {
  const [scrolled,setScrolled] = React.useState(false);
  React.useEffect(()=>{
    const onScroll = ()=>setScrolled(window.scrollY > 8);
    window.addEventListener('scroll', onScroll, { passive:true });
    return ()=>window.removeEventListener('scroll', onScroll);
  },[]);
  const C = window.DT.color;
  const DT = window.DT;
  const links = [
    ['Сотрудники','#employees'],
    ['Демо','#demo'],
    ['Как работает','#how'],
    ['Сравнение','#comparison'],
    ['Цена','#pricing'],
    ['Безопасность','#security'],
  ];
  const tgUrl = 'https://t.me/digstaff_contact_bot';
  return (
    <nav className="fixed top-0 left-0 right-0 z-50 transition-all duration-300"
      style={{
        background: scrolled?'rgba(247,244,236,0.85)':'transparent',
        backdropFilter: scrolled?'blur(20px) saturate(180%)':'none',
        WebkitBackdropFilter: scrolled?'blur(20px) saturate(180%)':'none',
        borderBottom: scrolled?'1px solid rgba(19,17,14,0.08)':'1px solid transparent',
      }}>
      <div className="max-w-[1400px] mx-auto h-[68px] px-6 lg:px-12 flex items-center justify-between">
        <a href="#top" className="flex items-center gap-2.5">
          <PortalLogoMark size={28}/>
          <span className="text-[16px] tracking-[-0.018em]" style={{ fontFamily:DT.font.display, color:C.ink }}>
            <span style={{ fontWeight:700 }}>dig</span><span style={{ fontWeight:500 }}>staff</span>
          </span>
        </a>
        <div className="hidden lg:flex items-center gap-7">
          {links.map(([l,h])=>(
            <a key={h} href={h} className="text-[13px] font-semibold transition-colors"
              style={{ color:C.inkSoft }}
              onMouseEnter={e=>e.target.style.color=C.ink}
              onMouseLeave={e=>e.target.style.color=C.inkSoft}>{l}</a>
          ))}
        </div>
        <div className="flex items-center gap-2">
          <Btn variant="ghost" size="sm" as="a" href="mailto:info@digstaff.ru"
            className="hidden md:inline-flex">info@digstaff.ru</Btn>
          <Btn variant="primary" size="sm" icon="ArrowRight" as="a" href={tgUrl} target="_blank" rel="noopener">
            Попробовать с агентом
          </Btn>
        </div>
      </div>
    </nav>
  );
}

function EmployeeCard({ e, idx, total }) {
  const C = window.DT.color;
  const DT = window.DT;
  return (
    <div className="relative p-6 lg:p-7 flex flex-col h-full transition-all duration-200 hover:-translate-y-1"
      style={{ background:C.surface, border:'1px solid rgba(19,17,14,0.08)', borderRadius:16,
        boxShadow:'0 12px 32px -16px rgba(19,17,14,0.10)' }}>
      <div className="flex items-start justify-between mb-5">
        <span className="text-[10px] uppercase tracking-[0.16em] font-bold tabular-nums"
          style={{ color:C.inkMute, fontFamily:DT.font.mono }}>
          {'№ '}{String(idx+1).padStart(2,'0')}{' / '}{String(total).padStart(2,'0')}
        </span>
        <div className="flex items-center gap-1.5 px-2 py-0.5 rounded-full"
          style={{ background:'rgba(92,138,58,0.10)' }}>
          <span className="w-1.5 h-1.5 rounded-full animate-pulse" style={{ background:C.grass }}/>
          <span className="text-[9px] uppercase tracking-[0.12em] font-bold"
            style={{ color:C.grassDeep, fontFamily:DT.font.mono }}>онлайн</span>
        </div>
      </div>

      <div className="flex items-center gap-3 mb-3">
        <span className="w-11 h-11 rounded-xl flex items-center justify-center text-[24px]"
          style={{ background:`${e.dot}14`, border:`1px solid ${e.dot}28` }}>
          {e.emoji}
        </span>
        <span className="text-[10px] uppercase tracking-[0.14em] font-bold" style={{ color:e.dot, fontFamily:DT.font.mono }}>
          {e.short}
        </span>
      </div>

      <h3 className="text-[20px] font-medium tracking-[-0.02em] leading-[1.2] mb-2.5"
        style={{ fontFamily:DT.font.display, color:C.ink }}>
        {e.name}
      </h3>
      <p className="text-[13.5px] leading-[1.55] mb-4" style={{ color:C.inkSoft }}>{e.desc}</p>

      {/* Tools chips */}
      <div className="flex flex-wrap gap-1.5 mb-4">
        {e.tools.slice(0,4).map(t=>(
          <span key={t} className="text-[11px] px-2 py-0.5 rounded-md tabular-nums"
            style={{
              background:'rgba(19,17,14,0.05)',
              color:C.inkSoft,
              fontFamily:DT.font.mono,
              fontWeight:500,
            }}>
            {t}
          </span>
        ))}
      </div>

      {/* Current task — alive office signal */}
      <div className="p-3 rounded-lg mb-4"
        style={{ background:`${e.dot}0E`, border:`1px solid ${e.dot}28` }}>
        <div className="text-[9px] uppercase tracking-[0.14em] font-bold mb-1"
          style={{ color:e.dot, fontFamily:DT.font.mono }}>
          {'Сейчас в работе'}
        </div>
        <div className="text-[12.5px] leading-[1.4]" style={{ color:C.ink }}>{e.now}</div>
      </div>

      <div className="mt-auto pt-4 space-y-1.5" style={{ borderTop:'1px solid rgba(19,17,14,0.08)' }}>
        <div className="text-[10px] uppercase tracking-[0.14em] font-bold mb-1.5"
          style={{ color:C.inkMute, fontFamily:DT.font.mono }}>
          {'Примеры задач'}
        </div>
        {e.examples.slice(0,3).map((x,i)=>(
          <div key={i} className="flex items-start gap-2 text-[12px]" style={{ color:C.inkSoft }}>
            <span className="mt-[7px] w-1 h-1 rounded-full flex-shrink-0" style={{ background:e.dot }}/>
            <span>{x}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

// "+11" placeholder card — new roles without extra fees.
function EmployeeMoreCard() {
  const C = window.DT.color;
  const DT = window.DT;
  const tgUrl = 'https://t.me/digstaff_contact_bot';
  return (
    <a href={tgUrl} target="_blank" rel="noopener"
      className="relative p-6 lg:p-7 flex flex-col h-full transition-all duration-200 hover:-translate-y-1 group"
      style={{
        background:'transparent',
        border:`1.5px dashed ${C.line}`,
        borderRadius:16,
      }}>
      <div className="flex items-center gap-2 mb-5">
        <span className="text-[10px] uppercase tracking-[0.16em] font-bold tabular-nums"
          style={{ color:C.inkMute, fontFamily:DT.font.mono }}>+ новая роль</span>
      </div>
      <span className="w-11 h-11 rounded-xl flex items-center justify-center mb-3"
        style={{ background:'rgba(19,17,14,0.04)', border:`1px solid ${C.line}` }}>
        <Icon name="Plus" size={20} stroke={2} color={C.inkSoft}/>
      </span>
      <h3 className="text-[20px] font-medium tracking-[-0.02em] leading-[1.2] mb-2.5"
        style={{ fontFamily:DT.font.display, color:C.ink }}>
        Новые роли — <span style={{ fontFamily:DT.font.serif, fontStyle:'italic', fontWeight:400, color:C.grass }}>без доплат</span>
      </h3>
      <p className="text-[13.5px] leading-[1.55] mb-4" style={{ color:C.inkSoft }}>
        Появилась новая роль или интеграция в продукте — она доступна всем клиентам в рамках текущей подписки. Не покупаете «модули» отдельно.
      </p>
      <div className="mt-auto pt-4 flex items-center gap-2 text-[12px] uppercase tracking-[0.14em] font-bold"
        style={{ borderTop:`1px dashed ${C.line}`, color:C.grassDeep, fontFamily:DT.font.mono }}>
        Поговорить с агентом <Icon name="ArrowUpRight" size={12} stroke={2.2}/>
      </div>
    </a>
  );
}

function Employees() {
  const C = window.DT.color;
  const DT = window.DT;
  const total = window.EMPLOYEES.length;
  return (
    <section id="employees" className="relative px-6 lg:px-12 py-28 lg:py-40">
      <div className="max-w-[1400px] mx-auto">
        <Reveal>
          <div className="mb-14 max-w-3xl">
            <Eyebrow className="mb-6">Команда · 10 специалистов</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', fontWeight:300, color:C.grass }}>
                10 разных специалистов
              </span>
              ,<br/>
              а не один универсальный бот.
            </h2>
            <p className="mt-6 text-[17px] leading-[1.5] max-w-[60ch]" style={{ color:C.inkSoft }}>
              У каждого — своя должностная инструкция, свой набор инструментов и своё место в чате компании. В базовый офис подключаем 2–3, в полный — всех.
            </p>
          </div>
        </Reveal>

        <Reveal delay={150}>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
            {window.EMPLOYEES.map((e,i)=>(
              <EmployeeCard key={e.id} e={e} idx={i} total={total}/>
            ))}
            <EmployeeMoreCard/>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function HowSide({ kind }) {
  const C = window.DT.color;
  const DT = window.DT;

  if (kind === 'agent') {
    return (
      <div className="p-4 rounded-xl"
        style={{ background:C.surface, border:'1px solid rgba(19,17,14,0.08)' }}>
        <div className="flex items-center gap-2 mb-3">
          <span className="w-7 h-7 rounded-lg flex items-center justify-center text-[13px]"
            style={{ background:`${C.grass}1F`, border:`1px solid ${C.grass}38` }}>🎯</span>
          <div className="flex-1">
            <div className="text-[12px] font-bold" style={{ color:C.ink, fontFamily:DT.font.display }}>digstaff контакт</div>
            <div className="text-[10px] tabular-nums" style={{ color:C.inkMute, fontFamily:DT.font.mono }}>агент в Telegram · 10:14</div>
          </div>
          <span className="w-1.5 h-1.5 rounded-full animate-pulse" style={{ background:C.grass }}/>
        </div>
        <div className="p-3 rounded-lg text-[12.5px] leading-[1.5]"
          style={{ background:`${C.grass}08`, border:`1px solid ${C.grass}28`, color:C.ink, borderRadius:'12px 12px 12px 4px' }}>
          Привет! Я ваш digstaff-агент. Расскажите про бизнес — покажу, что под вас умеют сотрудники.
        </div>
        <div className="flex items-center gap-1 mt-3 pl-1">
          {[0,1,2].map(i=>(
            <span key={i} className="w-1.5 h-1.5 rounded-full"
              style={{ background:C.inkMute, opacity:0.4 + i*0.2, animation:`pulse 1.4s ${i*0.2}s infinite` }}/>
          ))}
          <span className="text-[10px] ml-2" style={{ color:C.inkMute, fontFamily:DT.font.mono }}>печатает…</span>
        </div>
      </div>
    );
  }

  if (kind === 'setup') {
    const items = [
      ['Сервер развернут', true],
      ['Mini App в Telegram создан', true],
      ['Боты-сотрудники подключены к Guest Mode', true],
      ['1С подключён через HTTP-сервис', true],
      ['amoCRM авторизован', true],
      ['ЕГРЮЛ-токен · ждёт от вас', false],
    ];
    return (
      <div className="p-4 rounded-xl"
        style={{ background:C.surface, border:'1px solid rgba(19,17,14,0.08)' }}>
        <div className="text-[10px] uppercase tracking-[0.14em] font-bold mb-3"
          style={{ color:C.inkMute, fontFamily:DT.font.mono }}>
          Чек-лист подключения
        </div>
        <div className="space-y-2">
          {items.map(([t, done], i)=>(
            <div key={i} className="flex items-center gap-2.5">
              {done ? (
                <span className="w-5 h-5 rounded-md flex items-center justify-center flex-shrink-0"
                  style={{ background:`${C.grass}18`, color:C.grassDeep }}>
                  <Icon name="Check" size={12} stroke={2.6}/>
                </span>
              ) : (
                <span className="w-5 h-5 rounded-md flex items-center justify-center flex-shrink-0"
                  style={{ background:`${C.warn}1A`, color:C.warn, fontFamily:DT.font.mono, fontSize:11, fontWeight:700 }}>
                  …
                </span>
              )}
              <span className="text-[12.5px]" style={{ color: done ? C.ink : C.inkMute, textDecoration: 'none' }}>
                {t}
              </span>
            </div>
          ))}
        </div>
      </div>
    );
  }

  if (kind === 'pricing') {
    return (
      <div className="p-4 rounded-xl relative overflow-hidden"
        style={{ background:C.surface, border:'1px solid rgba(194,84,48,0.20)' }}>
        <span className="absolute top-3 right-3 px-2 py-0.5 text-[10px] uppercase tracking-[0.14em] font-bold rounded-full"
          style={{ background:C.accent, color:'#FFFFFF', fontFamily:DT.font.mono }}>
          −50%
        </span>
        <div className="text-[10px] uppercase tracking-[0.14em] font-bold mb-1.5"
          style={{ color:C.inkMute, fontFamily:DT.font.mono }}>
          Базовый офис · первый месяц
        </div>
        <div className="flex items-baseline gap-2 mb-2">
          <span className="text-[28px] font-medium tabular-nums tracking-[-0.02em] leading-none"
            style={{ fontFamily:DT.font.display, color:C.ink }}>
            5 000 ₽
          </span>
          <span className="text-[14px] line-through tabular-nums"
            style={{ color:C.inkMute, fontFamily:DT.font.mono }}>10 000 ₽</span>
        </div>
        <p className="text-[12px] leading-[1.45]" style={{ color:C.inkSoft }}>
          При привязке карты. Не зашло — отписываетесь до конца месяца, ничего больше не списываем.
        </p>
      </div>
    );
  }

  return null;
}

function HowItWorks() {
  const C = window.DT.color;
  const DT = window.DT;
  const steps = [
    { n:'01', title:'Поговорите с агентом',
      body:'В Telegram, прямо сейчас. Он покажет, что умеет команда, спросит про вашу систему, прикинет конфигурацию. ≈ 10 минут.',
      side:'agent' },
    { n:'02', title:'За 1–2 дня — ваш офис',
      body:'Поднимаем отдельный сервер, разворачиваем Mini App вашего AI-офиса в Telegram, подключаем 12 ботов-сотрудников для @-упоминания в любом чате, авторизуем 2–3 ваших сервиса (1С, CRM, банк — на выбор).',
      side:'setup' },
    { n:'03', title:'Месяц — со скидкой 50%',
      body:'Платите половину при привязке карты, оцениваете на своей реальной работе. Зашло — продолжаем по обычной цене. Нет — отписываетесь, сервер сносим.',
      side:'pricing' },
  ];
  return (
    <section id="how" className="relative px-6 lg:px-12 py-28 lg:py-40"
      style={{ background:C.creamHi }}>
      <div className="max-w-[1400px] mx-auto">
        <Reveal>
          <div className="mb-16 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', fontWeight:300, color:C.grass }}>Дни</span>
              , не недели.
            </h2>
            <p className="mt-6 text-[16px] leading-[1.55] max-w-[58ch]" style={{ color:C.inkSoft }}>
              Поговорите с агентом сейчас. Через 1–2 дня — ваш офис в работе. Первый месяц — со скидкой.
            </p>
          </div>
        </Reveal>

        <div className="space-y-4">
          {steps.map((s,i)=>(
            <Reveal key={s.n} delay={i*80}>
              <div className="grid grid-cols-1 lg:grid-cols-[80px_1fr_400px] gap-6 lg:gap-10 items-start py-8"
                style={{ borderTop:'1px solid rgba(19,17,14,0.10)' }}>
                <div className="text-[36px] lg:text-[44px] font-medium tabular-nums tracking-[-0.03em] leading-none"
                  style={{ color:C.grass, fontFamily:DT.font.display }}>
                  {s.n}
                </div>
                <div>
                  <h3 className="text-[24px] lg:text-[32px] font-medium tracking-[-0.02em] leading-[1.15] mb-3"
                    style={{ fontFamily:DT.font.display, color:C.ink }}>
                    {s.title}
                  </h3>
                  <p className="text-[15px] leading-[1.55] max-w-[52ch]" style={{ color:C.inkSoft }}>{s.body}</p>
                </div>
                <HowSide kind={s.side}/>
              </div>
            </Reveal>
          ))}
          <div style={{ borderTop:'1px solid rgba(19,17,14,0.10)' }}/>
        </div>

        <Reveal delay={300}>
          <div className="mt-12 flex flex-wrap items-center gap-3">
            <Btn variant="grass" size="lg" icon="ArrowRight" as="a" href="https://t.me/digstaff_contact_bot" target="_blank" rel="noopener">
              Поговорить с агентом
            </Btn>
            <span className="text-[12.5px] italic" style={{ color:C.inkMute, fontFamily:DT.font.serif }}>
              открывается в Telegram · 10 минут
            </span>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function ActivityFeed() {
  const C = window.DT.color;
  const DT = window.DT;
  const events = window.ACTIVITY;
  return (
    <section id="activity" className="relative px-6 lg:px-12 py-28 lg:py-40"
      style={{ background:C.panel, color:C.cream }}>
      <div className="max-w-[1400px] mx-auto">
        <Reveal>
          <div className="mb-14 max-w-3xl">
            <Eyebrow dark className="mb-6">Один общий чат · десять специалистов</Eyebrow>
            <h2 className="font-medium tracking-[-0.035em] leading-[1.0]"
              style={{ fontFamily:DT.font.display, color:C.cream, fontSize:'clamp(40px, 5.5vw, 84px)' }}>
              Вы видите работу,<br/>
              <span style={{ fontFamily:DT.font.serif, fontStyle:'italic', fontWeight:300, color:'rgba(247,244,236,0.6)' }}>
                а не верите в магию.
              </span>
            </h2>
            <p className="mt-6 text-[16px] leading-[1.55] max-w-[60ch]" style={{ color:'rgba(247,244,236,0.7)' }}>
              Внутри Mini App — общий чат, где сотрудники подключаются последовательно. В любом групповом чате — упомяните <span style={{ fontFamily:DT.font.mono, color:'rgba(247,244,236,0.9)' }}>@digstaff_lawyer_bot</span> и он включится прямо в обсуждение. Видно, кто что делает, что ждёт вашего «ок», где ошибка. Без чёрного ящика.
            </p>
          </div>
        </Reveal>

        <Reveal delay={150}>
          <div className="grid grid-cols-1 lg:grid-cols-[1fr_360px] gap-6">
            {/* Main feed */}
            <div className="rounded-[14px] overflow-hidden"
              style={{ background:'rgba(247,244,236,0.03)', border:'1px solid rgba(247,244,236,0.10)' }}>
              <div className="px-5 py-3 flex items-center justify-between"
                style={{ borderBottom:'1px solid rgba(247,244,236,0.08)', background:'rgba(247,244,236,0.02)' }}>
                <div className="flex items-center gap-3">
                  <span className="w-7 h-7 rounded-lg flex items-center justify-center text-[14px]"
                    style={{ background:'rgba(92,138,58,0.16)', border:'1px solid rgba(92,138,58,0.35)' }}>🏢</span>
                  <div>
                    <div className="text-[13px] font-bold leading-tight"
                      style={{ color:'rgba(247,244,236,0.92)', fontFamily:DT.font.display }}>
                      AI-офис · ООО «Ромашка»
                    </div>
                    <div className="text-[10.5px] tabular-nums"
                      style={{ color:'rgba(247,244,236,0.5)', fontFamily:DT.font.mono }}>
                      Mini App · сегодня · вторник
                    </div>
                  </div>
                </div>
                <div className="hidden md:flex items-center gap-3">
                  {[['В работе','#3970C2'],['Выполнено',C.grass],['Подтвердить',C.accent],['Внимание',C.warn]].map(([l,c])=>(
                    <span key={l} className="flex items-center gap-1.5 text-[10px] uppercase tracking-[0.10em]"
                      style={{ color:'rgba(247,244,236,0.65)', fontFamily:DT.font.mono }}>
                      <span className="w-1.5 h-1.5 rounded-full" style={{ background:c }}/> {l}
                    </span>
                  ))}
                </div>
              </div>
              {/* Pinned */}
              <div className="px-5 py-2.5 flex items-center gap-2 text-[11.5px]"
                style={{ borderBottom:'1px solid rgba(247,244,236,0.08)', background:'rgba(194,84,48,0.07)', color:'rgba(247,244,236,0.85)' }}>
                <span className="text-[12px]">📌</span>
                <span style={{ fontFamily:DT.font.body }}>
                  <b>Закреплено:</b> Все внешние действия — через подтверждение в <span style={{ fontFamily:DT.font.mono }}>/tasks</span>
                </span>
              </div>
              <div className="px-5 py-2">
                {events.map((ev,i)=>(<FeedRow key={i} ev={ev} dark/>))}
              </div>
            </div>

            {/* Topics list */}
            <div className="rounded-[14px] overflow-hidden h-fit"
              style={{ background:'rgba(247,244,236,0.03)', border:'1px solid rgba(247,244,236,0.10)' }}>
              <div className="px-5 py-3" style={{ borderBottom:'1px solid rgba(247,244,236,0.08)' }}>
                <div className="text-[10.5px] uppercase tracking-[0.16em] font-bold"
                  style={{ color:'rgba(247,244,236,0.85)', fontFamily:DT.font.mono }}>
                  Топики · 10 + Общий + Задачник
                </div>
                <div className="text-[11px] mt-1" style={{ color:'rgba(247,244,236,0.5)' }}>
                  Каждый специалист — отдельный канал
                </div>
              </div>
              <div className="px-3 py-2">
                <TopicsList dark/>
              </div>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function Approvals() {
  const C = window.DT.color;
  const DT = window.DT;
  const items = window.APPROVALS;
  return (
    <section id="approvals" className="relative px-6 lg:px-12 py-28 lg:py-32">
      <div className="max-w-[1400px] mx-auto">
        <Reveal>
          <div className="grid grid-cols-1 lg:grid-cols-[1fr_1.1fr] gap-12 lg:gap-16 items-start">
            <div className="lg:sticky lg:top-28">
              <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(36px, 4.5vw, 64px)' }}>
                AI не действует<br/>
                <span style={{ fontFamily:DT.font.serif, fontStyle:'italic', fontWeight:300, color:C.accent }}>
                  без вашего одобрения.
                </span>
              </h2>
              <p className="mt-6 text-[16px] leading-[1.55] max-w-[44ch]" style={{ color:C.inkSoft }}>
                Перед каждым внешним действием — карточка подтверждения в чате. Внутри: что собираемся сделать, на сколько денег, к кому. Жмёте <b>«подтвердить»</b> / <b>«изменить»</b> / <b>«отклонить»</b>.
              </p>
              <div className="mt-8 space-y-2.5 text-[13.5px]" style={{ color:C.inkSoft }}>
                {[
                  ['Внешние действия (письмо, счёт, заказ, звонок) —','всегда подтверждение'],
                  ['Внутренние действия (посмотреть, посчитать, найти) —','без подтверждения, иначе AI бесполезен'],
                  ['Журнал всех действий —','в топике «Задачник», аудит-ready'],
                ].map(([a,b],i)=>(
                  <div key={i} className="flex items-start gap-2">
                    <span className="mt-[6px] w-1 h-1 rounded-full flex-shrink-0" style={{ background:C.accent }}/>
                    <span>{a} <b style={{ color:C.ink }}>{b}</b></span>
                  </div>
                ))}
              </div>
            </div>

            <div className="space-y-3">
              {items.map((a,i)=>{
                const r = window.EMPLOYEES.find(e=>e.id===a.role);
                return (
                  <div key={i} className="p-5 lg:p-6 rounded-[14px] transition-all hover:-translate-y-0.5"
                    style={{ background:C.surface, border:'1px solid rgba(194,84,48,0.18)',
                      boxShadow:'0 16px 32px -16px rgba(194,84,48,0.18)' }}>
                    <div className="flex items-start justify-between mb-3">
                      <div className="flex items-center gap-2">
                        <span className="text-[14px] leading-none">{r.emoji}</span>
                        <span className="text-[10px] uppercase tracking-[0.12em] font-bold"
                          style={{ color:C.inkMute, fontFamily:DT.font.mono }}>{r.short}</span>
                      </div>
                      <StatusPill kind="approval"/>
                    </div>
                    <div className="text-[16px] font-semibold mb-2 leading-[1.3]" style={{ color:C.ink }}>{a.title}</div>
                    <div className="text-[13px] leading-[1.5] mb-4 italic" style={{ color:C.inkSoft, fontFamily:DT.font.serif }}>
                      {a.preview}
                    </div>
                    <div className="flex items-center justify-between pt-3 flex-wrap gap-2"
                      style={{ borderTop:'1px solid rgba(19,17,14,0.06)' }}>
                      <span className="text-[11px] uppercase tracking-[0.10em]"
                        style={{ color:C.inkMute, fontFamily:DT.font.mono }}>
                        Риск: {a.risk} · {a.meta}
                      </span>
                      <div className="flex items-center gap-2">
                        <button className="h-8 px-3 rounded-full text-[12px] font-semibold"
                          style={{ background:'transparent', color:C.inkSoft, border:'1px solid rgba(19,17,14,0.18)' }}>
                          Изменить
                        </button>
                        <button className="h-8 px-4 rounded-full text-[12px] font-bold"
                          style={{ background:C.ink, color:C.cream }}>
                          Подтвердить
                        </button>
                      </div>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function Integrations() {
  const C = window.DT.color;
  const DT = window.DT;
  const groups = window.INTEGRATIONS;
  const messengers = [
    ['Telegram',        'Mini App + @-упоминание ботов',   'дефолт'],
    ['MAX',             'российский мессенджер',         'по запросу'],
    ['VK Teams',        'корпоративный VK',              'по запросу'],
    ['WhatsApp Business','через Wazzup24',               'по запросу'],
    ['Веб-клиент',      'наш собственный',               'по запросу'],
  ];
  return (
    <section id="integrations" className="relative px-6 lg:px-12 py-28 lg:py-40"
      style={{ background:C.creamHi }}>
      <div className="max-w-[1400px] 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:DT.font.display, color:C.ink, fontSize:'clamp(40px, 5.5vw, 84px)' }}>
              Полный <span style={{ fontFamily:DT.font.serif, fontStyle:'italic', fontWeight:300, color:C.grass }}>русский деловой стек</span>
              {' '}— в одном продукте.
            </h2>
            <p className="mt-6 text-[16px] leading-[1.55] max-w-[60ch]" style={{ color:C.inkSoft }}>
              Не «есть API на будущее». Работает сейчас, в продакшене, через единый интерфейс чата.
            </p>
          </div>
        </Reveal>

        <Reveal delay={120}>
          <div className="marquee-mask overflow-hidden mb-12 py-3"
            style={{ background:'rgba(255,255,255,0.6)', border:`1px solid ${C.line}`, borderRadius:12 }}>
            <div className="flex gap-4 whitespace-nowrap animate-marquee" style={{ width:'max-content' }}>
              {[...window.INTEGRATIONS.flatMap(g=>g.items), ...window.INTEGRATIONS.flatMap(g=>g.items)].map((name,i)=>(
                <span key={i} className="text-[13px] px-3.5 py-1.5 rounded-md inline-flex items-center gap-2 flex-shrink-0"
                  style={{
                    background:'rgba(19,17,14,0.04)', color:C.inkSoft,
                    fontFamily:DT.font.mono, fontWeight:500,
                    border:`1px solid ${C.lineSoft}`,
                  }}>
                  <span className="w-1 h-1 rounded-full" style={{ background:C.grass }}/>
                  {name}
                </span>
              ))}
            </div>
          </div>
        </Reveal>

        <Reveal delay={150}>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-5">
            {groups.map(g=>(
              <div key={g.group} className="p-6 rounded-[14px]"
                style={{ background:C.surface, border:'1px solid rgba(19,17,14,0.08)' }}>
                <div className="flex items-center justify-between mb-4">
                  <div className="text-[11.5px] uppercase tracking-[0.14em] font-bold leading-tight" style={{ color:C.ink, fontFamily:DT.font.mono }}>
                    {g.group}
                  </div>
                  <span className="text-[10px] tabular-nums" style={{ color:C.inkMute, fontFamily:DT.font.mono }}>
                    {g.items.length}
                  </span>
                </div>
                <div className="space-y-2">
                  {g.items.map(name=>(
                    <div key={name} className="flex items-center gap-2.5 text-[13px]" style={{ color:C.inkSoft }}>
                      <span className="w-1 h-1 rounded-full" style={{ background:C.grass }}/>
                      <span>{name}</span>
                    </div>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </Reveal>

        {/* Where works subblock */}
        <Reveal delay={250}>
          <div className="mt-20 max-w-4xl">
            <Eyebrow className="mb-6">Где работает офис</Eyebrow>
            <h3 className="text-[28px] lg:text-[40px] font-medium tracking-[-0.025em] leading-[1.1] mb-6"
              style={{ fontFamily:DT.font.display, color:C.ink }}>
              Дефолт — <span style={{ fontFamily:DT.font.serif, fontStyle:'italic', fontWeight:300, color:C.grass }}>Telegram</span>.
              По запросу — любой мессенджер вашей команды.
            </h3>
            <p className="text-[15px] leading-[1.55] mb-8 max-w-[62ch]" style={{ color:C.inkSoft }}>
              Меняется политика — переедем в другой канал без переноса данных, сервер остаётся ваш. Это ваша инфраструктура, мы только настраиваем и сопровождаем.
            </p>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
              {messengers.map(([name, sub, tag])=>(
                <div key={name} className="p-4 rounded-xl flex items-start gap-3"
                  style={{ background:C.surface, border:`1px solid ${C.line}` }}>
                  <span className="w-9 h-9 rounded-lg flex items-center justify-center flex-shrink-0 mt-0.5"
                    style={{ background:'rgba(19,17,14,0.04)', color:C.inkSoft }}>
                    <Icon name="Sparkle" size={18} stroke={1.6}/>
                  </span>
                  <div className="flex-1 min-w-0">
                    <div className="flex items-center gap-2 mb-1 flex-wrap">
                      <span className="text-[15px] font-bold" style={{ color:C.ink, fontFamily:DT.font.display }}>{name}</span>
                      <span className="text-[10px] uppercase tracking-[0.14em] px-2 py-0.5 rounded-full font-bold"
                        style={{
                          background: tag==='дефолт' ? 'rgba(92,138,58,0.10)' : 'rgba(19,17,14,0.05)',
                          color: tag==='дефолт' ? C.grassDeep : C.inkMute,
                          fontFamily:DT.font.mono,
                        }}>
                        {tag}
                      </span>
                    </div>
                    <p className="text-[12.5px]" style={{ color:C.inkSoft }}>{sub}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </Reveal>

        <Reveal delay={350}>
          <p className="mt-10 text-[12.5px] italic max-w-[60ch]"
            style={{ color:C.inkMute, fontFamily:DT.font.serif }}>
            Не обещаем, что все интеграции работают сразу из коробки. На пилоте подключаем те, что нужны вашему сценарию, — и расширяем список по ходу.
          </p>
        </Reveal>
      </div>
    </section>
  );
}

function Security() {
  const C = window.DT.color;
  const DT = window.DT;
  const items = [
    { icon:'Shield', t:'Отдельный сервер под клиента', b:'Своя инсталляция, свои данные, свои ключи. Ваше пространство физически не пересекается с чужим.' },
    { icon:'Lock',   t:'152-ФЗ совместимо',           b:'Серверы в РФ. Архитектура построена под локализацию персональных данных с самого начала.' },
    { icon:'Eye',    t:'Подтверждение на каждое внешнее действие', b:'Письмо, счёт, заказ, звонок — только с вашего «да». Внутренние действия (посмотреть, посчитать) — без подтверждения.' },
    { icon:'AlertTriangle', t:'Журнал всех действий', b:'Кто что сделал, когда, по какой задаче, с каким результатом. Полный экспорт за период в CSV — бухгалтеру или аудитору.' },
  ];
  const legal = [
    ['Договор-оферта', '/legal/offer.html'],
    ['Политика обработки ПДн', '/legal/personal-data-policy.html'],
    ['DPA (Enterprise)', '/legal/dpa.html'],
    ['NDA', '/legal/nda.html'],
  ];
  return (
    <section id="security" className="relative px-6 lg:px-12 py-28 lg:py-40">
      <div className="max-w-[1400px] 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:DT.font.display, color:C.ink, fontSize:'clamp(40px, 5.5vw, 84px)' }}>
              Контроль остаётся<br/>
              <span style={{ fontFamily:DT.font.serif, fontStyle:'italic', fontWeight:300, color:C.grass }}>
                у вас.
              </span>
            </h2>
            <p className="mt-6 text-[16px] leading-[1.55] max-w-[58ch]" style={{ color:C.inkSoft }}>
              AI помогает выполнять работу, но важные действия проходят через правила, подтверждения и журнал событий.
            </p>
          </div>
        </Reveal>

        <Reveal delay={150}>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
            {items.map((it,i)=>(
              <div key={i} className="p-7 rounded-[14px]"
                style={{ background:C.surface, border:'1px solid rgba(19,17,14,0.08)' }}>
                <span className="inline-flex w-10 h-10 rounded-lg items-center justify-center mb-5"
                  style={{ background:'rgba(92,138,58,0.10)', color:C.grassDeep }}>
                  <Icon name={it.icon} size={18} stroke={1.7}/>
                </span>
                <h3 className="text-[19px] font-semibold tracking-[-0.015em] leading-[1.25] mb-2.5"
                  style={{ fontFamily:DT.font.display, color:C.ink }}>{it.t}</h3>
                <p className="text-[14px] leading-[1.55]" style={{ color:C.inkSoft }}>{it.b}</p>
              </div>
            ))}
          </div>
        </Reveal>

        <Reveal delay={300}>
          <div className="mt-12 p-6 rounded-[14px] flex flex-wrap items-center gap-x-6 gap-y-3 justify-between"
            style={{ background:C.creamHi, border:`1px solid ${C.lineSoft}` }}>
            <div className="text-[12px] uppercase tracking-[0.16em] font-bold"
              style={{ color:C.inkMute, fontFamily:DT.font.mono }}>
              Документы
            </div>
            <div className="flex flex-wrap items-center gap-x-5 gap-y-2">
              {legal.map(([t,h])=>(
                <a key={t} href={h} className="text-[13px] font-semibold transition-colors flex items-center gap-1"
                  style={{ color:C.inkSoft }}
                  onMouseEnter={e=>e.currentTarget.style.color=C.ink}
                  onMouseLeave={e=>e.currentTarget.style.color=C.inkSoft}>
                  {t}
                  <Icon name="ArrowUpRight" size={12} stroke={2}/>
                </a>
              ))}
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function FinalCta() {
  const C = window.DT.color;
  const DT = window.DT;
  const tgUrl = 'https://t.me/digstaff_contact_bot';
  const [formOpen, setFormOpen] = React.useState(false);
  const [submitting, setSubmitting] = React.useState(false);
  const [submitted, setSubmitted] = React.useState(false);
  const [error, setError] = React.useState('');
  const [form, setForm] = React.useState({name:'', contact:'', company:'', message:''});

  async function submitLead(e) {
    e.preventDefault();
    setError(''); setSubmitting(true);
    try {
      const contact = form.contact.trim();
      // detect: phone vs email
      const isEmail = contact.includes('@');
      const payload = {
        name: form.name.trim() || 'Без имени',
        phone: isEmail ? null : contact || null,
        email: isEmail ? contact : null,
        company: form.company.trim() || null,
        message: (form.message || 'Заявка с лендинга digstaff.ru').slice(0, 2000),
        source: 'landing_v9_form',
        utm_source: 'landing',
        utm_medium: 'final_cta',
      };
      const r = await fetch('/v1/public/pilot-request', {
        method:'POST', headers:{'Content-Type':'application/json'},
        body: JSON.stringify(payload),
      });
      if (!r.ok) {
        const err = await r.json().catch(()=>({}));
        throw new Error(err.detail || ('http_'+r.status));
      }
      setSubmitted(true);
    } catch (e) {
      setError(String(e.message || e));
    } finally {
      setSubmitting(false);
    }
  }

  return (
    <section id="cta" className="relative px-6 lg:px-12 py-32 lg:py-48 overflow-hidden"
      style={{ background:C.panel, color:C.cream }}>
      <div className="absolute inset-0 pointer-events-none"
        style={{ background:'radial-gradient(60% 60% at 50% 60%, rgba(92,138,58,0.20), transparent 65%)' }}/>
      <div className="relative max-w-[1100px] mx-auto text-center">
        <Reveal>
          <Eyebrow dark className="mb-6">digstaff.ru · попробовать</Eyebrow>
          <h2 className="font-medium tracking-[-0.04em] leading-[0.95]"
            style={{ fontFamily:DT.font.display, color:C.cream, fontSize:'clamp(44px, 6.4vw, 108px)' }}>
            Команда,<br/>
            <span style={{ fontFamily:DT.font.serif, fontStyle:'italic', fontWeight:300, color:'#9DC677' }}>
              которая работает
            </span>
            {' '}с вашими системами.<br/>
            Прямо <span style={{ fontFamily:DT.font.serif, fontStyle:'italic', fontWeight:300, color:'#9DC677' }}>сейчас</span>.
          </h2>
          <p className="mt-10 text-[17px] lg:text-[19px] leading-[1.55] max-w-[58ch] mx-auto"
            style={{ color:'rgba(247,244,236,0.7)' }}>
            Откройте Telegram и поговорите с агентом digstaff. Он покажет, что умеют сотрудники под вашу сферу, ответит на вопросы — и подведёт к подписке. Или просто покажет.
          </p>
          <div className="mt-12 flex flex-wrap justify-center gap-3">
            <Btn variant="grass" size="lg" icon="ArrowRight" as="a" href={tgUrl} target="_blank" rel="noopener">
              Попробовать с агентом
            </Btn>
            <Btn variant="ghostInv" size="lg" type="button" onClick={()=>setFormOpen(o=>!o)}>
              {formOpen ? 'Свернуть форму' : 'Оставить заявку без Telegram'}
            </Btn>
          </div>
          {formOpen && !submitted && (
            <form onSubmit={submitLead} className="mt-10 mx-auto max-w-[560px] text-left"
              style={{ background:'rgba(247,244,236,0.05)', border:'1px solid rgba(247,244,236,0.12)', borderRadius:14, padding:'24px 28px' }}>
              <div className="mb-4">
                <label className="block text-[11px] uppercase tracking-[0.10em] mb-1.5"
                  style={{ color:'rgba(247,244,236,0.55)', fontFamily:DT.font.mono }}>Как вас зовут</label>
                <input type="text" required value={form.name}
                  onChange={e=>setForm({...form, name:e.target.value})}
                  className="w-full px-3 py-2 text-[15px]"
                  style={{ background:'rgba(247,244,236,0.08)', color:C.cream, border:'1px solid rgba(247,244,236,0.18)', borderRadius:8, outline:'none' }}/>
              </div>
              <div className="mb-4">
                <label className="block text-[11px] uppercase tracking-[0.10em] mb-1.5"
                  style={{ color:'rgba(247,244,236,0.55)', fontFamily:DT.font.mono }}>Email или телефон *</label>
                <input type="text" required value={form.contact}
                  placeholder="you@company.ru или +7 999…"
                  onChange={e=>setForm({...form, contact:e.target.value})}
                  className="w-full px-3 py-2 text-[15px]"
                  style={{ background:'rgba(247,244,236,0.08)', color:C.cream, border:'1px solid rgba(247,244,236,0.18)', borderRadius:8, outline:'none' }}/>
              </div>
              <div className="mb-4">
                <label className="block text-[11px] uppercase tracking-[0.10em] mb-1.5"
                  style={{ color:'rgba(247,244,236,0.55)', fontFamily:DT.font.mono }}>Компания (опционально)</label>
                <input type="text" value={form.company}
                  onChange={e=>setForm({...form, company:e.target.value})}
                  className="w-full px-3 py-2 text-[15px]"
                  style={{ background:'rgba(247,244,236,0.08)', color:C.cream, border:'1px solid rgba(247,244,236,0.18)', borderRadius:8, outline:'none' }}/>
              </div>
              <div className="mb-5">
                <label className="block text-[11px] uppercase tracking-[0.10em] mb-1.5"
                  style={{ color:'rgba(247,244,236,0.55)', fontFamily:DT.font.mono }}>Что хотите от AI-офиса (опционально)</label>
                <textarea rows={3} value={form.message}
                  placeholder="Например: автоматизировать первую линию поддержки + выгрузку из 1С"
                  onChange={e=>setForm({...form, message:e.target.value})}
                  className="w-full px-3 py-2 text-[15px]"
                  style={{ background:'rgba(247,244,236,0.08)', color:C.cream, border:'1px solid rgba(247,244,236,0.18)', borderRadius:8, outline:'none', fontFamily:'inherit', resize:'vertical' }}/>
              </div>
              {error && (
                <div className="mb-4 text-[13px] px-3 py-2 rounded"
                  style={{ background:'rgba(220,80,80,0.15)', color:'#FFB0B0', border:'1px solid rgba(220,80,80,0.3)' }}>
                  Не получилось отправить: {error}. Можно попробовать через Telegram.
                </div>
              )}
              <button type="submit" disabled={submitting}
                className="w-full py-3 text-[15px] font-semibold transition"
                style={{ background:submitting?'rgba(157,198,119,0.5)':'#9DC677', color:C.panel, borderRadius:8, border:0, cursor:submitting?'wait':'pointer' }}>
                {submitting ? 'Отправляем…' : 'Отправить заявку'}
              </button>
              <p className="mt-3 text-[11.5px] text-center"
                style={{ color:'rgba(247,244,236,0.45)', fontFamily:DT.font.serif, fontStyle:'italic' }}>
                Мы свяжемся в рабочий день. Никаких рассылок, только ответ.
              </p>
            </form>
          )}
          {submitted && (
            <div className="mt-10 mx-auto max-w-[560px] px-6 py-5"
              style={{ background:'rgba(92,138,58,0.15)', border:'1px solid rgba(157,198,119,0.4)', borderRadius:14 }}>
              <p className="text-[16px]" style={{ color:'#C5E2A0' }}>
                ✓ Заявка получена. Ответим в рабочий день.
              </p>
            </div>
          )}
          <p className="mt-6 text-[12.5px] italic"
            style={{ color:'rgba(247,244,236,0.5)', fontFamily:DT.font.serif }}>
            Для тех, кто не открывает Telegram. Ответ — в рабочий день.
          </p>
        </Reveal>
      </div>
    </section>
  );
}

function Footer() {
  const C = window.DT.color;
  const DT = window.DT;
  const tgUrl = 'https://t.me/digstaff_contact_bot';
  const cols = [
    { t:'Продукт', l:[
      ['Сотрудники','#employees'],
      ['Демо-сценарий','#demo'],
      ['Интеграции','#integrations'],
      ['Безопасность','#security'],
      ['Цена','#pricing'],
      ['Сравнение','#comparison'],
    ]},
    { t:'Компания', l:[
      ['info@digstaff.ru','mailto:info@digstaff.ru'],
      ['@digstaff_contact_bot', tgUrl],
      ['Как работает','#how'],
    ]},
    { t:'Юридическое', l:[
      ['Договор-оферта','/legal/offer.html'],
      ['Политика обработки ПДн','/legal/personal-data-policy.html'],
      ['DPA (Enterprise)','/legal/dpa.html'],
      ['NDA','/legal/nda.html'],
    ]},
  ];
  return (
    <footer className="px-6 lg:px-12 pt-16 pb-10"
      style={{ background:C.cream, borderTop:'1px solid rgba(19,17,14,0.08)' }}>
      <div className="max-w-[1400px] mx-auto">
        <div className="grid grid-cols-2 lg:grid-cols-5 gap-10 mb-14">
          <div className="col-span-2 lg:col-span-2">
            <div className="flex items-center gap-2.5 mb-5">
              <PortalLogoMark size={28}/>
              <span className="text-[16px] tracking-[-0.018em]" style={{ fontFamily:DT.font.display, color:C.ink }}>
                <span style={{ fontWeight:700 }}>dig</span><span style={{ fontWeight:500 }}>staff</span>
              </span>
            </div>
            <p className="text-[16px] italic max-w-[40ch] leading-[1.45] mb-6"
              style={{ fontFamily:DT.font.serif, color:C.inkMute }}>
              Отдел виртуальных сотрудников для российского малого бизнеса. Команда специалистов в мессенджере вашей компании.
            </p>
            <div className="space-y-1.5 text-[13px]" style={{ color:C.inkSoft }}>
              <a href={tgUrl} target="_blank" rel="noopener" className="flex items-center gap-2 transition-colors hover:opacity-70" style={{ fontFamily:DT.font.mono }}>
                <span>@digstaff_contact_bot</span><Icon name="ArrowUpRight" size={12} stroke={2}/>
              </a>
              <a href="mailto:info@digstaff.ru" className="flex items-center gap-2 transition-colors hover:opacity-70" style={{ fontFamily:DT.font.mono }}>
                <span>info@digstaff.ru</span><Icon name="ArrowUpRight" size={12} stroke={2}/>
              </a>
            </div>
          </div>
          {cols.map(c=>(
            <div key={c.t}>
              <div className="text-[11px] uppercase tracking-[0.16em] font-bold mb-4" style={{ color:C.ink, fontFamily:DT.font.mono }}>{c.t}</div>
              <ul className="space-y-2.5">
                {c.l.map(([label,href])=>(
                  <li key={label}>
                    <a href={href} target={href.startsWith('http')?'_blank':undefined} rel={href.startsWith('http')?'noopener':undefined}
                      className="text-[13.5px] transition-colors"
                      style={{ color:C.inkSoft }}
                      onMouseEnter={e=>e.currentTarget.style.color=C.ink}
                      onMouseLeave={e=>e.currentTarget.style.color=C.inkSoft}>{label}</a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
        <div className="pt-7 flex flex-wrap items-center justify-between gap-3"
          style={{ borderTop:'1px solid rgba(19,17,14,0.08)' }}>
          <div className="text-[12px]" style={{ color:C.inkMute }}>
            © 2026 digstaff · ИП Подлегаев Алексей Владимирович · ИНН 771595919403
          </div>
          <div className="text-[12px]" style={{ color:C.inkMute, fontFamily:DT.font.mono }}>digstaff.ru</div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Nav, Employees, HowItWorks, ActivityFeed, Approvals, Integrations, Security, FinalCta, Footer });