/* ═══════════════════════════════════════════════════════════
   DORES — o problema, em 3 cards
   ═══════════════════════════════════════════════════════════ */

const painStyles = {};

const PAINS = [
  {
    icon: ICONS.calendarX,
    title: 'Agenda bagunçada e horários perdidos',
    text: 'Dupla marcação, encaixes de última hora e sem visão da semana inteira. Cada falta é dinheiro que não volta.',
  },
  {
    icon: ICONS.fileX,
    title: 'Prontuário espalhado, sem histórico na mão',
    text: 'Ficha em papel, em planilha ou em sistema que não conversa com o resto. Na hora do atendimento, a informação nunca está onde devia.',
  },
  {
    icon: ICONS.trendDown,
    title: 'Inadimplência e fluxo de caixa no escuro',
    text: 'Você não sabe ao certo quanto entrou, quanto a receber e quem está devendo. Seu financeiro é uma caixa-preta.',
  },
];

function Pains() {
  return (
    <section className="section" id="problema">
      <div className="container">
        <div className="section-header">
          <div className="tag tag-danger">O problema</div>
          <h2>Reconhece essa rotina?</h2>
        </div>

        <div className="dores-grid">
          {PAINS.map((p, i) => (
            <div className={`dor-card reveal${i ? ` reveal-delay-${i}` : ''}`} key={p.title}>
              <div className="dor-heading">
                <div className="dor-icon">
                  <Icon d={p.icon} />
                </div>
                <h3>{p.title}</h3>
              </div>
              <p>{p.text}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Pains });