"use client";

import styles from "../vip.module.css";

export function LandingHero() {
  return (
    <section className={`${styles.section} ${styles.heroSection}`} style={{ textAlign: "center" }}>
      <p
        className="animate__animated animate__fadeInDown"
        style={{
          display: "inline-block",
          fontSize: "0.875rem",
          color: "var(--muted-foreground)",
          background: "var(--card)",
          padding: "0.35rem 0.85rem",
          borderRadius: "9999px",
          border: "1px solid var(--border)",
          marginBottom: "1rem",
          animationDelay: "0.1s",
          animationFillMode: "both",
        }}
      >
        异度星球会员中心
      </p>
      <h1
        className="animate__animated animate__fadeInDown"
        style={{
          fontSize: "clamp(2rem, 6vw, 3rem)",
          fontWeight: 700,
          margin: "0 0 0.5rem",
          letterSpacing: "-0.02em",
          lineHeight: 1.2,
          animationDelay: "0.2s",
          animationFillMode: "both",
        }}
      >
        全模块解锁 · 持续更新 · 抱团出海
      </h1>
      <p
        className="animate__animated animate__fadeInDown"
        style={{
          fontSize: "1.125rem",
          color: "var(--muted-foreground)",
          maxWidth: "540px",
          margin: "0 auto",
          lineHeight: 1.6,
          textAlign: "center",
          animationDelay: "0.3s",
          animationFillMode: "both",
        }}
      >
        一次付费，解锁电子书、视频教程、私密社群、即时问答，每周更新
      </p>
    </section>
  );
}