---
// Theme switcher for AeThex (mockup, extendable)
let theme = 'default';
function setTheme(t: string) {
  theme = t;
  document.body.setAttribute('data-theme', t);
}
const themes = [
  { name: 'Default', value: 'default' },
  { name: 'Retro', value: 'retro' },
  { name: 'Neon', value: 'neon' },
  { name: 'Hacker', value: 'hacker' }
];
---
<div class="theme-switcher">
  <span>Theme:</span>
  {themes.map(t => (
    <button class="theme-btn" client:click={() => setTheme(t.value)}>{t.name}</button>
  ))}
</div>
<style>
.theme-switcher {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.7em;
  margin: 2em 0 1em 0;
  font-size: 1em;
}
.theme-btn {
  background: #222;
  color: #ffd580;
  border: 1.5px solid #ffd580;
  border-radius: 8px;
  padding: 0.5em 1.2em;
  font-size: 1em;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.theme-btn:hover {
  background: #ffd580;
  color: #222;
}
</style>
<script>
// Simple theme switcher logic
const themeStyles = {
  retro: 'body[data-theme=retro] { background: #f4ecd8; color: #222; }',
  neon: 'body[data-theme=neon] { background: #0f0020; color: #39ff14; }',
  hacker: 'body[data-theme=hacker] { background: #101c10; color: #00ff00; }',
  default: 'body[data-theme=default] { background: #0a0a0a; color: #fff; }'
};
const styleTag = document.createElement('style');
document.head.appendChild(styleTag);
function setThemeScript(t) {
  document.body.setAttribute('data-theme', t);
  styleTag.innerHTML = themeStyles[t] || '';
}
window.setTheme = setThemeScript;
</script>