import { __ } from "@wordpress/i18n";
import styles from "./MarketingOptions.module.css";

export default function MarketingOptions() {
	return (
		<>
			<p className={styles.connectionLead}>
				{__(
					"Keep your own n8n workflow, or let Flexible Chat run your AI assistant.",
					"flexible-chat",
				)}
			</p>
			<div className={styles.connectionOptions}>
				<div className={styles.connectionOption}>
					<h3>{__("Self-managed n8n", "flexible-chat")}</h3>
					<p>{__("You manage:", "flexible-chat")}</p>
					<ul>
						<li>{__("n8n hosting", "flexible-chat")}</li>
						<li>{__("workflow building", "flexible-chat")}</li>
						<li>{__("prompt maintenance", "flexible-chat")}</li>
						<li>{__("knowledge indexing", "flexible-chat")}</li>
					</ul>
					<a
						href={window.flexibleChatHistory.settingsUrl}
						className="button button-secondary"
					>
						{__("Configure n8n workflow", "flexible-chat")}
					</a>
				</div>
				<div className={styles.connectionOptionFeatured}>
					<h3>{__("Managed AI assistant", "flexible-chat")}</h3>
					<p>{__("Flexible Chat manages:", "flexible-chat")}</p>
					<ul>
						<li>{__("chat infrastructure", "flexible-chat")}</li>
						<li>{__("knowledge indexing", "flexible-chat")}</li>
						<li>{__("prompt maintenance", "flexible-chat")}</li>
						<li>{__("conversation history", "flexible-chat")}</li>
					</ul>
					<a
						href={window.flexibleChatHistory.upgradeUrl}
						className="button button-primary"
						target="_blank"
						rel="noopener noreferrer"
					>
						{__("Choose a managed plan", "flexible-chat")}
					</a>
				</div>
			</div>
		</>
	);
}