function PricingSection() {
  const included = [
    'Registro ilimitado de gastos e recebimentos',
    'Faturas e importação de PDF',
    'Análises completas',
    'Histórico financeiro'
  ];

  return (
    <section id="planos" className="pricing-section">
      <div className="container">
        <div className="section-header pricing-header">
          <div className="eyebrow"><span className="dot" />2 meses grátis</div>
          <h2>Teste o Econome antes de colocar mais uma assinatura no orçamento.</h2>
          <p>
            Use todos os recursos por 60 dias, sem cartão de crédito e sem compromisso. A ideia é simples: primeiro você entende se o Econome realmente ajuda no seu controle financeiro. Depois, se fizer sentido, escolhe um plano.
          </p>
        </div>

        <div className="pricing-grid">
          <article className="pricing-card pricing-card-trial">
            <div className="pricing-card-top">
              <div>
                <span className="pricing-kicker">Teste grátis</span>
                <h3>R$ 0</h3>
                <p className="pricing-period">por 60 dias</p>
              </div>
              <div className="pricing-icon pricing-icon-green">
                <Icon.Check size={20} color="white" />
              </div>
            </div>

            <div className="pricing-pill">Sem cartão de crédito</div>

            <p className="pricing-text">
              Durante o período gratuito, você pode registrar gastos e recebimentos, acompanhar o mês atual, importar faturas, visualizar análises e entender melhor seus hábitos.
            </p>

            <a href="https://app.econome.com.br/register" className="btn btn-green pricing-button">
              Começar grátis
              <Icon.ArrowRight size={16} />
            </a>

            <p className="pricing-microcopy">
              Você só assina depois, se quiser continuar usando as funções principais.
            </p>
          </article>

          <article className="pricing-card">
            <div className="pricing-card-top">
              <div>
                <span className="pricing-kicker">Mensal</span>
                <h3>R$ 9,90</h3>
                <p className="pricing-period">por mês</p>
              </div>
            </div>

            <p className="pricing-text">
              Para quem prefere manter flexibilidade e continuar usando o Econome mês a mês.
            </p>

            <ul className="pricing-list">
              {included.map(item => (
                <li key={item}>
                  <Icon.Check size={15} color="var(--green-deep)" />
                  <span>{item}</span>
                </li>
              ))}
            </ul>

            <a href="https://app.econome.com.br/register" className="btn btn-outline pricing-button">
              Começar grátis
            </a>
          </article>

          <article className="pricing-card pricing-card-featured">
            <div className="pricing-badge">Melhor escolha</div>

            <div className="pricing-card-top">
              <div>
                <span className="pricing-kicker">Anual</span>
                <h3>R$ 79,90</h3>
                <p className="pricing-period">por ano</p>
              </div>
            </div>

            <p className="pricing-text">
              Menos de R$ 6,70 por mês para manter seu controle financeiro ativo durante o ano todo.
            </p>

            <ul className="pricing-list">
              <li>
                <Icon.Check size={15} color="var(--green-deep)" />
                <span>Todos os recursos do plano mensal</span>
              </li>
              <li>
                <Icon.Check size={15} color="var(--green-deep)" />
                <span>Melhor custo-benefício</span>
              </li>
              <li>
                <Icon.Check size={15} color="var(--green-deep)" />
                <span>Ideal para transformar controle financeiro em hábito</span>
              </li>
            </ul>

            <a href="https://app.econome.com.br/register" className="btn btn-primary pricing-button">
              Começar grátis
              <Icon.ArrowRight size={16} />
            </a>
          </article>
        </div>

        <div className="pricing-note">
          <strong>Depois dos 60 dias grátis:</strong>
          <span> se você não assinar, seus dados continuam acessíveis para consulta. Apenas as funções principais de registro, importação e análises completas ficam disponíveis para assinantes.</span>
        </div>
      </div>
    </section>
  );
}

window.PricingSection = PricingSection;