"use client";

import { COMPARE_ITEMS } from "@/app/data/vip.mock";
import styles from "../vip.module.css";

export function CompareSection() {
  return (
    <section className={styles.section}>
      <h2 className={styles.sectionTitle}>单品 vs 会员</h2>
      <p className={styles.sectionDesc}>一次付费，全部解锁</p>
      <div
        className="animate__animated animate__fadeInUp"
        style={{
          overflow: "hidden",
          borderRadius: "12px",
          border: "1px solid var(--border)",
          animationDelay: "0.25s",
          animationFillMode: "both",
        }}
      >
        <table
          style={{
            width: "100%",
            borderCollapse: "collapse",
            fontSize: "0.9rem",
          }}
        >
          <thead>
            <tr style={{ background: "var(--muted)" }}>
              <th
                style={{
                  padding: "0.75rem 1rem",
                  textAlign: "left",
                  fontWeight: 600,
                  color: "var(--foreground)",
                }}
              >
                权益
              </th>
              <th
                style={{
                  padding: "0.75rem 1rem",
                  textAlign: "center",
                  fontWeight: 600,
                  color: "var(--muted-foreground)",
                }}
              >
                单品
              </th>
              <th
                style={{
                  padding: "0.75rem 1rem",
                  textAlign: "center",
                  fontWeight: 600,
                  color: "var(--accent)",
                }}
              >
                会员
              </th>
            </tr>
          </thead>
          <tbody>
            {COMPARE_ITEMS.map((row, i) => (
              <tr
                key={i}
                style={{
                  borderTop: "1px solid var(--border)",
                  background: i % 2 === 1 ? "var(--muted)" : "transparent",
                }}
              >
                <td style={{ padding: "0.75rem 1rem", color: "var(--foreground)" }}>
                  {row.feature}
                </td>
                <td style={{ padding: "0.75rem 1rem", textAlign: "center", color: "var(--muted-foreground)" }}>
                  {row.single}
                </td>
                <td style={{ padding: "0.75rem 1rem", textAlign: "center", color: "var(--accent)" }}>
                  {row.member}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </section>
  );
}