// FAQ + финальный CTA + футер

const TG_LINK =
<a href="https://t.me/ai_mng" target="_blank" rel="noopener noreferrer"
style={{ color: 'var(--yellow)', textDecoration: 'underline', textUnderlineOffset: '3px' }}>@ai_mng</a>;


const FAQ = [
{
  q: 'В каком формате будут уроки?',
  a: 'Ты получишь доступ к платформе с уроками в записи — смотри в любое удобное время, пересматривай сколько нужно. Групповые созвоны проходят онлайн раз в две недели, записи приходят в чат. На про- и vip-тарифах есть личная обратная связь по твоим работам — присылаешь, получаешь разбор.'
},
{
  q: 'На какое время у меня будет доступ?',
  a: '12 месяцев с момента старта — ко всем урокам, материалам и чату потока. За это время ты успеешь пройти программу 2–3 раза, если захочешь возвращаться к сложным модулям. На vip-тарифе доступ бессрочный.'
},
{
  q: 'Если я новичок и никогда не писал код — мне подойдёт?',
  a: 'Да, программа построена с нуля. В m01 мы ставим софт и знакомимся с агентом, в m02 учимся ему правильно объяснять задачи. Кода ты руками писать не будешь — ты учишься управлять моделью, а не печатать символы. Главное условие — умение пользоваться компьютером и желание разбираться. Никакой математики, никаких алгоритмов.'
},
{
  q: 'А если я уже опытный — не будет ли скучно?',
  a: 'Не будет. Модули с m12 (vibecode-pro) — про продвинутую сборку AI-агентов, интеграции с CRM, базы знаний, мультиязычные сценарии. Это уровень, на котором сейчас не работает 90% разработчиков. Плюс — на vip-тарифе мы строим программу под твой опыт: если базу ты знаешь, мы пропускаем m01–m05 и идём сразу в продвинутые модули и стратегию масштабирования.'
},
{
  q: 'Из каких стран есть оплата и можно ли в рассрочку?',
  a: 'Оплата — из любой страны мира. Рассрочка 0% × 12–24 месяца через банки-партнёры доступна в России, Казахстане, Беларуси. Для остального мира (США, ЕС, ОАЭ, Узбекистан, Украина, Кыргызстан, Грузия, Армения и др.) — внутренняя рассрочка от школы до 3 месяцев в USD/EUR, без банков и скоринга. Оформление заявки — 5 минут онлайн.'
},
{
  q: 'Сколько ещё нужно будет вложений кроме курса?',
  a: 'Минимум. Подписка на Claude — $20/мес. Хостинг для первых проектов — бесплатный (Vercel, Railway free tier). Домен по желанию — $10–15 в год. Итого: $20–30 в месяц на инструменты. Ни компьютера мощного, ни лицензий, ни платного софта. Всё, что нужно для первых клиентов — ты можешь запустить в первый месяц обучения.'
},
{
  q: 'А вдруг через год AI станет настолько умным, что эта профессия уйдёт?',
  a: 'Наоборот. Чем мощнее становятся модели — тем больше людей и компаний хотят их встроить в свои процессы, но сами не знают как. Ты учишься быть переводчиком между бизнесом и AI: понимать задачу клиента, разбивать на шаги, собирать решение через агента. Это навык, который дорожает, а не дешевеет. Программа обновляется каждый поток — мы добавляем то, что появилось в индустрии за последние месяцы.'
},
{
  q: 'Сколько времени в неделю это займёт?',
  a: 'Комфортный темп — 5–7 часов в неделю: 2–3 часа на уроки и 3–4 часа на практику. Если хочешь идти быстрее — можно вкладывать 10–12 часов и пройти программу за 2–2.5 месяца вместо 4. Медленнее тоже можно — доступ 12 месяцев, у тебя есть время. Большинство учеников учатся параллельно с основной работой.'
},
{
  q: 'А если я не найду клиентов после курса?',
  a: 'В m11 — целый модуль про поиск клиентов и продажи. Где искать, что писать, как считать чек, как вести переговоры. На про- и vip-тарифах куратор разбирает твою воронку и первые сделки — помогает докрутить оффер, скрипты, цены. В работах учеников ты видишь реальные кейсы: ребята находят клиентов через свой telegram, instagram, kwork, upwork, через знакомых. Ниша широкая — у любого малого бизнеса сейчас задача "встроить AI", и они готовы платить.'
},
{
  q: 'Чем это отличается от других курсов по AI и no-code?',
  a: 'Три вещи. Первое: программа фокусируется не на одном инструменте (как «курс по make» или «курс по zapier»), а на подходе — ты учишься собирать что угодно через диалог с моделью. Второе: поток на 10 человек, а не 500 — каждого видно, у каждого есть обратная связь. Третье: к концу программы у тебя в портфолио собранный с нуля проект, который можно показывать клиентам и который реально работает в интернете.'
},
{
  q: 'Можно посмотреть один урок или фрагмент бесплатно?',
  a: <>Да. Напиши менеджеру в telegram — {TG_LINK} — пришлём демо-урок из m02 (про общение с агентом) и пример практического задания. Так ты поймёшь формат и стиль до того, как принять решение.</>
}];


