import React, { Fragment } from 'react';
import { Tab, TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/react';
function replaceWithBr( str: string ) {
	return str.replace( /\n/g, '<br />' );
}
import imageLogin from '../../images/login-playground.png';
import imageCode from '../../images/feature-code.svg';
import imageUsers from '../../images/feature-users.svg';
import imageUnLock from '../../images/feature-unlock.svg';
const tabs = [
	{
		name: 'Overview',
		features: [
			{
				name: 'Overview',
				description:
					' Regularly updating your installation, along with its installed plugins and themes, is crucial for maintaining security.\n\n' +
					'On a standard installation, this plugin provides protection for logins and comments. Since WordPress doesn’t support forms without plugins, we’ve made an effort to support the most widely used form plugins. If your preferred form plugin isn&rsquo;t supported, please contact us, and we&rsquo;ll do our best to add it to the development roadmap.\n\n' +
					'You can also use this plugin in development mode or in the WordPress playground. A test version of the plugin, complete with examples, has been made available for you to experiment with.',

				imageSrc: imageLogin,
				imageAlt: 'Isometric preview of the login page.',
			},
		],
	},
	{
		name: 'How does it work?',
		features: [
			{
				name: 'How does it work?',
				description:
					'This plugin works by requesting a captcha to be generated by our cloud service. This captcha is delivered to your site with some encrypted data. When a user attempts to solve the captcha, the service uses this data to validate their response. The plugin then passes or fails the action, thereby protecting your site.',
				imageSrc: imageCode,
				imageAlt: 'Isometric screenshot illustraitng a code sample',
			},
		],
	},
	{
		name: 'Authorised roles',
		features: [
			{
				name: 'Authorised roles',
				description:
					'These are the roles that won&rsquo;t be presented a captcha: Administrator and Editor roles are always treated as Authorised roles. However, since WordPress allows for open registration without email authentication, we don&rsquo;t assume that other roles are safe.',
				imageSrc: imageUsers,
				imageAlt: 'Isometric illustration of users',
			},
		],
	},
	{
		name: 'Protect',
		features: [
			{
				name: 'Protect',
				description:
					'You can configure what you want this plugin to protect, forms, comments and login can be individually managed. Toggling options applies the settings immediately.\n\n' +
					'We fund the development of this plugin by making a tiny charge for each successful login or submission, we believe is the fairest way to charge as it encourages us to deal with the issue in an efficient way.\n\n' +
					'New customers get free credits to try out the service and see if it fits their needs.',
				imageSrc: imageUnLock,
				imageAlt: 'Isometric illustration of a lock',
			},
		],
	},
];

export default function Features() {
	return (
		<div>
			<section
				aria-labelledby="features-heading"
				className="border-b border-white/20 pb-4 pt-4 text-white"
			>
				<div className="mx-auto max-w-2xl px-8 lg:max-w-none lg:px-0">
					<div className="max-w-3xl">
						<p className="text-xl/7">
							Web-Engine Sentry is a plugin that offers protection
							for comments, administrative login, and form
							submissions. While it won&rsquo;t prevent human
							submissions, its primary objective is to make it
							challenging for automated programs to access your
							site.
						</p>
					</div>

					<TabGroup className="my-4">
						<div className="-mx-4 flex overflow-x-auto sm:mx-0">
							<div className="flex-auto border-b border-white/20 px-4 sm:px-0">
								<TabList className="-mb-px flex space-x-10">
									{ tabs.map( ( tab ) => (
										<Tab
											key={ tab.name }
											className="whitespace-nowrap border-b-2 border-transparent py-6 text-sm font-medium text-white/90 hover:border-sky-200 hover:text-sky-400 data-[selected]:border-sky-300 data-[selected]:text-sky-400"
										>
											{ tab.name }
										</Tab>
									) ) }
								</TabList>
							</div>
						</div>
						<TabPanels as={ Fragment }>
							{ tabs.map( ( tab ) => (
								<TabPanel
									key={ tab.name }
									className="space-y-16 pt-10 lg:pt-16"
								>
									{ tab.features.map( ( feature ) => (
										<div
											key={ feature.name }
											className="flex flex-col-reverse lg:grid lg:grid-cols-12 lg:gap-x-8"
										>
											<div className="mt-6 lg:col-span-5 lg:mt-0">
												<h3 className="text-lg font-medium text-white">
													{ feature.name }
												</h3>
												<p
													className="mt-2 text-sm text-white/90"
													dangerouslySetInnerHTML={ {
														__html: replaceWithBr(
															feature.description
														),
													} }
												/>
											</div>
											<div className="lg:col-span-7">
												<img
													alt={ feature.imageAlt }
													src={ feature.imageSrc }
													className="w-full object-cover"
												/>
											</div>
										</div>
									) ) }
								</TabPanel>
							) ) }
						</TabPanels>
					</TabGroup>
				</div>
			</section>
		</div>
	);
}