// Plazify · Reviews landing — "Единая платформа для всех брендов и кабинетов" (2 lilac cards)
// Card visual area — SVG sits directly on the lavender card (no white inner panel)
function CardVisual({ img, alt }) {
  return (
    <div style={{ padding: '4px 4px 0', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
      <img src={window.__resources[img]} alt={alt} loading="lazy" decoding="async" style={{ display: 'block', width: '100%', height: 'auto', objectFit: 'contain' }} />
    </div>
  );
}

function CabinetCard() {
  return (
    <div className="lilac-card">
      <CardVisual img="cabinetsSvg" alt="Переключение между кабинетами и брендами Wildberries в одном окне" />
      <div className="lilac-text">
        <h3 className="plz-h4" style={{ margin: '0 0 10px', fontSize: 22, color: '#1A1043' }}>Все кабинеты и бренды — в одном окне</h3>
        <p style={{ margin: 0, fontFamily: 'var(--plz-font-head)', fontSize: 16, lineHeight: 1.5, color: '#4a4470' }}>
          Подключайте несколько кабинетов и брендов. Переключайтесь между ними одним кликом — без логаутов и таблиц.
        </p>
      </div>
    </div>
  );
}

function AssistantsCard() {
  return (
    <div className="lilac-card">
      <CardVisual img="assistantsSvg" alt="Отдельные ассистенты для ответов на отзывы и вопросы" />
      <div className="lilac-text">
        <h3 className="plz-h4" style={{ margin: '0 0 10px', fontSize: 22, color: '#1A1043' }}>Отдельные ассистенты под сценарии</h3>
        <p style={{ margin: 0, fontFamily: 'var(--plz-font-head)', fontSize: 16, lineHeight: 1.5, color: '#4a4470' }}>
          Раздельная логика для позитива и негатива, свои ассистенты под товары и бренды — каждый со своим тоном и правилами.
        </p>
      </div>
    </div>
  );
}

function MultiCabinet() {
  // Mobile (<=620px) only: the two lilac cards become a horizontal scroll-snap slider
  // (one card per viewport). On desktop/tablet the .grid-2 two-column layout is unchanged.
  // The directional hint above the cards is hidden on desktop via CSS (display:none).
  const [activeIndex, setActiveIndex] = React.useState(0);
  const sliderRef = React.useRef(null);
  function handleScroll(e) {
    const el = e.currentTarget;
    const width = el.clientWidth || 1;
    const nextIndex = Math.max(0, Math.min(1, Math.round(el.scrollLeft / width)));
    setActiveIndex((prev) => (prev === nextIndex ? prev : nextIndex));
  }
  return (
    <Section id="multi" style={{ paddingTop: 144 }}>
      <div className="multi-head" style={{ textAlign: 'center', marginBottom: 64 }}>
        <h2 className="plz-h2 sec-h2" style={{ margin: 0 }}>Единая платформа для всех<br />брендов, кабинетов и сценариев</h2>
      </div>
      {/* mobile-only directional swipe hint (hidden by default; shown <=620px via Reviews CSS) */}
      <div className="multi-hint" aria-hidden="true" style={{ display: 'none' }}>{activeIndex === 0 ? 'свайп влево →' : '← свайп вправо'}</div>
      <div className="grid-2 multi-grid" ref={sliderRef} onScroll={handleScroll} style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32 }}>
        <CabinetCard />
        <AssistantsCard />
      </div>
    </Section>
  );
}
Object.assign(window, { MultiCabinet });