"use client";

import Link from "next/link";
import { useRouter } from "next/navigation";
import { motion } from "framer-motion";
import { Wallet, ShieldCheck, PackageSearch } from "lucide-react";
import { Button } from "@/components/ui/Button";
import { useTranslation } from "@/lib/i18n/LanguageProvider";

export default function WelcomePage() {
  const router = useRouter();
  const { t } = useTranslation();

  const FEATURES = [
    {
      icon: PackageSearch,
      title: t("welcome.feature1Title"),
      desc: t("welcome.feature1Desc"),
    },
    {
      icon: Wallet,
      title: t("welcome.feature2Title"),
      desc: t("welcome.feature2Desc"),
    },
    {
      icon: ShieldCheck,
      title: t("welcome.feature3Title"),
      desc: t("welcome.feature3Desc"),
    },
  ];

  return (
    <div className="relative flex min-h-dvh flex-1 flex-col overflow-hidden bg-ink px-6 pt-safe pb-safe">
      <div className="pointer-events-none absolute -top-16 right-[-40px] h-56 w-56 rounded-full bg-teal/15 blur-3xl" />
      <div className="pointer-events-none absolute top-40 left-[-50px] h-56 w-56 rounded-full bg-gold/15 blur-3xl" />

      <div className="flex flex-1 flex-col justify-center gap-10 py-10">
        <motion.div
          initial={{ opacity: 0, y: 16 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5 }}
          className="relative flex h-48 items-center justify-center"
        >
          {/* signature: stacked voucher cards, echoing the package-card motif */}
          {[0, 1, 2].map((i) => (
            <div
              key={i}
              className="absolute h-32 w-56 rounded-3xl border border-white/10 bg-white/[0.05] backdrop-blur-xl"
              style={{
                transform: `rotate(${(i - 1) * 10}deg) translateY(${i === 1 ? -8 : 4}px)`,
                zIndex: i === 1 ? 10 : 1,
              }}
            >
              <div
                className={`h-2 w-full rounded-t-3xl ${
                  ["bg-zong", "bg-gold", "bg-ufone"][i]
                }`}
              />
            </div>
          ))}
        </motion.div>

        <motion.div
          initial={{ opacity: 0, y: 16 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5, delay: 0.1 }}
          className="text-center"
        >
          <h1 className="font-display text-[26px] font-semibold leading-tight text-paper">
            {t("welcome.heading1")}
            <br />
            {t("welcome.heading2")}
          </h1>
          <p className="mt-2 text-sm text-paper/60">
            {t("welcome.subtitle")}
          </p>
        </motion.div>

        <div className="flex flex-col gap-4">
          {FEATURES.map((f, i) => (
            <motion.div
              key={f.title}
              initial={{ opacity: 0, x: -12 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.4, delay: 0.2 + i * 0.08 }}
              className="flex items-center gap-3 rounded-3xl border border-white/10 bg-white/[0.04] px-4 py-3.5"
            >
              <span className="flex h-10 w-10 items-center justify-center rounded-2xl bg-gold/15">
                <f.icon size={18} strokeWidth={2} className="text-gold-bright" />
              </span>
              <div>
                <p className="text-sm font-semibold text-paper">{f.title}</p>
                <p className="text-xs text-paper/55">{f.desc}</p>
              </div>
            </motion.div>
          ))}
        </div>
      </div>

      <div className="flex flex-col gap-3">
        <Button size="lg" fullWidth onClick={() => router.push("/signup")}>
          {t("welcome.getStarted")}
        </Button>
        <p className="text-center text-sm text-paper/60">
          {t("welcome.alreadyHaveAccount")}{" "}
          <Link href="/login" className="font-semibold text-gold-bright">
            {t("welcome.logIn")}
          </Link>
        </p>
      </div>
    </div>
  );
}