const painsStyles = {
  section: { background: 'white' },
  header: { textAlign: 'center', marginBottom: 'clamp(32px, 6vw, 56px)', maxWidth: 720, margin: '0 auto clamp(32px, 6vw, 56px)' },
  grid: {
    display: 'grid',
    gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))',
    gap: 'var(--grid-gap, 20px)',
  },
  card: {
    background: 'var(--bg)', borderRadius: 16, padding: 'var(--card-pad, 24px)',
    border: '1px solid var(--silver-100)',
    transition: 'transform .25s ease, box-shadow .25s ease, background .25s ease',
    position: 'relative', overflow: 'hidden',
  },
  iconWrap: {
    width: 50, height: 50, borderRadius: 14,
    background: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center',
    marginBottom: 14, boxShadow: '0 4px 10px rgba(30,58,111,.08)',
  },

  solution: {
    marginTop: 14, paddingTop: 14, borderTop: '1px dashed var(--silver-300)',
    display: 'flex', alignItems: 'flex-start', gap: 8,
    fontSize: 13.5, color: 'var(--navy-700)', fontWeight: 600, lineHeight: 1.45,
  },
};

const pains = [
  { icon: <IconClock size={26} color="var(--navy-700)"/>, title: 'Computador lento e travando', text: 'Demora uma eternidade pra ligar, abrir o navegador ou salvar um arquivo.', solution: 'Limpeza + upgrade deixa seu PC voando de novo.' },
  { icon: <IconHDD size={26} color="var(--navy-700)"/>, title: 'Medo de perder suas fotos', text: 'Anos de fotos da família, documentos importantes, trabalho inteiro em um só lugar.', solution: 'Fazemos backup seguro antes de qualquer coisa.' },
  { icon: <IconVirus size={26} color="var(--navy-700)"/>, title: 'Anúncios e pop-ups estranhos', text: 'Janelas abrindo sozinhas, páginas que você não pediu, alertas piscando na tela.', solution: 'Removemos vírus e deixamos seguro pra navegar.' },
  { icon: <IconBolt size={26} color="var(--navy-700)"/>, title: 'Precisa rodar programas pesados', text: 'Planilha trava, vídeo engasga, jogo não abre, videochamada do trabalho cai.', solution: 'Upgrade simples resolve — sem trocar o PC.' },
];

function Pains() {
  return (
    <section style={painsStyles.section} id="dores">
      <div className="container">
        <div style={painsStyles.header}>
          <div className="eyebrow" style={{ marginBottom: 14 }}><span className="dot"></span>Você se identifica?</div>
          <h2 className="t-h2" style={{ marginBottom: 14 }}>Sabemos exatamente o que você está passando</h2>
          <p className="t-lead">
            Todo dia atendemos pessoas com esses mesmos problemas.
            <strong style={{ color: 'var(--navy-800)' }}> Todos têm solução.</strong>
          </p>
        </div>
        <div style={painsStyles.grid}>
          {pains.map((p, i) => (
            <div key={i} className="pain-card" style={painsStyles.card}>
              <div style={painsStyles.iconWrap}>{p.icon}</div>
              <div className="t-h4" style={{ color: 'var(--navy-800)', marginBottom: 8 }}>{p.title}</div>
              <div className="t-small">{p.text}</div>
              <div style={painsStyles.solution}>
                <IconCheck size={18} color="var(--success)"/>
                <span>{p.solution}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        .pain-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); background: white; }
      `}</style>
    </section>
  );
}

Object.assign(window, { Pains });