// ciclo. — Como funciona (3 steps)

const How = () => (
  <section id="como" className="how section">
    <div className="container">
      <div className="how-head">
        <div>
          <span className="eyebrow"><span className="dot"/>como funciona</span>
          <h2 className="section-h1">
            três passos. depois disso, <em>nunca mais.</em>
          </h2>
        </div>
        <div className="how-intro">
          <p>
            o quiz dura dois minutos. a gente monta um kit do seu tamanho,
            entrega no domingo e ajusta sozinho mês a mês. você só abre
            a porta.
          </p>
        </div>
      </div>

      <div className="steps">
        <article className="step">
          <span className="step-n">01 · responde</span>
          <h3 className="step-ttl">
            o <span className="em">quiz</span> de 2 min descobre seu ritmo de casa.
          </h3>
          <div className="step-art">
            <div className="art-quiz">
              <div className="pill" style={{width: 64}}/>
              <div className="pill on" style={{width: 92}}/>
              <div className="pill" style={{width: 48}}/>
              <div className="pill em" style={{width: 78}}/>
              <div className="pill" style={{width: 56}}/>
            </div>
          </div>
          <p className="step-sub">
            cep, tamanho da casa, o que mais acaba primeiro. dez perguntas
            e você fica.
          </p>
        </article>

        <article className="step">
          <span className="step-n">02 · monta</span>
          <h3 className="step-ttl">
            a gente <span className="em">monta</span> seu kit do trimestre.
          </h3>
          <div className="step-art">
            <div className="art-kit" aria-hidden>
              <div className="col" style={{height: 36}}/>
              <div className="col" style={{height: 56}}/>
              <div className="col" style={{height: 72}}/>
              <div className="cap" style={{height: 84}}/>
              <div className="col" style={{height: 60}}/>
              <div className="col" style={{height: 44}}/>
              <div className="col" style={{height: 80}}/>
              <div className="cap" style={{height: 50}}/>
            </div>
          </div>
          <p className="step-sub">
            sacos, refis, limpeza, papel — calibrado pra 3 meses
            exatos. recalcula a cada trimestre com base no consumo real.
          </p>
        </article>

        <article className="step">
          <span className="step-n">03 · entrega</span>
          <h3 className="step-ttl">
            chega no seu <span className="em">domingo</span> — só de 3 em 3 meses.
          </h3>
          <div className="step-art">
            <div className="art-truck" aria-hidden>
              <div className="line"/>
              <div className="moving"><Icon name="truck" size={16}/></div>
            </div>
          </div>
          <p className="step-sub">
            o kit chega num domingo, das 9h às 18h. dura 3 meses, exato.
            no fim do trimestre, a gente avisa — e o próximo domingo já
            tá agendado.
          </p>
        </article>
      </div>
    </div>
  </section>
);

window.How = How;