// PhoneMockup.jsx — reusable iPhone frame showing app UI

const PhoneFrame = ({ children, width = 300, scale = 1 }) => {
  const height = width * 2.05;
  return (
    <div style={{
      width, height,
      position: 'relative',
      transform: `scale(${scale})`,
      transformOrigin: 'center',
    }}>
      {/* outer frame — titanium finish */}
      <div style={{
        position: 'absolute', inset: 0,
        borderRadius: width * 0.155,
        background: 'linear-gradient(145deg, #3a3a3d 0%, #1a1a1c 40%, #0a0a0c 100%)',
        padding: width * 0.028,
        boxShadow: `
          0 50px 100px -20px rgba(0,0,0,0.35),
          0 30px 60px -20px rgba(0,0,0,0.2),
          0 0 0 1px rgba(0,0,0,0.4),
          inset 0 0 0 1px rgba(255,255,255,0.08),
          inset 0 2px 4px rgba(255,255,255,0.05)
        `,
      }}>
        {/* side button highlight */}
        <div style={{
          position: 'absolute', left: -2, top: '22%',
          width: 3, height: 50, background: '#2a2a2c', borderRadius: 2,
        }}/>
        <div style={{
          position: 'absolute', left: -2, top: '38%',
          width: 3, height: 70, background: '#2a2a2c', borderRadius: 2,
        }}/>
        <div style={{
          position: 'absolute', right: -2, top: '30%',
          width: 3, height: 90, background: '#2a2a2c', borderRadius: 2,
        }}/>

        <div style={{
          width: '100%', height: '100%',
          borderRadius: width * 0.13,
          background: '#000',
          padding: 2,
          overflow: 'hidden',
          position: 'relative',
        }}>
          {/* screen */}
          <div style={{
            width: '100%', height: '100%',
            borderRadius: width * 0.12,
            overflow: 'hidden',
            background: 'var(--bg)',
            position: 'relative',
          }}>
            {children}
          </div>
          {/* dynamic island */}
          <div style={{
            position: 'absolute',
            top: width * 0.04, left: '50%', transform: 'translateX(-50%)',
            width: width * 0.3, height: width * 0.085,
            background: '#000', borderRadius: 999,
            zIndex: 10,
            boxShadow: 'inset 0 0 0 1px rgba(255,255,255,0.05)',
          }}/>
        </div>
      </div>
    </div>
  );
};

// Status bar for inside phone
const StatusBar = ({ dark = false }) => (
  <div style={{
    height: 44,
    display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between',
    padding: '0 22px 6px',
    fontSize: 13, fontWeight: 600, color: dark ? '#fff' : '#000',
    fontFamily: 'var(--font-sans)',
  }}>
    <span>9:41</span>
    <div style={{ display: 'flex', gap: 5, alignItems: 'center' }}>
      {/* signal */}
      <svg width="16" height="10" viewBox="0 0 16 10" fill={dark ? '#fff' : '#000'}>
        <rect x="0" y="6" width="3" height="4" rx="0.5"/>
        <rect x="4.5" y="4" width="3" height="6" rx="0.5"/>
        <rect x="9" y="2" width="3" height="8" rx="0.5"/>
        <rect x="13.5" y="0" width="3" height="10" rx="0.5"/>
      </svg>
      {/* battery */}
      <svg width="24" height="12" viewBox="0 0 24 12" fill="none">
        <rect x="0.5" y="0.5" width="20" height="11" rx="3" stroke={dark ? '#fff' : '#000'} opacity="0.4"/>
        <rect x="2" y="2" width="17" height="8" rx="1.5" fill={dark ? '#fff' : '#000'}/>
        <rect x="21.5" y="4" width="1.5" height="4" rx="0.75" fill={dark ? '#fff' : '#000'} opacity="0.4"/>
      </svg>
    </div>
  </div>
);

Object.assign(window, { PhoneFrame, StatusBar });