// iPad frame for design canvas. Renders a thin device bezel with a status bar.
function IPadFrame({ width = 1366, height = 1024, theme = "light", children }) {
  const isDark = theme === "dark";
  const bezel = isDark ? "#0A0A0C" : "#101013";
  const speaker = isDark ? "#1A1A1E" : "#26262B";
  const bezelW = 14;
  return (
    <div style={{
      width: width + bezelW * 2 + 4,
      borderRadius: 36,
      padding: bezelW,
      background: bezel,
      boxShadow: "0 30px 80px rgba(0,0,0,0.18), 0 0 0 1.5px rgba(255,255,255,0.05) inset",
      position: "relative",
    }}>
      {/* camera */}
      <div style={{
        position: "absolute",
        top: bezelW / 2 + 1, left: "50%", transform: "translateX(-50%)",
        width: 6, height: 6, borderRadius: 999, background: speaker,
      }}></div>
      <div style={{
        width, height,
        borderRadius: 22,
        overflow: "hidden",
        position: "relative",
        background: "#000",
      }}>
        {children}
      </div>
    </div>
  );
}

// Status bar to drop inside an iPad screen.
function IPadStatus({ T, dark = false }) {
  const fg = dark ? "rgba(255,255,255,0.85)" : "rgba(0,0,0,0.7)";
  return (
    <div style={{
      height: 24,
      display: "flex", alignItems: "center", justifyContent: "space-between",
      padding: "0 22px",
      fontFamily: T.fontUI,
      fontSize: 13,
      fontWeight: 600,
      color: fg,
      flexShrink: 0,
    }}>
      <span>9:41</span>
      <div style={{ display: "flex", alignItems: "center", gap: 5 }}>
        {/* signal */}
        <svg width="16" height="10" viewBox="0 0 16 10" fill={fg}><rect x="0" y="6" width="2" height="4" rx="0.5"/><rect x="4" y="4" width="2" height="6" rx="0.5"/><rect x="8" y="2" width="2" height="8" rx="0.5"/><rect x="12" y="0" width="2" height="10" rx="0.5"/></svg>
        <span style={{ fontSize: 11, fontWeight: 700, letterSpacing: "0.05em" }}>WiFi</span>
        {/* battery */}
        <svg width="22" height="10" viewBox="0 0 22 10" fill="none" stroke={fg} strokeWidth="1">
          <rect x="0.5" y="0.5" width="18" height="9" rx="2"/>
          <rect x="2" y="2" width="13" height="6" rx="1" fill={fg}/>
          <rect x="20" y="3.5" width="1.5" height="3" rx="0.5" fill={fg}/>
        </svg>
      </div>
    </div>
  );
}

Object.assign(window, { IPadFrame, IPadStatus });