// Hero — 2 варианта: classic (лево текст / право фото) и bold (всё едино, код сверху + фото встроено)

function ExpertPhoto({ size = 400, name = 'Алексей', tagline = 'founder / агент', style = {} }) {
  return (
    <div style={{
      position: 'relative',
      width: size, height: size,
      ...style
    }}>
      {/* Blue glow — top-left behind photo */}
      <div style={{
        position: 'absolute', top: '-15%', left: '-15%',
        width: '90%', height: '90%',
        background: 'radial-gradient(circle, rgba(56,120,255,0.45) 0%, rgba(40,80,200,0.18) 35%, transparent 65%)',
        filter: 'blur(25px)',
        pointerEvents: 'none'
      }} />
      {/* Yellow glow — bottom-right behind photo */}
      {/* removed per user request */}

      {/* Photo — transparent cutout, clean, just soft bottom fade */}
      <img
        src={window.__IMG["expert.png"]}
        alt={name}
        style={{
          position: 'absolute', inset: 0,
          width: '100%', height: '100%',
          objectFit: 'cover',
          objectPosition: 'center top',
          maskImage: 'linear-gradient(180deg, #000 0%, #000 80%, rgba(0,0,0,0.6) 92%, transparent 100%)',
          WebkitMaskImage: 'linear-gradient(180deg, #000 0%, #000 80%, rgba(0,0,0,0.6) 92%, transparent 100%)',
          filter: 'contrast(1.05) saturate(1.1)',
          pointerEvents: 'none'
        }} />
      

      {/* Warm color-grade overlay */}
      {/* removed per user request */}

      {/* Name card — removed per user request */}

      {/* Live tag — floating top */}
      <div style={{
        position: 'absolute', top: '8%', right: '8%',
        padding: '5px 11px', borderRadius: 8,
        background: 'rgba(10,10,11,0.55)',
        backdropFilter: 'blur(8px)',
        WebkitBackdropFilter: 'blur(8px)',
        border: '1px solid #7c5cff',
        color: '#a08bff',
        fontFamily: 'Manrope,sans-serif', fontWeight: 700, fontSize: 10,
        letterSpacing: '.08em',
        boxShadow: '0 0 18px rgba(124, 92, 255,0.45), 0 4px 16px rgba(0,0,0,0.4)',
        display: 'inline-flex', alignItems: 'center', gap: 6
      }}>
        <span style={{
          width: 6, height: 6, borderRadius: '50%',
          background: '#7c5cff',
          boxShadow: '0 0 8px #7c5cff',
          animation: 'livePulse 1.6s ease-in-out infinite'
        }} />
        LIVE
      </div>
      <style>{`@keyframes livePulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.8); } }`}</style>
    </div>);

}

function CodeLine({ n, indent = 0, children, hl = false }) {
  return (
    <div style={{
      display: 'flex', gap: 16,
      padding: '1px 18px',
      background: hl ? 'rgba(124, 92, 255,0.07)' : 'transparent',
      borderLeft: hl ? '2px solid var(--yellow)' : '2px solid transparent'
    }}>
      <span style={{ color: 'var(--fg-mute)', width: 20, textAlign: 'right', flexShrink: 0 }}>{String(n).padStart(2, '0')}</span>
      <span style={{ paddingLeft: indent * 18 }}>{children}</span>
    </div>);

}

const syn = {
  kw: { color: '#c678dd' }, str: { color: '#98c379' }, num: { color: '#d19a66' },
  fn: { color: '#61afef' }, cmt: { color: '#5c6370', fontStyle: 'italic' },
  var: { color: '#e06c75' }, prop: { color: '#e5c07b' }, y: { color: 'var(--yellow)' }, b: { color: 'var(--blue)' }
};

