/**
 * External Dependencies
 */
import { __ } from '@wordpress/i18n';
import { navigate } from '@admin/router';

/**
 * Internal Dependencies
 */
import { TestimonialCard } from '../components/TestimonialCard';
import { RouterLink } from '../components/RouterLink';
import { PrimaryButton } from '@admin/components/PrimaryButton';
import WebsiteScreenshot from '@assets/img/welcome/website.png';

const CHECKLIST = [
	{
		title: __( 'Cache busting', 'advanced-ads' ),
		description: __(
			'Rotation and targeting survive your cache plugin.',
			'advanced-ads'
		),
	},
	{
		title: __( 'Ad-blocker recovery', 'advanced-ads' ),
		description: __(
			"Reach the audience you currently can't monetize.",
			'advanced-ads'
		),
	},
	{
		title: __( 'Click-fraud protection', 'advanced-ads' ),
		description: __(
			'Cap suspicious clicks before they cost you an account.',
			'advanced-ads'
		),
	},
	{
		title: __( 'Placement A/B tests', 'advanced-ads' ),
		description: __(
			'Let data choose the position, not a hunch.',
			'advanced-ads'
		),
	},
	{
		title: __( 'Lazy loading', 'advanced-ads' ),
		description: __(
			'Faster pages, better viewability, higher CPMs.',
			'advanced-ads'
		),
	},
	{
		title: __( 'Ad grids & background ads', 'advanced-ads' ),
		description: __(
			'Premium formats that sell for premium rates.',
			'advanced-ads'
		),
	},
];

export function ProUpsell() {
	return (
		<section className="relative overflow-hidden bg-secondary-black px-8 py-16">
			<div className="pointer-events-none absolute inset-0 bg-[radial-gradient(100%_120%_at_88%_0%,rgba(4,116,162,.55)_0%,rgba(27,24,58,0)_62%)]" />
			<div className="relative z-2 grid grid-cols-[1.15fr_.85fr] items-start gap-11">
				<div>
					<div className="mb-4 flex items-center gap-2.5">
						<span className="rounded-[3px] bg-amber-400 px-1.75 py-1.25 font-mono text-xs font-semibold uppercase tracking-widest text-secondary-black">
							{ __( 'Advanced Ads Pro', 'advanced-ads' ) }
						</span>
						<span className="text-sm text-white/55">
							{ __( 'From $59/year', 'advanced-ads' ) }{ ' ' }
							{ __(
								'· 30-day money-back guarantee',
								'advanced-ads'
							) }
						</span>
					</div>
					<h2 className="mb-3 max-w-2xl text-4xl font-extralight leading-tight tracking-[-.02em] text-white text-pretty">
						<strong className="font-semibold">
							{ __( '10,000+ publishers', 'advanced-ads' ) }
						</strong>{ ' ' }
						{ __( 'run Advanced Ads Pro.', 'advanced-ads' ) }
					</h2>
					<p className="mb-6.5 max-w-lg text-base leading-relaxed text-white/70 text-pretty">
						{ __(
							"They didn't buy more features. They bought the ones that decide whether an ad gets seen, gets counted, and gets paid for.",
							'advanced-ads'
						) }
					</p>
					<div className="mb-16 grid grid-cols-2 gap-8">
						{ CHECKLIST.map( ( item ) => (
							<div
								key={ item.title }
								className="flex items-start gap-2.5"
							>
								<span className="flex-none font-semibold leading-normal text-[13px] text-[#5cc8f5]">
									✓
								</span>
								<div>
									<div className="text-lg font-medium leading-[1.4] text-white">
										{ item.title }
									</div>
									<div className="text-base leading-relaxed text-white/55">
										{ item.description }
									</div>
								</div>
							</div>
						) ) }
					</div>
					<div className="flex flex-wrap items-center gap-4.5">
						<PrimaryButton
							onClick={ () =>
								navigate( '/plans', { from: 'welcome' } )
							}
							size="xl"
							variant="invert"
						>
							{ __( 'Upgrade to Pro', 'advanced-ads' ) }
						</PrimaryButton>
						<RouterLink
							to="/plans"
							className="text-base text-white/70 underline underline-offset-4 hover:text-white"
						>
							{ __( 'Compare all plans', 'advanced-ads' ) }
						</RouterLink>
					</div>
				</div>
				<div className="flex flex-col gap-4">
					<div className="aspect-4/3 w-full overflow-hidden">
						<img
							src={ WebsiteScreenshot }
							alt={ __(
								'Pro modules screen with ad-blocker recovery switched on',
								'advanced-ads'
							) }
							className="size-full object-cover object-top"
						/>
					</div>
					<div className="rounded border border-white/14 bg-white/5 px-5 py-4.5">
						<TestimonialCard
							theme="dark"
							quote={ __(
								'"Advanced Ads is a great plugin that makes it easier to manage your ads, display them in the right locations, and target the right users. If you are someone who is already making a decent income from their blog, using pro addons will further optimize your revenue"',
								'advanced-ads'
							) }
							image="https://wpadvancedads.com/wp-content/uploads/2023/05/aa-testimonial-harsh-agrawal-hi.jpg"
							name={ __( 'Harsh Agrawal', 'advanced-ads' ) }
							role={ __( 'Publisher', 'advanced-ads' ) }
						/>
					</div>
				</div>
			</div>
		</section>
	);
}