import { getTranslations, setRequestLocale } from "next-intl/server";
import { Link } from "@/i18n/navigation";
import { PolicyPanel } from "@/components/rate-boards";

export default async function HomePage({
  params,
}: {
  params: Promise<{ locale: string }>;
}) {
  const { locale } = await params;
  setRequestLocale(locale);
  const t = await getTranslations();

  const features = [
    { title: t("home.paidTitle"), text: t("home.paidText") },
    { title: t("home.freeTitle"), text: t("home.freeText") },
    { title: t("home.filesTitle"), text: t("home.filesText") },
    { title: t("home.walletTitle"), text: t("home.walletText") },
    { title: t("escrow.title"), text: t("home.escrowText") },
  ];

  const steps = [t("home.how1"), t("home.how2"), t("home.how3")];
  const trust = [t("home.trust1"), t("home.trust2"), t("home.trust3")];

  const policies = [
    { title: t("policy.googleTitle"), text: t("policy.google") },
    { title: t("policy.fraudTitle"), text: t("policy.fraud") },
    { title: t("policy.vpnTitle"), text: t("policy.vpn") },
    { title: t("policy.contentTitle"), text: t("policy.content") },
    { title: t("policy.escrowTitle"), text: t("policy.escrow") },
  ];

  return (
    <div className="space-y-10 md:space-y-14">
      <section className="hero-panel overflow-hidden px-5 py-10 sm:px-10 md:px-14 md:py-16">
        <p className="page-kicker">{t("home.badge")}</p>
        <h1 className="mt-4 max-w-3xl text-[2rem] font-extrabold leading-[1.15] tracking-tight sm:text-5xl md:text-6xl">
          {t("home.title")}
        </h1>
        <p className="mt-5 max-w-2xl text-base leading-7 text-muted sm:text-lg">{t("home.subtitle")}</p>
        <div className="mt-8 flex flex-col gap-3 sm:flex-row sm:flex-wrap">
          <Link href="/register" className="btn-primary w-full sm:w-auto">
            {t("home.ctaStart")}
          </Link>
          <Link href="/rates" className="btn-secondary w-full sm:w-auto">
            {t("home.ctaRates")}
          </Link>
          <Link href="/login" className="btn-ghost w-full sm:w-auto">
            {t("home.ctaLogin")}
          </Link>
          <Link href="/market" className="btn-ghost w-full sm:w-auto">
            {t("nav.market")}
          </Link>
          <Link href="/dashboard/escrow" className="btn-ghost w-full sm:w-auto">
            {t("nav.escrow")}
          </Link>
        </div>
        <ul className="mt-8 grid gap-2 sm:grid-cols-3">
          {trust.map((item) => (
            <li
              key={item}
              className="rounded-full border border-line bg-white/80 px-4 py-2 text-center text-sm font-medium"
            >
              {item}
            </li>
          ))}
        </ul>
      </section>
      <section>
        <h2 className="page-title">{t("home.howTitle")}</h2>
        <div className="mt-5 grid gap-4 md:grid-cols-3">
          {steps.map((item, index) => (
            <article key={item} className="card p-6">
              <span className="inline-flex h-9 w-9 items-center justify-center rounded-full bg-brand text-sm font-bold text-white">
                {index + 1}
              </span>
              <p className="mt-4 leading-7 text-muted">{item}</p>
            </article>
          ))}
        </div>
      </section>
      <section className="grid gap-4 sm:grid-cols-2">
        {features.map((item) => (
          <article key={item.title} className="card p-6 md:p-7">
            <h2 className="text-xl font-semibold">{item.title}</h2>
            <p className="mt-2 leading-7 text-muted">{item.text}</p>
          </article>
        ))}
      </section>
      <PolicyPanel
        title={t("policy.title")}
        items={policies}
        moreHref="/policies"
        moreLabel={t("policy.readAll")}
      />
    </div>
  );
}