<?php

/**
 * Welcome template for setup.
 *
 * @package StockSyncWithGoogleSheetForWooCommerce
 * @since   1.0.0
 */

// Exit if accessed directly.
defined('ABSPATH') || exit(); ?>

<div class="ssgs-welcome-screen text-center" x-show="!state.setupStarted" x-transition:enter="ssgs-fade-in">
	<div class="ssgs-welcome-header">
		<h1 class="ssgs-title">🎉 <?php esc_html_e('Welcome to FlexStock', 'stock-sync-with-google-sheet-for-woocommerce'); ?></h1>
		<p class="ssgs-subtitle"><?php esc_html_e('Let’s connect your store with Google Sheets in just a few easy steps.', 'stock-sync-with-google-sheet-for-woocommerce'); ?></p>
	</div>

	<div class="ssgs-cards-row">
		<!-- Setup Card -->
		<div class="ssgs-welcome-card main-setup">
			<div class="ssgs-card-icon">
				<div class="ssgs-icon-wrapper blue">
                    <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z"></path></svg>
				</div>
			</div>
			<div class="ssgs-card-title-line">
				<h3><?php esc_html_e('Start your setup!', 'stock-sync-with-google-sheet-for-woocommerce'); ?></h3>
				<a target="_blank" href="https://lnk.wppool.dev/DrWK2f4" class="ssgs-tutorial-pill">
					<span class="dashicons dashicons-video-alt3"></span> <?php esc_html_e('Watch Tutorial', 'stock-sync-with-google-sheet-for-woocommerce'); ?>
				</a>
			</div>
			<p><?php esc_html_e('Follow our quick guided setup - no tech skills required.', 'stock-sync-with-google-sheet-for-woocommerce'); ?></p>
			
			<button @click.prevent="state.setupStarted = true" class="ssgs-welcome-btn primary">
				<?php esc_html_e('Let’s Get Started', 'stock-sync-with-google-sheet-for-woocommerce'); ?> <span class="dashicons dashicons-arrow-right-alt2"></span>
			</button>
		</div>

		<!-- Help Card -->
		<div class="ssgs-welcome-card support-call">
			<div class="ssgs-card-icon">
				<div class="ssgs-icon-wrapper teal">
                    <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 18v-6a9 9 0 0 1 18 0v6"></path><path d="M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z"></path></svg>
				</div>
			</div>
			<h3><?php esc_html_e('Free Setup Help!', 'stock-sync-with-google-sheet-for-woocommerce'); ?></h3>
			<p><strong><?php esc_html_e('Book a quick 10-minute setup call', 'stock-sync-with-google-sheet-for-woocommerce'); ?></strong> - <?php esc_html_e('our team will walk you through everything.', 'stock-sync-with-google-sheet-for-woocommerce'); ?></p>
			
			<a target="_blank" href="https://wppooldev.neetocal.com/meeting-with-flexstock-support" class="ssgs-welcome-btn secondary">
				<span class="dashicons dashicons-phone"></span> <?php esc_html_e('Book a Free Setup Call', 'stock-sync-with-google-sheet-for-woocommerce'); ?> <span class="dashicons dashicons-arrow-right-alt2"></span>
			</a>
		</div>
	</div>

	<div class="ssgs-welcome-footer">
		<div class="ssgs-footer-content">
			<span class="ssgs-emoji">🚀</span> <?php echo sprintf(
				__('Join our %sFacebook Community%s to get priority support, product sneak peeks, and expert tips!', 'stock-sync-with-google-sheet-for-woocommerce'),
				'<a href="https://web.facebook.com/groups/wppoolcommunity" target="_blank" class="ssgs-footer-link">',
				'</a>'
			); ?>
		</div>
	</div>
</div>

