// Selva Studio — Work page (full grid with filters + density modes)
function WorkPage({ lang, openProject, tweaks }) {
const all = window.SELVA_DATA.projects;
const [filter, setFilter] = React.useState("all");
const density = tweaks.workGrid || "asym";
const cats = Array.from(new Set(all.map(p => p.category)));
const dirs = Array.from(new Set(all.map(p => p.director)));
const filtered = all.filter(p => {
if (filter === "all") return true;
return p.category === filter || p.director === filter;
});
return (
Archivo · {all.length} piezas
{lang === "es" ? "Proyectos" : "Work"}
{lang === "es"
? "Comerciales, brand films, música, documental. Dieciocho años filmando entre Ciudad de México y el mundo."
: "Commercials, brand films, music, documentary. Eighteen years filming between Mexico City and the world."}
);
}
function FilterPill({ active, onClick, children }) {
return (
);
}
// Asymmetric — rows of 3 with first of each rotation larger
function AsymGrid({ items, openProject, lang }) {
// Build rows of varied spans
const rows = [];
let i = 0;
const patterns = [[7,5], [5,7], [4,4,4]];
let pat = 0;
while (i < items.length) {
const p = patterns[pat % patterns.length];
rows.push(items.slice(i, i + p.length).map((proj, j) => ({ proj, span: p[j] })));
i += p.length; pat++;
}
return (