"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;
};

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

  return (
    <section className={styles.section} style={{ paddingBottom: "2rem" }}>
      <div
        className={`${styles.card} animate__animated animate__zoomIn`}
        style={{
          maxWidth: "560px",
          margin: "0 auto",
          padding: "1.5rem",
          textAlign: "center",
          animationDelay: "0.2s",
          animationFillMode: "both",
        }}
      >
        <h2 style={{ fontSize: "1.35rem", margin: "0 0 0.5rem", color: "var(--foreground)" }}>
          限时特惠 · {restoreDate || "—"}恢复原价
        </h2>
        <p style={{ fontSize: "0.9rem", color: "var(--muted-foreground)", margin: "0 0 1rem" }}>
          阶梯定价 · 数字交付 · 不支持退款
        </p>
        <p style={{ fontSize: "0.8rem", color: "var(--muted-foreground)", marginBottom: "1.5rem" }}>
          🚫 不适合躺赚、现金流紧张
        </p>
        <div
          style={{
            display: "flex",
            flexWrap: "wrap",
            gap: "1rem",
            justifyContent: "center",
            alignItems: "center",
          }}
        >
          <button
            type="button"
            onClick={onJoin}
            className={`${styles.btnPrimary} ${styles.btnLarge}`}
          >
            🔒 立即加入
          </button>
          <button
            type="button"
            onClick={onLogin}
            className={styles.btnSecondary}
          >
            已有账号登录
          </button>
        </div>
      </div>
    </section>
  );
}