// Plazify · Reviews landing — "Полный комплекс решений" (4 cards) + compare (2 cards)
const FEATURES = [
  { icon: window.__resources.aiBubble, glow: '#C992FF', title: 'AI-ассистент вместо шаблонных ответов', body: 'Ассистент общается с каждым покупателем индивидуально, а не вставляет один шаблон. Без универсальных фраз, которые убивают доверие.' },
  { icon: window.__resources.blocks3d, glow: '#7177F6', title: 'Гибкие настройки ответов', body: 'Настраивается тон общения, поведение и продающий CTA в ответах — глубина, которой не даёт бесплатный нативный AI.' },
  { icon: window.__resources.shield3d, glow: '#F19B6A', title: 'Позитив и негатив — раздельно', body: 'Позитив → благодарность с рекомендацией товара. Негатив → снятие напряжения и работа с возражением по своим правилам.' },
  { icon: window.__resources.box3d, glow: '#F096D7', title: 'Аналитика ответов и рекомендации', body: 'Видите повторяющиеся проблемы и преимущества, общую картину по SKU и стратегические выводы для улучшения товара.' },
];

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

function Features() {
  return (
    <Section id="features" style={{ paddingTop: 110 }}>
      <div className="features-head" style={{ textAlign: 'center', marginBottom: 48 }}>
        <h2 className="plz-h2 sec-h2" style={{ margin: 0 }}>Полный комплекс решений<br />для работы с отзывами и вопросами</h2>
      </div>
      <div className="grid-4" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20 }}>
        {FEATURES.map((f, i) => <FeatureCard key={i} f={f} />)}
      </div>
    </Section>
  );
}

/* ---- Compare: живой диалог vs шаблоны ---------------------------------- */
function ReplyBubble({ tone, text, accent }) {
  return (
    <div style={{ background: accent ? '#E0E4FF' : '#F4F5FE', border: accent ? 'none' : '1px solid #E4E6EB', borderRadius: 16, padding: '14px 16px' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
        <span style={{ width: 22, height: 22, borderRadius: '50%', background: accent ? 'var(--plz-gradient)' : '#BFBFC7', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
          <MIcon name={accent ? 'message' : 'menu'} size={12} color="#fff" stroke={2.4} />
        </span>
        <span style={{ fontFamily: 'var(--plz-font-ui)', fontWeight: 600, fontSize: 13, color: accent ? '#5E3EE5' : '#95959E' }}>{tone}</span>
      </div>
      <p style={{ margin: 0, fontFamily: 'var(--plz-font-ui)', fontSize: 14, lineHeight: 1.5, color: accent ? '#202023' : '#95959E' }}>{text}</p>
    </div>
  );
}

function CompareCard({ accent, label, title, body, bubbleTone, bubbleText }) {
  return (
    <div className="cmp-card" style={{
      background: '#fff', borderRadius: 24, padding: 32, boxShadow: 'var(--plz-shadow-card)',
      border: accent ? '1.5px solid #C7CBFF' : '1px solid #E4E6EB', display: 'flex', flexDirection: 'column', gap: 18,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <span style={{
          display: 'inline-flex', alignItems: 'center', gap: 8, borderRadius: 100, padding: '7px 14px',
          fontFamily: 'var(--plz-font-head)', fontWeight: 600, fontSize: 13,
          background: accent ? '#E0E4FF' : '#EEF0F5', color: accent ? '#5E3EE5' : '#5C5C62',
        }}>{label}</span>
      </div>
      <h3 className="plz-h4 cmp-title" style={{ margin: 0, fontSize: 24 }}>{title}</h3>
      <p className="plz-body cmp-body" style={{ margin: 0, fontSize: 16 }}>{body}</p>
      <ReplyBubble tone={bubbleTone} text={bubbleText} accent={accent} />
    </div>
  );
}

function Compare() {
  return (
    <Section id="compare" style={{ paddingTop: 110 }}>
      <div className="compare-head" style={{ textAlign: 'center', marginBottom: 48 }}>
        <h2 className="plz-h2 sec-h2" style={{ margin: '0 0 16px' }}>От формальных ответов<br />к живому диалогу с клиентами</h2>
        <p className="plz-lead" style={{ margin: '0 auto', maxWidth: 680, fontSize: 19 }}>
          AI-ассистент учитывает контекст отзыва, товар и бренд — и сам выбирает подходящую формулировку.
        </p>
      </div>
      <div className="grid-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>
        <CompareCard accent label="AI-ассистент" title="Персональный ответ под товар и бренд"
          body="Анализирует отзыв и пишет персональный ответ: учитывает детали покупки, повышает лояльность и аккуратно ведёт к новой покупке."
          bubbleTone="Ответ ассистента" bubbleText="Екатерина, спасибо за оценку! Рады, что цвет и качество вам понравились. С этой моделью часто берут митенки и снуд нашей серии «Санни» арт. WB 854318331 и арт.438563721 — будем рады видеть вас снова! Команда магазина NiceStoritez!" />
        <CompareCard label="Ответы по шаблонам (сценарии)" title="Один скрипт на все отзывы"
          body="Шаблон выдаёт одинаковую фразу всем покупателям. Не учитывает контекст, звучит формально и часто выглядит безразлично."
          bubbleTone="Шаблонный ответ" bubbleText="Здравствуйте! Спасибо за ваш отзыв. Будем рады видеть вас снова." />
      </div>
    </Section>
  );
}
Object.assign(window, { Features, Compare });