import type { Metadata } from "next";
import { getTranslations } from "next-intl/server";
import { Navbar } from "@/components/layout/navbar";
import { Footer } from "@/components/layout/footer";
import { DemoForm } from "@/components/demo/demo-form";
import { Check, Clock, Users, Headphones } from "lucide-react";

const BASE_URL = process.env.NEXT_PUBLIC_SITE_URL ?? "https://meezi.ir";

export async function generateMetadata({
  params,
}: {
  params: Promise<{ locale: string }>;
}): Promise<Metadata> {
  const { locale } = await params;
  const t = await getTranslations({ locale, namespace: "meta" });
  return {
    title: t("demoTitle"),
    description: t("demoDesc"),
    alternates: {
      canonical: `${BASE_URL}/${locale}/demo`,
      languages: { fa: `${BASE_URL}/fa/demo`, en: `${BASE_URL}/en/demo` },
    },
    openGraph: { title: t("demoTitle"), description: t("demoDesc"), url: `${BASE_URL}/${locale}/demo` },
  };
}

export default async function DemoPage({
  params,
}: {
  params: Promise<{ locale: string }>;
}) {
  const { locale } = await params;
  const t = await getTranslations({ locale, namespace: "demo" });

  const perks =
    locale === "fa"
      ? [
          { icon: Clock, text: "تماس در کمتر از ۲۴ ساعت" },
          { icon: Check, text: "دمو ۳۰ دقیقه‌ای کاملاً رایگان" },
          { icon: Users, text: "بدون نیاز به کارت بانکی" },
          { icon: Headphones, text: "پشتیبانی فارسی‌زبان" },
        ]
      : [
          { icon: Clock, text: "Call back within 24 hours" },
          { icon: Check, text: "Free 30-minute demo" },
          { icon: Users, text: "No credit card needed" },
          { icon: Headphones, text: "Dedicated support" },
        ];

  return (
    <>
      <Navbar />
      <main className="pt-16">
        {/* Hero strip */}
        <div className="bg-gradient-to-br from-brand-900 to-brand-700 pb-20 pt-16 text-center">
          <span className="inline-flex items-center gap-1.5 rounded-full border border-white/20 bg-white/10 px-3 py-1 text-xs font-semibold text-white/80">
            {t("badge")}
          </span>
          <h1 className="mt-4 text-3xl font-extrabold text-white sm:text-4xl">{t("title")}</h1>
          <p className="mx-auto mt-3 max-w-lg text-lg text-white/60">{t("subtitle")}</p>
        </div>

        {/* Content card */}
        <div className="mx-auto max-w-5xl px-4 pb-20 sm:px-6 lg:px-8">
          <div className="-mt-10 grid gap-8 lg:grid-cols-5">
            {/* Form (wider) */}
            <div className="lg:col-span-3">
              <div className="rounded-2xl border border-gray-100 bg-white p-7 shadow-xl shadow-gray-200/60">
                <DemoForm />
              </div>
            </div>

            {/* Side info */}
            <div className="lg:col-span-2">
              <div className="space-y-5">
                {/* Perks */}
                <div className="rounded-2xl border border-gray-100 bg-white p-5 shadow-sm">
                  <h2 className="mb-4 text-sm font-semibold text-gray-900">
                    {locale === "fa" ? "چه چیزی انتظار دارید؟" : "What to expect"}
                  </h2>
                  <ul className="space-y-3">
                    {perks.map(({ icon: Icon, text }) => (
                      <li key={text} className="flex items-center gap-3">
                        <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-brand-50">
                          <Icon className="h-4 w-4 text-brand-700" />
                        </div>
                        <span className="text-sm text-gray-600">{text}</span>
                      </li>
                    ))}
                  </ul>
                </div>

                {/* Testimonial snippet */}
                <div className="rounded-2xl border border-brand-100 bg-brand-50 p-5">
                  <p className="text-sm leading-relaxed text-gray-700">
                    {locale === "fa"
                      ? "«از وقتی میزی نصب کردیم، سرعت سرویس‌دهی‌مان ۴۰٪ بیشتر شده و مشتریان از تجربه دیجیتال عاشق هستند.»"
                      : '"Since installing Meezi, our service speed improved 40% and customers love the digital experience."'}
                  </p>
                  <div className="mt-3 flex items-center gap-2">
                    <div className="flex h-7 w-7 items-center justify-center rounded-full bg-brand-200 text-xs font-bold text-brand-800">
                      ع
                    </div>
                    <div>
                      <div className="text-xs font-semibold text-gray-800">
                        {locale === "fa" ? "علی رضایی" : "Ali Rezaei"}
                      </div>
                      <div className="text-[10px] text-gray-500">
                        {locale === "fa" ? "مدیر کافه درنا، تهران" : "Manager, Café Dorná"}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </main>
      <Footer />
    </>
  );
}
