import { jsxs, Fragment, jsx } from "react/jsx-runtime";
import { motion } from "motion/react";
import { useState, useMemo } from "react";
import { Calendar, Clock, ArrowRight, Search } from "lucide-react";
import { d as BLOG_POSTS, e as BLOG_CATEGORIES, c as cn } from "./router-CCW7InyN.js";
import { P as PageHero } from "./PageHero-CnZoXXfm.js";
import "@tanstack/react-query";
import "@tanstack/react-router";
import "@radix-ui/react-slot";
import "class-variance-authority";
import "clsx";
import "tailwind-merge";
import "sonner";
const PAGE_SIZE = 4;
function BlogPage() {
  const [q, setQ] = useState("");
  const [cat, setCat] = useState("All");
  const [page, setPage] = useState(1);
  const filtered = useMemo(() => {
    return BLOG_POSTS.filter((p) => {
      const matchesQ = !q || p.title.toLowerCase().includes(q.toLowerCase()) || p.excerpt.toLowerCase().includes(q.toLowerCase());
      const matchesCat = cat === "All" || p.category === cat;
      return matchesQ && matchesCat;
    });
  }, [q, cat]);
  const featured = BLOG_POSTS.find((p) => p.featured);
  const pageCount = Math.max(1, Math.ceil(filtered.length / PAGE_SIZE));
  const paged = filtered.slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE);
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    /* @__PURE__ */ jsx(PageHero, { eyebrow: "Blog", title: "Writing on the craft", subtitle: "Practical articles on web development, performance, freelancing, and leading engineering teams." }),
    /* @__PURE__ */ jsx("section", { className: "py-16", children: /* @__PURE__ */ jsxs("div", { className: "container-px mx-auto max-w-6xl", children: [
      featured && /* @__PURE__ */ jsxs(motion.article, { initial: {
        opacity: 0,
        y: 20
      }, whileInView: {
        opacity: 1,
        y: 0
      }, viewport: {
        once: true
      }, className: "mb-12 overflow-hidden rounded-3xl border border-border bg-gradient-card p-8 shadow-elegant md:p-12", children: [
        /* @__PURE__ */ jsx("span", { className: "inline-block rounded-full bg-primary px-3 py-1 text-xs font-semibold uppercase tracking-wider text-primary-foreground", children: "Featured" }),
        /* @__PURE__ */ jsx("h2", { className: "mt-4 text-3xl font-bold md:text-4xl", children: featured.title }),
        /* @__PURE__ */ jsx("p", { className: "mt-4 max-w-2xl text-muted-foreground", children: featured.excerpt }),
        /* @__PURE__ */ jsxs("div", { className: "mt-4 flex items-center gap-4 text-sm text-muted-foreground", children: [
          /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5", children: [
            /* @__PURE__ */ jsx(Calendar, { className: "h-4 w-4" }),
            featured.date
          ] }),
          /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5", children: [
            /* @__PURE__ */ jsx(Clock, { className: "h-4 w-4" }),
            featured.readTime
          ] })
        ] }),
        /* @__PURE__ */ jsxs("a", { href: "#", className: "mt-6 inline-flex items-center font-medium text-primary hover:underline", children: [
          "Read article ",
          /* @__PURE__ */ jsx(ArrowRight, { className: "ml-1.5 h-4 w-4" })
        ] })
      ] }),
      /* @__PURE__ */ jsxs("div", { className: "mb-8 flex flex-col gap-4 md:flex-row md:items-center md:justify-between", children: [
        /* @__PURE__ */ jsxs("div", { className: "relative w-full md:max-w-sm", children: [
          /* @__PURE__ */ jsx(Search, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }),
          /* @__PURE__ */ jsx("input", { value: q, onChange: (e) => {
            setQ(e.target.value);
            setPage(1);
          }, placeholder: "Search articles...", className: "w-full rounded-full border border-border bg-card py-2.5 pl-10 pr-4 text-sm outline-none transition-colors focus:border-primary" })
        ] }),
        /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: BLOG_CATEGORIES.map((c) => /* @__PURE__ */ jsx("button", { onClick: () => {
          setCat(c);
          setPage(1);
        }, className: cn("rounded-full border px-3 py-1.5 text-xs font-medium transition-all", cat === c ? "border-transparent bg-gradient-hero text-primary-foreground" : "border-border hover:border-primary/40"), children: c }, c)) })
      ] }),
      /* @__PURE__ */ jsx("div", { className: "grid gap-6 md:grid-cols-2", children: paged.map((p, i) => /* @__PURE__ */ jsxs(motion.article, { initial: {
        opacity: 0,
        y: 20
      }, whileInView: {
        opacity: 1,
        y: 0
      }, viewport: {
        once: true,
        margin: "-50px"
      }, transition: {
        delay: i * 0.05
      }, className: "group rounded-2xl border border-border bg-card p-6 shadow-card transition-all hover:-translate-y-1 hover:shadow-elegant", children: [
        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
          /* @__PURE__ */ jsx("span", { className: "rounded-full bg-primary/10 px-3 py-1 text-xs font-medium text-primary", children: p.category }),
          /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: p.readTime })
        ] }),
        /* @__PURE__ */ jsx("h3", { className: "mt-4 text-xl font-semibold group-hover:text-primary", children: p.title }),
        /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-muted-foreground", children: p.excerpt }),
        /* @__PURE__ */ jsxs("div", { className: "mt-4 flex items-center justify-between text-xs text-muted-foreground", children: [
          /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5", children: [
            /* @__PURE__ */ jsx(Calendar, { className: "h-3.5 w-3.5" }),
            p.date
          ] }),
          /* @__PURE__ */ jsxs("a", { href: "#", className: "inline-flex items-center font-medium text-primary hover:underline", children: [
            "Read ",
            /* @__PURE__ */ jsx(ArrowRight, { className: "ml-1 h-3.5 w-3.5" })
          ] })
        ] })
      ] }, p.slug)) }),
      filtered.length === 0 && /* @__PURE__ */ jsx("div", { className: "py-16 text-center text-muted-foreground", children: "No articles found." }),
      pageCount > 1 && /* @__PURE__ */ jsx("div", { className: "mt-10 flex justify-center gap-2", children: Array.from({
        length: pageCount
      }).map((_, i) => /* @__PURE__ */ jsx("button", { onClick: () => setPage(i + 1), className: cn("h-9 w-9 rounded-md border text-sm font-medium transition-colors", page === i + 1 ? "border-transparent bg-gradient-hero text-primary-foreground" : "border-border hover:border-primary/40"), children: i + 1 }, i)) })
    ] }) })
  ] });
}
export {
  BlogPage as component
};
