// ciclo. — Plans

const Plans = () => (
  <section id="planos" className="plans section">
    <div className="container">
      <div className="plans-head">
        <div>
          <span className="eyebrow"><span className="dot"/>planos</span>
          <h2 className="section-h1">
            dois tamanhos. <em>cancela quando quiser.</em>
          </h2>
        </div>
        <p style={{maxWidth: 380, fontSize: 16, color: 'var(--gray-700)', lineHeight: 1.55}}>
          o quiz recomenda um deles, mas você pode trocar a qualquer
          momento. o preço é fixo, o frete é grátis e a primeira
          entrega chega no próximo domingo.
        </p>
      </div>

      <div className="plans-grid">
        <article className="plan">
          <span className="plan-name">essencial</span>
          <div className="price">R$ <b>397</b><span>/trimestre</span></div>
          <p className="plan-desc">para quem mora sozinho ou em dupla.</p>
          <ul className="plan-bullets">
            <li>~ 7 itens, 3 meses de uso</li>
            <li>sacos de lixo, multiuso, lava-louças, papel</li>
            <li>1 troca de item por trimestre</li>
            <li>pula trimestres quando precisar</li>
          </ul>
          <div className="plan-cta">
            <a href="#quiz" className="btn btn-secondary">começar essencial</a>
          </div>
          <div className="plan-meta">~ r$ 132 / mês · pago em 3x sem juros</div>
        </article>

        <article className="plan dark">
          <span className="plan-tag"><span className="dot"/>recomendado</span>
          <span className="plan-name">premium</span>
          <div className="price">R$ <b>597</b><span>/trimestre</span></div>
          <p className="plan-desc">para casa cheia, animal, criança, festa.</p>
          <ul className="plan-bullets">
            <li>~ 14 itens, 3 meses de uso</li>
            <li>refis, amaciante, desinfetante, sabão em barra</li>
            <li>trocas ilimitadas pelo app</li>
            <li>extras avulsos com 15% off</li>
            <li>kits temáticos a cada estação</li>
          </ul>
          <div className="plan-cta">
            <a href="#quiz" className="btn btn-on-em">começar premium</a>
          </div>
          <div className="plan-meta">~ r$ 199 / mês · economia média 22%</div>
        </article>
      </div>
    </div>
  </section>
);

window.Plans = Plans;