// Karavan Auto — shared components (B2B, dark, RU)
const { useState, useEffect, useMemo, useRef } = React;

// ---------- Shared contact endpoints (single source of truth) ----------
const WA_URL = 'https://wa.me/79206712782?text=' + encodeURIComponent(
  'Здравствуйте! Я с сайта Karavan Auto. Прошу связаться со мной по поводу поставок автомобилей из КНР.'
);
const TG_URL = 'https://t.me/karavan_auto';
const TEL_HREF = 'tel:+79206712782';
// 跨 <script type="text/babel"> 共享（参考 data.jsx 的 window.KA_DATA 模式）
window.KA_CONTACT = { WA_URL, TG_URL, TEL_HREF };

// ---------- Icons ----------
const I = {
  search: () => <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>,
  globe: () => <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3c3 3 3 15 0 18M12 3c-3 3-3 15 0 18"/></svg>,
  chevR: () => <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="m9 6 6 6-6 6"/></svg>,
  chevD: () => <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="m6 9 6 6 6-6"/></svg>,
  arrowR: () => <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M5 12h14m-5-6 6 6-6 6"/></svg>,
  arrowDR:() => <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round"><path d="M7 7h10v10M7 17 17 7"/></svg>,
  doc: () => <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6M8 13h8M8 17h5"/></svg>,
  shield: () => <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="M12 2 4 6v6c0 5 3.5 8 8 10 4.5-2 8-5 8-10V6z"/><path d="m9 12 2 2 4-4"/></svg>,
  check: () => <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round"><path d="m5 12 5 5L20 7"/></svg>,
  pin: () => <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="M12 22s7-7 7-12a7 7 0 0 0-14 0c0 5 7 12 7 12"/><circle cx="12" cy="10" r="3"/></svg>,
  phone: () => <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.37 1.9.72 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.35 1.85.59 2.81.72A2 2 0 0 1 22 16.92"/></svg>,
  spark: () => <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="m12 3 2.5 6.5L21 12l-6.5 2.5L12 21l-2.5-6.5L3 12l6.5-2.5z"/></svg>,
  cross: () => <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M6 6l12 12M18 6 6 18"/></svg>,
  whatsapp: () => <svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2a10 10 0 0 0-8.7 14.95L2 22l5.18-1.27A10 10 0 1 0 12 2m4.94 13.66c-.21.59-1.22 1.12-1.7 1.16-.44.04-1 .06-1.61-.1-.37-.11-.85-.27-1.46-.53-2.57-1.11-4.25-3.7-4.38-3.87-.13-.17-1.04-1.38-1.04-2.64s.66-1.87.9-2.13c.23-.25.51-.32.68-.32.17 0 .34 0 .49.01.16.01.37-.06.58.44.21.51.72 1.77.79 1.9.07.13.11.28.02.45-.08.17-.13.27-.25.42-.13.15-.27.33-.38.45-.13.13-.26.27-.11.52.14.25.65 1.07 1.4 1.74.96.86 1.77 1.12 2.02 1.25.25.13.4.11.55-.06.15-.17.63-.74.8-.99.17-.25.34-.21.57-.13.23.08 1.49.7 1.74.83.26.13.43.2.49.31.06.11.06.65-.15 1.24"/></svg>,
  telegram: () => <svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20m4.6 7-1.55 7.32c-.12.52-.42.65-.85.4l-2.36-1.74-1.14 1.1c-.13.13-.23.23-.47.23l.17-2.4 4.36-3.94c.19-.17-.04-.27-.3-.1l-5.38 3.4-2.32-.73c-.5-.16-.52-.5.1-.74l9.1-3.5c.42-.16.78.1.64.7"/></svg>,
  container: () => <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="6" width="18" height="12" rx="1"/><path d="M7 6v12M11 6v12M15 6v12M19 6v12"/></svg>,
};
window.I = I;

