function Hero({ tweaks }) {
  const words = ['отзывами', 'звонками', 'обращениями', 'чатами', 'опросами'];
  const [wIdx, setWIdx] = React.useState(0);
  React.useEffect(() => {
    const id = setInterval(() => setWIdx(i => (i + 1) % words.length), 2500);
    return () => clearInterval(id);
  }, []);

  return (
    <section className="hero-section" style={{
      padding: '32px 0 40px',
      minHeight: 'calc(100vh - 68px)',
      background: 'var(--bg)',
      color: 'var(--ink)',
      position: 'relative',
      overflow: 'hidden',
      display: 'flex', alignItems: 'center',
    }}>
      <div className="container" style={{ position: 'relative', width: '100%' }}>
        <div className="hero-grid">

          {/* LEFT COLUMN: badge top / [title + subtitle + buttons] center / trust bottom */}
          <div className="hero-left">
            <div className="hero-badge">
              <a href="blog-feedly-2.html" className="hero-new-badge" style={{
                display: 'inline-flex', alignItems: 'center', gap: 10,
                fontSize: 12.5, color: 'var(--ink-2)', fontWeight: 500,
                cursor: 'pointer', textDecoration: 'none',
                transition: 'color 0.15s',
              }}>
                <span style={{
                  background: 'var(--accent)', color: '#fff', padding: '2px 8px',
                  borderRadius: 999, fontSize: 10.5, fontWeight: 600, letterSpacing: '0.04em',
                }}>НОВОЕ</span>
                <span className="hero-new-text">Фидли 2.0 — обновление, которое меняет всё</span>
                <svg className="hero-new-arrow" width="12" height="12" viewBox="0 0 12 12" style={{ transition: 'transform 0.2s' }}>
                  <path d="M3 6 L9 6 M6 3 L9 6 L6 9" stroke="currentColor" strokeWidth="1.6" fill="none" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
              </a>
            </div>

            <div className="hero-mid">
              <div className="hero-title">
                <h1 className="display" style={{
                  fontFamily: "'Martian Grotesk', 'Manrope', 'Space Grotesk', sans-serif",
                  fontSize: 46, lineHeight: '44px', fontWeight: 600,
                  letterSpacing: '-0.035em', margin: 0,
                }}>
                  Система управления<br />
                  клиентской связью<br />
                  <span style={{
                    display: 'inline-block', position: 'relative',
                    color: 'var(--accent)', fontWeight: 600,
                    verticalAlign: 'baseline',
                  }}>
                    <span key={wIdx} style={{
                      display: 'inline-block',
                      animation: 'hero-word-in 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both',
                    }}>
                      {words[wIdx]}
                    </span>
                  </span>
                </h1>
              </div>

              <div className="hero-text">
                <p style={{
                  fontFamily: "'Golos Text', 'Inter', sans-serif",
                  fontSize: 16, fontWeight: 400, lineHeight: 1.35, letterSpacing: 0,
                  maxWidth: 420, color: 'var(--muted)', margin: '24px 0 28px',
                }}>
                  Собирайте и анализируйте клиентскую обратную связь со всех источников,
                  получайте ценные инсайты и настраивайте ИИ-ответы.
                </p>
                <div className="hero-cta" style={{ display: 'flex', gap: 10 }}>
                  <a href="#contact" className="btn btn-primary">
                    Запросить демо
                    <svg width="12" height="12" viewBox="0 0 12 12"><path d="M3 6 L9 6 M6 3 L9 6 L6 9" stroke="currentColor" strokeWidth="1.6" fill="none" strokeLinecap="round" /></svg>
                  </a>
                  <a href="#" className="btn btn-ghost">
                    <svg width="12" height="12" viewBox="0 0 12 12"><polygon points="3,2 10,6 3,10" fill="currentColor" /></svg>
                    Посмотреть тур (2 мин)
                  </a>
                </div>
              </div>
            </div>

            <div className="hero-trust" style={{
              display: 'inline-flex', alignSelf: 'flex-start',
              alignItems: 'center', gap: 18,
              fontSize: 12.5, color: 'var(--ink-2)',
              flexWrap: 'wrap',
            }}>
              {['99.9% uptime SLA', 'ФЗ-152 и GDPR', 'Развёртывание за 7 дней'].map((t) => (
                <div key={t} style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                  <svg width="13" height="13" viewBox="0 0 14 14">
                    <path d="M2 7 L6 11 L12 3" stroke="var(--pos)" strokeWidth="1.8" fill="none" strokeLinecap="round" strokeLinejoin="round" />
                  </svg>
                  {t}
                </div>
              ))}
            </div>
          </div>

          {/* RIGHT COLUMN: photo with dashboard */}
          <div className="hero-photo" style={{
            position: 'relative',
            borderRadius: 20,
            overflow: 'hidden',
            backgroundColor: '#cfd9c6',
            backgroundImage: 'url(uploads/hero-bg.webp)',
            backgroundSize: 'cover',
            backgroundPosition: 'center',
            boxShadow: '0 30px 70px -30px rgba(0,0,0,0.25)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            padding: 44,
          }}>
            <div style={{ width: '92%' }}>
              {window.HeroDashboard && <window.HeroDashboard />}
            </div>
          </div>
        </div>
      </div>

      <style>{`
        @keyframes hero-word-in {
          0%   { opacity: 0; transform: translateY(0.5em); filter: blur(4px); }
          60%  { opacity: 1; filter: blur(0); }
          100% { opacity: 1; transform: translateY(0); filter: blur(0); }
        }
        .hero-new-badge:hover { color: var(--accent); }
        .hero-new-badge:hover .hero-new-text { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
        .hero-new-badge:hover .hero-new-arrow { transform: translateX(3px); }

        /* DESKTOP: 2-кол grid. Левая колонка — вертикальный flex: badge top,
           mid центрирован margin:auto, trust внизу. Правая — photo на всю высоту. */
        .hero-grid {
          display: grid;
          grid-template-columns: 0.9fr 1.1fr;
          gap: 56px;
          align-items: stretch;
          width: 100%;
        }
        .hero-left {
          display: flex; flex-direction: column;
          min-height: 100%;
        }
        .hero-mid { margin: auto 0; }
        .hero-photo {
          aspect-ratio: 16 / 17;
          max-height: calc(85vh - 132px);
        }

        /* MOBILE: разворачиваем .hero-left и .hero-mid в плоскую flex-колонку
           через display: contents — затем порядок задаём через order:
           badge → title → photo → text(subtitle+buttons) → trust */
        @media (max-width: 860px) {
          .hero-section {
            min-height: 0 !important;
            display: block !important;
            padding: 24px 0 40px !important;
          }
          .hero-grid {
            display: flex !important;
            flex-direction: column;
            gap: 18px;
          }
          .hero-left, .hero-mid { display: contents; }
          .hero-badge { order: 1; }
          .hero-title { order: 2; }
          .hero-photo {
            order: 3;
            aspect-ratio: auto !important; max-height: none !important;
            padding: 14px !important;
            margin: 4px auto 0 !important;
          }
          /* Дашборд в mockup'е — компактная мобильная версия (≈40% меньше функционально):
             прячем поисковую строку и две последние темы, сжимаем паддинги/шрифты. */
          .hero-photo .hd-search { display: none !important; }
          .hero-photo .hd-chrome { padding: 8px 12px !important; gap: 6px !important; }
          .hero-photo .hd-chrome .mono { font-size: 10px !important; margin-left: 6px !important; }
          .hero-photo .hd-chrome span[style*="width: 10"] { width: 8px !important; height: 8px !important; }
          .hero-photo .hd-chart { padding: 12px 14px 2px !important; }
          .hero-photo .hd-chart .display { font-size: 22px !important; }
          .hero-photo .hd-chart svg { height: 48px !important; }
          .hero-photo .hd-themes { padding: 10px 14px 12px !important; }
          .hero-photo .hd-row { padding: 7px 0 !important; }
          .hero-photo .hd-row[data-i="2"],
          .hero-photo .hd-row[data-i="3"] { display: none !important; }
          .hero-photo .hd-row > div > div:first-child { font-size: 12px !important; }
          .hero-photo .hd-row .mono { font-size: 11px !important; }
          .hero-text  { order: 4; }
          .hero-trust { order: 5; }

          .hero-title h1 {
            font-size: 32px !important;
            line-height: 1.05 !important;
            letter-spacing: -0.025em !important;
          }
          .hero-text p { margin: 0 0 22px !important; }
          .hero-cta { flex-direction: column !important; }
          .hero-cta .btn { justify-content: center; width: 100%; padding: 14px 22px !important; font-size: 15px !important; }
          .hero-trust { row-gap: 8px !important; font-size: 12px !important; color: var(--muted) !important; margin-top: 4px; }
        }
        @media (max-width: 420px) {
          .hero-title h1 { font-size: 28px !important; }
        }

        /* MOBILE TWEAKS: только мобилка — растянутый hero, фото уже и выше, без trust-чипов */
        @media (max-width: 860px) {
          .hero-section {
            min-height: calc(100vh - 68px) !important;
            display: flex !important;
            align-items: stretch !important;
          }
          .hero-section > .container {
            display: flex;
            flex-direction: column;
            width: 100%;
          }
          .hero-grid { flex: 1; }
          .hero-photo {
            max-width: 90% !important;
            width: 90% !important;
            flex: 0 0 auto;
            min-height: 47vh !important;
            max-height: 47vh !important;
            padding: 18px 14px !important;
          }
          /* выравниваем заголовок и подзаголовок ровно по краям картинки (90% width, по центру) */
          .hero-title, .hero-text {
            width: 90% !important;
            max-width: 90% !important;
            margin-left: auto !important;
            margin-right: auto !important;
          }
          .hero-text p { max-width: 100% !important; }
          .hero-trust { display: none !important; }
        }
      `}</style>
    </section>
  );
}

window.Hero = Hero;