function FAQItem({ item, i, open, onToggle }) {
  return (
    <div className="faq-item" style={{
      border: '1px solid var(--line)',
      borderRadius: 12,
      background: open ? 'var(--bg-1)' : 'transparent',
      overflow: 'hidden',
      transition: 'background .2s'
    }}>
      <button
        onClick={onToggle}
        style={{
          width: '100%',
          display: 'flex', alignItems: 'center', gap: 16,
          padding: '18px 22px',
          background: 'transparent', border: 'none', color: 'var(--fg)',
          cursor: 'pointer', textAlign: 'left',
          transition: 'background .15s'
        }}
        onMouseEnter={(e) => e.currentTarget.style.background = 'rgba(124, 92, 255,0.06)'}
        onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}>
        
        <span className="mono" style={{ fontSize: 12, color: open ? 'var(--yellow)' : 'var(--fg-mute)', minWidth: 28 }}>
          {String(i + 1).padStart(2, '0')}
        </span>
        <span className="display q" style={{ fontSize: 22, fontWeight: 600, flex: 1, letterSpacing: '-0.01em' }}>{item.q}</span>
        <Kbd small tone={open ? 'yellow' : 'default'}>{open ? '−' : '+'}</Kbd>
      </button>
      {open &&
      <div className="a" style={{
        padding: '0 22px 20px 66px',
        lineHeight: 1.6, color: 'var(--fg-dim)', textWrap: 'pretty', fontSize: "18px"
      }}>
          {item.a}
          <div style={{ marginTop: 14, fontSize: 18, color: 'var(--fg-mute)' }}>
            уточнить условия → <a href="https://t.me/ai_mng" target="_blank" rel="noopener noreferrer" style={{ color: 'var(--yellow)', textDecoration: 'underline', textUnderlineOffset: '3px' }}>@ai_mng</a>
          </div>
        </div>
      }
    </div>);

}

