"use client";

/**
 * SiteHeader — minimal sticky transparent header with the brand wordmark
 * centred. Navigation lives in SiteSidebar (desktop) and SiteBottomNav
 * (mobile), so the header's only job here is to anchor the brand.
 *
 * Mobile gets a Reading-settings affordance pinned to the right ONLY for
 * anonymous visitors — auth users access the same controls from the
 * gear next to Edit Profile in ProfileHeader (and from the desktop
 * sidebar rail). The split avoids two icons doing the same job for
 * signed-in users while keeping the affordance reachable for guests who
 * have no profile.
 *
 * Layout (mobile, anonymous):
 *
 *   ┌─────────────────────────────────────────────────────┐
 *   │                  Prabhupāda                   ⚙     │
 *   │                    SAYS                             │
 *   └─────────────────────────────────────────────────────┘
 *
 * On md+ the gear hides and the sidebar carries it instead.
 */

import Link from "next/link";
import { ReadingSettings } from "@/components/reading-settings";
import { useAuth } from "@/components/auth/auth-provider";

export function SiteHeader() {
  const { user, loading } = useAuth();
  // Only show the mobile gear for anonymous viewers. During the initial
  // auth check we treat `loading` as anonymous so the gear doesn't flash
  // in and out — once auth resolves, it hides for signed-in users.
  const showMobileGear = !loading && !user;

  return (
    <header className="sticky top-0 z-30 bg-background/60 backdrop-blur-md">
      <div className="relative h-12 sm:h-14 flex items-center justify-center px-4">
        <Link
          href="/"
          aria-label="Prabhupāda Says — home"
          className="leading-none text-foreground font-[family-name:var(--font-title)] transition-opacity hover:opacity-80"
        >
          <span className="block text-center text-[0.8rem] sm:text-base font-semibold uppercase tracking-[0.12em]">
            Prabhupāda
          </span>
          <span className="block text-center text-[0.55rem] sm:text-[0.7rem] font-medium uppercase text-muted-foreground tracking-[0.22em] mt-0.5">
            Says
          </span>
        </Link>
        {showMobileGear ? (
          <div className="md:hidden absolute right-2 top-1/2 -translate-y-1/2">
            <ReadingSettings />
          </div>
        ) : null}
      </div>
    </header>
  );
}