// Comparison — feature matrix: digstaff vs AI-in-CRM vs chatbot constructors vs international agents.
// Honest framing under table — if AI in your CRM already does the job, you may not need us.

function CmpCell({ kind='check', children, em=false }) {
  const C = window.DT.color;
  // kind: 'check' (full green), 'partial' (warm tilde), 'cross' (muted red), 'value' (text)
  if (kind === 'value') {
    return (
      <div className={`text-[13.5px] leading-[1.4] ${em?'font-bold':''}`}
        style={{ color: em ? C.ink : C.inkSoft, fontFamily: window.DT.font.body }}>
        {children}
      </div>
    );
  }
  const styles = {
    check:   { bg:`${C.grass}18`, fg:C.grassDeep, icon:'Check', label:'да' },
    partial: { bg:`${C.warn}1A`,  fg:'#A06010',   icon:'Minus', label:'частично' },
    cross:   { bg:'rgba(178,58,58,0.08)', fg:'#9A3535', icon:'X', label:'нет' },
  };
  const s = styles[kind];
  return (
    <div className="flex items-center gap-2">
      <span className="w-6 h-6 rounded-md flex items-center justify-center flex-shrink-0"
        style={{ background:s.bg, color:s.fg }}>
        <Icon name={s.icon} size={12} stroke={2.6}/>
      </span>
      <span className={`text-[13px] ${em?'font-bold':''}`} style={{ color: em ? C.ink : C.inkSoft }}>{children || s.label}</span>
    </div>
  );
}

