/* ============================================================
 * mounting.jsx — Background / mounting scenes
 * ============================================================ */

const MOUNTS = [
  { id: "felt",    name: "毛毡",   shape: "default" },
  { id: "wood",    name: "木桌",   shape: "default" },
  { id: "xuan",    name: "宣纸",   shape: "default" },
  { id: "phone",   name: "手机壳", shape: "tall"    },
  { id: "frame",   name: "画框",   shape: "default" },
  { id: "basket",  name: "竹篮",   shape: "square"  },
  { id: "tea",     name: "茶席",   shape: "wide"    },
  { id: "plainW",  name: "纯白",   shape: "default" },
  { id: "plainB",  name: "纯黑",   shape: "default" },
  { id: "trans",   name: "透明",   shape: "default" },
];

function MountFelt() {
  return (
    <div style={{
      position: "absolute", inset: 0,
      background:
        "radial-gradient(800px 600px at 20% 10%, #9a948b, transparent 60%)," +
        "radial-gradient(800px 600px at 90% 90%, #7d756a, transparent 60%)," +
        "linear-gradient(180deg, #8d8780, #6e675e)",
    }}>
      {/* Fiber overlay */}
      <svg width="100%" height="100%" preserveAspectRatio="none" style={{ position: "absolute", inset: 0, opacity: 0.35 }}>
        <defs>
          <filter id="feltNoise">
            <feTurbulence type="fractalNoise" baseFrequency="1.8" numOctaves="2" seed="3"/>
            <feColorMatrix values="0 0 0 0 0.4
                                   0 0 0 0 0.38
                                   0 0 0 0 0.34
                                   0 0 0 0.55 0"/>
          </filter>
        </defs>
        <rect width="100%" height="100%" filter="url(#feltNoise)"/>
      </svg>
      {/* tiny tea bowl detail (top right) */}
      <div style={{
        position: "absolute", top: -30, right: -30, width: 120, height: 120, borderRadius: "50%",
        background: "radial-gradient(circle at 35% 35%, #c84a3a, #7c1f17)",
        opacity: 0.85,
        boxShadow: "inset -10px -10px 16px rgba(0,0,0,0.4)"
      }}/>
    </div>
  );
}

function MountWood() {
  return (
    <div style={{
      position: "absolute", inset: 0,
      background:
        "linear-gradient(180deg, #b78858, #8a5e35)",
    }}>
      <svg width="100%" height="100%" preserveAspectRatio="none" style={{ position: "absolute", inset: 0, opacity: 0.5 }}>
        <defs>
          <filter id="woodGrain">
            <feTurbulence type="turbulence" baseFrequency="0.02 0.6" numOctaves="3" seed="4"/>
            <feColorMatrix values="0 0 0 0 0.3
                                   0 0 0 0 0.18
                                   0 0 0 0 0.08
                                   0 0 0 0.5 0"/>
          </filter>
        </defs>
        <rect width="100%" height="100%" filter="url(#woodGrain)"/>
      </svg>
    </div>
  );
}

function MountXuan() {
  return (
    <div style={{
      position: "absolute", inset: 0,
      background: "linear-gradient(180deg, #f5efe0, #ede2cb)",
    }}>
      <svg width="100%" height="100%" preserveAspectRatio="none" style={{ position: "absolute", inset: 0, opacity: 0.18 }}>
        <defs>
          <filter id="xuanNoise">
            <feTurbulence type="fractalNoise" baseFrequency="3" numOctaves="1" seed="6"/>
            <feColorMatrix values="0 0 0 0 0.4
                                   0 0 0 0 0.35
                                   0 0 0 0 0.25
                                   0 0 0 0.6 0"/>
          </filter>
        </defs>
        <rect width="100%" height="100%" filter="url(#xuanNoise)"/>
      </svg>
      {/* subtle fibers */}
      <svg width="100%" height="100%" preserveAspectRatio="none" style={{ position: "absolute", inset: 0, opacity: 0.4 }}>
        <g stroke="#a89172" strokeWidth="0.4" fill="none">
          <path d="M0 80 Q200 75, 400 82 T800 78"/>
          <path d="M0 180 Q150 175, 300 182 T800 180"/>
          <path d="M0 300 Q200 295, 400 302 T800 300"/>
          <path d="M100 0 Q102 200, 98 400 T100 800"/>
          <path d="M500 0 Q498 250, 502 500 T500 800"/>
        </g>
      </svg>
    </div>
  );
}

function MountPhone({ children }) {
  // A transparent phone case overlay
  return (
    <div style={{ position: "absolute", inset: 0, background: "linear-gradient(135deg, #ece2cf, #d4c6ad)" }}>
      {/* Phone body */}
      <div style={{
        position: "absolute",
        top: "8%", bottom: "8%",
        left: "50%",
        transform: "translateX(-50%)",
        aspectRatio: "9 / 19",
        height: "84%",
        background: "rgba(255,255,255,0.18)",
        border: "2px solid rgba(0,0,0,0.18)",
        borderRadius: "28px",
        boxShadow: "0 30px 60px -20px rgba(0,0,0,0.35), inset 0 0 0 1px rgba(255,255,255,0.4)",
        overflow: "hidden",
        backdropFilter: "blur(2px)",
      }}>
        {/* Camera island */}
        <div style={{
          position: "absolute", top: "3%", right: "5%",
          width: "26%", height: "12%",
          background: "rgba(0,0,0,0.12)",
          border: "1px solid rgba(0,0,0,0.15)",
          borderRadius: "16px",
        }}/>
        <div style={{ position: "absolute", inset: 0, padding: "15% 8%", display: "flex", flexDirection: "column", justifyContent: "center", gap: "12px" }}>
          {children}
        </div>
      </div>
    </div>
  );
}

