// Settings variant — nav rail + router over per-screen components.

function VariantSettings() {
  const [active, setActive] = React.useState('you');
  const go = (id) => setActive(id);

  const Screens = {
    you:        () => <ScreenYouAndAjna go={go}/>,
    sync:       () => <ScreenSync go={go}/>,
    saved:      () => <ScreenSaved/>,
    privacy:    () => <ScreenPrivacy/>,
    perf:       () => <ScreenPerformance/>,
    appearance: () => <ScreenAppearance/>,
    search:     () => <ScreenSearch/>,
    default:    () => <ScreenDefault/>,
    startup:    () => <ScreenStartup/>,
    lang:       () => <ScreenLanguages/>,
    downloads:  () => <ScreenDownloads/>,
    access:     () => <ScreenAccessibility/>,
    system:     () => <ScreenSystem/>,
    reset:      () => <ScreenReset/>,
    about:      () => <ScreenAbout/>,
    ext:        () => <ScreenAbout/>, // falls back if opened
  };
  const Screen = Screens[active] || Screens.you;

  return (
    <div style={{
      display: 'flex', height: '100%', background: 'var(--sidebar-bg)',
      color: 'var(--fg)', fontFamily: 'Inter, sans-serif',
    }}>
      {/* Left nav */}
      <nav style={{
        width: 240, flexShrink: 0,
        borderRight: '1px solid var(--border-soft)',
        padding: '20px 12px 20px',
        overflowY: 'auto',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '0 10px 16px' }}>
          <AjnaMark size={20}/>
          <span style={{ fontSize: 15, fontFamily: 'Geist, Inter, sans-serif', fontWeight: 600, letterSpacing: '-0.01em' }}>Settings</span>
        </div>
        {/* Search */}
        <div style={{
          display: 'flex', alignItems: 'center', gap: 8,
          padding: '8px 10px', marginBottom: 14,
          background: 'var(--bg-elev)', borderRadius: 8,
          border: '1px solid var(--border-soft)',
        }}>
          <span style={{ color: 'var(--fg-dim)' }}>{NAV_ICONS.search}</span>
          <input placeholder="Search settings" style={{
            flex: 1, background: 'transparent', border: 0, outline: 0,
            color: 'var(--fg)', fontSize: 12.5, fontFamily: 'inherit',
          }}/>
          <span style={{
            fontFamily: 'JetBrains Mono, monospace', fontSize: 10,
            color: 'var(--fg-dim)', padding: '1px 5px',
            background: 'var(--bg-elev-2)', borderRadius: 3,
          }}>/</span>
        </div>
        {SETTINGS_NAV.map((g, gi) => (
          <div key={gi} style={{ marginBottom: 14 }}>
            <div style={{
              fontSize: 10, fontWeight: 600, letterSpacing: '0.1em',
              color: 'var(--fg-dim)', textTransform: 'uppercase',
              padding: '0 10px 6px',
            }}>{g.section}</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
              {g.items.map(it => (
                <SettingsNavItem
                  key={it.id}
                  item={it}
                  active={active === it.id || (it.id === 'you' && active === 'sync')}
                  onClick={() => setActive(it.id)}/>
              ))}
            </div>
          </div>
        ))}
      </nav>

      {/* Content */}
      <div style={{ flex: 1, minWidth: 0, overflowY: 'auto', padding: 'clamp(20px, 3vw, 28px) clamp(20px, 4vw, 48px) 60px' }}>
        <div style={{ maxWidth: 740, margin: '0 auto' }} key={active}>
          <Screen/>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { VariantSettings });