import React from "react";
import { __ } from "@wordpress/i18n";

const AIChatbot = () => {
	if (betterdocs_admin?.betterdocs_ChatBot_plugin == true) {
		return null;
	}

	return (
		<>
			<div className="betterdocs-aiChatbot-section">
				<div className="betterdocs-row">
					<div className="betterdocs-overview-col betterdocs-content-left betterdocs-col-7 ">
						<h2 className="betterdocs-flex align-items-center  betterdocs-section-title">BetterDocs
							<span className="betterdocs-title-icon">
								<svg
									width="26"
									height="26"
									viewBox="0 0 26 26"
									fill="none"
									xmlns="http://www.w3.org/2000/svg"
								>
									<defs>
										<linearGradient id="paint0_linear" x1="1" y1="13" x2="25" y2="13" gradientUnits="userSpaceOnUse">
											<stop stopColor="#E6CBFB" />
											<stop offset="0.29" stopColor="#EDFDD3" />
											<stop offset="0.705" stopColor="#BFFFD9" />
											<stop offset="1" stopColor="#C4F1FF" />
										</linearGradient>
										<clipPath id="clip0">
											<rect x="1" y="1" width="24" height="24" rx="5.5" fill="white" />
										</clipPath>
									</defs>
									<g clipPath="url(#clip0)">
										<rect x="1" y="1" width="24" height="24" rx="5.5" fill="url(#paint0_linear)" />
										<path
											d="M7.00586 12.9956C7.00586 12.7138 7.23539 12.4887 7.515 12.4536C9.64891 12.1855 11.3356 10.2527 11.5248 7.83633C11.5444 7.58654 11.7456 7.38281 11.9962 7.38281C12.2467 7.38281 12.448 7.58654 12.4675 7.83633C12.6567 10.2527 14.3435 12.1855 16.4773 12.4536C16.757 12.4887 16.9865 12.7138 16.9865 12.9956C16.9865 13.2774 16.757 13.5025 16.4773 13.5376C14.3435 13.8057 12.6567 15.7386 12.4675 18.1549C12.448 18.4047 12.2467 18.6084 11.9962 18.6084C11.7456 18.6084 11.5444 18.4047 11.5248 18.1549C11.3356 15.7386 9.6489 13.8057 7.515 13.5376C7.23539 13.5025 7.00586 13.2774 7.00586 12.9956Z"
											fill="#101828"
										/>
										<path
											d="M15.9863 6.82446C15.9863 6.73992 16.0552 6.67239 16.1391 6.66185C16.7792 6.58144 17.2853 6.00159 17.342 5.27668C17.3479 5.20174 17.4083 5.14062 17.4834 5.14062C17.5586 5.14062 17.619 5.20174 17.6248 5.27668C17.6816 6.00159 18.1876 6.58144 18.8278 6.66185C18.9117 6.67239 18.9805 6.73992 18.9805 6.82446C18.9805 6.909 18.9117 6.97654 18.8278 6.98707C18.1876 7.06748 17.6816 7.64735 17.6248 8.37225C17.619 8.44718 17.5586 8.5083 17.4834 8.5083C17.4083 8.5083 17.3479 8.44718 17.342 8.37225C17.2853 7.64735 16.7792 7.06748 16.1391 6.98707C16.0552 6.97654 15.9863 6.909 15.9863 6.82446Z"
											fill="#101828"
										/>
										<path
											d="M15.0039 18.6123C15.0039 18.4996 15.0957 18.4095 15.2076 18.3955C16.0611 18.2883 16.7358 17.5151 16.8115 16.5486C16.8193 16.4487 16.8998 16.3672 17 16.3672C17.1003 16.3672 17.1807 16.4487 17.1886 16.5486C17.2643 17.5151 17.9389 18.2883 18.7925 18.3955C18.9043 18.4095 18.9962 18.4996 18.9962 18.6123C18.9962 18.725 18.9043 18.8151 18.7925 18.8291C17.9389 18.9363 17.2643 19.7095 17.1886 20.676C17.1807 20.7759 17.1003 20.8574 17 20.8574C16.8998 20.8574 16.8193 20.7759 16.8115 20.676C16.7358 19.7095 16.0611 18.9363 15.2076 18.8291C15.0957 18.8151 15.0039 18.725 15.0039 18.6123Z"
											fill="#101828"
										/>
									</g>
								</svg>
							</span>

							<span className="betterdocs-title-style">
								{__('AI Chatbot Addon', 'betterdocs')}
							</span>

						</h2>
						<p className="betterdocs-section-sub-title">Quickly provide accurate answers to visitors’ questions about your website’s documentation with our AI-powered chatbot addon.</p>
						<a href="https://betterdocs.co/dashboard-purchase-ai-chatbot" className="betterdocs-chartbort-button">Get AI Chatbot</a>
					</div>
					<div className="betterdocs-overview-col betterdocs-content-right betterdocs-col-5 ">
						<div className="aichatbotThump-wrapper">
							<span className="aichatbotThump-bg-icon">
								<svg width="75" height="82" viewBox="0 0 75 82" fill="none" xmlns="http://www.w3.org/2000/svg">
									<path
										d="M28.5301 42.1821L23.5863 45.0306L20.7503 40.0796L25.6941 37.2311L28.5301 42.1821ZM48.3054 30.7879L43.3616 33.6364L40.5255 28.6855L45.4693 25.8369L48.3054 30.7879ZM65.2446 14.4428L70.9166 24.3448L65.9728 27.1933L73.0629 39.5708C73.6537 40.6022 74.0145 41.6805 74.1453 42.8056C74.276 43.9306 74.1987 45.0213 73.9132 46.0774C73.6278 47.1336 73.1453 48.1148 72.4656 49.0208C71.786 49.9269 70.9312 50.6766 69.9012 51.2701L59.7046 57.1452L51.0411 81.4806L42.7103 66.937L30.3508 74.0584C29.3208 74.6518 28.2444 75.0148 27.1216 75.1472C25.9989 75.2797 24.9107 75.2036 23.8572 74.9189C22.8037 74.6342 21.8253 74.1518 20.9221 73.4718C20.0189 72.7918 19.2718 71.9361 18.681 70.9047L11.5909 58.5272L6.64713 61.3757L0.975078 51.4737L5.91889 48.6252L1.66485 41.1987C1.07401 40.1673 0.713213 39.089 0.582464 37.9639C0.451715 36.8389 0.529055 35.7482 0.814483 34.692C1.09991 33.6359 1.58245 32.6547 2.2621 31.7487C2.94175 30.8426 3.79656 30.0929 4.82652 29.4994L22.1298 19.5295L17.4991 11.4455C16.5013 11.4374 15.562 11.1726 14.6811 10.6513C13.8002 10.1299 13.0958 9.43824 12.5679 8.57633C12.1691 7.8801 11.9285 7.16126 11.8463 6.41981C11.764 5.67836 11.8162 4.96235 12.0029 4.27176C12.1895 3.58118 12.5105 2.91603 12.966 2.27631C13.4215 1.63659 13.9914 1.13676 14.6757 0.776805C15.3709 0.37623 16.0885 0.134259 16.8284 0.0508925C17.5683 -0.0324738 18.2827 0.0189195 18.9716 0.205076C19.6604 0.391231 20.3237 0.712147 20.9614 1.16782C21.5992 1.6235 22.0972 2.19398 22.4555 2.87926C22.9577 3.756 23.2115 4.70727 23.2169 5.73308C23.2223 6.75889 22.9643 7.71352 22.4429 8.59697L27.0736 16.681L44.377 6.71114C45.4069 6.1177 46.4833 5.75474 47.6061 5.62227C48.7289 5.4898 49.817 5.56592 50.8705 5.85063C51.924 6.13534 52.9024 6.61768 53.8056 7.29766C54.7089 7.97765 55.4559 8.83337 56.0467 9.86482L60.3008 17.2913L65.2446 14.4428ZM51.1029 12.7134C50.7189 12.0429 50.1419 11.6037 49.372 11.3956C48.6021 11.1876 47.8825 11.2764 47.213 11.6621L7.66254 34.4504C6.99307 34.8362 6.55404 35.4149 6.34546 36.1868C6.13688 36.9586 6.22461 37.6797 6.60865 38.3502L23.6248 68.0561C24.0089 68.7266 24.5858 69.1658 25.3557 69.3739C26.1256 69.5819 26.8453 69.4931 27.5147 69.1074L44.818 59.1375L49.8254 67.8791L55.0147 53.2624L67.0652 46.3191C67.7347 45.9333 68.1737 45.3546 68.3823 44.5827C68.5908 43.8109 68.5031 43.0898 68.1191 42.4193L51.1029 12.7134ZM28.4706 49.5217C30.6992 50.1239 32.9418 50.2723 35.1983 49.9667C37.4548 49.6612 39.5947 48.9427 41.6179 47.8112C43.6263 46.654 45.3304 45.1748 46.7303 43.3737C48.1301 41.5725 49.1245 39.5419 49.7135 37.2819L55.2059 38.7988C54.4045 41.7643 53.0816 44.4471 51.2373 46.8474C49.3929 49.2477 47.1318 51.2193 44.4539 52.7622C41.8018 54.2903 38.9775 55.2489 35.981 55.6378C32.9845 56.0267 29.9944 55.8289 27.0107 55.0444L28.4706 49.5217Z"
										fill="url(#paint0_linear_11456_38863)"
									/>
									<defs>
										<linearGradient
											id="paint0_linear_11456_38863"
											x1="14.6738"
											y1="0.773582"
											x2="58.6498"
											y2="77.0966"
											gradientUnits="userSpaceOnUse"
										>
											<stop stopColor="#00B682" stopOpacity="0.13" />
											<stop offset="1" stopColor="#03B784" stopOpacity="0" />
										</linearGradient>
									</defs>
								</svg>
							</span>
							<img src={`${betterdocs_admin.dir_url}assets/static/admin/images/aichatbotThump.png`} className="aichatbotThump-card-img" />
						</div>
					</div>
				</div>
			</div>
		</>
	);
};

export default AIChatbot;