const { Badge } = window.BuildingInvestDesignSystem_f8840b;

const CAT_CODES = ["all", "civil", "corporate", "public", "church"];
const CAT_ICONS = { all: "layout-grid", civil: "user", corporate: "briefcase", public: "scale", church: "landmark" };

function Projects({ onOpenProject, lang }) {
  const t = window.I18N[lang];
  const [cat, setCat] = React.useState("all");
  const width = useViewportWidth();
  const cardCols = width < 640 ? 1 : width < 960 ? 2 : 3;
  let list = [...window.BI_DATA[lang].projects].sort((a, b) => (b.image ? 1 : 0) - (a.image ? 1 : 0));
  if (cat !== "all") list = list.filter((p) => p.cat === cat);
  return <>
    <div style={{ background: "var(--surface-card)", borderBottom: "1px solid var(--border-color)" }}>
      <Container style={{ padding: "var(--space-10) var(--page-margin-lg) var(--space-6)" }}>
        <div style={{ display: "flex", flexDirection: "column", gap: "var(--space-5)", maxWidth: "var(--container-md)", marginBottom: "var(--space-8)" }}>
          <SectionLabel>{t.projects.label}</SectionLabel>
          <h1 style={{ font: "var(--type-h1)", letterSpacing: "var(--tracking-tight)" }}>{t.projects.h1}</h1>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: `repeat(${width < 640 ? 2 : CAT_CODES.length}, 1fr)`, gap: "var(--space-3)" }}>
          {CAT_CODES.map((c) => (
            <Tile key={c} icon={CAT_ICONS[c]} label={t.projects.categories[c]} active={c === cat} onClick={() => setCat(c)} />
          ))}
        </div>
      </Container>
    </div>
    <Section tone="sunken">
      <div style={{ display: "grid", gridTemplateColumns: `repeat(${cardCols},1fr)`, gap: "var(--gutter)" }}>
        {list.map((p) => (
          <div key={p.id} onClick={() => onOpenProject(p.id)} style={{ cursor: "pointer", display: "flex", flexDirection: "column", gap: "var(--space-4)" }}>
            <ProjectImage ratio="4 / 3" src={p.image} label={t.common.photoPrefix + t.projects.categories[p.cat].toUpperCase()} />
            <div style={{ display: "flex", alignItems: "center", gap: "var(--space-3)" }}>
              <Badge tone={p.status === "done" ? "neutral" : "success"} dot>{t.projects.status[p.status]}</Badge>
              <span style={{ font: "var(--type-mono)", fontSize: 11, color: "var(--text-tertiary)" }}>{p.year} · {p.area}</span>
            </div>
            <h3 style={{ font: "var(--weight-regular) var(--text-lg)/1.25 var(--font-display)" }}>{p.title}</h3>
            <p style={{ font: "var(--type-body-sm)", color: "var(--text-secondary)" }}>{p.lead}</p>
          </div>
        ))}
        {list.length === 0 ? <p style={{ font: "var(--type-body)", color: "var(--text-tertiary)" }}>{t.projects.noResults}</p> : null}
      </div>
    </Section>
  </>;
}

Object.assign(window, { Projects });