// Main app composition
const { useEffect, useState } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "light",
  "accent": "teal",
  "density": "spacious",
  "heroVariant": "split"
}/*EDITMODE-END*/;

const ACCENTS = {
  teal:     { color: '#0F766E', name: 'Deep teal' },
  indigo:   { color: '#4F46E5', name: 'Slate blue' },
  gold:     { color: '#B7791F', name: 'Dusty gold' },
  ruby:     { color: '#BE123C', name: 'Ruby' },
  forest:   { color: '#166534', name: 'Forest' },
  petrol:   { color: '#1F4E5F', name: 'Petrol blue' },
  copper:   { color: '#B45309', name: 'Copper' },
  wine:     { color: '#9F1239', name: 'Wine' },
  steel:    { color: '#475569', name: 'Steel blue-grey' },
};

function App() {
  const [tweaks, setTweak] = window.useTweaks
    ? window.useTweaks(TWEAK_DEFAULTS)
    : [TWEAK_DEFAULTS, () => {}];

  useEffect(() => {
    document.documentElement.dataset.theme = tweaks.theme;
    const accent = ACCENTS[tweaks.accent]?.color || '#E2522B';
    document.documentElement.style.setProperty('--accent-pop', accent);
  }, [tweaks.theme, tweaks.accent]);

  return (
    <>
      <Nav />
      <Hero />
      <Marquee />
      <SectionTeam />
      <SectionExitChallenges />
      <SectionApproach />
      <SectionScenarios />
      <SectionFee />
      <SectionChallenge />
      <SectionMarket />
      <SectionPremises />
      <SectionCases />
      <SectionCTA />
      <Footer />
      <SectionIndicator />
      {window.TweaksPanel && (
        <window.TweaksPanel title="Tweaks">
          <window.TweakSection title="Тема">
            <window.TweakRadio
              label="Палитра"
              value={tweaks.theme}
              options={[{value:'light',label:'Light'},{value:'dark',label:'Dark'}]}
              onChange={(v)=>setTweak('theme', v)}
            />
            <window.TweakSelect
              label="Акцент"
              value={tweaks.accent}
              options={Object.entries(ACCENTS).map(([k,v])=>({value:k, label:v.name}))}
              onChange={(v)=>setTweak('accent', v)}
            />
          </window.TweakSection>
          <window.TweakSection title="Hero">
            <window.TweakRadio
              label="Вариант"
              value={tweaks.heroVariant}
              options={[
                {value:'split',label:'Карта'},
                {value:'numbers',label:'Цифры'},
              ]}
              onChange={(v)=>setTweak('heroVariant', v)}
            />
          </window.TweakSection>
        </window.TweaksPanel>
      )}
    </>
  );
}

function Nav() {
  const [open, setOpen] = useState(false);
  const navItems = [
    { href: '#team', label: 'Команда' },
    { href: '#exit-challenges', label: 'Вызовы' },
    { href: '#approach', label: 'Подход' },
    { href: '#scenarios', label: 'Экономика' },
    { href: '#fee', label: 'Модель' },
    { href: '#market', label: 'Рынок' },
    { href: 'companies.html', label: 'Компании' },
    { href: '#cases', label: 'Кейсы' },
    { href: '#contact', label: 'Контакты' },
  ];

  const handleNavClick = () => setOpen(false);
  const rememberLang = (lang) => {
    try { window.localStorage.setItem('bridge_lang', lang); } catch (e) {}
  };
  const openContactForm = () => {
    setOpen(false);
    window.dispatchEvent(new CustomEvent('bridge:open-contact-form'));
  };

  return (
    <header className="nav">
      <div className="wrap nav-inner">
        <a href="#" className="brand">
          <span className="glyph">B</span>
          <span>Bridge</span>
          <span style={{color:'var(--ink-3)', fontWeight:400, fontSize:'12px', marginLeft:'8px', fontFamily:'var(--mono)', letterSpacing:'0.1em', textTransform:'uppercase'}}>Central&nbsp;Asia</span>
        </a>
        <nav className={`nav-links ${open ? 'nav-links--mobile-open' : ''}`}>
          {navItems.map((item) => (
            <a key={item.href} href={item.href} onClick={handleNavClick}>{item.label}</a>
          ))}
        </nav>
        <div className="nav-actions">
          <button type="button" className="btn btn--ghost" style={{padding:'10px 16px', fontSize:'13px'}} onClick={openContactForm}>
            Связаться <span className="arrow">↗</span>
          </button>
          <a href="en/index.html" className="lang-link" aria-label="Switch to English" onClick={() => rememberLang('en')}>EN</a>
          <button
            type="button"
            className="nav-toggle"
            aria-label={open ? 'Закрыть меню' : 'Открыть меню'}
            aria-expanded={open}
            onClick={() => setOpen((v) => !v)}
          >
            <span />
            <span />
            <span />
          </button>
        </div>
      </div>
    </header>
  );
}

function Hero() {
  return (
    <section className="hero" data-section-name="00 · INTRO">
      <div className="wrap">
        <div className="hero-meta reveal">
          <span>BRIDGE / B2B ENTERPRISE IT</span>
          <span style={{textAlign:'right'}}>ALMATY · MOSCOW · TASHKENT · BISHKEK</span>
        </div>

        <div className="hero-grid">
          <div>
            <div className="h-eyebrow reveal" style={{marginBottom:'24px'}}>
              <span style={{color:'var(--accent-pop)'}}>●</span> Стратегическое партнёрство для выхода в Азию
            </div>
            <h1 className="reveal" style={{'--rd':'80ms'}}>
              <em className="hero-accent">BizDev</em><br/>
              <span className="hero-ru">в Центральной Азии.</span>
            </h1>
            <p className="hero-sub reveal" style={{'--rd':'200ms'}}>
              Мы помогаем B2B Enterprise IT проверить гипотезу выхода в Казахстан,
              Узбекистан и Кыргызстан без дорогого локального найма, новой ТОО без
              истории и долгого ожидания первых рыночных сигналов.
            </p>
            <div className="hero-cta reveal" style={{'--rd':'320ms'}}>
              <a href="#contact" className="btn btn--accent">
                Стратегическая сессия · 30 мин <span className="arrow">→</span>
              </a>
              <a href="#approach" className="btn btn--ghost">
                Как мы работаем
              </a>
            </div>

            <div className="hero-stamp reveal" style={{'--rd':'440ms'}}>
              <div className="item">
                <div className="k"><span data-count="17" data-decimals="0">0</span>+</div>
                <div className="v">лет на Enterprise</div>
              </div>
              <div className="item">
                <div className="k">SAP · MS</div>
                <div className="v">Salesforce · Yandex</div>
              </div>
              <div className="item">
                <div className="k">4-12 нед</div>
                <div className="v">до go / no-go решения</div>
              </div>
            </div>
          </div>

          <div className="reveal" style={{'--rd':'200ms'}}>
            <window.CentralAsiaMap />
          </div>
        </div>
      </div>
    </section>
  );
}

