// ciclo. — Kit editorial section

const Kit = () => (
  <section id="kit" className="kitsec section">
    <div className="container">
      <div className="kitsec-grid">
        <div className="kitsec-copy">
          <span className="eyebrow"><span className="dot"/>o que vem no kit</span>
          <h2 className="section-h1">
            essencial, sem <em>excesso</em>.
          </h2>
          <p>
            cada kit é montado pra durar exatamente um trimestre. nem
            sobra no armário, nem falta na quarta. se o consumo muda, o
            próximo kit muda junto — automático.
          </p>
          <p>
            tudo brasileiro, marcas que a gente confia, refis que evitam
            embalagem nova. você troca itens pelo app a qualquer momento,
            até 7 dias antes do próximo domingo.
          </p>
          <ul className="kit-list">
            <li>sacos de lixo</li>
            <li>multiuso · refil</li>
            <li>lava-louças</li>
            <li>amaciante</li>
            <li>esponja dupla</li>
            <li>papel toalha</li>
            <li>desinfetante</li>
            <li>sabão em barra</li>
          </ul>
        </div>

        <div className="kit-card-big">
          <div className="kit-card-head">
            <span className="num">kit 0312 · ana, vila madalena</span>
            <span className="when">domingo · 12.05 · 3 meses</span>
          </div>
          <div className="kit-rows">
            {[
              ["sacos de lixo · 30L", "12 rolos"],
              ["lava-louças · refil",  "3 L"],
              ["multiuso · refil",     "1.5 L"],
              ["amaciante",            "4.5 L"],
              ["esponja dupla",        "12 un"],
              ["papel toalha",         "8 rolos"],
              ["sabão em barra",       "15 un"],
            ].map(([l, q]) => (
              <div className="kit-row" key={l}>
                <span className="tick"><Icon name="check" size={14}/></span>
                <span className="lbl">{l}</span>
                <span className="qty">{q}</span>
              </div>
            ))}
          </div>
          <div className="kit-card-foot">
            <span className="mono">7,2 kg · 7 itens · 3 meses</span>
            <span className="arrow">chega domingo <Icon name="arrow-right" size={14}/></span>
          </div>
        </div>
      </div>
    </div>
  </section>
);

window.Kit = Kit;