import { __ } from '@wordpress/i18n';

type FAQItemProps = {
	question: string;
	children: React.ReactNode;
};

const FAQItem = ( props: FAQItemProps ) => {
	const { question, children } = props;
	return (
		<details className="gs-support-faq__item">
			<summary className="gs-support-faq__question">{ question }</summary>
			<div className="gs-support-faq__answer">{ children }</div>
		</details>
	);
};

export default function SupportFAQ() {
	return (
		<div className="gs-support-box gs-support-box--faq">
			<div className="gs-support-box__header">
				<h2>
					{ __(
						'Frequently Asked Questions',
						'liana-with-growthstack'
					) }
				</h2>
			</div>
			<div className="gs-support-faq">
				<FAQItem
					question={ __(
						'What is GrowthStack?',
						'liana-with-growthstack'
					) }
				>
					<p>
						{ __(
							'GrowthStack is a versatile marketing toolkit that integrates directly into your WordPress dashboard. It gives you the tools needed to maximize the impact of your marketing efforts and effectively convert website visitors. It works with the Gutenberg editor, turning WordPress into a growth marketing tool.',
							'liana-with-growthstack'
						) }
					</p>
					<p>
						{ __(
							'The main features include:',
							'liana-with-growthstack'
						) }
					</p>
					<ul>
						<li>
							<b>
								{ __(
									'Personalization',
									'liana-with-growthstack'
								) }
								:
							</b>{ ' ' }
							{ __(
								'Tailor content for specific target groups.',
								'liana-with-growthstack'
							) }
						</li>
						<li>
							<b>
								{ __(
									'A/B-testing',
									'liana-with-growthstack'
								) }
								:
							</b>{ ' ' }
							{ __(
								'Easily run tests to improve content and make data-driven improvements.',
								'liana-with-growthstack'
							) }
						</li>
						<li>
							<b>
								{ __(
									'Contextual Analytics',
									'liana-with-growthstack'
								) }
								:
							</b>{ ' ' }
							{ __(
								'Access performance stats and monitor success directly from the WordPress admin.',
								'liana-with-growthstack'
							) }
						</li>
					</ul>
				</FAQItem>
				<FAQItem
					question={ __(
						'How can I personalize content using GrowthStack?',
						'liana-with-growthstack'
					) }
				>
					<p>
						{ __(
							"Personalization is created within the page's editing view. You select the content block you want to personalize, and then define personalization rules. Rules are checked in order, and if none match, the user sees the default content.",
							'liana-with-growthstack'
						) }
					</p>

					<p>
						{ __(
							'Personalization rules can be based on criteria such as:',
							'liana-with-growthstack'
						) }
					</p>

					<ul>
						<li>
							{ __(
								'Time (day/time)',
								'liana-with-growthstack'
							) }
						</li>
						<li>{ __( 'Country', 'liana-with-growthstack' ) }</li>
						<li>
							{ __(
								'Preferred Language (browser/device)',
								'liana-with-growthstack'
							) }
						</li>
						<li>
							{ __(
								'Device Type (desktop, mobile, tablet)',
								'liana-with-growthstack'
							) }
						</li>
						<li>
							{ __(
								'User Status (new vs. returning visitors)',
								'liana-with-growthstack'
							) }
						</li>
						<li>
							{ __(
								'Query Parameter (e.g., from a newsletter campaign)',
								'liana-with-growthstack'
							) }
						</li>
						<li>
							{ __( 'Visited Pages', 'liana-with-growthstack' ) }
						</li>
						<li>
							{ __(
								'Liana Segment (any segment created in LianaAutomation)',
								'liana-with-growthstack'
							) }
						</li>
					</ul>
				</FAQItem>
				<FAQItem
					question={ __(
						'How do I use A/B testing?',
						'liana-with-growthstack'
					) }
				>
					<p>
						{ __(
							'An A/B test is created on a specific page from the top-right menu in the page editor. This creates two versions: Original and Variation. You can define goals for the test, such as:',
							'liana-with-growthstack'
						) }
					</p>

					<ul>
						<li>
							<b>
								{ __( 'Page view', 'liana-with-growthstack' ) }
							</b>{ ' ' }
							{ __(
								'(visiting a page within website)',
								'liana-with-growthstack'
							) }
						</li>
						<li>
							<b>
								{ __(
									'Form Submission',
									'liana-with-growthstack'
								) }
							</b>
						</li>
						<li>
							<b>
								{ __(
									'External Link Click',
									'liana-with-growthstack'
								) }
							</b>{ ' ' }
							{ __(
								'(useful for conversions happening in another service)',
								'liana-with-growthstack'
							) }
						</li>
						<li>
							<b>
								{ __(
									'Selector Click',
									'liana-with-growthstack'
								) }
							</b>{ ' ' }
							{ __(
								'(allows you to select an UI element to track clicks)',
								'liana-with-growthstack'
							) }
						</li>
						<li>
							<b>
								{ __( 'URL View', 'liana-with-growthstack' ) }
							</b>{ ' ' }
							{ __(
								"More advanced version of 'Page view', allowing for wildcard URLs such */blog/*",
								'liana-with-growthstack'
							) }
						</li>
					</ul>

					<p>
						{ __(
							'The A/B test should typically run for at least two weeks, or other sufficient time to get measurable results, to gather sufficient data. Results are accessible from the A/B test menu and can be compared to select the winner.',
							'liana-with-growthstack'
						) }
					</p>
				</FAQItem>
				<FAQItem
					question={ __(
						'What analytics metrics can I see with GrowthStack?',
						'liana-with-growthstack'
					) }
				>
					<p>
						{ __(
							'You can access general and A/B test analytics directly from the WordPress admin. Key metrics include:',
							'liana-with-growthstack'
						) }
					</p>

					<p>
						<b>{ __( 'Overview:', 'liana-with-growthstack' ) }</b>
					</p>
					<ul>
						<li>{ __( 'Pageviews', 'liana-with-growthstack' ) }</li>
						<li>{ __( 'Users', 'liana-with-growthstack' ) }</li>
						<li>{ __( 'Sessions', 'liana-with-growthstack' ) }</li>
						<li>
							{ __(
								'Engaged Session Count (sessions with at least two pages viewed and 10 seconds spent on the site)',
								'liana-with-growthstack'
							) }
						</li>
						<li>
							{ __(
								'Engagement Rate',
								'liana-with-growthstack'
							) }
						</li>
						<li>
							{ __(
								'Average Engagement Time',
								'liana-with-growthstack'
							) }
						</li>
					</ul>

					<p>
						<b>
							{ __(
								'Most popular pages:',
								'liana-with-growthstack'
							) }
						</b>
					</p>
					<ul>
						<li>
							{ __(
								'Most popular pages - pages with most visits',
								'liana-with-growthstack'
							) }
						</li>
						<li>
							{ __(
								'Most popular landing pages - pages where most users arrive to site via',
								'liana-with-growthstack'
							) }
						</li>
					</ul>

					<p>
						<b>{ __( 'Audience:', 'liana-with-growthstack' ) }</b>
					</p>
					<ul>
						<li>
							{ __(
								'Liana Segment (Most popular LianaAutomation segments visiting the site)',
								'liana-with-growthstack'
							) }
						</li>
						<li>
							{ __(
								'Traffic sources',
								'liana-with-growthstack'
							) }
						</li>
						<li>
							{ __(
								'New vs. Returning users',
								'liana-with-growthstack'
							) }
						</li>
						<li>
							{ __( 'Device type', 'liana-with-growthstack' ) }
						</li>
						<li>
							{ __(
								'UTM campaign, source & medium',
								'liana-with-growthstack'
							) }
						</li>
						<li>
							{ __(
								'Other campaigns, such as Google ads (glcid) or Meta ads (fbclid)',
								'liana-with-growthstack'
							) }
						</li>
					</ul>
				</FAQItem>
				<FAQItem
					question={ __(
						'How can I leverage my existing customer data, e.g. from CRM, to create advanced personalizations for my website using LianaAutomation and GrowthStack?',
						'liana-with-growthstack'
					) }
				>
					<p>
						{ __(
							'You can create advanced, dynamic personalizations for your website using LianaAutomation and GrowthStack by using LianaAutomation to unify your existing customer data, define specific target groups (Segments), and then map those Segments directly to custom website content in GrowthStack.',
							'liana-with-growthstack'
						) }
					</p>

					<ol>
						<li>
							{ __(
								' Unify All Customer Data: Consolidate data from all sources (e.g., LianaMailer, CRM, e-commerce) into LianaAutomation to create comprehensive customer profiles.',
								'liana-with-growthstack'
							) }
						</li>
						<li>
							{ __(
								'Build Advanced Dynamic Segments: Create highly specific target groups (Segments) in LianaAutomation by combining multiple data points, such as Client Status (from CRM) and Email Engagement (from LianaMailer).',
								'liana-with-growthstack'
							) }
						</li>
						<li>
							{ __(
								'Map Segments to Content: Use the Liana Segment rule in GrowthStack to map these advanced Segments directly to custom website content (e.g., banners, CTAs, testimonials).',
								'liana-with-growthstack'
							) }
						</li>
						<li>
							{ __(
								'Deliver Hyper-Relevant Messaging: Show content tailored to the customer\'s exact relationship (e.g., "Contract Renewal Offer" for existing clients versus "Request a Demo" for prospects) to boost conversions and experience.',
								'liana-with-growthstack'
							) }
						</li>
					</ol>
				</FAQItem>
				<FAQItem
					question={ __(
						'How can I connect LianaAutomation to GrowthStack?',
						'liana-with-growthstack'
					) }
				>
					<p>
						{ __(
							'To connect your LianaAutomation with GrowthStack, you need API credentials and a dedicated channel created for GrowthStack within LianaAutomation. You can request these API credentials from your Liana contact person or support team.',
							'liana-with-growthstack'
						) }
					</p>
					<p>
						{ __(
							'Once you have the credentials and channel created, go to Settings in GrowthStack, select LianaAutomation, and enter your API keys. The connection wizard will then guide you through configuring the specific website data and events that should be sent to LianaAutomation.',
							'liana-with-growthstack'
						) }
					</p>
					<p>
						{ __(
							'By connecting GrowthStack and LianaAutomation, you can transfer the following key events and data to build more detailed customer profiles and trigger automations:',
							'liana-with-growthstack'
						) }
					</p>
					<ul>
						<li>
							{ __(
								'Page browsing events (page visits)',
								'liana-with-growthstack'
							) }
						</li>
						<li>
							{ __(
								'Form submissions: Users can easily toggle this on/off for specific forms, allowing them to choose if a particular form should not send information to LianaAutomation.',
								'liana-with-growthstack'
							) }
						</li>
						<li>
							{ __(
								'WooCommerce events: These include events like purchases, add-to-carts, and changes to order states.',
								'liana-with-growthstack'
							) }
						</li>
						<li>
							{ __( 'Login events', 'liana-with-growthstack' ) }
						</li>
					</ul>
					<h3>
						{ __(
							'Using LianaAutomation Forms',
							'liana-with-growthstack'
						) }
					</h3>
					<p>
						{ __(
							'Once connected, you can add LianaAutomation Forms easily to your site using the dedicated "LianaAutomation form" Gutenberg block. You can add this block anywhere on the page and select the desired form from a dropdown menu, eliminating the need to deal with manual embed code.',
							'liana-with-growthstack'
						) }
					</p>
				</FAQItem>
				<FAQItem
					question={ __(
						'How can I connect my website contact forms to LianaMailer?',
						'liana-with-growthstack'
					) }
				>
					<p>
						{ __(
							'Enter your LianaMailer API credentials into the dedicated LianaMailer tab within the GrowthStack Settings. GrowthStack supports popular third-party form builders, including Gravity Forms, Contact Form 7, and WPForms.',
							'liana-with-growthstack'
						) }
					</p>
					<p>
						{ __(
							'Once your API credentials are set up, the website contact forms that GrowthStack recognizes will be visible and become connectable on the Forms -page. You can then configure each form individually, selecting which specific form fields should be transferred to LianaMailer and which mailing lists the new contact should be automatically added to.',
							'liana-with-growthstack'
						) }
					</p>
				</FAQItem>
				<FAQItem
					question={ __(
						"Why can't I create or add a personalisation?",
						'liana-with-growthstack'
					) }
				>
					<p>
						{ __(
							'If you are experiencing issues adding a personalisation through GrowthStack, it is likely due to technical configurations within your WordPress environment. Please check the following common causes:',
							'liana-with-growthstack'
						) }
					</p>
					<ul>
						<li>
							<b>
								{ __(
									'Theme Restrictions:',
									'liana-with-growthstack'
								) }
							</b>{ ' ' }
							{ __(
								'Your website theme may not currently allow the "growthstack/personalization" block. To fix this, the block must be added to the allowed blocks list within your theme\'s code.',
								'liana-with-growthstack'
							) }
						</li>
						<li>
							<b>
								{ __(
									'Public Post Type:',
									'liana-with-growthstack'
								) }
							</b>{ ' ' }
							{ __(
								'The post type you are working on (e.g., a specific page or custom post) must be set to "public." If it is private or restricted, the personalisation tool cannot access it.',
								'liana-with-growthstack'
							) }
						</li>
						<li>
							<b>
								{ __(
									'Custom Fields Support:',
									'liana-with-growthstack'
								) }
							</b>{ ' ' }
							{ __(
								'The post type must have "custom-fields" support enabled. This is required for the editor to read and write the metadata necessary for personalisation to function.',
								'liana-with-growthstack'
							) }
						</li>
						<li>
							<b>
								{ __(
									'Developer Disallowance:',
									'liana-with-growthstack'
								) }
							</b>{ ' ' }
							{ __(
								'Your site developer may have explicitly disallowed certain post types via a hook. We provide a specific hook — "growthstack/personalization/post_types" where developers can define exactly which post types are supported.',
								'liana-with-growthstack'
							) }
						</li>
					</ul>
				</FAQItem>
			</div>
		</div>
	);
}