import { Mail } from "lucide-react";
import { ContactForm } from "@/components/ContactForm";
import { getDict } from "@/i18n/dictionaries";
import { isLang, type Lang } from "@/i18n/types";

export default async function ContactPage({
  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-6">
            <h1 className="h1">{dict.contact.title}</h1>
            <p className="mt-4 max-w-xl text-sm leading-7 text-appMuted sm:text-base">
              {dict.contact.intro}
            </p>

            <div className="mt-10 grid gap-3">
              <a
                href="mailto:hello@raqmiatplus.com"
                className="flex items-center justify-between gap-4 rounded-3xl border border-appBorder bg-appSurface/55 p-5 transition hover:bg-white/3"
              >
                <div>
                  <div className="text-xs font-semibold text-appMuted">
                    {dict.footer.email}
                  </div>
                  <div className="mt-1 text-sm font-semibold text-appText">
                    hello@raqmiatplus.com
                  </div>
                </div>
                <span className="inline-flex h-10 w-10 items-center justify-center rounded-2xl border border-appBorder bg-white/3 text-appText">
                  <Mail className="h-5 w-5" />
                </span>
              </a>
            </div>
          </div>

          <div className="lg:col-span-6">
            <div className="glass rounded-3xl p-7 shadow-none">
              <div className="text-sm font-semibold text-appText">
                {safeLang === "ar"
                  ? "أرسل تفاصيل مشروعك"
                  : "Send your project details"}
              </div>
              <p className="mt-2 text-sm leading-7 text-appMuted">
                {safeLang === "ar"
                  ? "كلما كانت التفاصيل أوضح، كان اقتراحنا أدق وأسرع."
                  : "The clearer the details, the faster and more accurate our proposal."}
              </p>

              <ContactForm lang={safeLang} dict={dict} />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}