<?php
/**
 * Style Manager Lab showcase markup.
 *
 * @package Style Manager
 * @license GPL-2.0-or-later
 */

declare ( strict_types=1 );

namespace Pixelgrade\StyleManager\Lab;

final class ShowcaseRenderer {
	private const COLOR_SIGNAL_PRESETS = [ 1, 3, 6, 10 ];

	public function render( QueryParams $params ): string {
		ob_start();
		?>
		<main class="sm-lab-showcase__page" data-sm-lab-showcase>
			<?php
			$this->render_status_strip( $params );
			$this->render_runtime_contract_explorer( $params );
			$this->render_contextual_palette_demo( $params );
			$this->render_context_resilience_matrix( $params );
			$this->render_semantic_contract();
			$this->render_typography_stack();
			$this->render_interactive_primitives();
			$this->render_color_system_preview();
			$this->render_nova_blocks_zone();
			$this->render_tosca_inspired_zone();
			?>
		</main>
		<?php

		return (string) ob_get_clean();
	}

	private function render_status_strip( QueryParams $params ): void {
		?>
		<section class="sm-lab-zone sm-lab-status" aria-label="<?php esc_attr_e( 'Style Manager Lab status', 'style-manager' ); ?>">
			<div>
				<strong><?php esc_html_e( 'Palette', 'style-manager' ); ?></strong>
				<span data-sm-lab-status-value="palette"><?php echo esc_html( $params->palette() ); ?></span>
			</div>
			<div>
				<strong><?php esc_html_e( 'Variation', 'style-manager' ); ?></strong>
				<span data-sm-lab-status-value="variation"><?php echo esc_html( (string) $params->variation() ); ?></span>
			</div>
			<div>
				<strong><?php esc_html_e( 'Contextual', 'style-manager' ); ?></strong>
				<span data-sm-lab-status-value="contextual"><?php echo esc_html( '' !== $params->contextual() ? $params->contextual() : 'off' ); ?></span>
			</div>
			<div>
				<strong><?php esc_html_e( 'Dark', 'style-manager' ); ?></strong>
				<span data-sm-lab-status-value="dark"><?php echo esc_html( $params->dark() ? 'on' : 'off' ); ?></span>
			</div>
			<div class="sm-lab-swatches" data-sm-lab-readback>
				<?php foreach ( [ 'bg', 'accent', 'fg1', 'fg2' ] as $token ) : ?>
					<span class="sm-lab-swatch" data-token="<?php echo esc_attr( $token ); ?>">
						<span class="sm-lab-swatch__chip" style="background: var(--sm-current-<?php echo esc_attr( $token ); ?>-color);"></span>
						<code>--sm-current-<?php echo esc_html( $token ); ?>-color</code>
						<span class="sm-lab-swatch__value" data-token-value><?php esc_html_e( 'pending', 'style-manager' ); ?></span>
					</span>
				<?php endforeach; ?>
			</div>
		</section>
		<?php
	}

	private function render_runtime_contract_explorer( QueryParams $params ): void {
		?>
		<section class="sm-lab-zone sm-lab-contract-explorer" data-sm-lab-proof="runtime-contract-explorer">
			<div class="sm-lab-contract-explorer__intro">
				<p class="sm-lab-zone__eyebrow"><?php esc_html_e( 'Runtime contract explorer', 'style-manager' ); ?></p>
				<h1><?php esc_html_e( 'Build on a live design-system runtime, not static swatches', 'style-manager' ); ?></h1>
				<p><?php esc_html_e( 'Style Manager resolves brand inputs, contextual palettes, Color Signal, and dark mode into contracts that themes, blocks, tools, and Pixelgrade products can consume without reimplementing palette logic.', 'style-manager' ); ?></p>
				<p class="sm-lab-contract-explorer__chain"><?php esc_html_e( 'Inputs -> Runtime -> Context scopes -> Consumer APIs -> Reference implementations', 'style-manager' ); ?></p>
			</div>
			<?php $this->render_runtime_visual_strip( $params ); ?>
			<div class="sm-lab-contract-explorer__workspace">
				<?php $this->render_contract_matrix(); ?>
				<?php $this->render_selected_contract_panels(); ?>
			</div>
		</section>
		<?php
	}

