const DSP = window.ConstruimosTuEdificioDesignSystem_3f039f;
const D_P = window.CTE_DATA;

function ProjectsPage({ onNavigate }) {
  const { ProjectCard, Pill, SectionHeading } = DSP;
  const types = ["Todos", ...Array.from(new Set(D_P.projects.map(p => p.type)))];
  const [t, setT] = React.useState("Todos");
  const list = t === "Todos" ? D_P.projects : D_P.projects.filter(p => p.type === t);
  return (
    <React.Fragment>
      <PageHero image={D_P.photos.serviceHero}
        title="Proyectos construidos y en desarrollo"
        subtitle="Edificios residenciales, torres de departamentos y desarrollos verticales en distintas ciudades del país."
        crumbs={[{ label: "Inicio", href: "/" }, { label: "Proyectos" }]} />
      <section className="section container reveal">
        <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginBottom: 40 }}>
          {types.map(x => (
            <button key={x} type="button" onClick={() => setT(x)} style={{
              padding: "9px 16px", borderRadius: "var(--radius-pill)", cursor: "pointer",
              fontFamily: "var(--font-mono)", fontSize: "var(--text-2xs)", textTransform: "uppercase", letterSpacing: "var(--track-eyebrow)",
              background: t === x ? "var(--concrete-900)" : "var(--concrete-0)",
              color: t === x ? "var(--text-inverse)" : "var(--text-body)",
              border: "1px solid " + (t === x ? "transparent" : "var(--border-subtle)")
            }}>{x}</button>
          ))}
        </div>
        <div className="grid g3">
          {list.map(p => <ProjectCard key={p.name} {...p} description={p.desc} href="#" />)}
        </div>
        <p style={{ marginTop: 40, fontFamily: "var(--font-mono)", fontSize: "var(--text-2xs)", textTransform: "uppercase", letterSpacing: "var(--track-eyebrow)", color: "var(--text-faint)" }}>
          Estructura preparada para páginas individuales de proyecto — /proyectos/<slug>/
        </p>
      </section>
      <TestimonialsSection />
      <FinalCTA onNavigate={onNavigate} />
    </React.Fragment>
  );
}
Object.assign(window, { ProjectsPage });