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

export default async function AboutPage({
  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="grid gap-10 lg:grid-cols-12 lg:items-start">
          <div className="lg:col-span-7">
            <h1 className="h1">{dict.about.title}</h1>
            <p className="mt-4 max-w-3xl text-sm leading-7 text-appMuted sm:text-base">
              {dict.about.intro}
            </p>

            <div className="mt-8 grid gap-3">
              {dict.about.bullets.map((b) => (
                <div
                  key={b}
                  className="flex items-start gap-3 rounded-2xl border border-appBorder bg-appSurface/55 p-4"
                >
                  <span className="mt-0.5 inline-flex h-7 w-7 items-center justify-center rounded-xl bg-accent/15 text-accent">
                    <Check className="h-4 w-4" />
                  </span>
                  <div className="text-sm font-medium text-appText">{b}</div>
                </div>
              ))}
            </div>
          </div>

          <div className="lg:col-span-5">
            <div className="glass rounded-3xl p-7 shadow-none">
              <div className="text-sm font-semibold text-appText">
                {dict.about.visionTitle}
              </div>
              <p className="mt-3 text-sm leading-7 text-appMuted">
                {dict.about.vision}
              </p>

              <div className="mt-7 rounded-2xl border border-appBorder bg-white/3 p-5">
                <div className="text-xs font-semibold text-appMuted">
                  {safeLang === "ar"
                    ? "نعمل كشريك تقني"
                    : "We work as a technical partner"}
                </div>
                <div className="mt-2 text-sm font-semibold text-appText">
                  {safeLang === "ar"
                    ? "نبدأ بالفهم ثم ننفّذ ثم نقيس الأثر."
                    : "We start with understanding, then execute, then measure impact."}
                </div>
              </div>

              <div className="mt-7 flex flex-col gap-3 sm:flex-row">
                <Link href={`/${safeLang}/contact`} className="btn btn-primary">
                  {dict.cta.startProject}
                  <ArrowUpRight className="h-4 w-4" />
                </Link>
                <a
                  href="https://wa.me/966544666050"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="btn btn-secondary"
                >
                  {dict.cta.whatsapp}
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}