// Анимация живого набора Python-скрипта (gspread / Google Sheets автоматизация)
function TypingCode({ syn }) {
  // Каждая строка: массив токенов { t: тип, s: текст }. Тип 'pl' — без подсветки.
  const lines = [
  [{ t: 'kw', s: 'def' }, { t: 'pl', s: ' ' }, { t: 'fn', s: 'main' }, { t: 'pl', s: '() -> ' }, { t: 'kw', s: 'None' }, { t: 'pl', s: ':' }],
  [{ t: 'pl', s: '    creds = ' }, { t: 'fn', s: 'Credentials' }, { t: 'pl', s: '.' }, { t: 'fn', s: 'from_service_account_file' }, { t: 'pl', s: '(' }, { t: 'str', s: '"google_creds.json"' }, { t: 'pl', s: ', scopes=' }, { t: 'var', s: 'SCOPES' }, { t: 'pl', s: ')' }],
  [{ t: 'pl', s: '    gc = gspread.' }, { t: 'fn', s: 'authorize' }, { t: 'pl', s: '(creds)' }],
  [{ t: 'pl', s: '' }],
  [{ t: 'pl', s: '    ' }, { t: 'kw', s: 'try' }, { t: 'pl', s: ':' }],
  [{ t: 'pl', s: '        ss = gc.' }, { t: 'fn', s: 'open' }, { t: 'pl', s: '(' }, { t: 'var', s: 'OLD_NAME' }, { t: 'pl', s: ')' }],
  [{ t: 'pl', s: '        ' }, { t: 'fn', s: 'print' }, { t: 'pl', s: '(' }, { t: 'str', s: 'f"найдена таблица \'{OLD_NAME}\'"' }, { t: 'pl', s: ')' }],
  [{ t: 'pl', s: '    ' }, { t: 'kw', s: 'except' }, { t: 'pl', s: ' gspread.' }, { t: 'fn', s: 'SpreadsheetNotFound' }, { t: 'pl', s: ':' }],
  [{ t: 'pl', s: '        ss = gc.' }, { t: 'fn', s: 'create' }, { t: 'pl', s: '(' }, { t: 'var', s: 'NEW_NAME' }, { t: 'pl', s: ')' }],
  [{ t: 'pl', s: '        ' }, { t: 'fn', s: 'print' }, { t: 'pl', s: '(' }, { t: 'str', s: 'f"создана: id={ss.id}"' }, { t: 'pl', s: ')' }],
  [{ t: 'pl', s: '' }],
  [{ t: 'pl', s: '    ' }, { t: 'kw', s: 'if' }, { t: 'pl', s: ' ss.title != ' }, { t: 'var', s: 'NEW_NAME' }, { t: 'pl', s: ':' }],
  [{ t: 'pl', s: '        ss.' }, { t: 'fn', s: 'update_title' }, { t: 'pl', s: '(' }, { t: 'var', s: 'NEW_NAME' }, { t: 'pl', s: ')' }],
  [{ t: 'pl', s: '' }],
  [{ t: 'pl', s: '    ' }, { t: 'fn', s: 'print' }, { t: 'pl', s: '(' }, { t: 'str', s: 'f"✓ готово. Таблица \'{NEW_NAME}\' чистая."' }, { t: 'pl', s: ')' }]];



  // Вычисляем длину каждой строки в символах
  const lineLens = lines.map((l) => l.reduce((a, tk) => a + tk.s.length, 0));
  const totalChars = lineLens.reduce((a, b) => a + b, 0);
  const N = lines.length;
  const PAUSE_BETWEEN = 6; // паузы между строками (в "тиках")
  const PAUSE_LOOP = 120; // пауза перед рестартом
  const CHAR_MS = 28; // скорость печати

  const totalTicks = totalChars + PAUSE_BETWEEN * (N - 1) + PAUSE_LOOP;
  const [tick, setTick] = React.useState(0);

  React.useEffect(() => {
    const id = setInterval(() => {
      setTick((t) => (t + 1) % totalTicks);
    }, CHAR_MS);
    return () => clearInterval(id);
  }, [totalTicks]);

  // Распределяем tick по строкам
  let remaining = tick;
  const shown = new Array(N).fill(0);
  for (let i = 0; i < N; i++) {
    if (remaining <= 0) break;
    const take = Math.min(remaining, lineLens[i]);
    shown[i] = take;
    remaining -= take;
    if (shown[i] === lineLens[i] && i < N - 1) {
      remaining -= PAUSE_BETWEEN;
    }
  }
  // Какая строка "активна"
  let activeLine = 0;
  for (let i = 0; i < N; i++) {
    if (shown[i] < lineLens[i]) {activeLine = i;break;}
    activeLine = i;
  }
  const allDone = shown[N - 1] === lineLens[N - 1];

  const renderLine = (idx) => {
    const line = lines[idx];
    const visible = shown[idx];
    let used = 0;
    const out = [];
    for (let j = 0; j < line.length; j++) {
      const tk = line[j];
      if (used >= visible) break;
      const take = Math.min(tk.s.length, visible - used);
      const piece = tk.s.slice(0, take);
      const style = tk.t === 'pl' ? null : syn[tk.t];
      out.push(
        <span key={j} style={style || undefined}
        dangerouslySetInnerHTML={{ __html: piece.replace(/ /g, '&nbsp;').replace(/\u00a0/g, '&nbsp;') }} />

      );
      used += take;
      if (used >= visible) break;
    }
    const showCursor = activeLine === idx && !allDone || allDone && idx === N - 1;
    return (
      <div key={idx} style={{
        display: 'flex', gap: 14, minHeight: '1.55em',
        alignItems: 'baseline'
      }}>
        <span style={{
          color: 'var(--fg-mute)', opacity: .55,
          width: 22, textAlign: 'right', flexShrink: 0,
          fontSize: '0.85em', userSelect: 'none'
        }}>{idx + 1}</span>
        <span style={{ flex: 1, whiteSpace: 'pre' }}>
          {out}
          {showCursor &&
          <span style={{
            display: 'inline-block',
            width: 8, height: '1.05em',
            background: '#7c5cff',
            verticalAlign: '-2px',
            marginLeft: 1,
            animation: 'blink 1s steps(2,start) infinite'
          }} />
          }
        </span>
      </div>);

  };

  // Auto-scroll to active line — keep it in view inside fixed-height window
  const scrollerRef = React.useRef(null);
  React.useEffect(() => {
    const el = scrollerRef.current;
    if (!el) return;
    const lineEl = el.children[activeLine];
    if (!lineEl) return;
    const target = Math.max(0, lineEl.offsetTop - el.clientHeight * 0.55);
    el.scrollTo({ top: target, behavior: 'smooth' });
  }, [activeLine]);

  return (
    <>
      <style>{`@keyframes blink { 50% { opacity: 0; } }`}</style>
      <div ref={scrollerRef} style={{
        height: 290, overflow: 'hidden',
        maskImage: 'linear-gradient(180deg, transparent 0%, #000 8%, #000 88%, transparent 100%)',
        WebkitMaskImage: 'linear-gradient(180deg, transparent 0%, #000 8%, #000 88%, transparent 100%)'
      }}>
        {lines.map((_, i) => renderLine(i))}
      </div>
    </>);

}