function MountFrame({ children }) {
  return (
    <div style={{ position: "absolute", inset: 0, background: "#3a2c1d", padding: "6%" }}>
      <div style={{
        position: "absolute", inset: "4%",
        background: "#5a4426",
        borderRadius: 4,
        boxShadow: "inset 0 0 0 1px rgba(0,0,0,0.3), inset 0 0 30px rgba(0,0,0,0.4)",
      }}/>
      <div style={{
        position: "absolute", inset: "8%",
        background: "linear-gradient(180deg, #f5efe0, #ebe2d2)",
        boxShadow: "inset 0 0 0 1px #8a7556, inset 0 4px 8px rgba(0,0,0,0.15)",
        display: "grid", placeItems: "center",
        padding: "5%",
      }}>
        {children}
      </div>
    </div>
  );
}

function MountBasket({ children }) {
  return (
    <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, #c9a878, #8a6534)" }}>
      <svg width="100%" height="100%" preserveAspectRatio="none" style={{ position: "absolute", inset: 0, opacity: 0.6 }}>
        <defs>
          <pattern id="bamboo-weave" x="0" y="0" width="40" height="20" patternUnits="userSpaceOnUse">
            <rect x="0" y="0" width="20" height="9" fill="#6d4a22"/>
            <rect x="20" y="11" width="20" height="9" fill="#6d4a22"/>
            <rect x="20" y="0" width="20" height="9" fill="#a87a44"/>
            <rect x="0" y="11" width="20" height="9" fill="#a87a44"/>
          </pattern>
        </defs>
        <rect width="100%" height="100%" fill="url(#bamboo-weave)"/>
      </svg>
      <div style={{ position: "absolute", inset: 0, display: "grid", placeItems: "center" }}>
        {children}
      </div>
    </div>
  );
}

function MountTea() {
  return (
    <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, #e0d1b0, #b89668)" }}>
      <svg width="100%" height="100%" preserveAspectRatio="none" style={{ position: "absolute", inset: 0, opacity: 0.4 }}>
        <defs>
          <filter id="teaNoise">
            <feTurbulence type="fractalNoise" baseFrequency="0.02" numOctaves="2" seed="2"/>
            <feColorMatrix values="0 0 0 0 0.3
                                   0 0 0 0 0.22
                                   0 0 0 0 0.12
                                   0 0 0 0.4 0"/>
          </filter>
        </defs>
        <rect width="100%" height="100%" filter="url(#teaNoise)"/>
        {/* horizontal weave lines */}
        <g stroke="#6e4923" strokeWidth="0.8" opacity="0.5">
          {Array.from({length: 60}).map((_, i) => (
            <line key={i} x1="0" y1={i * 14} x2="100%" y2={i * 14}/>
          ))}
        </g>
      </svg>
      {/* tea cup hint */}
      <div style={{
        position: "absolute",
        bottom: "8%", right: "8%",
        width: 70, height: 70,
        borderRadius: "50%",
        background: "radial-gradient(circle at 40% 35%, #e8e3d5, #c4b89a)",
        boxShadow: "0 8px 20px rgba(0,0,0,0.2), inset -8px -8px 14px rgba(0,0,0,0.18)",
      }}/>
    </div>
  );
}

function MountPlainW() {
  return <div style={{ position: "absolute", inset: 0, background: "#fbfaf6" }}/>;
}
function MountPlainB() {
  return <div style={{ position: "absolute", inset: 0, background: "#1a1612" }}/>;
}
function MountTrans() {
  // checkered background
  return (
    <div style={{
      position: "absolute", inset: 0,
      backgroundImage:
        "linear-gradient(45deg, #d8d2c4 25%, transparent 25%)," +
        "linear-gradient(-45deg, #d8d2c4 25%, transparent 25%)," +
        "linear-gradient(45deg, transparent 75%, #d8d2c4 75%)," +
        "linear-gradient(-45deg, transparent 75%, #d8d2c4 75%)",
      backgroundSize: "20px 20px",
      backgroundPosition: "0 0, 0 10px, 10px -10px, -10px 0",
      backgroundColor: "#f5efe4",
    }}/>
  );
}

function MountScene({ kind, children }) {
  // For phone / frame / basket -- they overlay the strip in their layout
  if (kind === "phone")  return <MountPhone>{children}</MountPhone>;
  if (kind === "frame")  return <MountFrame>{children}</MountFrame>;
  if (kind === "basket") return <MountBasket>{children}</MountBasket>;

  // For others: bg then children centered on top
  const Bg = {
    felt: MountFelt,
    wood: MountWood,
    xuan: MountXuan,
    tea: MountTea,
    plainW: MountPlainW,
    plainB: MountPlainB,
    trans: MountTrans,
  }[kind] || MountFelt;

  return (
    <>
      <Bg/>
      <div style={{ position: "absolute", inset: 0, display: "grid", placeItems: "center", padding: "5%" }}>
        {children}
      </div>
    </>
  );
}

Object.assign(window, { MountScene, MOUNTS });