import { jsxs, Fragment, jsx } from "react/jsx-runtime";
import { Link } from "@tanstack/react-router";
import { motion, AnimatePresence } from "motion/react";
import { useState } from "react";
import { ExternalLink, ArrowRight } from "lucide-react";
import { P as PROJECTS, a as PROJECT_CATEGORIES, c as cn, B as Button } from "./router-CCW7InyN.js";
import { P as PageHero } from "./PageHero-CnZoXXfm.js";
import "@tanstack/react-query";
import "@radix-ui/react-slot";
import "class-variance-authority";
import "clsx";
import "tailwind-merge";
import "sonner";
function PortfolioPage() {
  const [filter, setFilter] = useState("All");
  const filtered = filter === "All" ? PROJECTS : PROJECTS.filter((p) => p.category === filter);
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    /* @__PURE__ */ jsx(PageHero, { eyebrow: "Portfolio", title: "Selected work across the stack", subtitle: "A mix of client work and product launches. Use the filters to narrow by category." }),
    /* @__PURE__ */ jsx("section", { className: "py-16", children: /* @__PURE__ */ jsxs("div", { className: "container-px mx-auto max-w-7xl", children: [
      /* @__PURE__ */ jsx("div", { className: "mb-10 flex flex-wrap justify-center gap-2", children: PROJECT_CATEGORIES.map((c) => /* @__PURE__ */ jsx("button", { onClick: () => setFilter(c), className: cn("rounded-full border px-4 py-2 text-sm font-medium transition-all", filter === c ? "border-transparent bg-gradient-hero text-primary-foreground shadow-elegant" : "border-border bg-card hover:border-primary/40"), children: c }, c)) }),
      /* @__PURE__ */ jsx(motion.div, { layout: true, className: "grid gap-8 md:grid-cols-2 lg:grid-cols-3", children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", children: filtered.map((p) => /* @__PURE__ */ jsxs(motion.article, { layout: true, initial: {
        opacity: 0,
        scale: 0.95
      }, animate: {
        opacity: 1,
        scale: 1
      }, exit: {
        opacity: 0,
        scale: 0.95
      }, className: "group overflow-hidden rounded-2xl border border-border bg-card shadow-card transition-all hover:-translate-y-1 hover:shadow-elegant", children: [
        /* @__PURE__ */ jsx("div", { className: "aspect-[16/10] overflow-hidden bg-secondary", children: /* @__PURE__ */ jsx("img", { src: p.image, alt: p.title, loading: "lazy", width: 1280, height: 800, className: "h-full w-full object-cover transition-transform duration-500 group-hover:scale-105" }) }),
        /* @__PURE__ */ jsxs("div", { className: "p-6", children: [
          /* @__PURE__ */ jsx("div", { className: "text-xs font-medium uppercase tracking-wider text-primary", children: p.category }),
          /* @__PURE__ */ jsx("h3", { className: "mt-2 text-lg font-semibold", children: p.title }),
          /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-muted-foreground line-clamp-2", children: p.summary }),
          /* @__PURE__ */ jsx("div", { className: "mt-3 flex flex-wrap gap-1.5", children: p.tech.slice(0, 4).map((t) => /* @__PURE__ */ jsx("span", { className: "rounded-full bg-secondary px-2 py-0.5 text-xs", children: t }, t)) }),
          /* @__PURE__ */ jsxs("div", { className: "mt-5 flex gap-2", children: [
            /* @__PURE__ */ jsx(Button, { asChild: true, size: "sm", variant: "outline", children: /* @__PURE__ */ jsxs("a", { href: p.live ?? "#", children: [
              /* @__PURE__ */ jsx(ExternalLink, { className: "mr-1.5 h-3.5 w-3.5" }),
              " Live"
            ] }) }),
            /* @__PURE__ */ jsx(Button, { asChild: true, size: "sm", className: "bg-gradient-hero hover:opacity-95", children: /* @__PURE__ */ jsxs(Link, { to: "/portfolio/$slug", params: {
              slug: p.slug
            }, children: [
              "Case Study ",
              /* @__PURE__ */ jsx(ArrowRight, { className: "ml-1.5 h-3.5 w-3.5" })
            ] }) })
          ] })
        ] })
      ] }, p.slug)) }) })
    ] }) })
  ] });
}
export {
  PortfolioPage as component
};
