import { __ } from '@wordpress/i18n';
import React from 'react';
import { ExternalLink } from 'lucide-react';
import { Page } from './UI/index.jsx';
import PluginNotificationsCard from './PluginNotificationsCard.jsx';
import '../../styles/help.css';

export default function Help() {
	return (
		<Page
			title={ __( 'Help', 'arrayfunnel' ) }
			subtitle={ __(
				'Direct support, feature requests, and guides',
				'arrayfunnel'
			) }
		>
			<section
				className="arrayfunnel-help"
				aria-label={ __( 'Support information', 'arrayfunnel' ) }
			>
				<div className="arrayfunnel-help__card arrayfunnel-help__card--support">
					<h2 className="arrayfunnel-help__title">
						{ __(
							'Get help directly from the plugin developer',
							'arrayfunnel'
						) }
					</h2>
					<p className="arrayfunnel-help__description">
						{ __(
							'If you’re stuck, found a bug, or need help with setup, contact the plugin developer directly. A short message is enough to get started.',
							'arrayfunnel'
						) }
					</p>
					<div className="arrayfunnel-help__links">
						<a
							className="arrayfunnel-button arrayfunnel-button--primary arrayfunnel-help__link"
							href="https://arrayhash.com/contact/#contact-form"
							target="_blank"
							rel="noopener noreferrer"
						>
							{ __( 'Contact Now', 'arrayfunnel' ) }
						</a>
					</div>
				</div>
				<div className="arrayfunnel-help__card">
					<h2 className="arrayfunnel-help__title">
						{ __( 'Documentation & Support', 'arrayfunnel' ) }
					</h2>
					<p className="arrayfunnel-help__description">
						{ __(
							'Find answers or ask for help with ArrayFunnel on WordPress.org.',
							'arrayfunnel'
						) }
					</p>
					<div className="arrayfunnel-help__links">
						<a
							className="arrayfunnel-button arrayfunnel-button--secondary arrayfunnel-help__link"
							href="https://wordpress.org/support/plugin/arrayfunnel/"
							target="_blank"
							rel="noopener noreferrer"
						>
							{ __( 'Support Forum', 'arrayfunnel' ) }
							<ExternalLink size={ 14 } aria-hidden="true" />
						</a>
					</div>
				</div>
				<PluginNotificationsCard />
			</section>
		</Page>
	);
}