// Problems section + capabilities grid
const Problems = () => {
  const items = [
    { icon: "drop", title: "Боюсь протечки", text: "Датчик ловит воду, перекрывает кран и шлёт уведомление за 2 секунды.", color: "var(--leak)" },
    { icon: "thermo", title: "Холодно или жарко", text: "Климат держится автоматически в каждой комнате, без перерасхода.", color: "var(--good)" },
    { icon: "shield", title: "Не уверен в безопасности", text: "Движение, открытие дверей и окон — мгновенно в Telegram.", color: "var(--ink-2)" },
    { icon: "zap", title: "Забыл утюг / свет", text: "Один сценарий «ушёл из дома» выключает всё лишнее.", color: "var(--accent)" },
    { icon: "sprout", title: "Уехал — некому за теплицей", text: "Полив, вентиляция и контроль температуры — без вас.", color: "var(--safe)" },
    { icon: "house", title: "Хочу всё в одном месте", text: "Одно приложение или голос — вместо пяти разрозненных.", color: "var(--ink-3)" },
  ];
  return (
    <section id="problems">
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "minmax(0, 1fr) minmax(0, 1.6fr)", gap: 48 }} className="problems-head">
          <div>
            <span className="eyebrow">Что решаем</span>
            <h2 className="h-section" style={{ marginTop: 16 }}>
              Шесть знакомых страхов —<br />один спокойный ответ.
            </h2>
          </div>
          <p className="lede" style={{ alignSelf: "end" }}>
            В квартире или частном доме умный дом проще всего заложить на этапе ремонта,
            пока открыты стены. Даже если ремонт уже завершён, РазумДом легко
            интегрируется в существующее пространство. РазумДом объединяет датчики,
            свет и климат в одну систему, которая реагирует сама — по сценариям и событиям.
          </p>
        </div>

        <div className="problems-grid" style={{
          marginTop: 56,
          display: "grid",
          gridTemplateColumns: "repeat(3, 1fr)",
          gap: 14,
        }}>
          {items.map((it, i) => (
            <div key={i} className="card problem-card" style={{
              padding: 26,
              display: "flex",
              flexDirection: "column",
              minHeight: 190,
            }}>
              <div style={{
                width: 44, height: 44, borderRadius: 12,
                background: it.color, color: "#fff",
                display: "grid", placeItems: "center",
              }}>
                <RDIcon name={it.icon} size={22} stroke={1.8} />
              </div>
              <h3 className="h-card" style={{ marginTop: 18, fontSize: 19 }}>{it.title}</h3>
              <p style={{ marginTop: 8, color: "var(--ink-3)", fontSize: 15, lineHeight: 1.5, flex: 1 }}>{it.text}</p>
            </div>
          ))}
        </div>
      </div>

      <style>{`
        @media (max-width: 920px) {
          .problems-head { grid-template-columns: 1fr !important; gap: 24px !important; }
          .problems-grid { grid-template-columns: 1fr 1fr !important; }
        }
        @media (max-width: 620px) {
          .problems-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
};

window.Problems = Problems;