/**
 * WordPress dependencies
 */
import { __ } from '@wordpress/i18n';

/**
 * Internal dependencies
 */
import './style.css';
import { IconLaptopSearch } from '../../../components/svg/icon-laptop-search';

/**
 * Welcome screen.
 */
export function Welcome() {
	return (
		<div className="welcome">
			<div className="welcome__header">
				<div className="welcome__illustration">
					<svg
						width="201"
						height="152"
						viewBox="0 0 201 152"
						fill="none"
						xmlns="http://www.w3.org/2000/svg"
					>
						<g clipPath="url(#clip-welcome)">
							<path
								d="M62.7531 150.5C62.7531 150.5 97.4531 116.5 172.053 132.9"
								stroke="#2459E7"
								strokeWidth="2"
								strokeMiterlimit="10"
								strokeLinecap="round"
								strokeLinejoin="round"
							/>
							<path
								d="M85.4531 137C85.4531 137 41.5531 112.6 1.95306 127.7"
								stroke="#2459E7"
								strokeWidth="2"
								strokeMiterlimit="10"
								strokeLinecap="round"
								strokeLinejoin="round"
							/>
							<path
								d="M133.353 138.103C131.953 137.103 132.053 135.703 131.553 134.403C130.853 132.703 130.553 130.903 130.253 129.203C130.253 128.903 130.153 128.503 130.253 128.203C130.453 127.503 131.553 127.703 131.753 127.203C131.853 126.703 130.753 125.603 130.453 125.103C129.553 123.603 129.253 121.903 129.453 120.203C129.553 119.503 129.653 118.903 130.053 118.303C130.353 117.803 130.853 117.403 131.453 117.203C132.053 117.003 132.853 117.203 133.153 116.603C133.253 116.403 133.253 116.203 133.253 116.003C133.053 113.703 132.053 110.603 134.953 109.103C136.153 108.503 137.753 108.503 139.153 108.803C141.553 109.403 143.753 110.803 144.853 112.703C146.453 115.503 145.453 118.803 143.453 121.203C142.953 121.803 142.953 122.703 143.753 123.203C144.353 123.603 145.053 123.603 145.453 124.103C145.853 124.603 145.853 125.403 145.853 125.903C145.753 126.903 145.753 127.903 145.553 128.903C145.353 130.003 145.053 131.103 144.553 132.103C144.053 133.103 143.353 134.003 142.653 134.903C141.853 135.703 141.253 136.703 140.353 137.403C139.453 138.203 138.353 138.803 137.053 138.903C135.753 139.203 134.353 138.803 133.353 138.103Z"
								fill="white"
								stroke="#2459E7"
								strokeWidth="2"
								strokeMiterlimit="10"
								strokeLinecap="round"
								strokeLinejoin="round"
							/>
							<path
								d="M141.553 117.203C141.553 117.203 138.153 120.503 137.153 120.803"
								stroke="#2459E7"
								strokeWidth="2"
								strokeMiterlimit="10"
								strokeLinecap="round"
								strokeLinejoin="round"
							/>
							<path
								d="M140.053 123.402C140.053 123.402 137.653 125.902 135.653 126.702"
								stroke="#2459E7"
								strokeWidth="2"
								strokeMiterlimit="10"
								strokeLinecap="round"
								strokeLinejoin="round"
							/>
							<path
								d="M141.353 128.801C141.353 128.801 136.953 131.101 134.453 131.601"
								stroke="#2459E7"
								strokeWidth="2"
								strokeMiterlimit="10"
								strokeLinecap="round"
								strokeLinejoin="round"
							/>
							<path
								d="M136.153 138.903C136.153 138.903 137.353 132.503 137.853 131.103C138.153 129.803 138.153 127.003 137.153 124.503C136.853 123.003 136.753 117.803 137.453 114.603C138.053 111.203 138.153 109.503 138.153 108.703"
								stroke="#2459E7"
								strokeWidth="2"
								strokeMiterlimit="10"
								strokeLinecap="round"
								strokeLinejoin="round"
							/>
							<path
								d="M145.153 141.5C136.153 137 127.953 139.7 128.253 140.4"
								stroke="#2459E7"
								strokeWidth="2"
								strokeMiterlimit="10"
								strokeLinecap="round"
								strokeLinejoin="round"
							/>
							<path
								d="M16.7531 123.503C15.0531 122.903 14.0531 120.703 14.8531 119.003C15.5531 117.303 17.8531 116.503 19.4531 117.403C19.2531 116.203 20.0531 115.003 21.1531 114.603C22.2531 114.203 23.6531 114.603 24.3531 115.503C25.0531 113.503 27.2531 112.203 29.4531 112.403C31.0531 112.603 32.4531 113.603 33.1531 115.103C34.0531 114.203 35.7531 114.203 36.6531 115.203C37.5531 116.103 37.4531 117.803 36.4531 118.703C37.6531 118.403 38.9531 118.903 39.5531 119.903C40.1531 120.903 40.2531 122.303 39.5531 123.303"
								stroke="#2459E7"
								strokeWidth="2"
								strokeMiterlimit="10"
								strokeLinecap="round"
								strokeLinejoin="round"
							/>
							<path
								d="M19.0531 134.6C20.3531 134.3 21.7531 134.1 22.9531 133.5C23.9531 133 24.8531 131.9 23.7531 131C23.0531 130.4 21.2531 130.5 20.3531 130.5C18.7531 130.4 17.1531 130.3 15.6531 131C14.6531 131.5 11.2531 133.9 11.6531 135.2C12.2531 136.7 17.8531 134.8 19.0531 134.6Z"
								stroke="#2459E7"
								strokeWidth="2"
								strokeMiterlimit="10"
								strokeLinecap="round"
								strokeLinejoin="round"
							/>
							<path
								d="M36.2531 129.6C35.5531 129.4 34.7531 129.2 34.0531 129.3C31.5531 129.4 29.5531 131.4 32.0531 133.1C33.6531 134.2 35.9531 134.3 37.7531 134.5C38.8531 134.7 40.2531 134.6 40.7531 133.6C41.0531 132.9 40.7531 132 40.2531 131.5C39.7531 130.9 38.9531 130.6 38.2531 130.4C37.6531 130 36.9531 129.8 36.2531 129.6Z"
								stroke="#2459E7"
								strokeWidth="2"
								strokeMiterlimit="10"
								strokeLinecap="round"
								strokeLinejoin="round"
							/>
							<path
								d="M195.353 76.5004C196.253 76.3004 197.153 76.0004 197.853 75.2004C198.953 74.1004 199.753 72.5004 199.053 70.9004C198.553 69.6004 196.853 67.5004 193.053 67.8004C192.253 67.9004 191.153 64.4004 190.653 63.8004C189.353 62.2004 187.553 61.3004 185.553 60.9004C184.553 60.7004 183.453 60.7004 182.553 61.1004C182.153 61.3004 180.353 62.6004 180.653 63.2004C180.653 63.2004 176.253 55.7004 170.053 62.1004C168.553 63.9004 168.053 65.3004 168.053 65.3004C168.053 65.3004 162.353 64.0004 161.153 68.6004C160.653 71.0004 159.653 75.8004 167.053 76.2004C172.253 76.2004 177.453 76.3004 182.653 76.4004C186.253 76.5004 189.853 77.0004 193.553 76.6004C194.153 76.7004 194.753 76.6004 195.353 76.5004Z"
								fill="white"
								stroke="#2459E7"
								strokeWidth="2"
								strokeMiterlimit="10"
								strokeLinecap="round"
								strokeLinejoin="round"
							/>
							<path
								d="M150.553 101.3H169.653C170.853 99.7001 170.453 97.1001 168.953 95.8001C167.453 94.5001 164.953 94.4001 163.553 95.8001C163.653 93.7001 162.253 91.7001 160.253 91.1001C158.253 90.5001 155.953 91.4001 154.853 93.1001C152.353 91.4001 148.453 92.4001 147.153 95.2001C145.753 97.9001 147.553 100.5 150.553 101.3Z"
								fill="white"
								stroke="#2459E7"
								strokeWidth="2"
								strokeMiterlimit="10"
								strokeLinecap="round"
								strokeLinejoin="round"
							/>
							<path
								d="M92.0531 12.4023L100.753 20.9023L111.953 16.4023L116.753 27.5023L128.853 27.7023L129.053 39.8023L140.153 44.5023L135.653 55.8023L144.053 64.5023L135.653 73.1023L140.153 84.4023L129.053 89.2023L128.853 101.302L116.753 101.402L111.953 112.502L100.753 108.102L92.0531 116.502L83.3531 108.102L72.1531 112.502L67.3531 101.402L55.2531 101.302L55.0531 89.2023L43.9531 84.4023L48.4531 73.1023L39.9531 64.5023L48.4531 55.8023L43.9531 44.5023L55.0531 39.8023L55.2531 27.7023L67.3531 27.5023L72.1531 16.4023L83.3531 20.9023L92.0531 12.4023Z"
								fill="white"
								stroke="#2459E7"
								strokeWidth="2"
								strokeMiterlimit="10"
								strokeLinecap="round"
								strokeLinejoin="round"
							/>
							<path
								d="M91.7531 26.0017C70.2531 26.1017 52.9531 43.5017 53.1531 64.8017C53.2531 86.1017 70.8531 103.202 92.2531 103.002C113.753 102.902 131.053 85.5017 130.853 64.2017C130.753 42.9017 113.253 25.8017 91.7531 26.0017Z"
								stroke="#2459E7"
								strokeWidth="2"
								strokeMiterlimit="10"
								strokeLinecap="round"
								strokeLinejoin="round"
							/>
							<path
								d="M105.353 60.9016L89.0531 87.8016H86.0531L88.9531 70.3016H79.9531H79.8531C79.0531 70.3016 78.3531 69.6016 78.3531 68.8016C78.3531 68.5016 78.6531 67.9016 78.6531 67.9016L94.9531 41.1016H97.9531L94.9531 58.6016H104.053H104.153C104.953 58.6016 105.653 59.3016 105.653 60.1016C105.653 60.4016 105.553 60.7016 105.353 60.9016Z"
								stroke="#2459E7"
								strokeWidth="2"
								strokeMiterlimit="10"
								strokeLinecap="round"
								strokeLinejoin="round"
							/>
							<path
								d="M152.853 1.60156L154.953 7.50156L160.853 9.60156L154.953 11.7016L152.853 17.6016L150.753 11.7016L144.853 9.60156L150.753 7.50156L152.853 1.60156Z"
								fill="white"
								stroke="#2459E7"
								strokeWidth="2"
								strokeMiterlimit="10"
								strokeLinecap="round"
								strokeLinejoin="round"
							/>
							<path
								d="M14.8531 50.6016L16.9531 56.5016L22.8531 58.6016L16.9531 60.7016L14.8531 66.6016L12.7531 60.7016L6.85309 58.6016L12.7531 56.5016L14.8531 50.6016Z"
								fill="white"
								stroke="#2459E7"
								strokeWidth="2"
								strokeMiterlimit="10"
								strokeLinecap="round"
								strokeLinejoin="round"
							/>
							<path
								d="M170.853 21.6016L173.253 28.2016L179.853 30.6016L173.253 33.0016L170.853 39.6016L168.453 33.0016L161.853 30.6016L168.453 28.2016L170.853 21.6016Z"
								fill="white"
								stroke="#2459E7"
								strokeWidth="2"
								strokeMiterlimit="10"
								strokeLinecap="round"
								strokeLinejoin="round"
							/>
						</g>
						<defs>
							<clipPath id="clip-welcome">
								<rect
									width="199.4"
									height="150.9"
									fill="white"
									transform="translate(0.953064 0.601562)"
								/>
							</clipPath>
						</defs>
					</svg>
				</div>
				<h1>{__('AMP for WordPress', 'amp')}</h1>
			</div>
			<div className="welcome__body">
				<div className={'welcome__section'}>
					<div className="welcome__section-icon">
						<svg
							width="41"
							height="41"
							viewBox="0 0 41 41"
							fill="none"
							xmlns="http://www.w3.org/2000/svg"
						>
							<g clipPath="url(#clip-welcome-2">
								<path
									d="M8.37808 39.1765C7.85308 39.1765 7.41558 38.739 7.41558 38.214C7.41558 38.1265 7.41558 38.1265 7.41558 38.039L9.60308 25.439L0.415576 16.514C0.0655762 16.164 0.0655762 15.5515 0.415576 15.114C0.590576 14.939 0.765576 14.8515 0.940576 14.8515L13.6281 13.014L19.3156 1.55146C19.5781 1.11396 20.1906 0.93896 20.7156 1.20146C20.8031 1.28896 20.8906 1.37646 20.9781 1.55146L26.6656 13.014L39.3531 14.8515C39.8781 14.939 40.2281 15.3765 40.1406 15.9015C40.1406 16.0765 40.0531 16.339 39.8781 16.4265L30.6906 25.439L32.8781 38.039C32.9656 38.564 32.6156 39.089 32.0906 39.1765C31.9156 39.1765 31.6531 39.1765 31.4781 39.089L20.1031 33.139L8.72808 39.089C8.64058 39.1765 8.46558 39.1765 8.37808 39.1765ZM3.12808 16.5146L11.2656 24.4771C11.5281 24.7396 11.6156 25.0021 11.5281 25.3521L9.60308 36.5521L19.6656 31.3021C19.9281 31.1271 20.2781 31.1271 20.5406 31.3021L30.6031 36.5521L28.7656 25.2646C28.6781 24.9146 28.8531 24.6521 29.0281 24.3896L37.1656 16.4271L25.8781 14.7646C25.5281 14.6771 25.2656 14.5021 25.1781 14.2396L20.1031 4.08958L15.0281 14.3271C14.8531 14.5896 14.5906 14.7646 14.3281 14.8521L3.12808 16.5146Z"
									fill="#005AF0"
								/>
								<path
									d="M18.8774 29.0242H17.9149L18.8774 23.3367H15.9899C15.7274 23.3367 15.5524 23.1617 15.5524 22.8992C15.5524 22.8117 15.6399 22.7242 15.6399 22.6367L20.8024 13.8867H21.7649L20.8024 19.5742H23.7774C24.0399 19.5742 24.2149 19.7492 24.2149 20.0117C24.2149 20.0992 24.2149 20.1867 24.1274 20.2742L18.8774 29.0242Z"
									fill="#005AF0"
								/>
							</g>
							<defs>
								<clipPath id="clip-welcome-2">
									<rect
										width="40"
										height="40"
										fill="white"
										transform="translate(0.153076 0.125)"
									/>
								</clipPath>
							</defs>
						</svg>
					</div>
					<div className="welcome__section-description">
						<h4>{__('AMP and WordPress', 'amp')}</h4>
						<p>
							{__(
								'AMP provides support for building beautiful, fast, engaging, secure, and accessible sites, and the AMP plugin makes it easy to take advantage of AMP on WordPress.',
								'amp'
							)}{' '}
							<a
								href="https://amp-wp.org/"
								target="_blank"
								rel="noreferrer noopener"
							>
								{__('Learn more.', 'amp')}
							</a>
						</p>
					</div>
				</div>

				<div className={'welcome__section'}>
					<div className="welcome__section-icon">
						<svg
							width="41"
							height="40"
							viewBox="0 0 41 40"
							fill="none"
							xmlns="http://www.w3.org/2000/svg"
						>
							<g clipPath="url(#clip-welcome-3)">
								<path
									d="M16.045 18.1819H3.35247C1.83747 18.1806 0.609343 16.9525 0.608093 15.4375V2.74437C0.609343 1.22937 1.83747 0.00125 3.35247 0H16.0456C17.5606 0.00125 18.7887 1.22937 18.79 2.74437V15.4375C18.7887 16.9525 17.5606 18.1806 16.0456 18.1819H16.045ZM3.35247 1.81813C2.84122 1.81875 2.42684 2.23312 2.42622 2.74437V15.4369C2.42684 15.9481 2.84122 16.3625 3.35247 16.3631H16.045C16.5562 16.3625 16.9706 15.9481 16.9712 15.4369V2.74437C16.9706 2.23312 16.5562 1.81875 16.045 1.81813H3.35247Z"
									fill="#005AF0"
								/>
								<path
									d="M1.51684 16.3639C1.01497 16.3639 0.608093 15.957 0.608093 15.4552C0.608093 15.2039 0.709968 14.977 0.874343 14.8127L6.97184 8.71516L9.69934 11.4427L15.1537 5.98828L18.5237 9.35828C18.6818 9.52141 18.7787 9.74453 18.7787 9.99016C18.7787 10.492 18.3718 10.8989 17.87 10.8989C17.6243 10.8989 17.4018 10.8014 17.2381 10.6433L15.1537 8.55891L9.69934 14.0133L6.97184 11.2858L2.15997 16.0977C1.99559 16.262 1.76809 16.3639 1.51747 16.3639H1.51684Z"
									fill="#005AF0"
								/>
								<path
									d="M8.78933 5.00047C8.78933 5.75359 8.1787 6.36422 7.42558 6.36422C6.67245 6.36422 6.06183 5.75359 6.06183 5.00047C6.06183 4.24734 6.67245 3.63672 7.42558 3.63672C8.1787 3.63672 8.78933 4.24734 8.78933 5.00047Z"
									fill="#005AF0"
								/>
								<path
									d="M34.2437 6.36438H26.9712C26.4693 6.36438 26.0618 5.9575 26.0618 5.45562C26.0618 4.95375 26.4687 4.54688 26.9712 4.54688H34.2437C34.7456 4.54688 35.1531 4.95375 35.1531 5.45562C35.1531 5.9575 34.7462 6.36438 34.2437 6.36438Z"
									fill="#005AF0"
								/>
								<path
									d="M34.2438 10.0011H26.9713C26.4694 10.0011 26.0619 9.59422 26.0619 9.09234C26.0619 8.59047 26.4688 8.18359 26.9713 8.18359H34.2438C34.7456 8.18359 35.1531 8.59047 35.1531 9.09234C35.1531 9.59422 34.7463 10.0011 34.2438 10.0011Z"
									fill="#005AF0"
								/>
								<path
									d="M34.2438 13.6378H26.9713C26.4694 13.6378 26.0619 13.2309 26.0619 12.7291C26.0619 12.2272 26.4688 11.8203 26.9713 11.8203H34.2438C34.7456 11.8203 35.1531 12.2272 35.1531 12.7291C35.1531 13.2309 34.7463 13.6378 34.2438 13.6378Z"
									fill="#005AF0"
								/>
								<path
									d="M36.9543 18.1819H24.2618C22.7468 18.1806 21.5187 16.9525 21.5175 15.4375V2.74437C21.5187 1.22937 22.7468 0.00125 24.2618 0H36.955C38.47 0.00125 39.6981 1.22937 39.6993 2.74437V15.4375C39.6981 16.9525 38.47 18.1806 36.955 18.1819H36.9543ZM24.2612 1.81813C23.75 1.81875 23.3356 2.23312 23.335 2.74437V15.4369C23.3356 15.9481 23.75 16.3625 24.2612 16.3631H36.9537C37.465 16.3625 37.8793 15.9481 37.88 15.4369V2.74437C37.8793 2.23312 37.465 1.81875 36.9537 1.81813H24.2612Z"
									fill="#005AF0"
								/>
								<path
									d="M36.9543 40H3.35247C1.83747 39.9988 0.609343 38.7706 0.608093 37.2556V22.7444C0.609343 21.2294 1.83747 20.0013 3.35247 20H36.9543C38.4693 20.0013 39.6975 21.2294 39.6987 22.7444V37.2556C39.6975 38.7706 38.4693 39.9988 36.9543 40ZM3.35247 21.8181C2.84122 21.8188 2.42684 22.2331 2.42622 22.7444V37.2556C2.42684 37.7669 2.84122 38.1812 3.35247 38.1819H36.9543C37.4656 38.1812 37.88 37.7669 37.8806 37.2556V22.7444C37.88 22.2331 37.4656 21.8188 36.9543 21.8181H3.35247Z"
									fill="#005AF0"
								/>
								<path
									d="M17.8806 34.5456C17.3787 34.5456 16.9718 34.1388 16.9718 33.6362V26.4244C16.9718 25.9225 17.3787 25.5156 17.8806 25.5156C18.0668 25.5156 18.2406 25.5719 18.3849 25.6681L18.3818 25.6663L23.8362 29.2719C24.0831 29.4369 24.2437 29.715 24.2437 30.03C24.2437 30.345 24.0831 30.6231 23.8393 30.7862L23.8362 30.7881L18.3818 34.3944C18.2406 34.4887 18.0674 34.545 17.8812 34.545L17.8806 34.5456ZM18.7893 28.1156V31.9456L21.6868 30.03L18.7893 28.1156Z"
									fill="#005AF0"
								/>
							</g>
							<defs>
								<clipPath id="clip-welcome-3">
									<rect
										width="40"
										height="40"
										fill="white"
										transform="translate(0.153076)"
									/>
								</clipPath>
							</defs>
						</svg>
					</div>
					<div className="welcome__section-description">
						<h4>{__('Configure your site with AMP', 'amp')}</h4>
						<p>
							{__(
								'Regardless of technical expertise, the onboarding flow guides you through configuring the plugin in a few easy steps.',
								'amp'
							)}
						</p>
					</div>
				</div>

				<div className={'welcome__section'}>
					<div className="welcome__section-icon">
						<IconLaptopSearch />
					</div>
					<div className="welcome__section-description">
						<h4>{__('Site review', 'amp')}</h4>
						<p>
							{__(
								'At the end of onboarding the AMP plugin is fully configured, and your site is ready to start serving great experiences to your users.',
								'amp'
							)}
						</p>
					</div>
				</div>
			</div>
		</div>
	);
}
