// PhoneFrame — a thin device bezel that wraps a single full-bleed image
// (used for the screens gallery on the landing page).

function PhoneFrame({ width = 220, src, alt = '', tilt = 0 }) {
  const h = width * (812 / 400);
  const s = width / 400;
  return (
    <div style={{
      width, height: h, position: 'relative',
      borderRadius: 44 * s, overflow: 'hidden',
      background: BRAND.gray900,
      transform: tilt ? `rotate(${tilt}deg)` : 'none',
      boxShadow: `0 ${30 * s}px ${60 * s}px -${20 * s}px rgba(0,0,0,0.28), 0 0 0 ${2 * s}px rgba(0,0,0,0.85), inset 0 0 0 ${5 * s}px #1a1a1a`,
      flexShrink: 0,
    }}>
      <div style={{
        position: 'absolute', inset: 7 * s,
        borderRadius: 36 * s, overflow: 'hidden',
        background: BRAND.white,
      }}>
        <img src={src} alt={alt} style={{
          display: 'block', width: '100%', height: '100%',
          objectFit: 'cover', objectPosition: 'top center',
        }}/>
        {/* Notch overlay */}
        <div style={{
          position: 'absolute', left: '50%', top: 8 * s, transform: 'translateX(-50%)',
          width: 110 * s, height: 28 * s, background: BRAND.black, borderRadius: 14 * s,
        }}/>
      </div>
    </div>
  );
}

window.PhoneFrame = PhoneFrame;