function CtaIntermediate() {
  return (
    <section style={{ paddingTop: 64, paddingBottom: 64 }}>
      <div className="container">
        <div style={{
          background: 'var(--bg-elevated)',
          border: '1px solid var(--line)',
          borderRadius: 'var(--radius-2xl)',
          padding: '56px 40px',
          textAlign: 'center',
          maxWidth: 880,
          margin: '0 auto',
          position: 'relative',
          overflow: 'hidden',
        }}>
          <div aria-hidden="true" style={{
            position: 'absolute', top: -100, left: '50%', transform: 'translateX(-50%)',
            width: 500, height: 200,
            background: 'radial-gradient(ellipse, rgba(124, 58, 237, 0.08) 0%, transparent 70%)',
            pointerEvents: 'none',
          }} />
          <h2 style={{ fontSize: 'clamp(28px, 3.5vw, 42px)', marginBottom: 16, position: 'relative', maxWidth: 680, marginLeft: 'auto', marginRight: 'auto' }}>
            Não espere o fim do mês para descobrir para onde seu dinheiro foi.
          </h2>
          <p style={{ fontSize: 18, color: 'var(--ink-3)', marginBottom: 32, position: 'relative' }}>
            Comece a registrar seus gastos com mais consciência hoje.
          </p>
          <a href="https://app.econome.com.br/register" className="btn btn-purple btn-lg" style={{ position: 'relative' }}>
            Criar minha conta
            <Icon.ArrowRight size={16} />
          </a>
        </div>
      </div>
    </section>
  );
}

function CtaFinal() {
  return (
    <section style={{ paddingTop: 96, paddingBottom: 48 }}>
      <div className="container">
        <div style={{ textAlign: 'center', maxWidth: 720, margin: '0 auto' }}>
          <div className="eyebrow"><span className="dot" />Convite final</div>
          <h2 style={{ fontSize: 'clamp(40px, 6vw, 72px)', marginTop: 20, marginBottom: 20, letterSpacing: '-0.035em', lineHeight: 1.05 }}>
            Organize. Entenda.<br/>
            <em style={{
              fontStyle: 'normal',
              background: 'linear-gradient(180deg, var(--purple) 0%, var(--purple-deep) 100%)',
              WebkitBackgroundClip: 'text',
              WebkitTextFillColor: 'transparent',
              backgroundClip: 'text',
            }}>Economize.</em>
          </h2>
          <p className="lead" style={{ fontSize: 19, marginBottom: 36 }}>
            O Econome foi criado para quem quer sair do piloto automático financeiro
            e construir uma relação mais consciente com o próprio dinheiro.
          </p>
          <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap', marginBottom: 16 }}>
            <a href="https://app.econome.com.br/register" className="btn btn-primary btn-lg">
              Criar conta grátis
              <Icon.ArrowRight size={16} />
            </a>
            <a href="https://app.econome.com.br" className="btn btn-outline btn-lg">
              Acessar app
            </a>
          </div>
          <p className="mono" style={{ fontSize: 12, color: 'var(--ink-4)', letterSpacing: '0.02em' }}>
            LEVA MENOS DE UM MINUTO PARA COMEÇAR
          </p>
        </div>
      </div>
    </section>
  );
}

window.CtaIntermediate = CtaIntermediate;
window.CtaFinal = CtaFinal;