const { useState, useEffect, useRef } = React;
const D = window.AC_DATA;

function Typewriter({ lines, startDelay=300, speed=18 }) {
  const [out, setOut] = useState([]);
  const [done, setDone] = useState(false);
  useEffect(() => {
    let i = 0, j = 0, timer;
    setOut(lines.map(() => ''));
    const tick = () => {
      if (i >= lines.length) { setDone(true); return; }
      const full = lines[i];
      if (j <= full.length) {
        setOut(prev => { const n = [...prev]; n[i] = full.slice(0, j); return n; });
        j++;
        timer = setTimeout(tick, speed);
      } else {
        i++; j = 0;
        timer = setTimeout(tick, 140);
      }
    };
    timer = setTimeout(tick, startDelay);
    return () => clearTimeout(timer);
  }, []);
  return (
    <div>
      {out.map((l,i)=>(<div key={i} style={{whiteSpace:'pre-wrap'}}>{l}{i === out.length-1 && !done && <span style={{display:'inline-block', width:8, height:'1em', background:'var(--phosphor)', verticalAlign:'-2px', animation:'blink 1s steps(2) infinite'}}/>}</div>))}
    </div>
  );
}

function Statusbar() {
  const [time, setTime] = useState('');
  useEffect(()=>{
    const upd = () => setTime(new Date().toLocaleTimeString('ru-RU', {hour:'2-digit', minute:'2-digit', second:'2-digit'}));
    upd(); const t = setInterval(upd, 1000); return () => clearInterval(t);
  },[]);
  return (
    <div className="statusbar">
      <div className="sb-brand"><span className="led"/> <strong>ai-champion</strong> <span style={{color:'var(--bone-dim)'}}>~ operator online</span></div>
      <nav>
        <a href="#problem">./problem</a>
        <a href="#method">./method</a>
        <a href="#tree">./tree</a>
        <a href="#process">./process</a>
        <a href="#roles">./roles</a>
        <a href="#formats">./formats</a>
      </nav>
      <div style={{display:'flex', gap:16, alignItems:'center'}}>
        <a href="en.html" style={{color:'var(--bone-dim)', fontSize:12, textDecoration:'none', letterSpacing:'0.05em'}}>EN</a>
        <a href="#cta" className="sb-cta">./free_audit</a>
      </div>
    </div>
  );
}

function Hero() {
  return (
    <section className="hero container">
      <div className="hero-console">
        <div className="console-bar">
          <div className="dots"><i className="r"/><i className="y"/><i className="g"/></div>
          <span className="title">~/company-os — ai-champion — 120x32</span>
          <span style={{marginLeft:'auto', color:'var(--bone-dim)'}}>zsh</span>
        </div>
        <div className="console-body">
          <Typewriter lines={[
            '$ ai-champion init --mode=native --weeks=10',
            '▸ initializing Company OS…  ok',
            '▸ scanning 80+ ref deployments…  ok',
            '▸ ready. starting session…',
          ]}/>
          <h1 className="hero-h1" style={{marginTop:32}}>
            AI-native компания<br/>за <em>10 недель.</em><span className="caret"/>
          </h1>
          <p className="hero-sub">
            Company OS — операционная система, где AI-агенты и люди работают как единая команда.
            Масштабирование без найма. Каждый процесс спроектирован под AI с самого начала.
          </p>
          <div className="hero-ctas">
            <a className="btn primary" href="#cta">Начать с аудита</a>
            <a className="btn" href="#process">Как это работает</a>
          </div>
          <div className="hero-stats">
            {D.heroStats.map((s,i)=>(<div key={i} className="hero-stat"><div className="n">{s.value}</div><div className="l">{s.label}</div></div>))}
          </div>
        </div>
      </div>
    </section>
  );
}

