// Argumentos.jsx
const { useRef: useArgRef } = React;

const ARGS = [
  {
    headline: 'Corpo que você não sustenta não é resultado',
    lede: 'Emagrecer é fácil. Manter é o desafio real.',
    body: 'A maioria das mulheres perde peso e recupera em meses — porque o método estava errado, não a mulher. Aqui, trabalhamos a constância na raiz: identidade e rotina.',
    stat: '87%', statLbl: 'das dietas falham em menos de 1 ano',
  },
  {
    headline: 'Mente travada, corpo parado',
    lede: 'Não é falta de força de vontade — é falta de direção.',
    body: 'Mulheres que trabalham identidade e rotina junto ao treino têm 3× mais chances de manter resultados por mais de 12 meses.',
    stat: '3×', statLbl: 'mais constância com suporte emocional integrado',
  },
  {
    headline: 'Atleta profissional do seu lado',
    lede: 'Mais de 10 anos de competição — incluindo o Mister Olympia.',
    body: 'A Taty não aprendeu a transformar corpo em teoria. Ela viveu cada detalhe: disciplina extrema, estratégia de treino e a mentalidade que separa quem chega de quem desiste.',
    stat: '+10 anos', statLbl: 'de palco profissional competitivo',
  },
  {
    headline: 'Método completo, não parcial',
    lede: 'Treino sem nutrição não funciona. Nutrição sem mente não sustenta.',
    body: 'A Mentoria Premium integra personal trainer, nutricionista e médico — e ainda trabalha o emocional e a identidade. É o único método que trata você como inteira.',
    stat: '4 frentes', statLbl: 'integradas em um único método',
  },
  {
    headline: 'Comunidade que fortalece',
    lede: 'Sozinha é mais difícil. Conectada, é inevitável.',
    body: 'No Funcional Conectadas Fitness você treina em ambiente 100% feminino, com mulheres que compartilham dos mesmos objetivos. A comunidade é o que faz a diferença quando a motivação some.',
    stat: '100%', statLbl: 'ambiente feminino de suporte mútuo',
  },
  {
    headline: 'Espiritual não é opcional',
    lede: 'Cuidar do corpo também é uma decisão espiritual.',
    body: 'O método entende que transformação real passa por quem você é, pelo que você crê e por como você se vê. Por isso integramos fé, propósito e rotina — não só séries e repetições.',
    stat: '3 pilares', statLbl: 'Corpo · Alma · Espírito — inseparáveis',
  },
];

function Argumentos() {
  const ref = useArgRef();
  useReveal(ref);

  return (
    <section className="args-section" ref={ref} id="argumentos">
      <div className="container">
        <div className="args-header">
          <p className="eyebrow reveal">Por que funciona</p>
          <h2 className="section-title reveal rev-d1" style={{ maxWidth: 600, margin: '12px auto 0' }}>
            6 razões para esse método ser <em>diferente</em> de tudo que você já tentou
          </h2>
        </div>
        <div className="args-grid">
          {ARGS.map((a, i) => (
            <div key={i} className={`card arg-card reveal rev-d${(i % 3) + 1}`}>
              <div style={{
                width: 36, height: 36, borderRadius: '50%', marginBottom: 18,
                background: 'linear-gradient(135deg,var(--rose-light),var(--blush))',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
                  <path d="M8 2v5.5L11.5 11" stroke="var(--accent)" strokeWidth="2" strokeLinecap="round"/>
                  <circle cx="8" cy="8" r="6.5" stroke="var(--rose-mid)" strokeWidth="1.2"/>
                </svg>
              </div>
              <h3 className="arg-headline">{a.headline}</h3>
              <p style={{ fontSize: 14, fontWeight: 600, color: 'var(--accent)', marginBottom: 8 }}>{a.lede}</p>
              <p style={{ fontSize: 14, color: '#6a5060', lineHeight: 1.7 }}>{a.body}</p>
              <div style={{ marginTop: 20, paddingTop: 16, borderTop: '1px solid rgba(217,123,150,0.12)' }}>
                <div className="arg-stat">{a.stat}</div>
                <div className="arg-stat-lbl">{a.statLbl}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Argumentos });