function Marquee() {
  const items = ['BIZDEV ≠ SDR', 'ПРОВЕРКА РЫНКА', 'ЛОКАЛЬНОЕ ДОВЕРИЕ', 'ДОСТУП К C-LEVEL', 'СТРАТЕГИЯ ВЫХОДА', 'ПРЕСЕЙЛ', 'ЗАХВАТ И РАСШИРЕНИЕ', 'KZ · UZ · KG'];
  return (
    <div className="marquee">
      <div className="marquee-track">
        <span>{items.map((i,k)=> <span key={k}>{i}</span>)}</span>
        <span>{items.map((i,k)=> <span key={'a'+k}>{i}</span>)}</span>
      </div>
    </div>
  );
}

function SectionExitChallenges() {
  const tableData = [
    { name: 'Региональный менеджер', simple: true, bridge: true },
    { name: 'Назначение встреч', simple: true, bridge: true },
    { name: 'Партнёрские каналы', simple: false, bridge: true },
    { name: 'Адаптация продукта под рынок', simple: false, bridge: true },
    { name: 'Проверка гипотез', simple: false, bridge: true },
    { name: 'Личные отношения C-Level', simple: false, bridge: true },
    { name: 'Лидеры мнений', simple: false, bridge: true },
    { name: 'Доверие к людям и бренду', simple: false, bridge: true },
    { name: 'Выход от имени команды с историей на рынке', simple: false, bridge: true },
    { name: 'Формирование рынка', simple: false, bridge: true },
    { name: 'События, комьюнити и экспертный контент', simple: false, bridge: true },
    { name: 'Энергия и мотивация команды', simple: false, bridge: true },
  ];

  return (
    <section className="section" id="exit-challenges" data-section-name="02 · ВЫЗОВЫ ВЫХОДА">
      <div className="wrap">
        <div className="exit-challenges-grid" style={{display:'grid', gridTemplateColumns:'1fr 1.6fr', gap:'clamp(32px,5vw,80px)', alignItems:'start'}}>
          
          <div className="reveal">
            <div className="h-eyebrow">02 — Вызовы выхода</div>
            <h2 style={{fontFamily:'var(--serif)', fontWeight:320, fontSize:'clamp(34px,4.4vw,68px)', lineHeight:1, letterSpacing:'-0.03em', margin:'40px 0 32px'}}>
              Что на самом <br className="br-desk"/>
              деле нужно <br className="br-desk"/>
              для выхода на <br className="br-desk"/>
              <em style={{color:'var(--accent-pop)'}}>новый рынок.</em>
            </h2>
            
            <div style={{display:'inline-flex', alignItems:'center', gap:'8px', padding:'6px 12px', border:'1px solid color-mix(in srgb, var(--accent-pop) 30%, transparent)', background:'color-mix(in srgb, var(--accent-pop) 5%, transparent)', color:'var(--accent-pop)', fontFamily:'var(--mono)', fontSize:'10px', letterSpacing:'0.12em', textTransform:'uppercase', marginBottom:'32px'}}>
              <span style={{width:'6px', height:'6px', borderRadius:'50%', background:'var(--accent-pop)'}}></span>
              Реальный BizDev
            </div>

            <p style={{margin:'0 0 48px', fontSize:'14px', color:'var(--ink-2)', lineHeight:1.65, maxWidth:'320px'}}>
              Настоящий BizDev — это не SDR и не список встреч. Это проверка рыночной гипотезы, доверие, локальный контекст, отношения и маршрут к пилоту.
            </p>

            <div className="scroll-hint" style={{color:'var(--ink-3)'}}>
              <span>Полная картина ниже</span>
              <span className="arrow"></span>
            </div>
          </div>

          <div className="reveal" style={{'--rd':'120ms'}}>
            <div style={{border:'1px solid var(--line)', background:'var(--bg-elev)'}}>
              <div className="exit-challenges-row" style={{display:'grid', gridTemplateColumns:'1fr 100px 100px', gap:'16px', padding:'20px 24px', borderBottom:'1px solid var(--line)', fontFamily:'var(--mono)', fontSize:'10px', letterSpacing:'0.14em', textTransform:'uppercase', color:'var(--ink-3)', alignItems:'center'}}>
                <div>Компонент выхода</div>
                <div style={{textAlign:'center'}}>Просто</div>
                <div style={{textAlign:'center', color:'var(--accent-pop)'}}>Bridge</div>
              </div>
              <div style={{background:'var(--bg)'}}>
                {tableData.map((row, i) => (
                  <div className="exit-challenges-row" key={i} style={{display:'grid', gridTemplateColumns:'1fr 100px 100px', gap:'16px', padding:'20px 24px', borderBottom: i === tableData.length - 1 ? 'none' : '1px solid var(--line)', alignItems:'center'}}>
                    <div style={{fontSize:'14px', color:'var(--ink)'}}>{row.name}</div>
                    <div style={{textAlign:'center', fontSize:'24px', lineHeight:1}}>
                      {row.simple ? (
                        <span style={{color:'var(--accent-pop)'}}>✓</span>
                      ) : (
                        <span style={{color:'var(--line-2)'}}>—</span>
                      )}
                    </div>
                    <div style={{textAlign:'center', fontSize:'24px', lineHeight:1}}>
                      {row.bridge ? (
                        <span style={{color:'var(--accent-pop)'}}>✓</span>
                      ) : (
                        <span style={{color:'var(--line-2)'}}>—</span>
                      )}
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>

        </div>
      </div>
    </section>
  );
}

function SectionMarket() {
  return (
    <section className="hscroll-section" id="market" data-section-name="07 · РЫНОК">
      <div className="wrap market-head-wrap" style={{marginBottom:'48px'}}>
        <div className="s-head market-s-head" style={{marginBottom: 0}}>
          <div>
            <div className="h-eyebrow reveal" style={{color:'rgba(245,243,238,0.55)'}}>07 — Рынок</div>
          </div>
          <div className="reveal" style={{'--rd':'120ms'}}>
            <div className="lead" style={{color:'var(--bg)'}}>
              Казахстан <em>обходит</em> Европу<br/>
              по цифровизации Enterprise-сектора.
            </div>
            <div className="scroll-hint" style={{marginTop:'24px', color:'rgba(245,243,238,0.55)'}}>
              <span>Прокрутите вправо</span>
              <span className="arrow" style={{background:'rgba(245,243,238,0.55)'}}></span>
            </div>
          </div>
        </div>
      </div>

      <div className="hscroll market-hscroll">
        <div className="card reveal market-card">
          <div className="num">FACT 01 / EGDI</div>
          <div>
            <div className="big"><span data-count="24">0</span><sub>/ ООН 2024</sub></div>
            <h4>24 место в мире</h4>
            <p>По индексу развития электронного правительства. Казахстан обходит многие страны Европы по цифровизации госсектора и G2B/B2B сервисов.</p>
          </div>
        </div>
        <div className="card reveal market-card" style={{'--rd':'80ms'}}>
          <div className="num">FACT 02 / IT EXPORT</div>
          <div>
            <div className="big">$<span data-count="1.14" data-decimals="2">0</span><sub>МЛРД · 2025</sub></div>
            <h4>Рынок повзрослел</h4>
            <p>Объём экспорта IT-услуг. Рынок перешёл от внутреннего потребления к созданию глобальных продуктов и Enterprise-софта.</p>
          </div>
        </div>
        <div className="card reveal market-card" style={{'--rd':'160ms'}}>
          <div className="num">FACT 03 / FINTECH</div>
          <div>
            <div className="big"><span data-count="89">0</span><sub>%</sub></div>
            <h4>Безналичных оплат</h4>
            <p>Инфраструктура и бизнес-среда РК полностью готовы к сложным IT-решениям: AI, HR-tech, аналитика, роботизация.</p>
          </div>
        </div>
        <div className="card reveal market-card" style={{'--rd':'240ms'}}>
          <div className="num">FACT 04 / VELOCITY</div>
          <div>
            <div className="big"><span data-count="6">0</span><sub>МЕС · PoC</sub></div>
            <h4>Быстрые пилоты</h4>
            <p>Открытость экосистемы и отсутствие легаси позволяют запускать proof-of-concept за 6 месяцев и легко интегрироваться в кор-системы Enterprise.</p>
          </div>
        </div>
        <div className="card reveal market-card" style={{'--rd':'320ms'}}>
          <div className="num">FACT 05 / TOOLS</div>
          <div>
            <div className="big">∅</div>
            <h4>Без барьеров</h4>
            <p>Свободный доступ к LinkedIn, Sales Navigator, Instagram, передовым AI-инструментам и глобальным рекламным кабинетам.</p>
          </div>
        </div>
        <div className="card reveal market-card" style={{'--rd':'400ms'}}>
          <div className="num">FACT 06 / DEMAND</div>
          <div>
            <div className="big">↑</div>
            <h4>Высокий спрос</h4>
            <p>Активный спрос на инновации в AI, HR-tech, FinTech и Enterprise-решениях. Запрос — на инфраструктурные продукты для масштаба.</p>
          </div>
        </div>
      </div>
    </section>
  );
}

function SectionChallenge() {
  const challenges = [
    { n:'01', t:'Экономика', d:'Высокая ставка и инфляционные риски ограничивают темпы внутреннего развития.', icon:'↓' },
    { n:'02', t:'Инструменты', d:'Затруднённый доступ к медиа, рекламным кабинетам и AI-сервисам.', icon:'×' },
    { n:'03', t:'Риски', d:'Необходимость распределения активов и выручки между юрисдикциями.', icon:'⚠' },
  ];
  const opps = [
    { n:'01', t:'Открытая экономика', d:'Активное внедрение инноваций в Enterprise и госуправлении KZ, UZ, KG.', icon:'↑' },
    { n:'02', t:'Захват и расширение', d:'Отсутствие легаси — быстрые пилоты PoC и интеграция в кор-системы.', icon:'⤢' },
    { n:'03', t:'Доступные технологии', d:'Полная интеграция в глобальную IT-экосистему без барьеров.', icon:'∞' },
  ];
  return (
    <section className="section" id="challenge" data-section-name="06 · КОНТЕКСТ">
      <div className="wrap">
        <div className="s-head">
          <div><div className="h-eyebrow reveal">06 — Контекст</div></div>
          <h2 className="reveal" style={{margin:0,'--rd':'120ms', fontFamily:'var(--serif)', fontWeight:340, fontSize:'clamp(40px,5vw,76px)', lineHeight:1, letterSpacing:'-0.03em'}}>
            Внутренний рынок<br/><em>замедляется.</em><br/>
            <span style={{color:'var(--accent-pop)', fontStyle:'italic'}}>Внешний</span> — открывается.
          </h2>
        </div>
        <div style={{position:'relative', display:'grid', gridTemplateColumns:'1fr 80px 1fr', gap:0, marginTop:'48px'}} className="challenge-cmp">
          <div>
            <div className="h-eyebrow reveal" style={{marginBottom:'24px'}}>← Факторы выхода</div>
            {challenges.map((c, i) => (
              <div key={c.n} className="reveal compare-card" style={{'--rd':`${i*120}ms`, padding:'28px 0', borderTop:'1px solid var(--line)', position:'relative'}}>
                <div style={{display:'grid', gridTemplateColumns:'40px 1fr 50px', gap:'16px', alignItems:'start'}}>
                  <span style={{fontFamily:'var(--mono)', fontSize:'11px', color:'var(--ink-3)', letterSpacing:'0.12em'}}>{c.n}</span>
                  <div>
                    <div style={{fontFamily:'var(--serif)', fontWeight:360, fontSize:'24px', letterSpacing:'-0.015em', lineHeight:1, marginBottom:'8px'}}>{c.t}</div>
                    <p style={{margin:0, fontSize:'14px', color:'var(--ink-2)', lineHeight:1.5}}>{c.d}</p>
                  </div>
                  <span style={{fontFamily:'var(--serif)', fontSize:'34px', color:'var(--ink-3)', textAlign:'right', lineHeight:1}}>{c.icon}</span>
                </div>
              </div>
            ))}
          </div>
          <div style={{position:'relative'}}>
            <div style={{position:'absolute', left:'50%', top:0, bottom:0, width:'1px', background:'var(--line-2)'}} />
            <div style={{position:'absolute', left:'50%', top:'50%', transform:'translate(-50%,-50%)', width:'56px', height:'56px', borderRadius:'50%', background:'var(--accent-pop)', color:'#fff', display:'grid', placeItems:'center', fontFamily:'var(--serif)', fontStyle:'italic', fontSize:'28px'}}>vs</div>
          </div>
          <div>
            <div className="h-eyebrow reveal" style={{marginBottom:'24px', color:'var(--accent-pop)', textAlign:'right'}}>Факторы притяжения →</div>
            {opps.map((c, i) => (
              <div key={c.n} className="reveal compare-card" style={{'--rd':`${i*120+200}ms`, padding:'28px 0', borderTop:'1px solid var(--line)'}}>
                <div style={{display:'grid', gridTemplateColumns:'50px 1fr 40px', gap:'16px', alignItems:'start'}}>
                  <span style={{fontFamily:'var(--serif)', fontSize:'34px', color:'var(--accent-pop)', lineHeight:1}}>{c.icon}</span>
                  <div>
                    <div style={{fontFamily:'var(--serif)', fontWeight:360, fontSize:'24px', letterSpacing:'-0.015em', lineHeight:1, marginBottom:'8px'}}>{c.t}</div>
                    <p style={{margin:0, fontSize:'14px', color:'var(--ink-2)', lineHeight:1.5}}>{c.d}</p>
                  </div>
                  <span style={{fontFamily:'var(--mono)', fontSize:'11px', color:'var(--ink-3)', letterSpacing:'0.12em', textAlign:'right'}}>{c.n}</span>
                </div>
              </div>
            ))}
          </div>
        </div>
        <div className="reveal challenge-stats-grid" style={{marginTop:'56px', display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:'1px', background:'var(--line)', border:'1px solid var(--line)'}}>
          <div className="challenge-stat-card" style={{background:'var(--bg)', padding:'28px 24px'}}>
            <div className="h-eyebrow">Тест гипотезы самостоятельно</div>
            <div style={{fontFamily:'var(--serif)', fontSize:'56px', lineHeight:1, letterSpacing:'-0.03em', marginTop:'12px'}}>6+<sub style={{fontFamily:'var(--mono)', fontSize:'12px', color:'var(--ink-3)', letterSpacing:'0.08em', verticalAlign:'baseline'}}> мес</sub></div>
            <p style={{color:'var(--ink-3)', fontSize:'13px', marginTop:'12px', lineHeight:1.5}}>До первой оценки потенциала — без локального нетворка.</p>
          </div>
          <div className="challenge-stat-card" style={{background:'var(--bg)', padding:'28px 24px'}}>
            <div className="h-eyebrow" style={{color:'var(--accent-pop)'}}>С Bridge</div>
            <div style={{fontFamily:'var(--serif)', fontSize:'56px', lineHeight:1, letterSpacing:'-0.03em', marginTop:'12px', color:'var(--accent-pop)', fontStyle:'italic'}}>День&nbsp;1</div>
            <p style={{color:'var(--ink-3)', fontSize:'13px', marginTop:'12px', lineHeight:1.5}}>Команда CCO + CMO + локальный BizDev с первого дня.</p>
          </div>
          <div className="challenge-stat-card" style={{background:'var(--ink)', color:'var(--bg)', padding:'28px 24px'}}>
            <div className="h-eyebrow" style={{color:'rgba(245,243,238,0.6)'}}>Риск ошибки найма</div>
            <div style={{fontFamily:'var(--serif)', fontSize:'56px', lineHeight:1, letterSpacing:'-0.03em', marginTop:'12px'}}>min</div>
            <p style={{color:'rgba(245,243,238,0.7)', fontSize:'13px', marginTop:'12px', lineHeight:1.5}}>Проверяем гипотезу до найма локальной команды и долгих фиксированных расходов.</p>
          </div>
        </div>
      </div>
    </section>
  );
}

function SectionApproach() {
  return (
    <section className="section" id="approach" data-section-name="03 · ПОДХОД">
      <div className="wrap">
        <div className="s-head">
          <div>
            <div className="h-eyebrow reveal">03 — Методология</div>
          </div>
          <div className="reveal" style={{'--rd':'120ms'}}>
            <div className="lead">
              Проверка гипотезы<br/>
              и <em>масштабирование.</em>
            </div>
            <p style={{maxWidth:'560px', color:'var(--ink-2)', fontSize:'16px', marginTop:'24px'}}>
              Сначала проверяем рынок через локальное доверие и правильные аккаунты.
              Если гипотеза подтверждается, масштабируемся в пилоты, партнёрства и выручку.
            </p>
          </div>
        </div>

        <window.Roadmap />
      </div>
    </section>
  );
}


function SectionScenarios() {
  const ref = React.useRef(null);
  const [progress, setProgress] = React.useState(0);

  // Shared time axis: 5 months. Position helper — centers month m at (m-0.5)*20%.
  const px = (m) => `${(m - 0.5) * 20}%`;

  // DIY прозрачная математика:
  // М1: хедхантер 1,5 + настройка ТОО/инструменты 0,5 = 2,0 млн
  // М2-М5: Country Manager 1,0 + SDR 0,35 + события/admin 0,4 = 1,75 млн/мес
  // Итого: 2,0 + 4 × 1,75 = 9,0 млн
  const diy = {
    eyebrow: '01 / Без Bridge',
    label: 'Самостоятельный выход',
    duration: '5 мес',
    cost: '9,0 млн ₽',
    steps: [
      { m: 1, cost: '2,0', name: 'Поиск + хедхантер',  risk: 'Хедхантер = 1,5 млн + настройка ТОО' },
      { m: 2, cost: '3,8', name: 'Найм + онбординг',   risk: 'Ошибка найма — до 12 мес потери' },
      { m: 3, cost: '5,5', name: 'Старт работ',        risk: 'Один CM ≠ команда C-Level' },
      { m: 4, cost: '7,3', name: 'Первые пресейлы',    risk: null },
      { m: 5, cost: '9,0', name: 'Масштабирование',    risk: 'Фикс растёт без результата' },
    ],
    goNoGo: { m: 4, label: '₽7,3 млн уже потрачено' },
    resultM: 5,
    resultLabel: 'Первые продажи · М5',
  };

  // Bridge: 1,1 млн/мес × 3 месяца = 3,3 млн до первых продаж, затем Success Fee
  const bridge = {
    eyebrow: '02 / С Bridge',
    label: 'С Bridge',
    duration: '3 мес',
    cost: '3,3 млн ₽',
    steps: [
      { m: 1, cost: '1,1', name: 'Онбординг + адаптация', strength: 'Команда с репутацией с Дня 1' },
      { m: 2, cost: '2,2', name: 'Гипотеза проверена',    strength: null },
      { m: 3, cost: '3,3', name: 'Пресейлы → масштаб',    strength: 'Мотивация совладельца' },
    ],
    goNoGo: { m: 2, label: '₽2,2 млн потрачено' },
    resultM: 3,
    resultLabel: 'Первые продажи · М3',
  };

  // Auto-play once visible (IntersectionObserver) — fixes "late reveal" issue
  React.useEffect(() => {
    if (!ref.current) return;
    const el = ref.current;
    const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (reduced) { setProgress(1); return; }

    let played = false;
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting && !played && e.intersectionRatio >= 0.25) {
          played = true;
          const start = performance.now();
          const dur = 2600;
          const tick = (t) => {
            const p = Math.min(1, (t - start) / dur);
            const eased = p < 0.5 ? 2 * p * p : 1 - Math.pow(-2 * p + 2, 2) / 2;
            setProgress(eased);
            if (p < 1) requestAnimationFrame(tick);
          };
          requestAnimationFrame(tick);
        }
      });
    }, { threshold: [0, 0.25, 0.5, 0.75] });
    io.observe(el);
    return () => io.disconnect();
  }, []);

  // Element activation: timeline progresses 0→1, each month becomes active when progress ≥ (m-0.5)/5
  const stepOn = (m) => progress >= (m - 0.5) / 5;
  const lineW  = (resultM) => Math.min(progress * 100, ((resultM - 0.5) / 5) * 100 + 1);

  const renderTrack = (d, kind) => (
    <div className={`scnh-track scnh-track--${kind}`}>
      <div className="scnh-track-head">
        <div className="h-eyebrow">{d.eyebrow}</div>
        <h4 className="scnh-track-name">{d.label}</h4>
        <div className="scnh-track-meta">
          <span><strong>{d.duration}</strong></span>
          <span>·</span>
          <span><strong>{d.cost}</strong></span>
        </div>
      </div>

      <div className="scnh-track-body">
        <div className="scnh-line">
          <div className="scnh-line-fill" style={{ width: `${kind === 'bridge' ? lineW(d.resultM) : progress * 100}%` }} />
        </div>

        {/* Bridge: dim band after result showing "уже в масштабе" */}
        {kind === 'bridge' && (
          <div
            className={`scnh-bonus ${progress >= 0.7 ? 'is-on' : ''}`}
            style={{ left: `${((d.resultM - 0.5) / 5) * 100}%`, right: 0 }}
          >
            <span className="scnh-bonus-arrow">→</span>
            <span className="scnh-bonus-text">+2 месяца уже в масштабе</span>
          </div>
        )}

        {d.steps.map(s => (
          <div
            key={s.m}
            className={`scnh-step ${stepOn(s.m) ? 'is-on' : ''}`}
            style={{ left: px(s.m), '--i': s.m }}
          >
            <div className="scnh-dot" />
            <div className="scnh-step-cost">{s.cost}<sub>&nbsp;млн</sub></div>
            <div className="scnh-step-name">{s.name}</div>
            {s.risk && (
              <div className="scnh-step-tag scnh-step-tag--risk">
                <span className="scnh-tag-dot" />{s.risk}
              </div>
            )}
            {s.strength && (
              <div className="scnh-step-tag scnh-step-tag--strength">
                <span className="scnh-tag-dot" />{s.strength}
              </div>
            )}
          </div>
        ))}

        {/* go/no-go decision marker */}
        <div
          className={`scnh-decision ${stepOn(d.goNoGo.m) ? 'is-on' : ''}`}
          style={{ left: px(d.goNoGo.m) }}
        >
          <div className="scnh-decision-stem" />
          <div className="scnh-decision-flag">
            <strong>go / no-go</strong>
            <span>{d.goNoGo.label}</span>
          </div>
        </div>

        {/* Result endpoint */}
        <div
          className={`scnh-result ${progress >= (d.resultM - 0.4) / 5 ? 'is-on' : ''}`}
          style={{ left: px(d.resultM) }}
        >
          <span className="scnh-result-pip" />
          <span className="scnh-result-label">{d.resultLabel}</span>
        </div>
      </div>
    </div>
  );

  const chartOn = progress >= 0.55;

  return (
    <section className="section section--scnh" id="scenarios" data-section-name="04 · СЦЕНАРИИ" ref={ref}>
      <div className="wrap">
        <div className="s-head">
          <div><div className="h-eyebrow reveal">04 — Цена решения</div></div>
          <div className="reveal" style={{ '--rd': '120ms' }}>
            <div className="lead">
              Два пути к первой <em>сделке.</em><br/>
              Разница — <em style={{ color: 'var(--accent-pop)' }}>2 месяца и ₽5,7 млн.</em>
            </div>
          </div>
        </div>

        {/* UTP — moved to top, the conclusion before the proof */}
        <div className={`scnh-utp ${progress > 0.5 ? 'is-on' : ''}`}>
          <div className="scnh-utp-item">
            <div className="scnh-utp-n">−<span data-count="2">0</span></div>
            <div className="scnh-utp-l">месяца до первых продаж</div>
          </div>
          <div className="scnh-utp-item is-money">
            <div className="scnh-utp-n">−<span data-count="5.7" data-decimals="1">0</span><sub>&nbsp;млн&nbsp;₽</sub></div>
            <div className="scnh-utp-l">экономия до масштаба</div>
          </div>
          <div className="scnh-utp-item is-pct">
            <div className="scnh-utp-n">−<span data-count="63">0</span>%</div>
            <div className="scnh-utp-l">фикс расходов до результата</div>
          </div>
        </div>

        {/* Horizontal race with shared time axis */}
        <div className="scnh-race">
          <div className="scnh-axis">
            <div className="scnh-axis-line" />
            {[1, 2, 3, 4, 5].map(m => (
              <div
                key={m}
                className={`scnh-axis-tick ${progress >= (m - 1) / 5 ? 'is-on' : ''}`}
                style={{ left: px(m), '--i': m }}
              >
                <span className="scnh-axis-mark" />
                <span className="scnh-axis-label">Мес {m}{m === 5 ? '+' : ''}</span>
              </div>
            ))}
          </div>

          {renderTrack(diy, 'diy')}
          <div className="scnh-vs"><span>vs</span></div>
          {renderTrack(bridge, 'bridge')}
        </div>

        {/* Cumulative cost chart with shaded saving area */}
        <div className={`scnh-chart ${chartOn ? 'is-on' : ''}`}>
          <div className="scnh-chart-head">
            <div className="h-eyebrow">Кумулятивные расходы · ₽ млн</div>
            <div className="scnh-chart-legend">
              <span className="scnh-leg scnh-leg--diy"><span className="scnh-leg-sw" />Без Bridge</span>
              <span className="scnh-leg scnh-leg--br"><span className="scnh-leg-sw" />С Bridge</span>
            </div>
          </div>

          <div className="scnh-chart-plot">
            {/* Y formula: y = 180 − (cum / 9.0) × 154
                DIY cumulative: M1=2.0→y=146, M2=3.8→y=115, M3=5.5→y=86, M4=7.3→y=55, M5=9.0→y=26
                Bridge: 1.1/мес — M1=1.1→y=161, M2=2.2→y=142, M3=3.3→y=124, plateau */}
            <svg className="scnh-chart-svg" viewBox="0 0 1000 200" preserveAspectRatio="none" aria-hidden="true">
              {/* Y-axis gridlines */}
              <line x1="0" y1="180" x2="1000" y2="180" className="scnh-chart-grid" />
              <line x1="0" y1="124" x2="1000" y2="124" className="scnh-chart-grid scnh-chart-grid--dim" />
              <line x1="0" y1="86"  x2="1000" y2="86"  className="scnh-chart-grid scnh-chart-grid--dim" />
              <line x1="0" y1="26"  x2="1000" y2="26"  className="scnh-chart-grid scnh-chart-grid--dim" />

              {/* Vertical month gridlines */}
              {[200, 400, 600, 800].map((x, i) => (
                <line key={i} x1={x} y1="0" x2={x} y2="180" className="scnh-chart-grid scnh-chart-grid--vert" />
              ))}

              {/* Saving area: from M3 (Bridge plateaus) to M5 */}
              <polygon
                className="scnh-chart-area"
                points="600,86 800,55 1000,26 1000,124 600,124"
                style={{ opacity: progress >= 0.7 ? 1 : 0 }}
              />

              {/* Bridge line: 1,1 млн/мес × 3, plateau at 3,3 млн (y=124) */}
              <path
                d="M 0,180 L 200,161 L 400,142 L 600,124 L 1000,124"
                className="scnh-chart-line scnh-chart-line--bridge"
                pathLength="1"
                strokeDasharray="1"
                style={{ strokeDashoffset: 1 - Math.min(1, progress * 1.2) }}
              />

              {/* DIY line: хедхантер M1 front-loaded, затем 1,75 млн/мес */}
              <path
                d="M 0,180 L 200,146 L 400,115 L 600,86 L 800,55 L 1000,26"
                className="scnh-chart-line scnh-chart-line--diy"
                pathLength="1"
                strokeDasharray="1"
                style={{ strokeDashoffset: 1 - Math.min(1, progress * 1.05) }}
              />

              {/* Endpoint dots */}
              <circle cx="1000" cy="124" r="5" className="scnh-chart-end scnh-chart-end--br"
                style={{ opacity: progress >= 0.6 ? 1 : 0 }} />
              <circle cx="1000" cy="26"  r="5" className="scnh-chart-end scnh-chart-end--diy"
                style={{ opacity: progress >= 0.95 ? 1 : 0 }} />
            </svg>

            {/* Y-axis labels */}
            <div className="scnh-chart-y">
              <span style={{ top: '13%' }}>₽9</span>
              <span style={{ top: '43%' }}>₽5,5</span>
              <span style={{ top: '62%' }}>₽3,3</span>
              <span style={{ top: '90%' }}>0</span>
            </div>

            {/* Saving callout */}
            <div className={`scnh-chart-saving ${progress >= 0.85 ? 'is-on' : ''}`}>
              <span className="scnh-chart-saving-n">−<span data-count="5.7" data-decimals="1">0</span> млн ₽</span>
              <span className="scnh-chart-saving-l">экономия</span>
            </div>
          </div>

          <div className="scnh-chart-x">
            {[1, 2, 3, 4, 5].map(m => (
              <span key={m} style={{ left: px(m) }}>М{m}{m === 5 ? '+' : ''}</span>
            ))}
          </div>
        </div>

        <p className="scnh-proof reveal">
          Bridge: фикс 1,1 млн ₽/мес × 3 мес = 3,3 млн ₽, далее Success Fee от выручки.
          DIY: хедхантер 1,5 млн + настройка ТОО 0,5 млн + Country Manager 1,0 млн/мес + SDR + операции = 1,75 млн/мес. Итого за 5 мес ≈ 9 млн ₽. Рыночные ставки ЦА 2026.
        </p>
      </div>
    </section>
  );
}

