/* ios-frame.jsx — a lightweight iPhone-style device frame. */

window.IOSDevice = function IOSDevice({ width = 370, height = 800, dark = false, children }) {
  const frameFg = dark ? "#0d0704" : "#0b0b0b";
  return (
    <div style={{
      width, height,
      background: frameFg,
      borderRadius: 48,
      padding: 10,
      boxShadow: "0 40px 80px rgba(0,0,0,0.45), inset 0 0 0 1.5px rgba(243,235,220,0.08)",
      position: "relative",
    }}>
      {/* Screen */}
      <div style={{
        width: "100%", height: "100%",
        borderRadius: 40, overflow: "hidden", position: "relative",
        background: "#000",
      }}>
        {/* Dynamic island */}
        <div style={{
          position: "absolute", top: 10, left: "50%", transform: "translateX(-50%)",
          width: 110, height: 30, background: "#000", borderRadius: 999, zIndex: 10,
        }} />
        {/* Time (clock style) */}
        <div style={{
          position: "absolute", top: 16, left: 28, zIndex: 11,
          fontFamily: "SF Pro, Inter Tight, system-ui", fontSize: 15, fontWeight: 600,
          color: "#FFF", letterSpacing: "-0.01em",
        }}>9:41</div>
        {/* Battery etc. */}
        <div style={{
          position: "absolute", top: 16, right: 24, zIndex: 11,
          display: "flex", alignItems: "center", gap: 4,
          color: "#FFF", fontSize: 12,
        }}>
          <span style={{ fontSize: 11 }}>●●●</span>
          <span style={{
            display: "inline-block", width: 22, height: 11,
            border: "1px solid #FFF", borderRadius: 3, position: "relative",
          }}>
            <span style={{
              position: "absolute", inset: 1,
              background: "#FFF", borderRadius: 1,
            }} />
          </span>
        </div>
        {/* Content */}
        <div style={{ height: "100%", overflowY: "auto", overflowX: "hidden" }}>
          {children}
        </div>
        {/* Home indicator */}
        <div style={{
          position: "absolute", bottom: 8, left: "50%", transform: "translateX(-50%)",
          width: 134, height: 5, background: "rgba(243,235,220,0.7)", borderRadius: 999,
          zIndex: 15, pointerEvents: "none",
        }} />
      </div>
    </div>
  );
};