import { clearStartHint } from '../state.js';

export const pageMeta = { id: 'start-view', title: 'Старт', showAppChrome: false };

export function render({ navigate }) {
  clearStartHint();

  const screen = document.createElement('section');
  screen.className = 'auth-screen auth-screen--welcome';

  const logoWrap = document.createElement('div');
  logoWrap.className = 'auth-logo-wrap';

  const logo = document.createElement('img');
  logo.className = 'auth-logo';
  logo.src = './img/shine-logo-transparent-final.png';
  logo.alt = 'Логотип Сияние';
  logoWrap.append(logo);

  const title = document.createElement('h1');
  title.className = 'auth-brand';
  title.textContent = 'Сияние';

  const actions = document.createElement('div');
  actions.className = 'auth-actions shine-actions';

  const loginButton = document.createElement('button');
  loginButton.className = 'shine-btn shine-btn--primary';
  loginButton.type = 'button';
  loginButton.textContent = 'Войти';
  loginButton.addEventListener('click', () => navigate('login-view'));

  const registerButton = document.createElement('button');
  registerButton.className = 'shine-btn shine-btn--register';
  registerButton.type = 'button';
  registerButton.textContent = 'Зарегистрироваться';
  registerButton.addEventListener('click', () => navigate('register-view'));

  const guestViewButton = document.createElement('button');
  guestViewButton.className = 'shine-btn shine-btn--view';
  guestViewButton.type = 'button';
  guestViewButton.textContent = 'Только просмотр';
  guestViewButton.addEventListener('click', () => navigate('network-view'));

  const settingsButton = document.createElement('button');
  settingsButton.className = 'shine-btn shine-btn--settings';
  settingsButton.type = 'button';
  settingsButton.textContent = 'Настройки';
  settingsButton.addEventListener('click', () => navigate('entry-settings-view'));

  actions.append(loginButton, registerButton, guestViewButton, settingsButton);
  screen.append(logoWrap, title, actions);
  return screen;
}