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

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/* :
 *   - lockup brand → /
 *   - liens nav (Tarifs, Blog)
 *   - CTA "Essai gratuit 30 j" → app.rubis.pro
 *
 * Sticky avec backdrop-blur quand le header est posé sur un hero (transparent),
 * solid+bordure sur les pages secondaires (blog, légal).
 */
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 hover:no-underline">
          <Brand withSuffix gemSize={26} />
        </a>

        <nav aria-label="Navigation principale" 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"
          >
            Tarifs
          </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"
          >
            Blog
          </a>
          <Button asChild size="sm">
            <a href={APP_URL}>Essai gratuit 30 j</a>
          </Button>
        </nav>
      </div>
    </header>
  );
}
