import { getTranslations } from "next-intl/server";
import { Link } from "@/i18n/navigation";

export default async function HomePage() {
  const t = await getTranslations("home");

  return (
    <div className="relative">
      <section className="mx-auto max-w-6xl px-4 pb-16 pt-12 md:px-6 md:pt-20">
        <p className="text-sm uppercase tracking-[0.25em] text-gold">
          Rizz Lounge
        </p>
        <h1 className="mt-4 max-w-3xl font-[family-name:var(--font-display)] text-4xl font-medium leading-tight text-foreground md:text-5xl">
          {t("h1")}
        </h1>
        <p className="mt-2 max-w-xl text-lg text-gold/90">{t("tagline")}</p>
        <p className="mt-6 max-w-2xl text-base leading-relaxed text-muted">
          {t("lead")}
        </p>
        <div className="mt-10 flex flex-wrap gap-4">
          <Link
            href="/gallery"
            className="rounded-md border border-gold bg-transparent px-6 py-3 text-sm font-medium text-gold transition hover:bg-gold hover:text-background"
          >
            {t("ctaGallery")}
          </Link>
          <Link
            href="/reserve"
            className="rounded-md bg-gold px-6 py-3 text-sm font-medium text-background transition hover:bg-gold-hover"
          >
            {t("ctaReserve")}
          </Link>
        </div>
      </section>
      <section className="border-t border-border bg-card/30 py-16">
        <div className="mx-auto max-w-6xl px-4 md:px-6">
          <h2 className="font-[family-name:var(--font-display)] text-2xl text-foreground">
            {t("highlightsTitle")}
          </h2>
          <div className="mt-8 grid gap-6 md:grid-cols-3">
            {(
              [
                { title: "card1Title", body: "card1Body" },
                { title: "card2Title", body: "card2Body" },
                { title: "card3Title", body: "card3Body" },
              ] as const
            ).map((item) => (
              <div
                key={item.title}
                className="rounded-xl border border-border bg-background/50 p-6"
              >
                <h3 className="font-[family-name:var(--font-display)] text-lg text-gold">
                  {t(item.title)}
                </h3>
                <p className="mt-2 text-sm leading-relaxed text-muted">
                  {t(item.body)}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}
