/* global React, Reveal, DiamondIcon */

const PROCS = [
{
  num: "01",
  name: "Odontologia Estética",
  items: ["Clareamento dental", "Restaurações em resina", "Limpeza · profilaxia"]
},
{
  num: "02",
  name: "Harmonização Facial",
  items: [
  "Preenchimento labial",
  "Preenchimento de queixo",
  "Preenchimento de nariz",
  "Preenchimento de bigode chinês"]

},
{
  num: "03",
  name: "Rejuvenescimento Facial",
  items: [
  "Botox",
  "Bioestimulador de colágeno",
  "Microagulhamento com exossomos e PDRN",
  "Peeling coreano"]

}];


function Procedimentos({ bgPhoto, density = "default" }) {
  return (
    <section className={`procs density-${density}`} data-screen-label="02 Procedimentos">
      <div className="procs-bg" style={{ backgroundImage: `url(${bgPhoto})` }} />
      <div className="container procs-inner">
        <div className="procs-header">
          <Reveal>
            <h2 className="procs-title">
              Os procedimentos<br />que <em>realizo.</em>
            </h2>
          </Reveal>
          <Reveal delay={1}>
            <p className="procs-sub">

            </p>
          </Reveal>
        </div>

        <div className="procs-grid">
          {PROCS.map((p, i) =>
          <Reveal key={p.num} delay={i + 1} className="proc-card">
              <div className="proc-head">
                <div className="proc-icon"><DiamondIcon /></div>
                <span className="proc-num">{p.num}</span>
              </div>
              <h3 className="proc-name">{p.name}</h3>
              <ul className="proc-list">
                {p.items.map((item) => <li key={item}>{item}</li>)}
              </ul>
            </Reveal>
          )}
        </div>
      </div>
    </section>);

}

window.Procedimentos = Procedimentos;