	private function render_runtime_visual_strip( QueryParams $params ): void {
		$parent_variation = $params->variation();
		$signal_variation = $this->get_signal_variation( $parent_variation, $params->signal() );
		$signal_shifted   = $signal_variation !== $parent_variation;
		$label_grade      = $this->get_contrast_grade( $signal_variation );
		$border_grade     = min( 12, $signal_variation + 2 );
		?>
		<div class="sm-lab-runtime-strip sm-lab-resolution-path" data-sm-lab-visual-strip data-sm-lab-resolution-path>
			<div class="sm-lab-resolution-path__header">
				<p class="sm-lab-runtime-strip__label"><?php esc_html_e( 'Runtime resolution path', 'style-manager' ); ?></p>
				<p><?php esc_html_e( 'Context, signal, palette grades, and component parts are one runtime decision chain. The cards below show what Style Manager resolves before a theme, block, product, or builder API consumes color.', 'style-manager' ); ?></p>
			</div>
			<div class="sm-lab-resolution-path__stages" aria-label="<?php esc_attr_e( 'Style Manager runtime resolution path', 'style-manager' ); ?>">
				<article class="sm-lab-resolution-stage sm-lab-context-stack" data-sm-lab-resolution-stage="context" data-sm-lab-proof="context-stack">
					<div class="sm-lab-resolution-stage__topline">
						<span><?php esc_html_e( '01', 'style-manager' ); ?></span>
						<p class="sm-lab-runtime-strip__label"><?php esc_html_e( 'Context stack', 'style-manager' ); ?></p>
					</div>
					<h2><?php esc_html_e( 'Context scope', 'style-manager' ); ?></h2>
					<p class="sm-lab-resolution-stage__lead"><?php esc_html_e( 'Context decides where the component lives.', 'style-manager' ); ?></p>
					<div class="sm-lab-context-stack__layers">
						<span><strong><?php esc_html_e( 'Page palette', 'style-manager' ); ?></strong><small data-sm-lab-status-value="palette"><?php echo esc_html( $params->palette() ); ?></small></span>
						<span><strong><?php esc_html_e( 'Section context', 'style-manager' ); ?></strong><small><?php esc_html_e( 'inherit or override', 'style-manager' ); ?></small></span>
						<span><strong><?php esc_html_e( 'Block signal', 'style-manager' ); ?></strong><small><?php esc_html_e( 'local intensity', 'style-manager' ); ?></small></span>
						<span><strong><?php esc_html_e( 'Nested component', 'style-manager' ); ?></strong><small><?php esc_html_e( 'consumer scope', 'style-manager' ); ?></small></span>
					</div>
				</article>

				<article class="sm-lab-resolution-stage sm-lab-resolution-stage--signal" data-sm-lab-resolution-stage="signal">
					<div class="sm-lab-resolution-stage__topline">
						<span><?php esc_html_e( '02', 'style-manager' ); ?></span>
						<p class="sm-lab-runtime-strip__label"><?php esc_html_e( 'Color Signal', 'style-manager' ); ?></p>
					</div>
					<h2><?php esc_html_e( 'Signal intensity', 'style-manager' ); ?></h2>
					<p class="sm-lab-resolution-stage__lead"><?php esc_html_e( 'Signal shifts inherited variation through preset anchors.', 'style-manager' ); ?></p>
					<div class="sm-lab-signal-bars" data-sm-lab-signal-bars data-sm-lab-proof="signal-levels">
						<?php
						foreach ( [
							0 => [ __( 'None', 'style-manager' ), __( 'keep parent', 'style-manager' ) ],
							1 => [ __( 'Low', 'style-manager' ), __( 'nearest preset anchor', 'style-manager' ) ],
							2 => [ __( 'Medium', 'style-manager' ), __( 'next preset anchor', 'style-manager' ) ],
							3 => [ __( 'High', 'style-manager' ), __( 'outer preset anchor', 'style-manager' ) ],
						] as $signal => $labels ) :
							?>
							<span
								class="sm-lab-signal-bars__item"
								data-sm-lab-signal-option="<?php echo esc_attr( (string) $signal ); ?>"
								data-active="<?php echo esc_attr( $signal === $params->signal() ? 'true' : 'false' ); ?>"
							>
								<span class="sm-lab-signal-bars__icon" aria-hidden="true">
									<?php for ( $bar = 1; $bar <= 3; $bar++ ) : ?>
										<span class="<?php echo esc_attr( $bar <= $signal ? 'is-active' : '' ); ?>"></span>
									<?php endfor; ?>
								</span>
								<span class="sm-lab-signal-bars__copy">
									<strong><?php echo esc_html( $labels[0] ); ?></strong>
									<small><?php echo esc_html( $labels[1] ); ?></small>
								</span>
							</span>
						<?php endforeach; ?>
					</div>
					<p class="sm-lab-signal-result">
						<?php esc_html_e( 'Signal', 'style-manager' ); ?>
						<strong data-sm-lab-signal-result="signal"><?php echo esc_html( (string) $params->signal() ); ?></strong>
						<?php esc_html_e( 'turns parent', 'style-manager' ); ?>
						<strong data-sm-lab-signal-result="parent"><?php echo esc_html( (string) $params->parent_variation() ); ?></strong>
						<?php esc_html_e( 'into grade', 'style-manager' ); ?>
						<strong data-sm-lab-signal-result="variation"><?php echo esc_html( (string) $signal_variation ); ?></strong>
					</p>
				</article>

				<article class="sm-lab-resolution-stage" data-sm-lab-resolution-stage="roles">
					<div class="sm-lab-resolution-stage__topline">
						<span><?php esc_html_e( '03', 'style-manager' ); ?></span>
						<p class="sm-lab-runtime-strip__label"><?php esc_html_e( 'Role rail', 'style-manager' ); ?></p>
					</div>
					<h2><?php esc_html_e( 'Resolved role rail', 'style-manager' ); ?></h2>
					<div
						class="sm-lab-runtime-strip__rail"
						data-sm-lab-grade-rail
						data-sm-lab-proof="grade-rail"
						data-sm-lab-parent-grade="<?php echo esc_attr( (string) $parent_variation ); ?>"
						data-sm-lab-resolved-grade="<?php echo esc_attr( (string) $signal_variation ); ?>"
						data-sm-lab-signal-shifted="<?php echo esc_attr( $signal_shifted ? 'true' : 'false' ); ?>"
					>
						<?php for ( $grade = 1; $grade <= 12; $grade++ ) : ?>
							<span
								class="sm-lab-runtime-strip__grade"
								data-sm-lab-grade-swatch="<?php echo esc_attr( (string) $grade ); ?>"
								style="<?php echo esc_attr( $this->get_reference_grade_background_style( $params, $grade ) ); ?>"
								aria-label="<?php /* translators: %d: color grade number */ echo esc_attr( sprintf( __( 'Grade %d', 'style-manager' ), $grade ) ); ?>"
								data-active="<?php echo esc_attr( $grade === $parent_variation ? 'true' : 'false' ); ?>"
								data-parent-active="<?php echo esc_attr( $grade === $parent_variation ? 'true' : 'false' ); ?>"
								data-signal-active="<?php echo esc_attr( $grade === $signal_variation ? 'true' : 'false' ); ?>"
								data-resolved-active="<?php echo esc_attr( $grade === $signal_variation ? 'true' : 'false' ); ?>"
							></span>
						<?php endfor; ?>
					</div>
					<div class="sm-lab-role-markers">
						<span data-sm-lab-role-marker="palette"><small><?php esc_html_e( 'Palette', 'style-manager' ); ?></small><strong data-sm-lab-status-value="palette"><?php echo esc_html( $params->palette() ); ?></strong></span>
						<span data-sm-lab-role-marker="parent"><small><?php esc_html_e( 'Parent grade', 'style-manager' ); ?></small><strong data-sm-lab-signal-result="parent"><?php echo esc_html( (string) $parent_variation ); ?></strong></span>
						<span data-sm-lab-role-marker="signal"><small><?php esc_html_e( 'Signal grade', 'style-manager' ); ?></small><strong data-sm-lab-signal-result="variation"><?php echo esc_html( (string) $signal_variation ); ?></strong></span>
						<span data-sm-lab-role-marker="source"><small><?php esc_html_e( 'Source anchor', 'style-manager' ); ?></small><strong><?php esc_html_e( 'grade 7', 'style-manager' ); ?></strong></span>
					</div>
				</article>

				<article class="sm-lab-resolution-stage sm-lab-resolution-stage--wide sm-lab-signal-cascade-stage" data-sm-lab-resolution-stage="cascade" data-sm-lab-proof="signal-cascade">
					<div class="sm-lab-resolution-stage__topline">
						<span><?php esc_html_e( '04', 'style-manager' ); ?></span>
						<p class="sm-lab-runtime-strip__label"><?php esc_html_e( 'Color Signal cascade', 'style-manager' ); ?></p>
					</div>
					<h2><?php esc_html_e( 'Color Signal cascade', 'style-manager' ); ?></h2>
					<p class="sm-lab-resolution-stage__lead"><?php esc_html_e( 'Each layer resolves against its parent surface.', 'style-manager' ); ?></p>
					<div
						class="sm-lab-signal-cascade"
						data-sm-lab-signal-cascade
						data-sm-lab-cascade-palette="<?php echo esc_attr( $params->palette() ); ?>"
						data-sm-lab-cascade-active-signal="<?php echo esc_attr( (string) $params->signal() ); ?>"
					>
						<?php $this->render_cascade_inspector( $params, $parent_variation ); ?>
					</div>
				</article>

				<article class="sm-lab-resolution-stage sm-lab-resolution-stage--wide sm-lab-block-map" data-sm-lab-resolution-stage="mapping" data-sm-lab-proof="block-mapping" data-sm-lab-anatomy-bridge="header">
					<div class="sm-lab-resolution-stage__topline">
						<span><?php esc_html_e( '05', 'style-manager' ); ?></span>
						<p class="sm-lab-runtime-strip__label"><?php esc_html_e( 'Block mapping', 'style-manager' ); ?></p>
					</div>
					<h2><?php esc_html_e( 'Component anatomy', 'style-manager' ); ?><span class="sm-lab-block-map__bridge"><?php esc_html_e( '↑ from Header signal', 'style-manager' ); ?></span></h2>
					<div class="sm-lab-block-map__sample">
						<div
							class="sm-lab-block-map__component sm-palette-<?php echo esc_attr( $params->palette() ); ?> sm-variation-<?php echo esc_attr( (string) $parent_variation ); ?>"
							style="<?php echo esc_attr( $this->get_component_token_style( $label_grade, $signal_variation, $border_grade ) ); ?>"
							data-sm-lab-button-token-map
							data-sm-lab-signal-preview-surface="stable"
							data-sm-lab-token-layout="horizontal"
							data-sm-lab-token-source-grade-label="<?php echo esc_attr( (string) $label_grade ); ?>"
							data-sm-lab-token-source-grade-button="<?php echo esc_attr( (string) $signal_variation ); ?>"
							data-sm-lab-token-source-grade-border="<?php echo esc_attr( (string) $border_grade ); ?>"
							data-sm-lab-signal-preview
							data-palette="<?php echo esc_attr( $params->palette() ); ?>"
							data-palette-variation="<?php echo esc_attr( (string) $parent_variation ); ?>"
							data-color-signal="<?php echo esc_attr( (string) $params->signal() ); ?>"
						>
							<svg class="sm-lab-button-token-map__source-wires" data-sm-lab-token-source-wires aria-hidden="true" focusable="false">
								<path data-sm-lab-token-source-wire="label" />
								<path data-sm-lab-token-source-wire="button" />
								<path data-sm-lab-token-source-wire="border" />
							</svg>
							<div class="sm-lab-button-token-map__brief">
								<h3><?php esc_html_e( 'Button block', 'style-manager' ); ?></h3>
								<p><?php esc_html_e( 'Each visible part consumes one resolved role from the same runtime grade rail.', 'style-manager' ); ?></p>
							</div>
							<div class="sm-lab-button-token-map__rail" aria-hidden="true">
								<?php for ( $grade = 1; $grade <= 12; $grade++ ) : ?>
									<span
										class="sm-lab-button-token-map__grade"
										data-sm-lab-grade-swatch="<?php echo esc_attr( (string) $grade ); ?>"
										style="<?php echo esc_attr( $this->get_reference_grade_background_style( $params, $grade ) ); ?>"
										data-parent-active="<?php echo esc_attr( $grade === $parent_variation ? 'true' : 'false' ); ?>"
										data-resolved-active="<?php echo esc_attr( $grade === $signal_variation ? 'true' : 'false' ); ?>"
										data-active="<?php echo esc_attr( $grade === $parent_variation ? 'true' : 'false' ); ?>"
										data-signal-active="<?php echo esc_attr( $grade === $signal_variation ? 'true' : 'false' ); ?>"
										data-token-label-active="<?php echo esc_attr( $grade === $label_grade ? 'true' : 'false' ); ?>"
										data-token-button-active="<?php echo esc_attr( $grade === $signal_variation ? 'true' : 'false' ); ?>"
										data-token-border-active="<?php echo esc_attr( $grade === $border_grade ? 'true' : 'false' ); ?>"
									>
										<span class="sm-lab-button-token-map__grade-value"><?php echo esc_html( (string) $grade ); ?></span>
										<span class="sm-lab-button-token-map__source-chips" aria-hidden="true">
											<span
												class="sm-lab-button-token-map__source-chip"
												data-sm-lab-token-source-chip="label"
												data-active="<?php echo esc_attr( $grade === $label_grade ? 'true' : 'false' ); ?>"
												style="<?php echo esc_attr( $this->get_source_chip_style( $grade ) ); ?>"
											></span>
											<span
												class="sm-lab-button-token-map__source-chip"
												data-sm-lab-token-source-chip="button"
												data-active="<?php echo esc_attr( $grade === $signal_variation ? 'true' : 'false' ); ?>"
												style="<?php echo esc_attr( $this->get_source_chip_style( $grade ) ); ?>"
											></span>
											<span
												class="sm-lab-button-token-map__source-chip"
												data-sm-lab-token-source-chip="border"
												data-active="<?php echo esc_attr( $grade === $border_grade ? 'true' : 'false' ); ?>"
												style="<?php echo esc_attr( $this->get_source_chip_style( $grade ) ); ?>"
											></span>
										</span>
									</span>
								<?php endfor; ?>
							</div>
							<div class="sm-lab-button-token-map__canvas" data-sm-lab-token-circuit data-sm-lab-token-canvas-variation="1">
								<div class="sm-lab-button-token-map__diagram">
									<div class="sm-lab-button-token-map__component-stage" data-sm-lab-token-lane="component">
										<span class="sm-lab-button-token-map__button-shell">
											<button type="button" class="sm-lab-button-token-map__button" data-sm-lab-component-callout="action">
												<span class="sm-lab-button-token-map__button-label"><?php esc_html_e( 'Make a reservation', 'style-manager' ); ?></span>
												<span class="sm-lab-button-token-map__target-port sm-lab-button-token-map__target-port--label" data-sm-lab-token-target="label" aria-hidden="true"></span>
												<span class="sm-lab-button-token-map__target-port sm-lab-button-token-map__target-port--fill" data-sm-lab-token-target="action" aria-hidden="true"></span>
											</button>
											<span class="sm-lab-button-token-map__target-port sm-lab-button-token-map__target-port--border" data-sm-lab-token-target="border" aria-hidden="true"></span>
										</span>
									</div>
								</div>
							</div>
						</div>
					</div>
				</article>
			</div>
		</div>
		<?php
	}

