const painItems = [
  "Fez dieta várias vezes, mas o peso sempre volta",
  "Treina há meses e o shape não muda",
  "Não sabe o que comer para ter definição sem perder massa",
  "Sente que faz tudo certo mas não vê resultado real",
  "Tem medo de passar fome e não conseguir seguir o plano",
  "Cansa de se privar de tudo sem resultado duradouro",
];

const Pain = ({ onWhatsApp }) => (
  <section id="dor" className="pain-wrap" style={{ padding: "120px 40px 80px", background: "#0f0f0f" }}>
    <div style={{ maxWidth: 1280, margin: "0 auto" }}>
      <div data-anim style={{ textAlign: "center", marginBottom: 56 }}>
        <h2 style={{
          fontFamily: "'Outfit', sans-serif",
          fontSize: "clamp(32px, 4.5vw, 54px)",
          lineHeight: 1.05, letterSpacing: "-0.02em", fontWeight: 400,
          color: "white", marginBottom: 16, textWrap: "balance"
        }}>
          Você se identifica?
        </h2>
        <p style={{ fontSize: 17, color: "rgba(255,255,255,0.7)", maxWidth: 620, margin: "0 auto", lineHeight: 1.55 }}>
          Se pelo menos uma dessas situações faz sentido pra você, o Método Shape Blindado foi criado para isso.
        </p>
      </div>

      <div className="pain-grid" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16, marginBottom: 48 }}>
        {painItems.map((text, i) => (
          <div key={i} data-anim data-delay={String((i % 3) + 1)} className="pain-card" style={{
            background: "#141414",
            border: "1px solid rgba(126,3,32,0.3)",
            borderRadius: 16, padding: "24px 20px",
            display: "flex", alignItems: "flex-start", gap: 14
          }}>
            <div style={{
              width: 32, height: 32, borderRadius: 8, flexShrink: 0,
              background: "rgba(126,3,32,0.25)", display: "grid", placeItems: "center",
              color: "#e8324a"
            }}>
              <IconCheck size={16} stroke={2} />
            </div>
            <p style={{ fontSize: 16, lineHeight: 1.55, color: "rgba(255,255,255,0.85)", margin: 0 }}>{text}</p>
          </div>
        ))}
      </div>

      <div style={{ textAlign: "center" }}>
        <button
          onClick={onWhatsApp}
          style={{
            display: "inline-flex", alignItems: "center", gap: 10,
            padding: "16px 32px", borderRadius: 999,
            background: "#1A9E4A", color: "white",
            fontSize: 16, fontWeight: 500,
            transition: "transform 0.2s, background 0.2s"
          }}
          onMouseEnter={e => { e.currentTarget.style.transform = "translateY(-2px)"; e.currentTarget.style.background = "#157A3A"; }}
          onMouseLeave={e => { e.currentTarget.style.transform = "translateY(0)"; e.currentTarget.style.background = "#1A9E4A"; }}
        >
          Quero ter um plano personalizado
        </button>
      </div>
    </div>

    <style>{`
      @media (max-width: 860px) { .pain-grid { grid-template-columns: 1fr 1fr !important; } }
      @media (max-width: 560px) {
        .pain-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
        .pain-wrap { padding: 64px 20px 56px !important; }
        .pain-wrap button { width: 100% !important; justify-content: center !important; min-height: 50px !important; }
      }
      @media (min-width: 1400px) {
        .pain-grid {
          grid-template-columns: repeat(3, 1fr) !important;
          gap: 12px !important;
        }
        .pain-card { padding: 20px 16px !important; }
      }
      @media (min-width: 1200px) and (max-width: 1399px) {
        .pain-grid { gap: 12px !important; }
        .pain-card { padding: 20px 16px !important; }
      }
    `}</style>
  </section>
);

Object.assign(window, { Pain });