/**
 * iPhone-style device frame for CLIQ senior/family mockups.
 * Teal outer bezel echoes the pitch deck's device treatment.
 */
window.PhoneFrame = function PhoneFrame({ children, bezel = 'navy', statusTime = '2:43', dark = false }) {
  const bezelColor = bezel === 'teal' ? 'var(--cliq-teal)' : 'var(--navy-900)';
  return (
    <div style={{
      width: 360, padding: 12, background: bezelColor,
      borderRadius: 44, boxShadow: 'var(--shadow-xl)', flexShrink: 0,
    }}>
      <div style={{
        background: dark ? 'var(--navy-900)' : '#fff',
        borderRadius: 33, overflow: 'hidden', position: 'relative',
        height: 740, display: 'flex', flexDirection: 'column',
        fontFamily: 'var(--font-sans)',
      }}>
        {/* status bar */}
        <div style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          padding: '14px 24px 6px', fontSize: 14, flexShrink: 0,
          color: dark ? '#fff' : 'var(--navy-800)', fontWeight: 600,
        }}>
          <span>{statusTime}</span>
          <span style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
            <i className="ti ti-signal-4g" aria-hidden="true" />
            <i className="ti ti-wifi" aria-hidden="true" />
            <i className="ti ti-battery-3" aria-hidden="true" />
          </span>
        </div>
        <div style={{ flex: 1, position: 'relative', overflow: 'hidden' }}>{children}</div>
      </div>
    </div>
  );
}