function FAQSection() {
  const [open, setOpen] = React.useState(0);
  return (
    <section id="faq" style={{ padding: '40px 40px 60px' }}>
      <SectionLabel id="05_FAQ" title="Частые вопросы" />
      <div style={{ maxWidth: 980, margin: '0 auto', display: 'flex', flexDirection: 'column', gap: 12 }}>
        {FAQ.map((f, i) =>
        <FAQItem
          key={i} i={i} item={f}
          open={open === i}
          onToggle={() => setOpen(open === i ? -1 : i)} />

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

}

// Keycap 1:1 with reference photo: pillow-shape white keys with a soft drop
// shadow underneath (the key looks like it's floating above the board),
// label centered, matte face with a gentle top-to-bottom gradient.
// The orange spacebar uses the same geometry but in a warm red-orange.
function KeyCap({ c, label, width = 64, height = 64, orange, onClick, href, glow, glowDelay = 0, forcePressed = false, autoGlow = false }) {
  const [pressed, setPressed] = React.useState(false);
  const [hover, setHover] = React.useState(false);

  const isOrange = !!orange;
  const text = label || c || '';
  const isPressed = pressed || forcePressed;
  const letterGlow = glow || autoGlow;

  // Palette — frosted glass keycaps; orange = yellow highlight button
  const faceGrad = isOrange ?
  'linear-gradient(180deg, rgba(255,225,70,0.92) 0%, rgba(255,200,20,0.95) 55%, rgba(220,160,10,0.98) 100%)' :
  'linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.10) 55%, rgba(255,255,255,0.06) 100%)';
  const textColor = isOrange ? '#1a1200' : letterGlow ? '#3ee08a' : '#f2f2f4';
  const radius = Math.min(width, height) * 0.28;

  const click = (e) => {
    setPressed(true);
    setTimeout(() => setPressed(false), 140);
    if (onClick) onClick(e);
    if (href) {
      if (href.startsWith('#')) {
        const el = document.querySelector(href);
        if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
      } else {
        window.open(href, '_blank', 'noopener');
      }
    }
  };

  const translate = isPressed ? 3 : hover ? 2 : 0;
  // hover shadow compression matches real keyboard feel
  const shadowCompress = isPressed ? 0.4 : hover ? 0.6 : 1;

  // Text sizing: smaller for single letters (they live on a smaller area), larger for labels
  const fontSize = label ?
  Math.min(height * 0.26, 17) :
  Math.min(height * 0.24, 15);

  return (
    <div
      onMouseDown={() => setPressed(true)}
      onMouseUp={() => setPressed(false)}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => {setHover(false);setPressed(false);}}
      onClick={click}
      role="button"
      aria-label={text}
      style={{
        position: 'relative',
        width, height,
        flexShrink: 0,
        cursor: 'pointer',
        userSelect: 'none'
      }}>
      {/* Soft drop shadow pool under the key — gives the 'floating pillow' look */}
      <div style={{
        position: 'absolute',
        left: width * 0.04,
        right: width * 0.04,
        top: height * 0.55,
        bottom: -height * 0.18 * shadowCompress,
        borderRadius: radius,
        background: 'radial-gradient(50% 60% at 50% 40%, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 70%)',
        filter: `blur(${6 * shadowCompress}px)`,
        opacity: pressed ? 0.4 : hover ? 0.6 : 0.85,
        transform: `translateY(${pressed ? 2 : hover ? 1 : 0}px) scaleY(${shadowCompress})`,
        transformOrigin: 'top center',
        transition: 'opacity .15s, transform .12s, filter .12s, bottom .12s',
        zIndex: 0
      }} />

      {/* Key face — frosted glass */}
      <div style={{
        position: 'absolute', inset: 0,
        borderRadius: radius,
        background: faceGrad,
        backdropFilter: 'blur(14px) saturate(1.2)',
        WebkitBackdropFilter: 'blur(14px) saturate(1.2)',
        border: isOrange ?
        '1px solid rgba(255,235,120,0.7)' :
        '1px solid rgba(255,255,255,0.28)',
        boxShadow: isOrange ?
        `
              inset 0 1.5px 0 rgba(255,255,255,0.6),
              inset 0 -3px 0 rgba(120,80,0,0.3),
              inset 0 -10px 14px -6px rgba(120,80,0,0.25),
              0 8px 28px -8px rgba(255,210,40,0.6)
            ` :
        `
              inset 0 1.5px 0 rgba(255,255,255,0.45),
              inset 0 -2px 0 rgba(0,0,0,0.15),
              inset 0 -10px 14px -6px rgba(0,0,0,0.12),
              0 6px 20px -8px rgba(0,0,0,0.4)
            `,
        transform: `translateY(${translate}px)`,
        transition: 'transform .12s',
        zIndex: 2,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        padding: '0 10px',
        overflow: 'hidden'
      }}>
        {/* specular highlight streak */}
        <div style={{
          position: 'absolute',
          top: 0, left: 0, right: 0,
          height: '45%',
          background: 'linear-gradient(180deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 100%)',
          pointerEvents: 'none'
        }} />
        <span
          className={glow ? 'kb-glow-letter' : ''}
          style={{
            position: 'relative',
            fontFamily: 'Manrope,sans-serif',
            fontWeight: isOrange ? 700 : 500,
            fontSize,
            letterSpacing: label ? isOrange ? '.06em' : '-0.005em' : '0.01em',
            color: textColor,
            whiteSpace: 'nowrap',
            lineHeight: 1,
            transition: 'color .18s, text-shadow .18s',
            textShadow: isOrange ?
            'none' :
            letterGlow ?
            '0 0 8px rgba(62,224,138,0.7), 0 0 14px rgba(62,224,138,0.4)' :
            'none',
            animationDelay: glow ? `${glowDelay}ms` : undefined
          }}>{text}</span>
      </div>
    </div>);

}

function Keyboard() {
  // Responsive sizing
  const [scale, setScale] = React.useState(1);
  React.useEffect(() => {
    const compute = () => {
      const w = window.innerWidth;
      if (w < 480) setScale(0.55);else
      if (w < 768) setScale(0.72);else
      if (w < 1100) setScale(0.85);else
      setScale(1);
    };
    compute();
    window.addEventListener('resize', compute);
    return () => window.removeEventListener('resize', compute);
  }, []);

  // Auto-type animation: types "intgrtr vibecd 2.0" char by char in a terminal
  // line above, and simultaneously lights up the corresponding key on the keyboard.
  // Letters scattered across the keyboard — no duplicates.
  // 2, . and 0 each get their own key.
  const row1 = ['R', 'T', 'I', 'N', 'G', 'V', 'B'];
  const row2 = ['E', 'C', 'D', '2', '.', '0'];

  // Typing order "intgrtr vibecd 2.0" mapped to unique key positions.
  const sequence = React.useMemo(() => [
  { ch: 'i', id: 'r1-2' },
  { ch: 'n', id: 'r1-3' },
  { ch: 't', id: 'r1-1' },
  { ch: 'g', id: 'r1-4' },
  { ch: 'r', id: 'r1-0' },
  { ch: 't', id: 'r1-1' },
  { ch: 'r', id: 'r1-0' },
  { ch: ' ', id: null },
  { ch: 'v', id: 'r1-5' },
  { ch: 'i', id: 'r1-2' },
  { ch: 'b', id: 'r1-6' },
  { ch: 'e', id: 'r2-0' },
  { ch: 'c', id: 'r2-1' },
  { ch: 'd', id: 'r2-2' },
  { ch: ' ', id: null },
  { ch: '2', id: 'r2-3' },
  { ch: '.', id: 'r2-4' },
  { ch: '0', id: 'r2-5' }],
  []);

  const [pressedSet, setPressedSet] = React.useState(() => new Set());
  const [typed, setTyped] = React.useState('');

  React.useEffect(() => {
    let cancelled = false;
    let timers = [];
    const clearAll = () => {timers.forEach(clearTimeout);timers = [];};
    const addTimer = (fn, ms) => {const t = setTimeout(fn, ms);timers.push(t);return t;};

    const pressKey = (id) => {
      if (!id) return;
      setPressedSet((s) => {const n = new Set(s);n.add(id);return n;});
      addTimer(() => {
        setPressedSet((s) => {const n = new Set(s);n.delete(id);return n;});
      }, 180 + Math.random() * 80);
    };

    const loop = () => {
      if (cancelled) return;
      setTyped('');
      let i = 0;
      const typeNext = () => {
        if (cancelled) return;
        if (i >= sequence.length) {
          // full string typed — pause, then clear and loop
          addTimer(() => {
            if (cancelled) return;
            setTyped('');
            addTimer(loop, 500);
          }, 1400);
          return;
        }
        const step = sequence[i++];
        setTyped((t) => t + step.ch);
        pressKey(step.id);
        // pacing: space is a tiny pause, regular char = fast, "2.0" slightly longer
        const delay = step.ch === ' ' ? 160 :
        step.ch === '2.0' ? 260 :
        90 + Math.random() * 60;
        addTimer(typeNext, delay);
      };
      typeNext();
    };

    const start = addTimer(loop, 400);
    return () => {cancelled = true;clearAll();};
    // eslint-disable-next-line
  }, []);

  const kb = (n) => Math.round(n * scale);

  const keyH = kb(62);
  const gap = kb(8);
  const unit = kb(62); // standard 1u key width

  // Actions
  const scrollTo = (sel) => () => {
    const el = document.querySelector(sel);
    if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
  };
  const openTG = () => window.open('https://t.me/ai_mng', '_blank', 'noopener');

  // Layout:
  // Row 1: 7 буквенных клавиш — INTGRTR
  // Row 2: 6 букв VIBECD + "2.0" (все ширины unit)
  // Row 3: ПРОГРАММА (wide) + НАЧАТЬ (orange, остаток)

  const totalRow1 = unit * 7 + gap * 6;
  const row3Wide = unit * 2.5 + gap * 1.5;
  const row3Huge = totalRow1 - row3Wide - gap;

  // Terminal line dimensions — match keyboard width
  const kbWidth = totalRow1 + kb(44); // inner width + horizontal padding (22*2)

  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: kb(18), width: 'fit-content', margin: '0 auto' }}>

    {/* Terminal line */}
    <div style={{
        width: kbWidth,
        fontFamily: 'JetBrains Mono, ui-monospace, monospace',
        fontSize: Math.max(13, kb(15)),
        lineHeight: 1.4,
        color: '#e6e6e6',
        background: 'rgba(0,0,0,0.55)',
        border: '1px solid rgba(255,255,255,0.12)',
        backdropFilter: 'blur(12px)',
        WebkitBackdropFilter: 'blur(12px)',
        borderRadius: kb(10),
        padding: `${kb(12)}px ${kb(16)}px`,
        boxShadow: '0 10px 30px -10px rgba(0,0,0,0.5)',
        display: 'flex', alignItems: 'center', gap: 10,
        whiteSpace: 'nowrap', overflow: 'hidden'
      }}>
      <span style={{ color: '#3ee08a' }}>$</span>
      <span style={{ color: '#fff' }}>{typed}</span>
      <span className="kb-caret" style={{
          display: 'inline-block', width: '0.55em', height: '1em',
          background: '#3ee08a', marginLeft: 2,
          boxShadow: '0 0 8px rgba(62,224,138,0.6)'
        }} />
    </div>

    <div style={{
        position: 'relative',
        background: 'linear-gradient(180deg, rgba(40,40,44,0.72) 0%, rgba(24,24,28,0.78) 100%)',
        padding: `${kb(22)}px ${kb(22)}px ${kb(26)}px`,
        borderRadius: kb(22),
        backdropFilter: 'blur(20px) saturate(1.1)',
        WebkitBackdropFilter: 'blur(20px) saturate(1.1)',
        boxShadow: `
        0 1.5px 0 rgba(255,255,255,0.18) inset,
        0 -2px 0 rgba(0,0,0,0.25) inset,
        0 30px 60px -20px rgba(0,0,0,0.55),
        0 60px 100px -40px rgba(0,0,0,0.45)
      `,
        border: '1px solid rgba(255,255,255,0.18)',
        width: 'fit-content',
        margin: '0 auto'
      }}>
      {/* inner rim */}
      <div style={{
          position: 'absolute', inset: kb(8),
          borderRadius: kb(16),
          border: '1px solid rgba(255,255,255,0.1)',
          pointerEvents: 'none'
        }} />

      {/* Row 1 */}
      <div style={{ display: 'flex', gap, marginBottom: gap }}>
        {row1.map((ch, i) => {
            const id = `r1-${i}`;
            const down = pressedSet.has(id);
            return <KeyCap key={id} c={ch} width={unit} height={keyH}
            forcePressed={down}
            autoGlow={down} />;
          })}
      </div>

      {/* Row 2 — offset slightly right like a real keyboard stagger */}
      <div style={{ display: 'flex', gap, marginBottom: gap, paddingLeft: unit / 2 + gap / 2 }}>
        {row2.map((ch, i) => {
            const id = `r2-${i}`;
            const down = pressedSet.has(id);
            return <KeyCap key={id} c={ch}
            width={unit} height={keyH}
            forcePressed={down}
            autoGlow={down} />;
          })}
      </div>

      {/* Row 3 — action keys */}
      <div style={{ display: 'flex', gap }}>
        <KeyCap label="ПРОГРАММА" width={row3Wide} height={keyH} onClick={scrollTo('#modules')} />
        <KeyCap label="ЗАЛЕТАЮ НА ОБУЧ" width={row3Huge} height={keyH} orange onClick={openTG} />
      </div>
    </div>
  </div>);

}

