gitlab-instance-0a899031_nomadvip/app/vip/components/landing/LandingCTA.tsx

"use client";

import { useState } from "react";
import { formatRestoreDateShort } from "@/config/promo.config";
import styles from "../vip.module.css";

type LandingCTAProps = {
  onJoin: () => void;
  onLogin: () => void;
  payTestMode?: boolean;
  wechatAvatar?: string | null;
  wechatNick?: string | null;
};

/** 设为 true 可重新展示「适合你 / 请止步」区块（下方 JSX 与 vip.module.css 内样式均保留） */
const SHOW_CTA_AUDIENCE_BOUNDARY = false;

export function LandingCTA({
  onJoin,
  onLogin,
  payTestMode,
  wechatAvatar,
  wechatNick,
}: LandingCTAProps) {
  const [restoreDate] = useState<string>(() => formatRestoreDateShort());
  const hasAvatar = !!(wechatAvatar || "").trim();
  const badgeName = (wechatNick || "微信用户").trim();

  return (
    <section className={`${styles.section} ${styles.ctaSection}`} aria-labelledby="cta-heading">
      <div className={`${styles.ctaInner} animate__animated animate__zoomIn`} style={{ animationDelay: "0.15s", animationFillMode: "both" }}>
        <div className={styles.ctaGlow} aria-hidden />
        <div className={styles.ctaCard}>
          <h2 id="cta-heading" className={styles.ctaPromoLine}>
            <span className={styles.ctaPromoClickable} aria-disabled="true">
              <span className={styles.ctaBadgePulse} aria-hidden />
              限时特惠
            </span>
            <span className={styles.ctaPromoDivider} aria-hidden>
              ·
            </span>
            <span className={styles.ctaPromoMain}>
              <span className={styles.ctaHighlight}>{restoreDate || "—"}</span>
              <span className={styles.ctaPromoSuffix}>恢复原价</span>
            </span>
          </h2>
          <div className={styles.ctaChips}>
            <span className={styles.ctaChip}>阶梯定价</span>
            <span className={styles.ctaChip}>数字交付</span>
            <span className={styles.ctaChip}>持续更新</span>
            <span className={styles.ctaChip}>不支持退款</span>
          </div>
          <div
            className={`${styles.ctaBoundary} ${SHOW_CTA_AUDIENCE_BOUNDARY ? "" : styles.ctaBoundaryHidden}`}
            role="note"
            aria-hidden={!SHOW_CTA_AUDIENCE_BOUNDARY}
          >
            <div className={styles.ctaBoundarySheen} aria-hidden />
            <div className={styles.ctaBoundaryInner}>
              <p className={styles.ctaBoundaryPos}>
                <span className={styles.ctaBoundaryMark} aria-hidden>
                  ✦
                </span>
                <span>
                  <strong className={styles.ctaBoundaryStrong}>适合你：</strong>
                  愿意投入行动、认真做增长与出海的同行者
                </span>
              </p>
              <p className={styles.ctaBoundaryNeg}>
                <span className={styles.ctaBoundaryMarkNeg} aria-hidden>
                  ·
                </span>
                <span>
                  <strong className={styles.ctaBoundaryStrongNeg}>请止步：</strong>
                  指望躺赚，或当下现金流极度紧张的朋友
                </span>
              </p>
            </div>
          </div>
          <div className={styles.ctaActions}>
            <button
              type="button"
              onClick={onJoin}
              className={`${styles.btnPrimary} ${styles.btnLarge} ${styles.ctaBtnPrimary}`}
              style={payTestMode ? { background: "linear-gradient(135deg,#16a34a,#22c55e)" } : undefined}
            >
              🔒 立即加入
              {hasAvatar ? (
                <span
                  title={`${badgeName}（未开通）`}
                  aria-label={`${badgeName}（未开通）`}
                  style={{
                    position: "relative",
                    display: "inline-flex",
                    width: 24,
                    height: 24,
                    marginLeft: 10,
                    verticalAlign: "middle",
                  }}
                >
                  {/* eslint-disable-next-line @next/next/no-img-element */}
                  <img
                    src={(wechatAvatar || "").trim()}
                    alt={badgeName}
                    style={{
                      width: 24,
                      height: 24,
                      borderRadius: "9999px",
                      objectFit: "cover",
                      border: "1px solid rgba(255,255,255,.72)",
                      boxShadow:
                        "0 0 0 1px rgba(15,23,42,.12), 0 2px 6px rgba(2,6,23,.18)",
                    }}
                  />
                  <span
                    aria-hidden
                    style={{
                      position: "absolute",
                      right: -6,
                      bottom: -5,
                      minWidth: 20,
                      height: 12,
                      padding: "0 4px",
                      borderRadius: 9999,
                      background:
                        "linear-gradient(180deg, #fde68a 0%, #f59e0b 58%, #d97706 100%)",
                      border: "1px solid rgba(251,191,36,.95)",
                      display: "flex",
                      alignItems: "center",
                      justifyContent: "center",
                      color: "#7c2d12",
                      fontSize: 7,
                      lineHeight: "12px",
                      fontWeight: 800,
                      letterSpacing: ".25px",
                      boxShadow:
                        "0 2px 7px rgba(245,158,11,.45), inset 0 1px 0 rgba(255,255,255,.55)",
                    }}
                  >
                    VIP
                  </span>
                </span>
              ) : null}
            </button>
            <button type="button" onClick={onLogin} className={styles.ctaBtnSecondary}>
              已有账号登录
            </button>
          </div>
        </div>
      </div>
    </section>
  );
}