<?php
/**
 * Landing Page Template
 *
 * @package Scanshow
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}
?>
<div class="wrap">
	<p class="description">
		Welcome to 3D Scan & Show Plugin! Follow these simple steps to get started.
	</p>

	<div class="stw-admin-content stw-quick-start-steps" id="stw-landing-page">
		<!-- Step 1: Connect -->
		<div class="stw-step-card">
			<h2><?php esc_html_e( 'Connect to STW Platform', '3d-scan-and-show' ); ?></h2>
			<p>
				<?php esc_html_e( 'Connect your WooCommerce store to the Scan the World platform to access 3D models.', '3d-scan-and-show' ); ?>
			</p>
			<div id="connection-status">
				<p class="loading"><?php esc_html_e( 'Checking connection...', '3d-scan-and-show' ); ?></p>
			</div>
		</div>

		<!-- Step 2: Buy Plan -->
		<div class="stw-step-card">
			<h2><?php esc_html_e( 'Choose Your Plan', '3d-scan-and-show' ); ?></h2>
			<p>
				<?php esc_html_e( 'Select a subscription plan that fits your needs. You can upgrade or downgrade anytime.', '3d-scan-and-show' ); ?>
			</p>
			<div id="plan-status">
				<p class="loading"><?php esc_html_e( 'Loading plan information...', '3d-scan-and-show' ); ?></p>
			</div>
			<div class="stw-step-actions">
				<button class="button button-primary" id="view-plans-btn">
					<?php esc_html_e( 'View Plans & Pricing', '3d-scan-and-show' ); ?>
				</button>
				<button class="button" id="go-to-settings-btn"><?php esc_html_e( 'View Settings', '3d-scan-and-show' ); ?></button>
			</div>
		</div>

		<!-- Step 3: Add Block to Theme -->
		<div class="stw-step-card">
			<h2><?php esc_html_e( 'Add STW Block to Single Product Page', '3d-scan-and-show' ); ?></h2>
			<p>
				<?php esc_html_e( 'Add the STW 3D viewer block to your single product template. The iframe will automatically display linked 3D models.', '3d-scan-and-show' ); ?>
			</p>
			<div class="stw-step-actions">
				<button class="button button-primary" id="edit-product-template-btn">
					<?php esc_html_e( 'Edit Single Product Template', '3d-scan-and-show' ); ?>
				</button>
			</div>
			<p style="margin-top: 15px; font-size: 13px; color: #666;">
				<strong><?php esc_html_e( 'Tip:', '3d-scan-and-show' ); ?></strong> <?php esc_html_e( 'In the template editor, click the "+" button to add a block, search for "STW", and add the "STW 3D Embed" block to your product page.', '3d-scan-and-show' ); ?>
			</p>
		</div>

		<!-- Step 4: Link Your Products -->
		<div class="stw-step-card">
			<h2><?php esc_html_e( 'Link Your Products', '3d-scan-and-show' ); ?></h2>
			<p>
				<?php esc_html_e( 'Go to the Dashboard to connect your WooCommerce products with 3D models from Scan the World.', '3d-scan-and-show' ); ?>
			</p>
			<div class="stw-step-actions">
				<button class="button button-primary" id="go-to-dashboard-btn">
					<?php esc_html_e( 'Go to Dashboard', '3d-scan-and-show' ); ?>
				</button>
			</div>
		</div>
	</div>
</div>

