import { jsxs, jsx } from "react/jsx-runtime";
import { a as q } from "./router-Dahr8H-r.js";
import { Link } from "@tanstack/react-router";
import { useSuspenseQuery } from "@tanstack/react-query";
import { b as blogImage } from "./project-images-BkjwhtiA.js";
import "react";
import "sonner";
import "lucide-react";
import "./client-P40JY-SL.js";
import "@supabase/supabase-js";
function BlogIndex() {
  const {
    data
  } = useSuspenseQuery(q);
  return /* @__PURE__ */ jsxs("section", { className: "mx-auto max-w-6xl px-6 py-16 md:py-24", children: [
    /* @__PURE__ */ jsx("span", { className: "eyebrow", children: "Journal" }),
    /* @__PURE__ */ jsx("h1", { className: "mt-3 font-display text-4xl font-bold md:text-5xl", children: "Dubai Property Insights" }),
    /* @__PURE__ */ jsx("div", { className: "mt-12 grid gap-10 md:grid-cols-2", children: data.map((b) => /* @__PURE__ */ jsxs(Link, { to: "/blog/$slug", params: {
      slug: b.slug
    }, className: "group block", children: [
      /* @__PURE__ */ jsx("div", { className: "aspect-[16/10] overflow-hidden bg-navy/5", children: /* @__PURE__ */ jsx("img", { src: blogImage(b.slug, b.cover_image), alt: b.title, loading: "lazy", width: 800, height: 500, className: "size-full object-cover transition-transform duration-700 group-hover:scale-105" }) }),
      /* @__PURE__ */ jsx("p", { className: "mt-4 text-[10px] font-bold uppercase tracking-widest text-gold", children: b.category }),
      /* @__PURE__ */ jsx("h2", { className: "mt-2 font-display text-xl font-bold transition-colors group-hover:text-gold", children: b.title }),
      /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-navy/60", children: b.excerpt })
    ] }, b.slug)) })
  ] });
}
export {
  BlogIndex as component
};