	private function get_reference_grade_background_style( QueryParams $params, int $grade ): string {
		return sprintf(
			'background: var(--sm-lab-reference-bg-color-%1$d, var(--sm-color-palette-%2$s-color-%1$d, var(--sm-bg-color-%1$d)));',
			$grade,
			$params->palette()
		);
	}

	private function get_cascade_rail_grade_style( QueryParams $params, int $grade ): string {
		$dot_grade = $this->get_signal_variation( $grade, 3 );

		return sprintf(
			'%1$s --sm-lab-cascade-dot-color: var(--sm-lab-reference-bg-color-%2$d, var(--sm-color-palette-%3$s-color-%2$d, var(--sm-bg-color-%2$d)));',
			$this->get_reference_grade_background_style( $params, $grade ),
			$dot_grade,
			$params->palette()
		);
	}

	private function get_component_token_style( int $label_grade, int $button_grade, int $border_grade ): string {
		return sprintf(
			'--sm-lab-component-label-color: var(--sm-lab-reference-bg-color-%1$d, var(--sm-bg-color-%1$d, var(--sm-current-bg-color))); --sm-lab-component-button-color: var(--sm-lab-reference-bg-color-%2$d, var(--sm-bg-color-%2$d, var(--sm-current-accent-color))); --sm-lab-component-border-color: var(--sm-lab-reference-bg-color-%3$d, var(--sm-bg-color-%3$d, var(--sm-current-fg2-color)));',
			$label_grade,
			$button_grade,
			$border_grade
		);
	}

	private function render_cascade_inspector( QueryParams $params, int $root_variation ): void {
		$nodes = $this->get_signal_cascade_nodes( $params, $root_variation );
		$by_parent = [];

		foreach ( $nodes as $node ) {
			$parent = (string) $node['parent'];
			$by_parent[ $parent ][] = $node;
		}
		?>
		<div class="sm-lab-signal-cascade__inspector" data-sm-lab-cascade-view="inspector" aria-label="<?php esc_attr_e( 'Exploded Color Signal contract inspector', 'style-manager' ); ?>">
			<?php
			foreach ( $by_parent[''] ?? [] as $node ) {
				$this->render_cascade_inspector_node( $node, $by_parent, $params );
			}
			?>
		</div>
		<?php
	}

