// Verkaufsportfolio — gallery grid with availability filter.
function JHPortfolio({ initialFilter = "all", onOpen }) {
  const { SectionLabel, Tag, ArtworkCard, Button } = window.JasminHaasDesignSystem_416321;
  const Reveal = window.JHReveal;
  const works = window.JH_ARTWORKS;
  const [filter, setFilter] = React.useState(initialFilter);
  React.useEffect(() => setFilter(initialFilter), [initialFilter]);

  const filters = [
    { id: "all", label: "Alle Werke" },
    { id: "available", label: "Verfügbar" },
    { id: "reserved", label: "Reserviert" },
    { id: "sold", label: "Verkauft" },
  ];
  const shown = works.filter((w) => filter === "all" ? true : w.status === filter);

  const heading = filter === "sold"
    ? { eyebrow: "Verkaufte Werke", title: "Werke, die bereits ein Zuhause fanden" }
    : { eyebrow: "Verkaufsportfolio", title: "Eine Auswahl meiner Werke" };

  return (
    <div style={{ background: "var(--bg-paper)", paddingTop: "calc(86px + var(--space-12))", minHeight: "100vh" }}>
      <div style={{ maxWidth: "var(--content-max)", margin: "0 auto", padding: "0 var(--gutter) var(--section-y)" }}>
        <Reveal>
          <SectionLabel eyebrow={heading.eyebrow} title={heading.title} />
          <p style={{ margin: "22px 0 0", maxWidth: "var(--measure)", fontFamily: "var(--font-sans)", fontSize: "1.05rem", lineHeight: 1.7, color: "var(--text-secondary)" }}>
            Neben individuellen Auftragsarbeiten biete ich eine Auswahl bereits fertiggestellter Gemälde an. Bei Interesse nehmen Sie gerne Kontakt mit mir auf.
          </p>
        </Reveal>

        {/* Filter bar */}
        <div style={{ display: "flex", alignItems: "center", gap: "10px", flexWrap: "wrap", margin: "38px 0 clamp(34px, 4vw, 52px)", paddingBottom: "22px", borderBottom: "1px solid var(--line)" }}>
          {filters.map((f) => {
            const active = filter === f.id;
            return (
              <button key={f.id} onClick={() => setFilter(f.id)}
                style={{
                  cursor: "pointer", borderRadius: "var(--radius-pill)",
                  padding: "9px 18px", fontFamily: "var(--font-sans)", fontSize: "0.7rem",
                  fontWeight: 600, letterSpacing: "0.14em", textTransform: "uppercase",
                  background: active ? "var(--ink-900)" : "transparent",
                  color: active ? "var(--linen-100)" : "var(--text-secondary)",
                  border: "1px solid " + (active ? "var(--ink-900)" : "var(--line-strong)"),
                  transition: "all var(--dur-base) var(--ease-gallery)",
                }}>
                {f.label}
              </button>
            );
          })}
          <span style={{ marginLeft: "auto", fontFamily: "var(--font-sans)", fontSize: "0.78rem", color: "var(--text-muted)" }}>
            {shown.length} {shown.length === 1 ? "Werk" : "Werke"}
          </span>
        </div>

        {/* Masonry gallery */}
        <div style={{ columnWidth: "300px", columnGap: "clamp(24px, 3vw, 44px)" }}>
          {shown.map((w, i) => (
            <Reveal key={w.id} delay={(i % 3) * 70} style={{ breakInside: "avoid", marginBottom: "clamp(30px, 3.5vw, 52px)" }}>
              <ArtworkCard image={w.img} title={w.title} year={w.year} dimensions={w.w} status={w.status} price={w.price} ratio={w.ratio} onClick={() => onOpen(w.id)} />
            </Reveal>
          ))}
        </div>

        {shown.length === 0 ? (
          <div style={{ textAlign: "center", padding: "80px 0", fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: "1.4rem", color: "var(--text-muted)" }}>
            Keine Werke in dieser Kategorie.
          </div>
        ) : null}
      </div>
    </div>
  );
}
window.JHPortfolio = JHPortfolio;