// --- VARIANT 1: CLASSIC ---
function HeroClassic() {
  return (
    <section style={{ position: 'relative', padding: '60px 40px 80px' }} className="grid-bg">
      {/* glow */}
      <div style={{ position: 'absolute', top: 380, left: '-8%', width: 700, height: 700,
        background: 'radial-gradient(circle, rgba(68, 35, 184, 0.22) 0%, transparent 60%)', pointerEvents: 'none' }} />
      <div style={{ position: 'absolute', top: 700, right: '20%', width: 500, height: 500,
        background: 'radial-gradient(circle, rgba(90, 54, 232, 0.12) 0%, transparent 60%)', pointerEvents: 'none' }} />

      <div className="hero-classic-grid">
        {/* LEFT — text */}
        <div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 44, flexWrap: 'wrap' }}>
            <Kbd small tone="yellow">NEW</Kbd>
            <span className="mono" style={{ fontSize: 22, color: 'var(--fg-dim)' }}>
              поток #2 · набор на май <span style={{ color: 'var(--yellow)' }}>открыт</span>
            </span>
            <span style={{ width: 4, height: 4, borderRadius: '50%', background: 'var(--fg-mute)' }} />
            <span className="mono" style={{ fontSize: 22, color: 'var(--fg-dim)' }}>осталось 7 мест из 10</span>
          </div>

          <h1 className="display" style={{
            fontSize: 'clamp(48px, 6.6vw, 108px)', lineHeight: 0.95, margin: '0 0 40px',
            fontWeight: 700, letterSpacing: '-0.02em'
          }}>
            стань<br />
            <span style={{
              background: 'linear-gradient(90deg, #a08bff 0%, #7c5cff 40%, #6d4aff 75%, #5a36e8 100%)',
              WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent',
              whiteSpace: 'nowrap'
            }}>AI-разрабом</span>
            <span style={{ color: '#3ee08a', fontFamily: 'Manrope,sans-serif', fontSize: '0.5em', verticalAlign: 'super' }}>;</span>
          </h1>

          <p style={{
            fontSize: 20, lineHeight: 1.6, maxWidth: 600,
            color: 'var(--fg-dim)', margin: '0 0 48px'
          }}>
            Собирай сайты, приложения и <span style={{ color: 'var(--fg)', fontWeight: 600 }}>ai-агентов через диалог с помощью ии</span>. Закрывай клиентов на <span className="mono" style={{ color: 'var(--yellow)', fontWeight: 600, background: 'rgba(255, 214, 10,.08)', padding: '1px 6px', borderRadius: 4 }}>$500–2000</span> за проект.
          </p>

          {/* Pills */}
          <window.HeroPills variant={React.useContext(window.PillsVariantContext) || 'glass'} />

          <div style={{ display: 'flex', gap: 18, alignItems: 'center', flexWrap: 'wrap', marginBottom: 56 }}>
            <CTAButton tone="yellow" size="xl">Начать обучение</CTAButton>
          </div>

          {/* Stats */}
          <div style={{ display: 'flex', gap: 32, paddingTop: 36, borderTop: '1px dashed var(--line-2)' }}>
            {[
            ['1000+', 'учеников'],
            ['$500', 'средний чек'],
            ['17', 'модулей']].
            map(([n, l], i) =>
            <div key={i} style={{ textAlign: 'center' }}>
                <div className="display" style={{ fontSize: 28, fontWeight: 700, color: i === 0 ? 'var(--yellow)' : 'var(--fg)', lineHeight: 1 }}>{n}</div>
                <div className="mono" style={{ color: 'var(--fg-mute)', letterSpacing: '.1em', marginTop: 6, fontSize: "12px", textTransform: "uppercase" }}>{l}</div>
              </div>
            )}
          </div>
        </div>

        {/* RIGHT — terminal with typing animation */}
        <div style={{ position: 'relative', display: 'flex', flexDirection: 'column', justifyContent: 'center', minHeight: 520 }}>
          {/* Caption above terminal */}
          <div style={{
            display: 'flex', alignItems: 'center', gap: 10,
            marginBottom: 16, paddingLeft: 4
          }}>
            <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--yellow)', boxShadow: '0 0 8px var(--yellow)' }} />
            <span className="mono" style={{
              fontSize: 13, color: 'var(--fg-dim)', letterSpacing: '.04em'
            }}>
              <span style={{ color: 'var(--fg)', fontWeight: 600, fontSize: "18px" }}>код пишется за тебя сам</span>
            </span>
          </div>

          {/* Terminal window */}
          <div style={{
            background: 'var(--bg-1)', border: '1px solid var(--line-2)',
            borderRadius: 14, padding: '20px 24px 26px',
            fontFamily: 'Manrope,sans-serif', fontSize: 16, lineHeight: 1.7,
            boxShadow: '0 30px 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(124,92,255,0.06)',
            position: 'relative', overflow: 'hidden'
          }}>
            {/* Subtle yellow glow */}
            <div style={{
              position: 'absolute', inset: 0,
              background: 'radial-gradient(circle at 70% 0%, rgba(124,92,255,0.10) 0%, transparent 50%)',
              pointerEvents: 'none'
            }} />
            {/* Title bar */}
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 18, position: 'relative' }}>
              <div style={{ width: 12, height: 12, borderRadius: '50%', background: '#ff5f57' }} />
              <div style={{ width: 12, height: 12, borderRadius: '50%', background: '#febc2e' }} />
              <div style={{ width: 12, height: 12, borderRadius: '50%', background: '#28c840' }} />
              <span style={{ marginLeft: 'auto', color: 'var(--fg-mute)', fontSize: 12, fontFamily: 'Manrope,sans-serif' }}>agent.ts</span>
            </div>
            <div style={{ position: 'relative' }}>
              <TypingCode syn={syn} />
            </div>
          </div>
        </div>
      </div>

      {/* Terminal ticker — marquee of learner incomes */}
      <div style={{
        maxWidth: 1360, margin: '60px auto 0',
        background: 'var(--bg-1)', border: '1px solid var(--line)', borderRadius: 10,
        padding: '10px 18px',
        fontFamily: 'Manrope,sans-serif', fontSize: 13, color: 'var(--fg-dim)',
        display: 'flex', alignItems: 'center', gap: 14, overflow: 'hidden'
      }}>
        <span style={{ color: 'var(--green)', flexShrink: 0 }}>$</span>
        <span style={{ flexShrink: 0, color: 'var(--fg-dim)' }}>tail -f /learners/income.log</span>
        <span style={{ width: 1, height: 14, background: 'var(--line-2)', flexShrink: 0, margin: '0 4px' }} />
        {/* marquee */}
        <div style={{ position: 'relative', flex: 1, overflow: 'hidden', maskImage: 'linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%)', WebkitMaskImage: 'linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%)' }}>
          <div style={{
            display: 'inline-flex', gap: 28, whiteSpace: 'nowrap',
            animation: 'marquee-income 28s linear infinite',
            paddingLeft: 20
          }}>
            {Array.from({ length: 3 }).flatMap((_, j) =>
            ['$1500', '$500', '$450', '$610', '$2100', '$980', '$1250', '$370', '$1800', '$540', '$1120', '$760']
            ).map((v, i) =>
            <span key={i} style={{ fontWeight: 600, color: "rgb(78, 201, 45)" }}>{v}</span>
            )}
          </div>
        </div>
        <span style={{ color: 'var(--green)', flexShrink: 0, display: 'flex', alignItems: 'center', gap: 6 }}>
          <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--green)', boxShadow: '0 0 6px var(--green)' }} />
          LIVE
        </span>
      </div>
      <style>{`
        @keyframes marquee-income {
          0%   { transform: translateX(0); }
          100% { transform: translateX(-33.333%); }
        }
      `}</style>
    </section>);

}

