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

export default async function ServicesPage({
  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.services.title}</h1>
            <p className="mt-4 max-w-3xl text-sm leading-7 text-appMuted sm:text-base">
              {dict.services.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-4 sm:grid-cols-2 lg:grid-cols-3">
          {dict.services.items.map((s) => (
            <div
              key={s.title}
              className="rounded-3xl border border-appBorder bg-appSurface/55 p-6 transition hover:bg-white/3"
            >
              <div className="text-sm font-semibold text-appText">{s.title}</div>
              <p className="mt-2 text-sm leading-7 text-appMuted">{s.desc}</p>
              <div className="mt-5 flex items-start gap-3 rounded-2xl border border-appBorder bg-white/3 p-4">
                <CheckCircle2 className="mt-0.5 h-4 w-4 text-accent" />
                <div className="text-xs font-semibold text-appText">
                  {s.outcome}
                </div>
              </div>
              <div className="mt-5">
                <Link
                  href={`/${safeLang}/contact`}
                  className="text-sm font-semibold text-accent hover:opacity-90"
                >
                  {dict.cta.sendRequest} <span aria-hidden>→</span>
                </Link>
              </div>
            </div>
          ))}
        </div>

        <div className="mt-14 glass rounded-3xl p-8 sm:p-10 shadow-none">
          <div className="grid gap-8 lg:grid-cols-12 lg:items-center">
            <div className="lg:col-span-8">
              <div className="text-sm font-semibold text-appText">
                {safeLang === "ar"
                  ? "كيف نبدأ بسرعة؟"
                  : "How do we start quickly?"}
              </div>
              <p className="mt-3 text-sm leading-7 text-appMuted">
                {safeLang === "ar"
                  ? "رسالة واحدة تكفي. سنطلب تفاصيل بسيطة ثم نرسل لك اقتراحًا واضحًا (Scope + Timeline) مناسبًا لميزانيتك."
                  : "One message is enough. We’ll ask a few details then send a clear proposal (scope + timeline) aligned with your budget."}
              </p>
            </div>
            <div className="lg:col-span-4">
              <div className="flex flex-col gap-3 sm:flex-row lg:flex-col">
                <a
                  href="https://wa.me/966544666050"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="btn btn-primary"
                >
                  {dict.cta.whatsapp}
                </a>
                <Link href={`/${safeLang}/contact`} className="btn btn-secondary">
                  {dict.nav.contact}
                </Link>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}