// Cardboard box — PNG base + HTML text overlay + mouse parallax tilt
const { useEffect, useRef, useState } = React;

function KraftBox({ name = "上官清越", subtitle = "内容作品集", model = "SGQY-2026", serial = "00154-CY" }) {
  const wrapRef = useRef(null);
  const [tilt, setTilt] = useState({ x: -2, y: 3 });

  useEffect(() => {
    const onMove = (e) => {
      const el = wrapRef.current;
      if (!el) return;
      const r = el.getBoundingClientRect();
      const cx = r.left + r.width / 2;
      const cy = r.top + r.height / 2;
      const dx = (e.clientX - cx) / innerWidth;
      const dy = (e.clientY - cy) / innerHeight;
      setTilt({ x: -2 + dy * -7, y: 3 + dx * 11 });
    };
    addEventListener("pointermove", onMove);
    return () => removeEventListener("pointermove", onMove);
  }, []);

  const FACE_TILT = 1.8;

  return (
    <div
      ref={wrapRef}
      style={{
        perspective: "1600px",
        width: "100%",
        aspectRatio: "774/702",
        position: "relative",
        containerType: "inline-size", // <-- ONE shared container for all cqw inside
        animation: "float-y 7s ease-in-out infinite"
      }}>
      
      <div
        style={{
          width: "100%",
          height: "100%",
          position: "relative",
          transform: `rotateX(${tilt.x}deg) rotateY(${tilt.y}deg)`,
          transformStyle: "preserve-3d",
          transition: "transform .3s cubic-bezier(.2,.7,.2,1)",
          willChange: "transform",
          filter: "drop-shadow(0 24px 28px rgba(80,52,22,.18))"
        }}>
        
        <img
          src="assets/box-v7.png"
          alt="package"
          style={{ width: "100%", height: "100%", display: "block", userSelect: "none", pointerEvents: "none" }}
          draggable={false} />
        

        {/* label rect (inside box front face) */}
        <div
          style={{
            position: "absolute",
            left: `${115 / 774 * 100}%`,
            top: `${190 / 702 * 100}%`,
            width: `${395 / 774 * 100}%`,
            height: `${150 / 702 * 100}%`,
            border: "2px solid #1a1815",
            display: "flex",
            flexDirection: "column",
            alignItems: "center",
            justifyContent: "center",
            transform: `rotate(${FACE_TILT}deg)`,
            transformOrigin: "center",
            boxSizing: "border-box"
          }}>
          
          <div
            style={{
              fontFamily: '"Noto Serif SC","Songti SC","STSong","SimSun",serif',
              fontWeight: 900,


              color: "#1a1815",
              letterSpacing: "0em",
              lineHeight: 1,
              whiteSpace: "nowrap", fontSize: "28.8081px"
            }}>
            {name}</div>
          <div
            style={{
              fontFamily: '"Noto Serif SC","Songti SC","STSong","SimSun",serif',
              fontWeight: 500,

              color: "#1a1815",
              letterSpacing: "0.25em",
              marginTop: "1.2cqw",
              paddingLeft: "0.25em",
              whiteSpace: "nowrap", fontSize: "13px"
            }}>
            {subtitle}</div>
        </div>

        {/* meta rows below the divider */}
        <div
          style={{
            position: "absolute",
            left: `${70 / 774 * 100}%`,
            top: `${378 / 702 * 100}%`,
            width: `${330 / 774 * 100}%`,
            transform: `rotate(${FACE_TILT}deg)`,
            transformOrigin: "left top",
            fontFamily: '"JetBrains Mono",ui-monospace,"Courier New",monospace',
            fontWeight: 600,
            color: "#1a1815",
            display: "grid",
            gap: "0.25cqw"
          }}>
          
          <div style={{ fontSize: "clamp(10px, 1.35cqw, 15px)", letterSpacing: ".04em" }}>型号: {model}</div>
          <div style={{ fontSize: "clamp(10px, 1.35cqw, 15px)", letterSpacing: ".04em" }}>序列号: {serial}</div>
        </div>
      </div>
    </div>);

}

window.KraftBox = KraftBox;