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

/**
 * Internal Dependencies
 */
import { TestimonialCard } from '../components/TestimonialCard';

const STATS = [
	{ value: '4.6 ★', label: __( 'WordPress.org', 'advanced-ads' ) },
	{ value: '1,100+', label: __( 'Reviews', 'advanced-ads' ) },
	{ value: '12 yrs', label: __( 'Actively developed', 'advanced-ads' ) },
];

const TESTIMONIALS = [
	{
		quote: __(
			'"WP Advanced Ads is the plugin you need if you’re serious about ad revenue on your website. I use it for my own site as well as numerous clients, some of which are top-of-the-line influencers in Denmark—and it just works. Whenever I’m in need of it, I get fast and extremely qualified support. I’ll recommend this plugin to everybody working with ads"',
			'advanced-ads'
		),
		name: __( 'Mads Andersen', 'advanced-ads' ),
		role: __( 'Publisher', 'advanced-ads' ),
		image: 'https://wpadvancedads.com/wp-content/uploads/2023/05/aa-testimonial-mads-andersen-hi.jpg',
	},
	{
		quote: __(
			'"Hi, I’m Jose and I wanted to share some very positive things about the AdSense ad tool. I’ve seen great progress in my ad production, so if you have the chance to try it for your websites and blog, I highly recommend it. I’m very satisfied, so I’m giving it a 5. Thanks, and best wishes!"',
			'advanced-ads'
		),
		name: __( 'Jose', 'advanced-ads' ),
		role: __( 'Publisher', 'advanced-ads' ),
		image: 'https://secure.gravatar.com/avatar/c4c32e80332adaa9c024abcf0a13eab271d540d4e42b49538ea0c27b523dff0f?s=100&d=retro&r=g',
	},
];

export function SocialProof() {
	return (
		<section className="bg-white px-8 py-16 text-center">
			<h2 className="m-0 text-5xl font-semibold tracking-[-.025em] text-gray-900">
				{ __( 'Publishers who made the switch', 'advanced-ads' ) }
			</h2>
			<div className="mt-8 mb-12 flex flex-wrap justify-center gap-20">
				{ STATS.map( ( stat ) => (
					<div key={ stat.label }>
						<div className="text-3xl font-semibold leading-none text-gray-900">
							{ stat.value }
						</div>
						<div className="mt-1.5 text-base leading-[1.4] text-gray-500">
							{ stat.label }
						</div>
					</div>
				) ) }
			</div>
			<div className="mx-auto grid max-w-5xl grid-cols-2 gap-5 text-left">
				{ TESTIMONIALS.map( ( testimonial ) => (
					<div
						key={ testimonial.quote }
						className="rounded border border-border bg-gray-50 px-6 py-5.5"
					>
						<TestimonialCard { ...testimonial } />
					</div>
				) ) }
			</div>
		</section>
	);
}