// Investimento — transparência total: 2 modalidades + CTA Doctoralia
function Precos() {
  const planos = [
    { t: 'Presencial', sub: 'No consultório em Bigorrilho', preco: 230, dur: '50 minutos', icon: 'map', dest: false },
    { t: 'Online', sub: 'Por teleconsulta, de onde você estiver', preco: 200, dur: '50 minutos', icon: 'sparkle', dest: true },
  ];
  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 }}>Tudo claro, <span className="em">desde o começo.</span></h2>
            <p style={{ fontSize: 16, color: 'var(--muted)', marginTop: 14 }}>Você sabe exatamente o que vai investir antes de marcar a primeira sessão.</p>
          </div>
        </Reveal>
        <div className="grid-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 22, maxWidth: 900, margin: '0 auto' }}>
          {planos.map((p, i) => (
            <Reveal key={p.t} delay={i * 0.08}>
              <div className="card" style={{
                padding: 34, height: '100%', position: 'relative', overflow: 'hidden',
                ...(p.dest ? {
                  backgroundImage: 'linear-gradient(135deg, #6a8a7a, #4f6b5e)', backgroundColor: '#6a8a7a',
                  color: '#fff', border: 0,
                } : {})
              }}>
                {p.dest && <div style={{ position: 'absolute', width: 240, height: 240, right: -80, top: -80, background: 'radial-gradient(circle, rgba(216,230,221,.35), transparent 65%)' }} />}
                <div style={{ position: 'relative' }}>
                  <Icon name={p.icon} size={28} color={p.dest ? '#fff' : 'var(--brand)'} />
                  <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 28, fontWeight: 600, margin: '16px 0 4px', color: p.dest ? '#fff' : 'var(--ink-2)' }}>{p.t}</h3>
                  <p style={{ fontSize: 14, color: p.dest ? 'rgba(255,255,255,.8)' : 'var(--muted)', margin: '0 0 28px' }}>{p.sub}</p>
                  <div style={{ display: 'flex', alignItems: 'flex-end', gap: 6, marginBottom: 6 }}>
                    <span style={{ fontFamily: 'var(--font-display)', fontSize: 56, fontWeight: 600, lineHeight: .9, letterSpacing: '-.02em', color: p.dest ? '#fff' : 'var(--ink-2)' }}>R${p.preco}</span>
                    <span style={{ fontSize: 15, color: p.dest ? 'rgba(255,255,255,.75)' : 'var(--muted)', marginBottom: 10 }}>/ sessão</span>
                  </div>
                  <p style={{ fontSize: 13, color: p.dest ? 'rgba(255,255,255,.75)' : 'var(--muted)', margin: '0 0 24px' }}>{p.dur}</p>
                  <a href={window.DOCTORALIA} target="_blank" rel="noopener" className="btn btn-primary"
                    style={p.dest ? { background: '#fff', color: 'var(--brand-700)' } : {}}>
                    <Icon name="calendar" size={17} color={p.dest ? 'var(--brand-700)' : '#fff'} /> Agendar sessão
                  </a>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
        <Reveal>
          <p style={{ textAlign: 'center', marginTop: 28, fontSize: 14, color: 'var(--muted)' }}>
            Pagamento via Pix, cartão ou dinheiro · Recibo para reembolso de plano de saúde sob solicitação.
          </p>
        </Reveal>
      </div>
    </section>
  );
}

window.Precos = Precos;