"use client";

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

type LandingCTAProps = {
  onJoin: () => void;
  onLogin: () => void;
};

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

export function LandingCTA({ onJoin, onLogin }: LandingCTAProps) {
  const [restoreDate, setRestoreDate] = useState<string>("");
  useEffect(() => {
    setRestoreDate(formatRestoreDateShort());
  }, []);

  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.ctaBadgeInline}>
              <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}`}
            >
              🔒 立即加入
            </button>
            <button type="button" onClick={onLogin} className={styles.ctaBtnSecondary}>
              已有账号登录
            </button>
          </div>
        </div>
      </div>
    </section>
  );
}