<section class="section docs-section" id="navigation-overlays">
	<h2 class="section-title">Navigation & Overlays</h2>
	<p class="docs-section-description">
		Tabs переключают близкие представления, dropdown подходит для коротких action-menu,
		tooltip дает компактную подсказку, popover раскрывает небольшой контекстный блок.
	</p>

	<div class="block">
		<div class="tabs" role="tablist" aria-label="View mode">
			<button class="tab tab-active" type="button" role="tab" aria-selected="true">Overview</button>
			<button class="tab" type="button" role="tab" aria-selected="false">Activity</button>
			<button class="tab" type="button" role="tab" aria-selected="false">Settings</button>
		</div>

		<div class="demo-actions">
			<div class="dropdown">
				<button class="btn btn-secondary with-icon" type="button" data-dropdown-toggle aria-expanded="false">
					<i class="ph ph-dots-three-outline"></i>
					Actions
				</button>
				<div class="dropdown-menu" role="menu">
					<button class="dropdown-item" type="button" role="menuitem">
						<i class="ph ph-pencil-simple"></i>
						Edit
					</button>
					<button class="dropdown-item" type="button" role="menuitem">
						<i class="ph ph-copy"></i>
						Duplicate
					</button>
					<button class="dropdown-item dropdown-item-danger" type="button" role="menuitem">
						<i class="ph ph-trash"></i>
						Delete
					</button>
				</div>
			</div>

			<span class="tooltip">
				<button class="btn btn-primary with-icon" type="button" data-tooltip-toggle>
					<i class="ph ph-question"></i>
					Help
				</button>
				<span class="tooltip-panel" role="tooltip">
					Short contextual hint for compact controls.
				</span>
			</span>

			<div class="popover">
				<button class="btn btn-accent with-icon" type="button" data-popover-toggle aria-expanded="false">
					<i class="ph ph-info"></i>
					Details
				</button>
				<div class="popover-panel">
					<h3 class="popover-title">Context</h3>
					<p class="popover-text">
						Use popover for short forms, metadata, previews, and low-risk contextual actions.
					</p>
				</div>
			</div>
		</div>
	</div>

	<div class="code-example">
		<div class="code-example-header">
			<span class="code-example-title">Tabs HTML</span>
			<button class="code-example-copy" type="button">Copy</button>
		</div>
		<pre><code class="language-html">&lt;div class="tabs" role="tablist" aria-label="View mode"&gt;
  &lt;button class="tab tab-active" type="button" role="tab" aria-selected="true"&gt;Overview&lt;/button&gt;
  &lt;button class="tab" type="button" role="tab" aria-selected="false"&gt;Activity&lt;/button&gt;
  &lt;button class="tab" type="button" role="tab" aria-selected="false"&gt;Settings&lt;/button&gt;
&lt;/div&gt;</code></pre>
	</div>

	<div class="code-example">
		<div class="code-example-header">
			<span class="code-example-title">Dropdown HTML</span>
			<button class="code-example-copy" type="button">Copy</button>
		</div>
		<pre><code class="language-html">&lt;div class="dropdown"&gt;
  &lt;button class="btn btn-secondary with-icon" type="button" data-dropdown-toggle aria-expanded="false"&gt;
    &lt;i class="ph ph-dots-three-outline"&gt;&lt;/i&gt;
    Actions
  &lt;/button&gt;
  &lt;div class="dropdown-menu" role="menu"&gt;
    &lt;button class="dropdown-item" type="button" role="menuitem"&gt;Edit&lt;/button&gt;
    &lt;button class="dropdown-item" type="button" role="menuitem"&gt;Duplicate&lt;/button&gt;
    &lt;button class="dropdown-item dropdown-item-danger" type="button" role="menuitem"&gt;Delete&lt;/button&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
	</div>

	<div class="code-example">
		<div class="code-example-header">
			<span class="code-example-title">Tooltip HTML</span>
			<button class="code-example-copy" type="button">Copy</button>
		</div>
		<pre><code class="language-html">&lt;span class="tooltip"&gt;
  &lt;button class="btn btn-primary with-icon" type="button" data-tooltip-toggle&gt;
    &lt;i class="ph ph-question"&gt;&lt;/i&gt;
    Help
  &lt;/button&gt;
  &lt;span class="tooltip-panel" role="tooltip"&gt;
    Short contextual hint for compact controls.
  &lt;/span&gt;
&lt;/span&gt;</code></pre>
	</div>

	<div class="code-example">
		<div class="code-example-header">
			<span class="code-example-title">Popover HTML</span>
			<button class="code-example-copy" type="button">Copy</button>
		</div>
		<pre><code class="language-html">&lt;div class="popover"&gt;
  &lt;button class="btn btn-accent with-icon" type="button" data-popover-toggle aria-expanded="false"&gt;
    &lt;i class="ph ph-info"&gt;&lt;/i&gt;
    Details
  &lt;/button&gt;
  &lt;div class="popover-panel"&gt;
    &lt;h3 class="popover-title"&gt;Context&lt;/h3&gt;
    &lt;p class="popover-text"&gt;Use popover for short forms, metadata, previews, and low-risk contextual actions.&lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
	</div>

	<div class="code-example">
		<div class="code-example-header">
			<span class="code-example-title">Overlays JS</span>
			<button class="code-example-copy" type="button">Copy</button>
		</div>
		<pre><code class="language-js">Overlays.init();

// Available on the global namespace too:
GNexusUIKit.Overlays.closeAll();</code></pre>
	</div>
</section>