function KeyFeatures() {
  const [showAll, setShowAll] = React.useState(false);

  const FEATURES = [
    { title: 'Единый кабинет для карт',            img: 'uploads/keyfeatures/fourth_section_cards.webp',                h: 223 },
    { title: 'Роли и контроль',                    img: 'uploads/keyfeatures/fourth_section_roles_and_control.webp',    h: 250 },
    { title: 'Определение критичных отзывов',      img: 'uploads/keyfeatures/fourth_section_integrations.webp',         h: 212 },
    { title: 'Автоответы ИИ',                      img: 'uploads/keyfeatures/fourth_section_tone_communication.webp',   h: 'flex' },
    { title: 'ИИ-анализ текста',                   img: 'uploads/keyfeatures/fourth_section_ai_text_analys.webp',       h: 'flex' },
    { title: 'Дашборды и метрики',                 img: 'uploads/keyfeatures/fourth_section_analytics.webp',            h: 'full' },
    { title: 'Телеграм-бот',                       img: 'uploads/keyfeatures/fourth_section_tg_bot.webp',               h: 284, bottom: true },
    { title: 'Офлайн-сбор через QR',               img: 'uploads/keyfeatures/fourth_section_qr_code.webp',              h: 284, bottom: true },
  ];

  return (
    <section style={{ background: 'var(--ink)', color: 'var(--bg)', padding: '80px 0' }}>
      <div className="container">
        <h2 className="display" style={{
          fontSize: 48, color: 'var(--bg)', fontWeight: 500,
          lineHeight: 0.92, letterSpacing: '-0.02em',
          maxWidth: 514, marginBottom: 50,
        }}>
          Ключевые возможности
        </h2>

        {/* 3-column grid */}
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)',
          gap: 12, alignItems: 'stretch',
        }}>
          {/* Col 1: 3 stacked cards */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            <Card f={FEATURES[0]} />
            <Card f={FEATURES[1]} />
            <Card f={FEATURES[2]} />
          </div>

          {/* Col 2: 2 stacked cards, each flex: 1 */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            <Card f={FEATURES[3]} flex />
            <Card f={FEATURES[4]} flex />
          </div>

          {/* Col 3: 1 tall card filling height */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            <Card f={FEATURES[5]} full />
          </div>
        </div>

        {/* Bottom row: 2 cards — hidden until "Показать все" */}
        <div style={{
          overflow: 'hidden',
          maxHeight: showAll ? 600 : 0,
          opacity: showAll ? 1 : 0,
          marginTop: showAll ? 12 : 0,
          transition: 'max-height 0.7s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s ease, margin-top 0.5s ease',
        }}>
          <div style={{
            display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)',
            gap: 12,
          }}>
            <Card f={FEATURES[6]} />
            <Card f={FEATURES[7]} />
          </div>
        </div>

        {/* Toggle button */}
        <div style={{ display: 'flex', justifyContent: 'center', marginTop: 36 }}>
          <button
            onClick={() => setShowAll(s => !s)}
            style={{
              padding: '14px 32px',
              borderRadius: 999,
              background: 'transparent',
              border: '1px solid rgba(245,243,238,0.25)',
              color: 'var(--bg)',
              fontFamily: 'inherit', fontSize: 15, fontWeight: 500,
              cursor: 'pointer',
              display: 'inline-flex', alignItems: 'center', gap: 10,
              transition: 'all 0.2s',
            }}
            onMouseEnter={(e) => { e.currentTarget.style.background = 'rgba(245,243,238,0.06)'; e.currentTarget.style.borderColor = 'rgba(245,243,238,0.45)'; }}
            onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.borderColor = 'rgba(245,243,238,0.25)'; }}
          >
            {showAll ? 'Скрыть' : 'Показать все'}
            <svg width="13" height="13" viewBox="0 0 13 13" style={{
              transition: 'transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
              transform: showAll ? 'rotate(180deg)' : 'rotate(0deg)',
            }}>
              <path d="M3 5 L6.5 8.5 L10 5" stroke="currentColor" strokeWidth="1.6" fill="none" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          </button>
        </div>
      </div>
    </section>
  );
}

function Card({ f, flex, full }) {
  const isBottom = !!f.bottom;
  const height = full ? '100%' : (f.h === 'flex' || flex) ? undefined : `${f.h}px`;
  const flexGrow = (f.h === 'flex' || flex) ? 1 : undefined;
  const imgWidth = isBottom ? 327 : 375;

  return (
    <div className={`kf-card${isBottom ? ' kf-card--bottom' : ''}`} style={{
      position: 'relative',
      borderRadius: 36,
      background: '#282828',
      overflow: 'hidden',
      height,
      flex: flexGrow ? '1 1 0' : undefined,
      minHeight: (f.h === 'flex' || flex) ? 250 : undefined,
      width: '100%',
    }}>
      <img
        className="kf-img"
        src={f.img}
        alt={f.title}
        loading="lazy"
        decoding="async"
        style={{
          position: 'absolute',
          top: 0,
          ...(isBottom
            ? { right: 0 }
            : { left: '50%', transform: 'translateX(-50%)' }),
          width: imgWidth, maxWidth: '100%', height: 'auto',
          display: 'block',
        }}
      />

      {/* gradient fade for title legibility */}
      <div className="kf-fade" style={{
        position: 'absolute', left: 0, right: 0, bottom: 0,
        height: 162, pointerEvents: 'none',
        background: 'linear-gradient(0deg, #282828 27.27%, rgba(40,40,40,0) 100%)',
      }} />

      <div className="kf-title" style={{
        position: 'absolute', bottom: 24, left: 24,
        paddingRight: 24,
        width: isBottom ? '40%' : undefined,
        color: '#fff', fontFamily: 'Manrope, sans-serif',
        fontWeight: 500, fontSize: 32, lineHeight: 0.92,
        letterSpacing: '-0.02em', zIndex: 1,
      }}>
        {f.title}
      </div>
    </div>
  );
}

window.KeyFeatures = KeyFeatures;