"use client";
/**
 * 订阅取消回跳页
 *
 * 流程：
 *   1. 用户在支付服务托管页点 "Cancel" / 关闭页面
 *   2. 支付服务重定向到 `/subscription/cancel`
 *   3. 这个页面显示 "已取消" + 跳回 `/subscription`
 *
 * 不需要任何后端逻辑（没付款发生）
 */
import Link from "next/link";

import { MobileShell } from "@/app/_components/core/mobile-shell";
import { ROUTES } from "@/router/routes";

export default function SubscriptionCancelPage() {
  return (
    <MobileShell>
      <div
        style={{
          padding: "2rem 1.5rem",
          textAlign: "center",
          minHeight: "60vh",
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          justifyContent: "center",
          gap: "1rem",
        }}
      >
        <h1 style={{ fontSize: "1.5rem", fontWeight: 600, color: "#333" }}>
          Checkout cancelled
        </h1>
        <p style={{ color: "#666" }}>
          You did not complete the subscription. No payment was charged.
        </p>
        <Link
          href={ROUTES.subscription}
          style={{
            padding: "0.75rem 1.5rem",
            borderRadius: "12px",
            background: "linear-gradient(135deg, #f96ADE, #f657A0)",
            color: "white",
            textDecoration: "none",
            fontSize: "1rem",
            fontWeight: 600,
          }}
        >
          Try again
        </Link>
      </div>
    </MobileShell>
  );
}