	/**
	 * @param array<string, mixed> $node
	 * @param array<string, array<int, array<string, mixed>>> $by_parent
	 */
	private function render_cascade_inspector_node( array $node, array $by_parent, QueryParams $params ): void {
		?>
		<section
			class="sm-lab-signal-cascade__node sm-lab-signal-cascade__node--<?php echo esc_attr( $node['id'] ); ?>"
			data-sm-lab-cascade-node="<?php echo esc_attr( $node['id'] ); ?>"
			data-sm-lab-cascade-signal="<?php echo esc_attr( (string) $node['signal'] ); ?>"
			<?php if ( '' !== $node['parent'] ) : ?>
				data-sm-lab-cascade-parent="<?php echo esc_attr( $node['parent'] ); ?>"
			<?php endif; ?>
			data-sm-lab-cascade-parent-grade="<?php echo esc_attr( (string) $node['parent_grade'] ); ?>"
			data-sm-lab-cascade-resolved-grade="<?php echo esc_attr( (string) $node['resolved_grade'] ); ?>"
			data-sm-lab-cascade-text-grade="<?php echo esc_attr( (string) $node['text_grade'] ); ?>"
			data-sm-lab-cascade-active="<?php echo esc_attr( $node['active'] ? 'true' : 'false' ); ?>"
			tabindex="0"
			style="<?php echo esc_attr( $node['style'] ); ?>"
		>
			<div class="sm-lab-signal-cascade__signal">
				<button
					type="button"
					class="sm-lab-signal-cascade__signal-summary"
					data-sm-lab-cascade-signal-control
					data-sm-lab-cascade-signal-summary
					data-sm-lab-cascade-signal-step="1"
					aria-label="<?php /* translators: 1: node label, 2: current signal level */ echo esc_attr( sprintf( __( 'Change %1$s Color Signal. Current: %2$s', 'style-manager' ), $node['label'], $node['signal_label'] ) ); ?>"
				>
					<span class="sm-lab-signal-bars__icon" data-sm-lab-cascade-signal-icon aria-hidden="true">
						<?php for ( $bar = 1; $bar <= 3; $bar++ ) : ?>
							<span class="<?php echo esc_attr( $bar <= $node['signal'] ? 'is-active' : '' ); ?>" data-sm-lab-cascade-signal-bar="<?php echo esc_attr( (string) $bar ); ?>"></span>
						<?php endfor; ?>
					</span>
					<span class="sm-lab-signal-cascade__signal-copy">
						<span data-sm-lab-cascade-signal-kicker><?php esc_html_e( 'LEVEL', 'style-manager' ); ?></span>
						<span data-sm-lab-cascade-value="signal"><?php echo esc_html( $node['signal_label'] ); ?></span>
					</span>
				</button>
				<span class="sm-lab-signal-cascade__signal-actions" aria-hidden="false">
					<button
						type="button"
						class="sm-lab-signal-cascade__signal-step"
						data-sm-lab-cascade-signal-control
						data-sm-lab-cascade-signal-step="-1"
						aria-label="<?php /* translators: 1: node label, 2: current signal level */ echo esc_attr( sprintf( __( 'Decrease %1$s Color Signal. Current: %2$s', 'style-manager' ), $node['label'], $node['signal_label'] ) ); ?>"
					>−</button>
					<button
						type="button"
						class="sm-lab-signal-cascade__signal-step"
						data-sm-lab-cascade-signal-control
						data-sm-lab-cascade-signal-step="1"
						aria-label="<?php /* translators: 1: node label, 2: current signal level */ echo esc_attr( sprintf( __( 'Increase %1$s Color Signal. Current: %2$s', 'style-manager' ), $node['label'], $node['signal_label'] ) ); ?>"
					>+</button>
				</span>
			</div>
			<strong><?php echo esc_html( $node['label'] ); ?></strong>
			<small><?php echo esc_html( $node['caption'] ); ?></small>
			<div class="sm-lab-cascade-chips" aria-hidden="true">
				<span
					class="sm-lab-cascade-chip"
					data-sm-lab-cascade-chip="saved-attribute"
					data-sm-lab-cascade-chip-signal-input="<?php echo esc_attr( (string) $node['signal'] ); ?>"
				>
					<span><?php esc_html_e( 'Saved:', 'style-manager' ); ?></span>
					<code data-sm-lab-cascade-chip-signal-input-code>data-color-signal="<?php echo esc_html( (string) $node['signal'] ); ?>"</code>
				</span>
				<span class="sm-lab-cascade-chip" data-sm-lab-cascade-chip="scope-class">
					<span><?php esc_html_e( 'Scope:', 'style-manager' ); ?></span>
					<code data-sm-lab-cascade-chip-scope>.sm-palette-<?php echo esc_html( $params->palette() ); ?>.sm-variation-<?php echo esc_html( (string) $node['resolved_grade'] ); ?></code>
				</span>
			</div>
			<div class="sm-lab-cascade-rail" data-sm-lab-cascade-rail aria-hidden="true">
				<?php for ( $grade = 1; $grade <= 12; $grade++ ) : ?>
					<?php
					$marker = 'none';
					if ( $grade === $node['resolved_grade'] ) {
						$marker = 'resolved';
					} elseif ( $node['parent_grade'] !== $node['resolved_grade'] && $grade === $node['parent_grade'] ) {
						$marker = 'parent';
					}
					?>
					<span
						class="sm-lab-cascade-rail__segment"
						data-sm-lab-cascade-rail-grade="<?php echo esc_attr( (string) $grade ); ?>"
						data-sm-lab-cascade-rail-marker="<?php echo esc_attr( $marker ); ?>"
						style="<?php echo esc_attr( $this->get_cascade_rail_grade_style( $params, $grade ) ); ?>"
					></span>
				<?php endfor; ?>
			</div>
			<span class="sm-lab-signal-cascade__readbacks" aria-hidden="true">
				<b data-sm-lab-cascade-value="parent"><?php echo esc_html( (string) $node['parent_grade'] ); ?></b>
				<b data-sm-lab-cascade-value="resolved"><?php echo esc_html( (string) $node['resolved_grade'] ); ?></b>
			</span>
			<?php if ( 'second-inner' === $node['id'] ) : ?>
				<p
					class="sm-lab-cascade-inversion"
					data-sm-lab-cascade-inversion="second-inner"
					data-sm-lab-cascade-inversion-visible="<?php echo esc_attr( $node['resolved_grade'] !== $node['parent_grade'] ? 'true' : 'false' ); ?>"
				><?php echo esc_html( $this->get_cascade_inversion_copy( $node ) ); ?></p>
			<?php endif; ?>
			<?php
			foreach ( $by_parent[ $node['id'] ] ?? [] as $child ) {
				$this->render_cascade_inspector_node( $child, $by_parent, $params );
			}
			?>
		</section>
		<?php
	}

	private function get_source_chip_style( int $grade ): string {
		return sprintf(
			'--sm-lab-token-source-color: var(--sm-lab-reference-bg-color-%1$d, var(--sm-bg-color-%1$d, var(--sm-current-bg-color)));',
			$grade
		);
	}

