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

/**
 * Internal Dependencies
 */
import { FeatureCard } from '../components/FeatureCard';
import AdSenseIcon from '@assets/img/ad-types/adsense.svg';
import ContentIcon from '@assets/img/ad-types/content.svg';
import PlainIcon from '@assets/img/ad-types/plain.svg';
import GroupIcon from '@assets/img/ad-types/group.svg';

const ITEMS = [
	{
		icon: <AdSenseIcon className="size-10" />,
		title: __( 'Monetize anything', 'advanced-ads' ),
		description: __(
			'AdSense, Amazon affiliate, Ad Manager, or your own advertisers. One workflow.',
			'advanced-ads'
		),
	},
	{
		icon: <ContentIcon className="size-10" />,
		title: __( 'Place without code', 'advanced-ads' ),
		description: __(
			'Header, sidebar, or after any paragraph, without opening a theme file.',
			'advanced-ads'
		),
	},
	{
		icon: <PlainIcon className="size-10" />,
		title: __( 'Target precisely', 'advanced-ads' ),
		description: __(
			'Show the right ad by page, category, device, or visitor role.',
			'advanced-ads'
		),
	},
	{
		icon: <GroupIcon className="size-10" />,
		title: __( 'Earn more per slot', 'advanced-ads' ),
		description: __(
			'Rotate, weight, and test creatives so your best inventory works hardest.',
			'advanced-ads'
		),
	},
];

export function TrustBand() {
	return (
		<section className="border-y border-border bg-gray-50 px-8 py-16 text-center">
			<p className="m-0 mb-10 text-2xl leading-normal text-gray-900">
				{ __(
					'Ad management trusted by 150,000+ WordPress sites',
					'advanced-ads'
				) }
			</p>
			<div className="mx-auto grid max-w-5xl grid-cols-4 gap-7">
				{ ITEMS.map( ( item ) => (
					<FeatureCard
						key={ item.title }
						variant="circle"
						icon={ item.icon }
						title={ item.title }
						description={ item.description }
					/>
				) ) }
			</div>
		</section>
	);
}