import { r as reactExports, U as jsxRuntimeExports } from "./worker-entry-ScJyyKL-.js";
import { u as useDynamicSeo, S as SiteLayout, a as SectionHeading } from "./useDynamicSeo-BdCqOywQ.js";
import { s as supabase, c as cn } from "./client-Dez4i5AL.js";
import "node:events";
import "node:async_hooks";
import "node:stream/web";
import "node:stream";
import "./router-DeIlR9yC.js";
import "./x-D4p4UALn.js";
import "./createLucideIcon-CzafGoM5.js";
const filters = [{
  id: "all",
  label: "All Work"
}, {
  id: "feature_film",
  label: "Feature Films"
}, {
  id: "short_film",
  label: "Short Films"
}, {
  id: "tvc",
  label: "TVCs"
}, {
  id: "digital_ad",
  label: "Digital"
}, {
  id: "event",
  label: "Events"
}];
function WorkPage() {
  useDynamicSeo("/work");
  const [projects, setProjects] = reactExports.useState([]);
  const [filter, setFilter] = reactExports.useState("all");
  reactExports.useEffect(() => {
    supabase.from("projects").select("*").eq("published", true).order("year", {
      ascending: false
    }).order("sort_order").then(({
      data
    }) => setProjects(data ?? []));
  }, []);
  const visible = filter === "all" ? projects : projects.filter((p) => p.category === filter);
  return /* @__PURE__ */ jsxRuntimeExports.jsx(SiteLayout, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("section", { className: "py-20 md:py-28", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "container mx-auto px-5 md:px-10", children: [
    /* @__PURE__ */ jsxRuntimeExports.jsx(SectionHeading, { eyebrow: "Portfolio", title: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
      "The work that ",
      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "italic text-gradient-gold", children: "moves us." })
    ] }), description: "A selection of films, TVCs, digital campaigns and events crafted with intention." }),
    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-wrap gap-2 mt-12 border-b border-border pb-px", children: filters.map((f) => /* @__PURE__ */ jsxRuntimeExports.jsx("button", { onClick: () => setFilter(f.id), className: cn("px-4 py-3 text-xs uppercase tracking-widest transition-colors border-b-2 -mb-px", filter === f.id ? "border-gold text-gold" : "border-transparent text-muted-foreground hover:text-foreground"), children: f.label }, f.id)) }),
    visible.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "py-32 text-center", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "text-muted-foreground", children: [
      "Our portfolio is being curated. Check back soon, or",
      " ",
      /* @__PURE__ */ jsxRuntimeExports.jsx("a", { href: "/contact", className: "text-gold hover:underline", children: "get in touch" }),
      "."
    ] }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid md:grid-cols-2 lg:grid-cols-3 gap-6 mt-12", children: visible.map((p) => /* @__PURE__ */ jsxRuntimeExports.jsxs("article", { className: "group", children: [
      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative aspect-[4/5] overflow-hidden bg-onyx hover-lift", children: [
        p.poster_url ? /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: p.poster_url, alt: p.title, className: "w-full h-full object-cover transition-transform duration-700 group-hover:scale-105", loading: "lazy" }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-full h-full bg-gradient-to-br from-onyx to-background flex items-center justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-display text-3xl text-gold/40", children: p.title[0] }) }),
        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-0 bg-gradient-to-t from-background to-transparent opacity-80" })
      ] }),
      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-5", children: [
        /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "text-xs uppercase tracking-widest text-gold", children: [
          p.category.replace("_", " "),
          " ",
          p.year ? `· ${p.year}` : ""
        ] }),
        /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "font-display text-2xl mt-2 text-foreground", children: p.title }),
        p.client && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-muted-foreground mt-1", children: p.client }),
        p.description && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-muted-foreground mt-3 line-clamp-2", children: p.description })
      ] })
    ] }, p.id)) })
  ] }) }) });
}
export {
  WorkPage as component
};
