// Shared visual placeholders (subtly-toned, no hand-drawn SVG figures)

const ImgPh = ({ label, tone = "warm", src, focus, style = {}, children }) => {
  if (src) {
    const objectPosition = focus || "center";
    return (
      <div className="imgph real" style={{ width: "100%", height: "100%", position: "relative", overflow: "hidden", ...style }}>
        <img
          src={src}
          alt={label || ""}
          loading="lazy"
          style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition, display: "block" }}
        />
        {children}
      </div>
    );
  }
  const cls = tone === "dark" ? "imgph dark" : "imgph";
  return (
    <div className={cls} style={{ width: "100%", height: "100%", ...style }}>
      <div className="label">{label}</div>
      {children}
    </div>
  );
};

// Minimal decorative glyphs — allowed geometric primitives only
const GoldDiamond = ({ size = 10 }) => (
  <svg width={size} height={size} viewBox="0 0 10 10" aria-hidden>
    <rect x="5" y="0.5" width="6.36" height="6.36" transform="rotate(45 5 5)"
          fill="none" stroke="#B8935E" strokeWidth="0.8"/>
  </svg>
);

const SealMark = ({ text = "美", size = 56 }) => (
  <svg width={size} height={size} viewBox="0 0 56 56" aria-hidden>
    <rect x="2" y="2" width="52" height="52" fill="#A8615A" rx="3"/>
    <text x="28" y="38" textAnchor="middle" fontFamily="'Noto Serif TC', serif"
          fontSize="28" fill="#FBF6F1" fontWeight="500">{text}</text>
  </svg>
);

// Simple QR-like placeholder (grid pattern, not a real QR)
const QRPh = ({ size = 100 }) => {
  const cells = [];
  const seed = [1,0,1,1,0,1,0,1,0,1,1,0,0,1,0,1,1,0,1,0,1,1,1,0,1,0,1,1,0,1,0,1,1,0];
  for (let y=0; y<11; y++) {
    for (let x=0; x<11; x++) {
      const v = seed[(x*3 + y*5) % seed.length];
      if (v) cells.push(<rect key={`${x}-${y}`} x={x*9+2} y={y*9+2} width="8" height="8" fill="#2A1E17" />);
    }
  }
  return (
    <svg width={size} height={size} viewBox="0 0 105 105">
      <rect width="105" height="105" fill="#fff"/>
      {cells}
      {/* finder squares */}
      <rect x="2" y="2" width="27" height="27" fill="none" stroke="#2A1E17" strokeWidth="3"/>
      <rect x="10" y="10" width="11" height="11" fill="#2A1E17"/>
      <rect x="76" y="2" width="27" height="27" fill="none" stroke="#2A1E17" strokeWidth="3"/>
      <rect x="84" y="10" width="11" height="11" fill="#2A1E17"/>
      <rect x="2" y="76" width="27" height="27" fill="none" stroke="#2A1E17" strokeWidth="3"/>
      <rect x="10" y="84" width="11" height="11" fill="#2A1E17"/>
    </svg>
  );
};

Object.assign(window, { ImgPh, GoldDiamond, SealMark, QRPh });