function SectionFee() {
  return (
    <section className="section" id="fee" data-section-name="05 · МОДЕЛЬ">
      <div className="wrap">
        <div className="fee">
          <div className="fee-info">
            <div className="h-eyebrow reveal">05 — Финансовая архитектура</div>
            <h2 className="reveal" style={{'--rd':'80ms'}}>
              Мы становимся <em>самоокупаемой</em> частью вашей компании.
            </h2>
            <p className="reveal" style={{'--rd':'160ms'}}>
              Как только % от выручки покрывает фикс — фикс отменяется. Мы мотивированы
              продавать дорого и вдолгую — мышление партнёра, а не менеджера по найму.
            </p>
            <div className="fee-chips reveal" style={{'--rd':'240ms'}}>
              <div className="fee-chip is-fix">
                <span className="sw" />
                <div>
                  <strong>Инвестиционный этап</strong>
                  <span>Фиксированные авансовые платежи. Оплата инфраструктуры команды и нетворка на новом рынке.</span>
                </div>
              </div>
              <div className="fee-chip is-suc">
                <span className="sw" />
                <div>
                  <strong>Success Fee · % от выручки</strong>
                  <span>Доля от локальной выручки. Мотивация — продавать дорого и вдолгую.</span>
                </div>
              </div>
              <div className="fee-chip is-part">
                <span className="sw" />
                <div>
                  <strong>Стратегическое партнёрство</strong>
                  <span>После точки окупаемости фикс отменяется — мы работаем как часть вашей P&amp;L.</span>
                </div>
              </div>
            </div>
          </div>
          <div className="reveal" style={{'--rd':'200ms'}}>
            <window.FeeChart />
          </div>
        </div>
      </div>
    </section>
  );
}

