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

/**
 * Internal Dependencies
 */
import { RouterLink } from '../components/RouterLink';
import { SectionTitle } from '@admin/components/SectionTitle';

const ITEMS = [
	{
		question: __( 'Where do I put my first ad?', 'advanced-ads' ),
		answer: __(
			'Wherever it will get seen. Header, sidebar, in-content, or after any paragraph, placed with the visual editor, not a theme file.',
			'advanced-ads'
		),
	},
	{
		question: __(
			'Does this work with my AdSense account?',
			'advanced-ads'
		),
		answer: __(
			'Yes. Connect your existing AdSense account and Advanced Ads works alongside your current Auto ads and manual units without conflicts.',
			'advanced-ads'
		),
	},
	{
		question: __( 'Do I need the Pro version?', 'advanced-ads' ),
		answer: __(
			'No. Everything above runs on the free plugin. Pro adds the modules that protect revenue you are already earning: cache busting, ad-blocker recovery, and A/B testing.',
			'advanced-ads'
		),
	},
	{
		question: __( 'Will ads slow my site down?', 'advanced-ads' ),
		answer: __(
			'No noticeable impact for standard placements. Pro lazy loading option loads ads only as visitors scroll to them, which speeds the page up further.',
			'advanced-ads'
		),
	},
	{
		question: __( 'Can I hide ads from certain visitors?', 'advanced-ads' ),
		answer: __(
			'Yes. Hide ads from logged-in users, specific roles like admins or subscribers, or by device, no code required.',
			'advanced-ads'
		),
	},
];

export function Faq() {
	return (
		<section className="border-y border-border bg-gray-50 px-8 py-16 text-center">
			<SectionTitle
				title={ __( 'Frequently asked questions', 'advanced-ads' ) }
				description={
					<>
						{ __(
							"Common questions on getting started. Can't find yours?",
							'advanced-ads'
						) }{ ' ' }
						<RouterLink to="/support" className="text-primary">
							{ __( 'View all resources', 'advanced-ads' ) }
						</RouterLink>
					</>
				}
			/>
			<div className="mx-auto max-w-3xl border-t border-gray-200 text-left">
				{ ITEMS.map( ( item ) => (
					<details
						key={ item.question }
						className="group border-b border-gray-200"
					>
						<summary className="flex list-none cursor-pointer items-center gap-4 px-1 py-4.25 text-lg text-gray-900 [&::-webkit-details-marker]:hidden">
							<span className="flex-1 text-left">
								{ item.question }
							</span>
							<span className="flex-none text-lg text-gray-400 transition-transform duration-150 group-open:rotate-180">
								▾
							</span>
						</summary>
						<p className="m-0 px-1 pb-5 pr-10 text-sm leading-relaxed text-gray-500 text-pretty">
							{ item.answer }
						</p>
					</details>
				) ) }
			</div>
		</section>
	);
}