//export const Dialogue: React.FC<Props> = ({children, close, isVisible, title}: Props) => {
// import { useRef } from 'react'
interface IntroArgs {
	onSetShowReg: Function;
}

export default function Intro( { onSetShowReg }: IntroArgs ) {
	return (
		<>
			<p className="mt-6 mb-3 text-pretty text-2xl text-zinc-100">
				Registration with the service provider is required in order to
				use this service.
			</p>
			<p className="mt-6 mb-3 text-pretty text-xl text-zinc-100">
				This service is designed to enhance the security of form
				submissions and admin access. It&rsquo;s{ ' ' }
				<b className="font-black">privacy-first</b> plugin, our servers
				only use data strictly necessary to provide the service and
				authenticate users.
			</p>
			<p className="mt-6 mb-3 text-pretty text-md text-zinc-100">
				The{ ' ' }
				<b className="font-black">
					basic service is entirely free to use
				</b>
				; however, it uses a simple challenge that can be easily solved
				by bots using AI. Our premium service offers comprehensive
				protection and is available to all registered users.
			</p>
			<button
				type="button"
				onClick={ () => onSetShowReg( true ) }
				className="inline-flex w-full mt-4 justify-center rounded-md bg-sky-700 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-sky-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-600"
			>
				Begin
			</button>
			<p className="mt-6 mb-3 text-pretty text-md text-zinc-100">
				Note that this plugin should be integrated into your overall
				security strategy. Documentation and support are provided, but
				appropriate configuration is necessary. The plugin has been
				tested on the current versions of the most popular form plugins.{ ' ' }
				<b className="font-black">
					It is crucial to keep your installation and its installed
					plugins and themes up-to-date.
				</b>
			</p>
		</>
	);
}