function SectionPremises() {
  return (
    <section className="section" id="premises" data-section-name="08 · ПРЕДПОСЫЛКИ">
      <div className="wrap">
        <div className="s-head">
          <div><div className="h-eyebrow reveal">08 — Предпосылки к выходу</div></div>
          <div className="reveal" style={{'--rd':'120ms'}}>
            <div className="lead">
              Барьеры есть.<br/>
              Но они <em>снимаются</em> партнёрством.
            </div>
          </div>
        </div>

        <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:0, borderTop:'1px solid var(--line)', borderBottom:'1px solid var(--line)'}} className="premises-grid">
          <div className="reveal" style={{padding:'40px 32px', borderRight:'1px solid var(--line)'}}>
            <div className="h-eyebrow" style={{color:'var(--accent-pop)'}}>+ Нам в помощь</div>
            <ul style={{margin:'24px 0 0', padding:0, listStyle:'none'}}>
              <li style={{padding:'14px 0', borderTop:'1px solid var(--line)', fontSize:'14px', color:'var(--ink-2)', lineHeight:1.5}}>Высокий спрос на инновации (AI, HR, FinTech, Enterprise-решения)</li>
              <li style={{padding:'14px 0', borderTop:'1px solid var(--line)', fontSize:'14px', color:'var(--ink-2)', lineHeight:1.5}}>Свободный доступ к глобальным инструментам (LinkedIn, Instagram, Sales Navigator, AI)</li>
              <li style={{padding:'14px 0', borderTop:'1px solid var(--line)', fontSize:'14px', color:'var(--ink-2)', lineHeight:1.5}}>Возможность диверсификации бизнеса за пределами РФ</li>
            </ul>
          </div>
          <div className="reveal" style={{'--rd':'120ms', padding:'40px 32px', borderRight:'1px solid var(--line)'}}>
            <div className="h-eyebrow">— Барьеры и риски</div>
            <ul style={{margin:'24px 0 0', padding:0, listStyle:'none'}}>
              <li style={{padding:'14px 0', borderTop:'1px solid var(--line)', fontSize:'14px', color:'var(--ink-2)', lineHeight:1.5}}>Самостоятельный выход (с нуля) требует больших инвестиций и времени</li>
              <li style={{padding:'14px 0', borderTop:'1px solid var(--line)', fontSize:'14px', color:'var(--ink-2)', lineHeight:1.5}}>Высокий риск ошибки при найме локальных команд и адаптации УТП</li>
              <li style={{padding:'14px 0', borderTop:'1px solid var(--line)', fontSize:'14px', color:'var(--ink-2)', lineHeight:1.5}}>Отсутствие узнаваемости бренда и нетворка</li>
            </ul>
          </div>
          <div className="reveal" style={{'--rd':'240ms', padding:'40px 32px', background:'var(--ink)', color:'var(--bg)'}}>
            <div className="h-eyebrow" style={{color:'rgba(245,243,238,0.6)'}}>= Ценность партнёрства</div>
            <ul style={{margin:'24px 0 0', padding:0, listStyle:'none'}}>
              <li style={{padding:'14px 0', borderTop:'1px solid rgba(245,243,238,0.2)', fontSize:'14px', color:'rgba(245,243,238,0.85)', lineHeight:1.5}}>Выделенная локальная BizDev-команда с первого дня</li>
              <li style={{padding:'14px 0', borderTop:'1px solid rgba(245,243,238,0.2)', fontSize:'14px', color:'rgba(245,243,238,0.85)', lineHeight:1.5}}>Проверка гипотезы до масштабного найма и фиксированных расходов</li>
              <li style={{padding:'14px 0', borderTop:'1px solid rgba(245,243,238,0.2)', fontSize:'14px', color:'rgba(245,243,238,0.85)', lineHeight:1.5}}>Переиспользование и локализация текущих материалов и кейсов</li>
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}


