<?php
/**
 * Theme Get Started / Upsell Page
 *
 * @package FASHION_DESIGNER_STUDIO
 */

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

/**
 * Add theme page to admin menu
 */
add_action( 'admin_menu', 'fashion_designer_studio_add_theme_page' );
function fashion_designer_studio_add_theme_page() {
    add_theme_page(
        __( 'Upgrade to PRO', 'fashion-designer-studio' ),
        __( 'Upgrade to PRO', 'fashion-designer-studio' ),
        'manage_options',
        'fashion-designer-studio-pro',
        'fashion_designer_studio_pro_page_callback'
    );
}

/**
 * Render theme Get Started page
 */
function fashion_designer_studio_pro_page_callback() {
	$fashion_designer_studio_theme_name_clean = strtolower( preg_replace( '#[^a-zA-Z]#', '', wp_get_theme()->get( 'Name' ) ) );
	$fashion_designer_studio_wizard_page_slug = apply_filters( $fashion_designer_studio_theme_name_clean . '_theme_setup_wizard_fashion_designer_studio_page_slug', $fashion_designer_studio_theme_name_clean . '-wizard' );
	$fashion_designer_studio_demo_url         = admin_url( 'themes.php?page=' . $fashion_designer_studio_wizard_page_slug );
	?>
	<div class="wrap ot-pro-wrap">
		<h1><?php esc_html_e( 'Get Started with Fashion Designer Studio 🚀', 'fashion-designer-studio' ); ?></h1>

		<div class="ot-pro-hero">
			<div class="hero-content">
				<div class="hero-left">
					<h2><?php esc_html_e( 'Build Your Professional Website Today', 'fashion-designer-studio' ); ?></h2>
					<p class="subtitle"><?php esc_html_e( 'Get access to premium features, advanced layouts, demo import, and priority support', 'fashion-designer-studio' ); ?></p>
					<div class="button-group">
						<a class="button button-hero theme-install" href="<?php echo esc_url( $fashion_designer_studio_demo_url ); ?>">
							<span class="dashicons dashicons-download"></span>
							<?php esc_html_e( 'Demo Import', 'fashion-designer-studio' ); ?>
						</a>
						<a href="<?php echo esc_url( FASHION_DESIGNER_STUDIO_LIVE_DEMO ); ?>" target="_blank" class="button button-hero button-demo">
							<span class="dashicons dashicons-visibility"></span>
							<?php esc_html_e( 'Live Demo', 'fashion-designer-studio' ); ?>
						</a>
						<a href="<?php echo esc_url( FASHION_DESIGNER_STUDIO_BUY_PRO ); ?>" target="_blank" class="button button-primary button-hero button-pro">
							<span class="dashicons dashicons-star-filled"></span>
							<?php esc_html_e( 'Get Pro Theme', 'fashion-designer-studio' ); ?>
						</a>
						<a href="<?php echo esc_url( FASHION_DESIGNER_STUDIO_FREE_DOC ); ?>" target="_blank" class="button button-hero button-docs">
							<span class="dashicons dashicons-book"></span>
							<?php esc_html_e( 'Documentation', 'fashion-designer-studio' ); ?>
						</a>
						<a href="<?php echo esc_url( FASHION_DESIGNER_STUDIO_BUNDLE_LINK ); ?>" target="_blank" class="button button-hero button-bundle">
							<span class="dashicons dashicons-cart"></span>
							<?php esc_html_e( 'WordPress Theme Bundle', 'fashion-designer-studio' ); ?>
						</a>
					</div>
				</div>
				<div class="hero-right">
					<img src="<?php echo esc_url( get_template_directory_uri() ); ?>/screenshot.png" alt="<?php esc_attr_e( 'Fashion Designer Studio Theme Screenshot', 'fashion-designer-studio' ); ?>" class="theme-screenshot">
				</div>
			</div>
		</div>

		<div class="ot-pro-features">
			<h2><?php esc_html_e( 'Why Upgrade to Pro?', 'fashion-designer-studio' ); ?></h2>

			<div class="feature-grid">
				<div class="feature-box">
					<span class="dashicons dashicons-layout"></span>
					<h3><?php esc_html_e( 'Different Styling Options', 'fashion-designer-studio' ); ?></h3>
					<p><?php esc_html_e( 'Choose from multiple color schemes and styling options to match your brand identity.', 'fashion-designer-studio' ); ?></p>
				</div>

				<div class="feature-box">
					<span class="dashicons dashicons-admin-customizer"></span>
					<h3><?php esc_html_e( 'Section Reordering Option', 'fashion-designer-studio' ); ?></h3>
					<p><?php esc_html_e( 'Rearrange homepage sections in any order to best showcase your services.', 'fashion-designer-studio' ); ?></p>
				</div>

				<div class="feature-box">
					<span class="dashicons dashicons-editor-table"></span>
					<h3><?php esc_html_e( 'Footer Builder', 'fashion-designer-studio' ); ?></h3>
					<p><?php esc_html_e( 'Create custom footers with advanced widgets and flexible column layouts.', 'fashion-designer-studio' ); ?></p>
				</div>

				<div class="feature-box">
					<span class="dashicons dashicons-art"></span>
					<h3><?php esc_html_e( 'Typography Controls', 'fashion-designer-studio' ); ?></h3>
					<p><?php esc_html_e( 'Full control over fonts, sizes, and text styling across all sections of your site.', 'fashion-designer-studio' ); ?></p>
				</div>

				<div class="feature-box">
					<span class="dashicons dashicons-cart"></span>
					<h3><?php esc_html_e( 'WooCommerce Styling', 'fashion-designer-studio' ); ?></h3>
					<p><?php esc_html_e( 'Advanced WooCommerce integration with custom product and service page layouts.', 'fashion-designer-studio' ); ?></p>
				</div>

				<div class="feature-box">
					<span class="dashicons dashicons-admin-tools"></span>
					<h3><?php esc_html_e( 'Advanced Options', 'fashion-designer-studio' ); ?></h3>
					<p><?php esc_html_e( 'Access advanced theme settings to achieve greater customization and control.', 'fashion-designer-studio' ); ?></p>
				</div>

				<div class="feature-box">
					<span class="dashicons dashicons-performance"></span>
					<h3><?php esc_html_e( 'Performance Optimized', 'fashion-designer-studio' ); ?></h3>
					<p><?php esc_html_e( '3X faster loading with optimized code, minified assets, and clean markup.', 'fashion-designer-studio' ); ?></p>
				</div>

				<div class="feature-box">
					<span class="dashicons dashicons-sos"></span>
					<h3><?php esc_html_e( 'Priority Support', 'fashion-designer-studio' ); ?></h3>
					<p><?php esc_html_e( 'Get expert help within 24 hours through our dedicated priority support system.', 'fashion-designer-studio' ); ?></p>
				</div>

				<div class="feature-box">
					<span class="dashicons dashicons-admin-appearance"></span>
					<h3><?php esc_html_e( 'Unlimited Color Schemes', 'fashion-designer-studio' ); ?></h3>
					<p><?php esc_html_e( 'Customize every color to match your brand identity with unlimited color options.', 'fashion-designer-studio' ); ?></p>
				</div>

				<div class="feature-box">
					<span class="dashicons dashicons-download"></span>
					<h3><?php esc_html_e( 'One-Click Demo Import', 'fashion-designer-studio' ); ?></h3>
					<p><?php esc_html_e( 'Import the complete demo content with one click and get your site ready instantly.', 'fashion-designer-studio' ); ?></p>
				</div>
			</div>
		</div>

		<div class="ot-pro-comparison">
			<h2><?php esc_html_e( 'Free vs Pro Comparison', 'fashion-designer-studio' ); ?></h2>

			<table class="comparison-table">
				<thead>
					<tr>
						<th><?php esc_html_e( 'Feature', 'fashion-designer-studio' ); ?></th>
						<th><?php esc_html_e( 'Free', 'fashion-designer-studio' ); ?></th>
						<th class="pro-col"><?php esc_html_e( 'Pro', 'fashion-designer-studio' ); ?></th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td><?php esc_html_e( 'WordPress Customizer Support', 'fashion-designer-studio' ); ?></td>
						<td>&#9989;</td>
						<td class="pro-col">&#9989;</td>
					</tr>
					<tr>
						<td><?php esc_html_e( 'Demo Importer', 'fashion-designer-studio' ); ?></td>
						<td>&#9989;</td>
						<td class="pro-col">&#9989;</td>
					</tr>
					<tr>
						<td><?php esc_html_e( 'Responsive Design', 'fashion-designer-studio' ); ?></td>
						<td>&#9989;</td>
						<td class="pro-col">&#9989;</td>
					</tr>
					<tr>
						<td><?php esc_html_e( 'Color Options', 'fashion-designer-studio' ); ?></td>
						<td><?php esc_html_e( 'Limited', 'fashion-designer-studio' ); ?></td>
						<td class="pro-col"><?php esc_html_e( 'Unlimited', 'fashion-designer-studio' ); ?></td>
					</tr>
					<tr>
						<td><?php esc_html_e( 'Typography Controls (Heading &amp; Body Font)', 'fashion-designer-studio' ); ?></td>
						<td><?php esc_html_e( 'Basic', 'fashion-designer-studio' ); ?></td>
						<td class="pro-col"><?php esc_html_e( 'Advanced', 'fashion-designer-studio' ); ?></td>
					</tr>
					<tr>
						<td><?php esc_html_e( 'Sticky Header', 'fashion-designer-studio' ); ?></td>
						<td>&#9989;</td>
						<td class="pro-col">&#9989;</td>
					</tr>
					<tr>
						<td><?php esc_html_e( 'Preloader / Loader', 'fashion-designer-studio' ); ?></td>
						<td>&#9989;</td>
						<td class="pro-col">&#9989;</td>
					</tr>
					<tr>
						<td><?php esc_html_e( 'Scroll-to-Top Button', 'fashion-designer-studio' ); ?></td>
						<td>&#9989;</td>
						<td class="pro-col">&#9989;</td>
					</tr>
					<tr>
						<td><?php esc_html_e( 'Homepage Slider Section', 'fashion-designer-studio' ); ?></td>
						<td>&#9989;</td>
						<td class="pro-col">&#9989;</td>
					</tr>
					<tr>
						<td><?php esc_html_e( 'Social Media Links', 'fashion-designer-studio' ); ?></td>
						<td>&#9989;</td>
						<td class="pro-col">&#9989;</td>
					</tr>
					<tr>
						<td><?php esc_html_e( 'WooCommerce Support', 'fashion-designer-studio' ); ?></td>
						<td><?php esc_html_e( 'Basic', 'fashion-designer-studio' ); ?></td>
						<td class="pro-col"><?php esc_html_e( 'Advanced Styling', 'fashion-designer-studio' ); ?></td>
					</tr>
					<tr>
						<td><?php esc_html_e( 'Section Reordering', 'fashion-designer-studio' ); ?></td>
						<td>&#10060;</td>
						<td class="pro-col">&#9989;</td>
					</tr>
					<tr>
						<td><?php esc_html_e( 'Boxed / Full-Width Layout', 'fashion-designer-studio' ); ?></td>
						<td>&#9989;</td>
						<td class="pro-col">&#9989;</td>
					</tr>
					<tr>
						<td><?php esc_html_e( 'Left / Right Sidebar', 'fashion-designer-studio' ); ?></td>
						<td>&#9989;</td>
						<td class="pro-col">&#9989;</td>
					</tr>
					<tr>
						<td><?php esc_html_e( 'Priority Support', 'fashion-designer-studio' ); ?></td>
						<td>&#10060;</td>
						<td class="pro-col">&#9989;</td>
					</tr>
				</tbody>
			</table>
		</div>

		<div class="ot-pro-testimonials">
			<h2><?php esc_html_e( 'What Our Users Say', 'fashion-designer-studio' ); ?></h2>

			<div class="testimonial-grid">
				<div class="testimonial-box">
					<div class="stars">&#11088;&#11088;&#11088;&#11088;&#11088;</div>
					<p><?php esc_html_e( '"I was looking for a clean and professional theme for my business and this theme delivered exactly that. Setup was quick and the layout looks very modern."', 'fashion-designer-studio' ); ?></p>
					<span class="author"><?php esc_html_e( '- John D.', 'fashion-designer-studio' ); ?></span>
				</div>

				<div class="testimonial-box">
					<div class="stars">&#11088;&#11088;&#11088;&#11088;</div>
					<p><?php esc_html_e( '"The theme design is professional and easy to customize. The documentation helped me set up my Fashion Designer Studio website without any issues."', 'fashion-designer-studio' ); ?></p>
					<span class="author"><?php esc_html_e( '- Sarah M.', 'fashion-designer-studio' ); ?></span>
				</div>

				<div class="testimonial-box">
					<div class="stars">&#11088;&#11088;&#11088;&#11088;&#11088;</div>
					<p><?php esc_html_e( '"Very flexible and beginner-friendly. I was able to adjust colors, sections, and layouts directly from the Customizer. Highly recommended."', 'fashion-designer-studio' ); ?></p>
					<span class="author"><?php esc_html_e( '- Michael R.', 'fashion-designer-studio' ); ?></span>
				</div>

				<div class="testimonial-box">
					<div class="stars">&#11088;&#11088;&#11088;&#11088;</div>
					<p><?php esc_html_e( '"The mobile responsive design works perfectly. Most of my clients visit from their phones, and the site looks clean and professional."', 'fashion-designer-studio' ); ?></p>
					<span class="author"><?php esc_html_e( '- Emily T.', 'fashion-designer-studio' ); ?></span>
				</div>

				<div class="testimonial-box">
					<div class="stars">&#11088;&#11088;&#11088;&#11088;&#11088;</div>
					<p><?php esc_html_e( '"Great theme for professionals. The service sections and homepage layout helped me present my services clearly to potential clients."', 'fashion-designer-studio' ); ?></p>
					<span class="author"><?php esc_html_e( '- David L.', 'fashion-designer-studio' ); ?></span>
				</div>

				<div class="testimonial-box">
					<div class="stars">&#11088;&#11088;&#11088;&#11088;</div>
					<p><?php esc_html_e( '"Customer support is very helpful and responsive. They guided me during setup and solved my issue quickly."', 'fashion-designer-studio' ); ?></p>
					<span class="author"><?php esc_html_e( '- Jennifer K.', 'fashion-designer-studio' ); ?></span>
				</div>

				<div class="testimonial-box">
					<div class="stars">&#11088;&#11088;&#11088;&#11088;&#11088;</div>
					<p><?php esc_html_e( '"Fast loading and SEO friendly. After launching my website with this theme, I started receiving more inquiries from clients."', 'fashion-designer-studio' ); ?></p>
					<span class="author"><?php esc_html_e( '- Robert H.', 'fashion-designer-studio' ); ?></span>
				</div>

				<div class="testimonial-box">
					<div class="stars">&#11088;&#11088;&#11088;&#11088;</div>
					<p><?php esc_html_e( '"A very good theme with useful features for Fashion Designer Studio businesses. Easy to install and the demo import was a real time-saver."', 'fashion-designer-studio' ); ?></p>
					<span class="author"><?php esc_html_e( '- Lisa P.', 'fashion-designer-studio' ); ?></span>
				</div>
			</div>
		</div>

		<div class="ot-pro-cta">
			<h2><?php esc_html_e( 'Ready to Upgrade?', 'fashion-designer-studio' ); ?></h2>
			<p><?php esc_html_e( 'Join hundreds of satisfied customers who upgraded to Pro', 'fashion-designer-studio' ); ?></p>
			<?php
			$fashion_designer_studio_theme = wp_get_theme();
			$fashion_designer_studio_theme_name = $fashion_designer_studio_theme->get( 'Name' );
			?>

			<a href="<?php echo esc_url( FASHION_DESIGNER_STUDIO_BUY_PRO ); ?>" target="_blank" class="button button-primary button-hero">
				<?php echo esc_html( sprintf( __( 'Get %s Pro Now', 'fashion-designer-studio' ), $fashion_designer_studio_theme_name ) ); ?> &rarr;
			</a>
		</div>

		<div class="ot-pro-footer">
			<p>
				<?php
				printf(
					/* translators: %s: Support URL */
					__( 'Need help? Contact our <a href="%s" target="_blank">support</a> team anytime.', 'fashion-designer-studio' ),
					esc_url( FASHION_DESIGNER_STUDIO_SUPPORT )
				);
				?>
			</p>
		</div>
	</div>
	<?php
}
