import type { CardFaceProps } from "./types";

/** 卡面：黑金 VIP — 深黑底色 + 金色光晕与描边，体现尊贵身份 */
export function VipFace(_: CardFaceProps) {
  return (
    <>
      {/* 完全覆盖底部 palette，建立黑金底色 */}
      <div
        className="absolute inset-0"
        style={{
          background: "linear-gradient(135deg, #0f0f0f 0%, #1a1610 40%, #0d0d0d 100%)",
        }}
      />

      {/* 金色主光晕：右上角 */}
      <div
        className="absolute -right-10 -top-10 size-52 rounded-full opacity-30 blur-3xl"
        style={{
          background: "radial-gradient(circle, #d4a843 0%, #9a6f1a 50%, transparent 75%)",
        }}
      />

      {/* 金色副光晕：左下角 */}
      <div
        className="absolute -bottom-12 -left-6 size-44 rounded-full opacity-20 blur-3xl"
        style={{
          background: "radial-gradient(circle, #c49b2e 0%, transparent 70%)",
        }}
      />

      {/* 中部横向光带 */}
      <div
        className="absolute inset-x-0 top-1/2 h-px -translate-y-1/2 opacity-20"
        style={{
          background:
            "linear-gradient(to right, transparent 0%, #d4a843 30%, #f0d060 50%, #d4a843 70%, transparent 100%)",
        }}
      />

      {/* 顶部金色高光边 */}
      <div
        className="absolute inset-x-0 top-0 h-px"
        style={{
          background:
            "linear-gradient(to right, transparent 5%, #c8992a 30%, #f5d060 50%, #c8992a 70%, transparent 95%)",
        }}
      />

      {/* 底部深金色压边 */}
      <div
        className="absolute inset-x-0 bottom-0 h-px opacity-50"
        style={{
          background:
            "linear-gradient(to right, transparent 10%, #9a6f1a 40%, #b8881f 60%, transparent 90%)",
        }}
      />

      {/* 右侧竖向装饰线 */}
      <div
        className="absolute bottom-4 right-5 top-4 w-px opacity-15"
        style={{
          background:
            "linear-gradient(to bottom, transparent, #d4a843 30%, #f0d060 60%, transparent)",
        }}
      />

      {/* 细噪点 SVG filter */}
      <svg className="absolute size-0">
        <filter id="vip-noise">
          <feTurbulence
            type="fractalNoise"
            baseFrequency="0.75"
            numOctaves="4"
            stitchTiles="stitch"
          />
          <feColorMatrix type="saturate" values="0" />
          <feBlend in="SourceGraphic" mode="overlay" result="blend" />
          <feComposite in="blend" in2="SourceGraphic" operator="in" />
        </filter>
      </svg>

      {/* 噪点层：增加高端质感 */}
      <div
        className="absolute inset-0 opacity-[0.12] mix-blend-overlay"
        style={{ filter: "url(#vip-noise)" }}
      />

      {/* 整体金色微光叠层 */}
      <div
        className="absolute inset-0 opacity-[0.04]"
        style={{
          background: "linear-gradient(120deg, transparent 20%, #d4a843 50%, transparent 80%)",
        }}
      />

      {/* 菱形网格纹 */}
      <div
        className="absolute inset-0 opacity-[0.06]"
        style={{
          backgroundImage:
            "repeating-linear-gradient(45deg, #d4a843 0px, #d4a843 1px, transparent 1px, transparent 14px), repeating-linear-gradient(-45deg, #d4a843 0px, #d4a843 1px, transparent 1px, transparent 14px)",
        }}
      />

      {/* VIP 大水印文字 */}
      <div
        className="pointer-events-none absolute -bottom-4 -left-2 select-none font-black leading-none tracking-widest opacity-[0.07]"
        style={{
          fontSize: "84px",
          color: "#d4a843",
          fontFamily: "serif",
          letterSpacing: "0.15em",
        }}
      >
        VIP
      </div>

      {/* 斜向扫光带 */}
      <div
        className="absolute -inset-y-4 w-12 -rotate-12 opacity-[0.08] blur-sm"
        style={{
          left: "38%",
          background:
            "linear-gradient(to bottom, transparent, #f5d060 30%, #fff8dc 50%, #f5d060 70%, transparent)",
        }}
      />
    </>
  );
}