	/**
	 * @return array<int, array<string, mixed>>
	 */
	private function get_signal_cascade_nodes( QueryParams $params, int $root_variation ): array {
		$definitions = [
			[
				'id'      => 'page',
				'parent'  => '',
				'signal'  => 0,
				'label'   => __( 'Page container', 'style-manager' ),
				'caption' => __( 'Sets the page surface — everything below resolves against it.', 'style-manager' ),
			],
			[
				'id'      => 'header',
				'parent'  => 'page',
				'signal'  => 3,
				'label'   => __( 'Header block', 'style-manager' ),
				'caption' => __( 'Resolved against the page surface, not against another block.', 'style-manager' ),
			],
			[
				'id'      => 'content',
				'parent'  => 'page',
				'signal'  => 1,
				'label'   => __( 'Content block', 'style-manager' ),
				'caption' => __( 'First layer below page; the parent for any nested block.', 'style-manager' ),
			],
			[
				'id'      => 'inner',
				'parent'  => 'content',
				'signal'  => 2,
				'label'   => __( 'First inner block', 'style-manager' ),
				'caption' => __( 'Resolved against the content surface, not against page.', 'style-manager' ),
			],
			[
				'id'      => 'second-inner',
				'parent'  => 'inner',
				'signal'  => 3,
				'label'   => __( 'Second inner block', 'style-manager' ),
				'caption' => __( 'Resolved against inner — flips to the opposite end of the rail.', 'style-manager' ),
			],
			[
				'id'      => 'footer',
				'parent'  => 'page',
				'signal'  => 3,
				'label'   => __( 'Footer block', 'style-manager' ),
				'caption' => __( 'Same input as Header, same parent — same resolved grade.', 'style-manager' ),
			],
		];
		$resolved_by_id = [];
		$nodes          = [];

		foreach ( $definitions as $definition ) {
			$parent_id      = (string) $definition['parent'];
			$parent_grade   = '' !== $parent_id && isset( $resolved_by_id[ $parent_id ] )
				? $resolved_by_id[ $parent_id ]
				: $root_variation;
			$signal         = (int) $definition['signal'];
			$resolved_grade = $this->get_signal_variation( $parent_grade, $signal );
			$text_grade     = $this->get_contrast_grade( $resolved_grade );

			$resolved_by_id[ (string) $definition['id'] ] = $resolved_grade;
			$nodes[]                                     = [
				'id'             => (string) $definition['id'],
				'parent'         => $parent_id,
				'signal'         => $signal,
				'signal_label'   => $this->get_signal_label( $signal ),
				'label'          => (string) $definition['label'],
				'caption'        => (string) $definition['caption'],
				'parent_grade'   => $parent_grade,
				'resolved_grade' => $resolved_grade,
				'text_grade'     => $text_grade,
				'active'         => $signal === $params->signal(),
				'style'          => $this->get_signal_cascade_style( $resolved_grade, $text_grade, $signal ),
			];
		}

		return $nodes;
	}

	private function get_signal_label( int $signal ): string {
		return match ( max( 0, min( 3, $signal ) ) ) {
			1 => __( 'Low', 'style-manager' ),
			2 => __( 'Medium', 'style-manager' ),
			3 => __( 'High', 'style-manager' ),
			default => __( 'None', 'style-manager' ),
		};
	}

	/**
	 * @param array<string, mixed> $node
	 */
	private function get_cascade_inversion_copy( array $node ): string {
		return sprintf(
			/* translators: 1: color signal label, 2: parent grade, 3: resolved grade. */
			__( '%1$s resolves from parent grade %2$s to grade %3$s. Parent context decides.', 'style-manager' ),
			(string) $node['signal_label'],
			(string) $node['parent_grade'],
			(string) $node['resolved_grade']
		);
	}

	private function get_signal_cascade_style( int $surface_grade, int $text_grade, int $signal ): string {
		$border_grade        = min( 12, $surface_grade + 1 );
		$border_width        = 0 === $signal ? '2px' : '1px';
		$border_transparency = 0 === $signal ? '0%' : '32%';

		return sprintf(
			'--sm-lab-cascade-surface-color: var(--sm-lab-reference-bg-color-%1$d, var(--sm-bg-color-%1$d, var(--sm-current-bg-color))); --sm-lab-cascade-text-color: var(--sm-lab-reference-bg-color-%2$d, var(--sm-bg-color-%2$d, var(--sm-current-fg1-color))); --sm-lab-cascade-border-color: var(--sm-lab-reference-bg-color-%3$d, var(--sm-bg-color-%3$d, var(--sm-current-fg2-color))); --sm-lab-cascade-border-width: %4$s; --sm-lab-cascade-border-transparency: %5$s;',
			$surface_grade,
			$text_grade,
			$border_grade,
			$border_width,
			$border_transparency
		);
	}

	private function get_signal_variation( int $parent_variation, int $signal ): int {
		$parent_variation = max( 1, min( 12, $parent_variation ) );
		$signal           = max( 0, min( 3, $signal ) );
		$options          = [];

		foreach ( self::COLOR_SIGNAL_PRESETS as $index => $variation ) {
			$options[] = [
				'index'     => $index,
				'variation' => $variation,
			];
		}

		usort(
			$options,
			static function ( array $first, array $second ) use ( $parent_variation ): int {
				$distance = abs( $parent_variation - $first['variation'] ) <=> abs( $parent_variation - $second['variation'] );

				return 0 !== $distance ? $distance : $first['index'] <=> $second['index'];
			}
		);

		$options[0]['variation'] = $parent_variation;

		return (int) $options[ min( $signal, count( $options ) - 1 ) ]['variation'];
	}

	private function get_contrast_grade( int $grade ): int {
		return $grade >= 5 ? 1 : 12;
	}

	private function render_contract_matrix(): void {
		$rows = ContractCatalog::all();
		?>
		<div class="sm-lab-contract-matrix" aria-label="<?php esc_attr_e( 'Style Manager runtime contracts', 'style-manager' ); ?>">
			<?php foreach ( $rows as $row ) : ?>
				<button
					type="button"
					class="sm-lab-contract-row sm-lab-contract-row--<?php echo esc_attr( $row['maturity'] ); ?>"
					data-sm-lab-contract-row="<?php echo esc_attr( $row['id'] ); ?>"
					aria-selected="<?php echo esc_attr( 'active-palette' === $row['id'] ? 'true' : 'false' ); ?>"
				>
					<span class="sm-lab-contract-row__label"><?php echo esc_html( $row['label'] ); ?></span>
					<span class="sm-lab-contract-row__maturity"><?php echo esc_html( ucfirst( $row['maturity'] ) ); ?></span>
					<span class="sm-lab-contract-row__behavior"><?php echo esc_html( $row['visual_behavior'] ); ?></span>
					<span class="sm-lab-contract-row__proof"><?php echo esc_html( $row['pixelgrade_proof'] ); ?></span>
				</button>
			<?php endforeach; ?>
		</div>
		<?php
	}

	private function render_selected_contract_panels(): void {
		foreach ( ContractCatalog::all() as $row ) :
			$is_default = 'active-palette' === $row['id'];
			?>
			<article
				class="sm-lab-contract-panel"
				data-sm-lab-contract-panel="<?php echo esc_attr( $row['id'] ); ?>"
				<?php echo $is_default ? '' : 'hidden'; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
			>
				<p class="sm-lab-contract-panel__maturity"><?php echo esc_html( ucfirst( $row['maturity'] ) ); ?></p>
				<h2><?php echo esc_html( $row['label'] ); ?></h2>
				<p><?php echo esc_html( $row['visual_behavior'] ); ?></p>
				<dl class="sm-lab-contract-panel__facts">
					<div>
						<dt><?php esc_html_e( 'Consume today', 'style-manager' ); ?></dt>
						<dd><?php echo esc_html( $row['consume_today'] ); ?></dd>
					</div>
					<div>
						<dt><?php esc_html_e( 'Proposed API', 'style-manager' ); ?></dt>
						<dd><?php echo esc_html( $row['proposed_api'] ); ?></dd>
					</div>
					<div>
						<dt><?php esc_html_e( 'Pixelgrade proof', 'style-manager' ); ?></dt>
						<dd><?php echo esc_html( $row['pixelgrade_proof'] ); ?></dd>
					</div>
				</dl>
				<pre><code><?php echo esc_html( $row['snippet'] ); ?></code></pre>
			</article>
			<?php
		endforeach;
	}

