<?php
/**
 * B2BKing welcome page.
 *
 */

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

$custom_logo = '';
if ( defined( 'B2BKINGLABEL_DIR' ) && ! empty( get_option( 'b2bking_whitelabel_logo_setting', '' ) ) ) {
	$custom_logo = get_option( 'b2bking_whitelabel_logo_setting', '' );
}

if ( empty( $custom_logo ) && function_exists( 'plugins_url' ) ) {
	$custom_logo = plugins_url( '../../includes/assets/images/logo.png', __FILE__ );
}

$settings_url    = function_exists( 'admin_url' ) ? admin_url( 'admin.php?page=b2bking&tab=main' ) : '#';
$license_url     = function_exists( 'admin_url' ) ? admin_url( 'admin.php?page=b2bking&tab=activate' ) : '#';
$licensing_faq_url = 'https://kingsplugins.com/licensing-faq/';
$groups_url      = function_exists( 'admin_url' ) ? admin_url( 'admin.php?page=b2bking_groups' ) : '#';
$docs_url        = 'https://woocommerce-b2b-plugin.com/docs';
$setup_guide_url = 'https://woocommerce-b2b-plugin.com/docs/set-up-woocommerce-wholesale-store-step-by-step-guide/';
$support_url     = 'https://webwizards.ticksy.com';
$visibility_doc_url = 'https://woocommerce-b2b-plugin.com/docs/faq-product-visibility-is-not-working-how-to-set-up-product-visibility/';
$tax_display_doc_url = 'https://woocommerce-b2b-plugin.com/docs/how-to-display-prices-excluding-tax-for-b2b-users-and-including-tax-for-b2c-users/';
$payment_methods_doc_url = 'https://woocommerce-b2b-plugin.com/docs/how-to-enable-disable-payment-and-shipping-methods-based-on-users-or-groups/';
?>

