import { __ } from '@wordpress/i18n';
import { useLocation } from 'react-router-dom';

const Welcome = () => {
	const query = new URLSearchParams( useLocation()?.search );

	const allowAutoPlay =
		'1' === query.get( 'power_coupons-activation-redirect' ) ? 1 : 0;

	return (
		<main className="py-[2.43rem]">
			<div className="max-w-3xl mx-auto px-6 lg:max-w-7xl">
				<h1 className="sr-only">
					{ ' ' }
					{ __( 'Heading', 'power-coupons' ) }{ ' ' }
				</h1>
				{ /* Main 3 column grid */ }
				<div className="grid grid-cols-1 gap-4 items-start lg:grid-cols-3 lg:gap-[2.6rem]">
					{ /* Left column */ }
					<div className="grid grid-cols-1 gap-4 lg:col-span-2 h-full">
						<section aria-labelledby="section-1-title h-full">
							<h2 className="sr-only" id="section-1-title">
								{ __( 'Section title', 'power-coupons' ) }
							</h2>
							<div className="rounded-[0.2rem] bg-white overflow-hidden shadow flex justify-center flex-col h-full">
								<div className="p-12 pt-[2.2rem]">
									<h2 className="text-[1.6rem] leading-[2.4rem] pb-3 font-medium text-left">
										{ __(
											'Welcome to Modern Cart Woo ( Placeholder content )',
											'power-coupons'
										) }
									</h2>
									<p className="pb-7">
										{ __(
											'We designed Cart Plugin to be intuitive but we do recommend learning how it works by checking our comprehensive documentation and watching the video below. Enjoy your time with Modern Cart Woo',
											'power-coupons'
										) }
									</p>
									<div className="mr-[80px] w-full relative pb-[56.25%]">
										<iframe
											className="absolute w-full h-full"
											src={ `https://www.youtube.com/embed/NpEaa2P7qZI?showinfo=0&autoplay=${ allowAutoPlay }&mute=${ allowAutoPlay }` }
											allow="autoplay"
											title="YouTube video player"
											frameBorder="0"
											allowFullScreen
										></iframe>
									</div>
									<span className="relative z-0 inline-flex rounded-[0.2rem] pt-6 justify-start w-full">
										<button
											type="button"
											className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-[0.2rem] shadow-sm text-white bg-wpcolor hover:bg-wphovercolor focus:outline-none mr-4"
										>
											{ __( 'CTA 1', 'power-coupons' ) }
										</button>
										<button
											type="button"
											className="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-[0.2rem] text-gray-700 bg-white hover:bg-gray-50 focus:outline-none"
										>
											{ __( 'CTA 2', 'power-coupons' ) }
										</button>
									</span>
								</div>
							</div>
						</section>
					</div>

					{ /* Right column */ }
					<div className="flex h-full flex-col justify-between space-y-5">
						<section aria-labelledby="section-2-title">
							<h2 className="sr-only" id="section-2-title">
								{ __( 'Section title', 'power-coupons' ) }
							</h2>
							<div className="rounded-[0.2rem] bg-white overflow-hidden shadow">
								<div className="p-7">
									<h3 className="text-xl leading-[2.47rem] font-medium pb-2">
										{ __(
											'Knowledge Base',
											'power-coupons'
										) }
									</h3>
									<p className="text-sm pb-2 pr-2">
										{ __(
											'Learn everything you need to know about the Cart Plugin plugin with our comprehensive documentation.',
											'power-coupons'
										) }
									</p>
									<a
										className="text-base text-wpcolor hover:text-wphovercolor underline"
										href="#documentation"
										target="_blank"
										rel="noreferrer"
									>
										{ __( 'Browse Now', 'power-coupons' ) }
									</a>
									<a
										className="text-base text-wpcolor hover:text-wphovercolor no-underline"
										href="#documentation"
										target="_blank"
										rel="noreferrer"
									>
										{ ' ' }
										→{ ' ' }
									</a>
								</div>
							</div>
						</section>
						<section aria-labelledby="section-2-title">
							<h2 className="sr-only" id="section-2-title">
								{ __( 'Section title', 'power-coupons' ) }
							</h2>
							<div className="rounded-[0.2rem] bg-white overflow-hidden shadow">
								<div className="p-7">
									<h3 className="text-xl leading-[2.47rem] font-medium pb-2">
										{ __(
											'Get 5-star Support',
											'power-coupons'
										) }
									</h3>
									<p className="text-sm pb-2 pr-2">
										{ __(
											'Need some help? Our awesome support team is here to help you with any question you have.',
											'power-coupons'
										) }
									</p>
									<a
										className="text-base text-wpcolor hover:text-wphovercolor underline"
										href="#support"
										target="_blank"
										rel="noreferrer"
									>
										{ __( 'Get Support', 'power-coupons' ) }
									</a>
									<a
										className="text-base text-wpcolor hover:text-wphovercolor no-underline"
										href="#support"
										target="_blank"
										rel="noreferrer"
									>
										{ ' ' }
										→{ ' ' }
									</a>
								</div>
							</div>
						</section>
						<section aria-labelledby="section-2-title">
							<h2 className="sr-only" id="section-2-title">
								{ __( 'Section title', 'power-coupons' ) }
							</h2>
							<div className="rounded-[0.2rem] bg-white overflow-hidden shadow">
								<div className="p-7">
									<h3 className="text-xl leading-[2.47rem] font-medium pb-2">
										{ __(
											'Join the Community',
											'power-coupons'
										) }
									</h3>
									<p className="text-sm pb-2 pr-2">
										{ __(
											'Got a question about the plugin, want to share your awesome project or just say hi? Join our wonderful community!',
											'power-coupons'
										) }
									</p>
									<a
										className="text-base text-wpcolor hover:text-wphovercolor underline"
										href="#join_now"
										target="_blank"
										rel="noreferrer"
									>
										{ __( 'Join Now', 'power-coupons' ) }
									</a>
									<a
										className="text-base text-wpcolor hover:text-wphovercolor no-underline"
										href="#join_now"
										target="_blank"
										rel="noreferrer"
									>
										{ ' ' }
										→{ ' ' }
									</a>
								</div>
							</div>
						</section>
					</div>
				</div>
			</div>
		</main>
	);
};

export default Welcome;
