import Head from "next/head";
import Link from "next/link";
import { useTranslation } from "next-i18next";
import { serverSideTranslations } from "next-i18next/serverSideTranslations";
import type { GetStaticProps } from "next";
import i18nConfig from "../../../../next-i18next.config";
import {
  ChevronLeft,
  Lock,
  Globe,
  Target,
  Handshake,
  CalendarDays,
  BarChart3,
  Megaphone,
} from "lucide-react";
import NotifyMeForm from "@/components/expat/notifyMeForm";

const valueProps = [
  { key: "communityReach", icon: Globe },
  { key: "targetedAudience", icon: Target },
  { key: "communityTrust", icon: Handshake },
  { key: "eventCollaboration", icon: CalendarDays },
  { key: "impactAnalytics", icon: BarChart3 },
  { key: "promotionalReach", icon: Megaphone },
] as const;

export default function ExpatBenefitsPage() {
  const { t } = useTranslation("expat");

  return (
    <div className="relative min-h-screen overflow-x-hidden bg-bgBrand">
      <Head>
        <title>{t("benefits.meta.title")}</title>
        <meta name="description" content={t("benefits.meta.description")} />
      </Head>

      {/* Hero */}
      <section className="relative overflow-hidden bg-gradient-to-br from-[#051973] via-[#0b3e98] to-[#00B6FF] px-4 pb-16 pt-8 sm:px-6 lg:px-24">
        <nav className="flex items-center gap-2 pt-6 text-xs text-white/70 sm:text-sm">
          <Link
            href="/expat"
            className="inline-flex items-center gap-1 hover:text-white"
          >
            <ChevronLeft className="h-3.5 w-3.5" />
            {t("benefits.breadcrumbHome")}
          </Link>
          <span>/</span>
          <span className="text-white">{t("benefits.breadcrumbCurrent")}</span>
        </nav>

        <div className="relative mt-10 max-w-2xl pb-6">
          <span className="inline-block rounded-full border border-white/30 bg-white/10 px-3 py-1 text-xs font-semibold text-white backdrop-blur">
            {t("benefits.hero.badge")}
          </span>
          <h1 className="mt-4 text-3xl font-extrabold leading-tight text-white sm:text-4xl md:text-5xl">
            {t("benefits.hero.title1")}
            <br />
            {t("benefits.hero.title2")}
          </h1>
          <p className="mt-3 max-w-md text-sm text-white/80 sm:text-base">
            {t("benefits.hero.subtitle")}
          </p>
        </div>
      </section>

      {/* Partner Directory */}
      <section className="bg-gradient-to-b from-[#eef9fb] to-white px-4 py-16 sm:px-6 lg:px-24">
        <div className="mx-auto max-w-6xl">
          <span className="inline-block rounded-full border border-border bg-white px-3 py-1 text-xs font-bold text-main">
            {t("benefits.directory.badge")}
          </span>
          <h2 className="mt-3 text-2xl font-extrabold text-main sm:text-4xl">
            {t("benefits.directory.title")}
          </h2>
          <p className="mt-3 max-w-2xl text-sm text-gray-600 sm:text-base">
            {t("benefits.directory.subtitle")}
          </p>

          <div className="relative mt-10">
            {/* Blurred placeholder partner cards */}
            <div
              aria-hidden
              className="pointer-events-none grid select-none grid-cols-1 gap-4 opacity-60 blur-[2px] sm:grid-cols-2 lg:grid-cols-3"
            >
              {Array.from({ length: 6 }).map((_, i) => (
                <div
                  key={i}
                  className="rounded-2xl border border-border bg-white p-5"
                >
                  <div className="flex items-center gap-3">
                    <div className="h-10 w-10 rounded-full bg-gray-200" />
                    <div className="flex-1 space-y-2">
                      <div className="h-3 w-2/3 rounded bg-gray-200" />
                      <div className="h-2.5 w-1/3 rounded bg-gray-100" />
                    </div>
                  </div>
                  <div className="mt-4 h-2.5 w-1/2 rounded bg-gray-100" />
                </div>
              ))}
            </div>

            {/* Unlocking Soon overlay */}
            <div className="absolute inset-0 grid place-items-center px-4">
              <div className="max-w-sm rounded-2xl border border-border bg-white p-8 text-center shadow-xl">
                <div className="mx-auto grid h-11 w-11 place-items-center rounded-full bg-sky-50 text-sky-600">
                  <Lock className="h-5 w-5" />
                </div>
                <h3 className="mt-4 text-lg font-bold text-main">
                  {t("benefits.directory.unlockingTitle")}
                </h3>
                <p className="mt-2 text-sm text-gray-600">
                  {t("benefits.directory.unlockingDesc")}
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Waitlist */}
      <section className="bg-gradient-to-br from-[#051973] via-[#0b3e98] to-[#00B6FF] px-4 py-16 text-center sm:px-6 lg:px-24">
        <span className="inline-block rounded-full border border-white/30 bg-white/10 px-3 py-1 text-xs font-semibold text-white backdrop-blur">
          {t("benefits.waitlist.badge")}
        </span>
        <h2 className="mx-auto mt-3 max-w-2xl text-2xl font-extrabold text-white sm:text-4xl">
          {t("benefits.waitlist.title")}
        </h2>
        <p className="mx-auto mt-3 max-w-xl text-sm text-white/80 sm:text-base">
          {t("benefits.waitlist.subtitle")}
        </p>

        <NotifyMeForm />
      </section>

      {/* Become a Partner */}
      <section className="bg-bgBrand px-4 py-16 sm:px-6 lg:px-24">
        <div className="mx-auto max-w-6xl">
          <span className="inline-block rounded-full border border-border bg-white px-3 py-1 text-xs font-semibold text-main">
            {t("benefits.partner.badge")}
          </span>
          <h2 className="mt-3 max-w-lg text-2xl font-extrabold text-main sm:text-4xl">
            {t("benefits.partner.title1")}
            <br />
            {t("benefits.partner.title2")}
          </h2>
          <p className="mt-3 max-w-2xl text-sm text-gray-600 sm:text-base">
            {t("benefits.partner.desc")}
          </p>

          <div className="mt-10 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
            {valueProps.map(({ key, icon: Icon }) => (
              <div
                key={key}
                className="rounded-2xl border border-border bg-white p-5 text-left shadow-sm"
              >
                <div className="grid h-10 w-10 place-items-center rounded-xl bg-bgBrand text-[#051973] shadow-sm">
                  <Icon className="h-5 w-5" />
                </div>
                <h3 className="mt-3 text-sm font-bold text-[#051973]">
                  {t(`benefits.partner.valueProps.${key}.title`)}
                </h3>
                <p className="mt-1 text-xs text-gray-600">
                  {t(`benefits.partner.valueProps.${key}.desc`)}
                </p>
              </div>
            ))}
          </div>

          {/* <div className="mt-14 grid grid-cols-1 gap-10 lg:grid-cols-2">
            <div>
              <h3 className="text-lg font-bold text-main sm:text-xl">
                {t("benefits.partner.inquiryTitle")}
              </h3>
              <p className="mt-2 text-sm text-gray-600">
                {t("benefits.partner.inquiryDesc")}
              </p>

              <blockquote className="mt-6 border-l-4 border-[#051973] bg-white py-3 pl-5 pr-4 shadow-sm">
                <p className="text-sm italic text-gray-700">
                  {t("benefits.partner.quote")}
                </p>
                <footer className="mt-2 text-xs">
                  <span className="font-semibold text-main">
                    {t("benefits.partner.quoteAuthor")}
                  </span>
                  <span className="text-gray-500">
                    {" "}
                    · {t("benefits.partner.quoteFrom")}
                  </span>
                </footer>
              </blockquote>
            </div>

            <PartnershipInquiryForm />
          </div> */}
        </div>
      </section>
    </div>
  );
}

export const getStaticProps: GetStaticProps = async ({ locale }) => {
  return {
    props: {
      ...(await serverSideTranslations(
        locale ?? "en",
        ["common", "expat"],
        i18nConfig,
      )),
    },
  };
};
