/* global React */
/* Realistic device frame using the user-provided mockup (assets/phone2.png).
   Measured screen rect: left 6.81% · top 2.88% · width 86.56% · height 94.15%.
   Dynamic Island: ~21.5% wide · ~3.15% tall, centered, ~4.3% from top. */
const PHONE_ASPECT = 558 / 1112; // ≈ 0.5018 (w/h)

function PhoneFrame({ width = 288, children, className = "" }) {
  const height = Math.round(width / PHONE_ASPECT);
  return (
    <div className={"dphone " + className} style={{ width, height }}>
      <div className="dphone__screen" style={{ borderRadius: Math.round(width * 0.092) }}>
        {children}
      </div>
      <span className="dphone__island"><span className="dphone__cam" /></span>
      <img className="dphone__img" src="assets/phone2.png" alt="Teléfono mostrando la conversación de WhatsApp Business" />
    </div>
  );
}

window.PhoneFrame = PhoneFrame;
window.PHONE_ASPECT = PHONE_ASPECT;