// PhonePreview — wraps children in a minimal iPhone bezel so the user can preview
// the mobile layout inline on a desktop screen. No chrome, no status bar sim — the
// inner app still behaves like a real mobile viewport (390px wide, scrollable).

function PhonePreview({ children, t, onExit }) {
  // device dimensions — iPhone 14 Pro-ish proportions
  const W = 390, H = 844;

  // Scale down if viewport can't accommodate
  const [scale, setScale] = React.useState(1);
  React.useEffect(() => {
    const compute = () => {
      const availH = window.innerHeight - 120;
      const availW = window.innerWidth - 80;
      const s = Math.min(1, availH / H, availW / W);
      setScale(s);
    };
    compute();
    window.addEventListener('resize', compute);
    return () => window.removeEventListener('resize', compute);
  }, []);

  return (
    <div className="no-print phone-preview-mode" style={{
      position: 'fixed', inset: 0, zIndex: 500,
      background: `radial-gradient(circle at 50% 30%, #1a1d22 0%, #0a0c10 100%)`,
      display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
      padding: 40, overflow: 'hidden',
    }}>
      {/* Exit bar */}
      <div style={{
        position: 'absolute', top: 20, right: 20, display: 'flex',
        gap: 12, alignItems: 'center',
      }}>
        <div style={{
          fontFamily: 'Oswald, sans-serif', fontWeight: 700, fontSize: 11,
          letterSpacing: '0.3em', color: t.brass,
        }}>◉ MOBILE PREVIEW · 390 × 844</div>
        <button onClick={onExit} style={{
          padding: '8px 16px', background: t.brass, color: '#0F1114',
          border: 'none', cursor: 'pointer',
          fontFamily: 'Oswald, sans-serif', fontWeight: 700, fontSize: 11,
          letterSpacing: '0.25em',
        }}>EXIT ✕</button>
      </div>

      {/* Device */}
      <div style={{
        width: W, height: H,
        transform: `scale(${scale})`, transformOrigin: 'center center',
        borderRadius: 54, padding: 10,
        background: 'linear-gradient(135deg, #2a2d33 0%, #15171b 50%, #2a2d33 100%)',
        boxShadow: '0 40px 100px rgba(0,0,0,0.6), 0 0 0 1.5px rgba(255,255,255,0.05), inset 0 0 2px rgba(255,255,255,0.08)',
        position: 'relative',
      }}>
        {/* Screen */}
        <div style={{
          width: '100%', height: '100%',
          borderRadius: 44, overflow: 'hidden',
          background: t.bg, position: 'relative',
        }}>
          {/* Dynamic island */}
          <div style={{
            position: 'absolute', top: 11, left: '50%', transform: 'translateX(-50%)',
            width: 120, height: 34, borderRadius: 20, background: '#000', zIndex: 100,
          }} />
          {/* Scrollable content */}
          <div style={{
            width: '100%', height: '100%', overflow: 'auto',
            WebkitOverflowScrolling: 'touch',
          }}>
            {children}
          </div>
        </div>
      </div>

      <div style={{
        position: 'absolute', bottom: 20, left: 0, right: 0, textAlign: 'center',
        fontFamily: 'Barlow, sans-serif', fontWeight: 300, fontSize: 11,
        color: 'rgba(255,255,255,0.35)', letterSpacing: '0.2em',
      }}>SCROLL INSIDE THE DEVICE · EXIT TO RETURN TO DESKTOP VIEW</div>
    </div>
  );
}

window.PhonePreview = PhonePreview;