<?php
/**
 * Welcome Page Template
 *
 * @package YourTheme
 */

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

function welcome_page() {
	$template_uri = esc_url( get_template_directory_uri() );
	?>

	<div id="welcome">
		<div class="admin-wrap">

			<div class="discount-box">

				<div class="discount-content">
					<h2><?php esc_html_e( 'Get Special Discount', 'express-movers' ); ?></h2>

					<p><?php esc_html_e( 'Copy Code & Save 20% OFF!', 'express-movers' ); ?></p>

					<div class="coupon-code" onclick="copyCouponCode(this)">
						<?php echo esc_html( 'SAVE20NOW' ); ?>
					</div>

					<div class="buy-button">

						<a href="<?php echo esc_url( 'https://webnotick-themes.myshopify.com/cart/50798304493860:1?channel=buy_button' ); ?>" target="_blank" rel="noopener noreferrer">
							➤
							<span>
								<?php esc_html_e( 'Buy Now', 'express-movers' ); ?>
							</span>
						</a>

					</div>

				</div>

			</div>

			<div class="admin-images">

				<img 
					src="<?php echo esc_url( $template_uri . '/wellcome-theme/assets/img/classic.png' ); ?>" 
					alt="<?php esc_attr_e( 'Classic Homepage', 'express-movers' ); ?>"
				>

				<img 
					src="<?php echo esc_url( $template_uri . '/wellcome-theme/assets/img/modern.png' ); ?>" 
					alt="<?php esc_attr_e( 'Modern Homepage', 'express-movers' ); ?>"
				>

			</div>

			<div class="theme-guide-box">

				<div class="theme-guide-title">
					<h2><?php esc_html_e( 'Homepage Design Settings', 'express-movers' ); ?></h2>

					<br>

					<p>
						<?php esc_html_e( 'Easily customize your homepage layout and website appearance using the options below.', 'express-movers' ); ?>
					</p>
				</div>

				<div class="theme-guide-grid">

					<div class="theme-guide-item">
						<span>1</span>

						<h3><?php esc_html_e( 'Select Homepage', 'express-movers' ); ?></h3>

						<p>
							<?php esc_html_e( 'Choose between Classic Homepage or Modern Homepage layout design.', 'express-movers' ); ?>
						</p>
					</div>

					<div class="theme-guide-item">
						<span>2</span>

						<h3><?php esc_html_e( 'Classic & Modern Sections', 'express-movers' ); ?></h3>

						<p>
							<?php esc_html_e( 'Customize homepage layout with flexible section ordering.', 'express-movers' ); ?>
						</p>
					</div>

					<div class="theme-guide-item">
						<span>3</span>

						<h3><?php esc_html_e( 'Theme Color', 'express-movers' ); ?></h3>

						<p>
							<?php esc_html_e( 'Enable or disable custom theme colors for buttons and sections.', 'express-movers' ); ?>
						</p>
					</div>

					<div class="theme-guide-item">
						<span>4</span>

						<h3><?php esc_html_e( 'Section Order', 'express-movers' ); ?></h3>

						<p>
							<?php esc_html_e( 'Drag and drop homepage sections to reorder them easily.', 'express-movers' ); ?>
						</p>
					</div>

					<div class="theme-guide-item">
						<span>5</span>

						<h3><?php esc_html_e( 'Enable / Disable Sections', 'express-movers' ); ?></h3>

						<p>
							<?php esc_html_e( 'Show or hide homepage sections instantly using checkboxes.', 'express-movers' ); ?>
						</p>
					</div>

					<div class="theme-guide-item">
						<span>6</span>

						<h3><?php esc_html_e( 'Live Preview', 'express-movers' ); ?></h3>

						<p>
							<?php esc_html_e( 'All changes appear instantly in the customizer preview window.', 'express-movers' ); ?>
						</p>
					</div>

				</div>

			</div>

			<div class="admin-buttons">

				<a 
					href="<?php echo esc_url( 'https://www.webnotickdemo.com/express-movers/' ); ?>" 
					target="_blank" 
					rel="noopener noreferrer"
					class="button button-primary button-hero"
				>
					<?php esc_html_e( 'View Demo', 'express-movers' ); ?>
				</a>

				<a 
					href="<?php echo esc_url( 'https://webnotick-themes.myshopify.com/cart/50798304493860:1?channel=buy_button' ); ?>" 
					target="_blank" 
					rel="noopener noreferrer"
					class="button button-hero button2"
				>
					<?php esc_html_e( 'Buy Now', 'express-movers' ); ?>
				</a>

			</div>

		</div>
	</div>

	<script>
		function copyCouponCode(element) {

			const text = element.innerText;

			navigator.clipboard.writeText(text);

			element.innerText = "Copied!";

			setTimeout(() => {
				element.innerText = text;
			}, 1000);
		}
	</script>

	<?php
}
?>