// Security — sub-menu under Settings

function SettingsSecurityScreen({ theme, accent, onBack, onNav }) {
  const [biometric, setBiometric] = React.useState(true);
  const [hideBalances, setHideBalances] = React.useState(false);

  return (
    <Screen theme={theme} padTop={0} padBottom={40}>
      <NavBar theme={theme} title="Security" onBack={onBack}/>

      <SettingsGroup theme={theme}>
        <SettingsToggle theme={theme} accent={accent} icon="lock"    label="Enable Face Pass for login" value={biometric}    onChange={setBiometric}/>
        <SettingsRow    theme={theme}                 icon="refresh" label="Change passcode"            onClick={() => onNav('settings_change_passcode')}/>
        <SettingsToggle theme={theme} accent={accent} icon="eye"     label="Hide balances on login"     value={hideBalances} onChange={setHideBalances}/>
      </SettingsGroup>
    </Screen>
  );
}

Object.assign(window, { SettingsSecurityScreen });