function Problems() {
  return (
    <section id="problem" className="container">
      <div className="kicker">Проблема</div>
      <h2 className="display">{D.painHeading.split('ещё нет')[0]}<em>ещё нет.</em></h2>
      <p className="lede">{D.painSub}</p>
      <div className="probs">
        {D.problems.map((p,i)=>(
          <div key={i} className="prob">
            <div className="prob-tag">ERR_{p.n}</div>
            <div>
              <div className="prob-t">{p.title}</div>
              <div className="prob-b">{p.body}</div>
              <div className="prob-chips">{p.chips.map((c,j)=><span key={j}>{c}</span>)}</div>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

function Levels() {
  return (
    <section id="method" className="container">
      <div className="kicker">Метод</div>
      <h2 className="display">{D.methodHeading.split('AI-трансформации')[0]}<em>AI-трансформации</em></h2>
      <p className="lede">{D.methodSub}</p>
      <div className="levels">
        {D.levels.map((l,i)=>(
          <div key={i} className="level">
            <div className="lvl-head"><span className="n">level_{l.n}</span><span>{l.sub}</span></div>
            <div className="lvl-t">{l.title}</div>
            <div className="lvl-b">{l.body}</div>
            <div className="lvl-art">{l.artefacts.map((a,j)=><div key={j}>{a}</div>)}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

function TreeAscii() {
  const [active, setActive] = useState('sales/');
  const labelMap = Object.fromEntries(D.tree.map(n => [n.path, n.label]));
  const children = D.treeChildrenExample[active] || [];

  const buildLines = () => {
    // ASCII art tree
    const items = D.tree;
    return items.map((n, idx) => {
      if (n.depth === 0) {
        return { path: n.path, prefix: '', name: n.path, label: '', node: n };
      }
      const isLast = idx === items.length - 1;
      const prefix = isLast ? '└── ' : '├── ';
      return { path: n.path, prefix, name: n.path, label: n.label, node: n };
    });
  };
  const lines = buildLines();

  return (
    <section id="tree" className="container">
      <div className="kicker">Архитектура</div>
      <h2 className="display">Company OS — знания компании, которые <em>не уходят с людьми</em></h2>

      <div className="tree-shell" style={{marginTop: 40}}>
        <div>
          <div className="tree-ascii">
            {lines.map((l, i) => {
              const clickable = D.treeChildrenExample[l.path];
              const isActive = l.path === active;
              return (
                <span key={i}
                      className={"tree-line" + (clickable ? ' clickable' : '') + (isActive ? ' active' : '')}
                      onClick={() => clickable && setActive(l.path)}>
                  <span className="dim">{l.prefix}</span>
                  {l.name}
                  {l.label && <span className="dim">   # {l.label}</span>}
                  {'\n'}
                </span>
              );
            })}
          </div>
        </div>
        <div className="tree-detail">
          <div className="path-crumb">~/company-os/{active}</div>
          <h3>{labelMap[active]}</h3>
          <p>Внутри — процессы в markdown, данные в structured формате, blueprints агентов. Новый сотрудник буквально «читает дерево».</p>
          <ul>
            {children.map((c,i)=>(
              <li key={i}><span>{c.kind==='dir' ? '▸' : '○'}  {c.name}</span><span>{c.kind}</span></li>
            ))}
          </ul>
          <div className="tree-hint">⌨ кликните по ├── папкам слева: sales/ · operations/ · governance/</div>
        </div>
      </div>

      <div className="principles">
        <div className="principle"><h4>tool-agnostic</h4><p>Знания в дереве, не в платформе. Уйдёт Notion — переедете за вечер.</p></div>
        <div className="principle"><h4>agent-readable</h4><p>Structured data вместо неструктурированных облачных документов.</p></div>
        <div className="principle"><h4>flywheel</h4><p>Каждое действие человека или агента обогащает систему.</p></div>
      </div>
    </section>
  );
}

function Process() {
  return (
    <section id="process" className="container">
      <div className="kicker">Процесс</div>
      <h2 className="display">{D.processHeading.split('6-14')[0]}<em>6-14 недель</em></h2>
      <p className="lede">{D.processSub}</p>
      <div style={{marginTop:40, position:'relative', paddingLeft:40}}>
        <div style={{position:'absolute', left:12, top:0, bottom:0, width:2, background:'linear-gradient(to bottom, var(--phosphor), rgba(142,232,93,0.1))'}}/>
        {D.phases.map((p,i)=>(
          <div key={i} style={{display:'grid', gridTemplateColumns:'100px 1fr', gap:20, padding:'24px 0', borderBottom:'1px dashed var(--bone-line)', position:'relative'}}>
            <div style={{position:'absolute', left:-33, top:28, width:10, height:10, borderRadius:'50%', background:'var(--phosphor)'}}/>
            <div style={{color:'var(--bone-dim)', fontSize:13, fontWeight:500}}>{p.w}</div>
            <div>
              <div style={{fontSize:22, fontWeight:500, marginBottom:8, color:'var(--bone)'}}>{p.name}</div>
              <div style={{color:'var(--bone-dim)', fontSize:15, marginBottom:14, lineHeight:1.6}}>{p.body}</div>
              {p.tags && <div style={{display:'flex', gap:8, flexWrap:'wrap'}}>
                {p.tags.map((t,j)=><span key={j} style={{padding:'4px 10px', background:'var(--carbon)', border:'1px solid var(--bone-line)', color:'var(--bone-dim)', fontSize:11}}>{t}</span>)}
              </div>}
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

function Roles() {
  return (
    <section id="roles" className="container">
      <div className="kicker">Люди</div>
      <h2 className="display">{D.rolesHeading.split('трансформация людей')[0]}<em>трансформация людей</em></h2>
      <div className="roles">
        {D.roles.map((r,i)=>(
          <React.Fragment key={i}>
            <div className="role">
              <div className="r-n">stage_{r.n}</div>
              <div className="r-name">{r.name}</div>
              <div className="r-b">{r.body}</div>
              <ul>{r.does.map((d,j)=><li key={j}>{d}</li>)}</ul>
            </div>
            {i < D.roles.length-1 && <div className="role-arrow">→</div>}
          </React.Fragment>
        ))}
      </div>
      <div style={{textAlign:'center', padding:'32px', border:'1px solid var(--bone-line)', marginTop:32}}>
        <div style={{fontSize:48, fontWeight:600, color:'var(--phosphor)', lineHeight:1}}>~40%</div>
        <div style={{fontSize:15, color:'var(--bone-dim)', marginTop:8}}>{D.rolesMetric}</div>
      </div>
    </section>
  );
}

function Outcomes() {
  return (
    <section id="outcomes" className="container">
      <div className="kicker">Результат</div>
      <h2 className="display">Что вы получаете</h2>
      <div className="outs">
        {D.outcomes.map((o,i)=>(
          <div key={i} className="out-cell">
            <div className="on">out_{o.n}</div>
            <div className="ot">{o.t}</div>
            <div className="od">{o.d}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

function Quotes() {
  return (
    <section className="container">
      <div className="kicker">Кейсы</div>
      <h2 className="display">С чем приходят компании</h2>
      <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:12, marginTop:40}}>
        {D.quotes.map((q,i)=>(
          <div key={i} style={{padding:'20px 24px', border:'1px solid var(--bone-line)', background:'var(--carbon-2)'}}>
            <div style={{fontSize:14, lineHeight:1.7, color:'var(--bone-dim)', marginBottom:14, fontWeight:400}}>
              <span style={{color:'var(--phosphor)', marginRight:2}}>&#8220;</span>{q.text}<span style={{color:'var(--phosphor)', marginLeft:2}}>&#8221;</span>
            </div>
            <div style={{fontSize:11, color:'var(--phosphor)', textTransform:'uppercase', letterSpacing:'0.08em'}}>{q.who}</div>
            <div style={{fontSize:11, color:'var(--bone-faint)', marginTop:3}}>{q.meta}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

function Formats() {
  return (
    <section id="formats" className="container">
      <div className="kicker">Форматы</div>
      <h2 className="display">От первых агентов до полной <em>AI-native</em> операционки</h2>
      <div className="formats">
        {D.formats.map((f,i)=>(
          <div key={i} className={"fmt" + (f.featured?' featured':'')}>
            <div className="fk">{f.kicker}</div>
            <div className="ft">{f.tier}</div>
            <div className="fm">{f.weeks} · команда {f.size}</div>
            <ul>{f.bullets.map((b,j)=><li key={j}>{b}</li>)}</ul>
            <a className="fmt-cta" href="#cta" style={f.featured ? {background:'var(--phosphor)', color:'var(--carbon)', padding:'10px 20px', fontWeight:600, textAlign:'center', display:'block'} : {padding:'10px 20px', textAlign:'center', display:'block', border:'1px solid var(--bone-line)', color:'var(--bone-dim)'}}>Обсудить проект</a>
          </div>
        ))}
      </div>
    </section>
  );
}

function CTA() {
  // Inline 4-field form removed 2026-05-05: payload shape didn't match
  // /api/lead validator (no form_version, no opened_at, fields not nested)
  // → silent_drop on every submission, user saw "✓ Отправлено" but lead
  // never reached data-repo. Single canonical brief at /brief.html now.
  return (
    <section id="cta" className="container">
      <div className="kicker">Следующий шаг</div>
      <h2 className="display">Начните с <em>бесплатного аудита</em></h2>
      <p className="lede">{D.ctaSub}</p>
      <div style={{fontSize:15, color:'var(--bone-dim)', lineHeight:1.7, marginTop:20, marginBottom:24}}>
        <strong style={{color:'var(--bone)'}}>Что вы получите бесплатно:</strong><br/>
        {D.ctaBenefits.map((b,i)=><span key={i}><span style={{color:'var(--phosphor)'}}>•</span> {b}<br/></span>)}
      </div>
      <a className="btn primary" href="/brief.html" style={{display:'inline-block'}}>Заполнить бриф (5–7 мин) →</a>
      <p style={{fontSize:13, color:'var(--bone-dim)', marginTop:12}}>
        Подробный бриф — мы готовимся к 30-минутному звонку и приходим с готовым разбором, а не интервью с нуля.
      </p>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer container">
      <div className="footer-inner">
        <div>© 2026 · ai-champion × ai-mindset</div>
        <div><a href="https://t.me/alex_named">./telegram</a><a href="https://ai-native.aimindset.org">./sprint</a></div>
      </div>
    </footer>
  );
}

function Evolution() {
  return (
    <section className="container">
      <div className="kicker">Эволюция</div>
      <h2 className="display">Мы <em>ускорим</em> ваш путь к AI-native</h2>
      <p className="lede">{D.evoSub}</p>
      <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:0, marginTop:40}}>
        {D.evoStages.map((s,i)=>(
          <div key={i} style={{padding:24, border:'1px solid var(--bone-line)', borderColor: i===0 ? 'rgba(255,100,100,0.3)' : i===3 ? 'var(--phosphor)' : 'var(--bone-line)'}}>
            <div style={{fontSize:11, textTransform:'uppercase', letterSpacing:'0.1em', color: i===0 ? 'rgba(255,120,120,0.6)' : 'var(--phosphor)', marginBottom:12}}>{s.label}</div>
            <div style={{fontSize:22, fontWeight:500, marginBottom:10}}>{s.title}</div>
            <div style={{fontSize:14, color:'var(--bone-dim)', lineHeight:1.6}}>{s.items.map((item,j)=><span key={j}>{item}<br/></span>)}</div>
          </div>
        ))}
      </div>
      <div style={{marginTop:24, padding:'20px 28px', border:'1px solid var(--bone-line)', display:'flex', justifyContent:'space-between', alignItems:'center', flexWrap:'wrap', gap:16}}>
        <div style={{fontSize:15, color:'var(--bone-dim)', maxWidth:'55ch', lineHeight:1.6}}>
          <strong style={{color:'var(--bone)'}}>{D.evoClaim.split('.')[0]}.</strong> {D.evoClaim.split('.').slice(1).join('.')}
        </div>
        <a className="btn" href="#cta">Ускорить путь →</a>
      </div>
    </section>
  );
}

function Stats() {
  return (
    <section className="container">
      <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:0, borderTop:'1px solid var(--bone-line)', borderBottom:'1px solid var(--bone-line)'}}>
        {D.stats.map((s,i)=>(
          <div key={i} style={{padding:32, borderRight: i < D.stats.length-1 ? '1px solid var(--bone-line)' : 'none', textAlign:'center'}}>
            <div style={{fontSize:48, fontWeight:600, color:'var(--phosphor)', lineHeight:1}}>{s.value}</div>
            <div style={{fontSize:13, color:'var(--bone-dim)', marginTop:8, textTransform:'uppercase', letterSpacing:'0.05em'}}>{s.label}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

const Spacer = () => <div style={{height: 80}}/>;

function App() {
  return (
    <div className="v2">
      <Statusbar/>
      <Hero/>
      <Spacer/>
      <Problems/>
      <Spacer/>
      <Levels/>
      <Spacer/>
      <TreeAscii/>
      <Spacer/>
      <Process/>
      <Spacer/>
      <Roles/>
      <Spacer/>
      <Outcomes/>
      <Spacer/>
      <Evolution/>
      <Spacer/>
      <Stats/>
      <Spacer/>
      <Quotes/>
      <Spacer/>
      <Formats/>
      <Spacer/>
      <CTA/>
      <Footer/>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App/>);