/* eslint-disable */
// Landing page sections — consumes shared.jsx globals

const toolGroups = [
  { key:'serp', label:'SERP-анализ', count: 13, icon:'search', items: [
    'Выгрузка ТОП','Проверка позиций','Кластеризация','Коммерциализация','Релевантные URL',
    'Подсветки Яндекса','Типы сайтов ТОП','Featured Snippets','People Also Ask','Реклама Директ',
    'Колдунщики Яндекса','Ключи конкурентов','Gap-анализ'
  ]},
  { key:'kw', label:'Ключевые слова', count: 5, icon:'key', items: [
    'Частотность','Подсказки','YouTube подсказки','Семантическое ядро','Расширение семантики'
  ]},
  { key:'site', label:'Анализ сайтов', count: 13, icon:'globe', items: [
    'Индексация','Мета-теги','Парсер H1-H6','WHOIS','Проверка ИКС','Структура сайта',
    'SEO-текст в ТОП','Мониторинг GEO','Проверка домена','Core Web Vitals','Sitemap.xml','Robots.txt','Schema.org'
  ]},
  { key:'ai', label:'AI-инструменты', count: 8, icon:'ai', items: [
    'AI мета-теги','AI интент','AI FAQ','AI LSI-слова','AI рерайт','AI контент-план','AI дополнить','AI сократить'
  ]},
  { key:'util', label:'Утилиты', count: 7, icon:'tool', items: [
    'Лемматизатор','Фильтр семантики','ТЗ копирайтинг','Орфография','Переоптимизация','HTML редактор','Букмарклеты'
  ]},
  { key:'special', label:'Особые', count: 2, icon:'sparkle', items: [
    'Супер-аудит','Rank Tracker'
  ]},
];

function LogoMark({ size=24 }) {
  return (
    <span className="logo-mark" style={{
      display:'inline-flex', alignItems:'center', gap:10, fontFamily:'var(--font-sans)',
      fontWeight: 900, fontSize: 17, letterSpacing:'-0.02em'
    }}>
      <span style={{
        width:size, height:size, borderRadius: 8, position:'relative',
        background: 'linear-gradient(135deg, var(--g-tertiary), var(--g-primary) 55%, var(--g-deep))',
        boxShadow: 'inset 0 1px 0 color-mix(in oklab, white 40%, transparent), 0 4px 14px -2px color-mix(in oklab, var(--g-primary) 50%, transparent)',
      }}>
        <span style={{
          position:'absolute', inset:3, border:'1.5px solid color-mix(in oklab, white 70%, transparent)',
          borderRadius: 5, borderRight:'none', borderBottom:'none'
        }}/>
        <span style={{
          position:'absolute', right:5, bottom:5, width:6, height:6, borderRadius:'50%',
          background: 'color-mix(in oklab, white 85%, transparent)',
          boxShadow:'0 0 6px white'
        }}/>
      </span>
      <span>seo<span style={{color:'var(--g-primary)'}}>.</span>tools</span>
    </span>
  );
}

function AuthShell({ eyebrow, title, sub, children, footer, marketing }) {
  const [theme, setTheme] = useTheme();
  return (
    <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', minHeight:'100vh'}}>
      <div style={{display:'flex', flexDirection:'column', padding:'32px 48px'}}>
        <div style={{display:'flex', justifyContent:'space-between', alignItems:'center'}}>
          <a href="/" style={{textDecoration:'none'}}><LogoMark/></a>
          <ThemeToggle theme={theme} setTheme={setTheme}/>
        </div>
        <div style={{flex:1, display:'flex', flexDirection:'column', justifyContent:'center', maxWidth:440, width:'100%', alignSelf:'center'}}>
          <div className="eyebrow">{eyebrow}</div>
          <h1 className="display" style={{fontSize:42, letterSpacing:'-0.035em', margin:'14px 0 10px', lineHeight:1.05}}>{title}</h1>
          {sub && <p style={{color:'var(--fg-2)', margin:'0 0 28px', fontSize:15, lineHeight:1.55}}>{sub}</p>}
          {children}
          {footer && <div style={{marginTop:28, textAlign:'center', color:'var(--fg-3)', fontSize:13}}>{footer}</div>}
        </div>
        <div style={{display:'flex', justifyContent:'space-between', fontSize:11, color:'var(--fg-3)', fontFamily:'var(--font-mono)'}}>
          <span>© 2026 seo.tools</span>
          <span>v4.1.0</span>
        </div>
      </div>
      <div style={{position:'relative', overflow:'hidden', borderLeft:'1px solid var(--border)', background:'var(--bg-deep)', display:'flex', flexDirection:'column', padding:'48px'}}>
        <Orbs variant="hero"/>
        <ReactiveGrid/>
        <div style={{position:'relative', zIndex:2, marginTop:'auto'}}>
          {marketing}
        </div>
      </div>
    </div>
  );
}