function Comparison() {
  const C = window.DT.color;
  const DT = window.DT;

  const cols = [
    { key:'digstaff', name:'digstaff',         sub:'AI-офис · 10 ролей',      featured:true },
    { key:'crmai',    name:'AI в CRM',         sub:'Битрикс24 / amoCRM',      featured:false },
    { key:'chatbot',  name:'Чатбот-конструкторы', sub:'Salebot / Aimylogic',  featured:false },
    { key:'intl',     name:'Международные',    sub:'Lindy / Manus',           featured:false },
  ];

  const rows = [
    { label:'Разные роли в команде',
      digstaff: { kind:'value', em:true, text:'10 специалистов' },
      crmai:    { kind:'cross', text:'один универсальный' },
      chatbot:  { kind:'cross', text:'один сценарный бот' },
      intl:     { kind:'partial', text:'один агент' },
    },
    { label:'1С · ЕГРЮЛ · Точка Банк · hh.ru',
      digstaff: { kind:'check' },
      crmai:    { kind:'partial', text:'частично 1С' },
      chatbot:  { kind:'cross' },
      intl:     { kind:'cross' },
    },
    { label:'Подтверждение перед действиями',
      digstaff: { kind:'check', em:true, text:'на каждом' },
      crmai:    { kind:'check' },
      chatbot:  { kind:'cross' },
      intl:     { kind:'partial', text:'настраивается' },
    },
    { label:'Изолированный сервер',
      digstaff: { kind:'check' },
      crmai:    { kind:'cross', text:'общий SaaS' },
      chatbot:  { kind:'cross', text:'общий SaaS' },
      intl:     { kind:'cross', text:'cloud US/EU' },
    },
    { label:'Где живёт',
      digstaff: { kind:'value', em:true, text:'мессенджер команды' },
      crmai:    { kind:'value', text:'веб-портал CRM' },
      chatbot:  { kind:'value', text:'один бот' },
      intl:     { kind:'value', text:'веб-кабинет' },
    },
    { label:'Цена',
      digstaff: { kind:'value', em:true, text:'от 10 000 ₽/мес' },
      crmai:    { kind:'value', text:'в подписке CRM' },
      chatbot:  { kind:'value', text:'от 3 000 ₽/мес' },
      intl:     { kind:'value', text:'$49+/мес + credits' },
    },
  ];

  return (
    <section id="comparison" className="relative px-6 lg:px-12 py-28 lg:py-40"
      style={{ background:C.creamHi }}>
      <div className="max-w-[1300px] mx-auto">
        <Reveal>
          <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-[60ch]" style={{ color:C.inkSoft }}>
            На рынке есть AI в CRM, чатбот-конструкторы и международные агенты-универсалы. Они решают похожие задачи — но другими способами. Вот честная таблица:
          </p>
        </Reveal>

        {/* Desktop table */}
        <Reveal delay={150}>
          <div className="mt-14 hidden lg:block rounded-[16px] overflow-hidden"
            style={{ background:C.surface, border:`1px solid ${C.line}`,
              boxShadow:'0 24px 60px -28px rgba(19,17,14,0.14)' }}>

            {/* header */}
            <div className="grid grid-cols-[1.4fr_1.2fr_1.1fr_1.1fr_1.1fr]">
              <div className="p-5" style={{ background:C.creamHi, borderBottom:`1px solid ${C.line}` }}>
                <div className="text-[11px] uppercase tracking-[0.16em] font-bold"
                  style={{ color:C.inkMute, fontFamily:DT.font.mono }}>что сравниваем</div>
              </div>
              {cols.map(col=>(
                <div key={col.key} className="p-5"
                  style={{
                    background: col.featured ? `${C.grass}08` : C.creamHi,
                    borderBottom:`1px solid ${C.line}`,
                    borderLeft: col.featured ? `2px solid ${C.grass}` : `1px solid ${C.lineSoft}`,
                  }}>
                  <div className="text-[15px] font-bold tracking-[-0.01em]"
                    style={{ color: col.featured ? C.grassDeep : C.ink, fontFamily:DT.font.display }}>
                    {col.name}
                  </div>
                  <div className="text-[11px] mt-0.5" style={{ color:C.inkMute, fontFamily:DT.font.mono }}>
                    {col.sub}
                  </div>
                </div>
              ))}
            </div>

            {/* rows */}
            {rows.map((row,ri)=>(
              <div key={ri} className="grid grid-cols-[1.4fr_1.2fr_1.1fr_1.1fr_1.1fr]"
                style={{ borderBottom: ri<rows.length-1 ? `1px solid ${C.lineSoft}` : 'none' }}>
                <div className="p-5 text-[13.5px] font-semibold" style={{ color:C.ink }}>{row.label}</div>
                {cols.map(col=>{
                  const cell = row[col.key];
                  return (
                    <div key={col.key} className="p-5"
                      style={{
                        background: col.featured ? `${C.grass}05` : 'transparent',
                        borderLeft: col.featured ? `2px solid ${C.grass}` : `1px solid ${C.lineSoft}`,
                      }}>
                      <CmpCell kind={cell.kind} em={cell.em || col.featured}>{cell.text}</CmpCell>
                    </div>
                  );
                })}
              </div>
            ))}
          </div>
        </Reveal>

        {/* Mobile cards */}
        <Reveal delay={150}>
          <div className="mt-12 lg:hidden grid grid-cols-1 gap-4">
            {cols.map(col=>(
              <div key={col.key} className="rounded-[14px] p-5"
                style={{
                  background: col.featured ? `${C.grass}06` : C.surface,
                  border: col.featured ? `1px solid ${C.grass}40` : `1px solid ${C.line}`,
                }}>
                <div className="text-[16px] font-bold tracking-[-0.01em] mb-1"
                  style={{ color: col.featured ? C.grassDeep : C.ink, fontFamily:DT.font.display }}>
                  {col.name}
                </div>
                <div className="text-[11px] mb-4" style={{ color:C.inkMute, fontFamily:DT.font.mono }}>
                  {col.sub}
                </div>
                <div className="space-y-2.5">
                  {rows.map((row,ri)=>(
                    <div key={ri} className="grid grid-cols-[1fr_auto] gap-3 items-start py-1.5"
                      style={{ borderBottom: ri<rows.length-1 ? `1px solid ${C.lineSoft}` : 'none' }}>
                      <div className="text-[12px]" style={{ color:C.inkMute }}>{row.label}</div>
                      <CmpCell kind={row[col.key].kind} em={row[col.key].em || col.featured}>{row[col.key].text}</CmpCell>
                    </div>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </Reveal>

        {/* Honest framing */}
        <Reveal delay={250}>
          <div className="mt-12 p-6 lg:p-8 rounded-[14px] max-w-[920px]"
            style={{ background:`${C.creamLo}80`, border:`1px solid ${C.lineSoft}` }}>
            <div className="text-[11px] uppercase tracking-[0.18em] font-bold mb-3"
              style={{ color:C.inkMute, fontFamily:DT.font.mono }}>
              честно
            </div>
            <p className="text-[15.5px] lg:text-[17px] leading-[1.55] italic max-w-[64ch]"
              style={{ fontFamily:DT.font.serif, color:C.inkSoft }}>
              Если AI уже встроен в ваш Битрикс24, задач хватает на одного универсального ассистента — возможно, его и достаточно. digstaff — когда нужна <span style={{ color:C.ink, fontStyle:'normal', fontFamily:DT.font.body, fontWeight:600 }}>команда специалистов с инструментами за пределами одной CRM</span>: юрист, который сам читает kad.arbitr; бухгалтер, который смотрит в 1С; HR, который сам идёт на hh.ru. Этого ни одна CRM-AI не делает.
            </p>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

window.Comparison = Comparison;