// phone-screens.jsx — Custom CSS iPhone bezel with image-slot interior
// No mock UI. User drops real screenshots in.
/* ── PhoneBezel — pure CSS iPhone shell ─────────────────────────────────── */
function PhoneBezel({ id }) {
const W = 390, H = 844;
// inner = W/H - 20px padding each axis
// status bar 59px, home indicator 34px, content = 824-59-34 = 731px
return (
{/* Status bar */}
{/* Dynamic island */}
{/* Time */}
9:41
{/* Icons */}
{/* Screen content — 731px tall image slot */}
{/* Home indicator */}
);
}
/* ── PhoneFrame — scales bezel and collapses layout space ────────────────── */
function PhoneFrame({ id, scale = 0.65, style = {} }) {
const W = 390, H = 844;
const cW = Math.round(W * scale);
const cH = Math.round(H * scale);
return (