<style>
	.notice,
	.update-nag,
	.wrap > .notice {
		display: none !important;
	}

	.b2bking-welcome-preview {
		--b2bking-dark: #15141b;
		--b2bking-dark-soft: #201e2e;
		--b2bking-text: #191821;
		--b2bking-text-soft: #606775;
		--b2bking-text-faint: #8d95a3;
		--b2bking-gold: #c69737;
		--b2bking-gold-deep: rgb(144, 106, 29);
		--b2bking-border: rgba(25, 24, 33, 0.08);
		--b2bking-shadow-lg: 0 26px 70px rgba(20, 24, 33, 0.12);
		--b2bking-shadow-sm: 0 12px 26px rgba(20, 24, 33, 0.06);
		--b2bking-radius-xl: 30px;
		--b2bking-radius-lg: 22px;
		--b2bking-radius-md: 18px;
		background:
			radial-gradient(circle at top, rgba(198, 151, 55, 0.08), transparent 30%),
			linear-gradient(180deg, #f4f6f8, #edf1f4 48%, #eff3f6);
		margin: 20px 20px 0 2px;
		padding: 12px 0 36px;
	}

	.b2bking-welcome-preview *,
	.b2bking-welcome-preview *::before,
	.b2bking-welcome-preview *::after {
		box-sizing: border-box;
	}

	.b2bking-welcome-preview a {
		text-decoration: none;
	}

	.b2bking-welcome-preview__shell {
		max-width: 860px;
		margin: 0 auto;
		border-radius: 34px;
		overflow: hidden;
		background: #fff;
		border: 1px solid rgba(25, 24, 33, 0.06);
		box-shadow: var(--b2bking-shadow-lg);
	}

	.b2bking-welcome-preview__hero {
		position: relative;
		padding: 34px 38px 40px;
		color: #fff;
		text-align: center;
		background:
			radial-gradient(circle at top right, rgba(198, 151, 55, 0.18), transparent 26%),
			linear-gradient(172deg, #15141b, #201e2e, #15141b);
	}

	.b2bking-welcome-preview__logo {
		display: block;
		width: auto;
		max-width: 180px;
		height: auto;
		margin: 0 auto;
	}

	.b2bking-welcome-preview__signature-wrap {
		margin: 14px 0 4px;
		min-height: 76px;
	}

	.b2bking-welcome-preview__signature {
		display: block;
		width: min(320px, 100%);
		height: auto;
		overflow: visible;
		margin: 0 auto;
	}

	.b2bking-welcome-preview__signature text {
		font-family: "Snell Roundhand", "Brush Script MT", "Segoe Script", cursive;
		font-size: 62px;
		font-weight: 400;
		fill: transparent;
		stroke: rgba(250, 241, 223, 0.97);
		stroke-width: 1.3;
		stroke-linecap: round;
		stroke-linejoin: round;
		stroke-dasharray: 1100;
		stroke-dashoffset: 1100;
		filter: drop-shadow(0 14px 24px rgba(198, 151, 55, 0.18));
		animation: b2bking-draw-signature 5.55s ease 0.5s forwards, b2bking-fill-signature 1s ease 4.15s forwards;
	}

	.b2bking-welcome-preview__title {
		width: 100%;
		margin: 6px auto 0;
		font-size: clamp(30px, 4.5vw, 48px);
		line-height: 1.06;
		letter-spacing: -0.04em;
		font-weight: 700;
		color: #fff;
	}

	.b2bking-welcome-preview__copy {
		max-width: 620px;
		margin: 16px auto 0;
		color: rgba(255, 255, 255, 0.76);
		font-size: 16px;
		line-height: 1.8;
	}

	.b2bking-welcome-preview__actions {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 14px;
		margin-top: 24px;
	}

	.b2bking-welcome-preview__button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 48px;
		padding: 0 18px;
		border-radius: 999px;
		border: 1px solid transparent;
		font-size: 14px;
		font-weight: 700;
		letter-spacing: 0.01em;
		transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
	}

	.b2bking-welcome-preview__button:hover,
	.b2bking-welcome-preview__button:focus {
		transform: translateY(-2px);
		outline: none;
	}

	.b2bking-welcome-preview__button--primary {
		color: #15141b;
		background: linear-gradient(180deg, #e5c16e, #c69737);
		box-shadow: 0 14px 28px rgba(198, 151, 55, 0.22);
	}

	.b2bking-welcome-preview__button--primary:hover,
	.b2bking-welcome-preview__button--primary:focus {
		color: #15141b !important;
	}

	.b2bking-welcome-preview__button--secondary {
		color: #fff;
		background: rgba(255, 255, 255, 0.07);
		border-color: rgba(255, 255, 255, 0.14);
	}

	.b2bking-welcome-preview__button--secondary:hover,
	.b2bking-welcome-preview__button--secondary:focus {
		color: #fff !important;
	}

	.b2bking-welcome-preview__surface {
		padding: 34px 38px 38px;
	}

	.b2bking-welcome-preview__proof {
		position: absolute;
		top: 24px;
		right: 24px;
		display: flex;
		justify-content: flex-end;
		margin-top: 0;
	}

	.b2bking-welcome-preview__proof-item {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 38px;
		padding: 0 16px;
		border-radius: 999px;
		background: rgba(255, 255, 255, 0.06);
		border: 1px solid rgba(198, 151, 55, 0.18);
		color: rgba(255, 255, 255, 0.7);
		font-size: 12px;
		font-weight: 600;
		letter-spacing: 0.01em;
	}

	.b2bking-welcome-preview__intro {
		margin-bottom: 26px;
	}

	.b2bking-welcome-preview__intro-label {
		display: inline-block;
		margin-bottom: 8px;
		color: var(--b2bking-gold-deep);
		font-size: 12px;
		font-weight: 700;
		letter-spacing: 0.12em;
		text-transform: uppercase;
	}

	.b2bking-welcome-preview__intro h2 {
		margin: 0;
		color: var(--b2bking-text);
		font-size: 30px;
		line-height: 1.12;
		letter-spacing: -0.04em;
	}

	.b2bking-welcome-preview__intro p {
		margin: 12px 0 0;
		max-width: 700px;
		color: var(--b2bking-text-soft);
		font-size: 15px;
		line-height: 1.8;
	}

	.b2bking-welcome-preview__grid {
		display: grid;
		gap: 18px;
	}

	.b2bking-welcome-preview__grid--primary {
		grid-template-columns: 1fr;
	}

	.b2bking-welcome-preview__grid--secondary {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		margin-top: 26px;
	}

	.b2bking-welcome-preview__card {
		padding: 24px;
		border-radius: var(--b2bking-radius-lg);
		background: #fff;
		border: 1px solid var(--b2bking-border);
		box-shadow: var(--b2bking-shadow-sm);
	}

	.b2bking-welcome-preview__card-top {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		margin-bottom: 12px;
	}

	.b2bking-welcome-preview__card-step {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		border-radius: 50%;
		background: linear-gradient(180deg, rgba(198, 151, 55, 0.18), rgba(198, 151, 55, 0.08));
		color: var(--b2bking-gold-deep);
		font-size: 13px;
		font-weight: 700;
	}

	.b2bking-welcome-preview__card-tag {
		color: var(--b2bking-text-faint);
		font-size: 11px;
		font-weight: 700;
		letter-spacing: 0.12em;
		text-transform: uppercase;
	}

	.b2bking-welcome-preview__card h3,
	.b2bking-welcome-preview__mini h3 {
		margin: 0;
		color: var(--b2bking-text);
		font-size: 24px;
		line-height: 1.14;
		letter-spacing: -0.04em;
	}

	.b2bking-welcome-preview__card p,
	.b2bking-welcome-preview__mini p {
		margin: 10px 0 0;
		color: var(--b2bking-text-soft);
		font-size: 14px;
		line-height: 1.8;
	}

	.b2bking-welcome-preview__link {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		margin-top: 16px;
		color: var(--b2bking-gold-deep);
		font-size: 13px;
		font-weight: 700;
	}

	.b2bking-welcome-preview__link::after {
		content: "→";
		font-size: 15px;
	}

	.b2bking-welcome-preview__mini {
		padding: 22px;
		border-radius: var(--b2bking-radius-md);
		background: linear-gradient(180deg, #ffffff, #fafbfc);
		border: 1px solid var(--b2bking-border);
	}

	.b2bking-welcome-preview__dark-band {
		margin-top: 28px;
		padding: 28px;
		border-radius: var(--b2bking-radius-lg);
		color: #fff;
		background:
			radial-gradient(circle at top right, rgba(198, 151, 55, 0.2), transparent 30%),
			linear-gradient(172deg, #15141b, #201e2e, #15141b);
	}

	.b2bking-welcome-preview__dark-band-label {
		display: inline-block;
		margin-bottom: 8px;
		color: #efd7a0;
		font-size: 11px;
		font-weight: 700;
		letter-spacing: 0.12em;
		text-transform: uppercase;
	}

	.b2bking-welcome-preview__dark-band h3 {
		margin: 0;
		font-size: 28px;
		line-height: 1.1;
		letter-spacing: -0.04em;
		color: #fff;
	}

	.b2bking-welcome-preview__dark-band p {
		margin: 12px 0 0;
		max-width: 700px;
		color: rgba(255, 255, 255, 0.74);
		font-size: 15px;
		line-height: 1.8;
	}

	.b2bking-welcome-preview__dark-band-grid {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 14px;
		margin-top: 20px;
	}

	.b2bking-welcome-preview__dark-band-featured {
		display: block;
		margin-top: 20px;
		padding: 20px 22px;
		border-radius: 18px;
		background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.08));
		border: 1px solid rgba(198, 151, 55, 0.26);
		box-shadow: 0 16px 30px rgba(10, 9, 14, 0.18);
		color: #fff;
	}

	.b2bking-welcome-preview__dark-band-featured:hover,
	.b2bking-welcome-preview__dark-band-featured:focus {
		color: #fff !important;
	}

	.b2bking-welcome-preview__dark-band-featured strong {
		display: block;
		font-size: 18px;
		line-height: 1.2;
		color: #f2d38f;
	}

	.b2bking-welcome-preview__dark-band-featured span {
		display: block;
		margin-top: 8px;
		color: rgba(255, 255, 255, 0.76);
		font-size: 14px;
		line-height: 1.75;
	}

	.b2bking-welcome-preview__dark-band-grid--secondary {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		margin-top: 14px;
	}

	.b2bking-welcome-preview__dark-band-item {
		display: block;
		padding: 16px;
		border-radius: 16px;
		background: rgba(255, 255, 255, 0.05);
		border: 1px solid rgba(255, 255, 255, 0.08);
		color: inherit;
	}

	.b2bking-welcome-preview__dark-band-item:hover,
	.b2bking-welcome-preview__dark-band-item:focus {
		color: #fff !important;
	}

	.b2bking-welcome-preview__dark-band-item:hover span,
	.b2bking-welcome-preview__dark-band-item:focus span {
		color: rgba(255, 255, 255, 0.78);
	}

	.b2bking-welcome-preview__dark-band-item strong {
		display: block;
		font-size: 15px;
	}

	.b2bking-welcome-preview__dark-band-item span {
		display: block;
		margin-top: 5px;
		color: rgba(255, 255, 255, 0.62);
		font-size: 13px;
		line-height: 1.7;
	}

	.b2bking-welcome-preview__mini-top {
		display: flex;
		align-items: center;
		gap: 14px;
		margin-bottom: 10px;
	}

	.b2bking-welcome-preview__mini-icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		border-radius: 14px;
		background: linear-gradient(180deg, rgba(198, 151, 55, 0.16), rgba(198, 151, 55, 0.07));
		color: var(--b2bking-gold-deep);
		flex: 0 0 auto;
	}

	.b2bking-welcome-preview__mini-icon {
		width: 44px;
		height: 44px;
	}

	.b2bking-welcome-preview__mini-icon svg {
		width: 20px;
		height: 20px;
	}

	@keyframes b2bking-draw-signature {
		to {
			stroke-dashoffset: 0;
		}
	}

	@keyframes b2bking-fill-signature {
		to {
			fill: rgba(250, 241, 223, 0.98);
			stroke: rgba(250, 241, 223, 0.4);
		}
	}

	@media (max-width: 782px) {
		.b2bking-welcome-preview {
			margin-right: 10px;
		}

		.b2bking-welcome-preview__hero,
		.b2bking-welcome-preview__surface {
			padding: 24px 22px;
		}

		.b2bking-welcome-preview__signature-wrap {
			min-height: 66px;
		}

		.b2bking-welcome-preview__signature text {
			font-size: 60px;
		}

		.b2bking-welcome-preview__proof {
			position: static;
			justify-content: center;
			margin-top: 18px;
		}

		.b2bking-welcome-preview__grid--secondary {
			grid-template-columns: 1fr;
		}

		.b2bking-welcome-preview__dark-band-grid {
			grid-template-columns: 1fr;
		}
	}

	@media (prefers-reduced-motion: reduce) {
		.b2bking-welcome-preview__button,
		.b2bking-welcome-preview__signature text {
			animation: none;
			transition: none;
		}

		.b2bking-welcome-preview__signature text {
			fill: rgba(250, 241, 223, 0.98);
			stroke-dashoffset: 0;
			stroke: rgba(250, 241, 223, 0.4);
		}
	}
</style>

<div class="wrap b2bking-welcome-preview">
	<div class="b2bking-welcome-preview__shell">
		<section class="b2bking-welcome-preview__hero">
			<?php if ( ! empty( $custom_logo ) ) : ?>
				<img class="b2bking-welcome-preview__logo" src="<?php echo esc_url( $custom_logo ); ?>" alt="<?php esc_attr_e( 'B2BKing', 'b2bking' ); ?>">
			<?php endif; ?>

			<div class="b2bking-welcome-preview__signature-wrap" aria-hidden="true">
				<svg class="b2bking-welcome-preview__signature" viewBox="0 0 440 95" role="presentation">
					<text x="0" y="72">Welcome aboard.</text>
				</svg>
			</div>

			<h1 class="b2bking-welcome-preview__title">
				<?php esc_html_e( 'Thank you for choosing B2BKing.', 'b2bking' ); ?>
			</h1>

			<p class="b2bking-welcome-preview__copy">
				<?php esc_html_e( 'We have already prepared the essentials for you, so you can get started now and expand into more advanced B2B features whenever you are ready.', 'b2bking' ); ?>
			</p>

			<div class="b2bking-welcome-preview__actions">
				<a class="b2bking-welcome-preview__button b2bking-welcome-preview__button--primary" href="<?php echo esc_url( $license_url ); ?>" target="_blank" rel="noopener noreferrer">
					<?php esc_html_e( 'Activate License', 'b2bking' ); ?>
				</a>
				<a class="b2bking-welcome-preview__button b2bking-welcome-preview__button--secondary" href="<?php echo esc_url( $docs_url ); ?>" target="_blank" rel="noopener noreferrer">
					<?php esc_html_e( 'Open Documentation', 'b2bking' ); ?>
				</a>
			</div>

			<div class="b2bking-welcome-preview__proof">
				<div class="b2bking-welcome-preview__proof-item">Trusted by 15,000+ active stores</div>
			</div>
		</section>

		<div class="b2bking-welcome-preview__surface">
			<section class="b2bking-welcome-preview__intro">
				<div class="b2bking-welcome-preview__intro-label"><?php esc_html_e( 'Start Here', 'b2bking' ); ?></div>
				<h2><?php esc_html_e( 'Two quick things to get started.', 'b2bking' ); ?></h2>
				<p><?php esc_html_e( 'Activate your license and choose your store type.', 'b2bking' ); ?></p>
			</section>

			<section class="b2bking-welcome-preview__grid b2bking-welcome-preview__grid--primary">
				<article class="b2bking-welcome-preview__card">
					<div class="b2bking-welcome-preview__card-top">
						<div class="b2bking-welcome-preview__card-step">01</div>
						<div class="b2bking-welcome-preview__card-tag"><?php esc_html_e( 'Essential', 'b2bking' ); ?></div>
					</div>
					<h3><?php esc_html_e( 'Activate your license', 'b2bking' ); ?></h3>
					<p><?php printf( wp_kses_post( __( 'Enable updates and premium support before you move deeper into configuration. Need help finding your license key? See the <a href="%s" target="_blank" rel="noopener noreferrer">licensing FAQ</a>.', 'b2bking' ) ), esc_url( $licensing_faq_url ) ); ?></p>
					<a class="b2bking-welcome-preview__link" href="<?php echo esc_url( $license_url ); ?>" target="_blank" rel="noopener noreferrer"><?php esc_html_e( 'Go to license activation', 'b2bking' ); ?></a>
				</article>

				<article class="b2bking-welcome-preview__card">
					<div class="b2bking-welcome-preview__card-top">
						<div class="b2bking-welcome-preview__card-step">02</div>
						<div class="b2bking-welcome-preview__card-tag"><?php esc_html_e( 'Foundation', 'b2bking' ); ?></div>
					</div>
					<h3><?php esc_html_e( 'Choose your store type', 'b2bking' ); ?></h3>
					<p><?php esc_html_e( 'Choose between a dedicated B2B shop and a B2B & B2C hybrid store.', 'b2bking' ); ?></p>
					<a class="b2bking-welcome-preview__link" href="<?php echo esc_url( $settings_url ); ?>" target="_blank" rel="noopener noreferrer"><?php esc_html_e( 'Open settings', 'b2bking' ); ?></a>
				</article>
			</section>

			<section class="b2bking-welcome-preview__dark-band">
				<div class="b2bking-welcome-preview__dark-band-label"><?php esc_html_e( 'Next Step', 'b2bking' ); ?></div>
				<h3><?php esc_html_e( 'Start with the Initial Setup Guide.', 'b2bking' ); ?></h3>
				<p><?php esc_html_e( 'Then use the guides below for specific configurations.', 'b2bking' ); ?></p>
				<a class="b2bking-welcome-preview__dark-band-featured" href="<?php echo esc_url( $setup_guide_url ); ?>" target="_blank" rel="noopener noreferrer">
					<strong><?php esc_html_e( 'Initial Setup Guide', 'b2bking' ); ?></strong>
					<span><?php esc_html_e( 'Follow the full step-by-step guide for your initial store configuration.', 'b2bking' ); ?></span>
				</a>
				<div class="b2bking-welcome-preview__dark-band-grid b2bking-welcome-preview__dark-band-grid--secondary">
					<a class="b2bking-welcome-preview__dark-band-item" href="<?php echo esc_url( $visibility_doc_url ); ?>" target="_blank" rel="noopener noreferrer">
						<strong><?php esc_html_e( 'Product Visibility', 'b2bking' ); ?></strong>
						<span><?php esc_html_e( 'Set up visibility rules for products and categories.', 'b2bking' ); ?></span>
					</a>
					<a class="b2bking-welcome-preview__dark-band-item" href="<?php echo esc_url( $tax_display_doc_url ); ?>" target="_blank" rel="noopener noreferrer">
						<strong><?php esc_html_e( 'Tax Display', 'b2bking' ); ?></strong>
						<span><?php esc_html_e( 'Show ex. tax for B2B and inc. tax for B2C.', 'b2bking' ); ?></span>
					</a>
				</div>
			</section>

			<section class="b2bking-welcome-preview__grid b2bking-welcome-preview__grid--secondary">
				<article class="b2bking-welcome-preview__mini">
					<div class="b2bking-welcome-preview__mini-top">
						<div class="b2bking-welcome-preview__mini-icon" aria-hidden="true">
							<svg viewBox="0 0 24 24" fill="none">
								<path d="M7 4.5H17C18.1 4.5 19 5.4 19 6.5V17.5C19 18.6 18.1 19.5 17 19.5H7C5.9 19.5 5 18.6 5 17.5V6.5C5 5.4 5.9 4.5 7 4.5Z" stroke="currentColor" stroke-width="1.7"/>
								<path d="M8.5 9H15.5" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/>
								<path d="M8.5 12.5H15.5" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/>
								<path d="M8.5 16H13" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/>
							</svg>
						</div>
						<h3><?php esc_html_e( 'Documentation', 'b2bking' ); ?></h3>
					</div>
					<a class="b2bking-welcome-preview__link" href="<?php echo esc_url( $docs_url ); ?>" target="_blank" rel="noopener noreferrer"><?php esc_html_e( 'Open documentation', 'b2bking' ); ?></a>
				</article>

				<article class="b2bking-welcome-preview__mini">
					<div class="b2bking-welcome-preview__mini-top">
						<div class="b2bking-welcome-preview__mini-icon" aria-hidden="true">
							<svg viewBox="0 0 24 24" fill="none">
								<path d="M12 18.5C15.866 18.5 19 15.366 19 11.5C19 7.63401 15.866 4.5 12 4.5C8.13401 4.5 5 7.63401 5 11.5C5 12.747 5.32564 13.918 5.8965 14.933L5.5 19.5L9.749 18.66C10.457 18.919 11.223 19.05 12 19.05" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"/>
								<path d="M9.25 10.75H14.75" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/>
								<path d="M9.25 13.5H12.75" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/>
							</svg>
						</div>
						<h3><?php esc_html_e( 'Support', 'b2bking' ); ?></h3>
					</div>
					<a class="b2bking-welcome-preview__link" href="<?php echo esc_url( $support_url ); ?>" target="_blank" rel="noopener noreferrer"><?php esc_html_e( 'Contact support', 'b2bking' ); ?></a>
				</article>
			</section>
		</div>
	</div>
</div>
