/* ============================================================
   3DAX — Process / About (taller 3D + confianza Etsy)
   ============================================================ */
function Process(){
  const { STATS, PROCESS } = window.DATA;
  return (
    <section className="proceso section grain" id="proceso" data-screen-label="Taller">
      <div className="blob" style={{ width:520, height:520, top:"6%", left:"-8%", background:"rgba(240,72,154,.11)" }} />
      <div className="wrap">

        {/* stats band */}
        <Reveal className="stats">
          {STATS.map((s, i) => (
            <div className="stats__item" key={i}>
              <div className="stats__value display">{s.value}</div>
              <div className="stats__label">{s.label}</div>
            </div>
          ))}
        </Reveal>

        <div className="proceso__head">
          <Reveal>
            <div className="eyebrow">Del taller a tu estantería</div>
            <h2 className="display proceso__title">No fabricamos cajas.<br/>Esculpimos <em>piezas</em>.</h2>
          </Reveal>
          <Reveal delay={120} className="proceso__intro">
            <p className="lead">
              3DAX nació en una impresora de garaje y una obsesión: que guardar tus cartas
              fuese tan especial como jugarlas. Cada deckbox pasa por nuestras manos antes de
              llegar a las tuyas.
            </p>
          </Reveal>
        </div>

        {/* process steps */}
        <div className="proceso__steps">
          {PROCESS.map((p, i) => (
            <Reveal key={i} delay={i*120} className="pstep">
              <div className="pstep__n">{p.n}</div>
              <h3 className="pstep__title">{p.title}</h3>
              <p className="pstep__text">{p.text}</p>
            </Reveal>
          ))}
        </div>

        {/* Etsy trust block */}
        <Reveal className="etsy">
          <div className="etsy__media">
            <img src="assets/products/chopper-exploded.png" alt="Deckbox 3DAX desmontada en sus tres piezas" className="prod-shadow" />
          </div>
          <div className="etsy__copy">
            <div className="chip"><span className="dot" /> Tienda verificada</div>
            <h3 className="display etsy__title">+400 piratas ya<br/>confían en 3DAX</h3>
            <p className="lead">
              Empezamos vendiendo en Etsy y ahí construimos nuestra reputación: más de
              <strong> 400 ventas</strong> y una valoración media de <strong>4.9★</strong>.
              Ahora damos el salto a tienda propia — mismo cuidado, mejor experiencia.
            </p>
            <div className="etsy__row">
              <div className="etsy__score">
                <Stars value={5} size={18} />
                <span><strong>4.9</strong> · cientos de reseñas</span>
              </div>
              <a className="btn btn-ghost" href="https://3daxofficial.etsy.com" target="_blank" rel="noopener">
                Ver en Etsy <span className="arr">↗</span>
              </a>
            </div>
          </div>
        </Reveal>

      </div>
    </section>
  );
}
window.Process = Process;