<section class="section docs-section" id="cards">
	<h2 class="section-title">Cards</h2>
	<p class="docs-section-description">
		Card подходит для компактных виджетов и контентных блоков.
		Цветовые состояния карточек задаются модификаторами `card-success`, `card-warning`, `card-error`, `card-info`.
	</p>

	<div class="cards">
		<div class="card">
			<h3 class="card-title">Card title</h3>

			<div class="card-content">
				<img src="/assets/imgs/gnexus-mark.svg" alt="" class="card-thumb">
				<p>Карточка для контента, виджетов, статусов.</p>
			</div>

			<div class="card-footer">
				<button class="btn btn-accent">Action</button>
			</div>
		</div>
	</div>

	<div class="block mt-6">
		<div class="row g-4">
			<div class="card status-card card-success">
				<span class="card-title">Status title</span>

				<div class="card-content">
					<div class="status-icon-container">
						<div class="status-icon">
							<i class="ph ph-check-circle"></i> OK
						</div>
					</div>

					<p class="status-name">Primary status card with a short description.</p>
				</div>
			</div>

			<div class="card status-card card-primary">
				<span class="card-title">Default</span>

				<div class="card-content">
					<div class="status-icon-container">
						<div class="status-icon">
							<i class="ph ph-stack"></i>
						</div>
					</div>

					<p class="status-name">Neutral card for a module, widget, or section.</p>
				</div>
			</div>

			<div class="card status-card card-warning">
				<span class="card-title">Pending</span>

				<div class="card-content">
					<div class="status-icon-container">
						<div class="status-icon">
							<i class="ph ph-warning"></i>
						</div>
					</div>

					<p class="status-name">Warning state for items that need attention.</p>
				</div>
			</div>

			<div class="card status-card card-error">
				<span class="card-title">Failed</span>

				<div class="card-content">
					<div class="status-icon-container">
						<div class="status-icon">
							<i class="ph ph-warning-octagon"></i>
						</div>
					</div>

					<p class="status-name">Error state for failed actions or blocked flows.</p>
				</div>
			</div>

			<div class="card status-card card-info">
				<span class="card-title">Info</span>

				<div class="card-content">
					<div class="status-icon-container">
						<div class="status-icon">
							<i class="ph ph-info"></i>
						</div>
					</div>

					<p class="status-name">Informational card for contextual metadata.</p>
				</div>
			</div>

			<div class="card status-card card-secondary">
				<span class="card-title">Queued</span>

				<div class="card-content">
					<div class="status-icon-container">
						<div class="status-icon">
							<i class="ph ph-clock"></i>
						</div>
					</div>

					<p class="status-name">Secondary state for queued or background work.</p>
				</div>
			</div>
		</div>
	</div>

	<div class="block mt-6">
		<div class="card metric-card">
			<div class="card-content">
				<div class="metric-card-header">
					<p class="metric-card-label">Monthly usage</p>
					<span class="metric-card-icon">
						<i class="ph ph-chart-line-up"></i>
					</span>
				</div>
				<p class="metric-card-value">84.2%</p>
				<div class="metric-card-meta">
					<span class="metric-card-delta">+12.8%</span>
					<span>vs previous period</span>
				</div>
			</div>
		</div>
	</div>

	<div class="block mt-6">
		<div class="card action-card">
			<div class="card-content">
				<span class="action-card-kicker">Quick action</span>
				<h3 class="action-card-title">Create workflow</h3>
				<p class="action-card-text">
					Use action cards for primary next steps, onboarding prompts, and compact empty state actions.
				</p>
				<div class="action-card-actions">
					<button class="btn btn-secondary btn-small" type="button">Preview</button>
					<button class="btn btn-accent btn-small" type="button">Create</button>
				</div>
			</div>
		</div>
	</div>

	<div class="code-example">
		<div class="code-example-header">
			<span class="code-example-title">Cards HTML</span>
			<button class="code-example-copy" type="button">Copy</button>
		</div>
		<pre><code class="language-html">&lt;div class="card status-card card-success"&gt;
  &lt;span class="card-title"&gt;Status title&lt;/span&gt;
  &lt;div class="card-content"&gt;
    &lt;div class="status-icon-container"&gt;
      &lt;div class="status-icon"&gt;
        &lt;i class="ph ph-check-circle"&gt;&lt;/i&gt;
        OK
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;p class="status-name"&gt;Primary status card.&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">Metric Card HTML</span>
			<button class="code-example-copy" type="button">Copy</button>
		</div>
		<pre><code class="language-html">&lt;div class="card metric-card"&gt;
  &lt;div class="card-content"&gt;
    &lt;div class="metric-card-header"&gt;
      &lt;p class="metric-card-label"&gt;Monthly usage&lt;/p&gt;
      &lt;span class="metric-card-icon"&gt;&lt;i class="ph ph-chart-line-up"&gt;&lt;/i&gt;&lt;/span&gt;
    &lt;/div&gt;
    &lt;p class="metric-card-value"&gt;84.2%&lt;/p&gt;
    &lt;div class="metric-card-meta"&gt;
      &lt;span class="metric-card-delta"&gt;+12.8%&lt;/span&gt;
      &lt;span&gt;vs previous period&lt;/span&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
	</div>

	<div class="code-example">
		<div class="code-example-header">
			<span class="code-example-title">Action Card HTML</span>
			<button class="code-example-copy" type="button">Copy</button>
		</div>
		<pre><code class="language-html">&lt;div class="card action-card"&gt;
  &lt;div class="card-content"&gt;
    &lt;span class="action-card-kicker"&gt;Quick action&lt;/span&gt;
    &lt;h3 class="action-card-title"&gt;Create workflow&lt;/h3&gt;
    &lt;p class="action-card-text"&gt;
      Use action cards for primary next steps and compact empty state actions.
    &lt;/p&gt;
    &lt;div class="action-card-actions"&gt;
      &lt;button class="btn btn-secondary btn-small"&gt;Preview&lt;/button&gt;
      &lt;button class="btn btn-accent btn-small"&gt;Create&lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
	</div>
</section>