import { ArrowUpRight, Boxes, CircleDollarSign } from "lucide-react";
import Link from "next/link";

import { MotionFade } from "@/components/motion-fade";
import { pickText, productItems, resolveLocale } from "@/lib/site-data";

type ProductsPageProps = {
  params: {
    locale: string;
  };
};

export default function ProductsPage({ params: { locale } }: ProductsPageProps) {
  const localeKey = resolveLocale(locale);

  const copy =
    localeKey === "de"
      ? {
          title: "Produkte",
          intro: "Pakete fuer Teams von Start bis Skalierung.",
          open: "Produkt oeffnen",
        }
      : {
          title: "Products",
          intro: "Packages for teams from early stage to scale.",
          open: "Open product",
        };

  return (
    <div className="mx-auto flex w-full max-w-6xl flex-col gap-8 px-4 py-10 sm:px-6 lg:px-8 lg:py-14">
      <MotionFade>
        <section className="rounded-3xl border border-default bg-surface p-6   lg:p-10">
          <div className="flex items-center gap-3">
            <Boxes className="h-5 w-5 text-muted-strong" />
            <h1 className="text-3xl font-semibold text-fg sm:text-4xl">
              {copy.title}
            </h1>
          </div>
          <p className="mt-4 max-w-3xl text-base text-muted sm:text-lg">
            {copy.intro}
          </p>
        </section>
      </MotionFade>

      <section className="grid gap-4 md:grid-cols-3">
        {productItems.map((item, index) => (
          <MotionFade key={item.slug} delay={index * 0.05}>
            <Link
              href={`/${localeKey}/products/${item.slug}`}
              className="group block rounded-2xl border border-default bg-surface p-5 transition group-hover-border-strong   "
            >
              <p className="text-sm text-subtle">
                {pickText(item.segment, localeKey)}
              </p>
              <h2 className="mt-3 text-xl font-semibold text-fg">
                {pickText(item.name, localeKey)}
              </h2>
              <p className="mt-2 text-sm text-muted">
                {pickText(item.summary, localeKey)}
              </p>
              <p className="mt-4 inline-flex items-center gap-2 text-sm font-medium text-muted-strong">
                <CircleDollarSign className="h-4 w-4" />
                {pickText(item.price, localeKey)}
              </p>
              <p className="group-hover-fg mt-4 inline-flex items-center gap-2 text-sm font-medium text-muted-strong">
                {copy.open}
                <ArrowUpRight className="h-4 w-4" />
              </p>
            </Link>
          </MotionFade>
        ))}
      </section>
    </div>
  );
}