/**
 * External Dependencies
 */
import { __ } from '@wordpress/i18n';
import { context } from '@advancedAds';

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

import AdvAdsLogo from '@assets/img/logo.svg';
import DashboardScreenshot from '@assets/img/welcome/dashboard.png';

export function Hero() {
	const { adsenseConnected } = context;

	return (
		<section className="relative overflow-hidden bg-secondary-black px-14 pt-13 pb-15 box-border">
			<div className="pointer-events-none absolute inset-0 bg-[radial-gradient(120%_90%_at_50%_118%,rgba(4,116,162,.85)_0%,rgba(4,116,162,.28)_38%,rgba(27,24,58,0)_68%)]" />
			<div className="pointer-events-none absolute left-0 right-0 bottom-[-16%] h-[52%] rounded-t-[50%] border-t border-[rgba(140,200,230,.35)]" />

			<div className="relative z-2 flex flex-col items-center gap-0 text-center space-y-2">
				<div className="flex items-center gap-2.5">
					<AdvAdsLogo className="size-8 brightness-0 invert" />
					<span className="text-2xl leading-none tracking-[-.01em] text-white">
						{ __( 'Advanced', 'advanced-ads' ) }{ ' ' }
						<strong className="font-bold">
							{ __( 'Ads', 'advanced-ads' ) }
						</strong>
					</span>
				</div>

				<div className="text-[140px] font-light leading-none tracking-[-.05em] text-white [text-shadow:0_0_60px_rgba(120,200,235,.55)]">
					2.0
				</div>

				<h1 className="mb-2 max-w-2xl text-4xl font-extralight leading-tight tracking-[-.02em] text-white text-pretty">
					{ __( 'Your first ad is 60 seconds away', 'advanced-ads' ) }
				</h1>

				<p className="max-w-xl text-lg leading-relaxed text-white/72 text-pretty">
					{ __(
						"Every ad type, every placement, every targeting rule, all from one screen inside WordPress. Let's get something earning.",
						'advanced-ads'
					) }
				</p>

				<div className="my-4 flex flex-wrap justify-center gap-3">
					<PrimaryButton
						href={ adminUrl(
							'post-new.php?post_type=advanced_ads'
						) }
						size="xl"
						variant="invert"
					>
						{ __( 'Create your first ad', 'advanced-ads' ) }
					</PrimaryButton>
					{ ! adsenseConnected && (
						<PrimaryButton
							href="/connect-adsense"
							onClick={ ( event ) => {
								event.preventDefault();
								if (
									typeof globalThis.advadsMapiConnect ===
									'function'
								) {
									globalThis.advadsMapiConnect(
										'open-google'
									);
								}
							} }
							size="xl"
							variant="outline"
						>
							{ __( 'Connect AdSense', 'advanced-ads' ) }
						</PrimaryButton>
					) }
				</div>

				<div className="-mb-18 mt-9 flex aspect-16/8 w-full max-w-5xl flex-col items-center justify-center gap-1.75 overflow-hidden rounded-t-md border border-dashed border-white/30 bg-white/6 box-border">
					<img
						src={ DashboardScreenshot }
						alt={ __(
							'The Advanced Ads dashboard with a live ad and its placement',
							'advanced-ads'
						) }
						className="size-full object-cover object-top"
					/>
				</div>
			</div>
		</section>
	);
}