/* eslint-disable */
// Extra landing sections v2 — consumes shared.jsx + landing.jsx globals

/* ============ TRUST BAR ============ */
// Плашка с брендами удалена: нельзя использовать чужие логотипы
// (Lamoda/Tinkoff/Avito и т.д.) без подписанного кейс-стади — это вводит
// пользователей в заблуждение и нарушает ФЗ-38 «О рекламе». Вернём когда
// будут реальные подписанные отзывы клиентов.
function TrustBar() {
  return null;
}

/* ============ PROBLEM / SOLUTION ============ */
function ProblemSolution() {
  useReveal();
  const painRows = [
    { p:'5 подписок', s:'1 кабинет', px:'≈ 24 000 ₽ / мес', sx:'от 850 ₽ / мес' },
    { p:'Зоопарк из 3–5 сервисов', s:'48 инструментов в одном UI', px:'переключаться между вкладками', sx:'всё синхронизировано по проекту' },
    { p:'Ручной аудит 3-4 часа', s:'AI-отчёт за 90 секунд', px:'excel + чатбот + crawler', sx:'один клик → markdown-отчёт' },
    { p:'Не показать клиенту', s:'Белый лейбл', px:'чужой логотип в отчёте', sx:'ваш домен, логотип, тарифы' },
  ];
  return (
    <section style={{padding:'120px 0', position:'relative'}}>
      <div style={{width:'min(1280px, 92%)', margin:'0 auto'}}>
        <div data-reveal style={{marginBottom:56, maxWidth:760}}>
          <div className="eyebrow">Проблема → решение</div>
          <h2 className="display" style={{fontSize:'clamp(36px, 5vw, 72px)', margin:'16px 0 16px'}}>
            Меньше вкладок. <span className="grad-text">Больше SEO.</span>
          </h2>
          <p style={{color:'var(--fg-2)', fontSize:17, margin:0, maxWidth:620}}>
            Вы покупаете 5 подписок, копипастите между таблицами и платите за невостребованные лимиты. Мы собрали всё в один кабинет с оплатой по факту.
          </p>
        </div>

        <div data-reveal style={{border:'1px solid var(--border)', borderRadius:20, overflow:'hidden', background:'var(--card)'}}>
          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', background:'var(--border)', gap:1}}>
            <div style={{padding:'24px 28px', background:'var(--bg-deep)'}}>
              <div style={{display:'flex', gap:10, alignItems:'center', marginBottom:6}}>
                <span style={{width:8, height:8, borderRadius:'50%', background:'oklch(0.65 0.2 25)'}}/>
                <span className="mono" style={{fontSize:11, color:'var(--fg-3)', letterSpacing:'0.1em', textTransform:'uppercase'}}>Раньше</span>
              </div>
              <div style={{fontSize:22, fontWeight:700, letterSpacing:'-0.02em', color:'var(--fg-2)'}}>5 подписок, 3 таблицы, нервный срыв</div>
            </div>
            <div style={{padding:'24px 28px', background:'var(--bg-deep)'}}>
              <div style={{display:'flex', gap:10, alignItems:'center', marginBottom:6}}>
                <span className="sdot on"/>
                <span className="mono" style={{fontSize:11, color:'var(--g-primary)', letterSpacing:'0.1em', textTransform:'uppercase'}}>С нами</span>
              </div>
              <div style={{fontSize:22, fontWeight:700, letterSpacing:'-0.02em'}}>Один кабинет, один счёт, один API</div>
            </div>
          </div>
          {painRows.map((r, i)=>(
            <div key={i} style={{display:'grid', gridTemplateColumns:'1fr 1fr', background:'var(--border)', gap:1, borderTop:'1px solid var(--border)'}}>
              <div style={{padding:'22px 28px', background:'var(--card)', display:'flex', flexDirection:'column', gap:6}}>
                <div style={{display:'flex', alignItems:'center', gap:10, fontSize:15, color:'var(--fg-2)', textDecoration:'line-through', textDecorationColor:'color-mix(in oklab, oklch(0.65 0.2 25) 70%, transparent)', textDecorationThickness:'1.5px'}}>
                  <Icon name="x" size={14}/> {r.p}
                </div>
                <div className="mono" style={{fontSize:11, color:'var(--fg-3)', paddingLeft:24}}>{r.px}</div>
              </div>
              <div style={{padding:'22px 28px', background:'var(--card)', display:'flex', flexDirection:'column', gap:6}}>
                <div style={{display:'flex', alignItems:'center', gap:10, fontSize:15, fontWeight:600}}>
                  <span className="ck" style={{width:20, height:20}}><Icon name="check" size={12} stroke={3}/></span> {r.s}
                </div>
                <div className="mono" style={{fontSize:11, color:'var(--g-primary)', paddingLeft:30}}>{r.sx}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============ HOW IT WORKS ============ */
function HowItWorks() {
  useReveal();
  const steps = [
    { n:'01', t:'Добавьте проект', d:'Укажите домен, регион, поисковик. Импортируйте семантику CSV или соберите её кнопкой «Расширить».', vis:'project' },
    { n:'02', t:'Запустите инструменты', d:'Кластеризация, позиции, аудит — параллельно. Прогресс в реальном времени, уведомления в Telegram.', vis:'run' },
    { n:'03', t:'Получите отчёт', d:'AI-резюме + таблица + график + markdown-экспорт. Клиенту — на вашем домене и логотипе.', vis:'report' },
  ];
  return (
    <section style={{padding:'120px 0', position:'relative', background:'var(--bg-deep)'}}>
      <div style={{width:'min(1280px, 92%)', margin:'0 auto'}}>
        <div data-reveal style={{textAlign:'center', marginBottom:64}}>
          <div className="eyebrow" style={{justifyContent:'center'}}>За 3 шага</div>
          <h2 className="display" style={{fontSize:'clamp(36px, 5vw, 72px)', margin:'16px 0 0'}}>
            От домена до <span className="grad-text">отчёта</span> — 5 минут.
          </h2>
        </div>
        <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:20}} className="steps-grid">
          {steps.map((s, i)=>(
            <div key={i} data-reveal className="card" style={{padding:28, display:'flex', flexDirection:'column', gap:16, position:'relative', transitionDelay:`${i*80}ms`}}>
              <div style={{display:'flex', alignItems:'baseline', gap:14}}>
                <span className="display grad-text" style={{fontSize:64, letterSpacing:'-0.05em', lineHeight:1}}>{s.n}</span>
              </div>
              <div style={{fontSize:22, fontWeight:700, letterSpacing:'-0.02em'}}>{s.t}</div>
              <div style={{color:'var(--fg-2)', fontSize:14, lineHeight:1.6}}>{s.d}</div>
              <div style={{marginTop:8, padding:14, background:'var(--bg)', border:'1px solid var(--border)', borderRadius:12, minHeight:120}}>
                <StepVisual kind={s.vis}/>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function StepVisual({ kind }) {
  if (kind === 'project') {
    return (
      <div style={{fontFamily:'var(--font-mono)', fontSize:11, color:'var(--fg-2)', lineHeight:1.8}}>
        <div style={{display:'flex', gap:8, alignItems:'center'}}>
          <span style={{color:'var(--fg-3)'}}>domain</span>
          <span style={{background:'var(--input)', padding:'3px 8px', borderRadius:5, border:'1px solid var(--border)'}}>example.ru</span>
        </div>
        <div style={{display:'flex', gap:6, alignItems:'center', marginTop:6}}>
          <span style={{color:'var(--fg-3)'}}>region</span>
          <span className="pill on" style={{fontSize:10, padding:'2px 7px'}}>Москва · 213</span>
          <span className="pill" style={{fontSize:10, padding:'2px 7px'}}>Desktop</span>
        </div>
        <div style={{display:'flex', gap:6, marginTop:10, flexWrap:'wrap'}}>
          {['купить iphone','ремонт mac','apple обзор'].map(k=>(
            <span key={k} style={{background:'var(--input)', padding:'3px 7px', borderRadius:5, border:'1px solid var(--border)', fontSize:10}}>{k}</span>
          ))}
          <span style={{color:'var(--fg-3)', fontSize:10, padding:'3px 0'}}>+ 127</span>
        </div>
      </div>
    );
  }
  if (kind === 'run') {
    return (
      <div style={{display:'flex', flexDirection:'column', gap:7, fontSize:11, fontFamily:'var(--font-mono)'}}>
        {[
          {l:'Проверка позиций', p:100},
          {l:'Кластеризация', p:72},
          {l:'Супер-аудит', p:34},
        ].map((r, i)=>(
          <div key={i}>
            <div style={{display:'flex', justifyContent:'space-between', marginBottom:3}}>
              <span style={{color:'var(--fg-2)'}}>{r.l}</span>
              <span style={{color:r.p===100?'var(--g-primary)':'var(--fg-3)'}}>{r.p}%</span>
            </div>
            <div style={{height:3, background:'var(--input)', borderRadius:2, overflow:'hidden'}}>
              <div style={{height:'100%', width:r.p+'%', background:r.p===100?'var(--g-primary)':'linear-gradient(90deg, var(--g-tertiary), var(--g-primary))', transition:'width 1s var(--ease)'}}/>
            </div>
          </div>
        ))}
      </div>
    );
  }
  return (
    <div style={{fontFamily:'var(--font-mono)', fontSize:10, color:'var(--fg-2)', lineHeight:1.7}}>
      <div style={{color:'var(--g-primary)'}}># report.md</div>
      <div>✓ 127 ключей проверено</div>
      <div>↑ 34 позиции выросли</div>
      <div>↓ 12 позиций упали</div>
      <div>⚠ 8 мета-тегов без description</div>
      <div style={{color:'var(--fg-3)', marginTop:4}}>→ Экспорт: CSV · XLSX · PDF</div>
    </div>
  );
}

/* ============ LIVE PRODUCT TABS ============ */
function LiveProduct() {
  useReveal();
  const [tab, setTab] = useState(0);
  const tabs = [
    { k:'rank', l:'Rank Tracker', d:'Позиции каждый день. Автоматические снимки, сравнение периодов, группы ключей.' },
    { k:'cluster', l:'Кластеризация', d:'По методу «многоэтапный top». Настройка силы, white-list доменов, экспорт в mindmap.' },
    { k:'audit', l:'Супер-аудит', d:'AI-анализ сайта: структура, семантика, ТОП, рекомендации. Markdown-отчёт.' },
  ];
  return (
    <section style={{padding:'120px 0', position:'relative'}}>
      <div style={{width:'min(1280px, 92%)', margin:'0 auto'}}>
        <div data-reveal style={{marginBottom:48, maxWidth:720}}>
          <div className="eyebrow">Попробуйте вживую</div>
          <h2 className="display" style={{fontSize:'clamp(36px, 5vw, 72px)', margin:'16px 0 16px'}}>
            Интерфейс, в котором <span className="grad-text">комфортно жить</span>.
          </h2>
        </div>

        <div data-reveal style={{display:'flex', gap:8, marginBottom:20, flexWrap:'wrap'}}>
          {tabs.map((t, i)=>(
            <button key={t.k} className={`chip-btn ${tab===i?'active':''}`} onClick={()=>setTab(i)}>
              {t.l}
            </button>
          ))}
        </div>

        <div data-reveal className="laptop-frame">
          <div className="laptop-chrome">
            <span style={{display:'flex', gap:6}}>
              <span className="tl r"/><span className="tl y"/><span className="tl g"/>
            </span>
            <span className="mono" style={{fontSize:11, color:'var(--fg-3)', marginLeft:16}}>seo.tools/app/{tabs[tab].k}</span>
          </div>
          <div className="laptop-screen">
            {tab===0 && <RankTabMock/>}
            {tab===1 && <ClusterTabMock/>}
            {tab===2 && <AuditTabMock/>}
          </div>
        </div>

        <div data-reveal style={{marginTop:20, color:'var(--fg-2)', fontSize:15, textAlign:'center', maxWidth:600, marginLeft:'auto', marginRight:'auto'}}>
          {tabs[tab].d}
        </div>
      </div>
    </section>
  );
}

function RankTabMock() {
  return (
    <div style={{padding:24, display:'grid', gridTemplateColumns:'200px 1fr', gap:20, height:'100%'}}>
      <div style={{borderRight:'1px solid var(--border)', paddingRight:16}}>
        <div className="mono" style={{fontSize:10, color:'var(--fg-3)', textTransform:'uppercase', letterSpacing:'0.1em', marginBottom:12}}>Проекты</div>
        {['example.ru','shop.com','blog.io'].map((p, i)=>(
          <div key={p} style={{padding:'8px 10px', borderRadius:8, background: i===0?'var(--input)':'transparent', fontSize:13, marginBottom:4, display:'flex', justifyContent:'space-between', alignItems:'center'}}>
            <span>{p}</span>
            <span className="mono" style={{fontSize:10, color:'var(--g-primary)'}}>+{[12,5,8][i]}</span>
          </div>
        ))}
      </div>
      <div>
        <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:16}}>
          <div>
            <div style={{fontSize:18, fontWeight:700, letterSpacing:'-0.02em'}}>example.ru</div>
            <div className="mono" style={{fontSize:11, color:'var(--fg-3)'}}>127 ключей · обновлено 12 мин назад</div>
          </div>
          <div className="seg"><button className="active">30д</button><button>90д</button><button>1г</button></div>
        </div>
        <RankChartMock/>
        <div style={{marginTop:14, display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:10}}>
          {[
            {l:'В ТОП-3', v:24, c:'var(--g-primary)'},
            {l:'В ТОП-10', v:67, c:'var(--g-tertiary)'},
            {l:'Выросли', v:34, c:'var(--g-secondary)'},
            {l:'Упали', v:12, c:'oklch(0.65 0.2 25)'},
          ].map((s, i)=>(
            <div key={i} style={{padding:'10px 12px', border:'1px solid var(--border)', borderRadius:10}}>
              <div className="mono" style={{fontSize:10, color:'var(--fg-3)'}}>{s.l}</div>
              <div style={{fontSize:22, fontWeight:700, letterSpacing:'-0.02em', color:s.c, marginTop:2}}>{s.v}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function ClusterTabMock() {
  return (
    <div style={{padding:24, display:'grid', gridTemplateColumns:'1fr 1fr', gap:20, height:'100%'}}>
      <div>
        <div className="mono" style={{fontSize:10, color:'var(--fg-3)', textTransform:'uppercase', letterSpacing:'0.1em', marginBottom:10}}>Семантика · 127 ключей</div>
        <div style={{display:'flex', flexDirection:'column', gap:4}}>
          {['купить iphone','купить iphone 15','купить iphone pro','iphone 15 цена','iphone pro max цена','айфон 15 купить'].map((k, i)=>(
            <div key={k} style={{padding:'7px 10px', background:'var(--input)', border:'1px solid var(--border)', borderRadius:6, fontSize:12, fontFamily:'var(--font-mono)', display:'flex', justifyContent:'space-between'}}>
              <span style={{color:'var(--fg-2)'}}>{k}</span>
              <span style={{color:'var(--fg-3)'}}>{[45600,12300,8900,5600,3400,2100][i]}</span>
            </div>
          ))}
        </div>
      </div>
      <div>
        <div className="mono" style={{fontSize:10, color:'var(--fg-3)', textTransform:'uppercase', letterSpacing:'0.1em', marginBottom:10}}>Кластеры · 24</div>
        <div style={{display:'flex', flexDirection:'column', gap:8}}>
          {[
            {t:'iPhone — покупка', n:8, s:'high'},
            {t:'iPhone 15 Pro', n:12, s:'high'},
            {t:'iPhone цены', n:6, s:'mid'},
            {t:'iPhone обзоры', n:4, s:'mid'},
          ].map((c, i)=>(
            <div key={i} style={{padding:12, border:'1px solid var(--border)', borderRadius:10, background:'var(--card)'}}>
              <div style={{display:'flex', justifyContent:'space-between', alignItems:'center'}}>
                <span style={{fontWeight:600, fontSize:13}}>{c.t}</span>
                <span className="mono" style={{fontSize:10, color:'var(--g-primary)'}}>{c.n} ключей</span>
              </div>
              <div style={{height:3, background:'var(--input)', borderRadius:2, marginTop:6, overflow:'hidden'}}>
                <div style={{height:'100%', width:c.s==='high'?'85%':'55%', background:'linear-gradient(90deg, var(--g-tertiary), var(--g-primary))'}}/>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function AuditTabMock() {
  return (
    <div style={{padding:24, display:'grid', gridTemplateColumns:'1fr 1fr', gap:20, height:'100%'}}>
      <div style={{border:'1px solid var(--border)', borderRadius:12, padding:20, background:'var(--bg)'}}>
        <div className="mono" style={{fontSize:10, color:'var(--fg-3)', textTransform:'uppercase', letterSpacing:'0.1em', marginBottom:12}}>Health score</div>
        <div style={{display:'flex', alignItems:'center', gap:20}}>
          <div style={{position:'relative', width:120, height:120}}>
            <svg viewBox="0 0 120 120" style={{width:'100%', height:'100%', transform:'rotate(-90deg)'}}>
              <circle cx="60" cy="60" r="52" fill="none" stroke="var(--border)" strokeWidth="8"/>
              <circle cx="60" cy="60" r="52" fill="none" stroke="url(#grad2)" strokeWidth="8" strokeDasharray="326.7" strokeDashoffset="98" strokeLinecap="round" style={{transition:'stroke-dashoffset 2s var(--ease)'}}/>
              <defs>
                <linearGradient id="grad2" x1="0" y1="0" x2="1" y2="1">
                  <stop offset="0" stopColor="var(--g-tertiary)"/>
                  <stop offset="1" stopColor="var(--g-primary)"/>
                </linearGradient>
              </defs>
            </svg>
            <div style={{position:'absolute', inset:0, display:'flex', alignItems:'center', justifyContent:'center', flexDirection:'column'}}>
              <span className="display" style={{fontSize:32, letterSpacing:'-0.03em'}}>72</span>
              <span className="mono" style={{fontSize:10, color:'var(--fg-3)'}}>/ 100</span>
            </div>
          </div>
          <div style={{flex:1}}>
            {[
              {l:'Технический', v:'94%', c:'var(--g-primary)'},
              {l:'Контент', v:'68%', c:'var(--g-tertiary)'},
              {l:'Семантика', v:'54%', c:'var(--g-secondary)'},
            ].map((r, i)=>(
              <div key={i} style={{display:'flex', justifyContent:'space-between', fontSize:12, padding:'6px 0', borderBottom:i<2?'1px solid var(--border)':'none'}}>
                <span style={{color:'var(--fg-2)'}}>{r.l}</span>
                <span style={{color:r.c, fontFamily:'var(--font-mono)', fontWeight:600}}>{r.v}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
      <div style={{border:'1px solid var(--border)', borderRadius:12, padding:16, background:'var(--bg)', fontSize:12, fontFamily:'var(--font-mono)', color:'var(--fg-2)', lineHeight:1.7}}>
        <div style={{color:'var(--g-primary)', marginBottom:6}}># Найдено 34 проблемы</div>
        <div>✗ 8 страниц без meta description</div>
        <div>✗ 12 дублей H1</div>
        <div>⚠ robots.txt блокирует /api/*</div>
        <div>⚠ 3 страницы &gt; 3 МБ</div>
        <div style={{color:'var(--g-primary)', margin:'10px 0 6px'}}># AI рекомендации</div>
        <div style={{color:'var(--fg)'}}>1. Сгенерировать description для 8 URL в категории «каталог»...</div>
        <div style={{color:'var(--fg)'}}>2. Объединить дубли H1 с помощью 301...</div>
      </div>
    </div>
  );
}

/* ============ METRICS / CASE STUDY ============ */
// Секция отключена: «1240+ агентств», «1.8M задач/мес», «36% рост в ТОП-10» —
// это непроверяемые цифры, на запуске это запрещённая реклама (ФЗ-38).
// Вернём когда соберём подтверждённые кейсы клиентов.
function Metrics() {
  return null;
}
function MetricsDisabled() {
  useReveal();
  const items = [
    { v:null, s:'', l:'', d:'' },
  ];
  return (
    <section style={{padding:'100px 0', position:'relative', background:'var(--bg-deep)', borderTop:'1px solid var(--border)', borderBottom:'1px solid var(--border)'}}>
      <div style={{width:'min(1280px, 92%)', margin:'0 auto'}}>
        <div data-reveal style={{textAlign:'center', marginBottom:56}}>
          <div className="eyebrow" style={{justifyContent:'center'}}>Цифры говорят громче</div>
          <h2 className="display" style={{fontSize:'clamp(36px, 5vw, 72px)', margin:'16px 0 0'}}>
            Команды выбирают нас <span className="grad-text">за результат</span>.
          </h2>
        </div>
        <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:1, background:'var(--border)', border:'1px solid var(--border)', borderRadius:20, overflow:'hidden'}}>
          {items.map((m, i)=>(
            <div key={i} data-reveal className="metric" style={{padding:'40px 28px', background:'var(--bg)', transitionDelay:`${i*70}ms`}}>
              <div className="display" style={{fontSize:'clamp(48px, 5.2vw, 72px)', letterSpacing:'-0.04em', lineHeight:1}}>
                <span className="grad-text">{m.v}</span><span style={{color:'var(--fg-3)'}}>{m.s}</span>
              </div>
              <div style={{fontSize:15, fontWeight:600, marginTop:12, letterSpacing:'-0.01em'}}>{m.l}</div>
              <div className="mono" style={{fontSize:11, color:'var(--fg-3)', marginTop:6}}>{m.d}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============ TESTIMONIALS ============ */
// Секция отключена: отзывы с выдуманными именами («Артём К.», «Марина П.»,
// «Денис О.») = недобросовестная реклама (ФЗ-38, ст. 5). Вернём когда
// будут подписанные настоящие отзывы с разрешением на публикацию.
function Testimonials() {
  return null;
}
function TestimonialsDisabled() {
  useReveal();
  const items = [
    { q:'', a:'', r:'', img:'' },
  ];
  return (
    <section style={{padding:'120px 0'}}>
      <div style={{width:'min(1280px, 92%)', margin:'0 auto'}}>
        <div data-reveal style={{maxWidth:700, marginBottom:56}}>
          <div className="eyebrow">Отзывы</div>
          <h2 className="display" style={{fontSize:'clamp(36px, 5vw, 72px)', margin:'16px 0 0'}}>
            Говорят <span className="grad-text">люди, которые SEO</span>.
          </h2>
        </div>
        <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:16}}>
          {items.map((t, i)=>{
            const tilt = useTilt(6);
            return (
              <div ref={tilt} key={i} data-reveal className="card" style={{padding:32, display:'flex', flexDirection:'column', gap:24, transitionDelay:`${i*80}ms`}}>
                <div style={{fontSize:60, lineHeight:0.6, color:'var(--g-primary)', fontFamily:'var(--font-serif, Georgia)', opacity:0.3}}>"</div>
                <p style={{fontSize:17, lineHeight:1.5, margin:0, letterSpacing:'-0.01em'}}>{t.q}</p>
                <div style={{marginTop:'auto', paddingTop:20, borderTop:'1px solid var(--border)', display:'flex', alignItems:'center', gap:12}}>
                  <div style={{width:40, height:40, borderRadius:'50%', background:'linear-gradient(135deg, var(--g-tertiary), var(--g-deep))', display:'grid', placeItems:'center', fontWeight:700, color:'white'}}>{t.img}</div>
                  <div>
                    <div style={{fontSize:14, fontWeight:600}}>{t.a}</div>
                    <div className="mono" style={{fontSize:11, color:'var(--fg-3)'}}>{t.r}</div>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

/* ============ COMPARISON ============ */
// Сравнение обобщённое — не называем конкретных конкурентов ни словами,
// ни завуалированно («Сервис A/Б/В»). Одна колонка «другие платформы» с
// усреднёнными данными по сегменту (422-ФЗ «О рекламе», п.1 ст.5).
function Comparison() {
  useReveal();
  const rows = [
    { f:'Количество инструментов',    us:'48', o:'11–22' },
    { f:'AI-ассистент в контексте',    us:true, o:false },
    { f:'Супер-аудит за 90 секунд',    us:true, o:false },
    { f:'Белый лейбл',                 us:true, o:false },
    { f:'Кредиты не сгорают',          us:true, o:false },
    { f:'API + MCP',                   us:true, o:true  },
    { f:'Русская поддержка',           us:true, o:true  },
    { f:'Стартовая цена, ₽/мес',       us:'0',  o:'990+' },
  ];
  const Cell = ({v}) => {
    if (v === true) return <span className="ck" style={{width:22, height:22, margin:'0 auto'}}><Icon name="check" size={12} stroke={3}/></span>;
    if (v === false) return <span style={{color:'var(--fg-3)', fontSize:18}}>—</span>;
    return <span className="mono" style={{fontSize:13, fontWeight:600}}>{v}</span>;
  };
  return (
    <section id="comparison" style={{padding:'120px 0', position:'relative', background:'var(--bg-deep)'}}>
      <div style={{width:'min(900px, 92%)', margin:'0 auto'}}>
        <div data-reveal style={{textAlign:'center', marginBottom:48}}>
          <div className="eyebrow" style={{justifyContent:'center'}}>Сравнение</div>
          <h2 className="display" style={{fontSize:'clamp(36px, 5vw, 64px)', margin:'16px 0 0'}}>
            Мы и <span className="grad-text">другие платформы</span>.
          </h2>
        </div>
        <div data-reveal style={{border:'1px solid var(--border)', borderRadius:18, overflow:'hidden', background:'var(--card)'}}>
          <div style={{display:'grid', gridTemplateColumns:'1.8fr 1fr 1fr', background:'var(--border)', gap:1}}>
            <div style={{padding:'18px 22px', background:'var(--bg-deep)'}}/>
            <div style={{padding:'18px 12px', background:'linear-gradient(180deg, color-mix(in oklab, var(--g-primary) 18%, var(--bg-deep)), var(--bg-deep))', textAlign:'center', borderTop:'2px solid var(--g-primary)'}}>
              <LogoMark size={18}/>
            </div>
            <div style={{padding:'18px 12px', background:'var(--bg-deep)', textAlign:'center', fontFamily:'var(--font-mono)', fontSize:13, fontWeight:600, color:'var(--fg-2)'}}>Другие платформы</div>
          </div>
          {rows.map((r, i)=>(
            <div key={i} style={{display:'grid', gridTemplateColumns:'1.8fr 1fr 1fr', background:'var(--border)', gap:1, borderTop:'1px solid var(--border)'}}>
              <div style={{padding:'16px 22px', background:'var(--card)', fontSize:14}}>{r.f}</div>
              <div style={{padding:'16px 12px', background:'color-mix(in oklab, var(--g-primary) 5%, var(--card))', textAlign:'center'}}><Cell v={r.us}/></div>
              <div style={{padding:'16px 12px', background:'var(--card)', textAlign:'center'}}><Cell v={r.o}/></div>
            </div>
          ))}
        </div>
        <div style={{textAlign:'center', marginTop:16, fontSize:12, color:'var(--fg-3)', fontFamily:'var(--font-mono)'}}>
          * усреднённые данные по сегменту SEO-платформ
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { TrustBar, ProblemSolution, HowItWorks, LiveProduct, Metrics, Testimonials, Comparison });