import { J as jsxRuntimeExports } from "./server-OKiEnFgZ.js";
import { R as Route, p as posts, d as PageShell, S as Section, L as Link, C as CTASection } from "./router-DhFPDtNP.js";
import { A as ArrowLeft } from "./arrow-left-BYV3wBNO.js";
import { C as Calendar } from "./calendar-CPxZU3tJ.js";
import { C as Clock } from "./clock-BmwuxCuF.js";
import "node:async_hooks";
import "node:stream/web";
import "node:stream";
function BlogPostPage() {
  const {
    post
  } = Route.useLoaderData();
  const related = posts.filter((p) => p.slug !== post.slug).slice(0, 3);
  return /* @__PURE__ */ jsxRuntimeExports.jsxs(PageShell, { children: [
    /* @__PURE__ */ jsxRuntimeExports.jsxs("article", { children: [
      /* @__PURE__ */ jsxRuntimeExports.jsxs(Section, { className: "!py-12 md:!py-16", children: [
        /* @__PURE__ */ jsxRuntimeExports.jsxs(Link, { to: "/blog", className: "inline-flex items-center gap-2 text-sm font-semibold text-primary", children: [
          /* @__PURE__ */ jsxRuntimeExports.jsx(ArrowLeft, { className: "h-4 w-4" }),
          " Back to blog"
        ] }),
        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-6 max-w-3xl", children: [
          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "inline-flex items-center gap-2 rounded-full border border-primary/20 bg-primary-soft px-3 py-1 text-xs font-semibold uppercase tracking-wider text-primary", children: post.cat }),
          /* @__PURE__ */ jsxRuntimeExports.jsx("h1", { className: "mt-4 text-4xl leading-[1.1] md:text-5xl lg:text-6xl", children: post.title }),
          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-6 flex flex-wrap items-center gap-5 text-sm text-muted-foreground", children: [
            /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "inline-flex items-center gap-1.5", children: [
              /* @__PURE__ */ jsxRuntimeExports.jsx(Calendar, { className: "h-4 w-4" }),
              " ",
              new Date(post.date).toLocaleDateString("en-NG", {
                year: "numeric",
                month: "long",
                day: "numeric"
              })
            ] }),
            /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "inline-flex items-center gap-1.5", children: [
              /* @__PURE__ */ jsxRuntimeExports.jsx(Clock, { className: "h-4 w-4" }),
              " ",
              post.read,
              " read"
            ] }),
            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "By Manso Digital — Lagos" })
          ] })
        ] }),
        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-10 overflow-hidden rounded-3xl border border-border shadow-card", children: /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: post.image, alt: `${post.title} — Manso Digital, a digital marketing agency in Lagos`, className: "aspect-[16/9] w-full object-cover" }) })
      ] }),
      /* @__PURE__ */ jsxRuntimeExports.jsx(Section, { className: "!pt-0", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mx-auto max-w-3xl", children: [
        /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-lg leading-relaxed text-ink-soft md:text-xl", children: post.excerpt }),
        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-8 space-y-6 text-base leading-relaxed text-ink md:text-lg", children: post.body.map((para, i) => /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: para }, i)) })
      ] }) }),
      /* @__PURE__ */ jsxRuntimeExports.jsxs(Section, { className: "!pt-0", children: [
        /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "text-2xl md:text-3xl", children: "Keep reading" }),
        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-8 grid gap-6 md:grid-cols-3", children: related.map((p) => /* @__PURE__ */ jsxRuntimeExports.jsxs(Link, { to: "/blog/$slug", params: {
          slug: p.slug
        }, className: "group overflow-hidden rounded-3xl border border-border bg-card shadow-card transition-all hover:-translate-y-1 hover:shadow-glow", children: [
          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "aspect-[16/10] overflow-hidden bg-muted", children: /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: p.image, alt: p.title, loading: "lazy", className: "h-full w-full object-cover transition-transform duration-500 group-hover:scale-[1.03]" }) }),
          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "p-5", children: [
            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs font-semibold uppercase tracking-wider text-primary", children: p.cat }),
            /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "mt-2 text-base leading-snug", children: p.title })
          ] })
        ] }, p.slug)) })
      ] })
    ] }),
    /* @__PURE__ */ jsxRuntimeExports.jsx(CTASection, { title: "Ready to grow with a top digital marketing agency in Lagos?", description: "Book a free consultation with the Manso Digital team." })
  ] });
}
export {
  BlogPostPage as component
};
