// frame.jsx — Lightweight light-theme browser chrome that fills its parent.
// The inner content area exposes a configurable max viewport (Mobile / Tablet /
// Desktop) so a single responsive app can be previewed at multiple sizes.

function LightBrowserFrame({ url = 'trygo.app', viewport = 'desktop', children }) {
  const widthForViewport = {
    mobile: 390,
    tablet: 768,
    desktop: 1280,
  }[viewport] || '100%';

  return (
    <div style={{
      position: 'fixed', inset: 0,
      background: '#e8e6df',
      display: 'flex', flexDirection: 'column',
      fontFamily: 'Manrope, ui-sans-serif, system-ui, sans-serif',
    }}>
      {/* Top chrome */}
      <div style={{
        flexShrink: 0,
        background: '#f1efe9',
        borderBottom: '1px solid #d9d6cd',
        padding: '10px 14px',
        display: 'flex', alignItems: 'center', gap: 14,
      }}>
        <div style={{ display: 'flex', gap: 6 }}>
          <Dot c="#ff5f57" />
          <Dot c="#febc2e" />
          <Dot c="#28c840" />
        </div>
        <div style={{ display: 'flex', gap: 4, color: '#9b988f' }}>
          <NavArrow dir="left" />
          <NavArrow dir="right" />
          <RefreshIcon />
        </div>
        <div style={{
          flex: 1,
          height: 30,
          background: '#fff',
          border: '1px solid #d9d6cd',
          borderRadius: 8,
          display: 'flex', alignItems: 'center', gap: 8,
          padding: '0 12px',
          maxWidth: 520,
          margin: '0 auto',
        }}>
          <LockIcon />
          <span style={{
            fontSize: 13, color: '#5a5852', letterSpacing: '-0.005em',
          }}>{url}</span>
        </div>
        <div style={{ width: 70 }} />
      </div>

      {/* Content area with optional viewport constraint */}
      <div style={{
        flex: 1, minHeight: 0, overflow: 'hidden',
        display: 'flex', justifyContent: 'center',
        background: '#e8e6df',
        padding: viewport === 'desktop' ? 0 : '20px',
      }}>
        <div style={{
          width: widthForViewport,
          maxWidth: '100%',
          height: '100%',
          background: '#fff',
          overflow: 'auto',
          boxShadow: viewport === 'desktop'
            ? 'none'
            : '0 20px 60px rgba(0,0,0,0.12)',
          borderRadius: viewport === 'desktop' ? 0 : 16,
        }}>
          {children}
        </div>
      </div>
    </div>
  );
}

function Dot({ c }) {
  return <div style={{ width: 11, height: 11, borderRadius: '50%', background: c }} />;
}

function NavArrow({ dir }) {
  return (
    <div style={{
      width: 26, height: 26, borderRadius: 6,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
    }}>
      <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
        <path d={dir === 'left' ? 'M9 3L4 7l5 4' : 'M5 3l5 4-5 4'}
              stroke="currentColor" strokeWidth="1.6"
              strokeLinecap="round" strokeLinejoin="round" />
      </svg>
    </div>
  );
}

function RefreshIcon() {
  return (
    <div style={{
      width: 26, height: 26, borderRadius: 6,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
    }}>
      <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
        <path d="M2 7a5 5 0 0 1 9-3M12 7a5 5 0 0 1-9 3M11 2v2.5H8.5M3 12v-2.5h2.5"
              stroke="currentColor" strokeWidth="1.4"
              strokeLinecap="round" strokeLinejoin="round" />
      </svg>
    </div>
  );
}

function LockIcon() {
  return (
    <svg width="11" height="11" viewBox="0 0 11 11" fill="none">
      <rect x="2" y="5" width="7" height="5" rx="1"
            stroke="#8a877f" strokeWidth="1" />
      <path d="M3.5 5V3.5a2 2 0 1 1 4 0V5" stroke="#8a877f" strokeWidth="1" />
    </svg>
  );
}

Object.assign(window, { LightBrowserFrame });