"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 also gets a Reading-settings affordance pinned to the right —
 * the sidebar rail is hidden on mobile, so this is the only easy entry
 * point to the theme + palette + font controls.
 *
 * Layout (mobile):
 *
 *   ┌─────────────────────────────────────────────────────┐
 *   │                  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";

export function SiteHeader() {
  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>
        <div className="md:hidden absolute right-2 top-1/2 -translate-y-1/2">
          <ReadingSettings />
        </div>
      </div>
    </header>
  );
}