// Pains.jsx — 3x2 grid of 6 pains with big 01–06
function Pains() {
  const items = [
    { n: '01', t: 'Regime tributário errado', d: 'Você está no Simples, Presumido ou Real porque "sempre foi assim". Pode estar pagando mais do que deveria há anos.', tag: 'Regime' },
    { n: '02', t: 'Impostos pagos a mais', d: 'Uma sensação de que o dinheiro some todo mês. Pode haver créditos tributários dormindo nos seus registros.', tag: 'Créditos' },
    { n: '03', t: 'Autuação sem resposta', d: 'Recebeu uma cobrança do fisco e não sabe por onde começar. Você não precisa lidar com isso sozinho.', tag: 'Impugnação' },
    { n: '04', t: 'Folha com encargos errados', d: 'Esse percentual está certo? Muitos empresários pagam mais que a lei exige há anos sem perceber.', tag: 'Folha' },
    { n: '05', t: 'Movimentações questionadas', d: 'A Receita quer saber de uma transferência, uma nota, uma despesa. A pressão aumenta e as dúvidas também.', tag: 'Fisco' },
    { n: '06', t: 'Falta de planejamento', d: 'Você só resolve problemas quando aparecem. Ninguém senta para pensar: como pagar menos, legalmente, o ano todo?', tag: 'Estratégia' },
  ];

  return (
    <section id="dores">
      <div className="wrap">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 60, marginBottom: 56, alignItems: 'end' }} className="pains-head">
          <div>
            <span className="q-eyebrow">Situações Reais</span>
            <h2 style={{ marginTop: 18 }}>
              Essas dores<br />você conhece.
            </h2>
          </div>
          <p className="q-sub q-sub-md" style={{ maxWidth: 460, marginBottom: 10 }}>
            Se se reconhecer em qualquer uma, é hora de agir. Marque quais são as suas e leve para o diagnóstico.
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 2, background: 'var(--border)' }} className="pains-grid">
          {items.map((p) => <PainCard key={p.n} {...p} />)}
        </div>
      </div>
      <style>{`
        @media (max-width: 980px) {
          .pains-grid { grid-template-columns: 1fr 1fr !important; }
          .pains-head { grid-template-columns: 1fr !important; gap: 20px !important; }
        }
        @media (max-width: 640px) {
          .pains-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

function PainCard({ n, t, d, tag }) {
  const [checked, setChecked] = React.useState(false);
  return (
    <div
      onClick={() => setChecked(v => !v)}
      className="pain-card"
      style={{
        background: checked ? 'var(--bg3)' : 'var(--bg2)',
        padding: '44px 36px',
        position: 'relative',
        cursor: 'pointer',
        transition: 'background .25s',
        minHeight: 320,
        display: 'flex', flexDirection: 'column',
        borderTop: checked ? '2px solid var(--signal)' : '2px solid transparent',
      }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 28 }}>
        <div style={{
          fontFamily: 'var(--display-stack)',
          fontSize: '4.2rem', fontWeight: 900,
          lineHeight: 0.9,
          background: checked ? 'var(--grad-copper-sheen)' : 'none',
          backgroundSize: checked ? '200% 100%' : 'auto',
          WebkitBackgroundClip: checked ? 'text' : 'initial',
          backgroundClip: checked ? 'text' : 'initial',
          WebkitTextFillColor: checked ? 'transparent' : 'initial',
          color: checked ? 'transparent' : 'var(--white)',
          letterSpacing: '-0.04em',
          filter: checked ? 'drop-shadow(0 0 24px var(--signal-glow))' : 'none',
          animation: checked ? 'sheen 6s ease-in-out infinite' : 'none',
          transition: 'color .25s, filter .25s',
        }}>
          {n}
        </div>
        <label style={{ display: 'flex', alignItems: 'center', cursor: 'pointer' }} onClick={e => e.stopPropagation()}>
          <span
            onClick={() => setChecked(v => !v)}
            style={{
              width: 22, height: 22,
              border: `1.5px solid ${checked ? 'var(--signal)' : 'var(--border2)'}`,
              background: checked ? 'var(--signal)' : 'transparent',
              borderRadius: 2,
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              color: 'var(--black)', fontSize: 14, fontWeight: 900,
              transition: 'all .2s',
            }}>
            {checked && '✓'}
          </span>
        </label>
      </div>
      <h3 style={{ fontSize: '1.3rem', marginBottom: 14, letterSpacing: '-0.005em' }}>{t}</h3>
      <p style={{ color: 'var(--t2)', fontSize: '0.95rem', lineHeight: 1.65, marginBottom: 24 }}>{d}</p>
      <div style={{ marginTop: 'auto' }}>
        <span className="chip">{tag}</span>
      </div>
    </div>
  );
}

window.Pains = Pains;