<?php
/**
 * Upsell page for content types that require the Pro or Dialogue plan (courses, modules).
 *
 * @var string $content_type 'courses' or 'modules'
 * @package SlideMind
 * @since 3.0.0
 */

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

$upgrade_url = \SlideMind\Core\FeatureGate::get_upgrade_url();

$titles = [
	'courses' => __( 'Courses', 'slidemind' ),
	'modules' => __( 'Modules', 'slidemind' ),
];
$descriptions = [
	'courses' => __( 'Courses let you organize slides under a shared context. Define a theme, objectives, and instructions once — every module and slide inside inherits them automatically.', 'slidemind' ),
	'modules' => __( 'Modules group slides within a course. Add module-level instructions that combine with the course context, so each slide gets rich, layered prompts without repetition.', 'slidemind' ),
];

$title = $titles[ $content_type ] ?? $content_type;
$desc  = $descriptions[ $content_type ] ?? '';
?>
<div class="sm-wrap">
	<div class="sm-header">
		<h1><?php echo esc_html( $title ); ?></h1>
	</div>

	<div class="sm-teaser">
		<div class="sm-teaser__overlay">
			<div class="sm-teaser__card">
				<span class="dashicons dashicons-lock sm-teaser__lock-icon"></span>
				<h2 class="sm-teaser__title">
					<?php
					/* translators: %s: content type name (Courses or Modules) */
					printf( esc_html__( 'Unlock %s', 'slidemind' ), esc_html( $title ) );
					?>
				</h2>
				<p class="sm-teaser__desc">
					<?php echo esc_html( $desc ); ?>
				</p>
				<?php if ( $upgrade_url ) : ?>
					<a href="<?php echo esc_url( $upgrade_url ); ?>" class="sm-btn sm-btn-primary sm-teaser__cta-btn">
						<?php esc_html_e( 'Upgrade to Pro', 'slidemind' ); ?>
						<span class="dashicons dashicons-arrow-right-alt2"></span>
					</a>
				<?php endif; ?>
				<p class="sm-teaser__sub">
					<?php esc_html_e( 'Available with the Pro plan.', 'slidemind' ); ?>
				</p>
			</div>
		</div>

		<!-- Blurred preview -->
		<div class="sm-teaser__preview" aria-hidden="true">
			<div class="sm-card" style="padding: 24px;">
				<div style="display: flex; gap: 16px; margin-bottom: 16px;">
					<div style="flex: 1; height: 40px; background: var(--sm-gray-100); border-radius: 6px;"></div>
					<div style="width: 120px; height: 40px; background: var(--sm-primary-light); border-radius: 6px;"></div>
				</div>
				<table class="sm-table">
					<thead>
						<tr>
							<th style="width: 40px;">#</th>
							<th><?php esc_html_e( 'Title', 'slidemind' ); ?></th>
							<th><?php esc_html_e( 'Items', 'slidemind' ); ?></th>
							<th><?php esc_html_e( 'Actions', 'slidemind' ); ?></th>
						</tr>
					</thead>
					<tbody>
						<?php for ( $i = 1; $i <= 3; $i++ ) : ?>
							<tr>
								<td><?php echo (int) $i; ?></td>
								<td><span style="display: inline-block; width: <?php echo (int) ( 80 + $i * 20 ); ?>px; height: 14px; background: var(--sm-gray-200); border-radius: 3px;"></span></td>
								<td><span style="display: inline-block; width: 30px; height: 14px; background: var(--sm-gray-200); border-radius: 3px;"></span></td>
								<td><span style="display: inline-block; width: 60px; height: 14px; background: var(--sm-gray-200); border-radius: 3px;"></span></td>
							</tr>
						<?php endfor; ?>
					</tbody>
				</table>
			</div>
		</div>
	</div>
</div>