	private function render_system_generator( QueryParams $params ): void {
		?>
		<section class="sm-lab-zone sm-lab-generator" data-sm-lab-proof="generator">
			<div class="sm-lab-generator__intro">
				<p class="sm-lab-zone__eyebrow"><?php esc_html_e( 'System generator', 'style-manager' ); ?></p>
				<h1><?php esc_html_e( 'One brand input becomes a complete runtime system', 'style-manager' ); ?></h1>
				<p><?php esc_html_e( 'Style Manager turns a selected palette and variation into surface, accent, and text roles that real theme and block UI can consume without knowing how the scale was generated.', 'style-manager' ); ?></p>
			</div>
			<div class="sm-lab-flow" aria-label="<?php esc_attr_e( 'Style Manager design-system flow', 'style-manager' ); ?>">
				<div class="sm-lab-flow__step">
					<span class="sm-lab-flow__index">1</span>
					<h2><?php esc_html_e( 'Brand input', 'style-manager' ); ?></h2>
					<p><?php esc_html_e( 'Palette source and active color signal set the runtime context.', 'style-manager' ); ?></p>
					<dl class="sm-lab-flow__facts">
						<div>
							<dt><?php esc_html_e( 'Palette', 'style-manager' ); ?></dt>
							<dd><?php echo esc_html( $params->palette() ); ?></dd>
						</div>
						<div>
							<dt><?php esc_html_e( 'Variation', 'style-manager' ); ?></dt>
							<dd data-sm-lab-status-value="variation"><?php echo esc_html( (string) $params->variation() ); ?></dd>
						</div>
					</dl>
				</div>
				<div class="sm-lab-flow__step sm-lab-flow__step--roles">
					<span class="sm-lab-flow__index">2</span>
					<h2><?php esc_html_e( 'Generated roles', 'style-manager' ); ?></h2>
					<p><?php esc_html_e( 'The palette resolves into the four runtime roles that drive the page.', 'style-manager' ); ?></p>
					<div class="sm-lab-role-grid">
						<?php
						foreach ( [
							'bg'     => __( 'Surface', 'style-manager' ),
							'accent' => __( 'Accent', 'style-manager' ),
							'fg1'    => __( 'Text primary', 'style-manager' ),
							'fg2'    => __( 'Text secondary', 'style-manager' ),
						] as $token => $label ) :
							?>
							<div class="sm-lab-role" data-token="<?php echo esc_attr( $token ); ?>">
								<span class="sm-lab-role__chip" style="background: var(--sm-current-<?php echo esc_attr( $token ); ?>-color);"></span>
								<span><?php echo esc_html( $label ); ?></span>
								<code data-token-value><?php esc_html_e( 'pending', 'style-manager' ); ?></code>
							</div>
						<?php endforeach; ?>
					</div>
				</div>
				<div class="sm-lab-flow__step">
					<span class="sm-lab-flow__index">3</span>
					<h2><?php esc_html_e( 'Usable UI', 'style-manager' ); ?></h2>
					<p><?php esc_html_e( 'The same roles immediately skin real headings, actions, inputs, and nested blocks.', 'style-manager' ); ?></p>
					<?php $this->render_runtime_component_sample( __( 'Active runtime sample', 'style-manager' ) ); ?>
				</div>
			</div>
		</section>
		<?php
	}

	private function render_context_resilience_matrix( QueryParams $params ): void {
		$variation = (string) $params->variation();
		?>
		<section class="sm-lab-zone sm-lab-context-matrix" data-sm-lab-proof="context-resilience">
			<div class="sm-lab-section-heading">
				<p class="sm-lab-zone__eyebrow"><?php esc_html_e( 'Context resilience', 'style-manager' ); ?></p>
				<h2><?php esc_html_e( 'The same component survives different palette contexts', 'style-manager' ); ?></h2>
				<p><?php esc_html_e( 'No component-specific color choices are needed here. Each sample inherits the nearest Style Manager palette scope and keeps its structure intact.', 'style-manager' ); ?></p>
			</div>
			<div class="sm-lab-context-grid">
				<div class="sm-lab-context-cell">
					<p class="sm-lab-context-cell__label"><?php esc_html_e( 'Active site context', 'style-manager' ); ?></p>
					<?php $this->render_runtime_component_sample( __( 'Inherited from body', 'style-manager' ) ); ?>
				</div>
				<div class="sm-lab-context-cell sm-palette-<?php echo esc_attr( ContextualPalette::ID ); ?> sm-variation-<?php echo esc_attr( $variation ); ?>" data-palette-variation="<?php echo esc_attr( $variation ); ?>">
					<p class="sm-lab-context-cell__label"><?php esc_html_e( 'Runtime contextual palette', 'style-manager' ); ?></p>
					<?php $this->render_runtime_component_sample( __( 'Synthesized from source', 'style-manager' ) ); ?>
				</div>
				<div class="sm-lab-context-cell sm-palette-1 sm-variation-1 sm-color-signal-2" data-palette="1" data-palette-variation="1" data-color-signal="2">
					<p class="sm-lab-context-cell__label"><?php esc_html_e( 'Nested block signal', 'style-manager' ); ?></p>
					<?php $this->render_runtime_component_sample( __( 'Shifted by block signal', 'style-manager' ) ); ?>
				</div>
			</div>
		</section>
		<?php
	}

	private function render_semantic_contract(): void {
		?>
		<section class="sm-lab-zone sm-lab-contract" data-sm-lab-proof="semantic-contract">
			<div class="sm-lab-section-heading">
				<p class="sm-lab-zone__eyebrow"><?php esc_html_e( 'Consumer contract', 'style-manager' ); ?></p>
				<h2><?php esc_html_e( 'Expose the engine through stable semantic roles', 'style-manager' ); ?></h2>
				<p><?php esc_html_e( 'The raw palette machinery stays inside Style Manager. Themes, blocks, Site Editor bridges, and AI design tools should read the semantic layer.', 'style-manager' ); ?></p>
			</div>
			<div class="sm-lab-contract__map">
				<div class="sm-lab-contract__column">
					<h3><?php esc_html_e( 'Internal runtime roles', 'style-manager' ); ?></h3>
					<ul>
						<li data-token="bg"><code>--sm-current-bg-color</code><span data-token-value><?php esc_html_e( 'pending', 'style-manager' ); ?></span></li>
						<li data-token="accent"><code>--sm-current-accent-color</code><span data-token-value><?php esc_html_e( 'pending', 'style-manager' ); ?></span></li>
						<li data-token="fg1"><code>--sm-current-fg1-color</code><span data-token-value><?php esc_html_e( 'pending', 'style-manager' ); ?></span></li>
						<li data-token="fg2"><code>--sm-current-fg2-color</code><span data-token-value><?php esc_html_e( 'pending', 'style-manager' ); ?></span></li>
					</ul>
				</div>
				<div class="sm-lab-contract__column">
					<h3><?php esc_html_e( 'Proposed semantic tier', 'style-manager' ); ?></h3>
					<ul>
						<li><code>--sm-surface</code><span><?php esc_html_e( 'page and section surfaces', 'style-manager' ); ?></span></li>
						<li><code>--sm-text-primary</code><span><?php esc_html_e( 'body and heading text', 'style-manager' ); ?></span></li>
						<li><code>--sm-text-secondary</code><span><?php esc_html_e( 'captions and metadata', 'style-manager' ); ?></span></li>
						<li><code>--sm-accent</code><span><?php esc_html_e( 'links and actions', 'style-manager' ); ?></span></li>
					</ul>
				</div>
				<div class="sm-lab-contract__column">
					<h3><?php esc_html_e( 'WordPress consumers', 'style-manager' ); ?></h3>
					<ul>
						<li><code>theme.json</code><span><?php esc_html_e( 'Site Editor presets', 'style-manager' ); ?></span></li>
						<li><code>Anima --theme-*</code><span><?php esc_html_e( 'theme typography and color roles', 'style-manager' ); ?></span></li>
						<li><code>Nova Blocks --nb-*</code><span><?php esc_html_e( 'block-level color-signal behavior', 'style-manager' ); ?></span></li>
					</ul>
				</div>
			</div>
		</section>
		<?php
	}

