/* Machinery.jsx — equipamiento (dark band) */
const FLEET = [
  { t: "Terminadora de asfalto", d: "Colocación de carpeta en caliente", src: "assets/photos/maq-terminadora.jpg" },
  { t: "Motoniveladora", d: "Nivelación y perfilado de precisión", src: "assets/photos/maq-motoniveladora-h.jpg" },
  { t: "Pala cargadora frontal", d: "Carga de áridos y movimiento de material", src: "assets/photos/maq-pala-cargadora.jpg" },
  { t: "Tractocamión con batea", d: "Logística de carga pesada", src: "assets/photos/maq-camion-volcador.jpg" },
  { t: "Retroexcavadora", d: "Excavación sobre orugas New Holland E175C", src: "assets/photos/maq-retroexcavadora.jpg" },
  { t: "Retropala", d: "Excavación y carga, frente y retro", src: "assets/photos/maq-retropala.jpg" },
  { t: "Rodillo combinado", d: "Compactación de base y asfalto", src: "assets/photos/maq-rodillo-combinado.jpg" },
  { t: "Rodillo doble tambor", d: "Compactación lisa de carpeta", src: "assets/photos/maq-rodillo-doble-tambor.jpg" },
  { t: "Minicargadora", d: "Trabajos en espacios reducidos", src: "assets/photos/maq-minicargadora.jpg" },
];

function Machinery() {
  return (
    <section id="maquinaria" className="sec-pad dark-band" style={{ background: "var(--dark)", color: "var(--on-dark)" }}>
      <div className="wrap">
        <Reveal style={{ display: "flex", flexWrap: "wrap", justifyContent: "space-between", alignItems: "flex-end", gap: 24 }}>
          <SecHead num="04" kicker="Maquinaria" title="Flota propia, lista para entrar" onDark max={560} />
          <p style={{ maxWidth: 340, color: "var(--on-dark-2)", fontSize: "1rem" }}>
            Equipos propios con mantenimiento al día. Menos esperas, más obra en marcha.
          </p>
        </Reveal>

        <div className="fleet-grid" style={{
          marginTop: "clamp(34px,4vw,54px)", display: "grid",
          gridTemplateColumns: "repeat(3,1fr)", gap: "clamp(14px,2vw,22px)",
        }}>
          {FLEET.map((f, i) => (
            <Reveal key={f.t} delay={(i % 3) * 70} style={{
              border: "1px solid var(--line-dark)", borderRadius: 3, overflow: "hidden",
              background: "var(--dark-2)",
            }}>
              <div style={{ position: "relative", aspectRatio: "16/10", overflow: "hidden" }}>
                <image-slot id={`fleet-${i}`} shape="rect" fit="cover" src={f.src}
                  style={{ width: "100%", height: "100%" }} placeholder={f.t}></image-slot>
              </div>
              <div style={{ padding: "16px 18px", display: "flex", justifyContent: "space-between", alignItems: "center", gap: 12 }}>
                <div>
                  <h3 className="display" style={{ fontSize: "1.15rem", color: "var(--on-dark)" }}>{f.t}</h3>
                  <p style={{ color: "var(--on-dark-2)", fontSize: ".88rem", marginTop: 2 }}>{f.d}</p>
                </div>
                <span style={{ fontFamily: "var(--font-mono)", fontSize: ".74rem", color: "var(--accent)" }}>{String(i + 1).padStart(2, "0")}</span>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width:920px){ .fleet-grid{grid-template-columns:repeat(2,1fr)!important} }
        @media (max-width:520px){ .fleet-grid{grid-template-columns:1fr!important} }
      `}</style>
    </section>
  );
}
Object.assign(window, { Machinery });