<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 h-24 items-center justify-between px-4 md:px-6 lg:px-8">
      <!-- Left: Logo + Role Switcher -->
      <div class="flex items-center 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-14 w-auto md:h-16 drop-shadow-lg"
          />
        </NuxtLink>

        <!-- Role Switcher (Desktop only) -->
        <div class="hidden lg:block">
          <RoleSwitcher />
        </div>
      </div>

      <!-- Right: Cart + User Menu -->
      <div class="flex items-center gap-3 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 (optional) -->
    <div 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>