	private function render_runtime_component_sample( string $context_label ): void {
		?>
		<article class="sm-lab-component-sample">
			<div class="sm-lab-component-sample__meta">
				<p class="sm-lab-component-sample__kicker"><?php esc_html_e( 'Runtime brief', 'style-manager' ); ?></p>
				<span><?php echo esc_html( $context_label ); ?></span>
			</div>
			<h3><?php esc_html_e( 'Design System Dispatch', 'style-manager' ); ?></h3>
			<p><?php esc_html_e( 'A palette change becomes stable surface, text, action, and nested-block decisions without this component owning a color recipe.', 'style-manager' ); ?></p>
			<dl class="sm-lab-component-sample__details">
				<div>
					<dt><?php esc_html_e( 'Surface', 'style-manager' ); ?></dt>
					<dd data-token="bg"><span data-token-value><?php esc_html_e( 'pending', 'style-manager' ); ?></span></dd>
				</div>
				<div>
					<dt><?php esc_html_e( 'Action', 'style-manager' ); ?></dt>
					<dd data-token="accent"><span data-token-value><?php esc_html_e( 'pending', 'style-manager' ); ?></span></dd>
				</div>
			</dl>
			<div class="sm-lab-component-sample__actions">
				<a class="sm-lab-button sm-lab-button--primary" href="#sm-lab-primary"><?php esc_html_e( 'View details', 'style-manager' ); ?></a>
				<a class="sm-lab-button sm-lab-button--outline" href="#sm-lab-secondary"><?php esc_html_e( 'Open pattern', 'style-manager' ); ?></a>
			</div>
		</article>
		<?php
	}

	private function render_typography_stack(): void {
		?>
		<section class="sm-lab-zone sm-lab-typography">
			<p class="sm-lab-zone__eyebrow"><?php esc_html_e( 'Typography stack', 'style-manager' ); ?></p>
			<h1><?php esc_html_e( 'Heading One Validates the Display Scale', 'style-manager' ); ?></h1>
			<h2><?php esc_html_e( 'Heading Two Carries Editorial Hierarchy', 'style-manager' ); ?></h2>
			<h3><?php esc_html_e( 'Heading Three Handles Section Rhythm', 'style-manager' ); ?></h3>
			<h4><?php esc_html_e( 'Heading Four Supports Dense Content', 'style-manager' ); ?></h4>
			<h5><?php esc_html_e( 'Heading Five Stays Legible', 'style-manager' ); ?></h5>
			<h6><?php esc_html_e( 'Heading Six Keeps Contrast', 'style-manager' ); ?></h6>
			<p class="sm-lab-lead"><?php esc_html_e( 'A lead paragraph checks the bridge between Style Manager roles and theme-facing typography variables.', 'style-manager' ); ?></p>
			<p><?php esc_html_e( 'Body copy should remain calm, readable, and correctly colored across every palette variation.', 'style-manager' ); ?></p>
			<p class="sm-lab-caption"><?php esc_html_e( 'Caption, navigation, and small text samples expose weaker contrast pairings quickly.', 'style-manager' ); ?></p>
		</section>
		<?php
	}

	private function render_interactive_primitives(): void {
		?>
		<section class="sm-lab-zone sm-lab-primitives">
			<p class="sm-lab-zone__eyebrow"><?php esc_html_e( 'Interactive primitives', 'style-manager' ); ?></p>
			<div class="sm-lab-button-row">
				<button class="sm-lab-button sm-lab-button--primary"><?php esc_html_e( 'Primary', 'style-manager' ); ?></button>
				<button class="sm-lab-button sm-lab-button--outline"><?php esc_html_e( 'Outline', 'style-manager' ); ?></button>
				<button class="sm-lab-button sm-lab-button--naked"><?php esc_html_e( 'Naked', 'style-manager' ); ?></button>
			</div>
			<p>
				<a href="#sm-lab-link"><?php esc_html_e( 'Default link state', 'style-manager' ); ?></a>
				<a class="sm-lab-link-hover" href="#sm-lab-hover"><?php esc_html_e( 'Hover-like link state', 'style-manager' ); ?></a>
			</p>
			<form class="sm-lab-form" action="#" method="get">
				<label>
					<span><?php esc_html_e( 'Text input', 'style-manager' ); ?></span>
					<input type="text" value="<?php esc_attr_e( 'Palette sample', 'style-manager' ); ?>" />
				</label>
				<label><input type="checkbox" checked /> <?php esc_html_e( 'Checkbox', 'style-manager' ); ?></label>
				<label><input type="radio" checked /> <?php esc_html_e( 'Radio', 'style-manager' ); ?></label>
				<label>
					<span><?php esc_html_e( 'Select', 'style-manager' ); ?></span>
					<select><option><?php esc_html_e( 'Option', 'style-manager' ); ?></option></select>
				</label>
			</form>
		</section>
		<?php
	}

	private function render_color_system_preview(): void {
		?>
		<section class="sm-lab-zone sm-lab-color-system" data-sm-lab-color-system-zone="1">
			<div id="style-manager-lab-color-system-root"></div>
		</section>
		<?php
	}