// ---------- Util bar ----------
function UtilBar() {
  return (
    <div className="util-bar">
      <div className="row">
        <div className="left util-left">
          <span><span className="dot"></span> Принимаем запросы · ответ в течение часа</span>
          <span style={{opacity:.4}}>·</span>
          <span><I.pin/> Софийская 60, БЦ «НАРТ», офис 201-2, Санкт-Петербург</span>
        </div>
        <div className="right">
          <span className="pill">B2B · только профессиональный рынок</span>
          <a href={TEL_HREF}><I.phone/> +7 920 671-27-82</a>
          <span className="pill">RU</span>
        </div>
      </div>
    </div>
  );
}

// ---------- Header ----------
function Header({ route, setRoute }) {
  const [menuOpen, setMenuOpen] = useState(false);
  const navItems = [
    { id:'home',     label:'Главная' },
    { id:'about',    label:'О компании' },
    { id:'process',  label:'Условия работы' },
    { id:'network',  label:'Сеть и логистика' },
    { id:'contacts', label:'Контакты' },
  ];
  return (
    <header className="header">
      <div className="row">
        <div className="logo" onClick={()=>setRoute('home')}>
          <div className="logo-mark">K</div>
          <div className="logo-text">
            <div className="name">KARAVAN<span style={{color:'var(--accent)'}}>·</span>AUTO</div>
            <div className="sub">Китай → Россия · с 2023</div>
          </div>
        </div>
        <nav className={'main' + (menuOpen?' open':'')}>
          {navItems.map(n => (
            <button key={n.id}
              className={route===n.id?'active':''}
              onClick={()=>{setRoute(n.id); setMenuOpen(false);}}>{n.label}</button>
          ))}
        </nav>
        <div className="header-actions">
          <button className="hamburger" aria-label="Меню" aria-expanded={menuOpen}
                  onClick={()=>setMenuOpen(o=>!o)}>
            {menuOpen
              ? <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M6 6l12 12M18 6 6 18"/></svg>
              : <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M3 6h18M3 12h18M3 18h18"/></svg>}
          </button>
          <button className="btn btn-red btn-sm" onClick={()=>setRoute('contacts')}>
            Запросить котировку <I.arrowR/>
          </button>
        </div>
      </div>
    </header>
  );
}

// ---------- Footer ----------
function Footer({ setRoute }) {
  return (
    <footer style={{background:'var(--bg-2)',borderTop:'1px solid var(--line)',marginTop:80,padding:'56px 0 28px'}}>
      <div className="container">
        <div className="footer-grid" style={{display:'grid',gridTemplateColumns:'1.6fr 1fr 1fr 1.2fr',gap:40}}>
          <div>
            <div className="logo" style={{marginBottom:18}}>
              <div className="logo-mark">K</div>
              <div className="logo-text">
                <div className="name">KARAVAN<span style={{color:'var(--accent)'}}>·</span>AUTO</div>
                <div className="sub">Китай → Россия · с 2023</div>
              </div>
            </div>
            <p style={{color:'var(--ink-3)',fontSize:13,maxWidth:380,lineHeight:1.6,marginTop:4}}>
              Прямые поставки автомобилей из Китайской Народной Республики на российский рынок. Работаем с дилерскими сетями, автосалонами и оптовыми перекупщиками на условиях EXW Хоргос.
            </p>
            <div style={{display:'flex',gap:8,marginTop:18,flexWrap:'wrap'}}>
              <span className="tag tag-mute">с 2023 года</span>
              <span className="tag tag-bronze">EXW Хоргос</span>
              <span className="tag tag-mute">B2B</span>
            </div>
          </div>
          {[
            { h:'Разделы', items:[
              ['Главная','home'], ['О компании','about'],
              ['Условия работы','process'], ['Сеть и логистика','network'],
              ['Контакты','contacts'],
            ]},
            { h:'Партнёрам', items:[
              ['Запросить котировку','contacts'],
              ['Документы и оферта','contacts'],
              ['Льготный утильсбор','process'],
              ['Цепочка поставок','network'],
            ]},
          ].map(col => (
            <div key={col.h}>
              <div style={{fontSize:11,letterSpacing:'.15em',textTransform:'uppercase',color:'var(--ink-3)',marginBottom:16,fontWeight:600}}>{col.h}</div>
              <ul style={{listStyle:'none',padding:0,margin:0,display:'flex',flexDirection:'column',gap:9}}>
                {col.items.map(([t, r]) => <li key={t} style={{fontSize:13.5,color:'var(--ink-2)',cursor:'pointer'}} onClick={()=>setRoute(r)}>{t}</li>)}
              </ul>
            </div>
          ))}
          <div>
            <div style={{fontSize:11,letterSpacing:'.15em',textTransform:'uppercase',color:'var(--ink-3)',marginBottom:16,fontWeight:600}}>Контакты</div>
            <a href={TEL_HREF} style={{fontFamily:'Onest',fontSize:22,fontWeight:700,color:'var(--ink)',textDecoration:'none',display:'block',letterSpacing:'-0.01em'}}>+7 920 671-27-82</a>
            <div style={{fontSize:13,color:'var(--ink-3)',marginTop:4}}>
              Часы работы — <span className="todo">{'{уточнить}'}</span>
            </div>
            <div style={{marginTop:18,fontSize:13.5,color:'var(--ink-2)',lineHeight:1.6}}>
              Софийская 60<br/>БЦ «НАРТ» · оф. 201-2<br/>Санкт-Петербург, 192289
            </div>
            <div style={{marginTop:14,display:'flex',gap:8,flexWrap:'wrap'}}>
              <a className="btn btn-dark btn-sm" href={TG_URL} target="_blank" rel="noopener noreferrer"><I.telegram/> t.me/karavan_auto</a>
              <a className="btn btn-dark btn-sm" href={WA_URL} target="_blank" rel="noopener noreferrer"><I.whatsapp/> WhatsApp</a>
            </div>
          </div>
        </div>
        <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginTop:56,paddingTop:24,borderTop:'1px solid var(--line)',color:'var(--ink-4)',fontSize:12,flexWrap:'wrap',gap:12}}>
          <div className="mono">© 2023–2026 KARAVAN AUTO · <span className="todo">{'{ИНН/ОГРН — уточнить}'}</span></div>
          <div style={{display:'flex',gap:20,color:'var(--ink-3)'}}>
            <span>Политика конфиденциальности</span>
            <span>Публичная оферта</span>
          </div>
        </div>
      </div>
    </footer>
  );
}

