/* ============================================================
   PARCELLE CANVAS — illustrations de la section "Fonctionnement"
   4 visuels (adresse, zonage, projet, démarche) avec crossfade.
   ============================================================ */

const STEP_IMAGES = [
  { src: "assets/adresse.png",  alt: "L'habitant saisit son adresse" },
  { src: "assets/zonage.png",   alt: "Zonage du PLU appliqué" },
  { src: "assets/Chat.png",     alt: "Le projet décrit en langage naturel" },
  { src: "assets/demarche.png", alt: "Qualification de la démarche" }
];

function ParcelleCanvas({ step }) {
  return (
    <div className="how-canvas-stack">
      {STEP_IMAGES.map((img, i) => (
        <img
          key={i}
          src={img.src}
          alt={img.alt}
          className={"how-canvas-img " + (i === step ? "is-active" : "")}
          loading={i === 0 ? "eager" : "lazy"}
        />
      ))}
    </div>
  );
}

window.ParcelleCanvas = ParcelleCanvas;