// hush-phone.jsx — PhoneShot: a real app screenshot inside a premium phone bezel.
// Screenshots already include their own status bar / punch-hole, so the bezel
// adds only the frame. Depends on nothing.

function PhoneShot({ src, alt = 'Hush app screen', width = 300, tilt = 0, float = false, style = {} }) {
  const radius = Math.round(width * 0.135);
  const border = Math.max(9, Math.round(width * 0.033));
  return (
    <div style={{
      width,
      transform: tilt ? `rotate(${tilt}deg)` : undefined,
      animation: float ? 'floaty 7s ease-in-out infinite' : undefined,
      ...style,
    }}>
      <div style={{
        background: '#161310',
        borderRadius: radius,
        border: `${border}px solid #161310`,
        overflow: 'hidden',
        boxShadow:
          '0 60px 120px -34px rgba(40,28,12,0.55),' +
          '0 24px 50px -22px rgba(40,28,12,0.34),' +
          '0 0 0 1px rgba(0,0,0,0.5),' +
          'inset 0 0 0 1.5px rgba(255,255,255,0.06)',
        lineHeight: 0,
      }}>
        <img src={src} alt={alt} style={{
          display: 'block', width: '100%', height: 'auto',
          borderRadius: Math.max(0, radius - border),
        }} />
      </div>
    </div>
  );
}

Object.assign(window, { PhoneShot });