import Link from "next/link";
import Image from "next/image";
import { ArrowUpRight } from "lucide-react";
import { getDict } from "@/i18n/dictionaries";
import { isLang, type Lang } from "@/i18n/types";

export default async function PortfolioPage({
  params,
}: {
  params: Promise<{ lang: string }>;
}) {
  const { lang } = await params;
  const safeLang: Lang = isLang(lang) ? lang : "ar";
  const dict = getDict(safeLang);

  return (
    <div className="py-16 sm:py-20">
      <div className="container-app">
        <div className="flex flex-col items-start justify-between gap-6 sm:flex-row sm:items-end">
          <div>
            <h1 className="h1">{dict.portfolio.title}</h1>
            <p className="mt-4 max-w-3xl text-sm leading-7 text-appMuted sm:text-base">
              {dict.portfolio.intro}
            </p>
          </div>
          <Link href={`/${safeLang}/contact`} className="btn btn-primary">
            {dict.cta.startProject}
            <ArrowUpRight className="h-4 w-4" />
          </Link>
        </div>

        <div className="mt-10 grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
          {dict.portfolio.items.map((p) => (
            <article
              key={p.title}
              className="group overflow-hidden rounded-3xl border border-appBorder bg-appSurface/55 transition hover:bg-white/3 hover:-translate-y-0.5 hover:shadow-[0_18px_50px_rgba(0,0,0,0.45)]"
            >
              <div className="relative aspect-[16/10] w-full overflow-hidden border-b border-appBorder bg-black/30">
                <Image
                  src={p.image.src}
                  alt={p.image.alt}
                  fill
                  sizes="(max-width: 1024px) 50vw, 33vw"
                  className="object-cover opacity-95 transition duration-300 group-hover:scale-[1.02]"
                  priority={false}
                />
                <div className="absolute inset-0 bg-gradient-to-t from-black/75 via-black/15 to-black/0" />
                <div className="absolute bottom-4 left-4 right-4 flex items-center justify-between gap-3">
                  <span className="rounded-full border border-appBorder bg-black/35 px-3 py-1 text-xs font-semibold text-white/85 backdrop-blur">
                    {p.category}
                  </span>
                  <span className="rounded-full border border-appBorder bg-black/35 px-3 py-1 text-xs font-semibold text-white/70 backdrop-blur">
                    {safeLang === "ar" ? "Case Study" : "Case Study"}
                  </span>
                </div>
              </div>

              <div className="p-6">
                <header>
                  <h2 className="text-base font-semibold leading-7 text-appText">
                    {p.title}
                  </h2>
                </header>

                <div className="mt-5 space-y-4 text-sm leading-7">
                  <div>
                    <div className="text-xs font-semibold text-appMuted">
                      {safeLang === "ar" ? "المشكلة" : "Problem"}
                    </div>
                    <div className="mt-1 text-appText">{p.problem}</div>
                  </div>

                  <div>
                    <div className="text-xs font-semibold text-appMuted">
                      {safeLang === "ar" ? "الحل" : "Solution"}
                    </div>
                    <div className="mt-1 text-appText">{p.solution}</div>
                  </div>

                  <div>
                    <div className="text-xs font-semibold text-appMuted">
                      {safeLang === "ar" ? "النتيجة" : "Outcome"}
                    </div>
                    <div className="mt-2 rounded-2xl border border-appBorder bg-white/3 px-4 py-3 text-appText">
                      {p.result}
                    </div>
                  </div>
                </div>

                <div className="mt-6 flex flex-wrap gap-2">
                  {p.tech.map((t) => (
                    <span
                      key={t}
                      className="rounded-full border border-appBorder bg-white/3 px-3 py-1 text-xs font-semibold text-appMuted"
                    >
                      {t}
                    </span>
                  ))}
                </div>

                <div className="mt-6">
                  <Link
                    href={`/${safeLang}/contact`}
                    className="text-sm font-semibold text-accent hover:opacity-90"
                  >
                    {dict.cta.sendRequest} <span aria-hidden>→</span>
                  </Link>
                </div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </div>
  );
}