/* global React */
// Minimal phone frame for marketing — clean bezel, dynamic island, no chrome.
// Ratio matches iPhone 15/16 (393 × 852).

function PhoneFrame({ children, width = 320, scale, tilt = 0, style = {} }) {
  const ratio = 852 / 393;
  const w = width;
  const h = Math.round(width * ratio);
  return (
    <div style={{
      width: w, height: h,
      borderRadius: w * 0.12,
      background: '#0c0c0c',
      padding: 8,
      boxSizing: 'border-box',
      position: 'relative',
      transform: `${tilt ? `rotate(${tilt}deg)` : ''} ${scale ? `scale(${scale})` : ''}`.trim(),
      transformOrigin: 'center',
      ...style,
    }}>
      <div style={{
        width: '100%', height: '100%',
        borderRadius: w * 0.1,
        overflow: 'hidden',
        background: '#F7F6F2',
        position: 'relative',
      }}>
        {/* status bar spacer */}
        <div style={{
          height: w * 0.13,
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          padding: `0 ${w * 0.07}px 0 ${w * 0.075}px`,
          fontFamily: '-apple-system, system-ui, sans-serif',
          fontWeight: 600,
          fontSize: w * 0.045,
          color: '#000',
          flexShrink: 0,
        }}>
          <span>9:41</span>
          <span style={{ display: 'flex', gap: 4, alignItems: 'center' }}>
            {/* signal */}
            <svg width={w * 0.05} height={w * 0.04} viewBox="0 0 19 12" fill="#000">
              <rect x="0" y="7.5" width="3.2" height="4.5" rx="0.7"/>
              <rect x="4.8" y="5" width="3.2" height="7" rx="0.7"/>
              <rect x="9.6" y="2.5" width="3.2" height="9.5" rx="0.7"/>
              <rect x="14.4" y="0" width="3.2" height="12" rx="0.7"/>
            </svg>
            {/* battery */}
            <svg width={w * 0.07} height={w * 0.035} viewBox="0 0 27 13">
              <rect x="0.5" y="0.5" width="23" height="12" rx="3.5" stroke="#000" strokeOpacity="0.4" fill="none"/>
              <rect x="2" y="2" width="20" height="9" rx="2" fill="#000"/>
              <path d="M25 4.5V8.5C25.8 8.2 26.5 7.2 26.5 6.5C26.5 5.8 25.8 4.8 25 4.5Z" fill="#000" fillOpacity="0.4"/>
            </svg>
          </span>
        </div>
        {/* dynamic island */}
        <div style={{
          position: 'absolute', top: w * 0.035, left: '50%', transform: 'translateX(-50%)',
          width: w * 0.32, height: w * 0.094, borderRadius: 9999, background: '#000', zIndex: 50,
        }} />
        {/* app body */}
        <div style={{ height: `calc(100% - ${w * 0.13}px)`, overflow: 'hidden' }}>
          {children}
        </div>
        {/* home indicator */}
        <div style={{
          position: 'absolute', bottom: w * 0.022, left: '50%', transform: 'translateX(-50%)',
          width: w * 0.36, height: w * 0.013, borderRadius: 9999,
          background: 'rgba(0,0,0,0.28)', zIndex: 60, pointerEvents: 'none',
        }} />
      </div>
    </div>
  );
}

Object.assign(window, { PhoneFrame });