<?php
/**
 * Roadmap Promo Page for Free Users
 *
 * @package Changeloger
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

/**
 * Class Changeloger_Roadmap_Promo
 *
 * Displays upgrade CTA for roadmap feature in free version
 */
class Changeloger_Roadmap_Promo {

	/**
	 * Get instance (for compatibility with full version)
	 */
	public static function get_instance() {
		static $instance = null;
		if ( null === $instance ) {
			$instance = new self();
		}
		return $instance;
	}

	/**
	 * Enqueue promo styles
	 */
	public function enqueue_assets() {
		wp_enqueue_style(
			'cha-promo-css',
			plugins_url( 'assets/css/promo.css', dirname( __FILE__ ) ),
			[],
			CHANGELOGER_VERSION
		);
	}

	/**
	 * Render the promo page
	 */
	public function render_page() {
		$this->enqueue_assets();
		$upgrade_url = function_exists( 'cha_fs' ) ? cha_fs()->get_upgrade_url() : '#';
		$learn_more_url = 'https://changeloger.spider-themes.net/';
		?>
		<div class="wrap cha-promo-wrap">
			<!-- Hero Section -->
			<div class="cha-promo-hero">
				<span class="cha-promo-badge">
					<svg xmlns="http://www.w3.org/2000/svg" fill="none" width="16" height="16" viewBox="0 0 24 24" stroke="currentColor" style="width: 16px; height: 16px;">
						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" />
					</svg>
					<?php esc_html_e( 'Pro Feature', 'changeloger' ); ?>
				</span>
				
				<h1 class="cha-promo-hero-title"><?php esc_html_e( 'Visual Product Roadmap', 'changeloger' ); ?></h1>
				<p class="cha-promo-hero-desc"><?php esc_html_e( 'Share your product vision with a beautiful Kanban board. Build transparency, reduce "when is this coming?" tickets, and keep users excited about what\'s next.', 'changeloger' ); ?></p>
				
				<div class="cha-promo-hero-actions">
					<a href="<?php echo esc_url( $upgrade_url ); ?>" class="cha-promo-btn-primary">
						<svg xmlns="http://www.w3.org/2000/svg" fill="none" width="20" height="20" viewBox="0 0 24 24" stroke="currentColor" style="width: 20px; height: 20px;">
							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
						</svg>
						<?php esc_html_e( 'Upgrade to Pro', 'changeloger' ); ?>
					</a>
					<button type="button" class="cha-promo-btn-secondary cha-video-modal-trigger" data-video-id="P2PSTjWCLJw?si=4k4TiAR9ZXXr0gKS">
					<svg xmlns="http://www.w3.org/2000/svg" fill="none" width="18" height="18" viewBox="0 0 24 24" stroke="currentColor" style="width: 18px; height: 18px;">
						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
					</svg>
					<?php esc_html_e( 'Watch Demo', 'changeloger' ); ?>
				</button>
				</div>
			</div>

			<div class="cha-promo-content">
				<!-- Trust Bar -->
				<div class="cha-promo-trust-bar">
					<div class="cha-promo-trust-item">
						<strong>300+</strong> <?php esc_html_e( 'Active Users', 'changeloger' ); ?>
					</div>
					<div class="cha-promo-trust-item">
						<div class="cha-promo-trust-stars">
							<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 20 20" fill="currentColor" style="width: 16px; height: 16px;"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
							<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 20 20" fill="currentColor" style="width: 16px; height: 16px;"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
							<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 20 20" fill="currentColor" style="width: 16px; height: 16px;"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
							<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 20 20" fill="currentColor" style="width: 16px; height: 16px;"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
							<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 20 20" fill="currentColor" style="width: 16px; height: 16px;"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
						</div>
						<strong>5/5</strong> <?php esc_html_e( 'Rating', 'changeloger' ); ?>
					</div>
					<span class="cha-promo-trust-badge">
						<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" style="width: 14px; height: 14px;">
							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
						</svg>
						<?php esc_html_e( '30-Day Money Back', 'changeloger' ); ?>
					</span>
				</div>

				<!-- Overview Section with Stats -->
				<div class="cha-promo-overview">
					<div class="cha-promo-section-header">
						<div class="cha-promo-section-icon green">
							<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" style="width: 26px; height: 26px;">
								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2" />
							</svg>
						</div>
						<h2 class="cha-promo-section-title"><?php esc_html_e( 'Your Roadmap Command Center', 'changeloger' ); ?></h2>
						<p class="cha-promo-section-subtitle"><?php esc_html_e( 'A visual Kanban board to organize and share your product plans', 'changeloger' ); ?></p>
					</div>

					<div class="cha-promo-stats">
						<div class="cha-promo-stat">
							<div class="cha-promo-stat-icon green">
								<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" style="width: 26px; height: 26px;">
									<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16" />
								</svg>
							</div>
							<div class="cha-promo-stat-content">
								<span class="cha-promo-stat-value">5+</span>
								<span class="cha-promo-stat-label"><?php esc_html_e( 'Status Columns', 'changeloger' ); ?></span>
							</div>
						</div>
						<div class="cha-promo-stat">
							<div class="cha-promo-stat-icon blue">
								<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" style="width: 26px; height: 26px;">
									<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
								</svg>
							</div>
							<div class="cha-promo-stat-content">
								<span class="cha-promo-stat-value">∞</span>
								<span class="cha-promo-stat-label"><?php esc_html_e( 'Roadmap Items', 'changeloger' ); ?></span>
							</div>
						</div>
						<div class="cha-promo-stat">
							<div class="cha-promo-stat-icon purple">
								<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" style="width: 26px; height: 26px;">
									<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" />
								</svg>
							</div>
							<div class="cha-promo-stat-content">
								<span class="cha-promo-stat-value"><?php esc_html_e( 'Yes', 'changeloger' ); ?></span>
								<span class="cha-promo-stat-label"><?php esc_html_e( 'Feedback Link', 'changeloger' ); ?></span>
							</div>
						</div>
						<div class="cha-promo-stat">
							<div class="cha-promo-stat-icon orange">
								<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" style="width: 26px; height: 26px;">
									<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
								</svg>
							</div>
							<div class="cha-promo-stat-content">
								<span class="cha-promo-stat-value"><?php esc_html_e( 'Public', 'changeloger' ); ?></span>
								<span class="cha-promo-stat-label"><?php esc_html_e( 'Frontend Display', 'changeloger' ); ?></span>
							</div>
						</div>
					</div>
				</div>

				<!-- Feature Modules -->
				<div class="cha-promo-modules">
					<div class="cha-promo-section-header">
						<div class="cha-promo-section-icon">
							<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" style="width: 26px; height: 26px;">
								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
							</svg>
						</div>
						<h2 class="cha-promo-section-title"><?php esc_html_e( 'Essential Roadmap Features', 'changeloger' ); ?></h2>
						<p class="cha-promo-section-subtitle"><?php esc_html_e( 'Everything you need to communicate your product vision', 'changeloger' ); ?></p>
					</div>

					<div class="cha-promo-modules-grid">
						<div class="cha-promo-module">
							<div class="cha-promo-module-header">
								<div class="cha-promo-module-icon green">
									<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
										<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2" />
									</svg>
								</div>
								<div class="cha-promo-module-info">
									<h3 class="cha-promo-module-title"><?php esc_html_e( 'Kanban Board', 'changeloger' ); ?></h3>
									<p class="cha-promo-module-desc"><?php esc_html_e( 'Visual drag-and-drop board to organize items.', 'changeloger' ); ?></p>
								</div>
							</div>
							<div class="cha-promo-module-features">
								<div class="cha-promo-module-feature">
									<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" style="width: 16px; height: 16px;"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg>
									<?php esc_html_e( 'Customizable columns', 'changeloger' ); ?>
								</div>
								<div class="cha-promo-module-feature">
									<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" style="width: 16px; height: 16px;"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg>
									<?php esc_html_e( 'Status management', 'changeloger' ); ?>
								</div>
								<div class="cha-promo-module-feature">
									<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" style="width: 16px; height: 16px;"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg>
									<?php esc_html_e( 'Color-coded statuses', 'changeloger' ); ?>
								</div>
							</div>
						</div>

						<div class="cha-promo-module">
							<div class="cha-promo-module-header">
								<div class="cha-promo-module-icon blue">
									<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" style="width: 16px; height: 16px;">
										<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" />
									</svg>
								</div>
								<div class="cha-promo-module-info">
									<h3 class="cha-promo-module-title"><?php esc_html_e( 'Status Management', 'changeloger' ); ?></h3>
									<p class="cha-promo-module-desc"><?php esc_html_e( 'Track progress with customizable stages.', 'changeloger' ); ?></p>
								</div>
							</div>
							<div class="cha-promo-module-features">
								<div class="cha-promo-module-feature">
									<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" style="width: 16px; height: 16px;"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg>
									<?php esc_html_e( 'Planned, In Progress, Done', 'changeloger' ); ?>
								</div>
								<div class="cha-promo-module-feature">
									<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" style="width: 16px; height: 16px;"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg>
									<?php esc_html_e( 'Under Review, Maybe', 'changeloger' ); ?>
								</div>
								<div class="cha-promo-module-feature">
									<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" style="width: 16px; height: 16px;"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg>
									<?php esc_html_e( 'Quick status updates', 'changeloger' ); ?>
								</div>
							</div>
						</div>

						<div class="cha-promo-module">
							<div class="cha-promo-module-header">
								<div class="cha-promo-module-icon purple">
									<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" style="width: 16px; height: 16px;">
										<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" />
									</svg>
								</div>
								<div class="cha-promo-module-info">
									<h3 class="cha-promo-module-title"><?php esc_html_e( 'Feedback Integration', 'changeloger' ); ?></h3>
									<p class="cha-promo-module-desc"><?php esc_html_e( 'Link feedback requests to roadmap items.', 'changeloger' ); ?></p>
								</div>
							</div>
							<div class="cha-promo-module-features">
								<div class="cha-promo-module-feature">
									<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" style="width: 16px; height: 16px;"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg>
									<?php esc_html_e( 'Link feedback to items', 'changeloger' ); ?>
								</div>
								<div class="cha-promo-module-feature">
									<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" style="width: 16px; height: 16px;"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg>
									<?php esc_html_e( 'Show vote counts', 'changeloger' ); ?>
								</div>
								<div class="cha-promo-module-feature">
									<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" style="width: 16px; height: 16px;"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg>
									<?php esc_html_e( 'Sync status automatically', 'changeloger' ); ?>
								</div>
							</div>
						</div>

						<div class="cha-promo-module">
							<div class="cha-promo-module-header">
								<div class="cha-promo-module-icon orange">
									<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" style="width: 16px; height: 16px;">
										<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
									</svg>
								</div>
								<div class="cha-promo-module-info">
									<h3 class="cha-promo-module-title"><?php esc_html_e( 'Public Roadmap Page', 'changeloger' ); ?></h3>
									<p class="cha-promo-module-desc"><?php esc_html_e( 'Share your roadmap publicly to build excitement.', 'changeloger' ); ?></p>
								</div>
							</div>
							<div class="cha-promo-module-features">
								<div class="cha-promo-module-feature">
									<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" style="width: 16px; height: 16px;"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg>
									<?php esc_html_e( 'Gutenberg block', 'changeloger' ); ?>
								</div>
								<div class="cha-promo-module-feature">
									<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" style="width: 16px; height: 16px;"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg>
									<?php esc_html_e( 'Beautiful UI design', 'changeloger' ); ?>
								</div>
								<div class="cha-promo-module-feature">
									<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" style="width: 16px; height: 16px;"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg>
									<?php esc_html_e( 'Filter and search', 'changeloger' ); ?>
								</div>
							</div>
						</div>
					</div>
				</div>

				<!-- Comparison Table -->
				<div class="cha-promo-comparison">
					<div class="cha-promo-section-header">
						<h2 class="cha-promo-section-title"><?php esc_html_e( 'Free vs Pro', 'changeloger' ); ?></h2>
						<p class="cha-promo-section-subtitle"><?php esc_html_e( 'See what you unlock with Pro', 'changeloger' ); ?></p>
					</div>

					<div class="cha-promo-comparison-table">
						<div class="cha-promo-comparison-header">
							<div class="cha-promo-comparison-header-cell"><?php esc_html_e( 'Feature', 'changeloger' ); ?></div>
							<div class="cha-promo-comparison-header-cell"><?php esc_html_e( 'Free', 'changeloger' ); ?></div>
							<div class="cha-promo-comparison-header-cell pro"><?php esc_html_e( 'Pro', 'changeloger' ); ?></div>
						</div>
						<div class="cha-promo-comparison-row">
							<div class="cha-promo-comparison-cell"><?php esc_html_e( 'Release Notes', 'changeloger' ); ?></div>
							<div class="cha-promo-comparison-cell"><svg class="check" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg></div>
							<div class="cha-promo-comparison-cell"><svg class="check" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg></div>
						</div>
						<div class="cha-promo-comparison-row">
							<div class="cha-promo-comparison-cell"><?php esc_html_e( 'Public Roadmap', 'changeloger' ); ?></div>
							<div class="cha-promo-comparison-cell"><svg class="cross" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg></div>
							<div class="cha-promo-comparison-cell"><svg class="check" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg></div>
						</div>
						<div class="cha-promo-comparison-row">
							<div class="cha-promo-comparison-cell"><?php esc_html_e( 'Kanban Board', 'changeloger' ); ?></div>
							<div class="cha-promo-comparison-cell"><svg class="cross" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg></div>
							<div class="cha-promo-comparison-cell"><svg class="check" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg></div>
						</div>
						<div class="cha-promo-comparison-row">
							<div class="cha-promo-comparison-cell"><?php esc_html_e( 'Feedback System', 'changeloger' ); ?></div>
							<div class="cha-promo-comparison-cell"><svg class="cross" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg></div>
							<div class="cha-promo-comparison-cell"><svg class="check" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg></div>
						</div>
						<div class="cha-promo-comparison-row">
							<div class="cha-promo-comparison-cell"><?php esc_html_e( 'Priority Support', 'changeloger' ); ?></div>
							<div class="cha-promo-comparison-cell"><svg class="cross" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg></div>
							<div class="cha-promo-comparison-cell"><svg class="check" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg></div>
						</div>
					</div>
				</div>

				<!-- Testimonials -->
				<div class="cha-promo-testimonials">
					<div class="cha-promo-section-header">
						<h2 class="cha-promo-section-title"><?php esc_html_e( 'Loved by Developers', 'changeloger' ); ?></h2>
						<p class="cha-promo-section-subtitle"><?php esc_html_e( 'See what our users have to say', 'changeloger' ); ?></p>
					</div>

					<div class="cha-promo-testimonials-grid">
						<div class="cha-promo-testimonial">
							<div class="cha-promo-testimonial-stars">
								<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" style="width: 16px; height: 16px;"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
								<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" style="width: 16px; height: 16px;"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
								<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" style="width: 16px; height: 16px;"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
								<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" style="width: 16px; height: 16px;"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
								<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" style="width: 16px; height: 16px;"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
							</div>
							<p class="cha-promo-testimonial-text"><?php esc_html_e( 'This plug-in does exactly what it’s supposed to do. It does it easily, with text files, and once you figure out how to set up your own changelog via text, it’s SUPER EASY to customize to your website. I had no issues setting up or integrating it. And on top of all that, it is also customizable. You can add your own sections to the changelog and each will allow you to set their colors. And all for free! Fantastic. Worth a Look!', 'changeloger' ); ?></p>
							<div class="cha-promo-testimonial-author">
								<div class="cha-promo-testimonial-avatar"><img loading="lazy" alt="" src="https://secure.gravatar.com/avatar/f30389d954bbcaab74367605793f5cbafb3186cac2b1fcb5a79fcad54ccdbbab?s=100&amp;d=retro&amp;r=g" srcset="https://secure.gravatar.com/avatar/f30389d954bbcaab74367605793f5cbafb3186cac2b1fcb5a79fcad54ccdbbab?s=200&amp;d=retro&amp;r=g 2x" class="avatar avatar-100 photo" height="100" width="100" decoding="async"></div>
								<div class="cha-promo-testimonial-info">
									<span class="cha-promo-testimonial-name">illusorythrall</span>
									<span class="cha-promo-testimonial-role"><?php esc_html_e( 'Plugin Developer', 'changeloger' ); ?></span>
								</div>
							</div>
						</div>

						<div class="cha-promo-testimonial">
							<div class="cha-promo-testimonial-stars">
								<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" style="width: 16px; height: 16px;"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
								<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" style="width: 16px; height: 16px;"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
								<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" style="width: 16px; height: 16px;"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
								<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" style="width: 16px; height: 16px;"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
								<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" style="width: 16px; height: 16px;"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
							</div>
							<p class="cha-promo-testimonial-text"><?php esc_html_e( 'A lot of changelogs relate to github, software uploads, support sw etc. This is different. Quite simply you write in a txt file and this plugin provides a beautiful frontend ChangeLog. In larger communities it becomes tiring to answer the same questions, reg bugs and updates. This changelog saves you all of that. I was extremely pleased to see that this plugin is completely integrated into FSE and has a block.', 'changeloger' ); ?></p>
							<div class="cha-promo-testimonial-author">
								<div class="cha-promo-testimonial-avatar"><img loading="lazy" alt="" src="https://secure.gravatar.com/avatar/e921a420281f935010b9f2bf1ba18f715a2b4a52d55cc7dfe17aee805c168e9c?s=100&amp;d=retro&amp;r=g" srcset="https://secure.gravatar.com/avatar/e921a420281f935010b9f2bf1ba18f715a2b4a52d55cc7dfe17aee805c168e9c?s=200&amp;d=retro&amp;r=g 2x" class="avatar avatar-100 photo" height="100" width="100" decoding="async"></div>
								<div class="cha-promo-testimonial-info">
									<span class="cha-promo-testimonial-name">hebhansen</span>
									<span class="cha-promo-testimonial-role"><?php esc_html_e( 'SaaS Founder', 'changeloger' ); ?></span>
								</div>
							</div>
						</div>
					</div>
				</div>

				<!-- Why Upgrade Section -->
				<div class="cha-promo-why">
					<div class="cha-promo-section-header">
						<h2 class="cha-promo-section-title"><?php esc_html_e( 'Why a Public Roadmap Matters', 'changeloger' ); ?></h2>
						<p class="cha-promo-section-subtitle"><?php esc_html_e( 'Build trust and transparency with your community', 'changeloger' ); ?></p>
					</div>

					<div class="cha-promo-why-content">
						<div class="cha-promo-why-list">
							<div class="cha-promo-why-item">
								<div class="cha-promo-why-icon">
									<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg>
								</div>
								<span class="cha-promo-why-text"><?php esc_html_e( 'Build trust by showing what you\'re working on.', 'changeloger' ); ?></span>
							</div>
							<div class="cha-promo-why-item">
								<div class="cha-promo-why-icon">
									<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg>
								</div>
								<span class="cha-promo-why-text"><?php esc_html_e( 'Reduce "when is this coming?" support requests.', 'changeloger' ); ?></span>
							</div>
							<div class="cha-promo-why-item">
								<div class="cha-promo-why-icon">
									<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg>
								</div>
								<span class="cha-promo-why-text"><?php esc_html_e( 'Create anticipation for upcoming features.', 'changeloger' ); ?></span>
							</div>
							<div class="cha-promo-why-item">
								<div class="cha-promo-why-icon">
									<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg>
								</div>
								<span class="cha-promo-why-text"><?php esc_html_e( 'Help customers evaluate your product direction.', 'changeloger' ); ?></span>
							</div>
							<div class="cha-promo-why-item">
								<div class="cha-promo-why-icon">
									<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg>
								</div>
								<span class="cha-promo-why-text"><?php esc_html_e( 'Show commitment to continuous improvement.', 'changeloger' ); ?></span>
							</div>
						</div>

						<div class="cha-promo-why-highlight">
							<div class="cha-promo-why-stat">85%</div>
							<p class="cha-promo-why-stat-label"><?php esc_html_e( 'of users trust companies more when they share their product roadmap publicly.', 'changeloger' ); ?></p>
						</div>
					</div>
				</div>

				<!-- CTA Footer -->
				<div class="cha-promo-cta">
					<span class="cha-promo-cta-badge">
						<svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
							<path d="M12 2L14.9 8.1L21.5 8.9L16.7 13.5L18 20L12 16.8L6 20L7.3 13.5L2.5 8.9L9.1 8.1L12 2Z"
								fill="currentColor" />
						</svg>
						<?php esc_html_e('FOUNDERS DEAL', 'changeloger'); ?>
					</span>
					
					<h2 class="cha-promo-cta-title"><?php esc_html_e( 'Start Sharing Your Roadmap Today', 'changeloger' ); ?></h2>
					<p class="cha-promo-cta-desc"><?php esc_html_e( 'Create a beautiful, interactive roadmap that keeps your users excited and informed.', 'changeloger' ); ?></p>
					
					<a href="<?php echo esc_url( $upgrade_url ); ?>" class="cha-promo-btn-primary">
						<svg xmlns="http://www.w3.org/2000/svg" fill="none" width="20" height="20" viewBox="0 0 24 24" stroke="currentColor">
							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
						</svg>
						<?php esc_html_e( 'Get Changeloger Pro', 'changeloger' ); ?>
					</a>
					
					<div class="cha-promo-cta-features">
						<span class="cha-promo-cta-feature">
							<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg>
							<?php esc_html_e( 'Full roadmap features', 'changeloger' ); ?>
						</span>
						<span class="cha-promo-cta-feature">
							<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg>
							<?php esc_html_e( 'Priority support', 'changeloger' ); ?>
						</span>
						<span class="cha-promo-cta-feature">
							<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg>
							<?php esc_html_e( 'Lifetime updates', 'changeloger' ); ?>
						</span>
					</div>
					
					<div class="cha-promo-cta-guarantee">
						<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
						</svg>
						<?php esc_html_e( '30-Day Money-Back Guarantee', 'changeloger' ); ?>
					</div>
				</div>
			</div>
		</div>

		<!-- Video Modal -->
		<div id="cha-video-modal" class="cha-video-modal" style="display: none;">
			<div class="cha-video-modal-overlay"></div>
			<div class="cha-video-modal-content">
				<button type="button" class="cha-video-modal-close" aria-label="<?php esc_attr_e('Close video', 'changeloger'); ?>">
					<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
						<line x1="18" y1="6" x2="6" y2="18"></line>
						<line x1="6" y1="6" x2="18" y2="18"></line>
					</svg>
				</button>
				<div class="cha-video-modal-wrapper">
					<iframe id="cha-video-iframe" width="100%" height="100%" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
				</div>
			</div>
		</div>

		<style>
			.cha-video-modal {
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				z-index: 999999;
				opacity: 0;
				visibility: hidden;
				transition: opacity 0.3s ease, visibility 0.3s ease;
			}

			.cha-video-modal.active {
				opacity: 1;
				visibility: visible;
			}

			.cha-video-modal-overlay {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: rgba(0, 0, 0, 0.85);
				backdrop-filter: blur(4px);
			}

			.cha-video-modal-content {
				position: relative;
				width: 90%;
				max-width: 1200px;
				margin: 0 auto;
				top: 50%;
				transform: translateY(-50%) scale(0.9);
				transition: transform 0.3s ease;
			}

			.cha-video-modal.active .cha-video-modal-content {
				transform: translateY(-50%) scale(1);
			}

			.cha-video-modal-close {
				position: absolute;
				top: -40px;
				right: 0;
				background: rgba(255, 255, 255, 0.1);
				border: 1px solid rgba(255, 255, 255, 0.2);
				color: #fff;
				width: 40px;
				height: 40px;
				border-radius: 50%;
				cursor: pointer;
				display: flex;
				align-items: center;
				justify-content: center;
				transition: all 0.3s ease;
				padding: 0;
			}

			.cha-video-modal-close:hover {
				background: rgba(255, 255, 255, 0.2);
				transform: rotate(90deg);
			}

			.cha-video-modal-wrapper {
				position: relative;
				padding-bottom: 56.25%; /* 16:9 aspect ratio */
				height: 0;
				overflow: hidden;
				background: #000;
				border-radius: 12px;
				box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
			}

			.cha-video-modal-wrapper iframe {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}

			/* Button styles for modal trigger */
			.cha-promo-btn-secondary.cha-video-modal-trigger {
				cursor: pointer;
			}

			@media (max-width: 768px) {
				.cha-video-modal-content {
					width: 95%;
				}

				.cha-video-modal-close {
					top: -35px;
					width: 35px;
					height: 35px;
				}
			}
		</style>

		<script>
			(function() {
				const modal = document.getElementById('cha-video-modal');
				const iframe = document.getElementById('cha-video-iframe');
				const triggers = document.querySelectorAll('.cha-video-modal-trigger');
				const closeBtn = document.querySelector('.cha-video-modal-close');
				const overlay = document.querySelector('.cha-video-modal-overlay');

				// Open modal
				triggers.forEach(function(trigger) {
					trigger.addEventListener('click', function(e) {
						e.preventDefault();
						const videoId = this.getAttribute('data-video-id');
						if (videoId && videoId !== 'YOUR_YOUTUBE_VIDEO_ID') {
							const videoUrl = 'https://www.youtube.com/embed/' + videoId + '?controls=0';
							iframe.setAttribute('src', videoUrl);
							modal.style.display = 'block';
							setTimeout(function() {
								modal.classList.add('active');
							}, 10);
							document.body.style.overflow = 'hidden';
						} else {
							alert('<?php esc_html_e('Please configure the YouTube video ID.', 'changeloger'); ?>');
						}
					});
				});

				// Close modal function
				function closeModal() {
					modal.classList.remove('active');
					setTimeout(function() {
						modal.style.display = 'none';
						iframe.setAttribute('src', '');
						document.body.style.overflow = '';
					}, 300);
				}

				// Close on button click
				if (closeBtn) {
					closeBtn.addEventListener('click', closeModal);
				}

				// Close on overlay click
				if (overlay) {
					overlay.addEventListener('click', closeModal);
				}

				// Close on ESC key
				document.addEventListener('keydown', function(e) {
					if (e.key === 'Escape' && modal.classList.contains('active')) {
						closeModal();
					}
				});
			})();
		</script>
	<?php
	}
}
