---
// Easter eggs and badge system for AeThex (mockup)
let found = false;
function revealEgg() {
  found = true;
  alert('🥚 You found an AeThex Easter Egg! Badge unlocked!');
}
---
<div class="easter-eggs">
  <button class="egg-btn" client:click={revealEgg}>🔍 Find the Secret Egg</button>
  {found && <div class="egg-badge">🥚 AeThex Egg Hunter Badge!</div>}
</div>
<style>
.easter-eggs {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 2em 0 1em 0;
}
.egg-btn {
  background: #ffd580;
  color: #222;
  border: none;
  border-radius: 16px;
  padding: 1em 2em;
  font-size: 1.1em;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 16px #0006;
  transition: background 0.2s, color 0.2s;
}
.egg-btn:hover {
  background: #ff1a1a;
  color: #fff;
}
.egg-badge {
  margin-top: 1.2em;
  font-size: 1.2em;
  color: #ff1a1a;
  font-weight: 700;
  background: #fff3;
  border-radius: 12px;
  padding: 0.5em 1.2em;
}
</style>