/* Projects.jsx — obras realizadas with filter */
const FILTERS = ["Todas", "Movimiento de suelos", "Tendido de redes", "Hormigón", "Asfalto", "Adoquinado", "Mantenimiento"];
const PROJECTS = [
  { id: "p1", t: "Repavimentación urbana", cat: "Asfalto", loc: "Calle de barrio", year: "2024", meta: "Fresado, carpeta en caliente y compactación", src: "assets/photos/obra-asfalto-rodillo.jpg", big: true },
  { id: "p2", t: "Asfalto urbano en ejecución", cat: "Asfalto", loc: "Calle urbana", year: "2024", meta: "Compactación de carpeta con rodillo", src: "assets/photos/obra-asfalto-urbano-1.jpg" },
  { id: "p2b", t: "Asfalto urbano en ejecución", cat: "Asfalto", loc: "Calle urbana", year: "2024", meta: "Terminadora y cuadrilla colocando carpeta", src: "assets/photos/obra-asfalto-urbano-2.jpg" },
  { id: "p3", t: "Pavimento de hormigón + cordón", cat: "Hormigón", loc: "Playa de maniobras", year: "2024", meta: "Losa de hormigón y cordón cuneta", src: "assets/photos/obra-hormigon-cordon.jpg" },
  { id: "p0", t: "Movimiento de suelos", cat: "Movimiento de suelos", loc: "Obra en ejecución", year: "2024", meta: "Excavación y nivelación con excavadora New Holland", src: "assets/photos/maq-newholland-movsuelos.jpg" },
  { id: "p4", t: "Tendido de redes de servicios", cat: "Tendido de redes", loc: "Zona rural", year: "2023", meta: "Excavación de zanja y colocación de cañerías", src: "assets/photos/obra-caneria-desague.jpg" },
  { id: "p5", t: "Bacheo y terminación", cat: "Mantenimiento", loc: "Avenida urbana", year: "2024", meta: "Bacheo, sellado y terminación con cuadrilla", src: "assets/photos/obra-mantenimiento-cuadrilla.jpg" },
  { id: "p7", t: "Adoquinado de acceso", cat: "Adoquinado", loc: "Playa y acceso", year: "2024", meta: "Colocación de adoquines de hormigón con cordón", src: "assets/photos/obra-adoquinado.jpg" },
];

function ProjectCard({ p }) {
  return (
    <Reveal as="article" className="proj-card" style={{
      gridColumn: p.big ? "span 2" : "span 1",
      display: "flex", flexDirection: "column", background: "var(--paper)", overflow: "hidden",
      border: "1px solid var(--line)", borderRadius: 2,
    }}>
      <div style={{ position: "relative", aspectRatio: p.big ? "16/8.2" : "4/3.1", overflow: "hidden" }}>
        <image-slot id={`proj-${p.id}`} shape="rect" fit="cover" src={p.src}
          style={{ width: "100%", height: "100%" }} placeholder={`Foto · ${p.t}`}></image-slot>
        <span style={{
          position: "absolute", top: 14, left: 14, background: "var(--accent)", color: "var(--on-accent)",
          fontFamily: "var(--font-mono)", fontSize: ".68rem", fontWeight: 600, letterSpacing: ".08em",
          padding: "5px 10px", textTransform: "uppercase",
        }}>{p.cat}</span>
      </div>
      <div style={{ padding: "20px 22px 24px", display: "flex", flexDirection: "column", gap: 6, flex: 1 }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 12 }}>
          <h3 className="display" style={{ fontSize: "clamp(1.2rem,1.9vw,1.55rem)" }}>{p.t}</h3>
        </div>
        <p style={{ color: "var(--ink-2)", fontSize: ".95rem" }}>{p.meta}</p>
        <span style={{ marginTop: "auto", paddingTop: 12, fontFamily: "var(--font-mono)", fontSize: ".78rem", color: "var(--ink-2)", textTransform: "uppercase", letterSpacing: ".06em" }}>◍ {p.loc}</span>
      </div>
    </Reveal>
  );
}

function Projects() {
  const [filter, setFilter] = useState("Todas");
  const shown = PROJECTS.filter((p) => filter === "Todas" || p.cat === filter);
  return (
    <section id="obras" className="sec-pad" style={{ background: "var(--paper-2)" }}>
      <div className="wrap">
        <Reveal style={{ display: "flex", flexWrap: "wrap", justifyContent: "space-between", alignItems: "flex-end", gap: 24 }}>
          <SecHead num="02" kicker="Obras realizadas" title="Lo que dejamos hecho" max={560} />
          <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
            {FILTERS.map((f) => (
              <button key={f} onClick={() => setFilter(f)} style={{
                fontFamily: "var(--font-mono)", fontSize: ".78rem", fontWeight: 500, letterSpacing: ".04em",
                padding: "8px 14px", borderRadius: 999, textTransform: "uppercase",
                border: "1px solid " + (filter === f ? "var(--ink)" : "var(--line)"),
                background: filter === f ? "var(--ink)" : "transparent",
                color: filter === f ? "var(--paper)" : "var(--ink-2)", transition: "all .18s ease",
              }}>{f}</button>
            ))}
          </div>
        </Reveal>

        <div className="proj-grid" style={{
          marginTop: "clamp(32px,4vw,52px)", display: "grid",
          gridTemplateColumns: "repeat(2,1fr)", gap: "clamp(16px,2vw,24px)",
        }}>
          {shown.map((p) => <ProjectCard key={p.id} p={p} />)}
        </div>
      </div>
      <style>{`
        @media (max-width:720px){
          .proj-grid{grid-template-columns:1fr!important}
          .proj-card{grid-column:span 1!important}
        }
      `}</style>
    </section>
  );
}
Object.assign(window, { Projects });