"use client";

import { useEffect } from "react";
import { Link } from "@/i18n/navigation";

/**
 * 支付完成回跳页
 * Z-Pay 的 return_url 不支持带查询参数，故使用 /join/paid 作为专用成功页
 */
export default function JoinPaidPage() {
  useEffect(() => {
    try {
      localStorage.removeItem("join_pay_order");
    } catch {}
    document.cookie = "join_pay_order=; path=/; max-age=0";
  }, []);

  return (
    <div className="flex min-h-screen items-center justify-center bg-[#f0f4f8] px-4">
      <div className="w-full max-w-md animate-fade-in rounded-2xl bg-white p-10 text-center shadow-lg">
        <div className="mx-auto mb-5 flex h-20 w-20 items-center justify-center rounded-full bg-emerald-50 text-5xl">
          ✅
        </div>
        <h2 className="text-2xl font-bold text-slate-800">申请已提交</h2>
        <p className="mt-3 text-slate-500">
          我们会尽快审核你的信息
          <br />
          审核通过后将通过微信邀请你入群
        </p>
        <Link
          href="/"
          className="mt-8 inline-flex items-center gap-2 rounded-full bg-sky-500 px-8 py-3 font-semibold text-white transition-colors hover:bg-sky-600"
        >
          ← 返回首页
        </Link>
      </div>
    </div>
  );
}