function SectionCases() {
  return (
    <section className="section" id="cases" data-section-name="09 · КЕЙСЫ">
      <div className="wrap">
        <div className="cases-head">
          <div className="reveal">
            <div className="h-eyebrow">09 — Доказательства</div>
            <h2 className="lead" style={{margin:'16px 0 0'}}>
              Уже сделали для<br/><em>лидеров рынка.</em>
            </h2>
          </div>
          <div className="reveal" style={{'--rd':'120ms', maxWidth:'320px', color:'var(--ink-3)', fontSize:'14px'}}>
            Опыт работы с глобальными лидерами: SAP, Microsoft, Salesforce, Yandex.
            Ниже — выдержки из последних программ.
          </div>
        </div>

        <div className="case-row reveal">
          <div className="logo">hh.ru</div>
          <div className="body">
            <div className="by">Геннадий Береговский · Sponsor</div>
            Адаптировали новый продукт под рынок ЦА, разработали презентацию и one-pager,
            провели целевые встречи с ведущими HRD Казахстана и создали карту развития бизнеса.
          </div>
          <div className="metric">
            <div className="n"><span data-count="17">0</span></div>
            <div className="l">встреч с HRD KZ</div>
          </div>
        </div>

        <div className="case-row reveal" style={{'--rd':'80ms'}}>
          <div className="logo">Creatio</div>
          <div className="body">
            <div className="by">Иван Астахов · Partner</div>
            «Уровень экспертизы и персонализированное внимание к нашим уникальным
            потребностям сделали Bridge незаменимым партнёром в регионе.»
          </div>
          <div className="metric">
            <div className="n">CIS</div>
            <div className="l">EMEA · экспертиза</div>
          </div>
        </div>

        <div className="case-row reveal" style={{'--rd':'160ms'}}>
          <div className="logo">SAP · MS · SF</div>
          <div className="body">
            <div className="by">Drew Feig · Reference</div>
            «Я был впечатлён исключительным уровнем сервиса и креативом, которые команда
            привносит в работу с Enterprise-клиентами.»
          </div>
          <div className="metric">
            <div className="n"><span data-count="10">0</span>+</div>
            <div className="l">лет на data-driven</div>
          </div>
        </div>
      </div>
    </section>
  );
}

