// iphone.jsx — clean iPhone frame for app screenshots / animated mocks
// Lightweight, no external dependencies. Designed to feel like a press kit photo.

const iphoneStyles = {
  frame: {
    position: 'relative',
    width: 300,
    height: 612,
    borderRadius: 48,
    background: 'linear-gradient(160deg, #2a2f2c 0%, #14201b 50%, #1a2620 100%)',
    padding: 10,
    boxShadow:
      '0 0 0 1px rgba(255,255,255,0.06) inset, 0 60px 80px -40px rgba(27,40,35,0.45), 0 12px 24px -12px rgba(27,40,35,0.3)',
  },
  screen: {
    position: 'relative',
    width: '100%',
    height: '100%',
    borderRadius: 38,
    overflow: 'hidden',
    background: '#F4F8F4',
  },
  dynamicIsland: {
    position: 'absolute',
    top: 8,
    left: '50%',
    transform: 'translateX(-50%)',
    width: 96,
    height: 28,
    background: '#0c0f0d',
    borderRadius: 16,
    zIndex: 10,
  },
  statusBar: {
    position: 'absolute',
    top: 0, left: 0, right: 0, height: 44,
    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
    padding: '14px 24px 0',
    fontFamily: 'system-ui',
    fontSize: 13,
    fontWeight: 600,
    color: '#1B2823',
    zIndex: 5,
  },
  statusIcons: {
    display: 'flex',
    alignItems: 'center',
    gap: 5,
  },
};

function IPhone({ children, width = 300, label }) {
  const scale = width / 300;
  return (
    <div style={{
      position: 'relative',
      width: width,
      height: 612 * scale,
    }}>
      <div style={{
        ...iphoneStyles.frame,
        transform: `scale(${scale})`,
        transformOrigin: 'top left',
      }}>
        <div style={iphoneStyles.screen}>
          <div style={iphoneStyles.dynamicIsland} />
          <div style={iphoneStyles.statusBar}>
            <span>9:41</span>
            <span style={{ width: 96 }} />
            <span style={iphoneStyles.statusIcons}>
              <SignalIcon /> <WifiIcon /> <BatteryIcon />
            </span>
          </div>
          {children}
        </div>
      </div>
      {label && (
        <div style={{
          position: 'absolute',
          bottom: -28, left: '50%', transform: 'translateX(-50%)',
          fontFamily: 'var(--font-mono)',
          fontSize: 10, letterSpacing: '0.16em', textTransform: 'uppercase',
          color: 'var(--moss-deep)',
          whiteSpace: 'nowrap',
        }}>
          {label}
        </div>
      )}
    </div>
  );
}

function SignalIcon() {
  return (
    <svg width="17" height="11" viewBox="0 0 17 11">
      <rect x="0"  y="7" width="3" height="4" rx="0.6" fill="#1B2823" />
      <rect x="4"  y="5" width="3" height="6" rx="0.6" fill="#1B2823" />
      <rect x="8"  y="2" width="3" height="9" rx="0.6" fill="#1B2823" />
      <rect x="12" y="0" width="3" height="11" rx="0.6" fill="#1B2823" />
    </svg>
  );
}
function WifiIcon() {
  return (
    <svg width="16" height="11" viewBox="0 0 16 11" fill="none">
      <path d="M8 10.5a1.2 1.2 0 100-2.4 1.2 1.2 0 000 2.4z" fill="#1B2823" />
      <path d="M2.6 5.6C4 4.2 5.9 3.3 8 3.3s4 0.9 5.4 2.3" stroke="#1B2823" strokeWidth="1.4" strokeLinecap="round" />
      <path d="M0 3C2.1 0.9 4.9 -0.3 8 -0.3s5.9 1.2 8 3.3" stroke="#1B2823" strokeWidth="1.4" strokeLinecap="round" />
    </svg>
  );
}
function BatteryIcon() {
  return (
    <svg width="26" height="12" viewBox="0 0 26 12" fill="none">
      <rect x="0.5" y="0.5" width="22" height="11" rx="3" stroke="#1B2823" strokeOpacity="0.4" />
      <rect x="2" y="2" width="16" height="8" rx="1.6" fill="#1B2823" />
      <rect x="23" y="4" width="2" height="4" rx="1" fill="#1B2823" fillOpacity="0.4" />
    </svg>
  );
}

Object.assign(window, { IPhone });