function FinalCTA() {
  const openTG = () => window.open('https://t.me/ai_mng', '_blank', 'noopener');
  return (
    <section style={{ padding: '80px 40px 120px' }}>
      <div style={{
        maxWidth: 720, margin: '0 auto',
        position: 'relative'
      }}>

        <div className="final-cta-grid" style={{ position: 'relative', padding: '40px 20px', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 48, textAlign: 'center' }}>
          <h2 className="display final-cta-h2" style={{
            fontSize: '73.392px', margin: '0', fontWeight: 700, lineHeight: 0.95, letterSpacing: '-0.02em'
          }}>
            ты со мной?
          </h2>

          <CTAButton tone="yellow" size="xl" onClick={openTG}>залетаю на обуч</CTAButton>
        </div>
      </div>
    </section>);

}

function Footer() {
  const linkStyle = {
    color: 'var(--fg-dim)',
    textDecoration: 'underline',
    textDecorationColor: 'var(--line-2)',
    textDecorationThickness: '1px',
    textUnderlineOffset: '3px',
    transition: 'color .15s, text-decoration-color .15s'
  };
  const onHover = (e, on) => {
    e.currentTarget.style.color = on ? 'var(--yellow)' : 'var(--fg-dim)';
    e.currentTarget.style.textDecorationColor = on ? 'var(--yellow)' : 'var(--line-2)';
  };
  return (
    <footer style={{
      borderTop: '1px solid var(--line)',
      background: 'var(--bg-1)',
      fontFamily: 'Manrope,sans-serif'
    }}>
      {/* Legal notice */}
      <div className="legal" style={{
        padding: '20px 40px 16px',
        fontSize: 12, lineHeight: 1.55, color: 'var(--fg-mute)',
        maxWidth: 1100, textWrap: 'pretty'
      }}>
        Переходя по ссылкам вы даёте согласие на обработку своих персональных данных,<br />
        соглашаясь с{' '}
        <a href="https://vibeintgrtr.tilda.ws/page136190086.html" target="_blank" rel="noopener noreferrer"
        style={linkStyle}
        onMouseEnter={(e) => onHover(e, true)}
        onMouseLeave={(e) => onHover(e, false)}>
          Политикой в отношении Персональных данных</a>
        {' '}и принимая{' '}
        <a href="https://vibeintgrtr.tilda.ws/page136198736.html" target="_blank" rel="noopener noreferrer"
        style={linkStyle}
        onMouseEnter={(e) => onHover(e, true)}
        onMouseLeave={(e) => onHover(e, false)}>
          Оферту оказания услуг</a>.
      </div>

      {/* Meta row */}
      <div style={{
        borderTop: '1px dashed var(--line)',
        padding: '18px 40px 22px',
        display: 'flex', alignItems: 'center', gap: 24, flexWrap: 'wrap',
        fontSize: 12, color: 'var(--fg-mute)'
      }}>
        <span style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <span style={{
            width: 20, height: 20, borderRadius: 5,
            background: 'var(--yellow)', color: '#0a0a0b',
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            fontWeight: 700
          }}>⌨</span>
          vibecode/new-level · v14.0
        </span>
        <span>© 2026 Алексей & Co</span>
        <span style={{ flex: 1 }} />
        <a href="https://t.me/alexcroiss" target="_blank" rel="noopener noreferrer"
        style={linkStyle}
        onMouseEnter={(e) => onHover(e, true)}
        onMouseLeave={(e) => onHover(e, false)}>
          telegram</a>
        <a href="https://instagram.com/alexcroiss" target="_blank" rel="noopener noreferrer"
        style={linkStyle}
        onMouseEnter={(e) => onHover(e, true)}
        onMouseLeave={(e) => onHover(e, false)}>
          instagram</a>
        <a href="https://www.youtube.com/@alex_croiss" target="_blank" rel="noopener noreferrer"
        style={linkStyle}
        onMouseEnter={(e) => onHover(e, true)}
        onMouseLeave={(e) => onHover(e, false)}>
          youtube</a>
        <span style={{ color: 'var(--green)' }}>● все системы работают</span>
      </div>
    </footer>);

}

