<?php

/**
 * Analytics Promo Page for Free Users
 *
 * @package Changeloger
 */

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

/**
 * Class Changeloger_Analytics_Promo
 *
 * Displays upgrade CTA for analytics feature in free version
 */
class Changeloger_Analytics_Promo {

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

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

	/**
	 * Render the promo page
	 *
	 * @return void
	 */
	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( 'Powerful Analytics Dashboard', 'changeloger' ); ?></h1>
				<p class="cha-promo-hero-desc"><?php esc_html_e( 'Get comprehensive insights across Releases, Feedback, Roadmap & Subscribers — all in one unified analytics dashboard.', '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>
					<a href="<?php echo esc_url( $learn_more_url ); ?>" class="cha-promo-btn-secondary" target="_blank" rel="noopener noreferrer">
						<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="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
						</svg>
						<?php esc_html_e( 'Learn More', 'changeloger' ); ?>
					</a>
				</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 blue">
							<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" 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 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
							</svg>
						</div>
						<h2 class="cha-promo-section-title"><?php esc_html_e( 'Your Analytics Command Center', 'changeloger' ); ?></h2>
						<p class="cha-promo-section-subtitle"><?php esc_html_e( 'Comprehensive metrics and insights across all your changelog data', 'changeloger' ); ?></p>
					</div>

					<div class="cha-promo-stats">
						<div class="cha-promo-stat">
							<div class="cha-promo-stat-icon blue">
								<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor" style="width: 24px; height: 24px;">
									<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A2 2 0 013 12V7a4 4 0 014-4z" />
								</svg>
							</div>
							<div class="cha-promo-stat-content">
								<span class="cha-promo-stat-value">6</span>
								<span class="cha-promo-stat-label"><?php esc_html_e( 'Stat Cards', 'changeloger' ); ?></span>
							</div>
						</div>
						<div class="cha-promo-stat">
							<div class="cha-promo-stat-icon green">
								<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor" style="width: 24px; height: 24px;">
									<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
								</svg>
							</div>
							<div class="cha-promo-stat-content">
								<span class="cha-promo-stat-value">12</span>
								<span class="cha-promo-stat-label"><?php esc_html_e( 'Months Tracked', 'changeloger' ); ?></span>
							</div>
						</div>
						<div class="cha-promo-stat">
							<div class="cha-promo-stat-icon purple">
								<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor" style="width: 24px; height: 24px;">
									<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
								</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( 'Quick Insights', 'changeloger' ); ?></span>
							</div>
						</div>
						<div class="cha-promo-stat">
							<div class="cha-promo-stat-icon orange">
								<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor" style="width: 24px; height: 24px;">
									<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 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( 'Live', 'changeloger' ); ?></span>
								<span class="cha-promo-stat-label"><?php esc_html_e( 'Activity Timeline', '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 green">
							<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" 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( 'Complete Analytics Toolkit', 'changeloger' ); ?></h2>
						<p class="cha-promo-section-subtitle"><?php esc_html_e( 'Everything you need to understand and optimize your changelog ecosystem', '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 blue">
									<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor" style="width: 24px; height: 24px;">
										<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A2 2 0 013 12V7a4 4 0 014-4z" />
									</svg>
								</div>
								<div class="cha-promo-module-info">
									<h3 class="cha-promo-module-title"><?php esc_html_e( 'Release Activity', 'changeloger' ); ?></h3>
									<p class="cha-promo-module-desc"><?php esc_html_e( 'Track release trends with monthly activity charts and product breakdowns.', 'changeloger' ); ?></p>
								</div>
							</div>
							<div class="cha-promo-module-features">
								<div class="cha-promo-module-feature">
									<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" 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( '12-month release activity chart', 'changeloger' ); ?>
								</div>
								<div class="cha-promo-module-feature">
									<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" 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( 'Releases per product breakdown', 'changeloger' ); ?>
								</div>
								<div class="cha-promo-module-feature">
									<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" 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( 'Badge distribution analysis', '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" width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor" style="width: 24px; height: 24px;">
										<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
									</svg>
								</div>
								<div class="cha-promo-module-info">
									<h3 class="cha-promo-module-title"><?php esc_html_e( 'Feedback Insights', 'changeloger' ); ?></h3>
									<p class="cha-promo-module-desc"><?php esc_html_e( 'Understand feedback patterns with status, category, and voting metrics.', 'changeloger' ); ?></p>
								</div>
							</div>
							<div class="cha-promo-module-features">
								<div class="cha-promo-module-feature">
									<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" 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( 'Feedback status distribution', 'changeloger' ); ?>
								</div>
								<div class="cha-promo-module-feature">
									<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" 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( 'Top voted feedback ranking', 'changeloger' ); ?>
								</div>
								<div class="cha-promo-module-feature">
									<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" 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( 'Category-wise analytics', 'changeloger' ); ?>
								</div>
							</div>
						</div>

						<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" width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor" style="width: 24px; height: 24px;">
										<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z" />
									</svg>
								</div>
								<div class="cha-promo-module-info">
									<h3 class="cha-promo-module-title"><?php esc_html_e( 'Subscriber Analytics', 'changeloger' ); ?></h3>
									<p class="cha-promo-module-desc"><?php esc_html_e( 'Monitor your subscriber growth with per-product breakdowns.', 'changeloger' ); ?></p>
								</div>
							</div>
							<div class="cha-promo-module-features">
								<div class="cha-promo-module-feature">
									<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" 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( 'Confirmed vs. pending overview', 'changeloger' ); ?>
								</div>
								<div class="cha-promo-module-feature">
									<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" 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( 'Subscribers per product chart', 'changeloger' ); ?>
								</div>
								<div class="cha-promo-module-feature">
									<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" 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( 'Subscriber growth metrics', '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" width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor" style="width: 24px; height: 24px;">
										<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-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( 'Roadmap Progress', 'changeloger' ); ?></h3>
									<p class="cha-promo-module-desc"><?php esc_html_e( 'Visualize roadmap progress and completion rates at a glance.', 'changeloger' ); ?></p>
								</div>
							</div>
							<div class="cha-promo-module-features">
								<div class="cha-promo-module-feature">
									<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" 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( 'Roadmap completion percentage', 'changeloger' ); ?>
								</div>
								<div class="cha-promo-module-feature">
									<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" 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 column breakdown', 'changeloger' ); ?>
								</div>
								<div class="cha-promo-module-feature">
									<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" 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( 'Recent activity timeline', 'changeloger' ); ?>
								</div>
							</div>
						</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" style="width: 18px; height: 18px;">
							<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( 'Unlock the Full Analytics Dashboard', 'changeloger' ); ?></h2>
					<p class="cha-promo-cta-desc"><?php esc_html_e( 'Get data-driven insights to optimize your releases, feedback pipeline, and subscriber engagement.', '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" 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( '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( 'All Pro 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>
		<?php
	}
}
