// Сайт · Главная — Hero, бегущая лента, «О нас» и Витрина тарифов.
// Каталог теперь — отдельная страница «Сайт - Каталог.html»; кнопки
// витрины ссылаются туда напрямую.

function AppHome() {
  const palette = {
    '--bg': '#f5ead4', '--ink': '#1a1a1e',
    '--accent': '#c96848', '--sub': '#e8ddc4',
  };

  const isMobile = window.useIsMobile ? window.useIsMobile() : false;
  const [menuOpen, setMenuOpen] = React.useState(false);

  // На мобиле шапка ниже (бургер-кнопка), на десктопе — как было.
  const NAV_H = isMobile ? 72 : 96;
  const SECTION_H = `calc(100vh - ${NAV_H}px)`;
  const sidePad = isMobile ? 18 : 32;

  const scrollToId = (id) => {
    const el = document.getElementById(id);
    if (!el) return;
    const y = el.getBoundingClientRect().top + window.pageYOffset - NAV_H;
    window.scrollTo({ top: y, behavior: 'smooth' });
  };
  const scrollTop = () => window.scrollTo({ top: 0, behavior: 'smooth' });

  const navItems = [
    { l: 'услуги',      onClick: () => scrollToId('pricing') },
    { l: 'о нас',       onClick: () => scrollToId('philosophy') },
    { l: 'faq',         onClick: () => scrollToId('faq') },
    { l: 'контакты',    onClick: () => scrollToId('contacts') },
    { l: 'войти',       href: '/login' },
  ];

  // Скролл к секции при заходе по якорю (/#pricing, /#faq и т.п.).
  // Секции (Pricing/Faq/Contacts) монтирует babel-standalone асинхронно, поэтому
  // браузер обрабатывает якорь когда #root ещё пустой и остаётся вверху.
  // Здесь ждём появления элемента ретраями и скроллим один раз на загрузку.
  React.useEffect(() => {
    const hash = window.location.hash;
    const id = hash && hash.length > 1 ? hash.slice(1) : '';

    let cancelled = false;
    let timer = null;
    // Если пользователь сам начал прокручивать/взаимодействовать — отменяем
    // авто-скролл (программный smooth-scroll этих событий не вызывает).
    const userBail = () => { cancelled = true; };

    if (id) {
      window.addEventListener('wheel', userBail, { passive: true });
      window.addEventListener('touchstart', userBail, { passive: true });
      window.addEventListener('keydown', userBail);

      let attempts = 0;
      const attempt = () => {
        if (cancelled) return;
        if (document.getElementById(id)) { scrollToId(id); return; } // нашли → скролл один раз и стоп
        if (attempts < 30) { attempts += 1; timer = setTimeout(attempt, 100); } // ~3с ожидания
      };
      attempt();
    }

    // Опционально: клик по якорю, когда пользователь уже на главной.
    const onHashChange = () => {
      const h = window.location.hash;
      if (h && h.length > 1) scrollToId(h.slice(1));
    };
    window.addEventListener('hashchange', onHashChange);

    return () => {
      cancelled = true;
      if (timer) clearTimeout(timer);
      window.removeEventListener('wheel', userBail);
      window.removeEventListener('touchstart', userBail);
      window.removeEventListener('keydown', userBail);
      window.removeEventListener('hashchange', onHashChange);
    };
  }, []);

  return (
    <div style={{
      ...palette,
      background: 'var(--bg)', color: 'var(--ink)',
      fontFamily: 'Inter Tight,sans-serif', minHeight: '100%',
    }}>
      {/* NAV — шапка сайта */}
      <nav style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: isMobile ? '16px 18px' : '22px 32px', borderBottom: '2px solid var(--ink)',
        position: 'sticky', top: 0, background: 'var(--bg)', zIndex: 200,
      }}>
        <a href="#top"
          onClick={(e) => { e.preventDefault(); scrollTop(); setMenuOpen(false); }}
          style={{
            display: 'inline-flex', alignItems: 'baseline', lineHeight: 0.85,
            fontWeight: 900, fontSize: 26, letterSpacing: '-0.06em',
            color: 'inherit', textDecoration: 'none',
          }}>
          <span>S</span>
          <span style={{
            color: 'var(--accent)', fontFamily: 'Georgia,serif', fontStyle: 'italic',
            fontSize: 28, lineHeight: 0.7, marginTop: -1,
          }}>"</span>
          <span>MM</span>
        </a>

        {isMobile ? (
          // ── Бургер на мобиле ──
          <button onClick={() => setMenuOpen((v) => !v)} aria-label="Меню"
            style={{
              width: 44, height: 44, padding: 0, background: 'transparent',
              border: '2px solid var(--ink)', cursor: 'pointer',
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              color: 'var(--ink)',
            }}>
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round">
              {menuOpen
                ? <><path d="M6 6l12 12M18 6 6 18" /></>
                : <><path d="M4 7h16M4 12h16M4 17h16" /></>}
            </svg>
          </button>
        ) : (
          <>
            <div style={{
              display: 'flex', alignItems: 'center', gap: 34,
              fontFamily: 'JetBrains Mono,monospace', fontSize: 14, fontWeight: 700,
              letterSpacing: '0.18em', textTransform: 'uppercase',
            }}>
              {navItems.map((x) => (
                <a key={x.l} href={x.href || '#'}
                  onClick={x.onClick ? (e) => { e.preventDefault(); x.onClick(); } : undefined}
                  style={{
                    cursor: 'pointer', color: 'inherit', textDecoration: 'none',
                    transition: 'color .2s',
                  }}
                  onMouseOver={(e) => e.currentTarget.style.color = 'var(--accent)'}
                  onMouseOut={(e) => e.currentTarget.style.color = 'inherit'}
                >{x.l}</a>
              ))}
            </div>
            {window.MagnetBtn
              ? <window.MagnetBtn onClick={() => scrollToId('contacts')} style={{ fontSize: 13 }}>обсудить →</window.MagnetBtn>
              : (
                <button onClick={() => scrollToId('contacts')}
                  style={{
                    padding: '15px 24px',
                    background: 'var(--ink)', color: 'var(--bg)',
                    border: '2px solid var(--ink)', cursor: 'pointer',
                    fontFamily: 'JetBrains Mono,monospace', fontWeight: 700, fontSize: 13,
                    letterSpacing: '0.18em', textTransform: 'uppercase',
                  }}>обсудить →</button>
              )}
          </>
        )}
      </nav>

      {/* Выпадающее мобильное меню */}
      {isMobile && menuOpen && (
        <div style={{
          position: 'sticky', top: NAV_H, zIndex: 190,
          background: 'var(--bg)', borderBottom: '2px solid var(--ink)',
          display: 'flex', flexDirection: 'column',
          fontFamily: 'JetBrains Mono,monospace', fontWeight: 700, fontSize: 14,
          letterSpacing: '0.18em', textTransform: 'uppercase',
        }}>
          {navItems.map((x) => (
            <a key={x.l} href={x.href || '#'}
              onClick={(e) => {
                if (x.onClick) { e.preventDefault(); x.onClick(); }
                setMenuOpen(false);
              }}
              style={{
                padding: '16px 18px', color: 'inherit', textDecoration: 'none',
                borderTop: '1px solid rgba(26,26,30,0.12)',
              }}>{x.l}</a>
          ))}
          <button onClick={() => { scrollToId('contacts'); setMenuOpen(false); }}
            style={{
              margin: '14px 18px 18px', padding: '15px 22px',
              background: 'var(--ink)', color: 'var(--bg)',
              border: '2px solid var(--ink)', cursor: 'pointer',
              fontFamily: 'JetBrains Mono,monospace', fontWeight: 700, fontSize: 13,
              letterSpacing: '0.18em', textTransform: 'uppercase',
            }}>обсудить →</button>
        </div>
      )}

      {/* HERO */}
      <section id="top" style={{
        position: 'relative', padding: `40px ${sidePad}px`, minHeight: SECTION_H,
        display: 'flex', flexDirection: 'column', justifyContent: 'center', overflow: 'visible',
      }}>
        <div style={{ display: 'flex', gap: 14, marginBottom: 30 }}>
          <span style={{
            display: 'inline-block', padding: '6px 12px',
            border: '2px solid var(--ink)', transform: 'rotate(2deg)',
            fontFamily: 'JetBrains Mono,monospace', fontWeight: 700, fontSize: 10,
            letterSpacing: '0.2em', textTransform: 'uppercase',
          }}>● ai-команда на связи</span>
        </div>

        <h1 style={{
          fontWeight: 900, fontSize: 'clamp(64px, 10vw, 140px)', letterSpacing: '-0.04em',
          lineHeight: 0.95, textTransform: 'uppercase', margin: 0, maxWidth: 1100,
          textWrap: 'balance', paddingBottom: '0.05em',
        }}>
          Целое агентство.{' '}
          <span style={{
            fontFamily: 'Georgia,serif', fontStyle: 'italic', fontWeight: 400,
            textTransform: 'none', color: 'var(--accent)', letterSpacing: '-0.02em',
          }}>За подписку.</span>
        </h1>

        <div style={{
          marginTop: 36, display: 'flex', gap: isMobile ? 28 : 80, alignItems: 'flex-end', flexWrap: 'wrap',
        }}>
          <div style={{ maxWidth: 520, fontSize: isMobile ? 16 : 18, lineHeight: 1.5 }}>
            Стратеги, копирайтеры, дизайнеры, аналитики — теперь это одна AI-команда.
            Та же работа, та же логика — кратно дешевле.
          </div>
          <div style={{ display: 'flex', gap: 18 }}>
            {window.MagnetBtn
              ? <window.MagnetBtn onClick={() => scrollToId('pricing')}>запустить →</window.MagnetBtn>
              : null}
            {window.MagnetBtn
              ? <window.MagnetBtn onClick={() => scrollToId('philosophy')}
                  style={{ background: 'transparent', color: 'var(--ink)', border: '2px solid var(--ink)' }}>
                  как это работает
                </window.MagnetBtn>
              : null}
          </div>
        </div>
      </section>

      {/* Бегущая лента */}
      {window.Marquee && (
        <window.Marquee items={[
          'стратегия', 'брендбук', 'контент-план', 'тексты постов',
          'аналитика', 'аудит конкурентов', 'отчёты',
        ]} />
      )}

      {/* О нас */}
      <div id="philosophy">
        {window.Philosophy && <window.Philosophy minH={SECTION_H} />}
      </div>

      {/* Витрина тарифов */}
      {window.Pricing && <window.Pricing minH={SECTION_H} />}

      {/* FAQ */}
      {window.Faq && <window.Faq minH={SECTION_H} />}

      {/* Контакты */}
      {window.Contacts && <window.Contacts minH={SECTION_H} />}

      <style>{`
        html { scroll-behavior: smooth; }
        section[id], div[id] { scroll-margin-top: ${NAV_H}px; }
      `}</style>
    </div>
  );
}

window.AppHome = AppHome;