import { Brand, Button, cn } from "@rubis/ui";
import { copy } from "../copy";

const APP_URL = "https://app.rubis.pro";

type SiteHeaderProps = {
  /** Si true, fond opaque + bordure (utile sur les pages blog où on n'a pas de hero). Sinon transparent + sticky-blur. */
  solid?: boolean;
  className?: string;
};

/**
 * Header public commun à toutes les pages rubis.pro/*.
 */
export function SiteHeader({ solid = false, className }: SiteHeaderProps) {
  return (
    <header
      className={cn(
        "sticky top-0 z-40 w-full",
        solid
          ? "border-b border-line bg-cream/92 backdrop-blur-md"
          : "bg-cream/80 backdrop-blur-md",
        className,
      )}
    >
      <div className="max-w-[1180px] mx-auto px-5 sm:px-8 h-[68px] flex items-center justify-between gap-6">
        <a href="/" className="flex items-center gap-3 hover:no-underline">
          <Brand withSuffix gemSize={26} />
          <span
            className="hidden md:inline-block text-[12px] leading-tight text-ink-3 border-l border-line pl-3 max-w-[180px]"
            aria-hidden
          >
            {copy.nav.baseline}
          </span>
        </a>

        <nav className="flex items-center gap-1.5 sm:gap-3">
          <a
            href="/#pricing"
            className="hidden sm:inline-flex h-10 items-center px-3 text-[14px] font-medium text-ink-2 hover:text-rubis transition-colors"
          >
            {copy.nav.pricing}
          </a>
          <a
            href="/blog"
            className="hidden sm:inline-flex h-10 items-center px-3 text-[14px] font-medium text-ink-2 hover:text-rubis transition-colors"
          >
            {copy.nav.blog}
          </a>
          <Button asChild size="sm">
            <a href={APP_URL}>{copy.nav.cta}</a>
          </Button>
        </nav>
      </div>
    </header>
  );
}