/* Work listing with topic filters. */

function Work({ onOpen }) {
  const { ProjectCard } = window.ArchDailyDesignSystem_788ad7;
  const shown = window.ADBIZ.work;

  return (
    <div>
      <section style={{ background: "var(--surface-card)" }}>
        <Container style={{ padding: "var(--space-8) var(--space-6) var(--space-6)" }}>
          <Eyebrow>Case Studies</Eyebrow>
          <h1 style={{ fontSize: "var(--fs-h1)", letterSpacing: "var(--ls-tight)", margin: "var(--space-3) 0 var(--space-3)", maxWidth: 640 }}>
            Partnerships in practice
          </h1>
          <p className="ad-lead" style={{ margin: "0 0 var(--space-6)", maxWidth: 600 }}>
            A selection of campaigns, catalogs, and activations from the brands already part of ArchDaily.
          </p>
        </Container>
      </section>

      <section style={{ padding: "var(--space-7) 0 0" }}>
        <Container>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "var(--space-5)" }}>
            {shown.map((w) => (
              <ProjectCard key={w.id}
                image={w.img}
                kicker={w.kicker}
                title={w.title}
                office={w.client}
                location={w.location}
                badge={w.badge}
                badgeVariant={w.badgeVariant}
                href={caseHref(w.id)}
                onClick={(e) => { e.preventDefault(); onOpen(w.id); }}
              />
            ))}
          </div>
        </Container>
      </section>
    </div>
  );
}

Object.assign(window, { Work });