<?php
// If this file is called directly, abort.
if ( ! defined( 'ABSPATH' ) ) {
	exit;
}
?>
<div class="vidplex__page overview__page">
	<ul class="stats__cards">
		<li class="stat__item">
			<i class="stat__icon">
				<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
					<g clip-path="url(#clip0_1251_98416)">
						<path fill-rule="evenodd" clip-rule="evenodd" d="M9 0C5.96243 0 3.5 2.46243 3.5 5.5C3.5 8.53757 5.96243 11 9 11C12.0376 11 14.5 8.53757 14.5 5.5C14.5 2.46243 12.0376 0 9 0ZM5.5 5.5C5.5 3.567 7.067 2 9 2C10.933 2 12.5 3.567 12.5 5.5C12.5 7.433 10.933 9 9 9C7.067 9 5.5 7.433 5.5 5.5Z" fill="currentColor" />
						<path d="M15.5 0C14.9477 0 14.5 0.447715 14.5 1C14.5 1.55228 14.9477 2 15.5 2C17.433 2 19 3.567 19 5.5C19 7.433 17.433 9 15.5 9C14.9477 9 14.5 9.44771 14.5 10C14.5 10.5523 14.9477 11 15.5 11C18.5376 11 21 8.53757 21 5.5C21 2.46243 18.5376 0 15.5 0Z" fill="currentColor" />
						<path d="M19.0837 14.0157C19.3048 13.5096 19.8943 13.2786 20.4004 13.4997C22.5174 14.4246 24 16.538 24 19V21C24 21.5523 23.5523 22 23 22C22.4477 22 22 21.5523 22 21V19C22 17.3613 21.0145 15.9505 19.5996 15.3324C19.0935 15.1113 18.8625 14.5217 19.0837 14.0157Z" fill="currentColor" />
						<path d="M6 13C2.68629 13 0 15.6863 0 19V21C0 21.5523 0.447715 22 1 22C1.55228 22 2 21.5523 2 21V19C2 16.7909 3.79086 15 6 15H12C14.2091 15 16 16.7909 16 19V21C16 21.5523 16.4477 22 17 22C17.5523 22 18 21.5523 18 21V19C18 15.6863 15.3137 13 12 13H6Z" fill="currentColor" />
					</g>
					<defs>
						<clipPath id="clip0_1251_98416">
							<rect width="24" height="24" fill="white" />
						</clipPath>
					</defs>
				</svg>
			</i>
			<div class="numbers">
				<h3><?php echo esc_html( \Vidplex\Store::get_instance()->channels->get_linked_channel_count() ); ?></h3>
				<p class="muted-text"><?php esc_html_e( 'Linked Channels', 'vidplex' ); ?></p>
			</div>
		</li>

		<li class="stat__item">
			<i class="stat__icon">
				<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
					<path d="M23 7L16 12L23 17V7Z" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" />
					<path d="M14 5H3C1.89543 5 1 5.89543 1 7V17C1 18.1046 1.89543 19 3 19H14C15.1046 19 16 18.1046 16 17V7C16 5.89543 15.1046 5 14 5Z" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" />
				</svg>
			</i>
			<div class="numbers">
				<h3><?php echo esc_html( \Vidplex\Store::get_instance()->videos->get_active_videos_count() ); ?></h3>
				<p class="muted-text"><?php esc_html_e( 'Total Videos', 'vidplex' ); ?></p>
			</div>
		</li>

		<li class="stat__item">
			<i class="stat__icon">
				<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
					<path d="M12 8C16.9706 8 21 6.65685 21 5C21 3.34315 16.9706 2 12 2C7.02944 2 3 3.34315 3 5C3 6.65685 7.02944 8 12 8Z" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" />
					<path d="M21 12C21 13.66 17 15 12 15C7 15 3 13.66 3 12" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" />
					<path d="M3 5V19C3 20.66 7 22 12 22C17 22 21 20.66 21 19V5" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" />
				</svg>
			</i>
			<div class="numbers">
				<h3><?php echo esc_html( \Vidplex\Store::get_instance()->videos->get_active_videos_count() ); ?></h3>
				<p class="muted-text"><?php esc_html_e( 'Cached Videos', 'vidplex' ); ?></p>
			</div>
		</li>

		<!-- <li class="stat__item">
			<i class="stat__icon">
				<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
					<path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" />
					<path d="M12 6V12L16 14" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" />
				</svg>
			</i>

			<div class="numbers">
				<h3>3</h3>
				<p class="muted-text">
				<?php
				// esc_html_e( 'Last Sync', 'vidplex' );
				?>
										</p>
			</div>
		</li> -->
	</ul>

	<div class="intro">
		<h4><?php esc_html_e( 'Build a Powerful YouTube Video Hub 🎬', 'vidplex' ); ?></h4>
		<p><?php esc_html_e( 'Vidplex transforms your website into a dynamic YouTube video platform. Connect channels, sync videos automatically, and showcase them with modern layouts that keep visitors engaged.', 'vidplex' ); ?></p>
	</div>

	<ul class="features">
		<li>
			<h4>🔗 <?php esc_html_e( 'Connect Your YouTube Channel', 'vidplex' ); ?></h4>
			<p>
				<?php esc_html_e( 'Link your YouTube channel in seconds and automatically import videos, thumbnails, titles, and metadata directly to your site.', 'vidplex' ); ?>
			</p>
		</li>

		<li>
			
			<h4>⚡ <?php esc_html_e( 'Smart Video Sync & Caching', 'vidplex' ); ?></h4>
			<p>
				<?php esc_html_e( 'Keep your content up to date with scheduled syncing while caching videos for faster loading and better performance.', 'vidplex' ); ?>
			</p>
		</li>


		<li>
			<h4>🎨 <?php esc_html_e( 'Beautiful Video Layouts', 'vidplex' ); ?></h4>
			<p>
				<?php esc_html_e( 'Display your videos using responsive galleries, sliders, featured layouts, background videos, and sticky video players.', 'vidplex' ); ?>
			</p>
		</li>

		<li>
			<h4>📺 <?php esc_html_e( 'Channel & Video Metadata', 'vidplex' ); ?></h4>
			<p>
				<?php esc_html_e( 'Automatically fetch and display channel information including titles, handles, descriptions, and subscribe links.', 'vidplex' ); ?>
			</p>
		</li>

		<li>
			<h4>🚀 <?php esc_html_e( 'Interactive Viewing Experience', 'vidplex' ); ?></h4>
			<p>
				<?php esc_html_e( 'Enhance engagement with video popups, overlay content, carousels, and featured video sections.', 'vidplex' ); ?>
			</p>
		</li>
	</ul>

	<section class="getting-started">
		<h4> <?php esc_html_e( 'Get Started in Minutes', 'vidplex' ); ?> </h4>
		<ul>
			<li>
				<h5><?php esc_html_e( '1. Add your API Key', 'vidplex' ); ?></h5>
				<p><?php esc_html_e( 'Enable YouTube data access to fetch videos.', 'vidplex' ); ?></p>
			</li>

			<li>
				<h5><?php esc_html_e( '2. Link Your Channel', 'vidplex' ); ?></h5>
				<p><?php esc_html_e( 'Import videos and manage them directly from the dashboard.', 'vidplex' ); ?></p>
			</li>
			<li>
				<h5><?php esc_html_e( '3. Customize Display', 'vidplex' ); ?></h5>
				<p><?php esc_html_e( 'Use blocks and layout settings to showcase your videos beautifully.', 'vidplex' ); ?></p>
			</li>
		</ul>
	</section>

	<?php
	if ( ! vidplex_premium_access() ) {
		?>
		<section class="upsell__notice">
			<div class="pro__crown">
				<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
					<path d="M1.33331 12.6667H14.6666V14H1.33331V12.6667ZM1.33331 3.33334L4.66665 5.66668L7.99998 1.33334L11.3333 5.66668L14.6666 3.33334V11.3333H1.33331V3.33334ZM2.66665 5.89401V10H13.3333V5.89401L11.0533 7.49001L7.99998 3.52001L4.94665 7.49001L2.66665 5.89401Z" />
				</svg>
			</div>
			<div>
				<h3><?php esc_html_e( 'Upgrade to Vidplex Pro', 'vidplex' ); ?></h3>
				<p><?php esc_html_e( 'Get unlimited channels, advanced caching, priority support, and more.', 'vidplex' ); ?></p>
				<a class="upsell__btn" href="<?php echo esc_url( vidplex_upsell_url() ); ?>" target="_blank"><?php esc_html_e( 'View Pricing Plans', 'vidplex' ); ?></a>
			</div>
		</section>
		<?php
	}
	?>
</div>