<?php
if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

if ( ! function_exists( 'misticease_render_upgrade_tab' ) ) {
	function misticease_render_upgrade_tab() {
		$trial_url = 'https://checkout.freemius.com/plugin/20584/plan/34248/?trial=paid';
		$demo_url  = 'https://mitum.me/misticease-arc/';

		$image_dir_path = plugin_dir_path( __FILE__ ) . '../img/';
		$image_dir_url  = plugin_dir_url( __FILE__ ) . '../img/';

		$hero_filename = '01_Image.jpg';
		$hero_path     = $image_dir_path . $hero_filename;
		$hero_url      = file_exists( $hero_path ) ? $image_dir_url . $hero_filename : '';

		$style_path    = plugin_dir_path( __FILE__ ) . 'misticease-ug-tab.css';
		$style_url     = plugin_dir_url( __FILE__ ) . 'misticease-ug-tab.css';
		$style_version = file_exists( $style_path ) ? (string) filemtime( $style_path ) : '1.0.0';

		wp_enqueue_style( 'misticease-upgrade-tab', $style_url, array(), $style_version );
		wp_print_styles( 'misticease-upgrade-tab' );

		$scene_cards = array(
			array(
				'filename'    => '02_Image.jpg',
				/* translators: MisticEase Palette is the in-editor panel where uploaded files can be previewed and inserted. */
				'title'       => __( 'Work in the editor Palette', 'misticease' ),
				'description' => __( 'Upload files, preview them, and copy file codes without leaving the editor.', 'misticease' ),
			),
			array(
				'filename'    => '03_Image.jpg',
				'title'       => __( 'Preview files before publishing', 'misticease' ),
				/* translators: MisticEase Palette is the in-editor panel where uploaded files can be previewed and inserted. */
				'description' => __( 'Open uploaded files in the Palette and review them before placing them on the page.', 'misticease' ),
			),
			array(
				'filename'    => '04_Image.jpg',
				'title'       => __( 'Open images, videos, and documents together', 'misticease' ),
				'description' => __( 'Create pages where different media types can appear in movable pop-up windows.', 'misticease' ),
			),
		);

		$feature_cards = array(
			array(
				'title'       => __( 'Drag-and-drop uploads', 'misticease' ),
				/* translators: MisticEase Palette is the in-editor panel where uploaded files can be previewed and inserted. */
				'description' => __( 'Add supported files by dropping them into the Palette or file manager.', 'misticease' ),
			),
			array(
				'title'       => __( 'Unique file codes', 'misticease' ),
				'description' => __( 'Each uploaded file receives a file code that you can paste into the editor to create a pop-up link.', 'misticease' ),
			),
			array(
				'title'       => __( 'Slash Markup', 'misticease' ),
				'description' => __( 'Add short prefixes to control thumbnail width, pop-up width, captions, text links, and more.', 'misticease' ),
			),
			array(
				'title'       => __( 'More than 20 file formats', 'misticease' ),
				'description' => __( 'Handle images, video, audio, PDFs, text files, and office documents in one workflow.', 'misticease' ),
			),
			array(
				'title'       => __( 'Dedicated file manager', 'misticease' ),
				'description' => __( 'Review uploaded files, copy file codes, download files, and delete uploaded files from one panel.', 'misticease' ),
			),
			array(
				'title'       => __( 'Network-wide control', 'misticease' ),
				'description' => __( 'Manage storage rules and upload limits across multisite networks from one network panel.', 'misticease' ),
			),
		);
		?>
		<div
			id="misticease-upg"
			class="misticease-upg"
		>
			<section class="misticease-hero">
				<div>
					<p class="misticease-hero__title"><?php esc_html_e( 'Upgrade to MisticEase Arc', 'misticease' ); ?></p>
					<h1 class="misticease-hero__lead"><?php esc_html_e( 'WordPress gives creators a flexible publishing canvas.', 'misticease' ); ?></h1>
					<p class="misticease-hero__sub"><?php esc_html_e( 'MisticEase Arc helps creators build media-rich WordPress pages with uploaded files, quick previews, and file codes that are ready for the editor.', 'misticease' ); ?></p>
					<div class="misticease-cta">
						<a
							href="<?php echo esc_url( $demo_url ); ?>"
							class="button misticease-arc-ghost"
							target="_blank"
							rel="noopener noreferrer"
						><?php esc_html_e( 'Open demo page', 'misticease' ); ?></a>
					</div>
				</div>
				<div class="misticease-hero__art" aria-hidden="true">
					<?php if ( $hero_url ) : ?>
						<img class="misticease-hero__image" src="<?php echo esc_url( $hero_url ); ?>" alt="">
					<?php endif; ?>
				</div>
			</section>

			<section class="misticease-flow">
				<p class="misticease-flow__line"><?php esc_html_e( 'Drop files, copy a file code, paste it into the editor, save, and publish.', 'misticease' ); ?></p>
				<p class="misticease-flow__sub"><?php esc_html_e( 'Upload files, copy file codes, paste them into the editor, and publish richer media pages.', 'misticease' ); ?></p>
			</section>

			<section class="misticease-section">
				<h2 class="misticease-section__title"><?php esc_html_e( 'What Arc adds', 'misticease' ); ?></h2>
				<div class="misticease-cardgrid misticease-cardgrid--scenes">
					<?php foreach ( $scene_cards as $scene ) : ?>
						<?php
						$scene_path = $image_dir_path . $scene['filename'];
						$scene_url  = file_exists( $scene_path ) ? $image_dir_url . $scene['filename'] : '';
						?>
						<div class="misticease-scene">
							<div class="misticease-scene__media<?php echo $scene_url ? '' : ' is-placeholder'; ?>">
								<?php if ( $scene_url ) : ?>
									<img class="misticease-scene__image" src="<?php echo esc_url( $scene_url ); ?>" alt="">
								<?php else : ?>
									<?php echo esc_html( $scene['filename'] ); ?>
								<?php endif; ?>
							</div>
							<h3><?php echo esc_html( $scene['title'] ); ?></h3>
							<p><?php echo esc_html( $scene['description'] ); ?></p>
						</div>
					<?php endforeach; ?>
				</div>
			</section>

			<section class="misticease-section">
				<h2 class="misticease-section__title"><?php esc_html_e( 'Core features in MisticEase Arc', 'misticease' ); ?></h2>
				<div class="misticease-cardgrid misticease-cardgrid--features">
					<?php foreach ( $feature_cards as $card ) : ?>
						<div class="misticease-card">
							<h3><?php echo esc_html( $card['title'] ); ?></h3>
							<p><?php echo esc_html( $card['description'] ); ?></p>
						</div>
					<?php endforeach; ?>
				</div>
			</section>

			<div class="misticease-wordpress-note">
				<strong><?php esc_html_e( 'One workflow for richer media pages.', 'misticease' ); ?></strong>
				<?php esc_html_e( 'File upload, display control, pop-up viewing, and media management work together in one publishing workflow.', 'misticease' ); ?>
			</div>

			<section class="misticease-pricing" id="misticease-pricing">
				<div class="misticease-plan-grid">
					<div class="misticease-plan misticease-plan--featured">
						<p class="misticease-plan__eyebrow"><?php esc_html_e( 'Annual license', 'misticease' ); ?></p>
						<p class="misticease-plan__tagline"><?php esc_html_e( 'Advanced file handling and display control in one publishing workflow.', 'misticease' ); ?></p>
						<h3 class="misticease-plan__name"><?php esc_html_e( 'Start MisticEase Arc', 'misticease' ); ?></h3>
						<p class="misticease-plan__desc"><?php esc_html_e( 'A 10-day cancellation window is included before annual billing begins so you can confirm that MisticEase Arc works properly in your environment and fits your intended use. Cancel within 10 days to avoid billing.', 'misticease' ); ?></p>

						<div class="misticease-plan__price-list">
							<div class="misticease-plan__price-row">
								<span class="misticease-plan__price-label"><?php esc_html_e( '1 site', 'misticease' ); ?></span>
								<span class="misticease-plan__price-value"><?php esc_html_e( '$59.99 / year', 'misticease' ); ?></span>
							</div>
							<div class="misticease-plan__price-row">
								<span class="misticease-plan__price-label"><?php esc_html_e( '5 sites', 'misticease' ); ?></span>
								<span class="misticease-plan__price-value"><?php esc_html_e( '$229.99 / year', 'misticease' ); ?></span>
							</div>
							<div class="misticease-plan__price-row">
								<span class="misticease-plan__price-label"><?php esc_html_e( '10 sites', 'misticease' ); ?></span>
								<span class="misticease-plan__price-value"><?php esc_html_e( '$399.99 / year', 'misticease' ); ?></span>
							</div>
						</div>

						<p class="misticease-plan__meta"><?php esc_html_e( 'Upgrade when you need file upload, file-code links, Slash Markup, broader media support, and multisite control in one tool.', 'misticease' ); ?></p>

						<a
							href="<?php echo esc_url( $trial_url ); ?>"
							class="button misticease-arc-accent"
							target="_blank"
							rel="noopener noreferrer"
						><?php esc_html_e( 'Open checkout', 'misticease' ); ?></a>
					</div>
				</div>

				<div class="misticease-note">
					<strong><?php esc_html_e( 'For multisite networks:', 'misticease' ); ?></strong>
					<?php esc_html_e( 'Each subsite uses one site license. To activate MisticEase Arc on all sites in a network, choose a license that covers the total number of subsites.', 'misticease' ); ?>
				</div>

				<p class="misticease-footer-note"><?php esc_html_e( 'Checkout opens on a secure payment page. After checkout, you can download MisticEase Arc and install it manually.', 'misticease' ); ?></p>
			</section>
		</div>
		<?php
	}
}