<?php

/**
 * Base template for setup wizard.
 *
 * @package StockSyncWithGoogleSheetForWooCommerce
 * @since   1.0.0
 */

// Exit if accessed directly.
defined('ABSPATH') || exit(); ?>
<section class="ssgsw-wrapper" x-data="setup">
	<?php ssgsw()->load_template('dashboard/appscript'); ?>
	<?php ssgsw()->load_template('setup/woocommerce'); ?>
	<!-- Welcome Template -->
	<?php ssgsw()->load_template('setup/welcome'); ?>

	<div class="ssgs-setup-layout" x-show="state.setupStarted">
		<div class="ssgs-setup-main">
			<!-- setup wizard  -->
			<div class="ssgs-admin setup">
				<!-- setup tabs  -->
				<div class="ssgs-tab">
					<?php ssgsw()->load_template('setup/header'); ?>
					<div class="ssgs-tab__content">
						<?php
						ssgsw()->load_template('setup/step-1');
						ssgsw()->load_template('setup/step-2');
						ssgsw()->load_template('setup/step-3');
						ssgsw()->load_template('setup/step-4');
						ssgsw()->load_template('setup/step-5');
						?>
					</div><!-- /Tab Content Wrapper -->
					<?php ssgsw()->load_template('setup/footer'); ?>
				</div>
			</div>
		</div>

		<div class="ssgs-setup-sidebar">
			<div class="ssgs-help-card">
				<div class="ssgs-help-icon-wrapper">
                    <svg width="24" height="24" 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>
				<h3><?php esc_html_e('Get Free Setup Help!', 'stock-sync-with-google-sheet-for-woocommerce'); ?></h3>
				<p><?php esc_html_e('Book a quick 10-minute setup call - 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-help-btn">
					<span class="dashicons dashicons-phone"></span> <?php esc_html_e('Book a Free Setup Call →', 'stock-sync-with-google-sheet-for-woocommerce'); ?>
				</a>
			</div>
		</div>
	</div>
</section>

<style>
.ssgs-setup-layout {
	display: flex;
	gap: 30px;
	padding: 20px 0;
	align-items: flex-start;
}

.ssgs-setup-main {
	flex: 1;
	min-width: 0;
}

.ssgs-admin.setup {
	background: #fff;
	padding: 30px !important;
	border-radius: 12px;
	border: 1px solid #e2e8f0;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.04);
}

.ssgs-tab__nav {
	margin-bottom: 25px !important;
}

.ssgs-setup-sidebar {
	width: 320px;
	flex-shrink: 0;
}

.ssgs-help-card {
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 35px 30px;
	margin-top: 18px;
	text-align: left;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.04);
	transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    box-sizing: border-box !important;
}

.ssgs-help-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.05);
	border-color: #cbd5e1;
}

.ssgs-help-icon-wrapper {
	width: 48px;
	height: 48px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
    background: linear-gradient(135deg, #20A5A5 0%, #2dd4bf 100%);
    color: #fff;
    margin-bottom: 25px;
    box-shadow: 0 8px 15px rgba(32, 165, 165, 0.2);
}

.ssgs-help-card h3 {
	margin: 0 0 15px 0 !important;
	font-size: 20px !important;
	color: #0f172a !important;
	font-weight: 800 !important;
}

.ssgs-help-card p {
	font-size: 15px !important;
	color: #64748b !important;
	line-height: 1.6 !important;
	margin-bottom: 30px !important;
}

.ssgs-help-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100% !important;
    max-width: 100% !important;
	padding: 14px !important;
	background: #fff;
	border: 2px solid #20A5A5;
	color: #20A5A5 !important;
	border-radius: 12px;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none !important;
	transition: all 0.3s;
	gap: 8px;
    box-sizing: border-box !important;
    margin: 0 auto !important;
}

.ssgs-help-btn:hover {
	background: #20A5A5;
	color: #fff !important;
    box-shadow: 0 8px 20px -5px rgba(32, 165, 165, 0.4);
}

.ssgs-help-btn .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
}

@media (max-width: 1024px) {
	.ssgs-setup-layout {
		flex-direction: column;
	}
	.ssgs-setup-sidebar {
		width: 100%;
	}
}
</style>

