/**
 * External Dependencies
 */
import { __ } from '@wordpress/i18n';
import { adminUrl } from '@admin/utils';

/**
 * Internal Dependencies
 */
import { SectionTitle } from '@admin/components/SectionTitle';
import { PrimaryButton } from '@admin/components/PrimaryButton';

const STEPS = [
	{
		number: '01',
		text: __( 'Your ad network or affiliate source', 'advanced-ads' ),
	},
	{
		number: '02',
		text: __( 'Your first ad, created for you', 'advanced-ads' ),
	},
	{
		number: '03',
		text: __( 'Placements: header, in-content, sidebar', 'advanced-ads' ),
	},
	{
		number: '04',
		text: __(
			'Who to hide ads from (admins, subscribers)',
			'advanced-ads'
		),
	},
];

export function SetupWizardCta() {
	return (
		<section className="flex flex-wrap items-center gap-10 bg-white px-8 py-16">
			<div className="min-w-xs flex-1">
				<SectionTitle
					subtitle={ __( 'Recommended first step', 'advanced-ads' ) }
					title={ __(
						"Answer four questions and we'll configure Advanced Ads for you.",
						'advanced-ads'
					) }
					description={ __(
						"What you're monetizing with, where ads should appear, and who shouldn't see them. You'll finish with a live ad already running on your site.",
						'advanced-ads'
					) }
					titleClassName="max-w-2xl"
					subtitleClassName="text-primary"
					descriptionClassName="max-w-2xl"
				/>
				<div className="flex flex-wrap items-center gap-4.5">
					<PrimaryButton
						href={ adminUrl(
							'admin.php?page=advanced-ads-app&path=/wizard'
						) }
						size="xl"
					>
						{ __( 'Start setup wizard', 'advanced-ads' ) }
					</PrimaryButton>
					{  }
					<a
						href={ adminUrl( 'admin.php?page=advanced-ads' ) }
						className="text-base text-gray-500 underline hover:text-primary underline-offset-4"
					>
						{ __( "I'll configure it myself", 'advanced-ads' ) }
					</a>
				</div>
			</div>

			<div className="min-w-xs rounded border border-border bg-gray-50 px-5.5 py-5">
				<span className="mb-3.5 block text-sm uppercase tracking-widest text-gray-400">
					{ __( 'What the wizard sets up', 'advanced-ads' ) }
				</span>
				<div className="flex flex-col gap-2.75">
					{ STEPS.map( ( step ) => (
						<div
							key={ step.number }
							className="flex items-baseline gap-2.5"
						>
							<span className="flex-none font-mono text-xs font-medium leading-normal text-gray-400">
								{ step.number }
							</span>
							<span className="text-base leading-normal text-gray-700">
								{ step.text }
							</span>
						</div>
					) ) }
				</div>
				<span className="mt-3.5 block border-t border-gray-200 pt-3 text-sm leading-[1.4] text-gray-400">
					{ __(
						'About two minutes. Everything is changeable later.',
						'advanced-ads'
					) }
				</span>
			</div>
		</section>
	);
}