/**
 * [INPUT]: 依赖 react（useState 管悬停）；无数据依赖，纯展示、自带样式
 * [OUTPUT]: 对外提供 MysteryCard —— 占位课「敬请期待」神秘卡：3D 绸缎遮罩 + 朱印封蜡 + 流光（裁进卡内）+ 悬停微掀
 * [POS]: components/v4 的占位课呈现件。HubHome / LandingPage 对 `comingSoon` 课渲染本卡（不显名/价、不可购）。
 *        3D 绸缎是【刻意的设计系统例外】（同 public/landing.html 的 3D），专给「神秘感」破例；配色守黑白灰 + 朱封蜡。
 * [PROTOCOL]: 变更时更新此头部，然后检查 CLAUDE.md
 */
import { useState } from 'react'

const ACCENT = 'var(--zzm-accent,#A6402F)'

export function MysteryCard() {
  const [hover, setHover] = useState(false)
  return (
    <div
      role="img"
      aria-label="敬请期待：一门尚未揭晓的课程"
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        position: 'relative', width: '100%', aspectRatio: '266 / 316', borderRadius: 16,
        transform: hover ? 'translateY(-6px) scale(1.012)' : 'none',
        transition: 'transform .5s cubic-bezier(.2,.75,.2,1), box-shadow .5s',
        boxShadow: hover
          ? '0 40px 60px -28px rgba(6,6,12,.6), 0 8px 20px rgba(0,0,0,.34)'
          : '0 30px 48px -26px rgba(6,6,12,.55), 0 5px 14px rgba(0,0,0,.3)',
      }}
    >
      {/* 流光关键帧（inline style 无法写 @keyframes，随组件注入；重复同名无害） */}
      <style>{'@keyframes zzmMysterySheen{0%{transform:translateX(-46%)}58%{transform:translateX(135%)}100%{transform:translateX(135%)}}'}</style>

      {/* 绸缎面：overflow:hidden 把流光裁进圆角矩形内，不溢出到容器 */}
      <div style={{
        position: 'absolute', inset: 0, borderRadius: 16, overflow: 'hidden',
        background: `radial-gradient(150% 92% at 50% 30%, rgba(255,255,255,.10), transparent 50%),
          linear-gradient(101deg, transparent 0 5%, rgba(255,255,255,.05) 10%, transparent 18%, rgba(0,0,0,.24) 28%, transparent 38%, rgba(255,255,255,.055) 50%, transparent 60%, rgba(0,0,0,.22) 70%, transparent 79%, rgba(255,255,255,.04) 88%, transparent 100%),
          linear-gradient(159deg, #28282f 0%, #16161c 47%, #0a0a0e 100%)`,
      }}>
        <div style={{
          position: 'absolute', inset: '-24% -46%', pointerEvents: 'none',
          background: 'linear-gradient(112deg, transparent 36%, rgba(214,218,238,.19) 46%, rgba(255,255,255,.06) 51%, transparent 64%)',
          animation: 'zzmMysterySheen 6.8s ease-in-out infinite',
        }} />
        <div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, height: 58, background: 'linear-gradient(to top, rgba(0,0,0,.4), transparent)' }} />
      </div>

      {/* 顶标 */}
      <div style={{ position: 'absolute', top: 15, left: 15, fontFamily: 'var(--zzm-mono)', fontSize: 9.5, letterSpacing: '.26em', color: 'rgba(232,228,220,.5)' }}>即将揭晓</div>

      {/* 朱印封蜡 · 品牌四角星 */}
      <div style={{
        position: 'absolute', left: '50%', top: '41%', transform: 'translate(-50%,-50%)', width: 76, height: 76, borderRadius: '50%',
        background: 'radial-gradient(circle at 37% 30%, #c25642, #93382a 60%, #6d2519)',
        boxShadow: 'inset 0 2px 5px rgba(255,222,210,.32), inset 0 -5px 10px rgba(0,0,0,.42), 0 7px 16px rgba(0,0,0,.4)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}>
        <svg width="34" height="34" viewBox="0 0 40 40" aria-hidden="true">
          <path d="M20 3 L23.4 16.6 L37 20 L23.4 23.4 L20 37 L16.6 23.4 L3 20 L16.6 16.6 Z" fill="#ede7dc" opacity=".92" />
        </svg>
      </div>

      {/* 敬请期待 */}
      <div style={{
        position: 'absolute', left: 0, right: 0, top: 'calc(41% + 56px)', textAlign: 'center',
        color: 'rgba(237,231,220,.9)', fontSize: 15, fontWeight: 600, letterSpacing: '.44em', paddingLeft: '.44em',
      }}>敬请期待</div>

      {/* 悬停微掀：底部透出一线朱光 */}
      <div style={{
        position: 'absolute', left: '14%', right: '14%', bottom: 20, height: 2, borderRadius: 2,
        background: `linear-gradient(90deg, transparent, ${ACCENT}, transparent)`,
        opacity: hover ? 0.85 : 0, transition: 'opacity .5s',
      }} />
    </div>
  )
}