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

/**
 * Internal Dependencies
 */
import { FeatureCard } from '../components/FeatureCard';
import { SectionTitle } from '@admin/components/SectionTitle';
import AdSenseIcon from '@assets/img/ad-types/adsense.svg';
import ImageIcon from '@assets/img/ad-types/image.svg';
import ContentIcon from '@assets/img/ad-types/content.svg';
import GroupIcon from '@assets/img/ad-types/group.svg';
import PlainIcon from '@assets/img/ad-types/plain.svg';
import GamIcon from '@assets/img/ad-types/gam.svg';
import CacheBustingIcon from '@assets/img/welcome/cachebusting-blue.svg';
import AdBlockerIcon from '@assets/img/welcome/adblocker-blue.svg';
import AbTestsIcon from '@assets/img/welcome/abtesting-new.svg';

const FEATURES = [
	{
		icon: <AdSenseIcon className="size-8" />,
		title: __( 'AdSense, done properly', 'advanced-ads' ),
		description: __(
			'Connect your account, pull in existing units, and let Auto ads and manual units coexist without fighting.',
			'advanced-ads'
		),
	},
	{
		icon: <ImageIcon className="size-8" />,
		title: __( 'Every ad type', 'advanced-ads' ),
		description: __(
			'Image banners, plain code, rich content, Amazon affiliate links, Google Ad Manager. One editor for all of them.',
			'advanced-ads'
		),
	},
	{
		icon: <ContentIcon className="size-8" />,
		title: __( 'Placements, not code edits', 'advanced-ads' ),
		description: __(
			'Drop ads into the header, footer, sidebar, or after any paragraph, without touching a theme file.',
			'advanced-ads'
		),
	},
	{
		icon: <GroupIcon className="size-8" />,
		title: __( 'Ad groups & rotation', 'advanced-ads' ),
		description: __(
			'Rotate several ads through one slot with weights, so no single advertiser burns out your inventory.',
			'advanced-ads'
		),
	},
	{
		icon: <PlainIcon className="size-8" />,
		title: __( 'Display & visitor conditions', 'advanced-ads' ),
		description: __(
			'Show an ad by category, hide it from logged-in users, or switch it off on mobile. All without code.',
			'advanced-ads'
		),
	},
	{
		icon: <GamIcon className="size-8" />,
		title: __( 'Ad Manager & header bidding', 'advanced-ads' ),
		description: __(
			'Wire up Google Ad Manager inventory and keep your bidding stack in the same place as everything else.',
			'advanced-ads'
		),
	},
	{
		icon: <CacheBustingIcon className="size-8" />,
		title: __( 'Cache busting', 'advanced-ads' ),
		locked: true,
		description: __(
			'(Pro) Keeps rotation and targeting working on cached pages, where most sites quietly serve the same ad to everyone.',
			'advanced-ads'
		),
	},
	{
		icon: <AdBlockerIcon className="size-8" />,
		title: __( 'Ad-blocker recovery', 'advanced-ads' ),
		locked: true,
		description: __(
			'(Pro) Serve your ads to the visitors currently blocking them, and ask the rest politely to allow-list you',
			'advanced-ads'
		),
	},
	{
		icon: <AbTestsIcon className="size-8" />,
		title: __( 'Placement A/B tests', 'advanced-ads' ),
		locked: true,
		description: __(
			'(Pro) Split traffic between two positions and let the numbers pick the winner instead of your instinct.',
			'advanced-ads'
		),
	},
];

export function FreeFeatures() {
	return (
		<section className="bg-white px-8 py-16">
			<SectionTitle
				title={ __(
					'Everything you need to start earning. Already installed.',
					'advanced-ads'
				) }
				description={ __(
					'No setup fee, no ad revenue share, no limits on how many ads you run.',
					'advanced-ads'
				) }
				subtitle={ __( 'Included in your install', 'advanced-ads' ) }
			/>
			<div className="grid grid-cols-3 gap-8">
				{ FEATURES.map( ( feature ) => (
					<FeatureCard key={ feature.title } { ...feature } />
				) ) }
			</div>
		</section>
	);
}