/* ============================================================
   FLOREA GRUP — Projects (filterable)
   ============================================================ */
function Projects() {
  const { L, lang } = useL();
  const [cat, setCat] = useState("all");
  const cats = FG.PROJ_CATS;
  const items = cat === "all" ? FG.PROJECTS : FG.PROJECTS.filter(p => p.cat === cat);

  return (
    <main>
      <PageHero crumb={L(FG.UI.nav_projects)}
        title={L({ ro: "Proiecte care construiesc România", en: "Projects that build Romania" })}
        sub={L({ ro: "Drumuri naționale, autostrăzi, platforme industriale, centre comerciale și patrimoniu — executate de la fundație la finisaj.",
                 en: "National roads, motorways, industrial platforms, commercial centres and heritage — delivered from foundation to finish." })} />
      <section className="section--tight">
        <div className="wrap">
          <div className="filters">
            <button className={"filter" + (cat === "all" ? " is-active" : "")} onClick={() => setCat("all")}>{L(FG.UI.all)}</button>
            {cats.map(c => (
              <button key={c.id} className={"filter" + (cat === c.id ? " is-active" : "")} onClick={() => setCat(c.id)}>{c[lang]}</button>
            ))}
          </div>
          <div className="proj-masonry">
            {items.map((p, i) => <ProjectCard key={p.title.ro} p={p} i={i} big={p.big} />)}
          </div>
          {items.length === 0 && <p className="muted center" style={{ padding: "3rem 0" }}>{L({ ro: "Niciun proiect în această categorie.", en: "No projects in this category." })}</p>}
        </div>
      </section>
      <CTABand />
    </main>
  );
}
Object.assign(window, { Projects });