// --- VARIANT 2: BOLD — огромный заголовок-монолит сверху, композиция снизу ---
function HeroBold() {
  return (
    <section style={{ position: 'relative', padding: '40px 40px 80px' }} className="grid-bg">
      <div style={{ position: 'absolute', top: 80, right: '15%', width: 700, height: 700,
        background: 'radial-gradient(circle, rgba(124, 92, 255,0.18) 0%, transparent 60%)', pointerEvents: 'none' }} />
      <div style={{ position: 'absolute', top: 300, left: '-5%', width: 600, height: 600,
        background: 'radial-gradient(circle, rgba(62,224,138,0.10) 0%, transparent 60%)', pointerEvents: 'none' }} />

      <div style={{ maxWidth: 1440, margin: '0 auto', position: 'relative' }}>
        {/* Meta row */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 32, flexWrap: 'wrap' }}>
          <Kbd small tone="yellow">NEW</Kbd>
          <span className="mono" style={{ fontSize: 12, color: 'var(--fg-dim)' }}>vibecode/autоmatizator.mdx</span>
          <span style={{ width: 4, height: 4, borderRadius: '50%', background: 'var(--fg-mute)' }} />
          <span className="mono" style={{ fontSize: 12, color: 'var(--fg-dim)' }}>поток #2 · 7 мест из 10</span>
          <span style={{ flex: 1 }} />
          <span className="mono" style={{ fontSize: 11, color: 'var(--fg-mute)' }}>scroll ↓ or press</span>
          <Kbd small>Space</Kbd>
        </div>

        {/* Mega heading */}
        <h1 className="display" style={{
          fontSize: 'clamp(60px, 10vw, 180px)', lineHeight: 0.88,
          margin: '0 0 40px', fontWeight: 700,
          letterSpacing: '-0.04em'
        }}>
          <span style={{ display: 'block' }}>INTGRTR 2.0</span>
          <span style={{ display: 'block', position: 'relative' }}>
            <span style={{
              background: 'linear-gradient(90deg, var(--yellow) 0%, #ff9d0a 100%)',
              WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent'
            }}>NEW&nbsp;LEVEL</span>
            <span style={{
              color: 'var(--blue)', fontFamily: 'Manrope,sans-serif',
              fontSize: '0.4em', verticalAlign: 'super', marginLeft: 12
            }}>&lt;/&gt;</span>
          </span>
        </h1>

        {/* Three-column: expert | subtitle/cta | code */}
        <div className="hero-bold-grid">
          {/* Expert */}
          <div>
            <ExpertPhoto size={360} style={{ width: '100%', height: 360 }} />
          </div>

          {/* Center — subtitle + CTA */}
          <div style={{
            background: 'var(--bg-1)',
            border: '1px solid var(--line)',
            borderRadius: 16,
            padding: '28px 32px',
            display: 'flex', flexDirection: 'column',
            position: 'relative', overflow: 'hidden'
          }}>
            <div style={{
              position: 'absolute', inset: 0,
              background: 'radial-gradient(circle at 80% 0%, rgba(124, 92, 255,0.10) 0%, transparent 50%)',
              pointerEvents: 'none'
            }} />
            <div className="mono" style={{ fontSize: 11, color: 'var(--fg-mute)', marginBottom: 14, letterSpacing: '.1em' }}>
              // README.md
            </div>
            <p style={{
              fontSize: 'clamp(18px, 1.6vw, 24px)', lineHeight: 1.45,
              color: 'var(--fg)', margin: '0 0 auto', fontWeight: 500,
              position: 'relative'
            }}>
              Получи самый востребованный навык <span style={{
                background: 'linear-gradient(180deg, transparent 60%, rgba(124, 92, 255,.30) 60%)',
                padding: '0 2px'
              }}>автоматизаций через вайбкодинг</span> и зарабатывай на этом <span className="mono" style={{
                background: 'var(--yellow)', color: '#0a0a0b',
                padding: '2px 10px', borderRadius: 6, fontWeight: 700,
                whiteSpace: 'nowrap'
              }}>от $1000</span>, без знаний программирования.
            </p>

            <div style={{ display: 'flex', flexDirection: 'column', gap: 12, marginTop: 28, position: 'relative' }}>
              <CTAButton tone="yellow" size="xl" block>Начать обучение</CTAButton>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, justifyContent: 'center', color: 'var(--fg-mute)' }} className="mono">
                <span style={{ fontSize: 12 }}>горячая клавиша</span>
                <Kbd small>⌘</Kbd><Kbd small>⏎</Kbd>
              </div>
            </div>
          </div>

          {/* Code column */}
          <div style={{
            background: 'var(--bg-1)', border: '1px solid var(--line)',
            borderRadius: 16, overflow: 'hidden',
            display: 'flex', flexDirection: 'column'
          }}>
            <div style={{
              padding: '10px 14px', borderBottom: '1px solid var(--line)',
              display: 'flex', gap: 8, alignItems: 'center',
              background: 'var(--bg-2)'
            }}>
              <div style={{ width: 8, height: 8, borderRadius: '50%', background: '#ff5f57' }} />
              <div style={{ width: 8, height: 8, borderRadius: '50%', background: '#febc2e' }} />
              <div style={{ width: 8, height: 8, borderRadius: '50%', background: '#28c840' }} />
              <span className="mono" style={{ fontSize: 11, color: 'var(--fg-mute)', marginLeft: 8 }}>your_first_project.vibe</span>
            </div>
            <div className="mono" style={{ fontSize: 13, lineHeight: '22px', padding: '14px 0', flex: 1 }}>
              <CodeLine n={1}><span style={syn.cmt}>/* твой путь в автоматизацию */</span></CodeLine>
              <CodeLine n={2}><span style={syn.kw}>import</span> <span style={syn.var}>{'{ agent, money }'}</span> <span style={syn.kw}>from</span> <span style={syn.str}>'vibecode'</span></CodeLine>
              <CodeLine n={3}>&nbsp;</CodeLine>
              <CodeLine n={4} hl><span style={syn.kw}>const</span> <span style={syn.var}>you</span> = <span style={syn.fn}>newLevel</span>({'{'}</CodeLine>
              <CodeLine n={5} indent={1}><span style={syn.prop}>skill</span>: <span style={syn.str}>'vibe-coding'</span>,</CodeLine>
              <CodeLine n={6} indent={1}><span style={syn.prop}>experience</span>: <span style={syn.num}>0</span>, <span style={syn.cmt}>// любой уровень</span></CodeLine>
              <CodeLine n={7} indent={1}><span style={syn.prop}>goal</span>: <span style={syn.y}>'$1000+/mo'</span></CodeLine>
              <CodeLine n={8}>{'}'})</CodeLine>
              <CodeLine n={9}>&nbsp;</CodeLine>
              <CodeLine n={10}><span style={syn.kw}>await</span> you.<span style={syn.fn}>ship</span>()</CodeLine>
              <CodeLine n={11}><span style={syn.cmt}>→ </span><span style={{ color: 'var(--green)' }}>✓ first client in 2 weeks</span></CodeLine>
            </div>
            <div style={{
              padding: '10px 14px', borderTop: '1px solid var(--line)',
              display: 'flex', alignItems: 'center', gap: 12,
              background: 'var(--bg-2)',
              fontFamily: 'Manrope,sans-serif', fontSize: 11, color: 'var(--fg-mute)'
            }}>
              <span style={{ color: 'var(--green)' }}>●</span>
              <span>compiled successfully</span>
              <span style={{ marginLeft: 'auto', color: 'var(--yellow)' }}>+$1200 avg</span>
            </div>
          </div>
        </div>

        {/* Bottom: stats + marquee */}
        <div className="hero-bold-stats">
          {[
          ['1000+', 'учеников выпустили'],
          ['$500', 'средний чек на первом проекте'],
          ['17', 'модулей · от нуля до продаж'],
          ['12 мес', 'доступа и поддержки']].
          map(([n, l], i) =>
          <div key={i} style={{
            padding: '22px 24px',
            borderRight: i < 3 ? '1px solid var(--line)' : 'none',
            background: i === 0 ? 'rgba(124, 92, 255,0.06)' : 'transparent'
          }}>
              <div className="display" style={{
              fontSize: 36, fontWeight: 700,
              color: i === 0 ? 'var(--yellow)' : i === 1 ? 'var(--fg)' : 'var(--fg)',
              lineHeight: 1, marginBottom: 8
            }}>{n}</div>
              <div className="mono" style={{ fontSize: 11, color: 'var(--fg-mute)', letterSpacing: '.08em' }}>{l}</div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

Object.assign(window, { HeroClassic, HeroBold, ExpertPhoto, CodeLine, syn });