function Nav({ theme, setTheme }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const on = () => setScrolled(window.scrollY > 10);
    window.addEventListener('scroll', on); on();
    return () => window.removeEventListener('scroll', on);
  }, []);
  return (
    <header className={`nav ${scrolled?'nav-scrolled':''}`} style={{
      position:'fixed', top:0, left:0, right:0, zIndex:50,
      display:'flex', alignItems:'center', justifyContent:'space-between',
      padding: scrolled? '10px 32px':'16px 32px',
      transition:'padding .3s var(--ease), backdrop-filter .3s',
      background: scrolled? 'color-mix(in oklab, var(--bg) 70%, transparent)':'transparent',
      backdropFilter: scrolled? 'blur(18px) saturate(1.3)':'none',
      WebkitBackdropFilter: scrolled? 'blur(18px) saturate(1.3)':'none',
      borderBottom: scrolled? '1px solid var(--border)':'1px solid transparent',
    }}>
      <LogoMark/>
      <nav style={{ display:'flex', gap: 4, alignItems:'center' }} className="nav-links">
        {[
          ['Инструменты','/instruments'],
          ['Тарифы','#pricing'],
          ['Блог','/blog'],
          ['MCP','/mcp'],
        ].map(([l, href]) => (
          <a key={l} href={href} className="nav-link" style={{
            padding:'8px 14px', color:'var(--fg-2)', textDecoration:'none', fontSize:14, fontWeight:500,
            borderRadius:8, transition:'color .2s, background .2s'
          }}>{l}</a>
        ))}
      </nav>
      <div style={{display:'flex', gap:8, alignItems:'center'}}>
        <ThemeToggle theme={theme} setTheme={setTheme}/>
        <a className="btn btn-ghost btn-sm" href="/login">Войти</a>
        <Magnetic><a className="btn btn-primary btn-sm" href="/register">
          Попробовать <Icon name="arrow" size={14}/>
        </a></Magnetic>
      </div>
    </header>
  );
}

