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

"use client";

import Link from "next/link";
import { EBOOKS_DISPLAY, TOPICS_DISPLAY, VIDEO_COURSES_DISPLAY } from "@/app/data/vip.mock";
import styles from "../vip.module.css";

type TopicEbookShowcaseProps = {
  onLockedClick?: () => void;
};

export function TopicEbookShowcase({ onLockedClick }: TopicEbookShowcaseProps) {
  return (
    <section id="topics" className={`${styles.section} ${styles.topicsSection}`}>
      <h2 className={styles.sectionTitle}>核心模块</h2>
      <div
        className={`${styles.topicGrid} animate__animated animate__fadeInUp`}
        style={{ animationDelay: "0.2s", animationFillMode: "both", marginBottom: "1.5rem" }}
      >
        {TOPICS_DISPLAY.map((topic) => {
          const isLocked = "locked" in topic && topic.locked && onLockedClick;
          const content = (
            <span className={styles.topicCardInner}>
              {isLocked ? (
                <span className={styles.topicLock} title="会员专享">
                  🔒
                </span>
              ) : null}
              <span className={styles.topicIcon}>{topic.icon}</span>
              <span className={styles.topicTitle}>{topic.title}</span>
              <span className={styles.topicDesc}>{topic.desc}</span>
            </span>
          );

          if (isLocked) {
            return (
              <button
                key={topic.id}
                type="button"
                className={styles.topicCard}
                onClick={onLockedClick}
                style={{ cursor: "pointer", border: "none", font: "inherit" }}
              >
                {content}
              </button>
            );
          }

          if (topic.href) {
            return (
              <Link
                key={topic.id}
                href={topic.href}
                className={styles.topicCard}
                target={topic.href.startsWith("http") ? "_blank" : undefined}
                rel={topic.href.startsWith("http") ? "noopener noreferrer" : undefined}
              >
                {content}
              </Link>
            );
          }
        })}
      </div>

      <h2 id="video-courses" className={styles.sectionTitle}>
        视频教程
      </h2>
      <div
        className={`${styles.topicGrid} animate__animated animate__fadeInUp`}
        style={{ animationDelay: "0.22s", animationFillMode: "both", marginBottom: "1.5rem" }}
      >
        {VIDEO_COURSES_DISPLAY.map((video) => (
          <Link
            key={video.id}
            href={video.href}
            className={styles.topicCard}
            target={video.href.startsWith("http") ? "_blank" : undefined}
            rel={video.href.startsWith("http") ? "noopener noreferrer" : undefined}
          >
            <span className={styles.topicIcon}>{video.icon}</span>
            <span className={styles.topicTitle}>{video.title}</span>
            <span className={styles.topicDesc}>{video.desc}</span>
          </Link>
        ))}
      </div>

      <h2 id="ebooks" className={styles.sectionTitle}>
        电子书
      </h2>
      <div
        className="animate__animated animate__fadeInUp"
        style={{
          display: "grid",
          gridTemplateColumns: "repeat(auto-fill, minmax(260px, 1fr))",
          gap: "1rem",
          animationDelay: "0.25s",
          animationFillMode: "both",
        }}
      >
        {EBOOKS_DISPLAY.map((ebook) => {
          const isLocked = "locked" in ebook && ebook.locked && onLockedClick;
          const cardContent = (
            <>
              <span style={{ fontSize: "1.5rem", marginBottom: "0.5rem", display: "block" }}>📙</span>
              <div
                style={{
                  display: "flex",
                  alignItems: "center",
                  gap: "0.5rem",
                  flexWrap: "wrap",
                  fontWeight: 600,
                  color: "var(--foreground)",
                  marginBottom: "0.25rem",
                }}
              >
                《{ebook.title}》
                {"free" in ebook && ebook.free ? <span className={styles.freeBadge}>免费</span> : null}
                {isLocked ? <span title="会员专享">🔒</span> : null}
              </div>
              <div style={{ fontSize: "0.9rem", color: "var(--muted-foreground)" }}>{ebook.desc}</div>
              <div style={{ marginTop: "0.75rem", fontSize: "0.85rem", color: "var(--muted-foreground)" }}>
                {isLocked ? "开通会员解锁 →" : "立即阅读 →"}
              </div>
            </>
          );

          if (isLocked) {
            return (
              <button
                key={ebook.id}
                type="button"
                onClick={onLockedClick}
                className={styles.card}
                style={{
                  display: "block",
                  width: "100%",
                  padding: "1.25rem",
                  border: "none",
                  cursor: "pointer",
                  font: "inherit",
                  textAlign: "left",
                }}
              >
                {cardContent}
              </button>
            );
          }

          return (
            <Link
              key={ebook.id}
              href={ebook.href}
              className={styles.card}
              style={{
                display: "block",
                padding: "1.25rem",
                textDecoration: "none",
                color: "inherit",
              }}
            >
              {cardContent}
            </Link>
          );
        })}
      </div>
    </section>
  );
}