"use client";

import Image from "next/image";
import Link from "next/link";
import { HeaderAccount } from "@/components/HeaderAccount";
import { CurrencySwitcher } from "@/components/CurrencySwitcher";
import { ReviewsMenu } from "@/components/ReviewsMenu";
import { siteConfig } from "@/lib/site-config";
import { useAuth } from "@/context/AuthContext";

const nav = [
  { href: "/#rooms", label: "Rooms" },
  { href: "/guest", label: "Guest hub" },
  { href: "/services", label: "Services" },
  { href: "/#wellness", label: "Gym & Spa" },
  { href: "/#dining", label: "Dining & venues" },
  { href: "/#meetings", label: "Meetings" },
  { href: "/#location", label: "Location" },
];

export function Header() {
  const { session } = useAuth();

  return (
    <header className="sticky top-0 z-40">
      <div className="border-b border-white/10 bg-[var(--color-navy)] text-white">
        <div className="mx-auto flex max-w-7xl flex-wrap items-center justify-between gap-x-3 gap-y-2 px-4 py-2 sm:gap-4 md:px-8">
          <CurrencySwitcher />
          <div className="flex flex-wrap items-center justify-end gap-1 sm:gap-3">
            <Link
              href="/#tour"
              className="rounded-md px-2.5 py-1 text-xs font-medium text-white/90 transition hover:bg-white/10 hover:text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white sm:px-3 sm:text-sm"
            >
              3D tour
            </Link>
            <span className="hidden h-4 w-px bg-white/25 sm:block" aria-hidden />
            <ReviewsMenu variant="topBar" />
          </div>
        </div>
      </div>
      <div className="border-b border-[var(--color-border)] bg-[var(--color-surface)]/95 backdrop-blur-md">
        <div className="mx-auto flex max-w-7xl items-center justify-between gap-4 px-4 py-4 md:px-8">
          <Link
            href="/"
            className="group flex min-w-0 shrink items-center gap-2.5 leading-tight sm:gap-3"
          >
            <Image
              src="/images/shitaye-logo.png"
              alt=""
              width={400}
              height={390}
              className="h-9 w-auto shrink-0 sm:h-10 md:h-11"
              priority
            />
            <span className="flex min-w-0 flex-col">
              <span className="font-nav text-lg tracking-tight text-[var(--color-primary)] sm:text-xl md:text-2xl">
                {siteConfig.name}
              </span>
              <span className="text-[10px] font-medium uppercase tracking-[0.2em] text-[var(--color-muted)] sm:text-[11px]">
                {siteConfig.city}
              </span>
            </span>
          </Link>
          <nav
            className="hidden items-center gap-6 text-sm font-medium text-[var(--color-text)] lg:flex"
            aria-label="Main"
          >
            {nav.map((item) => (
              <Link
                key={item.href}
                href={item.href}
                className="transition-colors hover:text-[var(--color-accent)]"
              >
                {item.label}
              </Link>
            ))}
          </nav>
          <div className="flex shrink-0 items-center gap-2 md:gap-3">
            <HeaderAccount />
            {!session && (
              <Link
                href="/booking"
                className="btn-mustard px-4 py-2.5 text-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-primary)] md:px-5"
              >
                Book
              </Link>
            )}
          </div>
        </div>
      </div>
    </header>
  );
}