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

/**
 * Internal Dependencies
 */
import { FeatureCard } from '../components/FeatureCard';
import { RouterLink } from '../components/RouterLink';
import { SectionTitle } from '@admin/components/SectionTitle';
import TrackingIcon from '@assets/img/add-ons/tracking.svg';
import StickyIcon from '@assets/img/add-ons/aa-addons-icons-stickyads.svg';
import PopupIcon from '@assets/img/add-ons/aa-addons-icons-popuplayer.svg';
import SellingIcon from '@assets/img/add-ons/aa-addons-icons-sellingads.svg';
import SliderIcon from '@assets/img/add-ons/aa-addons-icons-adslider.svg';
import GeoIcon from '@assets/img/add-ons/geo-targeting.svg';

const ICON_WRAP = 'mt-0.5 flex size-5 flex-none shrink-0 overflow-hidden';
const ICON_SVG = 'origin-top-left scale-[0.4]';

const ADD_ONS = [
	{
		icon: (
			<span className={ ICON_WRAP }>
				<TrackingIcon className={ ICON_SVG } aria-hidden />
			</span>
		),
		title: __( 'Tracking', 'advanced-ads' ),
		description: __(
			'Impressions, clicks and CTR per ad, inside wp-admin.',
			'advanced-ads'
		),
	},
	{
		icon: (
			<span className={ ICON_WRAP }>
				<GeoIcon className={ ICON_SVG } aria-hidden />
			</span>
		),
		title: __( 'Geo Targeting', 'advanced-ads' ),
		description: __(
			'Different ads by country, region or city.',
			'advanced-ads'
		),
	},
	{
		icon: (
			<span className={ ICON_WRAP }>
				<StickyIcon className={ ICON_SVG } aria-hidden />
			</span>
		),
		title: __( 'Sticky Ads', 'advanced-ads' ),
		description: __(
			'Anchors and sidebars that stay in view while scrolling.',
			'advanced-ads'
		),
	},
	{
		icon: (
			<span className={ ICON_WRAP }>
				<PopupIcon className={ ICON_SVG } aria-hidden />
			</span>
		),
		title: __( 'Popup & Layer Ads', 'advanced-ads' ),
		description: __(
			'Timed overlays and exit-intent layers with frequency caps.',
			'advanced-ads'
		),
	},
	{
		icon: (
			<span className={ ICON_WRAP }>
				<SellingIcon className={ ICON_SVG } aria-hidden />
			</span>
		),
		title: __( 'Selling Ads', 'advanced-ads' ),
		description: __(
			'Sell placements direct to advertisers from your own site.',
			'advanced-ads'
		),
	},
	{
		icon: (
			<span className={ ICON_WRAP }>
				<SliderIcon className={ ICON_SVG } aria-hidden />
			</span>
		),
		title: __( 'Slider', 'advanced-ads' ),
		description: __(
			'Rotate several creatives in one slot, visually.',
			'advanced-ads'
		),
	},
];

export function AddOns() {
	return (
		<section className="border-b border-border bg-white px-8 pt-9.5 pb-10">
			<div className="mb-1.5 flex flex-wrap items-baseline gap-4">
				<div>
					<SectionTitle
						title={ __(
							'Go further with add-ons',
							'advanced-ads'
						) }
						description={ __(
							'Buy any add-on on its own, or take the bundle if two or more sound like your setup.',
							'advanced-ads'
						) }
					/>
				</div>
				<RouterLink
					to="/plans"
					className="ml-auto text-base text-primary no-underline hover:underline"
				>
					{ __(
						'Get all of them with All Access →',
						'advanced-ads'
					) }
				</RouterLink>
			</div>
			<div className="grid grid-cols-3 gap-3.5">
				{ ADD_ONS.map( ( addOn ) => (
					<FeatureCard
						key={ addOn.title }
						variant="addon"
						icon={ addOn.icon }
						title={ addOn.title }
						description={ addOn.description }
					/>
				) ) }
			</div>
		</section>
	);
}