import { createInterpolateElement } from '@wordpress/element';
import { __, sprintf } from '@wordpress/i18n';

const TEXT_DOMAIN = 'stock-sync-with-google-sheet-for-woocommerce';
const BOOKING_URL = 'https://wppooldev.neetocal.com/meeting-with-flexstock-support';

const SparkleIcon = () => (
	<svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
		<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>
);

export const HeadsetIcon = ( { size = 30 } ) => (
	<svg width={ size } height={ size } viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
		<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>
);

// Port of the removed templates/setup/welcome.php, shown until the wizard is started (setup_step 0).
const Welcome = ( { onStart } ) => (
	<div className="ssgs-welcome-screen text-center">
		<div className="ssgs-welcome-header">
			<h1 className="ssgs-title">🎉 { __( 'Welcome to FlexStock', TEXT_DOMAIN ) }</h1>
			<p className="ssgs-subtitle">{ __( 'Let’s connect your store with Google Sheets in just a few easy steps.', TEXT_DOMAIN ) }</p>
		</div>

		<div className="ssgs-cards-row">
			<div className="ssgs-welcome-card main-setup">
				<div className="ssgs-card-icon">
					<div className="ssgs-icon-wrapper blue">
						<SparkleIcon />
					</div>
				</div>
				<div className="ssgs-card-title-line">
					<h3>{ __( 'Start your setup!', TEXT_DOMAIN ) }</h3>
					<a target="_blank" rel="noreferrer" href="https://lnk.wppool.dev/DrWK2f4" className="ssgs-tutorial-pill">
						<span className="dashicons dashicons-video-alt3" aria-hidden="true"></span> { __( 'Watch Tutorial', TEXT_DOMAIN ) }
					</a>
				</div>
				<p>{ __( 'Follow our quick guided setup - no tech skills required.', TEXT_DOMAIN ) }</p>
				<button type="button" onClick={ onStart } className="ssgs-welcome-btn primary">
					{ __( 'Let’s Get Started', TEXT_DOMAIN ) } <span className="dashicons dashicons-arrow-right-alt2" aria-hidden="true"></span>
				</button>
			</div>

			<div className="ssgs-welcome-card support-call">
				<div className="ssgs-card-icon">
					<div className="ssgs-icon-wrapper teal">
						<HeadsetIcon />
					</div>
				</div>
				<h3>{ __( 'Free Setup Help!', TEXT_DOMAIN ) }</h3>
				<p>
					<strong>{ __( 'Book a quick 10-minute setup call', TEXT_DOMAIN ) }</strong> - { __( 'our team will walk you through everything.', TEXT_DOMAIN ) }
				</p>
				<a target="_blank" rel="noreferrer" href={ BOOKING_URL } className="ssgs-welcome-btn secondary">
					<span className="dashicons dashicons-phone" aria-hidden="true"></span> { __( 'Book a Free Setup Call', TEXT_DOMAIN ) }{ ' ' }
					<span className="dashicons dashicons-arrow-right-alt2" aria-hidden="true"></span>
				</a>
			</div>
		</div>

		<div className="ssgs-welcome-footer">
			<div className="ssgs-footer-content">
				<span className="ssgs-emoji" aria-hidden="true">🚀</span>{ ' ' }
				{ createInterpolateElement(
					sprintf(
						/* translators: 1: Opening <a> tag for Facebook Community link, 2: Closing </a> tag */
						__( 'Join our %1$sFacebook Community%2$s to get priority support, product sneak peeks, and expert tips!', TEXT_DOMAIN ),
						'<a>',
						'</a>'
					),
					{
						// eslint-disable-next-line jsx-a11y/anchor-has-content
						a: <a href="https://web.facebook.com/groups/wppoolcommunity" target="_blank" rel="noreferrer" className="ssgs-footer-link" />,
					}
				) }
			</div>
		</div>
	</div>
);

export default Welcome;