function Hero() {
  const titleRef = useRef(null);
  return (
    <section className="hero" style={{ position:'relative', minHeight:'100vh', display:'flex', alignItems:'center', paddingTop:120, paddingBottom:80, overflow:'hidden' }}>
      <Orbs variant="hero"/>
      <ReactiveGrid/>
      <div className="hero-inner" style={{ position:'relative', zIndex:2, width:'min(1200px, 92%)', margin:'0 auto', textAlign:'center' }}>
        <div style={{display:'inline-flex', marginBottom:28}}>
          <span className="pill on">
            <span className="dot"/>Обновление 4.1 — 4 новых инструмента: Core Web Vitals, Sitemap, Robots, Schema
            <Icon name="arrow" size={12}/>
          </span>
        </div>

        <h1 ref={titleRef} className="display hero-title" style={{
          fontSize:'clamp(48px, 8.6vw, 128px)',
          margin:'0 auto 28px',
          maxWidth: 1100,
          letterSpacing:'-0.045em',
        }}>
          <span style={{display:'block'}}>48 SEO-инструментов</span>
          <span className="grad-text" style={{display:'block'}}>в одном кабинете.</span>
        </h1>

        <p className="hero-sub" style={{
          fontSize:'clamp(16px, 1.5vw, 20px)',
          color:'var(--fg-2)', maxWidth: 720, margin:'0 auto 40px', lineHeight:1.5,
          minHeight: 60,
        }}>
          Для тех, кто <Typewriter phrases={[
            'ведёт 50+ клиентов и считает каждую копейку',
            'следит за позициями каждый день',
            'строит семантическое ядро на 10 000 ключей',
            'продаёт SEO-отчёты под белым лейблом'
          ]}/>
        </p>

        <div style={{display:'flex', gap:12, justifyContent:'center', flexWrap:'wrap', marginBottom:48}}>
          <Magnetic strength={18}><a className="btn btn-primary" href="#cta" style={{padding:'14px 22px', fontSize:15}}>
            Попробовать бесплатно <Icon name="arrow" size={15}/>
          </a></Magnetic>
          <Magnetic strength={18}><a className="btn" href="#pricing" style={{padding:'14px 22px', fontSize:15}}>
            <Icon name="play" size={13}/> Смотреть тарифы
          </a></Magnetic>
        </div>

        <div style={{display:'flex', gap:36, justifyContent:'center', alignItems:'center', flexWrap:'wrap', fontSize:13, color:'var(--fg-3)'}}>
          <span className="mono">3 запроса/день без регистрации</span>
          <span style={{width:4,height:4,borderRadius:'50%', background:'var(--fg-3)'}}/>
          <span className="mono">✓ Без карты</span>
          <span style={{width:4,height:4,borderRadius:'50%', background:'var(--fg-3)'}}/>
          <span className="mono">✓ Русская поддержка</span>
        </div>

        {/* Hero stats: только честные и проверяемые. Счётчики пользователей/задач
            показывать нельзя пока не пойдёт реальный трафик — ФЗ-38 «О рекламе» */}
        <div className="hero-stats" style={{ marginTop:72, display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:1,
          background:'var(--border)', border:'1px solid var(--border)', borderRadius: 20, overflow:'hidden'
        }}>
          {[
            { v:<Counter to={48}/>, k:'SEO-инструментов', mono:true },
            { v:'AI', k:'под капотом', mono:true },
            { v:'0 ₽', k:'без карты · 3 задачи в день', mono:true },
          ].map((s, i) => (
            <div key={i} style={{ background:'var(--bg-raised)', padding:'24px 20px', textAlign:'left' }}>
              <div className="numdisp" style={{fontSize:36, fontWeight:700, letterSpacing:'-0.03em'}}>{s.v}</div>
              <div className="mono" style={{fontSize:12, color:'var(--fg-3)', marginTop:4}}>{s.k}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Ticker() {
  const items = toolGroups.flatMap(g => g.items);
  const row = [...items, ...items];
  return (
    <section className="marq" style={{ padding:'40px 0', borderTop:'1px solid var(--border)', borderBottom:'1px solid var(--border)', background:'var(--bg-deep)', position:'relative', zIndex:3}}>
      <div className="ticker-track">
        <div className="ticker-row">
          {row.map((t, i) => (
            <span key={i} style={{display:'inline-flex', alignItems:'center', gap:10}}>
              <span className="dot" style={{color:'var(--g-primary)', fontSize:18, lineHeight:0}}>◆</span>
              <span style={{color:'var(--fg-2)'}}>{t}</span>
            </span>
          ))}
        </div>
      </div>
    </section>
  );
}

function ToolsGrid() {
  useReveal();
  const [activeGroup, setActiveGroup] = useState('all');
  const allItems = useMemo(() => {
    const list = [];
    toolGroups.forEach(g => g.items.forEach((t, idx) => list.push({name:t, group:g.key, gLabel:g.label, icon:g.icon, cost: [1,2,3,5,10][idx%5]})));
    return list;
  }, []);
  const filtered = activeGroup === 'all' ? allItems : allItems.filter(t => t.group === activeGroup);

  return (
    <section id="tools" style={{padding:'140px 0 100px', position:'relative', zIndex:2}}>
      <Orbs variant="sub"/>
      <div style={{ width:'min(1280px, 92%)', margin:'0 auto', position:'relative' }}>
        <div data-reveal style={{textAlign:'center', marginBottom:48}}>
          <div className="eyebrow" style={{justifyContent:'center', marginBottom:16}}>Каталог · 48 tools</div>
          <h2 className="display" style={{fontSize:'clamp(36px, 5vw, 72px)', margin:'0 0 16px'}}>
            Всё, что нужно <span className="grad-text">каждый день</span>.
          </h2>
          <p style={{color:'var(--fg-2)', fontSize:17, maxWidth:620, margin:'0 auto'}}>
            Заменяем подписки на 8 популярных SEO-сервисов одним кабинетом с оплатой по факту.
          </p>
        </div>

        <div data-reveal style={{display:'flex', justifyContent:'center', gap:8, flexWrap:'wrap', marginBottom: 40}}>
          <button className={`chip-btn ${activeGroup==='all'?'active':''}`} onClick={()=>setActiveGroup('all')}>
            Все <span className="mono" style={{opacity:0.5, marginLeft:4}}>48</span>
          </button>
          {toolGroups.map(g => (
            <button key={g.key} className={`chip-btn ${activeGroup===g.key?'active':''}`} onClick={()=>setActiveGroup(g.key)}>
              <Icon name={g.icon} size={13}/> {g.label} <span className="mono" style={{opacity:0.5, marginLeft:4}}>{g.count}</span>
            </button>
          ))}
        </div>

        <div className="tools-grid" style={{display:'grid', gridTemplateColumns:'repeat(auto-fill, minmax(240px, 1fr))', gap:14}}>
          {filtered.map((t, i) => <TiltToolCard key={t.name+i} tool={t} idx={i}/>)}
        </div>
      </div>
    </section>
  );
}

function TiltToolCard({ tool, idx }) {
  const ref = useTilt(8);
  return (
    <div ref={ref} data-reveal className="tool-card" style={{ transitionDelay: `${(idx%8)*20}ms` }}
         onMouseMove={(e)=> {
           const r = e.currentTarget.getBoundingClientRect();
           e.currentTarget.style.setProperty('--mx', `${e.clientX-r.left}px`);
           e.currentTarget.style.setProperty('--my', `${e.clientY-r.top}px`);
         }}>
      <div style={{display:'flex', justifyContent:'space-between', alignItems:'start', gap:12, position:'relative', zIndex:1}}>
        <div className="tc-icon"><Icon name={tool.icon} size={18}/></div>
        <span className="code-pill">{tool.cost}кр</span>
      </div>
      <div style={{marginTop:22, fontWeight:700, fontSize:15, letterSpacing:'-0.01em', position:'relative', zIndex:1}}>{tool.name}</div>
      <div className="mono" style={{marginTop:6, fontSize:11, color:'var(--fg-3)', position:'relative', zIndex:1}}>{tool.gLabel}</div>
      <div style={{marginTop:24, display:'flex', alignItems:'center', gap:6, color:'var(--fg-2)', fontSize:13, position:'relative', zIndex:1}}>
        <span className="sdot on"/> stable
        <span style={{marginLeft:'auto', display:'flex', alignItems:'center', gap:6, color:'var(--g-primary)', fontSize:12}}>
          Запустить <Icon name="arrow" size={12}/>
        </span>
      </div>
    </div>
  );
}

/* ============ FEATURES (bento) ============ */
function FeaturesBento() {
  useReveal();
  return (
    <section id="features" style={{padding:'100px 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 0'}}>
            Результаты, <span className="grad-text">которые работают на вас</span>.
          </h2>
        </div>

        <div className="bento-grid" style={{
          display:'grid',
          gridTemplateColumns:'1.3fr 1fr 1fr',
          gridTemplateRows:'1fr 1fr',
          gap:14,
          minHeight:680,
        }}>
          {/* SUPER-AUDIT */}
          <div data-reveal className="bento" style={{gridColumn:'1/2', gridRow:'1/3', padding:0, overflow:'hidden', display:'flex', flexDirection:'column'}}>
            <div style={{padding:'32px 32px 20px'}}>
              <div className="eyebrow">Супер-аудит · AI · 50 кредитов</div>
              <h3 className="display" style={{fontSize:'clamp(30px, 3.2vw, 46px)', margin:'14px 0 12px'}}>
                AI-отчёт о сайте<br/>за <span className="grad-text">90 секунд</span>.
              </h3>
              <p style={{color:'var(--fg-2)', margin:0, fontSize:15, maxWidth:420}}>
                Метатеги, H1-H6, robots, schema, семантика, ТОП конкурентов, рекомендации — в одном markdown-отчёте.
              </p>
            </div>
            <div style={{flex:1, position:'relative', margin:'12px 32px 32px', borderRadius:16, border:'1px solid var(--border)', overflow:'hidden', background:'var(--bg-deep)'}}>
              <AuditMock/>
            </div>
          </div>

          {/* RANK TRACKER */}
          <div data-reveal className="bento" style={{gridColumn:'2/4', gridRow:'1/2', padding:0, overflow:'hidden'}}>
            <div style={{padding:'28px 28px 14px', display:'flex', justifyContent:'space-between', alignItems:'start'}}>
              <div>
                <div className="eyebrow">Rank Tracker</div>
                <h3 style={{fontSize:28, margin:'12px 0 6px', letterSpacing:'-0.02em', fontWeight:700}}>Позиции в реальном времени</h3>
                <p style={{color:'var(--fg-2)', margin:0, fontSize:14}}>Яндекс, Google. 99 трекеров, 9999 ключей в AGENCY.</p>
              </div>
              <span className="pill on"><span className="dot"/>живые данные</span>
            </div>
            <div style={{padding:'0 14px 14px'}}>
              <RankChartMock/>
            </div>
          </div>

          {/* PROJECTS */}
          <div data-reveal className="bento" style={{gridColumn:'2/3', gridRow:'2/3'}}>
            <div className="eyebrow">Проекты</div>
            <h3 style={{fontSize:22, margin:'12px 0 6px', letterSpacing:'-0.02em', fontWeight:700}}>Семантика, теги, группы</h3>
            <p style={{color:'var(--fg-2)', margin:'0 0 16px', fontSize:14}}>Импорт CSV/TXT, bulk-операции, inline-редактирование тегов.</p>
            <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:6}}>
              {['купить iphone','купить iphone 15','iphone pro','где купить','цена iphone','iphone обзор'].map((k,i)=>(
                <div key={i} style={{padding:'7px 10px', background:'var(--input)', border:'1px solid var(--border)', borderRadius:8, fontFamily:'var(--font-mono)', fontSize:11}}>
                  <div style={{color:'var(--fg-2)', overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap'}}>{k}</div>
                  <div style={{color:'var(--g-primary)', fontSize:10, marginTop:2}}>#{[2,3,4,8,5,12][i]}</div>
                </div>
              ))}
            </div>
          </div>

          {/* AI ASSISTANT */}
          <div data-reveal className="bento" style={{gridColumn:'3/4', gridRow:'2/3'}}>
            <div className="eyebrow">AI-ассистент</div>
            <h3 style={{fontSize:22, margin:'12px 0 6px', letterSpacing:'-0.02em', fontWeight:700}}>Чат в контексте проекта</h3>
            <p style={{color:'var(--fg-2)', margin:'0 0 16px', fontSize:14}}>GPT-4o-mini на PRO. Подставляет семантику и конкурентов автоматически.</p>
            <div style={{padding:12, background:'var(--input)', border:'1px solid var(--border)', borderRadius:10}}>
              <div style={{fontSize:12, color:'var(--fg-3)', marginBottom:8, fontFamily:'var(--font-mono)'}}>你 › найди gap с конкурентами</div>
              <div style={{fontSize:12, color:'var(--fg-2)', lineHeight:1.5}}>
                Нашёл <b style={{color:'var(--g-primary)'}}>24 ключа</b>, по которым ваши конкуренты в ТОП-10, а вы — нет. Топ:
                <div style={{marginTop:6}} className="mono">→ «доставка еды москва» (wordstat 89k)</div>
                <div className="mono">→ «заказать суши» (wordstat 54k)</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function AuditMock() {
  return (
    <div style={{padding:20, fontSize:12, fontFamily:'var(--font-mono)', color:'var(--fg-2)', lineHeight:1.7}}>
      <div style={{display:'flex', gap:6, alignItems:'center', marginBottom:14}}>
        <span className="sdot on"/>
        <span style={{color:'var(--g-primary)'}}>audit</span>
        <span style={{color:'var(--fg-3)'}}>·</span>
        <span style={{color:'var(--fg-3)'}}>example.ru</span>
        <span style={{marginLeft:'auto', color:'var(--fg-3)'}}>00:01:23</span>
      </div>
      <Progress steps={[
        { label:'Анализируем страницу', done:true },
        { label:'Собираем SERP', done:true },
        { label:'Проверяем частотность', done:true },
        { label:'Генерируем отчёт', pct:72 },
      ]}/>
      <div style={{marginTop:18, padding:14, border:'1px solid var(--border)', borderRadius:8, background:'var(--bg)'}}>
        <div style={{color:'var(--g-primary)', marginBottom:6}}># Технический аудит</div>
        <div>✓ H1 найден (1 шт.)</div>
        <div>✗ meta description отсутствует на 8 страницах</div>
        <div>✗ robots.txt блокирует /api/*</div>
        <div>✓ schema.org Organization найдена</div>
        <div style={{color:'var(--g-primary)', margin:'10px 0 6px'}}># Рекомендации AI</div>
        <div style={{color:'var(--fg)'}}>1. Добавить description длиной 140-160 символов для 8 приоритетных URL...</div>
      </div>
    </div>
  );
}

function Progress({ steps }) {
  return (
    <div style={{display:'flex', flexDirection:'column', gap:8}}>
      {steps.map((s, i) => (
        <div key={i} style={{display:'flex', alignItems:'center', gap:10}}>
          <span className={`sdot ${s.done?'on': s.pct? 'warn':''}`} style={{flex:'none'}}/>
          <span style={{flex:1, color: s.done?'var(--fg)':'var(--fg-2)'}}>{s.label}</span>
          {s.done && <Icon name="check" size={12} stroke={2.5}/>}
          {s.pct !== undefined && <span className="mono" style={{color:'var(--g-primary)'}}>{s.pct}%</span>}
        </div>
      ))}
    </div>
  );
}

function RankChartMock() {
  const w = 620, h = 180, pad = 30;
  const series = [
    { color:'var(--g-primary)',   data:[22,18,15,14,12,10,8,7,5,4,3,2] },
    { color:'var(--g-tertiary)',  data:[35,33,30,27,25,22,19,18,17,15,14,12] },
    { color:'var(--g-secondary)', data:[12,11,11,9,9,8,8,7,6,5,5,4] },
  ];
  const maxY = 40;
  const path = (arr) => arr.map((y, i) => {
    const x = pad + (i/(arr.length-1)) * (w - pad*2);
    const yy = pad + (y / maxY) * (h - pad*2);
    return (i===0?'M':'L') + x.toFixed(1) + ',' + yy.toFixed(1);
  }).join(' ');
  const area = (arr) => path(arr) + ` L ${(w-pad).toFixed(1)},${(h-pad).toFixed(1)} L ${pad},${(h-pad).toFixed(1)} Z`;
  return (
    <svg viewBox={`0 0 ${w} ${h}`} style={{width:'100%', height:'auto', display:'block'}}>
      <defs>
        <linearGradient id="areaG" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0" stopColor="var(--g-primary)" stopOpacity="0.3"/>
          <stop offset="1" stopColor="var(--g-primary)" stopOpacity="0"/>
        </linearGradient>
      </defs>
      {[0,10,20,30,40].map((y, i) => {
        const yy = pad + (y/maxY)*(h-pad*2);
        return (<g key={i}>
          <line x1={pad} x2={w-pad} y1={yy} y2={yy} stroke="var(--border)" strokeDasharray="2 4"/>
          <text x={8} y={yy+3} fill="var(--fg-3)" fontSize={9} fontFamily="var(--font-mono)">{y}</text>
        </g>);
      })}
      <path d={area(series[0].data)} fill="url(#areaG)"/>
      {series.map((s, i) => (
        <path key={i} d={path(s.data)} fill="none" stroke={s.color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"
              style={{ filter: i===0?'drop-shadow(0 0 4px var(--g-primary))':'none' }}/>
      ))}
      {series[0].data.map((y, i) => {
        const x = pad + (i/(series[0].data.length-1)) * (w - pad*2);
        const yy = pad + (y / maxY) * (h - pad*2);
        return i === series[0].data.length-1 ? <circle key={i} cx={x} cy={yy} r={4} fill="var(--g-primary)" className="rank-pulse"/> : null;
      })}
    </svg>
  );
}

/* ============ PRICING ============ */
function Pricing() {
  useReveal();
  const [period, setPeriod] = useState(1);
  // Цены и скидки СИНХРОНИЗИРОВАНЫ с backend/src/routes/billing.ts PLAN_CONFIG.
  // Менять здесь — сразу обновить там, иначе рекламная цена ≠ фактическая (ФЗ-38).
  const discounts = { 1:0, 3:10, 6:20, 12:30 };
  const plans = [
    { name:'FREE',    price:0, credits:50, par:1, desc:'Попробовать', features:['48 инструментов','Nemotron AI','1 проект','Community support'] },
    { name:'STARTER', price:990, credits:500, par:3, desc:'Для фрилансеров', features:['48 инструментов','Rank Tracker: 3/50','5 проектов','Email support'] },
    { name:'PRO',     price:2990, credits:2000, par:5, desc:'Для профи', popular:true, features:['48 инструментов','GPT-4o-mini','Rank Tracker: 20/500','20 проектов','API доступ','Priority support'] },
    { name:'AGENCY',  price:30000, credits:10000, par:10, desc:'Для агентств', setup:true, features:['Всё из PRO','Белый лейбл','Custom домен','Rank: 99/9999','100 проектов','Менеджер'] },
  ];
  const fmt = (v) => v.toLocaleString('ru-RU');
  const calc = (p) => Math.round(p * period * (1 - discounts[period]/100));

  return (
    <section id="pricing" style={{padding:'120px 0', position:'relative'}}>
      <div style={{width:'min(1280px, 92%)', margin:'0 auto'}}>
        <div data-reveal style={{textAlign:'center', marginBottom:40}}>
          <div className="eyebrow" style={{justifyContent:'center'}}>Тарифы</div>
          <h2 className="display" style={{fontSize:'clamp(36px, 5vw, 72px)', margin:'16px 0 16px'}}>
            Платите только <span className="grad-text">за результат</span>.
          </h2>
          <p style={{color:'var(--fg-2)', fontSize:17, maxWidth:640, margin:'0 auto 28px'}}>
            Кредитная модель: 1 ключ = 1 кредит. Никаких лимитов на инструменты или запросы в секунду.
          </p>
          <div className="seg">
            {[1,3,6,12].map(p => (
              <button key={p} className={period===p?'active':''} onClick={()=>setPeriod(p)}>
                {p} мес {discounts[p]? <span style={{color:'var(--g-primary)', marginLeft:4}}>−{discounts[p]}%</span>:null}
              </button>
            ))}
          </div>
        </div>

        <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:14}} className="pricing-grid">
          {plans.map((p, i) => (
            <div key={p.name} data-reveal className="card" style={{
              padding:28, display:'flex', flexDirection:'column', gap:18,
              borderColor: p.popular? 'color-mix(in oklab, var(--g-primary) 45%, var(--border))' : undefined,
              background: p.popular? 'linear-gradient(180deg, color-mix(in oklab, var(--g-primary) 7%, var(--card)) 0%, var(--card) 50%)' : undefined,
              boxShadow: p.popular? 'var(--glow-primary)' : undefined,
              transitionDelay: `${i*60}ms`,
            }}>
              {p.popular && (
                <span style={{
                  position:'absolute', top:-11, left:'50%', transform:'translateX(-50%)',
                  padding:'4px 12px', borderRadius:999, fontSize:11, fontFamily:'var(--font-mono)', fontWeight:600,
                  background:'linear-gradient(110deg, var(--g-tertiary), var(--g-primary))',
                  color:'oklch(0.12 0.02 160)',
                  letterSpacing:'0.04em', textTransform:'uppercase',
                }}>Популярный</span>
              )}
              <div>
                <div style={{display:'flex', alignItems:'center', gap:8}}>
                  <span style={{fontFamily:'var(--font-mono)', fontSize:12, fontWeight:700, letterSpacing:'0.1em'}}>{p.name}</span>
                </div>
                <div style={{color:'var(--fg-3)', fontSize:13, marginTop:4}}>{p.desc}</div>
              </div>

              <div>
                <div style={{display:'flex', alignItems:'baseline', gap:6}}>
                  <span className="numdisp display" style={{fontSize:42}}>{p.price === 0 ? '0' : fmt(calc(p.price))}</span>
                  <span style={{color:'var(--fg-3)', fontSize:14}}>₽ / {period === 1? 'мес' : `${period}мес`}</span>
                </div>
                {p.setup && <div style={{fontSize:11, color:'var(--fg-3)', marginTop:2, fontFamily:'var(--font-mono)'}}>+ setup 30 000 ₽</div>}
                <div className="mono" style={{fontSize:12, color:'var(--g-primary)', marginTop:8}}>
                  {fmt(p.credits)} кр/мес · {p.par} паралл.
                </div>
              </div>

              <hr className="divider"/>

              <ul style={{listStyle:'none', padding:0, margin:0, display:'flex', flexDirection:'column', gap:10, flex:1}}>
                {p.features.map((f, idx) => (
                  <li key={idx} style={{display:'flex', gap:10, fontSize:13, color:'var(--fg-2)'}}>
                    <span className="ck"><Icon name="check" size={11} stroke={3}/></span>
                    <span>{f}</span>
                  </li>
                ))}
              </ul>

              <a href="/register" className={`btn ${p.popular?'btn-primary':''}`} style={{width:'100%', marginTop:'auto', textAlign:'center'}}>
                {p.price === 0 ? 'Начать бесплатно' : 'Оформить'}
              </a>
            </div>
          ))}
        </div>

        {/* Credit packs */}
        <div data-reveal style={{marginTop: 24, padding: 24, border:'1px dashed var(--border)', borderRadius: 16, display:'flex', alignItems:'center', gap:20, flexWrap:'wrap', justifyContent:'space-between'}}>
          <div>
            <div style={{fontSize:15, fontWeight:600}}>Мало кредитов? Докупите разово.</div>
            <div style={{color:'var(--fg-3)', fontSize:13, marginTop:4}}>Не сгорают. Списываются после месячных.</div>
          </div>
          <div style={{display:'flex', gap:10}}>
            {/* Цены синхронизированы с CREDIT_PACKS в backend/src/routes/billing.ts */}
            {[{c:100, p:199}, {c:500, p:799}, {c:2000, p:2000}].map(pk => (
              <a key={pk.c} href="/register" className="btn btn-sm">
                <span className="mono">{pk.c} кр</span> <span style={{color:'var(--fg-3)'}}>· {pk.p} ₽</span>
              </a>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============ FAQ ============ */
function FAQ() {
  useReveal();
  const [open, setOpen] = useState(0);
  const items = [
    { q: 'Чем отличаетесь от других SEO-сервисов?',
      a: 'Гибкой credit-моделью: в отличие от фиксированных лимитов на инструменты, кредиты можно тратить на то, что нужно прямо сейчас. Плюс AI-ассистент с контекстом проекта и супер-аудит в один клик.' },
    { q: 'Что такое «кредит»?',
      a: '1 кредит ≈ 1 базовая операция (проверка позиции, поиск ключа, парсинг URL). Некоторые тяжёлые инструменты берут больше: кластеризация — 3 кр/ключ, gap-анализ — 5 кр/ключ, супер-аудит — 50 кр.' },
    { q: 'Можно ли попробовать без регистрации?',
      a: 'Да: 9 бесплатных инструментов на /try/[slug] с лимитом 3 запроса/день по IP. Полный каталог — после регистрации (FREE, 50 кр/мес).' },
    { q: 'Как работает белый лейбл в AGENCY?',
      a: 'Вы покупаете кредиты оптом со скидкой до 35%, настраиваете свой домен (A-запись), логотип, цвета и тарифы. Клиенты видят ваш бренд и платят через ваш Prodamus/YooMoney. Платформа только обрабатывает задачи.' },
    { q: 'Какие поисковики поддерживаете?',
      a: 'Яндекс и Google. Геолокация: Россия, Беларусь, Казахстан, Украина, Турция + 50 стран для Google. Мобильная/десктопная выдача отдельно.' },
    { q: 'Есть ли API?',
      a: 'Да, на тарифах PRO и AGENCY. REST + webhooks. Лимит зависит от плана. Доступна MCP-интеграция для Claude Desktop.' },
  ];
  return (
    <section id="faq" style={{padding:'100px 0', position:'relative'}}>
      <div style={{width:'min(880px, 92%)', margin:'0 auto'}}>
        <div data-reveal style={{textAlign:'center', marginBottom:40}}>
          <div className="eyebrow" style={{justifyContent:'center'}}>FAQ</div>
          <h2 className="display" style={{fontSize:'clamp(36px, 5vw, 64px)', margin:'16px 0 0'}}>
            Частые вопросы.
          </h2>
        </div>
        <div data-reveal style={{borderTop:'1px solid var(--border)'}}>
          {items.map((it, i) => (
            <div key={i} style={{borderBottom:'1px solid var(--border)'}}>
              <button onClick={()=> setOpen(open===i?-1:i)} style={{
                width:'100%', padding:'20px 0', display:'flex', alignItems:'center', gap:16,
                background:'transparent', border:'none', color:'var(--fg)', textAlign:'left', cursor:'pointer',
                fontSize:17, fontWeight:600, letterSpacing:'-0.01em', fontFamily:'var(--font-sans)'
              }}>
                <span className="mono" style={{color:'var(--fg-3)', fontSize:12, minWidth:24}}>0{i+1}</span>
                <span style={{flex:1}}>{it.q}</span>
                <Icon name="chevronDown" size={18} style={{ transform: open===i?'rotate(180deg)':'', transition:'transform .3s' }}/>
              </button>
              <div style={{
                maxHeight: open===i? 200:0, overflow:'hidden', transition:'max-height .4s var(--ease), opacity .3s',
                opacity: open===i?1:0,
              }}>
                <p style={{padding:'0 40px 20px', color:'var(--fg-2)', fontSize:15, lineHeight:1.6, margin:0}}>
                  {it.a}
                </p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============ CTA + FOOTER ============ */
function CTA() {
  useReveal();
  return (
    <section id="cta" style={{padding:'120px 0 80px', position:'relative', overflow:'hidden'}}>
      <Orbs variant="sub"/>
      <div data-reveal style={{width:'min(960px, 92%)', margin:'0 auto', textAlign:'center', position:'relative', zIndex:2,
        padding:'80px 40px', border:'1px solid var(--border)', borderRadius: 28,
        background: 'linear-gradient(180deg, color-mix(in oklab, var(--g-primary) 8%, var(--card)), var(--card))',
        boxShadow: 'var(--glow-primary)',
      }}>
        <h2 className="display" style={{fontSize:'clamp(36px, 5vw, 72px)', margin:'0 0 20px'}}>
          Начните с <span className="grad-text">первых 3 запросов</span>.
        </h2>
        <p style={{color:'var(--fg-2)', fontSize:17, margin:'0 auto 32px', maxWidth: 520}}>
          Без регистрации, без карты. Зарегистрируйтесь, когда захотите сохранять проекты.
        </p>
        <div style={{display:'flex', gap:12, justifyContent:'center', flexWrap:'wrap'}}>
          <Magnetic><a className="btn btn-primary" style={{padding:'14px 22px', fontSize:15}} href="/register">
            Попробовать сейчас <Icon name="arrow" size={15}/>
          </a></Magnetic>
          <Magnetic><a className="btn" style={{padding:'14px 22px', fontSize:15}} href="#pricing">
            Сравнить тарифы
          </a></Magnetic>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  // Все href на публично доступные маршруты. # убран — раньше ссылки
  // ломались и клики никуда не вели.
  // Только реально существующие маршруты. Прежде footer был полностью мёртвый
  // (все href="#"). Не добавлять сюда /docs, /about, /partners и т.п. пока их
  // нет в frontend/src/app — даст 404.
  const cols = [
    { t:'Продукт', items:[
      ['Инструменты','/instruments'],
      ['Супер-аудит','/register'],
      ['Rank Tracker','/register'],
      ['AI-ассистент','/register'],
      ['MCP','/mcp'],
      ['Тарифы','#pricing'],
    ]},
    { t:'Ресурсы', items:[
      ['Блог','/blog'],
      ['Сравнение с другими','#comparison'],
    ]},
    { t:'Компания', items:[
      ['Поддержка','mailto:info@seotoolse.ru'],
      ['Telegram','https://t.me/seotoolse'],
    ]},
    { t:'Правовое', items:[
      ['Оферта','/offer'],
      ['Политика ПДн','/privacy'],
      ['Реквизиты','/requisites'],
      ['Правила','/terms'],
    ]},
  ];
  return (
    <footer style={{ padding:'60px 0 30px', borderTop:'1px solid var(--border)', background:'var(--bg-deep)' }}>
      <div style={{ width:'min(1280px, 92%)', margin:'0 auto', display:'grid', gridTemplateColumns:'1.5fr repeat(4, 1fr)', gap:40 }}>
        <div>
          <LogoMark/>
          <p style={{color:'var(--fg-3)', fontSize:13, marginTop:16, maxWidth:280, lineHeight:1.6}}>
            Профессиональные SEO-инструменты для фрилансеров, агентств и in-house маркетологов.
          </p>
          <div style={{display:'flex', gap:8, marginTop:20}}>
            <span className="pill"><span className="sdot on"/>все системы: OK</span>
          </div>
        </div>
        {cols.map((c) => (
          <div key={c.t}>
            <div style={{fontSize:11, fontFamily:'var(--font-mono)', textTransform:'uppercase', color:'var(--fg-3)', letterSpacing:'0.1em', marginBottom:16}}>{c.t}</div>
            <ul style={{listStyle:'none', padding:0, margin:0, display:'flex', flexDirection:'column', gap:10}}>
              {c.items.map(([label, href]) => <li key={label}><a href={href} style={{color:'var(--fg-2)', textDecoration:'none', fontSize:13}}>{label}</a></li>)}
            </ul>
          </div>
        ))}
      </div>
      <div style={{ width:'min(1280px, 92%)', margin:'60px auto 0', paddingTop:24, borderTop:'1px solid var(--border)', display:'flex', justifyContent:'space-between', alignItems:'center', fontSize:12, color:'var(--fg-3)', fontFamily:'var(--font-mono)'}}>
        <span>© 2026 seo.tools · сделано для русскоязычных SEO</span>
        <span>v4.1.0 · build 2a9e1f</span>
      </div>
    </footer>
  );
}

Object.assign(window, {
  LogoMark, Nav, AuthShell, Hero, Ticker, ToolsGrid, FeaturesBento, Pricing, FAQ, CTA, Footer,
  toolGroups,
});