function StatusBar() {
  const [t, setT] = React.useState('—');
  React.useEffect(() => {
    const id = setInterval(() => {
      const d = new Date();
      setT(`${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}:${String(d.getSeconds()).padStart(2, '0')}`);
    }, 1000);
    return () => clearInterval(id);
  }, []);
  return (
    <div style={{
      position: 'fixed', bottom: 0, left: 0, right: 0, zIndex: 40,
      height: 26,
      display: 'flex', alignItems: 'center', gap: 14,
      padding: '0 14px',
      background: 'var(--yellow)',
      color: '#0a0a0b',
      fontFamily: 'Manrope,sans-serif', fontSize: 11, fontWeight: 600
    }}>
      <span>● READY</span>
      <span style={{ opacity: .7 }}>|</span>
      <span>поток #2</span>
      <span style={{ opacity: .7 }}>|</span>
      <span>7/10 мест</span>
      <span style={{ opacity: .7 }}>|</span>
      <span>UTF-8</span>
      <span style={{ marginLeft: 'auto' }} className="statusbar-hide-mobile">Ln 1, Col 1</span>
      <span style={{ opacity: .7 }} className="statusbar-hide-mobile">|</span>
      <span style={{ marginLeft: 'auto' }} className="statusbar-time">{t}</span>
    </div>);

}

Object.assign(window, { FAQSection, FinalCTA, Footer, StatusBar });