import Image from "next/image";
import { PageHero, RichText } from "@/components/PageBits";
import { getGallery, getPage } from "@/lib/content";

export const dynamic = "force-dynamic";

export default async function ONamaPage() {
  let page = null;
  let gallery: Awaited<ReturnType<typeof getGallery>> = [];
  try {
    page = await getPage("o-nama");
    gallery = await getGallery("o-nama");
  } catch {}

  return (
    <>
      <PageHero title={page?.headline || "O nama"} />
      <div className="mx-auto max-w-6xl px-4 py-12">
        <RichText
          body={
            page?.body ||
            "Fit for Life fitness centar specijaliziran je za programe individualnih i grupnih treninga."
          }
        />

        {gallery.length > 0 && (
          <div className="mt-12">
            <h2 className="mb-6 text-4xl text-white">Dvorana</h2>
            <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
              {gallery.map((img) => (
                <a
                  key={img.id}
                  href={img.path}
                  target="_blank"
                  rel="noreferrer"
                  className="relative aspect-[4/3] overflow-hidden border border-white/10"
                >
                  <Image
                    src={img.path}
                    alt={img.caption || "Fit for Life"}
                    fill
                    className="object-cover transition hover:scale-105"
                    sizes="(max-width:768px) 100vw, 33vw"
                  />
                </a>
              ))}
            </div>
          </div>
        )}
      </div>
    </>
  );
}