// Karavan Auto — B2B screens (5)
const { STATS, ADVANTAGES, STAGES, NETWORK, NETWORK_ROUTES } = window.KA_DATA;
const { WA_URL, TG_URL, TEL_HREF } = window.KA_CONTACT;

// ============================================================
// HOME
// ============================================================
function HomeScreen({ setRoute }) {
  return (
    <div className="fade-in">
      {/* HERO */}
      <section className="hero" style={{paddingTop:56,paddingBottom:64}}>
        <div className="container" style={{position:'relative',zIndex:1}}>
          <div className="hero-grid" style={{display:'grid',gridTemplateColumns:'1.15fr 1fr',gap:64,alignItems:'center'}}>
            <div>
              <div style={{fontSize:11,color:'var(--accent)',letterSpacing:'.22em',textTransform:'uppercase',fontWeight:600,marginBottom:18,display:'flex',alignItems:'center',gap:10}}>
                <span style={{display:'inline-block',width:24,height:1,background:'var(--accent)'}}></span>
                Прямые поставки из КНР · EXW Хоргос
              </div>
              <h1 style={{fontSize:80,lineHeight:0.94,letterSpacing:'-0.045em',fontWeight:800,marginBottom:18}}>
                KARAVAN<br/><span style={{color:'var(--accent)'}}>AUTO</span>
              </h1>
              <div style={{fontFamily:'Onest',fontSize:30,fontWeight:600,letterSpacing:'-0.02em',color:'var(--ink)',marginBottom:18,lineHeight:1.15}}>
                Надёжно. Прозрачно. В&nbsp;срок.
              </div>
              <p style={{fontSize:16,color:'var(--ink-2)',maxWidth:560,lineHeight:1.6,marginBottom:32}}>
                Прямые поставки автомобилей из Китайской Народной Республики на российский рынок. С 2023 года работаем с дилерскими сетями, автосалонами и оптовыми участниками рынка.
              </p>
              <div style={{display:'flex',gap:12}}>
                <button className="btn btn-red btn-lg" onClick={()=>setRoute('contacts')}>
                  Запросить котировку <I.arrowR/>
                </button>
                <button className="btn btn-ghost btn-lg" onClick={()=>setRoute('process')}>
                  Условия работы
                </button>
              </div>
              <div style={{marginTop:36,display:'flex',gap:24,alignItems:'center',paddingTop:24,borderTop:'1px solid var(--line)'}}>
                <div>
                  <div style={{fontSize:10.5,color:'var(--ink-3)',letterSpacing:'.16em',textTransform:'uppercase',fontWeight:600,marginBottom:4}}>Условие поставки</div>
                  <div style={{fontFamily:'JetBrains Mono',fontSize:16,fontWeight:500,color:'var(--accent-3)'}}>EXW Хоргос</div>
                </div>
                <div style={{width:1,height:36,background:'var(--line)'}}></div>
                <div>
                  <div style={{fontSize:10.5,color:'var(--ink-3)',letterSpacing:'.16em',textTransform:'uppercase',fontWeight:600,marginBottom:4}}>Срок до терминала</div>
                  <div style={{fontFamily:'JetBrains Mono',fontSize:16,fontWeight:500,color:'var(--ink)'}}>15–20 дней</div>
                </div>
                <div style={{width:1,height:36,background:'var(--line)'}}></div>
                <div>
                  <div style={{fontSize:10.5,color:'var(--ink-3)',letterSpacing:'.16em',textTransform:'uppercase',fontWeight:600,marginBottom:4}}>Ответ на запрос</div>
                  <div style={{fontFamily:'JetBrains Mono',fontSize:16,fontWeight:500,color:'var(--ink)'}}>24 часа</div>
                </div>
              </div>
            </div>

            <div style={{position:'relative'}}>
              <Scene kind="port" label="КОНТЕЙНЕРНЫЙ ТЕРМИНАЛ · ХОРГОС" ratio="4/5"/>
            </div>
          </div>
        </div>
      </section>

      {/* STATS */}
      <section style={{padding:'72px 0',borderTop:'1px solid var(--line)',background:'var(--bg-2)'}}>
        <div className="container">
          <div className="sec-h">
            <div>
              <div className="kicker">Компания в цифрах</div>
              <h2>Что говорят результаты</h2>
            </div>
            <p style={{maxWidth:380,color:'var(--ink-3)',fontSize:14,lineHeight:1.6}}>
              Оперативные данные по поставкам, партнёрам и обороту. Обновляются ежеквартально.
            </p>
          </div>
          <div className="stats-grid" style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:1,background:'var(--line)',border:'1px solid var(--line)',borderRadius:10,overflow:'hidden'}}>
            {STATS.map((s,i) => (
              <div key={i} style={{background:'var(--surf)',padding:'28px 24px',minHeight:140}}>
                <Stat value={s.value} label={s.label} sub={s.sub} accent={i===5 || i===7}/>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ADVANTAGES */}
      <section style={{padding:'80px 0'}}>
        <div className="container">
          <div className="sec-h">
            <div>
              <div className="kicker">Конкурентные преимущества</div>
              <h2>Почему партнёры<br/>работают с нами</h2>
            </div>
            <p style={{maxWidth:420,color:'var(--ink-3)',fontSize:14.5,lineHeight:1.6}}>
              Пять принципов, которые отличают KARAVAN AUTO от посреднических схем и серого импорта.
            </p>
          </div>
          <div className="adv-grid" style={{display:'grid',gridTemplateColumns:'repeat(5,1fr)',gap:1,background:'var(--line)',border:'1px solid var(--line)',borderRadius:10,overflow:'hidden'}}>
            {ADVANTAGES.map((a) => (
              <div key={a.n} style={{padding:'28px 24px',background:'var(--surf)',display:'flex',flexDirection:'column',gap:12,minHeight:260}}>
                <div className="mono" style={{fontSize:11,color:'var(--accent)',letterSpacing:'.12em',fontWeight:600}}>{a.n} / 05</div>
                <h3 style={{fontSize:17,lineHeight:1.25,letterSpacing:'-0.015em',marginTop:6}}>{a.t}</h3>
                <div style={{flex:1}}></div>
                <p style={{fontSize:13,color:'var(--ink-3)',lineHeight:1.6,margin:0}}>{a.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* PROCESS TEASER */}
      <section style={{padding:'60px 0',borderTop:'1px solid var(--line)',background:'var(--bg-2)',borderBottom:'1px solid var(--line)'}}>
        <div className="container">
          <div className="sec-h">
            <div>
              <div className="kicker">Условия работы</div>
              <h2>Четыре этапа сделки</h2>
            </div>
            <button className="btn btn-ghost" onClick={()=>setRoute('process')}>
              Подробнее <I.arrowR/>
            </button>
          </div>
          <div className="stages-grid" style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:18,marginTop:8}}>
            {STAGES.map((s) => (
              <div key={s.r} style={{padding:'28px 24px',background:'var(--surf)',border:'1px solid var(--line)',borderRadius:8,position:'relative',minHeight:200,display:'flex',flexDirection:'column'}}>
                <div style={{fontFamily:'Onest',fontSize:54,fontWeight:800,color:'var(--accent)',letterSpacing:'-0.04em',lineHeight:1}}>{s.r}</div>
                <h3 style={{fontSize:17,marginTop:14,letterSpacing:'-0.01em'}}>{s.t}</h3>
                <div className="mono" style={{fontSize:11.5,color:'var(--ink-3)',marginTop:6,letterSpacing:'.02em'}}>{s.short}</div>
                <div style={{flex:1}}></div>
                <button onClick={()=>setRoute('process')} style={{marginTop:14,background:'none',border:0,color:'var(--accent-3)',cursor:'pointer',fontSize:13,fontWeight:500,padding:0,textAlign:'left',display:'flex',alignItems:'center',gap:6,fontFamily:'inherit'}}>
                  Этап подробно <I.arrowR/>
                </button>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* NETWORK TEASER */}
      <section style={{padding:'80px 0'}}>
        <div className="container">
          <div className="split-2col" style={{display:'grid',gridTemplateColumns:'1fr 1.3fr',gap:48,alignItems:'center'}}>
            <div>
              <div className="kicker">Сеть и логистика</div>
              <h2 style={{fontSize:38,letterSpacing:'-0.028em',lineHeight:1.05,marginTop:12,marginBottom:18}}>Пять складов<br/>от Чэнду до Бишкека</h2>
              <p style={{color:'var(--ink-2)',fontSize:14.5,lineHeight:1.65,maxWidth:440}}>
                Цепочка построена на собственных предсборных узлах в КНР и Центральной Азии. Контроль качества на входе и оптимизированные таможенные процедуры.
              </p>
              <button className="btn btn-bronze" style={{marginTop:26}} onClick={()=>setRoute('network')}>
                Смотреть инфраструктуру <I.arrowR/>
              </button>

              <div style={{marginTop:36,display:'grid',gridTemplateColumns:'repeat(2,1fr)',gap:14}}>
                {NETWORK.map((n, i) => (
                  <div key={n.id} style={{padding:'12px 14px',border:'1px solid var(--line)',borderRadius:6,background:'var(--surf)', gridColumn: (i === NETWORK.length - 1 && NETWORK.length % 2 === 1) ? '1 / -1' : 'auto'}}>
                    <div style={{display:'flex',justifyContent:'space-between',alignItems:'center'}}>
                      <div style={{fontFamily:'Onest',fontWeight:600,fontSize:14}}>{n.name}</div>
                      <div className="mono" style={{fontSize:10.5,color:'var(--ink-3)'}}>{n.country}</div>
                    </div>
                    <div style={{fontSize:11.5,color:'var(--accent)',marginTop:3,letterSpacing:'.04em'}}>{n.role}</div>
                  </div>
                ))}
              </div>
            </div>
            <div>
              <NetworkMap interactive={false}/>
            </div>
          </div>
        </div>
      </section>

      {/* CTA / CONTACTS */}
      <section style={{padding:'60px 0',background:'var(--bg-2)',borderTop:'1px solid var(--line)'}}>
        <div className="container">
          <div className="split-2col" style={{background:'var(--surf)',border:'1px solid var(--line-2)',borderRadius:14,padding:48,display:'grid',gridTemplateColumns:'1.4fr 1fr',gap:48,alignItems:'center'}}>
            <div>
              <div className="kicker">Готовы обсудить партию</div>
              <h2 style={{fontSize:40,letterSpacing:'-0.028em',marginTop:14,lineHeight:1.05}}>Запросите коммерческое<br/>предложение</h2>
              <p style={{color:'var(--ink-2)',fontSize:14.5,marginTop:14,maxWidth:480,lineHeight:1.65}}>
                Опишите спецификацию и объём партии — ответим в течение 24 часов. Котировка фиксируется на 3 рабочих дня.
              </p>
              <div style={{display:'flex',gap:10,marginTop:24,flexWrap:'wrap'}}>
                <button className="btn btn-red btn-lg" onClick={()=>setRoute('contacts')}>Запросить котировку <I.arrowR/></button>
                <a href="tel:+79206712782" className="btn btn-ghost btn-lg"><I.phone/> +7 920 671-27-82</a>
              </div>
            </div>
            <div style={{display:'flex',flexDirection:'column',gap:10}}>
              {[
                { i:<I.telegram/>, t:'Telegram-канал',     v:'t.me/karavan_auto',          href:TG_URL },
                { i:<I.telegram/>, t:'Менеджер · Авез',     v:'Telegram · в рабочее время', href:TG_URL },
                { i:<I.whatsapp/>, t:'WhatsApp',           v:'+7 920 671-27-82',           href:WA_URL },
              ].map((x,i) => (
                <a key={i} href={x.href} target="_blank" rel="noopener noreferrer" style={{padding:'16px 18px',background:'var(--bg-3)',border:'1px solid var(--line)',borderRadius:8,display:'flex',gap:14,alignItems:'center',cursor:'pointer',textDecoration:'none',color:'inherit'}}>
                  <div style={{width:38,height:38,borderRadius:8,background:'var(--surf-2)',display:'grid',placeItems:'center',color:'var(--accent)'}}>{x.i}</div>
                  <div style={{flex:1}}>
                    <div style={{fontSize:11.5,color:'var(--ink-3)',textTransform:'uppercase',letterSpacing:'.1em',fontWeight:600}}>{x.t}</div>
                    <div style={{fontSize:14,color:'var(--ink)',marginTop:3,fontWeight:500}}>{x.v}</div>
                  </div>
                  <I.arrowR/>
                </a>
              ))}
              <div className="mono" style={{fontSize:11.5,color:'var(--ink-3)',marginTop:6,padding:'0 4px'}}>Время ответа — 1 час в рабочее время</div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

// ============================================================
// ABOUT
// ============================================================
function AboutScreen({ setRoute }) {
  return (
    <div className="fade-in">
      <section style={{padding:'72px 0 56px',background:'radial-gradient(ellipse 60% 80% at 70% 30%,rgba(198,150,88,.08),transparent 60%)',borderBottom:'1px solid var(--line)'}}>
        <div className="container">
          <div className="kicker">О компании</div>
          <h1 style={{fontSize:64,letterSpacing:'-0.04em',lineHeight:1,marginTop:16,maxWidth:900}}>
            Между китайским авторынком<br/>и российским спросом
          </h1>
          <p style={{fontSize:17,color:'var(--ink-2)',maxWidth:780,marginTop:24,lineHeight:1.65}}>
            KARAVAN AUTO — специализированная компания по прямым поставкам автомобилей из Китайской Народной Республики на российский рынок. С 2023 года выстраиваем цепочку между китайским авторынком и профессиональными участниками российского рынка.
          </p>
        </div>
      </section>

      {/* Photo + manifesto */}
      <section style={{padding:'56px 0'}}>
        <div className="container split-2col" style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:48,alignItems:'flex-start'}}>
          <div className="photo" style={{aspectRatio:'4/5',backgroundImage:'url(assets/office-lobby-nart.jpg)',width:'100%',position:'sticky',top:80}}>
            <span className="corner"></span>
            <span className="lbl">ХОЛЛ · БЦ «НАРТ» · СОФИЙСКАЯ 60 · СПб</span>
          </div>
          <div>
            <div className="kicker">Манифест</div>
            <h2 style={{fontSize:34,marginTop:12,marginBottom:24,letterSpacing:'-0.025em',lineHeight:1.1}}>Единое окно между двумя рынками</h2>
            <div style={{display:'flex',flexDirection:'column',gap:18,fontSize:15,color:'var(--ink-2)',lineHeight:1.7}}>
              <p style={{margin:0}}>
                Компания основана профессионалами с опытом работы на авторынках России и Китая. Прямые партнёрские отношения с поставщиками КНР, отлаженная логистика, контроль на каждом этапе сделки.
              </p>
              <p style={{margin:0}}>
                Работаем по принципу единого окна: клиент общается с российской стороной, мы координируем китайских партнёров. Без языкового барьера, без задержек и без рисков самостоятельного выхода на зарубежный рынок.
              </p>
            </div>

            {/* EXW box */}
            <div style={{marginTop:36,padding:28,background:'var(--surf)',border:'1px solid var(--line-2)',borderRadius:10,position:'relative'}}>
              <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-start',gap:16,marginBottom:14}}>
                <div>
                  <div className="kicker" style={{marginBottom:8}}>Условия поставки</div>
                  <div style={{fontFamily:'Onest',fontSize:26,fontWeight:700,letterSpacing:'-0.02em',color:'var(--accent-3)'}}>EXW Хоргос</div>
                </div>
                <div className="mono" style={{fontSize:11,color:'var(--ink-3)',letterSpacing:'.1em',textTransform:'uppercase',fontWeight:600,paddingTop:8}}>Единственное условие</div>
              </div>
              <p style={{color:'var(--ink-2)',fontSize:14,margin:0,lineHeight:1.6}}>
                Поставки на условиях EXW Хоргос. Клиент получает автомобиль на пограничном терминале с полным комплектом документов — без скрытых платежей и наценок.
              </p>
            </div>

            {/* Timeline */}
            <div style={{marginTop:40}}>
              <div className="kicker" style={{marginBottom:18}}>История</div>
              <div style={{display:'flex',flexDirection:'column',gap:0}}>
                {[
                  ['2023','Основание компании. Первые партии из КНР на российский рынок.'],
                  ['2024','Прямые контракты с поставщиками. Запущен льготный утильсбор для партнёров.'],
                  ['2025','Переезд в БЦ «НАРТ» на Софийской, 60. Открыто направление через Хоргос.'],
                  ['2026','Сеть из пяти предсборных узлов в КНР и Центральной Азии.'],
                ].map(([y,t],i) => (
                  <div key={i} style={{display:'grid',gridTemplateColumns:'80px 1fr',gap:18,paddingBottom:18,paddingTop:18,borderBottom: i<3?'1px solid var(--line)':'none'}}>
                    <div className="mono" style={{color:'var(--accent)',fontSize:15,fontWeight:600,letterSpacing:'.04em'}}>{y}</div>
                    <div style={{color:'var(--ink-2)',fontSize:14,lineHeight:1.55}}>{t}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* CTA */}
      <section style={{padding:'40px 0 0'}}>
        <div className="container">
          <div style={{background:'var(--bg-2)',border:'1px solid var(--line)',borderRadius:12,padding:32,display:'flex',justifyContent:'space-between',alignItems:'center',gap:24,flexWrap:'wrap'}}>
            <div>
              <h3 style={{fontSize:24,letterSpacing:'-0.018em'}}>Готовы обсудить партию?</h3>
              <p style={{color:'var(--ink-3)',fontSize:14,marginTop:6}}>Котировка в течение 24 часов · фиксация на 3 рабочих дня</p>
            </div>
            <div style={{display:'flex',gap:10}}>
              <button className="btn btn-red btn-lg" onClick={()=>setRoute('contacts')}>Запросить котировку <I.arrowR/></button>
              <button className="btn btn-ghost btn-lg" onClick={()=>setRoute('process')}>Условия работы</button>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

// ============================================================
// PROCESS — Условия работы
// ============================================================
function ProcessScreen({ setRoute }) {
  return (
    <div className="fade-in">
      <section style={{padding:'72px 0 40px',background:'radial-gradient(ellipse 80% 60% at 30% 30%,rgba(198,150,88,.06),transparent 60%)'}}>
        <div className="container">
          <div className="kicker">Условия работы</div>
          <h1 style={{fontSize:64,letterSpacing:'-0.04em',marginTop:14,marginBottom:18,lineHeight:1}}>
            Как мы<br/>работаем
          </h1>
          <p style={{fontSize:17,color:'var(--ink-2)',maxWidth:720,lineHeight:1.65}}>
            Четыре последовательных этапа от запроса до приёма автомобиля на терминале Хоргос. Каждый этап с фиксированными сроками и точками контроля.
          </p>

          <div style={{display:'flex',gap:24,marginTop:32,paddingTop:24,borderTop:'1px solid var(--line)',flexWrap:'wrap'}}>
            {[
              ['Котировка', '24 часа'],
              ['Фиксация цены', '3 рабочих дня'],
              ['Отгрузка', '10–15 дней'],
              ['EXW Хоргос', 'единое условие'],
            ].map(([k,v],i)=>(
              <div key={i}>
                <div style={{fontSize:10.5,color:'var(--ink-3)',letterSpacing:'.16em',textTransform:'uppercase',fontWeight:600,marginBottom:4}}>{k}</div>
                <div style={{fontFamily:'JetBrains Mono',fontSize:15,fontWeight:500,color:'var(--ink)'}}>{v}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Stages */}
      <section style={{padding:'40px 0 80px'}}>
        <div className="container">
          {STAGES.map((s, i) => {
            const sceneKind = ['docs','docs','port','border'][i] || 'abstract';
            const reverse = i % 2 === 1;
            return (
              <div key={s.r} className="process-row" style={{display:'grid',gridTemplateColumns:reverse?'1fr 1.1fr':'1.1fr 1fr',gap:48,alignItems:'center',padding:'48px 0',borderTop:'1px solid var(--line)'}}>
                <div style={{order: reverse ? 2 : 1}}>
                  <div style={{display:'flex',alignItems:'flex-start',gap:24,marginBottom:18}}>
                    <div style={{fontFamily:'Onest',fontSize:130,fontWeight:800,color:'var(--accent)',letterSpacing:'-0.06em',lineHeight:0.85}}>{s.r}</div>
                    <div style={{paddingTop:8}}>
                      <div className="kicker" style={{marginBottom:4}}>Этап {i+1} из 4</div>
                      <div className="mono" style={{fontSize:12,color:'var(--ink-3)'}}>{s.short}</div>
                    </div>
                  </div>
                  <h2 style={{fontSize:38,letterSpacing:'-0.028em',lineHeight:1.05,marginBottom:18}}>{s.t}</h2>
                  <p style={{color:'var(--ink-2)',fontSize:15,lineHeight:1.7,maxWidth:540}}>{s.d}</p>

                  <div style={{marginTop:24,display:'grid',gridTemplateColumns:'1fr 1fr',gap:8,maxWidth:540}}>
                    {s.items.map((it, j) => (
                      <div key={j} style={{padding:'10px 14px',background:'var(--surf)',border:'1px solid var(--line)',borderRadius:5,display:'flex',alignItems:'center',gap:10,fontSize:13}}>
                        <span style={{color:'var(--accent)',flexShrink:0}}><I.check/></span>{it}
                      </div>
                    ))}
                  </div>
                </div>
                <div style={{order: reverse ? 1 : 2,position:'relative'}}>
                  <Scene kind={sceneKind} label={['ЗАПРОС И КП','ДОГОВОР · ПЕЧАТЬ','КОНТЕЙНЕР · ОТГРУЗКА','ТЕРМИНАЛ ХОРГОС'][i]} ratio="4/3"/>
                  {/* Floating chip */}
                  <div style={{position:'absolute',right:reverse?'auto':-18,left:reverse?-18:'auto',bottom:-18,background:'var(--surf)',border:'1px solid var(--accent)',borderRadius:8,padding:'12px 16px',display:'flex',gap:12,alignItems:'center',boxShadow:'0 16px 40px -12px rgba(0,0,0,.5)'}}>
                    <div style={{width:34,height:34,borderRadius:'50%',background:'var(--accent)',color:'#0b0d11',display:'grid',placeItems:'center',fontFamily:'Onest',fontWeight:800,fontSize:14}}>{s.r}</div>
                    <div>
                      <div style={{fontSize:10.5,color:'var(--ink-3)',letterSpacing:'.14em',textTransform:'uppercase',fontWeight:600}}>Этап</div>
                      <div style={{fontFamily:'Onest',fontWeight:600,fontSize:14,letterSpacing:'-0.01em'}}>{s.short}</div>
                    </div>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </section>

      {/* CTA */}
      <section style={{padding:'40px 0',background:'var(--bg-2)',borderTop:'1px solid var(--line)'}}>
        <div className="container">
          <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',gap:24,flexWrap:'wrap'}}>
            <div>
              <h3 style={{fontSize:28,letterSpacing:'-0.02em'}}>Запросить котировку партии</h3>
              <p style={{color:'var(--ink-3)',fontSize:14,marginTop:6}}>Спецификация, объём, сроки — ответим в течение 24 часов</p>
            </div>
            <div style={{display:'flex',gap:10}}>
              <button className="btn btn-red btn-lg" onClick={()=>setRoute('contacts')}>Запросить котировку <I.arrowR/></button>
              <button className="btn btn-ghost btn-lg" onClick={()=>setRoute('network')}>Сеть и логистика</button>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

// ============================================================
// NETWORK MAP — reusable
// ============================================================
function NetworkMap({ interactive=true, activeId, onSelect, height=520 }) {
  // Simple stylized Eurasia map — Russia, China, Central Asia silhouette
  return (
    <div style={{position:'relative',width:'100%',aspectRatio:'4/3',background:'#0e1219',border:'1px solid var(--line)',borderRadius:10,overflow:'hidden'}}>
      <svg viewBox="0 0 800 600" preserveAspectRatio="xMidYMid meet" style={{position:'absolute',inset:0,width:'100%',height:'100%'}}>
        {/* grid */}
        <defs>
          <pattern id="mgrid" width="40" height="40" patternUnits="userSpaceOnUse">
            <path d="M40 0H0V40" fill="none" stroke="rgba(255,255,255,.025)" strokeWidth="1"/>
          </pattern>
          <linearGradient id="mbg" x1="0" x2="0" y1="0" y2="1">
            <stop offset="0" stopColor="#0e1219"/>
            <stop offset="1" stopColor="#13171f"/>
          </linearGradient>
        </defs>
        <rect width="800" height="600" fill="url(#mbg)"/>
        <rect width="800" height="600" fill="url(#mgrid)"/>

        {/* Russia silhouette (stylized) */}
        <path d="M40 60 L760 50 L780 130 L720 150 L730 200 L680 220 L640 200 L580 230 L520 220 L480 250 L420 240 L380 270 L320 260 L260 280 L200 270 L160 240 L120 220 L80 200 L60 160 L50 110 Z"
          fill="rgba(198,150,88,.05)" stroke="rgba(198,150,88,.22)" strokeWidth="1"/>
        {/* China silhouette */}
        <path d="M180 290 L380 280 L460 310 L530 340 L580 350 L640 320 L720 320 L740 380 L700 440 L620 460 L540 450 L450 470 L380 460 L300 450 L250 420 L210 390 L190 350 Z"
          fill="rgba(198,150,88,.04)" stroke="rgba(198,150,88,.2)" strokeWidth="1"/>
        {/* Central Asia */}
        <path d="M120 300 L240 290 L280 320 L260 360 L200 380 L140 360 L110 330 Z"
          fill="rgba(198,150,88,.03)" stroke="rgba(198,150,88,.18)" strokeWidth="1"/>

        {/* country labels */}
        <text x="400" y="160" fontFamily="JetBrains Mono" fontSize="13" fill="rgba(236,234,216,.4)" letterSpacing="3">РОССИЙСКАЯ ФЕДЕРАЦИЯ</text>
        <text x="440" y="400" fontFamily="JetBrains Mono" fontSize="13" fill="rgba(236,234,216,.4)" letterSpacing="3">КИТАЙСКАЯ НАРОДНАЯ РЕСПУБЛИКА</text>
        <text x="140" y="340" fontFamily="JetBrains Mono" fontSize="10" fill="rgba(236,234,216,.32)" letterSpacing="2">КАЗАХСТАН · КЫРГ.</text>

        {/* Routes */}
        {NETWORK_ROUTES.map(([a,b], i) => {
          const A = NETWORK.find(n=>n.id===a);
          const B = NETWORK.find(n=>n.id===b);
          if(!A || !B) return null;
          const ax = A.x*8, ay = A.y*6;
          const bx = B.x*8, by = B.y*6;
          // curved path
          const mx = (ax+bx)/2;
          const my = Math.min(ay,by) - 30;
          return (
            <g key={i}>
              <path d={`M${ax} ${ay} Q${mx} ${my} ${bx} ${by}`}
                fill="none" stroke="rgba(198,150,88,.5)" strokeWidth="1.5"
                strokeDasharray="6 5"
                style={{animation:`dash ${10+i*2}s linear infinite`}}/>
            </g>
          );
        })}

        {/* Nodes */}
        {NETWORK.map((n) => {
          const cx = n.x*8, cy = n.y*6;
          const active = activeId === n.id;
          return (
            <g key={n.id}
               onClick={() => interactive && onSelect && onSelect(n.id)}
               style={{cursor: interactive ? 'pointer':'default'}}>
              {/* halo */}
              <circle cx={cx} cy={cy} r={active?28:20} fill="rgba(214,54,42,.18)" />
              <circle cx={cx} cy={cy} r={active?16:12} fill="rgba(214,54,42,.32)" />
              <circle cx={cx} cy={cy} r={active?9:6} fill="#d6362a" stroke="#fff" strokeWidth="2"/>
              <text x={cx + 14} y={cy - 10} fontFamily="Onest" fontWeight="700" fontSize="14" fill="#ecead8">{n.name}</text>
              <text x={cx + 14} y={cy + 6} fontFamily="JetBrains Mono" fontSize="9.5" fill="rgba(236,234,216,.6)" letterSpacing="1">{n.country.toUpperCase()}</text>
            </g>
          );
        })}
      </svg>

      {/* Bottom-left legend */}
      <div style={{position:'absolute',left:14,bottom:14,padding:'8px 12px',background:'rgba(6,8,11,.78)',border:'1px solid var(--line-2)',borderRadius:5,display:'flex',gap:16,alignItems:'center',fontSize:11,color:'var(--ink-3)'}}>
        <span style={{display:'inline-flex',alignItems:'center',gap:6}}><span style={{width:10,height:10,borderRadius:'50%',background:'#d6362a'}}></span>Узел сети</span>
        <span style={{display:'inline-flex',alignItems:'center',gap:6}}><span style={{width:18,height:1.5,background:'var(--accent)'}}></span>Маршрут</span>
      </div>

      {/* Top-right title */}
      <div style={{position:'absolute',right:14,top:14,padding:'6px 10px',background:'rgba(6,8,11,.78)',border:'1px solid var(--line-2)',borderRadius:4,fontFamily:'JetBrains Mono',fontSize:10.5,color:'var(--accent-3)',letterSpacing:'.12em',textTransform:'uppercase',fontWeight:600}}>
        KARAVAN AUTO · ЦЕПЬ ПОСТАВОК
      </div>

      <style>{`
        @keyframes dash { to { stroke-dashoffset: -200; } }
      `}</style>
    </div>
  );
}

// ============================================================
// NETWORK SCREEN
// ============================================================
function NetworkScreen({ setRoute }) {
  const [active, setActive] = useState('horgos');
  const node = NETWORK.find(n => n.id === active);

  return (
    <div className="fade-in">
      <section style={{padding:'72px 0 40px'}}>
        <div className="container">
          <div className="kicker">Сеть и логистика</div>
          <h1 style={{fontSize:64,letterSpacing:'-0.04em',marginTop:14,lineHeight:1,marginBottom:18,maxWidth:920}}>
            Наша инфраструктура —<br/><span style={{color:'var(--accent)'}}>пять складов</span> от Чэнду до Бишкека
          </h1>
          <p style={{fontSize:16.5,color:'var(--ink-2)',maxWidth:780,lineHeight:1.65}}>
            Цепочка поставок KARAVAN AUTO построена на собственных предсборных складах в КНР и Центральной Азии. Это позволяет собирать партии напрямую с заводов, контролировать качество перед отгрузкой и оптимизировать таможенные процедуры. Каждая точка — самостоятельный логистический узел с проверенными контрагентами.
          </p>
        </div>
      </section>

      {/* Map + Detail */}
      <section style={{padding:'20px 0 60px'}}>
        <div className="container">
          <div className="split-2col" style={{display:'grid',gridTemplateColumns:'1.5fr 1fr',gap:24,alignItems:'stretch'}}>
            <NetworkMap activeId={active} onSelect={setActive}/>
            <div style={{background:'var(--surf)',border:'1px solid var(--line-2)',borderRadius:10,padding:28,display:'flex',flexDirection:'column'}}>
              <div className="kicker" style={{marginBottom:8}}>Узел сети · {NETWORK.findIndex(n=>n.id===active)+1} из 5</div>
              <h2 style={{fontSize:42,letterSpacing:'-0.03em',lineHeight:1.05}}>{node.name}</h2>
              <div style={{marginTop:6,fontFamily:'JetBrains Mono',fontSize:12,color:'var(--accent-3)',letterSpacing:'.04em'}}>{node.country.toUpperCase()} · {node.role.toUpperCase()}</div>

              <hr className="sep" style={{margin:'22px 0'}}/>

              <p style={{color:'var(--ink-2)',fontSize:14.5,lineHeight:1.65,margin:0}}>{node.desc}</p>

              <hr className="sep" style={{margin:'22px 0'}}/>

              <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:14}}>
                {[
                  ['Функция', node.role],
                  ['Юрисдикция', node.country],
                  ['Контрагенты', 'верифицированы'],
                  ['Контроль качества', node.id==='chengdu' || node.id==='kashgar' ? 'на узле' : 'входной'],
                ].map(([k,v],i) => (
                  <div key={i}>
                    <div style={{fontSize:10.5,color:'var(--ink-3)',letterSpacing:'.14em',textTransform:'uppercase',fontWeight:600,marginBottom:4}}>{k}</div>
                    <div style={{fontSize:13,color:'var(--ink)',fontWeight:500}}>{v}</div>
                  </div>
                ))}
              </div>

              <div style={{flex:1}}></div>

              <div style={{display:'flex',gap:8,marginTop:24,flexWrap:'wrap'}}>
                {NETWORK.map(n => (
                  <button key={n.id} onClick={()=>setActive(n.id)}
                    className={'chip' + (active===n.id?' active':'')}>
                    {active===n.id && <span className="dot"></span>}{n.name}
                  </button>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Nodes detailed list */}
      <section style={{padding:'40px 0',background:'var(--bg-2)',borderTop:'1px solid var(--line)',borderBottom:'1px solid var(--line)'}}>
        <div className="container">
          <SectionHead kicker="Узлы сети" title="Пять точек сети" sub="Каждый узел — самостоятельный логистический объект с собственными мощностями и проверенными контрагентами на местном рынке."/>
          <div className="network-grid" style={{display:'grid',gridTemplateColumns:'repeat(5,1fr)',gap:1,background:'var(--line)',border:'1px solid var(--line)',borderRadius:10,overflow:'hidden'}}>
            {NETWORK.map((n,i) => (
              <div key={n.id} style={{padding:'24px 20px',background: active===n.id?'var(--surf-2)':'var(--surf)',display:'flex',flexDirection:'column',gap:10,cursor:'pointer',minHeight:240,position:'relative'}}
                   onClick={()=>setActive(n.id)}>
                <div className="mono" style={{fontSize:11,color:'var(--accent)',letterSpacing:'.1em',fontWeight:600}}>0{i+1} / 05</div>
                <div style={{fontFamily:'Onest',fontSize:24,fontWeight:700,letterSpacing:'-0.02em',marginTop:4}}>{n.name}</div>
                <div className="mono" style={{fontSize:11,color:'var(--ink-3)',letterSpacing:'.04em'}}>{n.country}</div>
                <div style={{fontSize:12,color:'var(--accent-3)',fontWeight:500,marginTop:2}}>{n.role}</div>
                <div style={{flex:1}}></div>
                <p style={{fontSize:12.5,color:'var(--ink-3)',lineHeight:1.55,margin:0}}>{n.desc}</p>
                {active===n.id && <div style={{position:'absolute',top:0,left:0,right:0,height:2,background:'var(--accent)'}}></div>}
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section style={{padding:'56px 0'}}>
        <div className="container">
          <div style={{background:'var(--surf)',border:'1px solid var(--line-2)',borderRadius:12,padding:32,display:'flex',justifyContent:'space-between',alignItems:'center',gap:24,flexWrap:'wrap'}}>
            <div>
              <h3 style={{fontSize:28,letterSpacing:'-0.02em'}}>Маршрут под партию подбирается индивидуально</h3>
              <p style={{color:'var(--ink-3)',fontSize:14,marginTop:6,maxWidth:600,lineHeight:1.55}}>На запрос предложим оптимальный маршрут через один из пяти узлов в зависимости от спецификации, объёма и срочности.</p>
            </div>
            <div style={{display:'flex',gap:10}}>
              <button className="btn btn-red btn-lg" onClick={()=>setRoute('contacts')}>Запросить котировку <I.arrowR/></button>
              <button className="btn btn-ghost btn-lg" onClick={()=>setRoute('process')}>Условия работы</button>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

// ============================================================
// CONTACTS
// ============================================================
function ContactsScreen() {
  const [name, setName] = useState('');
  const [phone, setPhone] = useState('+7 ');
  const [msg, setMsg] = useState('');
  const [channel, setChannel] = useState('Telegram');

  return (
    <div className="fade-in" style={{padding:'40px 0 80px'}}>
      <div className="container">
        <div className="kicker">Контакты</div>
        <h1 style={{fontSize:60,letterSpacing:'-0.035em',marginTop:14,marginBottom:18,lineHeight:1}}>
          Связь с офисом
        </h1>
        <p style={{color:'var(--ink-3)',fontSize:15,maxWidth:680,lineHeight:1.6}}>
          Время ответа — в течение часа в рабочее время. Регион присутствия: Санкт-Петербург, Москва, вся Россия.
        </p>

        <div className="contacts-grid" style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:36,marginTop:40,alignItems:'flex-start'}}>
          {/* LEFT */}
          <div>
            {/* Lobby photo */}
            <div className="photo" style={{aspectRatio:'4/3',width:'100%',marginBottom:18,backgroundImage:'url(assets/office-lobby-nart.jpg)'}}>
              <span className="corner"></span>
              <span className="lbl">ХОЛЛ БЦ «НАРТ» · СОФИЙСКАЯ 60</span>
              <div style={{position:'absolute',top:14,left:14,background:'rgba(6,8,11,.8)',border:'1px solid var(--line-2)',padding:'6px 10px',borderRadius:4,zIndex:2,display:'flex',alignItems:'center',gap:6}}>
                <span className="status status-stock"><span className="pip"></span>Офис открыт</span>
              </div>
            </div>

            {/* Address + door photo */}
            <div style={{background:'var(--surf)',border:'1px solid var(--line)',borderRadius:10,marginBottom:18,display:'grid',gridTemplateColumns:'1.5fr 1fr',gap:0,overflow:'hidden'}}>
              <div style={{padding:30}}>
                <div className="kicker" style={{marginBottom:10}}>Офис в Санкт-Петербурге</div>
                <div style={{fontFamily:'Onest',fontSize:22,fontWeight:700,letterSpacing:'-0.02em',lineHeight:1.25,marginTop:8}}>
                  Софийская, 60<br/>БЦ «НАРТ» · оф. 201-2
                </div>
                <div style={{color:'var(--ink-3)',fontSize:14,marginTop:8}}>Санкт-Петербург, 192289</div>
                <hr className="sep" style={{margin:'20px 0'}}/>
                <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:14}}>
                  <div>
                    <div style={{fontSize:11,letterSpacing:'.12em',textTransform:'uppercase',color:'var(--ink-3)',fontWeight:600,marginBottom:4}}>Часы работы</div>
                    <div style={{fontSize:14}}><span className="todo">{'{уточнить}'}</span></div>
                  </div>
                  <div>
                    <div style={{fontSize:11,letterSpacing:'.12em',textTransform:'uppercase',color:'var(--ink-3)',fontWeight:600,marginBottom:4}}>Регион</div>
                    <div style={{fontSize:14}}>СПб · Москва · РФ</div>
                  </div>
                </div>
              </div>
              <div className="photo" style={{backgroundImage:'url(assets/office-door.jpg)',borderRadius:0,border:0,borderLeft:'1px solid var(--line)',minHeight:280,position:'relative'}}>
                <span className="lbl">ДВЕРЬ · ОФИС 201-2</span>
              </div>
            </div>

            {/* Phone */}
            <div style={{background:'var(--surf)',border:'1px solid var(--line)',borderRadius:10,padding:28,marginBottom:18}}>
              <a href="tel:+79206712782" style={{textDecoration:'none',color:'inherit'}}>
                <div style={{fontSize:11,letterSpacing:'.14em',textTransform:'uppercase',color:'var(--accent)',fontWeight:600,marginBottom:8}}>Прямой номер</div>
                <div style={{fontFamily:'Onest',fontSize:36,fontWeight:700,letterSpacing:'-0.02em',color:'var(--ink)'}}>+7 920 671-27-82</div>
                <div style={{color:'var(--ink-3)',fontSize:13,marginTop:6}}>Авез, менеджер по продажам</div>
              </a>
              <div style={{display:'flex',gap:8,marginTop:16,flexWrap:'wrap'}}>
                <a className="btn btn-dark" href={TG_URL} target="_blank" rel="noopener noreferrer"><I.telegram/> t.me/karavan_auto</a>
                <a className="btn btn-dark" href={WA_URL} target="_blank" rel="noopener noreferrer"><I.whatsapp/> WhatsApp</a>
              </div>
              <div className="mono" style={{fontSize:11.5,color:'var(--ink-3)',marginTop:14}}>Время ответа — 1 час в рабочее время</div>
            </div>

            {/* Yandex Maps embed — Софийская 60, БЦ «НАРТ», СПб */}
            <iframe
              className="yandex-map"
              src="https://yandex.ru/map-widget/v1/?ll=30.424996%2C59.858343&z=17&pt=30.424996%2C59.858343%2Cpm2rdm&oid=1061914746"
              width="100%"
              height="380"
              frameBorder="0"
              loading="lazy"
              allowFullScreen
              style={{borderRadius:'12px', border:'1px solid var(--ink-3, #333)', display:'block'}}
            ></iframe>
          </div>

          {/* RIGHT — form */}
          <div style={{position:'sticky',top:80,alignSelf:'flex-start'}}>
            <div style={{background:'var(--surf)',border:'1px solid var(--line-2)',borderRadius:10,padding:30}}>
              <div className="kicker">Запрос котировки</div>
              <h3 style={{fontSize:26,letterSpacing:'-0.02em',marginTop:10}}>Опишите партию</h3>
              <p style={{color:'var(--ink-3)',fontSize:13.5,marginTop:8,lineHeight:1.55}}>
                Менеджер ответит в течение часа в рабочее время. Коммерческое предложение по партии — в течение 24 часов.
              </p>

              <div style={{display:'flex',flexDirection:'column',gap:14,marginTop:22}}>
                <div>
                  <label className="label">Имя · Компания</label>
                  <input className="input" value={name} onChange={(e)=>setName(e.target.value)} placeholder="ИП Иванов / ООО Автохолдинг"/>
                </div>
                <div>
                  <label className="label">Телефон</label>
                  <input className="input" value={phone} onChange={(e)=>setPhone(e.target.value)} placeholder="+7 ___ ___ __ __"/>
                </div>
                <div>
                  <label className="label">Сообщение</label>
                  <textarea className="input" rows={4} value={msg} onChange={(e)=>setMsg(e.target.value)} placeholder="Модель, объём партии, требования к комплектации, желаемые сроки"/>
                </div>
                <div>
                  <label className="label">Удобный канал ответа</label>
                  <div className="chip-row">
                    {['Telegram','WhatsApp'].map(c => (
                      <button key={c} className={'chip' + (channel===c?' active':'')} onClick={()=>setChannel(c)}>
                        {channel===c && <span className="dot"></span>}{c}
                      </button>
                    ))}
                  </div>
                </div>
                <button className="btn btn-red btn-lg" style={{justifyContent:'center',marginTop:8}}
                  disabled={!name || phone.length<8}
                  onClick={()=>{ window.dispatchEvent(new CustomEvent('toast',{detail:'Запрос отправлен. Менеджер свяжется в течение часа.'})); setName(''); setMsg(''); }}>
                  Отправить запрос <I.arrowR/>
                </button>
                <div style={{fontSize:11,color:'var(--ink-4)',marginTop:4,lineHeight:1.5}}>
                  Нажимая «Отправить», Вы соглашаетесь с обработкой персональных данных по 152-ФЗ. KARAVAN AUTO работает с профессиональными участниками рынка.
                </div>
              </div>
            </div>

            {/* Telegram channel highlight */}
            <div style={{marginTop:16,padding:24,background:'rgba(198,150,88,.06)',border:'1px solid rgba(198,150,88,.32)',borderRadius:10}}>
              <div style={{display:'flex',gap:14,alignItems:'center'}}>
                <div style={{width:46,height:46,borderRadius:8,background:'var(--accent)',color:'#0b0d11',display:'grid',placeItems:'center'}}>
                  <I.telegram/>
                </div>
                <div>
                  <div style={{fontFamily:'Onest',fontSize:18,fontWeight:700,letterSpacing:'-0.01em'}}>Telegram-канал KARAVAN AUTO</div>
                  <div className="mono" style={{fontSize:13,color:'var(--accent-3)',marginTop:3}}>t.me/karavan_auto</div>
                </div>
              </div>
              <p style={{color:'var(--ink-2)',fontSize:13.5,marginTop:14,lineHeight:1.6}}>
                Свежие партии, апдейты по маршрутам, кейсы поставок. Подписывайтесь, чтобы держать руку на пульсе.
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, {
  HomeScreen, AboutScreen, ProcessScreen, NetworkScreen, NetworkMap, ContactsScreen
});