import Link from "next/link";

export function PlatformHeader({
  tone = "light",
}: {
  tone?: "light" | "dark";
}) {
  const dark = tone === "dark";

  return (
    <header
      className={`relative z-20 border-b ${
        dark
          ? "border-white/10 bg-[var(--archi-dark)] text-white"
          : "border-[var(--archi-line)] bg-[rgba(244,241,234,0.92)] text-[var(--archi-ink)] backdrop-blur-xl"
      }`}
    >
      <div className="mx-auto flex h-14 w-full max-w-7xl items-center justify-between gap-3 px-[max(1.25rem,env(safe-area-inset-left))] pr-[max(1.25rem,env(safe-area-inset-right))] pt-[env(safe-area-inset-top)] sm:h-[4.25rem] sm:px-8">
        <Link href="/" className="inline-flex min-w-0 items-center gap-2.5">
          <span
            className={`flex h-8 w-8 shrink-0 items-center justify-center ${
              dark ? "bg-[var(--archi-gold)] text-[var(--archi-dark)]" : "bg-[var(--archi-dark)] text-[var(--archi-gold)]"
            }`}
          >
            <ArchMark className="h-4 w-4" />
          </span>
          <span className="font-[family-name:var(--font-display)] text-sm font-semibold tracking-[0.22em]">
            ARCHI
          </span>
        </Link>

        <nav className="flex items-center gap-3 text-sm sm:gap-5">
          <Link
            href="/discover"
            className={
              dark
                ? "text-white/55 transition hover:text-white"
                : "text-[var(--archi-ink-muted)] transition hover:text-[var(--archi-ink)]"
            }
          >
            Discover
          </Link>
          <Link
            href="/?auth=login"
            className={
              dark
                ? "text-white/55 transition hover:text-white"
                : "text-[var(--archi-ink-muted)] transition hover:text-[var(--archi-ink)]"
            }
          >
            Sign in
          </Link>
          <Link
            href="/?auth=register"
            className={
              dark
                ? "inline-flex min-h-10 items-center bg-[var(--archi-gold)] px-3 py-2 text-sm font-semibold text-[var(--archi-dark)] sm:px-3.5"
                : "inline-flex min-h-10 items-center bg-[var(--archi-ink)] px-3 py-2 text-sm font-medium text-white sm:px-3.5"
            }
          >
            <span className="sm:hidden">Create</span>
            <span className="hidden sm:inline">Create studio</span>
          </Link>
        </nav>
      </div>
    </header>
  );
}

function ArchMark({ className = "h-4 w-4" }: { className?: string }) {
  return (
    <svg viewBox="0 0 32 32" className={className} aria-hidden fill="none">
      <path
        d="M16 3L28 28H22.5L19.7 21.2H12.3L9.5 28H4L16 3Z"
        fill="currentColor"
      />
    </svg>
  );
}
