<?php
/**
 * Tutorials tab.
 *
 * @package Panelra
 */

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

$pnlrdb_tutorial_url = 'https://www.youtube.com/watch?v=O-Xx98nyBu4';
$pnlrdb_embed_url    = 'https://www.youtube.com/embed/O-Xx98nyBu4?rel=0';
$pnlrdb_embed_html   = wp_oembed_get( $pnlrdb_tutorial_url, array( 'width' => 960 ) );
?>

<div class="ap773-card">
	<div class="ap773-header">
		<h2 class="ap773-section-title"><?php esc_html_e( 'Video Tutorial', 'panelra-dashboard-builder' ); ?></h2>
		<p class="ap773-section-desc"><?php esc_html_e( 'Learn how to set up Panelra, customize the admin interface, and build your dashboard faster with the official video walkthrough.', 'panelra-dashboard-builder' ); ?></p>
	</div>

	<div style="display:grid;grid-template-columns:minmax(0,1fr);gap:18px;max-width:1100px;">
		<div style="background:#fff;border:1px solid #e2e8f0;border-radius:18px;padding:18px;box-shadow:0 10px 30px rgba(15,23,42,.05);">
			<div style="position:relative;width:100%;padding-top:56.25%;overflow:hidden;border-radius:14px;background:#0f172a;">
				<?php if ( ! empty( $pnlrdb_embed_html ) ) : ?>
					<div style="position:absolute;inset:0;">
						<?php echo $pnlrdb_embed_html; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
					</div>
				<?php else : ?>
					<iframe src="<?php echo esc_url( $pnlrdb_embed_url ); ?>" title="<?php esc_attr_e( 'Panelra video tutorial', 'panelra-dashboard-builder' ); ?>" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen style="position:absolute;inset:0;width:100%;height:100%;border:0;"></iframe>
				<?php endif; ?>
			</div>

			<div style="display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-top:16px;">
				<div>
					<h3 style="margin:0 0 6px;font-size:16px;color:#0f172a;"><?php esc_html_e( 'Start here', 'panelra-dashboard-builder' ); ?></h3>
					<p style="margin:0;color:#475569;font-size:13px;line-height:1.6;"><?php esc_html_e( 'This tutorial walks through installation, the main tabs, and the custom dashboard workflow so new users can get productive quickly.', 'panelra-dashboard-builder' ); ?></p>
				</div>
				<div style="display:flex;flex-wrap:wrap;gap:10px;">
					<a class="pnlrdb-youtube-button" href="<?php echo esc_url( $pnlrdb_tutorial_url ); ?>" target="_blank" rel="noopener noreferrer" aria-label="<?php esc_attr_e( 'Watch the official Panelra tutorial on YouTube', 'panelra-dashboard-builder' ); ?>">
						<svg class="pnlrdb-youtube-button__icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
							<path d="M23.5 6.2c-.3-1.2-1.2-2.1-2.4-2.4C19 3.2 12 3.2 12 3.2s-7 0-9.1.6C1.7 4.1.8 5 .5 6.2 0 8.4 0 12 0 12s0 3.6.5 5.8c.3 1.2 1.2 2.1 2.4 2.4 2.1.6 9.1.6 9.1.6s7 0 9.1-.6c1.2-.3 2.1-1.2 2.4-2.4.5-2.2.5-5.8.5-5.8s0-3.6-.5-5.8zM9.6 15.8V8.2l6.3 3.8-6.3 3.8z" />
						</svg>
						<span><?php esc_html_e( 'Watch on YouTube', 'panelra-dashboard-builder' ); ?></span>
					</a>
					<a class="button" href="https://wordpress.org/plugins/panelra-dashboard-builder/" target="_blank" rel="noopener noreferrer"><?php esc_html_e( 'Plugin page', 'panelra-dashboard-builder' ); ?></a>
				</div>
			</div>
		</div>

		<div style="background:#f8fafc;border:1px solid #e2e8f0;border-radius:18px;padding:18px;">
			<h3 style="margin:0 0 12px;font-size:15px;color:#0f172a;"><?php esc_html_e( 'Quick start', 'panelra-dashboard-builder' ); ?></h3>
			<ol style="margin:0;padding-left:18px;color:#334155;line-height:1.8;font-size:13px;">
				<li><?php esc_html_e( 'Open the Appearance tab to adjust colors, typography, and dark mode.', 'panelra-dashboard-builder' ); ?></li>
				<li><?php esc_html_e( 'Use Menu, Admin Bar, Notices, and Roles to simplify the backend for clients and teams.', 'panelra-dashboard-builder' ); ?></li>
				<li><?php esc_html_e( 'Visit Dashboard Builder to create a custom control panel and replace the default dashboard widgets.', 'panelra-dashboard-builder' ); ?></li>
			</ol>
		</div>
	</div>
</div>