function SectionTeam() {
  const team = [
    { role:'CCO & Enterprise BizDev', title:'17+ лет в лидерах Gartner', meta:'GTM & BizDev-архитектура', body:'Архитектор корпоративных продаж в SAP/Microsoft/Salesforce. Управлял портфелями enterprise-аккаунтов в EMEA и СНГ.', photo:'./team-photos/cco-ab.jpg' },
    { role:'CMO & GTM', title:'10+ лет data-driven', meta:'Генерация спроса', body:'Маркетинг и продажи на рынках СНГ и EMEA. Запуск 30+ продуктов в Enterprise-сегменте через ABM-методологию.', photo:'./team-photos/cmo-as.jpg' },
    { role:'COO & Automatisation', title:'15+ лет FinTech & Startup', meta:'Операционное масштабирование', body:'Операционное масштабирование компаний от MVP до production. Автоматизация бизнес-процессов в FinTech и Enterprise-среде.', photo:'./team-photos/coo-bm.jpg' },
  ];
  const tickerLogos = 'SAP · Microsoft · Salesforce · Anaplan · Яндекс · Acer · ЮниКредит · DemirBank · Kameleoon · Manhattan · Creatio';

  return (
    <section className="section" id="team" data-section-name="01 · КОМАНДА">
      <div className="wrap">
        <div className="s-head">
          <div><div className="h-eyebrow reveal">01 — Команда</div></div>
          <div className="reveal" style={{'--rd':'120ms'}}>
            <div className="lead">
              Выделенная команда<br/>
              <em>с первого дня.</em>
            </div>
          </div>
        </div>
        <div className="team">
          {team.map((t, i) => (
            <div className="team-card reveal" key={t.role} style={{'--rd':`${i*100}ms`}}>
              <img className="team-card-photo" src={t.photo} alt={t.role} />
              <div className="role">{t.role}</div>
              <h5>{t.title}</h5>
              <div className="yr">— {t.meta}</div>
              <p>{t.body}</p>
            </div>
          ))}
        </div>

        {/* Brands Ticker */}
        <div className="reveal vision-ticker" style={{'--rd':'400ms', marginTop:'64px', borderTop:'1px solid var(--line)'}}>
          <div className="vision-ticker-track">
            {[tickerLogos, tickerLogos].map((t, ti) => (
              <span key={ti}>{t}</span>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function SectionCTA() {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [submitState, setSubmitState] = useState('idle');
  const [submitError, setSubmitError] = useState('');

  useEffect(() => {
    const openContactForm = () => {
      setSubmitState('idle');
      setSubmitError('');
      setIsModalOpen(true);
    };
    window.addEventListener('bridge:open-contact-form', openContactForm);
    return () => window.removeEventListener('bridge:open-contact-form', openContactForm);
  }, []);

  useEffect(() => {
    if (!isModalOpen) return;
    const onKeyDown = (event) => {
      if (event.key === 'Escape') {
        setIsModalOpen(false);
        setSubmitState('idle');
        setSubmitError('');
      }
    };
    const previousOverflow = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    window.addEventListener('keydown', onKeyDown);
    return () => {
      document.body.style.overflow = previousOverflow;
      window.removeEventListener('keydown', onKeyDown);
    };
  }, [isModalOpen]);

  const closeModal = () => {
    setIsModalOpen(false);
    setSubmitState('idle');
    setSubmitError('');
  };

  const handleSubmit = () => {
    setSubmitState('sending');
    setSubmitError('');
    window.setTimeout(() => setSubmitState('success'), 900);
  };

  return (
    <section className="cta-section section" id="contact" data-section-name="10 · CTA">
      <div className="wrap">
        <div className="h-eyebrow reveal">10 — Следующий шаг</div>
        <div className="cta-grid" style={{marginTop:'24px'}}>
          <h2 className="reveal" style={{'--rd':'80ms'}}>
            Не использовать<br/>
            этот актив на рынках<br/>
            ЦА — <em>значит терять<br/>капитализацию.</em>
          </h2>
          <div className="right reveal" style={{'--rd':'160ms'}}>
            <p>30-минутная стратегическая сессия. Мы посмотрим продукт, оценим готовность
            к рынку ЦА и нарисуем гипотезу выхода — без обязательств.</p>
            <ul style={{margin:'24px 0 0', padding:0, listStyle:'none', borderTop:'1px solid rgba(245,243,238,0.2)'}}>
              <li style={{padding:'12px 0', borderBottom:'1px solid rgba(245,243,238,0.2)', display:'flex', justifyContent:'space-between'}}>
                <span style={{color:'rgba(245,243,238,0.55)', fontFamily:'var(--mono)', fontSize:'11px', letterSpacing:'0.14em', textTransform:'uppercase'}}>01 / Аудит</span>
                <span>Знакомство и анализ материалов</span>
              </li>
              <li style={{padding:'12px 0', borderBottom:'1px solid rgba(245,243,238,0.2)', display:'flex', justifyContent:'space-between'}}>
                <span style={{color:'rgba(245,243,238,0.55)', fontFamily:'var(--mono)', fontSize:'11px', letterSpacing:'0.14em', textTransform:'uppercase'}}>02 / Соглашение</span>
                <span>Договор · аванс</span>
              </li>
              <li style={{padding:'12px 0', display:'flex', justifyContent:'space-between'}}>
                <span style={{color:'rgba(245,243,238,0.55)', fontFamily:'var(--mono)', fontSize:'11px', letterSpacing:'0.14em', textTransform:'uppercase'}}>03 / Стратегия</span>
                <span>Запуск как единая команда</span>
              </li>
            </ul>
          </div>
        </div>

        <div className="cta-submit-row reveal" style={{'--rd':'320ms'}}>
          <div className="meta">Ответим в течение 24 часов · NDA по запросу</div>
          <button className="btn btn--accent" type="button" onClick={() => setIsModalOpen(true)}>
            Записаться на сессию <span className="arrow">→</span>
          </button>
        </div>

        {isModalOpen && (
          <div className="cta-modal" role="dialog" aria-modal="true" aria-labelledby="cta-modal-title">
            <button className="cta-modal__backdrop" type="button" aria-label="Закрыть форму" onClick={closeModal}></button>
            <div className="cta-modal__panel">
              <button className="cta-modal__close" type="button" aria-label="Закрыть форму" onClick={closeModal}>×</button>
              {submitState === 'success' ? (
                <div className="cta-success">
                  <div className="h-eyebrow">Заявка отправлена</div>
                  <h3 id="cta-modal-title">Спасибо. Мы получили ваши данные.</h3>
                  <p>Ответим в течение 24 часов и предложим слот для стратегической сессии.</p>
                  <button className="btn btn--accent" type="button" onClick={closeModal}>Готово</button>
                </div>
              ) : (
                <>
                  <div className="h-eyebrow">Форма заявки</div>
                  <h3 id="cta-modal-title">Заполните контакты для стратегической сессии</h3>
                  <p className="cta-modal__lead">Нам нужно несколько деталей, чтобы быстро понять контекст и вернуться с релевантным следующим шагом.</p>
                  <iframe className="cta-submit-frame" name="cta-form-submit-frame" title="Отправка формы"></iframe>
                  <form className="cta-form" onSubmit={handleSubmit} action="https://formsubmit.co/asylbeken@gmail.com" method="POST" target="cta-form-submit-frame">
                    <input type="hidden" name="_subject" value="Bridge CA · заявка на стратегическую сессию" />
                    <input type="hidden" name="_template" value="table" />
                    <input type="hidden" name="_captcha" value="false" />
                    <input type="text" name="_honey" tabIndex="-1" autoComplete="off" style={{display:'none'}} />
                    <div className="field">
                      <label htmlFor="cta-name">Имя <span>*</span></label>
                      <input id="cta-name" name="name" type="text" placeholder="Ваше имя" autoComplete="name" required />
                      <small>Как к вам обращаться</small>
                    </div>
                    <div className="field">
                      <label htmlFor="cta-company">Компания / роль <span>*</span></label>
                      <input id="cta-company" name="company_role" type="text" placeholder="Компания и должность" autoComplete="organization-title" required />
                      <small>Например: CEO, ACME IT</small>
                    </div>
                    <div className="field">
                      <label htmlFor="cta-contact">E-mail или Telegram <span>*</span></label>
                      <input id="cta-contact" name="email_or_telegram" type="text" placeholder="email или @telegram" autoComplete="email" required />
                      <small>Куда отправить ответ</small>
                    </div>
                    <div className="field">
                      <label htmlFor="cta-phone">Телефон <span>*</span></label>
                      <div className="phone-control">
                        <select id="cta-phone-code" name="phone_country_code" aria-label="Код страны" defaultValue="Kazakhstan +7">
                          <option value="Kazakhstan +7">🇰🇿 KZ +7</option>
                          <option value="Russia +7">🇷🇺 RU +7</option>
                          <option value="Uzbekistan +998">🇺🇿 UZ +998</option>
                          <option value="Kyrgyzstan +996">🇰🇬 KG +996</option>
                          <option value="United States +1">🇺🇸 US +1</option>
                          <option value="United Kingdom +44">🇬🇧 UK +44</option>
                          <option value="UAE +971">🇦🇪 UAE +971</option>
                        </select>
                        <input id="cta-phone" name="phone_number" type="tel" placeholder="701 000 00 00" autoComplete="tel-national" required />
                      </div>
                      <small>Код страны закреплён слева</small>
                    </div>
                    <div className="field">
                      <label htmlFor="cta-arr">ARR · диапазон</label>
                      <select id="cta-arr" name="arr_range" required>
                        <option>$1—5M</option>
                        <option>$5—20M</option>
                        <option>$20M+</option>
                        <option>Pre-revenue</option>
                      </select>
                      <small>Для первичной оценки масштаба</small>
                    </div>
                    {submitError && <p className="cta-form-error">{submitError}</p>}
                    <div className="cta-modal__actions">
                      <button className="btn btn--ghost" type="button" onClick={closeModal}>Закрыть</button>
                      <button className="btn btn--accent" type="submit" disabled={submitState === 'sending'}>
                        {submitState === 'sending' ? 'Отправляем...' : 'Отправить заявку'} <span className="arrow">→</span>
                      </button>
                    </div>
                  </form>
                </>
              )}
            </div>
          </div>
        )}
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer-grid">
          <div>
            <p className="word">Bridge<em>.</em></p>
            <p style={{marginTop:'12px', maxWidth:'320px'}}>Стратегическое партнёрство для выхода B2B Enterprise IT в Центральную Азию.</p>
          </div>
          <div>
            <h6>Контакты</h6>
            <p><a href="tel:+77777158381">+7 777 715 83 81</a></p>
            <p><a href="mailto:info@bridge2.asia">info@bridge2.asia</a></p>
            <p><a href="https://bridge2.asia">bridge2.asia</a></p>
          </div>
          <div>
            <h6>Офис</h6>
            <p>Казахстан, Алматы</p>
            <p>ул. Хаджи Мукана, 22/5</p>
            <p>050059</p>
          </div>
          <div>
            <h6>Навигация</h6>
            <p><a href="#approach">Подход</a></p>
            <p><a href="#fee">Финмодель</a></p>
            <p><a href="companies.html">Компании</a></p>
            <p><a href="#cases">Кейсы</a></p>
          </div>
        </div>
        <div className="footer-bot">
          <span>© 2026 Bridge · Product · Presale · BizDev</span>
          <span>Almaty / Moscow / Tashkent</span>
        </div>
      </div>
    </footer>
  );
}

function SectionIndicator() {
  return (
    <div className="s-indicator">
      <span className="b" />
      <span className="label">00 · INTRO</span>
    </div>
  );
}

window.App = App;

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

// Trigger reveal scan after mount
requestAnimationFrame(() => {
  if (window.__rescanReveals) window.__rescanReveals();
  setTimeout(() => window.__rescanReveals && window.__rescanReveals(), 100);
  setTimeout(() => window.__rescanReveals && window.__rescanReveals(), 500);
});