// ---------- Stat ----------
function Stat({ value, label, sub, accent }) {
  return (
    <div>
      <div style={{fontFamily:'Onest',fontSize:42,fontWeight:700,letterSpacing:'-0.035em',lineHeight:1,color: accent ? 'var(--accent)' : 'var(--ink)'}}>{value}</div>
      <div style={{fontSize:13,color:'var(--ink-2)',marginTop:8,fontWeight:500,lineHeight:1.35}}>{label}</div>
      {sub && <div style={{fontSize:11.5,color:'var(--ink-3)',marginTop:4}} className="mono">{sub}</div>}
    </div>
  );
}

// ---------- Floating chats (WhatsApp + Telegram only) ----------
function FloatingChats() {
  return (
    <div className="float-stack">
      <a className="float-btn" href={WA_URL} target="_blank" rel="noopener noreferrer" style={{textDecoration:'none'}}>
        <span className="icn wa"><I.whatsapp/></span>
        WhatsApp
      </a>
      <a className="float-btn" href={TG_URL} target="_blank" rel="noopener noreferrer" style={{textDecoration:'none'}}>
        <span className="icn tg"><I.telegram/></span>
        Telegram
      </a>
    </div>
  );
}

// ---------- Toast ----------
function Toast({ msg, onDone }) {
  useEffect(()=>{
    if(msg){const t=setTimeout(onDone,3000);return ()=>clearTimeout(t);}
  },[msg]);
  if(!msg) return null;
  return <div className="toast"><I.check/> {msg}</div>;
}

