// Plantas — 5 plantas técnicas Campeche Living (D23 · book oficial ROVE Canva)
// Cada PNG já é a composição planta+foto interior · Rooftop é só planta arquitetônica.

const PLANTAS = [
  { id: "pav4-55",       img: "assets/plantas/planta-01-pav4-1dorm-55m.jpg",  label: "Pavimento 4 · 1 dormitório · 55,80m²" },
  { id: "pav4-studio",   img: "assets/plantas/planta-02-pav4-studio-23m.jpg", label: "Pavimento 4 · Studio · 23,25m²" },
  { id: "pav4-30",       img: "assets/plantas/planta-03-pav4-30m.jpg",        label: "Pavimento 4 · 30,75m²" },
  { id: "rooftop",       img: "assets/plantas/planta-04-rooftop.jpg",         label: "Rooftop · áreas comuns" },
  { id: "cobertura",     img: "assets/plantas/planta-05-cobertura-70m.jpg",   label: "Cobertura · unidade 801 · 70,07m²" },
];

const FloorPlansSection = () => {
  return (
    <section className="section plantas-section" id="plantas" data-screen-label="06 Plantas">
      <div className="container">
        <Reveal>
          <div className="plantas-header">
            <span className="eyebrow">Plantas</span>
            <h2 className="h2 plantas-headline">Plantas técnicas Campeche Living.</h2>
            <p className="lede plantas-lede">
              Cinco tipologias entre pavimentos privativos, cobertura e rooftop — metragens precisas para o seu estudo personalizado.
            </p>
          </div>
        </Reveal>

        <div className="plantas-list">
          {PLANTAS.map((p, i) => (
            <Reveal key={p.id} delay={i * 60}>
              <div className="planta-item">
                <article
                  className="planta-frame"
                  onClick={() => track("planta_view", { id: p.id })}
                  aria-label={p.label}
                >
                  <img
                    className="planta-frame-img"
                    src={p.img}
                    alt={p.label}
                    loading={i < 2 ? "eager" : "lazy"}
                    decoding="async"
                  />
                </article>
                <span className="planta-frame-caption mono">{p.label}</span>
              </div>
            </Reveal>
          ))}
        </div>

        <Reveal delay={300}>
          <div className="plantas-foot">
            <p className="mono plantas-foot-note">
              Metragens exatas, áreas comuns e disponibilidade enviadas no estudo personalizado.
            </p>
            <button
              className="btn btn-primary"
              onClick={() => { track("inline_cta_click", { location: "plantas" }); scrollToId("lead-form-final"); }}
            >
              Receber estudo de planta
              <Icon name="arrowR" size={14} />
            </button>
          </div>
        </Reveal>
      </div>
    </section>
  );
};

Object.assign(window, { FloorPlansSection });