// Investimento — sem preço fixo no site: valores direto com a Patricya
function Precos() {
  const itens = [
    { icon: 'whatsapp', t: 'Valores pelo WhatsApp', d: 'Os valores e a disponibilidade de horários são informados direto pela Patricya, na primeira conversa — sem compromisso.' },
    { icon: 'calendar', t: 'Frequência combinada', d: 'A frequência das sessões é definida junto com você, de acordo com a sua necessidade e o momento do processo.' },
    { icon: 'check', t: 'Recibo para reembolso', d: 'Se o seu plano de saúde oferece reembolso de psicoterapia, é só pedir o recibo para solicitar.' },
  ];
  return (
    <section id="precos" className="section">
      <div className="container">
        <Reveal>
          <div style={{ textAlign: 'center', maxWidth: 640, margin: '0 auto 48px' }}>
            <span className="eyebrow">Investimento</span>
            <h2 className="h-section" style={{ marginTop: 8 }}>Simples e direto, <span className="em">como deve ser.</span></h2>
            <p style={{ fontSize: 16, color: 'var(--muted)', marginTop: 14 }}>Cada pessoa chega com uma história diferente. Por isso, a conversa vem antes do número.</p>
          </div>
        </Reveal>
        <div className="grid-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20, maxWidth: 1000, margin: '0 auto' }}>
          {itens.map((p, i) => (
            <Reveal key={p.t} delay={i * 0.08}>
              <div className="card card-hover" style={{ padding: 30, height: '100%' }}>
                <div style={{ width: 48, height: 48, borderRadius: 12, background: 'var(--mint)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 20 }}>
                  <Icon name={p.icon} size={24} color="var(--brand-700)" />
                </div>
                <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 21, fontWeight: 600, margin: '0 0 8px', color: 'var(--ink-2)' }}>{p.t}</h3>
                <p style={{ fontSize: 14.5, lineHeight: 1.6, color: 'var(--muted)', margin: 0 }}>{p.d}</p>
              </div>
            </Reveal>
          ))}
        </div>
        <Reveal>
          <div style={{ textAlign: 'center', marginTop: 36 }}>
            <a href={window.WHATSAPP} target="_blank" rel="noopener" className="btn btn-primary btn-lg">
              <Icon name="whatsapp" size={18} color="#fff" /> Consultar valores e horários
            </a>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

window.Precos = Precos;