import Image from "next/image";
import Link from "next/link";
import { getPage, getTrainers } from "@/lib/content";

export const dynamic = "force-dynamic";

export default async function HomePage() {
  let page = null;
  let trainers: Awaited<ReturnType<typeof getTrainers>> = [];
  try {
    page = await getPage("home");
    trainers = await getTrainers();
  } catch {
    /* DB može još ne biti povezana tijekom setupa */
  }

  return (
    <>
      <section className="relative flex min-h-[88vh] items-end overflow-hidden">
        <div className="absolute inset-0">
          <Image
            src="/media/gallery/onama-fit-for-life15e1f.jpg"
            alt="Fit for Life dvorana"
            fill
            priority
            className="object-cover"
          />
          <div className="absolute inset-0 bg-gradient-to-t from-black via-black/70 to-black/30" />
        </div>

        <div className="relative z-10 mx-auto w-full max-w-6xl px-4 pb-16 pt-28">
          <Image src="/logo.png" alt="Fit for Life" width={180} height={80} className="mb-6 h-auto w-40 md:w-48" />
          <h1 className="max-w-3xl text-5xl leading-none text-white md:text-7xl">
            {page?.headline || "Biti fit nije mit"}
          </h1>
          <p className="mt-5 max-w-xl text-base text-white/80 md:text-lg">
            {page?.body ||
              "Trening centar u Rijeci — individualni i grupni programi, mali broj polaznika, rezultati koji se vide."}
          </p>
          <div className="mt-8 flex flex-wrap gap-3">
            <Link
              href="/raspored"
              className="rounded-sm bg-ffl-red px-6 py-3 text-sm font-bold uppercase tracking-wider text-white transition hover:bg-ffl-red-deep"
            >
              Pogledaj raspored
            </Link>
            <Link
              href="/kontakt"
              className="rounded-sm border border-white/40 px-6 py-3 text-sm font-bold uppercase tracking-wider text-white transition hover:border-ffl-red hover:text-ffl-red"
            >
              Kontakt
            </Link>
          </div>
        </div>
      </section>

      <section className="mx-auto max-w-6xl px-4 py-20">
        <p className="text-sm font-semibold uppercase tracking-[0.2em] text-ffl-red">Programi</p>
        <h2 className="mt-2 text-4xl text-white md:text-5xl">Treniraj pametno</h2>
        <div className="mt-10 grid gap-4 md:grid-cols-3">
          {[
            {
              href: "/grupni-treninzi",
              title: "Grupni",
              text: "Motivacija grupe, različiti intenziteti, isti trener.",
            },
            {
              href: "/individualni-treninzi",
              title: "Individualni",
              text: "100% fokus na tvoje ciljeve i raspored.",
            },
            {
              href: "/cjenik",
              title: "Cjenik",
              text: "Jasne članarine i paketi treninga.",
            },
          ].map((card) => (
            <Link
              key={card.href}
              href={card.href}
              className="group border border-white/10 bg-white/5 p-6 transition hover:border-ffl-red/60 hover:bg-white/10"
            >
              <h3 className="text-3xl text-white group-hover:text-ffl-red">{card.title}</h3>
              <p className="mt-3 text-sm text-ffl-muted">{card.text}</p>
            </Link>
          ))}
        </div>
      </section>

      {trainers.length > 0 && (
        <section className="mx-auto max-w-6xl px-4 pb-16">
          <div className="flex items-end justify-between gap-4">
            <div>
              <p className="text-sm font-semibold uppercase tracking-[0.2em] text-ffl-red">Tim</p>
              <h2 className="mt-2 text-4xl text-white">Treneri</h2>
            </div>
            <Link href="/treneri" className="text-sm font-semibold uppercase tracking-wide text-ffl-red">
              Svi treneri →
            </Link>
          </div>
          <div className="mt-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
            {trainers.slice(0, 3).map((t) => (
              <Link key={t.id} href={`/treneri#${t.slug}`} className="overflow-hidden border border-white/10 bg-black">
                <div className="relative aspect-[4/5] bg-neutral-900">
                  {t.photoPath && (
                    <Image src={t.photoPath} alt={t.name} fill className="object-cover object-top" />
                  )}
                  <div className="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent" />
                  <div className="absolute bottom-0 p-4">
                    <h3 className="text-2xl text-white">{t.name}</h3>
                    {t.role && <p className="text-sm text-ffl-muted">{t.role}</p>}
                  </div>
                </div>
              </Link>
            ))}
          </div>
        </section>
      )}
    </>
  );
}