function Integrations() {
  const groups = [
    {
      g: 'Поддержка',
      items: ['Usedesk', 'OmniDesk', 'HelpDeskEddy', 'OkDesk', 'Юздеск', 'Bitrix24'],
    },
    {
      g: 'Опросы и NPS',
      items: ['Анкетолог', 'Тестограф', 'WebAsk', 'Yandex Forms', 'Survey Studio', 'OkoCRM'],
    },
    {
      g: 'Звонки',
      items: ['Mango Office', 'UIS', 'MTS Exolve', 'Beeline Облако', 'Voximplant', 'Asterisk'],
    },
    {
      g: 'Магазины приложений',
      items: ['RuStore', 'AppGallery', 'NashStore', 'App Store', 'Google Play'],
    },
    {
      g: 'Соцсети и комьюнити',
      items: ['ВКонтакте', 'Telegram', 'Одноклассники', 'Дзен', 'Pikabu', 'Rutube'],
    },
    {
      g: 'Задачи',
      items: ['Yandex Tracker', 'YouTrack', 'Bitrix24', 'Pyrus', 'Kaiten', 'Weeek'],
    },
  ];

  const [open, setOpen] = React.useState(false);

  return (
    <section id="integrations" style={{ padding: '110px 0', background: 'var(--bg-soft)', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
      <div className="container">
        <div style={{ marginBottom: 48 }}>
          <h2 className="display" style={{ fontSize: 52, fontWeight: 700, lineHeight: 1.08 }}>
            Работает с тем,<br />что у вас уже есть
          </h2>
        </div>

        {/* Constellation visual */}
        <SourceConstellation />

        {/* Free integration promise — visible always */}
        <div style={{
          marginTop: 28,
          padding: '18px 22px',
          background: 'var(--card)',
          border: '1px solid var(--line)',
          borderRadius: 10,
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          gap: 20, flexWrap: 'wrap',
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14, flex: '1 1 auto', minWidth: 0 }}>
            <span style={{
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              width: 28, height: 28, borderRadius: '50%', background: 'var(--accent-soft)',
              color: 'var(--accent)', fontWeight: 700, flexShrink: 0,
            }}>+</span>
            <span style={{ fontSize: 15, color: 'var(--ink-2)', lineHeight: 1.45 }}>
              <strong style={{ color: 'var(--ink)' }}>Не нашли свой инструмент?</strong>{' '}
              Интегрируем любой нужный ресурс за 2 недели — <span style={{ color: 'var(--pos)', fontWeight: 600 }}>бесплатно</span>.
            </span>
          </div>
          <a href="#contact" className="btn btn-primary" style={{ flexShrink: 0 }}>
            Запросить интеграцию
            <svg width="11" height="11" viewBox="0 0 11 11"><path d="M3 5.5 L8 5.5 M5.5 3 L8 5.5 L5.5 8" stroke="currentColor" strokeWidth="1.4" fill="none" /></svg>
          </a>
        </div>

        {/* Все интеграции — collapsible */}
        <div style={{ marginTop: 28 }}>
          <button
            onClick={() => setOpen(o => !o)}
            aria-expanded={open}
            style={{
              width: '100%',
              padding: '16px 22px',
              background: 'var(--card)',
              border: '1px solid var(--line)',
              borderRadius: 10,
              display: 'flex', alignItems: 'center', justifyContent: 'space-between',
              cursor: 'pointer',
              transition: 'all 0.2s',
            }}
          >
            <span style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
              <span className="display" style={{ fontSize: 17, fontWeight: 700, color: 'var(--ink)' }}>
                Все интеграции
              </span>
              <span className="mono" style={{ fontSize: 11, color: 'var(--muted)', letterSpacing: '0.08em' }}>
                {groups.reduce((s, g) => s + g.items.length, 0)} коннекторов · {groups.length} групп
              </span>
            </span>
            <svg width="14" height="14" viewBox="0 0 14 14" style={{
              transition: 'transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
              transform: open ? 'rotate(180deg)' : 'rotate(0)',
              color: 'var(--ink)',
            }}>
              <path d="M3 5 L7 9 L11 5" stroke="currentColor" strokeWidth="1.6" fill="none" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          </button>

          {open && (
            <div style={{
              marginTop: 12,
              display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)',
              gap: 0, border: '1px solid var(--line)', background: 'var(--card)',
              animation: 'fade-in 0.3s ease',
            }}>
              {groups.map((g, i) => (
                <div key={g.g} style={{
                  padding: '24px 26px',
                  borderRight: (i % 3 !== 2) ? '1px solid var(--line)' : 'none',
                  borderBottom: i < 3 ? '1px solid var(--line)' : 'none',
                }}>
                  <div style={{
                    display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                    marginBottom: 18,
                  }}>
                    <h3 className="display" style={{ fontSize: 16, fontWeight: 700 }}>{g.g}</h3>
                    <span className="mono" style={{ fontSize: 10.5, color: 'var(--muted)' }}>{i + 1}</span>
                  </div>
                  <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                    {g.items.map(it => (
                      <span key={it} style={{
                        fontSize: 12.5, padding: '6px 10px',
                        background: 'var(--bg-soft)', border: '1px solid var(--line-2)',
                        borderRadius: 6, color: 'var(--ink-2)', fontWeight: 500,
                      }}>{it}</span>
                    ))}
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>
      </div>

      <style>{`
        @keyframes fade-in {
          from { opacity: 0; transform: translateY(-4px); }
          to   { opacity: 1; transform: translateY(0); }
        }
      `}</style>
    </section>
  );
}

function SourceConstellation() {
  return (
    <div style={{
      position: 'relative',
      borderRadius: 14, overflow: 'hidden',
      background: 'var(--bg)',
      border: '1px solid var(--line)',
      padding: '40px 24px',
      display: 'flex', justifyContent: 'center', alignItems: 'center',
    }}>
      <img
        src="uploads/allsources.webp"
        alt="Источники: Wildberries, OZON, App Store, Google Play, Я.Карты, 2GIS, amoCRM, Bitrix24 и ещё 14 коннекторов вокруг Фидли"
        loading="lazy"
        decoding="async"
        style={{
          width: '100%', maxWidth: 880, height: 'auto', display: 'block',
        }}
      />
    </div>
  );
}

window.Integrations = Integrations;