// laptop-frame.jsx — Decorative MacBook-style screen frame for design review.
//
// Wraps a single page render in laptop-display chrome. Inner viewport matches
// a 14" MacBook Pro effective web area (1440 × 900). The "screen" is scrollable;
// content adapts to that width via the chapter mockup's responsive CSS.
//
// Usage:
//   <LaptopFrame>
//     <UtilityBar /> <Header /> <main>{page}</main> <Footer />
//   </LaptopFrame>

function LaptopFrame({ children }) {
  return (
    <div className="laptop-frame">
      <div className="laptop-bezel">
        <div className="laptop-camera" aria-hidden="true" />
        <div className="laptop-screen no-scrollbar">
          {children}
        </div>
      </div>
      <div className="laptop-hinge" aria-hidden="true" />
      <div className="laptop-base" aria-hidden="true" />
    </div>
  );
}

window.LaptopFrame = LaptopFrame;