// Plazify · MAIN hub page (/) — mature-market problem (4 cards) + the KEY two-module hub block
// Reuses the approved /reviews feature-card pattern (4-up, 3D icon + soft glow) and the
// cross-promo CTA styling. The module cards route to /reviews and /supply (NOT the modal).

/* ===== 1) Mature market / operational problem — 4 cards ===================== */
const PROBLEMS = [
  { icon: window.__resources.aiBubble, glow: '#C992FF', title: 'Отзывы влияют на продажи', body: 'Шаблонные ответы не удерживают лояльность и не помогают понять системные проблемы товара.' },
  { icon: window.__resources.shield3d, glow: '#F19B6A', title: 'OOS забирает выручку', body: 'Когда товар заканчивается, селлер теряет продажи, позиции и темп карточки.' },
  { icon: window.__resources.box3d, glow: '#F096D7', title: 'Излишки замораживают деньги', body: 'Затоваривание увеличивает расходы на хранение и снижает гибкость закупок.' },
  { icon: window.__resources.blocks3d, glow: '#7177F6', title: 'Ручная операционка не масштабируется', body: 'Чем больше SKU, кабинетов и брендов, тем сложнее управлять процессами вручную.' },
];

function ProblemCard({ p }) {
  return (
    <div className="feat-card problem-card" style={{
      background: '#fff', borderRadius: 24, padding: 32,
      display: 'flex', flexDirection: 'column', gap: 16, position: 'relative', overflow: 'hidden', minHeight: 260,
    }}>
      <div style={{ position: 'absolute', top: -30, left: -10, width: 120, height: 120, borderRadius: '50%', background: p.glow, filter: 'blur(48px)', opacity: .36, pointerEvents: 'none' }} />
      <img className="problem-card-icon" src={p.icon} width="48" height="48" alt="" loading="lazy" decoding="async" style={{ position: 'relative' }} />
      <h3 className="plz-h4 problem-card-title" style={{ margin: '8px 0 0', fontSize: 20, lineHeight: '24px' }}>{p.title}</h3>
      <p className="plz-body-tight problem-card-body" style={{ margin: 0, fontSize: 15 }}>{p.body}</p>
    </div>
  );
}

function Problem() {
  return (
    <Section style={{ paddingTop: 128 }} id="problem">
      <div className="problem-head" style={{ textAlign: 'center', marginBottom: 64 }}>
        <Eyebrow>Зрелый рынок WB</Eyebrow>
        <h2 className="plz-h2 sec-h2 problem-h2" style={{ margin: '18px 0 0' }}>Выигрывает операционная<br />эффективность, а не рост любой ценой</h2>
      </div>
      <div className="grid-4 problem-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 28 }}>
        {PROBLEMS.map((p, i) => <ProblemCard key={i} p={p} />)}
      </div>
    </Section>
  );
}

/* ===== 2) Modules hub — the two key paths (/reviews · /supply) ============== */
const MODULES = [
  {
    href: '/reviews/', tag: 'Модуль 1',
    title: 'Автоответы и аналитика отзывов Wildberries',
    body: 'Настраиваемый AI-ассистент для отзывов, контроль публикации и аналитика по каждой SKU.',
    bullets: ['Tone of voice и поведение ассистента', 'CTA и продающие элементы в ответах', 'Ручной / полуавтоматический / автоматический режим', 'Аналитика отзывов по SKU'],
    img: 'reviewsInbox',
  },
  {
    href: '/supply/', tag: 'Модуль 2',
    title: 'Прогноз спроса и поставки Wildberries',
    body: 'ML-прогноз спроса, контроль OOS и затоваривания, расчёт поставок по складам и кластерам.',
    bullets: ['Прогноз спроса на базе ML', 'Days of Stock / Reorder Point / Safety Stock', 'Риск OOS и контроль излишков', 'Формирование поставки с подтверждением человеком'],
    img: 'skladScreen',
  },
];

