<script setup lang="ts">
import RoleSwitcher from './RoleSwitcher.vue'
import AreaTabs from './AreaTabs.vue'
import CartButton from './CartButton.vue'
import UserMenu from '../UserMenu.vue'

const { loggedIn } = useAuth()
</script>

<template>
  <header class="sticky top-0 z-50 w-full">
    <!-- Main header bar -->
    <div class="container flex items-end justify-between px-4 md:px-6 lg:px-8 py-6 md:py-7">
      <!-- Left: Logo + Role Switcher -->
      <div class="flex items-end gap-6 md:gap-8">
        <NuxtLink to="/" class="flex-shrink-0 transition-transform hover:scale-105">
          <img src="/img/experimenta-logo-white.svg" alt="experimenta Logo" class="h-16 w-auto md:h-16 my-1" />
        </NuxtLink>

        <!-- Role Switcher (Desktop only, only when logged in) -->
        <div v-if="loggedIn" class="hidden lg:block">
          <RoleSwitcher />
        </div>
      </div>

      <!-- Right: Cart + User Menu -->
      <div class="flex items-end  md:gap-6">
        <!-- Cart Button (only visible when logged in) -->
        <CartButton v-if="loggedIn" />

        <!-- User Menu -->
        <UserMenu />
      </div>
    </div>

    <!-- Secondary navigation bar (Product areas) - No borders, gradient separation -->
    <div class="area-tabs-section">
      <div class="container px-4 md:px-6 lg:px-8 py-3">
        <AreaTabs />
      </div>
    </div>

    <!-- Mobile: Role switcher in collapsible section (only when logged in) -->
    <div v-if="loggedIn" class="lg:hidden mobile-role-section">
      <div class="container px-4 py-2.5">
        <RoleSwitcher />
      </div>
    </div>
  </header>
</template>

<style scoped>
/* Custom experimenta styling */
header {
  background: linear-gradient(135deg,
      rgba(46, 16, 101, 0.98) 0%,
      rgba(46, 16, 101, 0.95) 100%);
  color: white;
}

/* Area tabs section with subtle gradient separator (no borders) */
.area-tabs-section {
  background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.08) 0%,
      rgba(255, 255, 255, 0.03) 100%);
}

/* Mobile role section */
.mobile-role-section {
  background: rgba(255, 255, 255, 0.05);
}

/* Logo styling */
img[alt='experimenta Logo'] {
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
}

/* Ensure text is white in header */
:deep(button),
:deep(a) {
  color: white;
}

:deep(.text-foreground),
:deep(.text-muted-foreground) {
  color: rgba(255, 255, 255, 0.9) !important;
}
</style>