// ---------- Section head ----------
function SectionHead({ kicker, title, sub, action }) {
  return (
    <div className="sec-h">
      <div>
        <div className="kicker">{kicker}</div>
        <h2>{title}</h2>
        {sub && <p style={{color:'var(--ink-3)',fontSize:14,marginTop:14,maxWidth:560,lineHeight:1.6}}>{sub}</p>}
      </div>
      {action}
    </div>
  );
}

// ---------- Industrial visual placeholder (SVG abstract concepts) ----------
function Scene({ kind, label, ratio='16/10', children }) {
  // pure CSS/SVG abstract concept tile — no fake photos
  const scenes = {
    port: (
      <svg viewBox="0 0 800 500" preserveAspectRatio="xMidYMid slice" style={{position:'absolute',inset:0,width:'100%',height:'100%'}}>
        <defs>
          <linearGradient id="sky" x1="0" x2="0" y1="0" y2="1">
            <stop offset="0" stopColor="#0e1219"/>
            <stop offset="1" stopColor="#1a1f2a"/>
          </linearGradient>
          <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
            <path d="M40 0H0V40" fill="none" stroke="rgba(255,255,255,.03)" strokeWidth="1"/>
          </pattern>
        </defs>
        <rect width="800" height="500" fill="url(#sky)"/>
        <rect width="800" height="500" fill="url(#grid)"/>
        {/* horizon */}
        <line x1="0" y1="320" x2="800" y2="320" stroke="rgba(198,150,88,.25)" strokeWidth="1"/>
        {/* containers — far row */}
        {Array.from({length:14}).map((_,i)=> (
          <rect key={'a'+i} x={i*60+20} y={280} width={52} height={36}
            fill={['#1f242e','#262c38','#1a1e26'][i%3]} stroke="rgba(198,150,88,.18)"/>
        ))}
        {/* containers — middle row */}
        {Array.from({length:11}).map((_,i)=> (
          <rect key={'b'+i} x={i*72+40} y={232} width={64} height={44}
            fill={['#1f242e','#2a3140','#262c38'][i%3]} stroke="rgba(198,150,88,.22)"/>
        ))}
        {/* containers — front row, accent */}
        {Array.from({length:8}).map((_,i)=> (
          <rect key={'c'+i} x={i*100+30} y={360} width={88} height={56}
            fill={i===3?'#c69658':['#1f242e','#2a3140'][i%2]} stroke="rgba(198,150,88,.3)"/>
        ))}
        {/* cranes */}
        <g stroke="rgba(198,150,88,.55)" strokeWidth="1.5" fill="none">
          <path d="M120 320V90 M120 90 L260 90 M260 90 L260 130 M140 90 L140 200 M180 90 L180 200 M220 90 L220 200"/>
          <path d="M520 320V120 M520 120 L660 120 M660 120 L660 160 M540 120 L540 220 M580 120 L580 220 M620 120 L620 220"/>
        </g>
        {/* sun mark */}
        <circle cx="640" cy="160" r="32" fill="none" stroke="rgba(198,150,88,.35)" strokeWidth="1"/>
        <circle cx="640" cy="160" r="3" fill="#c69658"/>
        {/* tape */}
        <rect x="0" y="430" width="800" height="6" fill="#d6362a" opacity=".85"/>
      </svg>
    ),
    factory: (
      <svg viewBox="0 0 800 500" preserveAspectRatio="xMidYMid slice" style={{position:'absolute',inset:0,width:'100%',height:'100%'}}>
        <defs>
          <linearGradient id="fg" x1="0" x2="1" y1="0" y2="1">
            <stop offset="0" stopColor="#0d1119"/>
            <stop offset="1" stopColor="#181c25"/>
          </linearGradient>
        </defs>
        <rect width="800" height="500" fill="url(#fg)"/>
        {/* factory roofs */}
        <g fill="none" stroke="rgba(198,150,88,.4)" strokeWidth="1.4">
          {Array.from({length:8}).map((_,i)=> (
            <path key={i} d={`M${i*100+20} 220 L${i*100+60} 180 L${i*100+100} 220`}/>
          ))}
          <line x1="0" y1="220" x2="800" y2="220"/>
        </g>
        <rect x="0" y="220" width="800" height="180" fill="rgba(255,255,255,.015)" stroke="rgba(255,255,255,.04)"/>
        {/* assembly line cars (top down silhouettes) */}
        {Array.from({length:6}).map((_,i)=> (
          <g key={i} transform={`translate(${i*120+60},310)`}>
            <rect x="0" y="0" width="80" height="36" rx="6" fill="#2a3140" stroke="rgba(198,150,88,.35)"/>
            <rect x="10" y="8" width="60" height="20" rx="4" fill="#0e1219"/>
            <circle cx="14" cy="38" r="5" fill="#0b0d11" stroke="rgba(198,150,88,.4)"/>
            <circle cx="66" cy="38" r="5" fill="#0b0d11" stroke="rgba(198,150,88,.4)"/>
          </g>
        ))}
        {/* QR + stamp */}
        <g transform="translate(620,60)" fill="none" stroke="rgba(198,150,88,.6)" strokeWidth="1">
          <rect width="100" height="100"/>
          {Array.from({length:36}).map((_,i)=>{
            const r=Math.floor(i/6), c=i%6;
            return Math.random()>.55 ? <rect key={i} x={c*15+5} y={r*15+5} width="10" height="10" fill="rgba(198,150,88,.4)" stroke="none"/> : null;
          })}
        </g>
        <rect x="0" y="430" width="800" height="6" fill="#d6362a" opacity=".85"/>
      </svg>
    ),
    docs: (
      <svg viewBox="0 0 800 500" preserveAspectRatio="xMidYMid slice" style={{position:'absolute',inset:0,width:'100%',height:'100%'}}>
        <rect width="800" height="500" fill="#0e1219"/>
        {/* paper stack */}
        <g transform="translate(120,80) rotate(-4)">
          <rect width="380" height="500" fill="#1f242e" stroke="rgba(198,150,88,.25)"/>
          {Array.from({length:14}).map((_,i)=> <rect key={i} x="30" y={50+i*22} width={i%3===0?200:300} height="6" fill="rgba(236,234,216,.12)"/>)}
          {/* VIN highlight */}
          <rect x="30" y="30" width="320" height="20" fill="rgba(198,150,88,.18)" stroke="#c69658" strokeWidth="1"/>
          <text x="40" y="46" fontFamily="JetBrains Mono" fontSize="14" fill="#efd9b3">VIN  LSGFB5 4A8 PE 123 4567</text>
        </g>
        <g transform="translate(420,140) rotate(6)">
          <rect width="320" height="420" fill="#262c38" stroke="rgba(198,150,88,.3)"/>
          {Array.from({length:12}).map((_,i)=> <rect key={i} x="25" y={40+i*22} width={i%2===0?160:240} height="5" fill="rgba(236,234,216,.1)"/>)}
        </g>
        {/* round stamp */}
        <g transform="translate(560,360)">
          <circle r="62" fill="none" stroke="#d6362a" strokeWidth="2.5" opacity=".85"/>
          <circle r="48" fill="none" stroke="#d6362a" strokeWidth="1" opacity=".85"/>
          <text textAnchor="middle" y="-8" fontFamily="Onest" fontWeight="700" fontSize="14" fill="#e85a4e">KARAVAN</text>
          <text textAnchor="middle" y="10" fontFamily="JetBrains Mono" fontSize="10" fill="#e85a4e">CERTIFIED</text>
          <text textAnchor="middle" y="28" fontFamily="JetBrains Mono" fontSize="9" fill="#e85a4e" opacity=".8">EXW HORGOS · 2026</text>
        </g>
      </svg>
    ),
    border: (
      <svg viewBox="0 0 800 500" preserveAspectRatio="xMidYMid slice" style={{position:'absolute',inset:0,width:'100%',height:'100%'}}>
        <rect width="800" height="500" fill="#0e1219"/>
        {/* horizon mountains */}
        <path d="M0 320 L120 240 L220 280 L340 200 L440 260 L560 220 L680 280 L800 240 L800 500 L0 500 Z" fill="#161a22"/>
        <path d="M0 360 L100 320 L260 350 L400 300 L540 340 L680 320 L800 350 L800 500 L0 500 Z" fill="#1f242e"/>
        {/* gate */}
        <g transform="translate(310,200)">
          <rect x="0" y="20" width="180" height="120" fill="#262c38" stroke="rgba(198,150,88,.4)"/>
          <rect x="0" y="0" width="180" height="20" fill="#c69658"/>
          <text x="90" y="14" textAnchor="middle" fontFamily="Onest" fontWeight="800" fontSize="12" fill="#0b0d11" letterSpacing="2">HORGOS · 霍尔果斯</text>
          <rect x="20" y="40" width="50" height="80" fill="#0b0d11"/>
          <rect x="110" y="40" width="50" height="80" fill="#0b0d11"/>
          {/* barrier */}
          <rect x="-40" y="80" width="220" height="6" fill="#d6362a"/>
          <rect x="-40" y="80" width="14" height="6" fill="#fff"/>
          <rect x="0" y="80" width="14" height="6" fill="#fff"/>
        </g>
        <rect x="0" y="430" width="800" height="6" fill="#d6362a" opacity=".85"/>
      </svg>
    ),
    abstract: (
      <svg viewBox="0 0 800 500" preserveAspectRatio="xMidYMid slice" style={{position:'absolute',inset:0,width:'100%',height:'100%'}}>
        <rect width="800" height="500" fill="#0e1219"/>
        <defs>
          <pattern id="gx" width="40" height="40" patternUnits="userSpaceOnUse">
            <path d="M40 0H0V40" fill="none" stroke="rgba(198,150,88,.08)" strokeWidth="1"/>
          </pattern>
        </defs>
        <rect width="800" height="500" fill="url(#gx)"/>
        <g fill="none" stroke="rgba(198,150,88,.5)" strokeWidth="1.2">
          <circle cx="200" cy="260" r="80"/>
          <circle cx="200" cy="260" r="140"/>
          <circle cx="600" cy="220" r="60"/>
          <circle cx="600" cy="220" r="110"/>
          <path d="M200 260 L600 220"/>
          <path d="M200 260 L420 380"/>
          <path d="M600 220 L420 380"/>
        </g>
        <circle cx="200" cy="260" r="6" fill="#c69658"/>
        <circle cx="600" cy="220" r="6" fill="#c69658"/>
        <circle cx="420" cy="380" r="6" fill="#d6362a"/>
      </svg>
    ),
  };
  return (
    <div className="scene" style={{aspectRatio:ratio,position:'relative',background:'#0e1219',border:'1px solid var(--line)',borderRadius:8,overflow:'hidden'}}>
      {scenes[kind] || scenes.abstract}
      <span className="lbl" style={{position:'absolute',left:10,bottom:10,fontFamily:'JetBrains Mono',fontSize:10.5,letterSpacing:'.04em',background:'rgba(6,8,11,.78)',color:'var(--ink)',padding:'4px 9px',borderRadius:3,border:'1px solid var(--line-2)',zIndex:2}}>{label}</span>
      <span className="corner" style={{position:'absolute',top:10,right:10,width:18,height:18,borderTop:'1.5px solid rgba(255,255,255,.6)',borderRight:'1.5px solid rgba(255,255,255,.6)',zIndex:1}}></span>
      {children}
    </div>
  );
}

Object.assign(window, {
  UtilBar, Header, Footer, Stat, FloatingChats, Toast, SectionHead, Scene
});