/* android-frame.jsx — a lightweight Pixel-style device frame. */

window.AndroidDevice = function AndroidDevice({ width = 370, height = 800, dark = false, children }) {
  const frameFg = dark ? "#0d0704" : "#0a0a0a";
  return (
    <div style={{
      width, height,
      background: frameFg,
      borderRadius: 38,
      padding: 8,
      boxShadow: "0 40px 80px rgba(0,0,0,0.45), inset 0 0 0 1.5px rgba(243,235,220,0.08)",
      position: "relative",
    }}>
      <div style={{
        width: "100%", height: "100%",
        borderRadius: 32, overflow: "hidden", position: "relative",
        background: "#000",
      }}>
        {/* Hole-punch camera */}
        <div style={{
          position: "absolute", top: 14, left: "50%", transform: "translateX(-50%)",
          width: 10, height: 10, borderRadius: 999,
          background: "#111", border: "1px solid rgba(255,255,255,0.1)",
          zIndex: 12,
        }} />
        {/* Status bar */}
        <div style={{
          position: "absolute", top: 0, left: 0, right: 0, height: 32,
          display: "flex", alignItems: "center", justifyContent: "space-between",
          padding: "6px 18px", zIndex: 11, color: "#FFF", fontSize: 12,
          fontFamily: "Inter Tight, system-ui",
        }}>
          <span style={{ fontWeight: 600 }}>9:41</span>
          <span style={{ display: "inline-flex", gap: 6, opacity: 0.85 }}>
            <span style={{ fontSize: 10 }}>▲ 5G</span>
            <span style={{
              display: "inline-block", width: 18, height: 9,
              border: "1px solid #FFF", borderRadius: 2,
              position: "relative",
            }}>
              <span style={{ position: "absolute", inset: 1, background: "#FFF", borderRadius: 1 }} />
            </span>
          </span>
        </div>
        <div style={{ height: "100%", overflowY: "auto", overflowX: "hidden", paddingTop: 0 }}>
          {children}
        </div>
        {/* Navigation pill */}
        <div style={{
          position: "absolute", bottom: 6, left: "50%", transform: "translateX(-50%)",
          width: 120, height: 3, background: "rgba(243,235,220,0.7)", borderRadius: 999,
          zIndex: 15, pointerEvents: "none",
        }} />
      </div>
    </div>
  );
};