function ModuleCard({ m }) {
  return (
    <a href={m.href} onClick={() => track('cross_promo_click', { to: m.href, from: 'modules_hub' })}
      className="feat-card module-card" style={{
        background: '#fff', borderRadius: 28, padding: 0, textDecoration: 'none',
        display: 'flex', flexDirection: 'column', overflow: 'hidden',
        boxShadow: 'var(--plz-shadow-card)',
      }}>
      {/* screenshot header */}
      <div className="module-visual-wrap" style={{ padding: '24px 24px 0', background: '#EEF0F5' }}>
        <div className="module-visual" style={{ borderRadius: '12px 12px 0 0', overflow: 'hidden', boxShadow: '0 18px 30px -16px rgba(32,32,35,.28)', background: '#fff' }}>
          <img src={window.__resources[m.img]} alt={m.title} loading="lazy" decoding="async" style={{ width: '100%', display: 'block', aspectRatio: '16 / 8', objectFit: 'cover', objectPosition: 'top' }} />
        </div>
      </div>
      {/* body */}
      <div style={{ padding: 40, display: 'flex', flexDirection: 'column', gap: 20, flex: '1 1 auto' }}>
        <span style={{ alignSelf: 'flex-start', background: '#E0E4FF', color: '#5E3EE5', borderRadius: 100, padding: '6px 14px', fontFamily: 'var(--plz-font-head)', fontWeight: 600, fontSize: 13 }}>{m.tag}</span>
        <h3 className="plz-h3" style={{ margin: 0, fontSize: 27, lineHeight: 1.18 }}>{m.title}</h3>
        <p className="plz-body" style={{ margin: 0, fontSize: 16.5 }}>{m.body}</p>
        <ul style={{ listStyle: 'none', margin: '2px 0 0', padding: 0, display: 'flex', flexDirection: 'column', gap: 12 }}>
          {m.bullets.map((b) => (
            <li key={b} style={{ display: 'flex', alignItems: 'flex-start', gap: 11, fontFamily: 'var(--plz-font-head)', fontSize: 15.5, lineHeight: 1.4, color: '#202023' }}>
              <span style={{ width: 22, height: 22, borderRadius: '50%', background: '#E0E4FF', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flex: '0 0 auto', marginTop: 1 }}>
                <MIcon name="check" size={13} color="#5E3EE5" stroke={2.6} />
              </span>
              {b}
            </li>
          ))}
        </ul>
        <span style={{ marginTop: 'auto', paddingTop: 8, display: 'inline-flex', alignItems: 'center', gap: 10, color: '#5E3EE5', fontFamily: 'var(--plz-font-head)', fontWeight: 700, fontSize: 16 }}>
          Подробнее о модуле <MIcon name="arrowRight" size={18} color="#5E3EE5" />
        </span>
      </div>
    </a>
  );
}

function ModulesHub() {
  // Mobile carousel swipe-hint: track which module card (0 | 1) is in view and
  // update the hint text. Only updates state when the active index actually changes.
  const [activeModuleIndex, setActiveModuleIndex] = React.useState(0);
  const moduleCarouselRef = React.useRef(null);
  function handleModuleCarouselScroll(e) {
    const el = e.currentTarget;
    const width = el.clientWidth || 1;
    const nextIndex = Math.max(0, Math.min(1, Math.round(el.scrollLeft / width)));
    setActiveModuleIndex((prev) => (prev === nextIndex ? prev : nextIndex));
  }
  return (
    <Section style={{ paddingTop: 128 }} id="modules">
      <div className="modules-head" style={{ textAlign: 'center', marginBottom: 72 }}>
        <Eyebrow>Два модуля платформы</Eyebrow>
        <h2 className="plz-h2 sec-h2" style={{ margin: '18px 0 16px' }}>Два глубоких модуля<br />под одной крышей</h2>
        <p className="plz-lead" style={{ margin: '0 auto', maxWidth: 680, fontSize: 19 }}>
          Подключите один модуль или оба — выберите направление, с которого начнёте.
        </p>
        {/* mobile-only swipe hint (hidden on desktop/tablet via CSS); text reflects active card */}
        <div className="modules-swipe-hint" aria-live="polite">
          {activeModuleIndex === 0 ? 'свайп влево →' : '← свайп вправо'}
        </div>
      </div>
      <div className="grid-2 modules-grid" ref={moduleCarouselRef} onScroll={handleModuleCarouselScroll} style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32 }}>
        {MODULES.map((m, i) => <ModuleCard key={i} m={m} />)}
      </div>
    </Section>
  );
}
Object.assign(window, { Problem, ModulesHub });