<template>
  <nav class="home-nav" style="position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 28px;background:rgba(248,243,254,.86);border-bottom:1px solid #ece2fa;backdrop-filter:blur(10px);">
    <div class="home-nav__brand" style="display:flex;align-items:center;gap:10px;font-family:'Fredoka',sans-serif;font-weight:700;font-size:19px;letter-spacing:.3px;">
      <span style="display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:11px;background:linear-gradient(135deg,#8b6cdb,#e7b13e);color:#fff;font-size:18px;box-shadow:0 6px 18px rgba(124,86,196,.35);">✦</span>
      <span style="color:#3f3556;">VTuber <span style="color:#8b6cdb;">Star</span> Award</span>
    </div>
    <div class="home-nav__links" style="display:flex;align-items:center;gap:26px;font-size:15px;font-weight:500;color:#6f6685;" data-nav-links>
      <a href="#kategorien" style="color:inherit;text-decoration:none;">Kategorien</a>
      <a href="#ablauf" style="color:inherit;text-decoration:none;">Ablauf</a>
      <a href="#nominierte" style="color:inherit;text-decoration:none;">Nominierte</a>
      <a href="#voting" style="color:inherit;text-decoration:none;">Voting</a>
      <a href="#host" style="color:inherit;text-decoration:none;">Host</a>
      <a href="#faq" style="color:inherit;text-decoration:none;">FAQ</a>
    </div>
    <div class="home-nav__actions" style="display:flex;align-items:center;gap:10px;">
      <template v-if="isGuest">
        <button @click="onLogin" style="display:inline-flex;align-items:center;gap:8px;padding:10px 20px;border-radius:999px;background:linear-gradient(135deg,#8b6cdb,#7355c8);color:#fff;font-family:'Fredoka',sans-serif;font-weight:600;font-size:15px;box-shadow:0 8px 22px rgba(124,86,196,.32);border:none;cursor:pointer;" style-hover="transform:translateY(-2px);">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="#fff"><path d="M4 2L2.4 6v14.5h5V23h2.7l2.5-2.5h4L21.6 16V2H4zm15.3 13.1l-2.9 2.9h-4.4l-2.5 2.5v-2.5H6.7V3.7h12.6v11.4z"/><path d="M11.1 7.1h1.7v5h-1.7zM15.7 7.1h1.7v5h-1.7z"/></svg>
          Anmelden mit Twitch
        </button>
      </template>
      <template v-if="isUser">
        <button @click="onOpenAccount" style="display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:999px;background:rgba(139,108,219,0.1);border:1.5px solid rgba(139,108,219,0.25);color:#5f44ad;font-family:'Fredoka',sans-serif;font-weight:600;font-size:14px;cursor:pointer;" style-hover="background:rgba(139,108,219,0.18);">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
          @{{ twitchUser }}
        </button>
      </template>
      <template v-if="isAdmin">
        <button @click="onOpenAccount" style="display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:999px;background:rgba(231,177,62,0.1);border:1.5px solid rgba(231,177,62,0.4);color:#8a5a00;font-family:'Fredoka',sans-serif;font-weight:700;font-size:14px;cursor:pointer;" style-hover="background:rgba(231,177,62,0.18);">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
          @{{ twitchUser }}
          <span style="padding:1px 6px;border-radius:999px;background:rgba(231,177,62,0.25);color:#8a5a00;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:0.08em;">Admin</span>
        </button>
      </template>
      <button @click="openAdminPanel" style="display:inline-flex;align-items:center;gap:6px;padding:8px 15px;border-radius:999px;background:rgba(231,177,62,0.12);border:1.5px solid rgba(231,177,62,0.3);color:#8a5a00;text-decoration:none;font-family:'Fredoka',sans-serif;font-weight:700;font-size:13px;cursor:pointer;" style-hover="background:rgba(231,177,62,0.22);">
        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>
        Admin Panel
      </button>
    </div>
  </nav>
</template>

<script setup lang="ts">
defineProps<{
  isGuest: boolean
  isUser: boolean
  isAdmin: boolean
  twitchUser: string
  onLogin: () => void
  onOpenAccount: () => void
  openAdminPanel: (event?: Event) => void
}>()
</script>
