// Chrome: browser overflow menu + shared icon button.

// Browser overflow menu — the ⋯ dropdown. Mirrors the mobile/iPad menu so the
// whole "page tools + library" layer is reachable on desktop too.
function UrlBarMenu({ onClose, onAction }) {
  const sw = (d) => <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">{d}</svg>;
  const sections = [
    [
      ['find', sw(<><circle cx="11" cy="11" r="7"/><path d="m20 20-4-4"/></>), 'Find in page…', '⌘F'],
      ['reader', sw(<path d="M4 6h16M4 10h12M4 14h16M4 18h10"/>), 'Reader view', '⇧⌘R'],
      ['zoom', sw(<><circle cx="11" cy="11" r="7"/><path d="m20 20-4-4M8 11h6M11 8v6"/></>), 'Zoom', '100%'],
      ['page-info', sw(<><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></>), 'Page info', ''],
    ],
    [
      ['history', sw(<><path d="M3 12a9 9 0 1 0 3-6.7L3 9"/><path d="M3 3v6h6"/><path d="M12 7v5l3 2"/></>), 'History', '⌘Y'],
      ['bookmarks', sw(<path d="M19 21V5a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v16l7-4z"/>), 'Bookmarks', '⌘B'],
      ['downloads', sw(<><path d="M12 3v12M6 11l6 6 6-6M5 21h14"/></>), 'Downloads', '⌥⌘L'],
      ['recently-closed', sw(<><path d="M3 7h13a5 5 0 0 1 0 10h-2"/><path d="m7 11-4-4 4-4"/></>), 'Recently closed', '⇧⌘T'],
      ['reading-list', sw(<><path d="M3 3h12a3 3 0 0 1 3 3v15"/><path d="M3 21V3"/></>), 'Reading list', ''],
      ['passwords', sw(<><rect x="3" y="11" width="18" height="10" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></>), 'Passwords', ''],
      ['permissions', sw(<path d="M12 2 4 5v7c0 5 3.5 8.5 8 10 4.5-1.5 8-5 8-10V5z"/>), 'Site permissions', ''],
    ],
    [
      ['calls', sw(<path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.8 19.8 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z"/>), 'Calls', ''],
      ['voice', sw(<><rect x="9" y="3" width="6" height="12" rx="3"/><path d="M5 11a7 7 0 0 0 14 0M12 18v3"/></>), 'Voice search', ''],
    ],
    [
      ['clear', sw(<path d="M3 6h18M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>), 'Clear browsing data…', ''],
      ['privacy-review', sw(<><path d="M12 2 4 5v7c0 5 3.5 8.5 8 10 4.5-1.5 8-5 8-10V5z"/><path d="m9 12 2 2 4-4"/></>), 'Privacy review…', ''],
      ['permission-prompt', sw(<><path d="M3 7h4l2-3h6l2 3h4v12H3z"/><circle cx="12" cy="13" r="4"/></>), 'Demo permission prompt', ''],
      ['sad-tab', sw(<><circle cx="12" cy="12" r="9"/><path d="M8 15s1.5-2 4-2 4 2 4 2M9 9h.01M15 9h.01"/></>), 'Demo error page', ''],
    ],
    [
      ['help', sw(<><circle cx="12" cy="12" r="9"/><path d="M9.1 9a3 3 0 1 1 5.8 1c0 2-3 3-3 3"/><path d="M12 17h.01"/></>), 'Help & feedback', ''],
      ['credits', sw(<path d="M12 2 4 5v7c0 5 3.5 8.5 8 10 4.5-1.5 8-5 8-10V5z"/>), 'About & credits', ''],
      ['settings', sw(<><circle cx="12" cy="12" r="3"/><path d="M12 2v3m0 14v3M2 12h3m14 0h3"/></>), 'Settings', '⌘,'],
    ],
  ];
  return (
    <>
      <div onClick={onClose} style={{ position: 'fixed', inset: 0, zIndex: 80 }}/>
      <div className="glass" style={{
        position: 'absolute', top: 36, right: 0, zIndex: 81, width: 270,
        borderRadius: 12,
        padding: 6, maxHeight: '72vh', overflowY: 'auto',
        animation: 'umIn 160ms ease-out',
      }}>
        <style>{`@keyframes umIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}`}</style>
        {sections.map((sec, si) => (
          <React.Fragment key={si}>
            {si > 0 && <div style={{ height: 1, background: 'var(--border-soft)', margin: '6px 8px' }}/>}
            {sec.map(([id, icon, label, hint]) => (
              <button key={id} onClick={() => onAction(id)} style={{
                width: '100%', display: 'flex', alignItems: 'center', gap: 11,
                padding: '8px 10px', borderRadius: 8, background: 'transparent', border: 0,
                color: 'var(--fg)', fontFamily: 'inherit', fontSize: 13, textAlign: 'left', cursor: 'pointer',
              }}
                onMouseEnter={e => e.currentTarget.style.background = 'var(--hover)'}
                onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
                <span style={{ width: 18, color: 'var(--fg-muted)', display: 'grid', placeItems: 'center', flexShrink: 0 }}>{icon}</span>
                <span style={{ flex: 1, fontFamily: 'Geist, Inter, sans-serif', letterSpacing: '-0.01em' }}>{label}</span>
                {hint && <span style={{ fontSize: 10.5, color: 'var(--fg-dim)', fontFamily: 'JetBrains Mono, monospace' }}>{hint}</span>}
              </button>
            ))}
          </React.Fragment>
        ))}
      </div>
    </>
  );
}

function IconBtn({ children, onClick, dim }) {
  return (
    <button
      onClick={onClick}
      style={{
        width: 30, height: 30, borderRadius: 6,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        background: 'transparent', border: 0, cursor: 'pointer',
        color: dim ? 'var(--fg-dim)' : 'var(--fg-muted)',
      }}
      onMouseEnter={e => e.currentTarget.style.background = 'var(--hover)'}
      onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
    >{children}</button>
  );
}

Object.assign(window, { UrlBarMenu, IconBtn });