	private function render_contextual_palette_demo( QueryParams $params ): void {
		$variation = (string) $params->variation();
		?>
		<section class="sm-lab-zone sm-lab-contextual sm-lab-contextual-proof sm-palette-<?php echo esc_attr( ContextualPalette::ID ); ?> sm-variation-<?php echo esc_attr( $variation ); ?>" data-palette="<?php echo esc_attr( ContextualPalette::ID ); ?>" data-palette-variation="<?php echo esc_attr( $variation ); ?>" data-sm-lab-proof="contextual-proof">
			<div class="sm-lab-section-heading">
				<p class="sm-lab-zone__eyebrow"><?php esc_html_e( 'Contextual palette proof', 'style-manager' ); ?></p>
				<h2><?php esc_html_e( 'A local source color becomes a usable design-system context', 'style-manager' ); ?></h2>
				<p><?php esc_html_e( 'This proof synthesizes a palette at runtime, applies it to a scoped section, reads its generated roles, and exposes where future safe-token aliases should rescue contrast.', 'style-manager' ); ?></p>
			</div>
			<div class="sm-lab-contextual-proof__grid">
				<div class="sm-lab-contextual-proof__panel sm-lab-contextual-proof__source">
					<p class="sm-lab-contextual-proof__label"><?php esc_html_e( 'Source color', 'style-manager' ); ?></p>
					<div class="sm-lab-contextual-proof__source-value">
						<span class="sm-lab-contextual-proof__chip" data-sm-lab-contextual-swatch="source"></span>
						<code data-sm-lab-contextual-value="source"><?php echo esc_html( '' !== $params->contextual() ? $params->contextual() : 'off' ); ?></code>
					</div>
					<p><?php esc_html_e( 'Picked in the Lab controls, generated only for this preview, and never written into saved options.', 'style-manager' ); ?></p>
				</div>
				<div class="sm-lab-contextual-proof__panel">
					<p class="sm-lab-contextual-proof__label"><?php esc_html_e( 'Generated runtime roles', 'style-manager' ); ?></p>
					<div class="sm-lab-contextual-roles">
						<?php
						foreach ( [
							'surface' => __( 'Surface', 'style-manager' ),
							'accent'  => __( 'Accent', 'style-manager' ),
							'text'    => __( 'Text', 'style-manager' ),
						] as $role => $label ) :
							?>
							<div class="sm-lab-contextual-role">
								<span class="sm-lab-contextual-proof__chip" data-sm-lab-contextual-swatch="<?php echo esc_attr( $role ); ?>"></span>
								<span><?php echo esc_html( $label ); ?></span>
								<code data-sm-lab-contextual-value="<?php echo esc_attr( $role ); ?>"><?php esc_html_e( 'pending', 'style-manager' ); ?></code>
							</div>
						<?php endforeach; ?>
					</div>
				</div>
				<div class="sm-lab-contextual-proof__panel">
					<p class="sm-lab-contextual-proof__label"><?php esc_html_e( 'Contrast readout', 'style-manager' ); ?></p>
					<div class="sm-lab-contrast-readout">
						<div>
							<span><?php esc_html_e( 'Accent on surface', 'style-manager' ); ?></span>
							<strong data-sm-lab-contextual-value="accent-ratio"><?php esc_html_e( 'n/a', 'style-manager' ); ?></strong>
							<em data-sm-lab-contextual-value="accent-status"><?php esc_html_e( 'Set source color', 'style-manager' ); ?></em>
						</div>
						<div>
							<span><?php esc_html_e( 'Text on surface', 'style-manager' ); ?></span>
							<strong data-sm-lab-contextual-value="text-ratio"><?php esc_html_e( 'n/a', 'style-manager' ); ?></strong>
							<em data-sm-lab-contextual-value="text-status"><?php esc_html_e( 'Set source color', 'style-manager' ); ?></em>
						</div>
					</div>
				</div>
				<div class="sm-lab-contextual-proof__panel sm-lab-contextual-proof__safe">
					<p class="sm-lab-contextual-proof__label"><?php esc_html_e( 'Safe-token direction', 'style-manager' ); ?></p>
					<p><?php esc_html_e( 'The next useful contract is not another raw swatch. It is a safe semantic alias that can resolve to adjacent generated roles when a local palette misses its contrast target.', 'style-manager' ); ?></p>
					<ul>
						<li><code>--sm-accent-safe</code></li>
						<li><code>--sm-text-safe</code></li>
					</ul>
				</div>
			</div>
			<div class="sm-lab-contextual-proof__component">
				<?php $this->render_runtime_component_sample( __( 'Scoped contextual palette', 'style-manager' ) ); ?>
			</div>
		</section>
		<?php
	}

	private function render_nova_blocks_zone(): void {
		if ( ! function_exists( 'novablocks_get_plugin_path' ) ) {
			return;
		}

		?>
		<section class="sm-lab-zone sm-lab-nova-blocks">
			<p class="sm-lab-zone__eyebrow"><?php esc_html_e( 'Nova Blocks', 'style-manager' ); ?></p>
			<?php
			echo do_blocks( '<!-- wp:novablocks/headline {"content":"Nova Blocks Headline"} /-->' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- do_blocks() renders trusted hard-coded Nova Blocks markup for the Lab demo.
			echo do_blocks( '<!-- wp:novablocks/supernova {"postsToShow":3} /-->' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- do_blocks() renders trusted hard-coded Nova Blocks markup for the Lab demo.
			?>
		</section>
		<?php
	}

	/**
	 * Render a Tosca-inspired "Text Attributes" zone.
	 *
	 * The markup is a hand-authored approximation of Tosca starter's
	 * block-patterns/attributes/#text-features pattern, using core blocks only so
	 * it renders deterministically regardless of which starter (if any) is
	 * imported. Guarded on Anima being active because the value of this zone
	 * is watching `--theme-*` typography + `sm-variation-*` bindings applied to
	 * realistic editorial content.
	 */
	private function render_tosca_inspired_zone(): void {
		if ( ! function_exists( 'wp_get_theme' ) || 'anima' !== wp_get_theme()->get_stylesheet() ) {
			return;
		}

		$markup = <<<'MARKUP'
<!-- wp:group {"className":"sm-palette-1 sm-variation-1"} -->
<div class="wp-block-group sm-palette-1 sm-variation-1" data-palette="1" data-palette-variation="1" data-color-signal="0">
  <!-- wp:heading {"level":2} -->
  <h2 class="wp-block-heading">Text Attributes</h2>
  <!-- /wp:heading -->

  <!-- wp:paragraph {"className":"is-style-lead"} -->
  <p class="is-style-lead">Use this pattern to list text-based attributes for your service or products.</p>
  <!-- /wp:paragraph -->

  <!-- wp:columns -->
  <div class="wp-block-columns">
    <!-- wp:column -->
    <div class="wp-block-column">
      <!-- wp:heading {"level":4} --><h4 class="wp-block-heading">Free Delivery in Europe</h4><!-- /wp:heading -->
      <!-- wp:paragraph --><p>We love Europe, so we ship with no costs anywhere across the continent.</p><!-- /wp:paragraph -->
    </div>
    <!-- /wp:column -->

    <!-- wp:column -->
    <div class="wp-block-column">
      <!-- wp:heading {"level":4} --><h4 class="wp-block-heading">Thoughtful Packaging</h4><!-- /wp:heading -->
      <!-- wp:paragraph --><p>We show care beyond the product and help Mother Nature save resources.</p><!-- /wp:paragraph -->
    </div>
    <!-- /wp:column -->

    <!-- wp:column -->
    <div class="wp-block-column">
      <!-- wp:heading {"level":4} --><h4 class="wp-block-heading">Secure Payments</h4><!-- /wp:heading -->
      <!-- wp:paragraph --><p>Visa · Mastercard · Bitcoin</p><!-- /wp:paragraph -->
    </div>
    <!-- /wp:column -->

    <!-- wp:column -->
    <div class="wp-block-column">
      <!-- wp:heading {"level":4} --><h4 class="wp-block-heading">Customer Care</h4><!-- /wp:heading -->
      <!-- wp:paragraph --><p>+33 (0)1 4439 800</p><!-- /wp:paragraph -->
    </div>
    <!-- /wp:column -->
  </div>
  <!-- /wp:columns -->
</div>
<!-- /wp:group -->
MARKUP;

		?>
		<section class="sm-lab-zone sm-lab-tosca-inspired">
			<p class="sm-lab-zone__eyebrow"><?php esc_html_e( 'Tosca-inspired — Text Attributes', 'style-manager' ); ?></p>
			<?php echo do_blocks( $markup ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- do_blocks() renders trusted Lab fixture markup built above. ?>
		</section>
		<?php
	}
}
