// WhyNow.jsx
const { useRef: useWNRef } = React;

const CARDS = [
  {
    num: '01',
    title: 'Cada mês sem método é mais um ciclo de frustração',
    body: 'Cada tentativa que falha reforça uma crença limitante. Quanto mais tempo passa, mais difícil fica acreditar que é possível — e mais fácil desistir.',
  },
  {
    num: '02',
    title: 'Vagas da Mentoria Premium são limitadas',
    body: 'Acompanhamento próximo e personalizado exige atenção real. Por isso o número de alunas em mentoria é restrito — e as vagas fecham rápido.',
  },
  {
    num: '03',
    title: 'O melhor momento era ontem. O segundo melhor é agora.',
    body: 'Não existe condição perfeita para começar. Existe a decisão de parar de esperar e começar de onde você está, com quem você é.',
  },
];

function WhyNow() {
  const ref = useWNRef();
  useReveal(ref);

  return (
    <section className="whynow-section" ref={ref}>
      <div className="container">
        <div style={{ textAlign: 'center' }}>
          <p className="eyebrow reveal">Por que agora</p>
          <h2 className="section-title reveal rev-d1" style={{ maxWidth: 540, margin: '12px auto 0' }}>
            Esperar tem um <em>custo</em> que ninguém calcula
          </h2>
        </div>
        <div className="whynow-grid">
          {CARDS.map((c, i) => (
            <div key={i} className={`whynow-card reveal rev-d${i + 2}`}>
              <div className="whynow-num">{c.num}</div>
              <h3 style={{
                fontFamily: 'var(--font-display)', fontSize: 'clamp(17px,1.6vw,21px)',
                fontWeight: 800, letterSpacing: '-0.015em', marginBottom: 12,
              }}>{c.title}</h3>
              <p style={{ fontSize: 14, color: '#6a5060', lineHeight: 1.7 }}>{c.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { WhyNow });